interface: add more stories

pkg/interface/.storybook/preview.js

@@ -5,6 +5,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 import useGraphState from '~/logic/state/graph';
 import useMetadataState from '~/logic/state/metadata';
+import useContactState from '~/logic/state/contact';
 import '~/views/landscape/css/custom.css';
 import '~/views/css/fonts.css';
 import '~/views/apps/chat/css/custom.css';
@@ -88,6 +89,21 @@ export const decorators = [
       },
     });
 
+    useContactState.setState({
+      contacts: {
+        '~sampel-palnet': {
+          status: 'Just urbiting',
+          'last-updated': 1621511447583,
+          avatar: null,
+          cover: null,
+          bio: 'An urbit user',
+          nickname: 'Sample Planet',
+          color: '0xee.5432',
+          groups: [],
+        },
+      },
+    });
+
     useGraphState.setState({
       looseNodes: {
         'darrux-landes/development': {

pkg/interface/src/stories/Author.stories.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import { Box } from '@tlon/indigo-react';
+import Author, { AuthorProps } from '~/views/components/Author';
+
+export default {
+  title: 'Identity/Author',
+  component: Author
+} as Meta;
+
+const Template: Story<AuthorProps> = args => (
+  <Box backgroundColor="white" p="2" width="fit-content">
+    <Author {...args} />
+  </Box>
+);
+
+export const WithNicknameTime = Template.bind({});
+
+WithNicknameTime.args = {
+  ship: 'sampel-palnet',
+  showImage: true,
+  size: 24,
+  sigilPadding: 6,
+  date: Date.now()
+};
+
+export const WithNickname = Template.bind({});
+
+WithNickname.args = {
+  ship: 'sampel-palnet',
+  showImage: true,
+  size: 24,
+  sigilPadding: 6,
+  dontShowTime: true
+};
+
+export const NoContactTime = Template.bind({});
+
+NoContactTime.args = {
+  ship: 'sampel-sampel',
+  showImage: true,
+  size: 24,
+  sigilPadding: 6,
+  date: Date.now()
+};
+
+export const NoContact = Template.bind({});
+
+NoContact.args = {
+  ship: 'sampel-sampel',
+  showImage: true,
+  size: 24,
+  sigilPadding: 6,
+  dontShowTime: true
+};
+
+export const RelativeTime = Template.bind({});
+
+RelativeTime.args = {
+  ship: 'sampel-palnet',
+  showImage: true,
+  size: 24,
+  sigilPadding: 6,
+  isRelativeTime: true,
+  date: Date.now() - 3600000
+};

pkg/interface/src/stories/ColorInput.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import { Box } from '@tlon/indigo-react';
+import { Formik } from 'formik';
+import { ColorInput, ColorInputProps } from '~/views/components/ColorInput';
+
+const initialValues = {
+  color: '#33FF22'
+};
+
+export default {
+  title: 'Form/ColorInput',
+  component: ColorInput
+} as Meta;
+
+const Template: Story<ColorInputProps> = args => (
+  <Box backgroundColor="white" p="2" width="fit-content">
+    <Formik initialValues={initialValues} onSubmit={() => {}}>
+      <ColorInput {...args} id="color" />
+    </Formik>
+  </Box>
+);
+
+export const Label = Template.bind({});
+
+Label.args = {
+  label: 'A color input',
+  placeholder: '#444444'
+};
+
+export const NoLabel = Template.bind({});
+
+NoLabel.args = {
+  placeholder: '#444444'
+};
+
+export const Disabled = Template.bind({});
+
+Disabled.args = {
+  disabled: true
+};

pkg/interface/src/stories/GraphContentTall.stories.tsx

@@ -35,6 +35,7 @@ const Template: Story<GraphContentProps> = args => (
 
 export const Omnibus = Template.bind({});
 Omnibus.args = {
+  tall: true,
   contents: [
     {
       text: `# Structure of Document

pkg/interface/src/stories/ImageInput.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import { Box } from '@tlon/indigo-react';
+import { Formik } from 'formik';
+import { ImageInput, ImageInputProps } from '~/views/components/ImageInput';
+
+const initialValues = {
+  url: undefined
+};
+
+export default {
+  title: 'Form/ImageInput',
+  component: ImageInput
+} as Meta;
+
+const Template: Story<ImageInputProps> = args => (
+  <Box backgroundColor="white" p="2">
+    <Formik initialValues={initialValues} onSubmit={() => {}}>
+      <ImageInput {...args} id="url" />
+    </Formik>
+  </Box>
+);
+
+export const Label = Template.bind({});
+
+Label.args = {
+  id: 'url',
+  label: 'An image upload',
+  placeholder: 'http://image.hoster'
+};

pkg/interface/src/views/components/Author.tsx

@@ -1,7 +1,6 @@
 import { BaseImage, Box, Row } from '@tlon/indigo-react';
 import moment from 'moment';
-import React, { ReactElement, ReactNode, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import React, { ReactElement, ReactNode } from 'react';
 import GlobalApi from '~/logic/api/global';
 import { Sigil } from '~/logic/lib/sigil';
 import { useCopy } from '~/logic/lib/useCopy';
@@ -13,7 +12,7 @@ import { PropFunc } from '~/types';
 import ProfileOverlay from './ProfileOverlay';
 import Timestamp from './Timestamp';
 
-interface AuthorProps {
+export interface AuthorProps {
   ship: string;
   date?: number;
   showImage?: boolean;
@@ -34,7 +33,6 @@ export default function Author(props: AuthorProps & PropFunc<typeof Box>): React
     fullNotIcon,
     children,
     unread,
-    group,
     isRelativeTime,
     dontShowTime,
     lineHeight = 'tall',
@@ -45,7 +43,6 @@ export default function Author(props: AuthorProps & PropFunc<typeof Box>): React
   const size = props.size || 16;
   const sigilPadding = props.sigilPadding || 2;
 
-  const history = useHistory();
   const osDark = useLocalState(state => state.dark);
 
   const theme = useSettingsState(s => s.display.theme);
@@ -61,13 +58,7 @@ export default function Author(props: AuthorProps & PropFunc<typeof Box>): React
   const { hideAvatars } = useSettingsState(selectCalmState);
   const name = showNickname && contact ? contact.nickname : cite(ship);
   const stamp = moment(date);
-  const { copyDisplay, doCopy, didCopy } = useCopy(`~${ship}`, name);
-
-  const [showOverlay, setShowOverlay] = useState(false);
-
-  const toggleOverlay = () => {
-    setShowOverlay(value => !value);
-  };
+  const { copyDisplay, doCopy } = useCopy(`~${ship}`, name);
 
   const sigil = fullNotIcon ? (
     <Sigil ship={ship} size={size} color={color} padding={sigilPadding} />
@@ -91,10 +82,6 @@ export default function Author(props: AuthorProps & PropFunc<typeof Box>): React
   return (
     <Row {...rest} alignItems='center' width='auto'>
       <Box
-        onClick={(e) => {
-          e.stopPropagation();
-          toggleOverlay();
-        }}
         height={`${size}px`}
         overflow='hidden'
         position='relative'
@@ -129,7 +116,8 @@ export default function Author(props: AuthorProps & PropFunc<typeof Box>): React
             fontSize={0}
             time={time}
             ml={2}
-            color={unread ? 'blue' : 'gray'} />
+            color={unread ? 'blue' : 'gray'}
+          />
         )}
         {children}
       </Box>

pkg/interface/src/views/components/ColorInput.tsx

@@ -10,7 +10,7 @@ import { useField } from 'formik';
 import React, { FormEvent } from 'react';
 import { hexToUx } from '~/logic/lib/util';
 
-type ColorInputProps = Parameters<typeof Col>[0] & {
+export type ColorInputProps = Parameters<typeof Col>[0] & {
   id: string;
   label?: string;
   placeholder?: string;

pkg/interface/src/views/components/ImageInput.tsx

@@ -11,7 +11,7 @@ import { useField } from 'formik';
 import React, { ReactElement, useCallback, useRef } from 'react';
 import useStorage from '~/logic/lib/useStorage';
 
-type ImageInputProps = Parameters<typeof Box>[0] & {
+export type ImageInputProps = Parameters<typeof Box>[0] & {
   id: string;
   label?: string;
   placeholder?: string;

pkg/interface/src/views/components/ProfileOverlay.tsx

@@ -1,14 +1,9 @@
 import {
   BaseImage, Box,
 
-
-
-
-
   BoxProps,
   Center, Col,
 
-
   Icon, Row,
 
   Text
@@ -52,6 +47,7 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
     children,
     ...rest
   } = props;
+
   const [open, _setOpen] = useState(false);
   const [coords, setCoords] = useState({});
   const [visible, setVisible] = useState(false);
@@ -64,6 +60,7 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
   const { copyDisplay, doCopy, didCopy } = useCopy(`~${ship}`);
 
   const contact = useContact(`~${ship}`);
+  console.log(contact);
   const color = `#${uxToHex(contact?.color ?? '0x0')}`;
   const showNickname = useShowNickname(contact, hideNicknames);