@dxos/react-ui 0.1.28 → 0.1.29-next.1bc50d4

package/src/components/InvitationList/InvitationList.stories.tsx

@@ -8,7 +8,7 @@ import { StoryFn } from '@storybook/react';
 import React, { useMemo, useState } from 'react';
 
 import { CancellableInvitationObservable, Client, Invitation } from '@dxos/client';
-import { TestBuilder } from '@dxos/client/testing';
+import { TestBuilder } from '@dxos/client-services/testing';
 import { log } from '@dxos/log';
 import { useAsyncEffect } from '@dxos/react-async';
 import { ClientProvider } from '@dxos/react-client';
@@ -26,7 +26,7 @@ export const Default = {
     (Story: StoryFn) => {
       const testBuilder = new TestBuilder();
       const clients = useMemo(() => {
-        return [...Array(1)].map(() => new Client({ services: testBuilder.createClientServicesHost() }));
+        return [...Array(1)].map(() => new Client({ services: testBuilder.createLocal() }));
       }, []);
 
       const [invitations, setInvitations] = useState<CancellableInvitationObservable[]>([]);

package/src/components/SpaceList/SpaceListItem.tsx

@@ -12,7 +12,7 @@ export const SpaceListItem = forwardRef(
   ({ space, onClick }: { space: Space; onClick?: () => void }, ref: ForwardedRef<HTMLLIElement>) => {
     return (
       <li
-        className={mx('flex gap-2 items-center', onClick && 'cursor-pointer')}
+        className={mx('flex gap-2 items-center mbe-2', onClick && 'cursor-pointer')}
         onClick={() => onClick?.()}
         ref={ref}
         data-testid='space-list-item'

package/src/composites/JoinDialog/JoinDialog.stories.tsx

@@ -8,7 +8,7 @@ import { StoryContext, StoryFn } from '@storybook/react';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { Client, Invitation, InvitationEncoder } from '@dxos/client';
-import { TestBuilder } from '@dxos/client/testing';
+import { TestBuilder } from '@dxos/client-services/testing';
 import { log } from '@dxos/log';
 import { useAsyncEffect } from '@dxos/react-async';
 import { ClientProvider } from '@dxos/react-client';
@@ -24,7 +24,7 @@ const JoinClientDecorator = (Story: StoryFn, { args }: StoryContext) => {
   const n = 2;
   const testBuilder = new TestBuilder();
   const clients = useMemo(() => {
-    return [...Array(n)].map(() => new Client({ services: testBuilder.createClientServicesHost() }));
+    return [...Array(n)].map(() => new Client({ services: testBuilder.createLocal() }));
   }, []);
 
   const [invitationCode, setInvitationCode] = useState<string>();

package/src/composites/Shell/Shell.stories.tsx

@@ -0,0 +1,76 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+import { faker } from '@faker-js/faker';
+import { Intersect, Laptop, PlusCircle } from 'phosphor-react';
+import React, { useState } from 'react';
+
+import { PublicKey, ShellLayout } from '@dxos/client';
+import { useClient, useSpace, useSpaces } from '@dxos/react-client';
+import { ClientDecorator } from '@dxos/react-client/testing';
+import { Button, ButtonGroup, getSize, Group, Tooltip } from '@dxos/react-components';
+
+import { SpaceListItem } from '../../components';
+import { ShellProvider, useShell } from './ShellContext';
+
+export default {
+  component: ShellProvider
+};
+
+const ShellControls = () => {
+  const client = useClient();
+  const spaces = useSpaces();
+  const shell = useShell();
+
+  const controls = (
+    <ButtonGroup className='mbe-4'>
+      <Tooltip content='Devices'>
+        <Button onClick={() => shell.setLayout(ShellLayout.DEVICE_INVITATIONS)}>
+          <Laptop weight='fill' className={getSize(6)} />
+        </Button>
+      </Tooltip>
+      <Tooltip content='Create Space'>
+        <Button onClick={() => client.echo.createSpace({ name: faker.animal.bird() })}>
+          <PlusCircle weight='fill' className={getSize(6)} />
+        </Button>
+      </Tooltip>
+      <Tooltip content='Join Space'>
+        <Button onClick={() => shell.setLayout(ShellLayout.JOIN_SPACE)}>
+          <Intersect weight='fill' className={getSize(6)} />
+        </Button>
+      </Tooltip>
+    </ButtonGroup>
+  );
+
+  const header = <div className='flex flex-row-reverse'>{controls}</div>;
+
+  return (
+    <Group label={{ children: header }} className='flex flex-col w-96'>
+      <ul>
+        {spaces.map((space) => (
+          <SpaceListItem
+            key={space.key.toHex()}
+            space={space}
+            onClick={() => shell.setLayout(ShellLayout.SPACE_INVITATIONS, { spaceKey: space.key })}
+          />
+        ))}
+      </ul>
+    </Group>
+  );
+};
+
+export const Default = {
+  render: () => {
+    const [spaceKey, setSpaceKey] = useState<PublicKey>();
+    const space = useSpace(spaceKey);
+
+    return (
+      <ShellProvider space={space} onJoinedSpace={setSpaceKey}>
+        <ShellControls />
+      </ShellProvider>
+    );
+  },
+  decorators: [ClientDecorator()]
+};

package/src/composites/Shell/Shell.tsx

@@ -4,7 +4,8 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { ShellRuntime } from '@dxos/client';
+import { ShellRuntime } from '@dxos/client-services';
+import { log } from '@dxos/log';
 import { LayoutRequest, ShellDisplay, ShellLayout } from '@dxos/protocols/proto/dxos/iframe';
 import { useClient, useSpace, useSpaces } from '@dxos/react-client';
 
@@ -27,6 +28,19 @@ export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: stri
     return runtime.layoutUpdate.on((request) => setLayout(request));
   }, [runtime]);
 
+  useEffect(() => {
+    if (layout === ShellLayout.SPACE_INVITATIONS && !space) {
+      log.warn('No space found for shell space invitations.');
+
+      const timeout = setTimeout(async () => {
+        await runtime.setAppContext({ display: ShellDisplay.NONE });
+        runtime.setLayout(ShellLayout.DEFAULT);
+      });
+
+      return () => clearTimeout(timeout);
+    }
+  }, [runtime, layout, space]);
+
   switch (layout) {
     case ShellLayout.INITIALIZE_IDENTITY:
       return (
@@ -54,7 +68,7 @@ export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: stri
       );
 
     case ShellLayout.SPACE_INVITATIONS:
-      return (
+      return space ? (
         <SpaceDialog
           space={space}
           createInvitationUrl={(invitationCode) => `${origin}?spaceInvitationCode=${invitationCode}`}
@@ -63,7 +77,7 @@ export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: stri
             runtime.setLayout(ShellLayout.DEFAULT);
           }}
         />
-      );
+      ) : null;
 
     case ShellLayout.JOIN_SPACE:
       return (

package/src/composites/Shell/ShellContext.tsx

@@ -0,0 +1,175 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, {
+  Context,
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
+
+import {
+  IFrameClientServicesProxy,
+  type PublicKey,
+  type ShellController,
+  ShellDisplay,
+  ShellLayout,
+  type Space
+} from '@dxos/client';
+import { MemoryShellRuntime } from '@dxos/client-services';
+import { useClient, useIdentity } from '@dxos/react-client';
+import { mx } from '@dxos/react-components';
+
+import { Shell } from './Shell';
+
+export type ShellContextProps = {
+  runtime?: MemoryShellRuntime;
+  setDisplay?: (display: ShellDisplay) => void;
+};
+
+export const ShellContext: Context<ShellContextProps> = createContext<ShellContextProps>({});
+
+export const useShell = (): {
+  setLayout: ShellController['setLayout'];
+} => {
+  const client = useClient();
+  const { runtime, setDisplay } = useContext(ShellContext);
+
+  const setLayout: ShellController['setLayout'] = async (layout, options) => {
+    if (runtime) {
+      if (layout === ShellLayout.DEFAULT) {
+        setDisplay?.(ShellDisplay.NONE);
+      } else {
+        setDisplay?.(ShellDisplay.FULLSCREEN);
+      }
+
+      runtime.setLayout(layout, options);
+    }
+
+    if (client.services instanceof IFrameClientServicesProxy) {
+      await client.services.setLayout(layout, options);
+    }
+  };
+
+  return {
+    setLayout
+  };
+};
+export type ShellProviderProps = PropsWithChildren<{
+  space?: Space;
+  haloInvitationCode?: string | null;
+  spaceInvitationCode?: string | null;
+  onJoinedSpace?: (spaceKey?: PublicKey) => void;
+}>;
+
+/**
+ * Renders the DXOS shell and provides a way to set the layout of the shell from the rest of the app.
+ */
+export const ShellProvider = ({
+  space,
+  haloInvitationCode,
+  spaceInvitationCode,
+  onJoinedSpace,
+  children
+}: ShellProviderProps) => {
+  //
+  // IFrame Shell
+  //
+
+  useEffect(() => {
+    if (client.services instanceof IFrameClientServicesProxy && onJoinedSpace) {
+      return client.services.joinedSpace.on(onJoinedSpace);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (client.services instanceof IFrameClientServicesProxy) {
+      client.services.setSpaceProvider(() => space?.key);
+    }
+  }, [space]);
+
+  //
+  // Component Shell
+  //
+
+  const client = useClient();
+  const identity = useIdentity();
+  const [display, setDisplay] = useState(
+    !identity || spaceInvitationCode || haloInvitationCode ? ShellDisplay.FULLSCREEN : ShellDisplay.NONE
+  );
+
+  const shellRuntime = useMemo(() => {
+    if (client.config.get('runtime.app.env.DX_VAULT') === 'true') {
+      return;
+    }
+
+    if (spaceInvitationCode) {
+      return new MemoryShellRuntime({
+        layout: ShellLayout.JOIN_SPACE,
+        invitationCode: spaceInvitationCode
+      });
+    }
+
+    return new MemoryShellRuntime({
+      layout: identity ? ShellLayout.DEFAULT : ShellLayout.INITIALIZE_IDENTITY,
+      invitationCode: haloInvitationCode ?? undefined
+    });
+  }, [client, identity, spaceInvitationCode, haloInvitationCode]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (!space || !shellRuntime) {
+        return;
+      }
+
+      const modifier = event.ctrlKey || event.metaKey;
+      if (event.key === '>' && event.shiftKey && modifier) {
+        shellRuntime.setLayout(ShellLayout.DEVICE_INVITATIONS);
+        setDisplay(ShellDisplay.FULLSCREEN);
+      } else if (event.key === '.' && modifier) {
+        shellRuntime.setLayout(ShellLayout.SPACE_INVITATIONS, { spaceKey: space.key });
+        setDisplay(ShellDisplay.FULLSCREEN);
+      }
+    },
+    [space, shellRuntime]
+  );
+
+  useEffect(() => {
+    if (!shellRuntime) {
+      return;
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [shellRuntime, handleKeyDown]);
+
+  useEffect(() => {
+    if (!shellRuntime) {
+      return;
+    }
+
+    return shellRuntime.contextUpdate.on(({ display, spaceKey }) => {
+      setDisplay(display);
+      onJoinedSpace?.(spaceKey);
+    });
+  }, [shellRuntime]);
+
+  return (
+    <>
+      {shellRuntime && (
+        <div className={mx(display === ShellDisplay.NONE ? 'hidden' : '')}>
+          <Shell runtime={shellRuntime} origin={window.location.origin} />
+        </div>
+      )}
+
+      <ShellContext.Provider value={{ runtime: shellRuntime, setDisplay }}>
+        {identity ? children : undefined}
+      </ShellContext.Provider>
+    </>
+  );
+};

package/src/composites/Shell/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './Shell';
+export * from './ShellContext';

package/src/panels/DevicesPanel/DevicesPanel.tsx

@@ -58,9 +58,9 @@ const DeviceListView = ({ createInvitationUrl, titleId, onDone, doneActionParent
         <Button
           className='is-full flex gap-2 mbs-2'
           onClick={() => client.halo.createInvitation()}
-          data-testid='create-space-invitation'
+          data-testid='devices-panel.create-invitation'
         >
-          <span>{t('create space invitation label')}</span>
+          <span>{t('create device invitation label')}</span>
           <UserPlus className={getSize(4)} weight='bold' />
         </Button>
         <PanelSeparator />

package/src/panels/JoinPanel/JoinHeading.tsx

@@ -2,10 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 import { ProhibitInset } from 'phosphor-react';
-import React, { cloneElement, ForwardedRef } from 'react';
+import React, { cloneElement, ForwardedRef, forwardRef } from 'react';
 
 import { AuthenticatingInvitationObservable } from '@dxos/client';
-import { useSpace, withReactorRef } from '@dxos/react-client';
+import { useSpace } from '@dxos/react-client';
 import { Avatar, Button, getSize, Heading, mx, Trans, useId, useTranslation } from '@dxos/react-components';
 
 import { subduedSurface } from '../../styles';
@@ -20,7 +20,8 @@ export interface JoinSpaceHeadingProps {
   preventExit?: boolean;
 }
 
-export const JoinHeading = withReactorRef(
+// TODO(wittjosiah): Accesses the space properties directly which will trigger ECHO warnings without observer.
+export const JoinHeading = forwardRef(
   (
     { mode, titleId, invitation, onExit, exitActionParent, preventExit }: JoinSpaceHeadingProps,
     ref: ForwardedRef<HTMLDivElement>

package/src/panels/JoinPanel/JoinPanel.tsx

@@ -151,7 +151,7 @@ export const JoinPanel = ({
   }, [unredeemedHaloInvitationCode]);
 
   useEffect(() => {
-    // TODO (thure): Validate if this is sufficiently synchronous for iOS to move focus. It might not be!
+    // TODO(thure): Validate if this is sufficiently synchronous for iOS to move focus. It might not be!
     const attrValue =
       joinState.activeView === 'identity input'
         ? `${joinState.activeView}; ${joinState.additionMethod}`

package/src/panels/JoinPanel/view-states/InvitationAuthenticator.tsx

@@ -50,14 +50,14 @@ const PureInvitationAuthenticatorContent = ({
             disabled,
             inputMode: 'numeric',
             pattern: '\\d*',
-            'data-autofocus': `${invitationType} invitation acceptor; invitation authenticator`
+            'data-autofocus': `${invitationType} invitation acceptor; invitation authenticator`,
+            'data-testid': `${invitationType}-auth-code-input`
           } as ComponentPropsWithoutRef<'input'>
         }}
         {...(failed && {
           validationValence: 'error',
           validationMessage: t('failed to authenticate message')
         })}
-        data-testid='auth-code-input'
       />
       <div role='none' className='grow' />
       <div className='flex gap-2'>

package/src/panels/JoinPanel/view-states/InvitationInput.tsx

@@ -43,10 +43,10 @@ export const InvitationInput = ({ invitationType, ...viewStateProps }: Invitatio
           label: { className: 'sr-only' },
           input: {
             'data-autofocus': `${invitationType} invitation acceptor; invitation input`,
+            'data-testid': `${invitationType}-invitation-input`,
             onKeyUp: ({ key }) => key === 'Enter' && handleNext()
           } as ComponentPropsWithoutRef<'input'>
         }}
-        data-testid='invitation-input'
       />
       <div role='none' className='grow' />
       <div className='flex gap-2'>

package/src/panels/SpacePanel/SpacePanel.stories.tsx

@@ -2,13 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { StoryContext, StoryFn } from '@storybook/react';
-import React, { useEffect, useState } from 'react';
-
-import { Client, Space } from '@dxos/client';
-import { TestBuilder } from '@dxos/client/testing';
-import { ClientContext } from '@dxos/react-client';
-import { Loading } from '@dxos/react-components';
+import { ClientSpaceDecorator } from '@dxos/react-client/testing';
 
 import { SpacePanel } from './SpacePanel';
 
@@ -16,38 +10,6 @@ export default {
   component: SpacePanel
 };
 
-const SpaceDecorator = (Story: StoryFn, { args }: StoryContext) => {
-  const testBuilder = new TestBuilder();
-  const [client, setClient] = useState<Client>();
-  const [space, setSpace] = useState<Space>();
-
-  useEffect(() => {
-    const timeout = setTimeout(async () => {
-      const client = new Client({ services: testBuilder.createClientServicesHost() });
-      await client.initialize();
-      setClient(client);
-
-      await client.halo.createIdentity();
-      const space = await client.echo.createSpace();
-      space.properties.name = 'Q3 2022 Planning';
-
-      setSpace(space);
-    });
-
-    return () => clearTimeout(timeout);
-  }, []);
-
-  if (!client || !space) {
-    return <Loading label='Setting things up…' />;
-  }
-
-  return (
-    <ClientContext.Provider value={{ client }}>
-      <Story args={{ space, ...args }} />
-    </ClientContext.Provider>
-  );
-};
-
 export const Default = {
-  decorators: [SpaceDecorator]
+  decorators: [ClientSpaceDecorator()]
 };

package/src/panels/SpacePanel/SpacePanel.tsx

@@ -6,7 +6,7 @@ import { UserPlus } from 'phosphor-react';
 import React, { cloneElement, useReducer } from 'react';
 
 import { Space } from '@dxos/client';
-import { useSpaceInvitations } from '@dxos/react-client';
+import { useSpaceInvitations, observer } from '@dxos/react-client';
 import { Button, DensityProvider, getSize, mx, useTranslation } from '@dxos/react-components';
 
 import { InvitationList, PanelSeparator, SpaceMemberListContainer } from '../../components';
@@ -14,7 +14,7 @@ import { defaultSurface, subduedSurface } from '../../styles';
 
 export type SpacePanelProps = {
   titleId?: string;
-  space?: Space;
+  space: Space;
   createInvitationUrl: (invitationCode: string) => string;
   doneActionParent?: Parameters<typeof cloneElement>[0];
   onDone?: () => void;
@@ -22,7 +22,7 @@ export type SpacePanelProps = {
 
 export type SpaceView = 'current space';
 
-const CurrentSpaceView = ({ space, createInvitationUrl, titleId }: SpacePanelProps) => {
+const CurrentSpaceView = observer(({ space, createInvitationUrl, titleId }: SpacePanelProps) => {
   const { t } = useTranslation('os');
   const invitations = useSpaceInvitations(space?.key);
   const name = space?.properties.name;
@@ -48,7 +48,7 @@ const CurrentSpaceView = ({ space, createInvitationUrl, titleId }: SpacePanelPro
         <Button
           className='is-full flex gap-2 mbs-2'
           onClick={() => space?.createInvitation()}
-          data-testid='create-space-invitation'
+          data-testid='spaces-panel.create-invitation'
         >
           <span>{t('create space invitation label')}</span>
           <UserPlus className={getSize(4)} weight='bold' />
@@ -58,7 +58,7 @@ const CurrentSpaceView = ({ space, createInvitationUrl, titleId }: SpacePanelPro
       </div>
     </div>
   );
-};
+});
 
 interface SpacePanelState {
   activeView: SpaceView;