interface: add Invite stories

pkg/interface/.storybook/preview.js

@@ -51,7 +51,7 @@ export const decorators = [
           color: '0x26.3e0f',
           groups: [],
         },
-'~sampel-palnet': {
+        '~sampel-palnet': {
           status: 'A test status',
           'last-updated': 1616609090555,
           avatar: null,
@@ -60,7 +60,7 @@ export const decorators = [
           nickname: 'You',
           color: '0x26.3e0f',
           groups: [],
-        }
+        },
       },
     });
 
@@ -133,6 +133,47 @@ export const decorators = [
           },
         },
       },
+      previews: {
+        '/ship/~bollug-worlus/urbit-index': {
+          group: '/ship/~bollug-worlus/urbit-index',
+          channels: {
+            '/ship/~darrux-landes/index-weekly': {
+              metadata: {
+                preview: false,
+                vip: '',
+                title: 'Index Weekly',
+                description: '',
+                creator: '~bollug-worlus',
+                picture: '',
+                hidden: false,
+                config: {
+                  graph: 'publish',
+                },
+                'date-created': '~2020.4.6..21.53.30..dc68',
+                color: '0x0',
+              },
+              'app-name': 'graph',
+              resource: '/ship/~bollug-worlus/index-weekly',
+              group: '/ship/~bollug-worlus/urbit-index',
+            },
+          },
+          members: 1237,
+          metadata: {
+            preview: false,
+            vip: '',
+            title: 'Urbit Index',
+            description: '',
+            creator: '~bollug-worlus',
+            picture: '',
+            hidden: false,
+            config: {
+              group: null,
+            },
+            'date-created': '~2020.4.6..21.53.30..dc68',
+            color: '0x0',
+          },
+        },
+      },
     });
 
     useContactState.setState({

pkg/interface/src/stories/Invite.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { Box } from '@tlon/indigo-react';
+import { InviteItem, InviteItemProps } from '~/views/components/Invite';
+import { JoinProgress } from '@urbit/api/groups';
+
+export default {
+  title: 'Notifications/Invite',
+  component: InviteItem
+} as Meta;
+
+const Template: Story<InviteItemProps> = args => (
+  <Box backgroundColor="white" p="0" maxWidth="90%" width="fit-content">
+    <InviteItem {...args} />
+  </Box>
+);
+
+const pendingJoin = (progress: JoinProgress) => ({
+  hidden: false,
+  started: Date.now() - 3600,
+  ship: '~haddef-sigwen',
+  progress
+});
+
+export const Pending = Template.bind({});
+Pending.args = {
+  pendingJoin: pendingJoin('start'),
+  resource: '/ship/~bollug-worlus/urbit-index'
+};
+
+export const Errored = Template.bind({});
+Errored.args = {
+  pendingJoin: pendingJoin('no-perms'),
+  resource: '/ship/~bollug-worlus/urbit-index'
+};
+
+export const Done = Template.bind({});
+Done.args = {
+  pendingJoin: pendingJoin('done'),
+  resource: '/ship/~bollug-worlus/urbit-index'
+};