feat: add story for SpaceList

take a slightly different approach from the other stories - wrap
SpaceList in a component specifically made for StoryBook testing
that passes values to a Context Provider and renders the component
under test inside the Provider.

This lets us craft an interface in StoryBook that will make sense
to designers and other folks.

examples/react/playground/package.json

@@ -12,7 +12,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^6.5.15",
+    "@w3ui/keyring-core": "workspace:^2.0.1",
     "@w3ui/react": "workspace:^",
     "@w3ui/react-keyring": "workspace:^",
     "@w3ui/react-uploader": "workspace:^",
@@ -22,6 +22,7 @@
     "react-syntax-highlighter": "^15.5.0"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^6.5.15",
     "@storybook/addon-essentials": "^7.0.0-beta.29",
     "@storybook/addon-interactions": "^7.0.0-beta.29",
     "@storybook/addon-links": "^7.0.0-beta.29",
@@ -31,6 +32,7 @@
     "@storybook/testing-library": "^0.0.13",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
+    "@ucanto/interface": "^4.0.3",
     "@vitejs/plugin-react": "^3.0.0",
     "@w3ui/uploads-list-core": "workspace:^",
     "multiformats": "^10.0.2",

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

@@ -0,0 +1,37 @@
+import { Space } from '@w3ui/keyring-core'
+import type { DID } from '@ucanto/interface'
+
+import React from 'react'
+import { SpaceList } from '@w3ui/react'
+import { KeyringContext, keyringContextDefaultValue } from '@w3ui/react-keyring'
+
+function contextValue (state = {}, actions = {}) {
+  return [
+    { ...keyringContextDefaultValue[0], ...state },
+    { ...keyringContextDefaultValue[1], ...actions }
+  ]
+}
+
+function WrappedSpaceList ({ spaceDIDs = [], setCurrentSpace }: { spaceDIDs: DID[], setCurrentSpace: any }) {
+  const spaces = spaceDIDs.map(did => new Space(did, {}))
+  return (
+    <KeyringContext.Provider value={contextValue({ spaces }, { setCurrentSpace })}>
+      <SpaceList />
+    </KeyringContext.Provider>
+  )
+}
+
+export default {
+  title: 'w3ui/SpaceList',
+  component: WrappedSpaceList,
+  tags: ['autodocs'],
+  argTypes: {
+    setCurrentSpace: { action: 'set space' }
+  }
+}
+
+export const Primary = {
+  args: {
+    spaceDIDs: ['did:example:abc123']
+  }
+}

examples/react/w3console/src/app.tsx

@@ -153,8 +153,8 @@ function SpaceSelector (props: any): JSX.Element {
             </button>
           </li>
         ))}
-        <SpaceCreator className='mt-12' />
       </ul>
+      <SpaceCreator className='mt-12' />
     </div>
   )
 }

examples/react/w3console/src/index.css

@@ -21,7 +21,7 @@
 }
 
 .w3-uploads-list thead {
-  @apply text-left bg-gray-400 dark:bg-gray-900 bg-opacity-50 text-sm;
+  @apply text-left bg-gray-400 bg-opacity-50 text-sm;
 }
 
 .w3-uploads-list th {

package.json

@@ -23,6 +23,7 @@
     "serve:examples": "serve examples"
   },
   "devDependencies": {
+    "@babel/core": "^7.20.12",
     "@babel/plugin-transform-modules-commonjs": "^7.18.6",
     "@babel/preset-env": "^7.19.0",
     "@babel/preset-react": "^7.18.6",

packages/react/src/SpacePicker.tsx

@@ -0,0 +1,22 @@
+import type { Space } from '@w3ui/keyring-core'
+
+import React from 'react'
+import { useKeyring } from '@w3ui/react-keyring'
+
+export function SpaceList (props: any): JSX.Element {
+  const [{ space: currentSpace, spaces }, { setCurrentSpace }] = useKeyring()
+  async function selectSpace (space: Space): Promise<void> {
+    await setCurrentSpace(space.did())
+  }
+  return (
+    <ul {...props}>
+      {spaces.map((space, i) => (
+        <li key={space.did()} className={`hover:font-bold ${space.sameAs(currentSpace) ? 'font-bold' : ''}`}>
+          <button onClick={() => { void selectSpace(space) }}>
+            {space.name() ?? `Space ${i + 1}`}
+          </button>
+        </li>
+      ))}
+    </ul>
+  )
+}

packages/react/src/index.ts

@@ -2,4 +2,5 @@ export * from './Uploader'
 export * from './UploadsList'
 export * from './Authenticator'
 export * from './W3Upload'
+export * from './SpacePicker'
 export * from './providers/W3API'