@dxos/react-client 0.8.3 → 0.8.4-main.1da679c

package/moon.yml

@@ -0,0 +1,19 @@
+type: library
+language: typescript
+tags:
+  - e2e
+  - ts-build
+  - ts-test
+  - typedoc
+  - pack
+tasks:
+  compile:
+    args:
+      - '--entryPoint=src/devtools/index.ts'
+      - '--entryPoint=src/echo/index.ts'
+      - '--entryPoint=src/halo/index.ts'
+      - '--entryPoint=src/index.ts'
+      - '--entryPoint=src/invitations/index.ts'
+      - '--entryPoint=src/mesh/index.ts'
+      - '--entryPoint=src/testing/index.ts'
+      - '--entryPoint=src/worker.ts'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-client",
-  "version": "0.8.3",
+  "version": "0.8.4-main.1da679c",
   "description": "React client API",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,41 +10,49 @@
   "type": "module",
   "exports": {
     "./devtools": {
+      "source": "./src/devtools/index.ts",
       "types": "./dist/types/src/devtools/index.d.ts",
       "browser": "./dist/lib/browser/devtools/index.mjs",
       "node": "./dist/lib/node-esm/devtools/index.mjs"
     },
     "./echo": {
+      "source": "./src/echo/index.ts",
       "types": "./dist/types/src/echo/index.d.ts",
       "browser": "./dist/lib/browser/echo/index.mjs",
       "node": "./dist/lib/node-esm/echo/index.mjs"
     },
     "./halo": {
+      "source": "./src/halo/index.ts",
       "types": "./dist/types/src/halo/index.d.ts",
       "browser": "./dist/lib/browser/halo/index.mjs",
       "node": "./dist/lib/node-esm/halo/index.mjs"
     },
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
     "./invitations": {
+      "source": "./src/invitations/index.ts",
       "types": "./dist/types/src/invitations/index.d.ts",
       "browser": "./dist/lib/browser/invitations/index.mjs",
       "node": "./dist/lib/node-esm/invitations/index.mjs"
     },
     "./mesh": {
+      "source": "./src/mesh/index.ts",
       "types": "./dist/types/src/mesh/index.d.ts",
       "browser": "./dist/lib/browser/mesh/index.mjs",
       "node": "./dist/lib/node-esm/mesh/index.mjs"
     },
     "./testing": {
+      "source": "./src/testing/index.ts",
       "types": "./dist/types/src/testing/index.d.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
       "node": "./dist/lib/node-esm/testing/index.mjs"
     },
     "./worker": {
+      "source": "./src/worker.ts",
       "types": "./dist/types/src/worker.d.ts",
       "browser": "./dist/lib/browser/worker.mjs",
       "node": "./dist/lib/node-esm/worker.mjs"
@@ -78,21 +86,21 @@
   },
   "dependencies": {
     "react-error-boundary": "^4.0.13",
-    "@dxos/async": "0.8.3",
-    "@dxos/client": "0.8.3",
-    "@dxos/codec-protobuf": "0.8.3",
-    "@dxos/config": "0.8.3",
-    "@dxos/context": "0.8.3",
-    "@dxos/debug": "0.8.3",
-    "@dxos/echo": "0.8.3",
-    "@dxos/echo-schema": "0.8.3",
-    "@dxos/echo-signals": "0.8.3",
-    "@dxos/invariant": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/node-std": "0.8.3",
-    "@dxos/protocols": "0.8.3",
-    "@dxos/react-hooks": "0.8.3",
-    "@dxos/util": "0.8.3"
+    "@dxos/client": "0.8.4-main.1da679c",
+    "@dxos/async": "0.8.4-main.1da679c",
+    "@dxos/context": "0.8.4-main.1da679c",
+    "@dxos/config": "0.8.4-main.1da679c",
+    "@dxos/debug": "0.8.4-main.1da679c",
+    "@dxos/echo": "0.8.4-main.1da679c",
+    "@dxos/echo-schema": "0.8.4-main.1da679c",
+    "@dxos/invariant": "0.8.4-main.1da679c",
+    "@dxos/echo-signals": "0.8.4-main.1da679c",
+    "@dxos/node-std": "0.8.4-main.1da679c",
+    "@dxos/log": "0.8.4-main.1da679c",
+    "@dxos/protocols": "0.8.4-main.1da679c",
+    "@dxos/react-hooks": "0.8.4-main.1da679c",
+    "@dxos/codec-protobuf": "0.8.4-main.1da679c",
+    "@dxos/util": "0.8.4-main.1da679c"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
@@ -100,21 +108,21 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "typedoc": "0.28.1",
-    "@dxos/random": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-syntax-highlighter": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3",
-    "@dxos/test-utils": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.1da679c",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.1da679c",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c",
+    "@dxos/storybook-utils": "0.8.4-main.1da679c",
+    "@dxos/test-utils": "0.8.4-main.1da679c",
+    "@dxos/random": "0.8.4-main.1da679c"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0"
   },
   "optionalDependencies": {
-    "@dxos/random": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/random": "0.8.4-main.1da679c",
+    "@dxos/react-ui": "0.8.4-main.1da679c",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c"
   },
   "publishConfig": {
     "access": "public"

package/src/client/AgentHostingProvider.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { createContext, type PropsWithChildren, useContext, useState } from 'react';
+import React, { type PropsWithChildren, createContext, useContext, useState } from 'react';
 
 import { type AgentHostingProviderClient, AgentManagerClient, FakeAgentHostingProvider } from '@dxos/client';
 import { type Halo } from '@dxos/client/halo';

package/src/client/ClientProvider.test.tsx

@@ -2,7 +2,7 @@
 // Copyright 2020 DXOS.org
 //
 
-import { renderHook, screen, render, act, cleanup } from '@testing-library/react';
+import { act, cleanup, render, renderHook, screen } from '@testing-library/react';
 import React, { Component, type PropsWithChildren } from 'react';
 import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 
@@ -10,9 +10,10 @@ import { waitForCondition } from '@dxos/async';
 import { Client, Config, SystemStatus, fromHost } from '@dxos/client';
 import { log } from '@dxos/log';
 
+import { useIdentity } from '../halo';
+
 import { ClientProvider } from './ClientProvider';
 import { useClient } from './useClient';
-import { useIdentity } from '../halo';
 
 log.config({ filter: 'ClientContext:debug,warn' });
 

package/src/client/ClientProvider.tsx

@@ -3,9 +3,9 @@
 //
 
 import React, {
-  forwardRef,
   type FunctionComponent,
   type PropsWithChildren,
+  forwardRef,
   useEffect,
   useImperativeHandle,
   useState,
@@ -15,12 +15,13 @@ import { Client, type ClientOptions, type ClientServicesProvider, SystemStatus }
 import { type Config } from '@dxos/config';
 import { registerSignalsRuntime } from '@dxos/echo-signals/react';
 import { log } from '@dxos/log';
-import { useControlledState } from '@dxos/react-hooks';
-import { getAsyncProviderValue, type MaybePromise, type Provider } from '@dxos/util';
+import { useAsyncEffect, useControlledState } from '@dxos/react-hooks';
+import { type MaybePromise, type Provider, getAsyncProviderValue } from '@dxos/util';
 
-import { ClientContext, type ClientContextProps } from './context';
 import { printBanner } from '../banner';
 
+import { ClientContext, type ClientContextProps } from './context';
+
 /**
  * Properties for the ClientProvider.
  */
@@ -80,10 +81,10 @@ export const ClientProvider = forwardRef<Client | undefined, ClientProviderProps
   (
     {
       children,
-      config: configProvider,
-      client: clientProvider,
-      services: servicesProvider,
-      status: controlledStatus,
+      config: configParam,
+      client: clientParam,
+      services: servicesParam,
+      status: statusParam,
       fallback: Fallback = () => null,
       signalsRuntime = true,
       noBanner,
@@ -108,13 +109,13 @@ export const ClientProvider = forwardRef<Client | undefined, ClientProviderProps
       throw error;
     }
 
-    const [client, setClient] = useState(clientProvider instanceof Client ? clientProvider : undefined);
+    const [client, setClient] = useState(clientParam instanceof Client ? clientParam : undefined);
 
     // Provide external access.
     useImperativeHandle(forwardedRef, () => client, [client]);
 
     // Client status subscription.
-    const [status, setStatus] = useControlledState(controlledStatus);
+    const [status, setStatus] = useControlledState(statusParam);
     useEffect(() => {
       if (!client) {
         return;
@@ -125,7 +126,7 @@ export const ClientProvider = forwardRef<Client | undefined, ClientProviderProps
     }, [client]);
 
     // Create and/or initialize client.
-    useEffect(() => {
+    useAsyncEffect(async () => {
       let disposed = false;
       const initialize = async (client: Client) => {
         if (!client.initialized) {
@@ -140,42 +141,38 @@ export const ClientProvider = forwardRef<Client | undefined, ClientProviderProps
         }
 
         setClient(client);
-
         if (!noBanner) {
           printBanner(client);
         }
       };
 
       let client: Client;
-      const t = setTimeout(async () => {
-        try {
-          if (clientProvider) {
-            // Asynchronously request client.
-            client = await getAsyncProviderValue(clientProvider);
-            await initialize(client);
-          } else {
-            // Asynchronously construct client (config may be undefined).
-            const config = await getAsyncProviderValue(configProvider);
-            log('resolved config', { config });
-            const services = await getAsyncProviderValue(servicesProvider, config);
-            log('created services', { services });
-            client = new Client({ config, services, ...options });
-            log('created client');
-            await initialize(client);
-          }
-        } catch (err) {
-          if (!disposed) {
-            log.catch(err);
-          }
+      try {
+        if (clientParam) {
+          // Asynchronously request client.
+          client = await getAsyncProviderValue(clientParam);
+          await initialize(client);
+        } else {
+          // Asynchronously construct client (config may be undefined).
+          const config = await getAsyncProviderValue(configParam);
+          log('resolved config', { config });
+          const services = await getAsyncProviderValue(servicesParam, config);
+          log('created services', { services });
+          client = new Client({ config, services, ...options });
+          log('created client');
+          await initialize(client);
         }
-      });
+      } catch (err) {
+        if (!disposed) {
+          log.catch(err);
+        }
+      }
 
       return () => {
         log('clean up');
         disposed = true;
-        clearTimeout(t);
         // Only destroy if the client is not provided by the parent.
-        if (!clientProvider) {
+        if (!clientParam) {
           void client
             ?.destroy()
             .then(() => {
@@ -184,7 +181,7 @@ export const ClientProvider = forwardRef<Client | undefined, ClientProviderProps
             .catch((err) => log.catch(err));
         }
       };
-    }, [configProvider, clientProvider, servicesProvider, noBanner]);
+    }, [configParam, clientParam, servicesParam, noBanner]);
 
     if (!client?.initialized || status !== SystemStatus.ACTIVE) {
       return <Fallback client={client} status={status} />;

package/src/client/useConfig.test.tsx

@@ -8,9 +8,10 @@ import { describe, expect, test } from 'vitest';
 import { waitForCondition } from '@dxos/async';
 import { Config, SystemStatus } from '@dxos/client';
 
-import { useConfig } from './useConfig';
 import { createClient, createClientContextProvider } from '../testing/util';
 
+import { useConfig } from './useConfig';
+
 // TODO(burdon): Disabled in CI since flaky.
 describe.runIf(!process.env.CI)('Config hook', () => {
   const render = () => useConfig();

package/src/devtools/useStream.ts

@@ -2,7 +2,7 @@
 // Copyright 2021 DXOS.org
 //
 
-import { type DependencyList, useState, useEffect } from 'react';
+import { type DependencyList, useEffect, useState } from 'react';
 
 import { type Stream } from '@dxos/codec-protobuf/stream';
 import { log } from '@dxos/log';

package/src/echo/useQuery.test.tsx

@@ -7,9 +7,10 @@ import { describe, expect, test } from 'vitest';
 
 import { Expando, Filter, live } from '@dxos/client/echo';
 
-import { useQuery } from './useQuery';
 import { createClient, createClientContextProvider } from '../testing/util';
 
+import { useQuery } from './useQuery';
+
 describe('useQuery', () => {
   // TODO(dmaretskyi): Fix this test.
   test.skip('deleting an element should result in correct render sequence', async () => {

package/src/echo/useQuery.ts

@@ -4,7 +4,7 @@
 
 import { useMemo, useSyncExternalStore } from 'react';
 
-import { type Echo, Filter, type Live, Query, type Space, isSpace } from '@dxos/client/echo';
+import { type Echo, Filter, type Live, Query, type Queue, type Space, isSpace } from '@dxos/client/echo';
 
 const EMPTY_ARRAY: never[] = [];
 
@@ -12,16 +12,24 @@ const noop = () => {};
 
 // TODO(dmaretskyi): Queries are fully serializable, so we can remove `deps` argument.
 interface UseQueryFn {
-  <Q extends Query.Any>(spaceOrEcho: Space | Echo | undefined, query: Q, deps?: any[]): Live<Query.Type<Q>>[];
+  <Q extends Query.Any>(
+    spaceOrEcho: Space | Echo | Queue<any> | undefined,
+    query: Q,
+    deps?: any[],
+  ): Live<Query.Type<Q>>[];
 
-  <F extends Filter.Any>(spaceOrEcho: Space | Echo | undefined, filter: F, deps?: any[]): Live<Filter.Type<F>>[];
+  <F extends Filter.Any>(
+    spaceOrEcho: Space | Echo | Queue<any> | undefined,
+    filter: F,
+    deps?: any[],
+  ): Live<Filter.Type<F>>[];
 }
 
 /**
  * Create subscription.
  */
 export const useQuery: UseQueryFn = (
-  spaceOrEcho: Space | Echo | undefined,
+  spaceOrEcho: Space | Echo | Queue<any> | undefined,
   queryOrFilter: Query.Any | Filter.Any,
   deps?: any[],
 ): Live<unknown>[] => {

package/src/echo/useSpaceInvitations.ts

@@ -8,9 +8,10 @@ import { MulticastObservable } from '@dxos/async';
 import { type PublicKey } from '@dxos/client';
 import { useMulticastObservable } from '@dxos/react-hooks';
 
-import { useSpace } from './useSpaces';
 import { type CancellableInvitationObservable, useInvitationStatus } from '../invitations';
 
+import { useSpace } from './useSpaces';
+
 export const useSpaceInvitations = (spaceKey?: PublicKey): CancellableInvitationObservable[] => {
   const space = useSpace(spaceKey);
   return useMulticastObservable(space?.invitations ?? MulticastObservable.empty()) ?? [];

package/src/echo/useSpaces.test.tsx

@@ -5,9 +5,10 @@
 import { act, renderHook } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
 
-import { useSpace, useSpaces } from './useSpaces';
 import { createClient, createClientContextProvider } from '../testing/util';
 
+import { useSpace, useSpaces } from './useSpaces';
+
 describe('useSpaces', () => {
   test('lists existing spaces', async () => {
     const { client } = await createClient({ createIdentity: true });

package/src/echo/useSpaces.ts

@@ -2,11 +2,11 @@
 // Copyright 2020 DXOS.org
 //
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { type PublicKeyLike } from '@dxos/client';
 import { type Space, SpaceState } from '@dxos/client/echo';
-import { useMulticastObservable } from '@dxos/react-hooks';
+import { useAsyncEffect, useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
 
@@ -23,18 +23,14 @@ export const useSpace = (spaceKeyLike?: PublicKeyLike): Space | undefined => {
   const spaces = useMulticastObservable<Space[]>(client.spaces);
   const [ready, setReady] = useState(false);
 
-  useEffect(() => {
+  useAsyncEffect(async () => {
     // Only wait for ready if looking for the default space.
     if (spaceKeyLike) {
       return;
     }
 
-    const timeout = setTimeout(async () => {
-      await client.spaces.waitUntilReady();
-      setReady(true);
-    });
-
-    return () => clearTimeout(timeout);
+    await client.spaces.waitUntilReady();
+    setReady(true);
   }, [client, spaceKeyLike]);
 
   if (spaceKeyLike) {

package/src/echo/useSyncState.ts

@@ -4,7 +4,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { type PeerSyncState, type SpaceSyncStateMap, type Space } from '@dxos/client/echo';
+import { type PeerSyncState, type Space, type SpaceSyncStateMap } from '@dxos/client/echo';
 import { Context } from '@dxos/context';
 import { type SpaceId } from '@dxos/keys';
 import { EdgeService } from '@dxos/protocols';
@@ -30,7 +30,7 @@ export const useSyncState = (): SpaceSyncStateMap => {
         }
 
         ctx.onDispose(
-          space.crud.subscribeToSyncState(ctx, ({ peers = [] }) => {
+          space.db.subscribeToSyncState(ctx, ({ peers = [] }) => {
             const syncState = peers.find((state) => isEdgePeerId(state.peerId, space.id));
             if (syncState) {
               setSpaceState((spaceState) => ({ ...spaceState, [space.id]: syncState }));
@@ -62,7 +62,7 @@ export const useSpaceSyncState = (space: Space): PeerSyncState | undefined => {
 
   useEffect(() => {
     const ctx = new Context();
-    space.crud.subscribeToSyncState(ctx, ({ peers = [] }) => {
+    space.db.subscribeToSyncState(ctx, ({ peers = [] }) => {
       const syncState = peers.find((state) => isEdgePeerId(state.peerId, space.id));
       if (syncState) {
         setSpaceState(syncState);

package/src/halo/Passkey.stories.tsx

@@ -4,6 +4,7 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback } from 'react';
 
 import { Config, PublicKey } from '@dxos/client';
@@ -13,11 +14,12 @@ import { Button } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { useCredentials } from './useCredentials';
-import { useIdentity } from './useIdentity';
 import { useClient } from '../client';
 import { withClientProvider } from '../testing';
 
+import { useCredentials } from './useCredentials';
+import { useIdentity } from './useIdentity';
+
 const getNewChallenge = () => Math.random().toString(36).substring(2);
 
 const Test = () => {
@@ -43,7 +45,7 @@ const Test = () => {
           challenge: new TextEncoder().encode(challenge),
           rp: { id: location.hostname, name: 'Test' },
           user: {
-            id: lookupKey.asUint8Array(),
+            id: lookupKey.asUint8Array() as Uint8Array<ArrayBuffer>,
             name: identity.did,
             displayName: identity.profile?.displayName ?? '',
           },
@@ -125,10 +127,14 @@ const Test = () => {
   );
 };
 
-export default {
+const meta = {
   title: 'sdk/react-client/Passkeys',
   render: Test,
-};
+} satisfies Meta<typeof Config>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 const config = new Config({
   runtime: {
@@ -150,6 +156,6 @@ const config = new Config({
   },
 });
 
-export const Default = {
+export const Default: Story = {
   decorators: [withClientProvider({ config }), withTheme],
 };

package/src/halo/useDevices.test.tsx

@@ -5,9 +5,10 @@
 import { renderHook } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
 
-import { useDevices } from './useDevices';
 import { createClient, createClientContextProvider } from '../testing/util';
 
+import { useDevices } from './useDevices';
+
 describe('useDevices', () => {
   test('lists existing devices', async () => {
     const { client } = await createClient({ createIdentity: true });

package/src/halo/useHaloInvitations.ts

@@ -7,7 +7,7 @@ import { useMemo } from 'react';
 import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
-import { useInvitationStatus, type CancellableInvitationObservable } from '../invitations';
+import { type CancellableInvitationObservable, useInvitationStatus } from '../invitations';
 
 export const useHaloInvitations = (): CancellableInvitationObservable[] => {
   const client = useClient();

package/src/invitations/useInvitationStatus.ts

@@ -2,7 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-import { useReducer, type Reducer, useMemo, useCallback, useEffect } from 'react';
+import { type Reducer, useCallback, useEffect, useMemo, useReducer } from 'react';
 
 import { type PublicKey } from '@dxos/client';
 import {

package/src/playwright/playwright.config.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { defineConfig } from '@playwright/test';
+
+import { e2ePreset } from '@dxos/test-utils/playwright';
+
+export default defineConfig({
+  ...e2ePreset(import.meta.dirname),
+  // TODO(wittjosiah): Avoid hard-coding ports.
+  webServer: {
+    command: 'moon run storybook:serve-e2e -- --port=9000',
+    port: 9000,
+    reuseExistingServer: false,
+  },
+});

package/src/playwright/smoke.spec.ts

@@ -4,17 +4,15 @@
 
 import { type Page, expect, test } from '@playwright/test';
 
-import { setupPage } from '@dxos/test-utils/playwright';
-
-// TODO(wittjosiah): Factor out.
-// TODO(burdon): No hard-coding of ports; reconcile all DXOS tools ports.
-const storybookUrl = (storyId: string) => `http://localhost:9009/iframe.html?id=${storyId}&viewMode=story`;
+import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 
 test.describe('Smoke test', () => {
   let page: Page;
 
   test.beforeAll(async ({ browser }) => {
-    const result = await setupPage(browser, { url: storybookUrl('sdk-react-client-withclientprovider--default') });
+    const result = await setupPage(browser, {
+      url: storybookUrl('sdk-react-client-withclientprovider--default', 9000),
+    });
     page = result.page;
     await page.locator(':text("initialized")').waitFor({ state: 'visible' });
   });

package/src/testing/ClientRepeater.stories.tsx

@@ -4,20 +4,26 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { Input } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { ClientRepeater, type ClientRepeatedComponentProps } from './ClientRepeater';
 import { useClient } from '../client';
 import { useSpace } from '../echo';
 
-export default {
+import { type ClientRepeatedComponentProps, ClientRepeater } from './ClientRepeater';
+
+const meta = {
   title: 'sdk/react-client/ClientRepeater',
   decorators: [withTheme],
-};
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 const JsonPanel = ({ value }: { value: any }) => (
   <SyntaxHighlighter language='json'>{JSON.stringify(value, undefined, 2)}</SyntaxHighlighter>
@@ -49,10 +55,10 @@ const ClientSpace = ({ spaceKey }: ClientRepeatedComponentProps) => {
   );
 };
 
-export const Default = {
+export const Default: Story = {
   render: () => <ClientRepeater component={ClientStory} count={2} />,
 };
 
-export const Space = {
+export const Space: Story = {
   render: () => <ClientRepeater component={ClientSpace} count={2} createSpace />,
 };