init

packages/ui/src/linear/index.ts

@@ -0,0 +1,4 @@
+export * from './issue';
+export * from './notification';
+export * from './login';
+export * from './not-logged-in';

packages/ui/src/linear/issue/index.tsx

@@ -0,0 +1,19 @@
+import type { Issue as IssueType } from '@linear/sdk';
+import { Link } from 'react-router-dom';
+import { IssueSearchResult } from '@linear/sdk/dist/_generated_documents';
+
+type IssueProps = {
+  issue: IssueType | IssueSearchResult;
+};
+const Issue: React.FC<IssueProps> = ({ issue }) => {
+  return (
+    <div>
+      <Link to={`/linear/issue?id=${issue.id}`}>
+        <h3 className="text-lg font-bold">{issue.title}</h3>
+      </Link>
+      {issue.description}
+    </div>
+  );
+};
+
+export { Issue };

packages/ui/src/linear/login/index.tsx

@@ -0,0 +1,35 @@
+import { LinearLogin as LinearLoginComponent } from '@refocus/sdk';
+import { useCallback, useState } from 'react';
+import { Button, Dialog, View } from '../../base';
+import { SiLinear } from 'react-icons/si';
+
+const LinearLogin: LinearLoginComponent = ({ setApiKey, cancel }) => {
+  const [value, setValue] = useState('');
+  const save = useCallback(() => {
+    setApiKey(value);
+  }, [setApiKey, value]);
+  return (
+    <Dialog open={true}>
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content>
+          <View $fc $gap="md">
+            <View
+              as="input"
+              $u
+              value={value}
+              placeholder="API Token"
+              onChange={(e) => setValue(e.target.value)}
+            />
+            <Dialog.Buttons>
+              <Button icon={<SiLinear />} onClick={save} title="Save" />
+            </Dialog.Buttons>
+          </View>
+          <Dialog.CloseButton onClick={cancel} />
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog>
+  );
+};
+
+export { LinearLogin };

packages/ui/src/linear/not-logged-in/index.tsx

@@ -0,0 +1,26 @@
+import { useLinear, useWidget, useWidgetId } from '@refocus/sdk';
+import { SiLinear } from 'react-icons/si';
+import { Button, View } from '../../base';
+import { Typography } from '../../typography';
+import { styled } from 'styled-components';
+
+const Description = styled(Typography)`
+  text-align: center;
+`;
+
+const NotLoggedIn: React.FC = () => {
+  const { login } = useLinear();
+  const type = useWidgetId();
+  const widget = useWidget(type);
+
+  return (
+    <View $p="md" $fc $items="center" $gap="md">
+      <Description>
+        You need to be logged in to Linear to see {widget?.name}
+      </Description>
+      <Button icon={<SiLinear />} onClick={login} title="Login" />
+    </View>
+  );
+};
+
+export { NotLoggedIn };

packages/ui/src/linear/notification/index.tsx

@@ -0,0 +1,16 @@
+import { Card } from '../../base/card';
+import { AsyncResponse, Expand } from '../../utils/types';
+import { LinearClient } from '@linear/sdk';
+type LinearNotificationProps = {
+  notification: Expand<
+    AsyncResponse<LinearClient['notifications']>['nodes'][0]
+  >;
+};
+
+const LinearNotification: React.FC<LinearNotificationProps> = ({
+  notification,
+}) => {
+  return <Card>Hello</Card>;
+};
+
+export { LinearNotification };