feat: Storybook story improvements (#294)

1) Add SpaceFinder to Storybook


![SpaceFinder](https://user-images.githubusercontent.com/1113/214763164-4a58544d-19f9-47ba-9d33-c0ef7339dcd9.gif)

2) Add Authenticator to Storybook


![Authenticator](https://user-images.githubusercontent.com/1113/214966004-1a4eabf9-7cd3-47b0-8532-fe2c8f6e91f0.gif)

3) Break Tailwind classes in SpaceFinder, Authenticator and UploadsList
down to their raw CSS so that the components work and look good in
Storybook.


![UploadsList](https://user-images.githubusercontent.com/1113/214961123-e2083359-227a-466d-9d21-8a1b017e8643.gif)

4) Extract SpaceCreator to a new component


![SpaceCreator](https://user-images.githubusercontent.com/1113/214977038-f32c27e1-e280-44ce-af89-2d859237aab0.gif)

examples/react/playground/.storybook/preview-head.html

@@ -1,3 +1,9 @@
 <script>
   window.global = window;
-</script>
+</script>
+<style>
+  html {
+    /* _no one wants to see times new roman_ - @olizilla */
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  }
+</style>

examples/react/playground/.storybook/preview.js

@@ -6,4 +6,7 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  backgrounds: {
+    default: 'dark'
+  }
 }

examples/react/playground/src/stories/AuthenticationSubmitted.stories.tsx

@@ -0,0 +1,15 @@
+import { AuthenticationSubmitted } from '@w3ui/react'
+import '@w3ui/react/src/styles/authenticator.css'
+
+export default {
+  title: 'w3ui/Authenticator',
+  component: AuthenticationSubmitted,
+  tags: ['autodocs'],
+  argTypes: {
+  }
+}
+
+export const Submitted = {
+  args: {
+  }
+}

examples/react/playground/src/stories/Authenticator.stories.tsx

@@ -0,0 +1,15 @@
+import { Authenticator } from '@w3ui/react'
+import '@w3ui/react/src/styles/authenticator.css'
+
+export default {
+  title: 'w3ui/Authenticator',
+  component: Authenticator,
+  tags: ['autodocs'],
+  argTypes: {
+  }
+}
+
+export const Primary = {
+  args: {
+  }
+}

examples/react/playground/src/stories/SpaceCreator.stories.tsx

@@ -0,0 +1,15 @@
+import { SpaceCreator } from '@w3ui/react'
+import '@w3ui/react/src/styles/space-creator.css'
+
+export default {
+  title: 'w3ui/SpaceCreator',
+  component: SpaceCreator,
+  tags: ['autodocs'],
+  argTypes: {
+  }
+}
+
+export const Primary = {
+  args: {
+  }
+}

examples/react/playground/src/stories/SpaceCreatorCreating.stories.tsx

@@ -0,0 +1,15 @@
+import { SpaceCreatorCreating } from '@w3ui/react'
+import '@w3ui/react/src/styles/space-creator.css'
+
+export default {
+  title: 'w3ui/SpaceCreator',
+  component: SpaceCreatorCreating,
+  tags: ['autodocs'],
+  argTypes: {
+  }
+}
+
+export const Creating = {
+  args: {
+  }
+}

examples/react/playground/src/stories/SpaceFinder.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import type { DID } from '@ucanto/interface'
+import { SpaceFinder } from '@w3ui/react'
+import { Space } from '@w3ui/keyring-core'
+import '@w3ui/react/src/styles/space-finder.css'
+
+export default {
+  title: 'w3ui/SpaceFinder',
+  component: SpaceFinder,
+  tags: ['autodocs'],
+  argTypes: {
+    setSelected: { action: 'set space' }
+  }
+}
+
+const spaces = ['did:example:abc123', 'did:example:xyz789', 'did:example:lmn456'].map(
+  (did: string, i) => new Space(did as DID, { name: `Space ${i}` })
+)
+
+export const Primary = {
+  args: {
+    spaces,
+    selected: spaces[0]
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        <Story />
+      </div>
+    )
+  ]
+}

examples/react/playground/src/stories/Uploader.stories.tsx

@@ -6,6 +6,9 @@ export default {
   component: Uploader,
   tags: ['autodocs'],
   argTypes: {
+  },
+  parameters: {
+
   }
 }
 

examples/react/playground/src/stories/UploadsList.stories.tsx

@@ -5,6 +5,7 @@ import { CID } from 'multiformats/cid'
 // import * as raw from 'multiformats/codecs/raw'
 import { UploadsList } from '@w3ui/react'
 import { UploadsListContext } from '@w3ui/react-uploads-list'
+import '@w3ui/react/src/styles/uploads-list.css'
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 export default {

examples/react/w3console/src/app.tsx

@@ -2,12 +2,14 @@ import type { ChangeEvent } from 'react'
 import type { Space } from '@w3ui/keyring-core'
 
 import { useEffect, useState } from 'react'
-import { Authenticator, Uploader, UploadsList, W3APIProvider, SpaceFinder } from '@w3ui/react'
+import { Authenticator, Uploader, UploadsList, W3APIProvider, SpaceFinder, SpaceCreator } from '@w3ui/react'
 import { useKeyring } from '@w3ui/react-keyring'
 import { useUploadsList } from '@w3ui/react-uploads-list'
-import { ArrowPathIcon, ShareIcon } from '@heroicons/react/20/solid'
+import { ShareIcon } from '@heroicons/react/20/solid'
 import md5 from 'blueimp-md5'
 import '@w3ui/react/src/styles/uploader.css'
+import '@w3ui/react/src/styles/space-finder.css'
+import '@w3ui/react/src/styles/uploads-list.css'
 import { SpaceShare } from './share'
 
 function SpaceRegistrar (): JSX.Element {
@@ -110,73 +112,6 @@ function SpaceSection (): JSX.Element {
   )
 }
 
-function SpaceCreator (props: any): JSX.Element {
-  const [, { createSpace, registerSpace }] = useKeyring()
-  const [creating, setCreating] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const [email, setEmail] = useState('')
-  const [name, setName] = useState('')
-
-  function resetForm (): void {
-    setEmail('')
-    setName('')
-  }
-
-  async function onSubmit (e: React.FormEvent<HTMLFormElement>): Promise<void> {
-    e.preventDefault()
-    setSubmitted(true)
-    try {
-      await createSpace(name)
-      // ignore this because the UI knows how to help the user recover
-      // from space registration failure
-      void registerSpace(email)
-    } catch (err) {
-      console.log(err)
-      throw new Error('failed to register', { cause: err })
-    } finally {
-      resetForm()
-      setSubmitted(false)
-    }
-  }
-  return (
-    <div {...props}>
-      {(creating)
-        ? submitted
-          ? (
-            <div className='flex flex-col items-center space-y-4'>
-              <h5>Creating Space...</h5>
-              <ArrowPathIcon className='animate-spin w-6' />
-            </div>
-            )
-          : (
-            <form
-              className='flex flex-col space-y-2'
-              onSubmit={(e: React.FormEvent<HTMLFormElement>) => { void onSubmit(e) }}
-            >
-              <input
-                className='text-black py-1 px-2 rounded'
-                type='email' placeholder='Email' autofocus
-                value={email}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => { setEmail(e.target.value) }}
-              />
-              <input
-                className='text-black py-1 px-2 rounded'
-                placeholder='Name'
-                value={name}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => { setName(e.target.value) }}
-              />
-              <input type='submit' className='w3ui-button' value='Create' />
-            </form>
-            )
-        : (
-          <button className='w3ui-button py-2' onClick={() => setCreating(true)}>
-            Add Space
-          </button>
-          )}
-    </div>
-  )
-}
-
 function SpaceSelector (props: any): JSX.Element {
   const [{ space: currentSpace, spaces }, { setCurrentSpace }] = useKeyring()
   async function selectSpace (space: Space): Promise<void> {

examples/react/w3console/src/index.css

@@ -2,67 +2,3 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --w3ui-uploader-primary: theme(colors.slate.800);
-  --w3ui-uploader-primary-hover: theme(colors.blue.900);
-}
-
-.w3-uploads-list {
-  @apply mb-5;
-}
-
-.w3-uploads-list-data {
-  @apply overflow-auto rounded-md border border-gray-300 dark:border-gray-700;
-}
-
-.w3-uploads-list table {
-  @apply w-full border-collapse divide-y dark:divide-gray-700;
-}
-
-.w3-uploads-list thead {
-  @apply text-left bg-opacity-50 text-xs tracking-wide text-zinc-300;
-}
-
-.w3-uploads-list th {
-  @apply p-3;
-}
-
-.w3-uploads-list td {
-  @apply block w-64 p-2 pl-3 font-mono text-xs;
-}
-
-.w3-uploads-list nav {
-  @apply flex flex-row space-x-4 my-4;
-}
-
-.w3ui-simple-authenticator-verify-email {
-  @apply bg-gray-400 dark:bg-gray-800 px-24 py-16 rounded-md;
-}
-
-.w3ui-simple-authenticator-verify-email .message {
-  @apply text-xl;
-}
-
-.w3ui-simple-authenticator-verify-email .detail {
-  @apply pt-2 pb-4;
-}
-
-.w3ui-simple-authenticator {
-  @apply w-full h-screen flex flex-col justify-center items-center;
-}
-
-.w3ui-simple-authenticator-form {
-  @apply bg-gray-400 dark:bg-gray-800 px-24 py-16 rounded-md;
-}
-
-.w3ui-simple-authenticator-form .email-field label {
-  @apply block mb-2;
-}
-
-.w3ui-simple-authenticator-form .email-field input {
-  @apply rounded block p-2 w-72 bg-gray-300 dark:bg-gray-900;
-}
-
-.w3ui-simple-authenticator-form .register {
-  @apply mt-2;
-}

packages/react/src/Authenticator.tsx

@@ -5,10 +5,10 @@ export function AuthenticationForm (): JSX.Element {
   const [{ submitted }] = useAuthenticator()
 
   return (
-    <AuthCore.Form className='w3ui-simple-authenticator-form'>
+    <AuthCore.Form className='w3ui-authenticator-form'>
       <div className='email-field'>
-        <label htmlFor='w3ui-simple-authenticator-email'>Email address:</label>
-        <AuthCore.EmailInput id='w3ui-simple-authenticator-email' required />
+        <label htmlFor='w3ui-authenticator-email'>Email address:</label>
+        <AuthCore.EmailInput id='w3ui-authenticator-email' required />
       </div>
       <button className='register w3ui-button' type='submit' disabled={submitted}>Register</button>
     </AuthCore.Form>
@@ -19,7 +19,7 @@ export function AuthenticationSubmitted (): JSX.Element {
   const [{ email }] = useAuthenticator()
 
   return (
-    <div className='w3ui-simple-authenticator-verify-email'>
+    <div className='w3ui-authenticator-verify-email'>
       <h1 className='message'>Verify your email address!</h1>
       <p className='detail'>Click the link in the email we sent to {email} to sign in.</p>
       <AuthCore.CancelButton className='cancel w3ui-button'>
@@ -43,7 +43,7 @@ export function AuthenticationEnsurer ({ children }: { children: JSX.Element | J
 
 export function Authenticator ({ children }: { children: JSX.Element | JSX.Element[] }): JSX.Element {
   return (
-    <AuthCore as='div' className='w3ui-simple-authenticator'>
+    <AuthCore as='div' className='w3ui-authenticator'>
       <AuthenticationEnsurer>
         {children}
       </AuthenticationEnsurer>