@dxos/react-ui 0.1.22 → 0.1.24-next.6b1f434

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

@@ -0,0 +1,81 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+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 { log } from '@dxos/log';
+import { useAsyncEffect } from '@dxos/react-async';
+import { ClientProvider } from '@dxos/react-client';
+import { Loading } from '@dxos/react-components';
+
+import { JoinDialog } from './JoinDialog';
+
+export default {
+  component: JoinDialog
+};
+
+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() }));
+  }, []);
+
+  const [invitationCode, setInvitationCode] = useState<string>();
+
+  const onInvitationEvent = useCallback((invitation: Invitation) => {
+    if (!invitationCode) {
+      const nextInvitationCode = InvitationEncoder.encode(invitation);
+      log.info('[next invitation code]', { nextInvitationCode });
+      setInvitationCode(nextInvitationCode);
+    }
+  }, []);
+
+  useAsyncEffect(async () => {
+    await Promise.all(clients.map((client) => client.initialize()));
+    log.info('[initialized]');
+
+    await clients[0].halo.createProfile({ displayName: 'Os Mutantes' });
+
+    const space = await clients[0].echo.createSpace();
+    log.info('[space created]', space);
+    space.properties.name = 'Q3 2022 Planning';
+
+    const invitation = space.createInvitation({ type: Invitation.Type.INTERACTIVE });
+    log.info('[invitation created]', invitation);
+
+    invitation.subscribe({
+      onAuthenticating: onInvitationEvent,
+      onCancelled: (...args) => log.warn('[cancelled]', args),
+      onConnected: onInvitationEvent,
+      onConnecting: onInvitationEvent,
+      onError: onInvitationEvent,
+      onSuccess: onInvitationEvent,
+      onTimeout: (...args) => log.warn('[timeout]', args)
+    });
+
+    return () => {
+      void Promise.all(clients.map((client) => client.destroy()));
+    };
+  }, clients);
+
+  if (!invitationCode) {
+    return <Loading label='Setting things up…' />;
+  }
+
+  return (
+    <ClientProvider client={clients[1]} fallback={() => <Loading label='Loading client…' />}>
+      <Story args={{ initialInvitationCode: invitationCode, ...args }} />
+    </ClientProvider>
+  );
+};
+
+export const Default = {
+  decorators: [JoinClientDecorator]
+};

package/src/composites/JoinDialog/JoinDialog.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Action, Cancel } from '@radix-ui/react-alert-dialog';
+import React from 'react';
+
+import { ThemeContext, useId } from '@dxos/react-components';
+
+import { PanelAlertDialog, PanelAlertDialogProps } from '../../layouts';
+import { JoinPanel, JoinPanelProps } from '../../panels';
+
+export interface JoinDialogProps
+  extends Omit<PanelAlertDialogProps, 'titleId' | 'children'>,
+    Omit<JoinPanelProps, 'exitActionParent' | 'doneActionParent'> {}
+
+export const JoinDialog = ({ slots, ...joinPanelProps }: JoinDialogProps) => {
+  const titleId = useId('joinDialog__title');
+  return (
+    <PanelAlertDialog {...{ slots, titleId }}>
+      <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+        <JoinPanel
+          {...{
+            ...joinPanelProps,
+            titleId,
+            exitActionParent: <Cancel asChild />,
+            doneActionParent: <Action asChild />
+          }}
+        />
+      </ThemeContext.Provider>
+    </PanelAlertDialog>
+  );
+};

package/src/composites/JoinDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './JoinDialog';

package/src/composites/Shell/Shell.tsx

@@ -0,0 +1,92 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+import { ShellRuntime } from '@dxos/client';
+import { LayoutRequest, ShellDisplay, ShellLayout } from '@dxos/protocols/proto/dxos/iframe';
+import { useClient, useSpace, useSpaces } from '@dxos/react-client';
+
+import { DevicesDialog } from '../DevicesDialog';
+import { JoinDialog } from '../JoinDialog';
+import { SpaceDialog } from '../SpaceDialog';
+
+export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: string }) => {
+  const client = useClient();
+  const spaces = useSpaces();
+
+  const [{ layout, invitationCode, spaceKey }, setLayout] = useState<LayoutRequest>({
+    layout: runtime.layout,
+    invitationCode: runtime.invitationCode,
+    spaceKey: runtime.spaceKey
+  });
+  const space = useSpace(spaceKey);
+
+  useEffect(() => {
+    return runtime.layoutUpdate.on((request) => setLayout(request));
+  }, []);
+
+  switch (layout) {
+    case ShellLayout.AUTH:
+      return (
+        <JoinDialog
+          mode='halo-only'
+          initialInvitationCode={invitationCode}
+          onDone={async () => {
+            // TODO(wittjosiah): Is this app-specific?
+            const space = spaces[0] ?? (await client.echo.createSpace());
+            await runtime.setAppContext({ display: ShellDisplay.NONE, spaceKey: space.key });
+            runtime.setLayout(ShellLayout.DEFAULT);
+          }}
+        />
+      );
+
+    case ShellLayout.CURRENT_SPACE:
+    case ShellLayout.SPACE_LIST:
+      return (
+        <SpaceDialog
+          space={space}
+          initialState={layout === ShellLayout.SPACE_LIST ? 'space list' : 'current space'}
+          createInvitationUrl={(invitationCode) => `${origin}?spaceInvitationCode=${invitationCode}`}
+          onClickJoinSpace={() => runtime.setLayout(ShellLayout.JOIN_SPACE, { spaceKey: space?.key })}
+          onClickMember={() => runtime.setLayout(ShellLayout.DEVICES_LIST, { spaceKey: space?.key })}
+          onDone={async (space) => {
+            // TODO(wittjosiah): If space is newly created the app won't yet know about it.
+            //   This is a bug that needs to be fixed when upgrading the space service.
+            await runtime.setAppContext({ display: ShellDisplay.NONE, spaceKey: space ? space.key : spaceKey });
+            runtime.setLayout(ShellLayout.DEFAULT);
+          }}
+        />
+      );
+
+    case ShellLayout.JOIN_SPACE:
+      return (
+        <JoinDialog
+          initialInvitationCode={invitationCode}
+          onDone={async (result) => {
+            await runtime.setAppContext({ display: ShellDisplay.NONE, spaceKey: result?.spaceKey ?? undefined });
+            runtime.setLayout(ShellLayout.DEFAULT);
+          }}
+          onExit={async () => {
+            await runtime.setAppContext({ display: ShellDisplay.NONE, spaceKey: runtime.spaceKey });
+            runtime.setLayout(ShellLayout.DEFAULT);
+          }}
+        />
+      );
+
+    case ShellLayout.DEVICES_LIST:
+      return (
+        <DevicesDialog
+          createInvitationUrl={(invitationCode) => `${origin}?haloInvitationCode=${invitationCode}`}
+          onDone={async () => {
+            await runtime.setAppContext({ display: ShellDisplay.NONE, spaceKey: runtime.spaceKey });
+            runtime.setLayout(ShellLayout.DEFAULT);
+          }}
+        />
+      );
+
+    default:
+      return null;
+  }
+};

package/src/composites/Shell/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Shell';

package/src/composites/SpaceDialog/SpaceDialog.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Close } from '@radix-ui/react-dialog';
+import React from 'react';
+
+import { ThemeContext, useId } from '@dxos/react-components';
+
+import { PanelDialog, PanelDialogProps } from '../../layouts';
+import { SpacePanel, SpacePanelProps } from '../../panels';
+
+export interface SpaceDialogProps
+  extends Omit<PanelDialogProps, 'titleId' | 'children'>,
+    Omit<SpacePanelProps, 'doneActionParent'> {}
+
+export const SpaceDialog = ({ slots, ...spacePanelProps }: SpaceDialogProps) => {
+  const titleId = useId('spaceDialog__title');
+
+  return (
+    <PanelDialog
+      {...{
+        slots: { ...slots, root: { onOpenChange: (open) => open || spacePanelProps.onDone?.(null), ...slots?.root } },
+        titleId
+      }}
+    >
+      <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+        <SpacePanel
+          {...{
+            ...spacePanelProps,
+            titleId,
+            doneActionParent: <Close asChild />
+          }}
+        />
+      </ThemeContext.Provider>
+    </PanelDialog>
+  );
+};

package/src/composites/SpaceDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './SpaceDialog';

package/src/composites/index.ts

@@ -1,4 +1,8 @@
 //
 // Copyright 2022 DXOS.org
 //
+
 export * from './IdentityPopover';
+export * from './JoinDialog';
+export * from './Shell';
+export * from './SpaceDialog';

package/src/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
+export * from './components';
 export * from './composites';
 export * from './layouts';
 export * from './panels';

package/src/layouts/PanelAlertDialog/PanelAlertDialog.tsx

@@ -0,0 +1,40 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as AlertDialog from '@radix-ui/react-alert-dialog';
+import React, { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
+
+import { mx } from '@dxos/react-components';
+
+import { defaultDialogContent, defaultOverlay } from '../../styles';
+
+export interface PanelAlertDialogSlots {
+  root: ComponentPropsWithoutRef<typeof AlertDialog.Root>;
+  overlay: ComponentPropsWithoutRef<typeof AlertDialog.Overlay>;
+  content: ComponentPropsWithoutRef<typeof AlertDialog.Content>;
+  trigger: ComponentPropsWithoutRef<typeof AlertDialog.Trigger>;
+}
+
+export type PanelAlertDialogProps = PropsWithChildren<{
+  titleId: string;
+  slots?: Partial<PanelAlertDialogSlots>;
+}>;
+
+export const PanelAlertDialog = ({ titleId, slots = {}, children }: PanelAlertDialogProps) => {
+  return (
+    <AlertDialog.Root defaultOpen {...slots.root}>
+      {slots.trigger && <AlertDialog.Trigger {...slots.trigger} />}
+      <AlertDialog.Overlay {...slots.overlay} className={mx(defaultOverlay, 'z-40', slots.overlay?.className)}>
+        <AlertDialog.Content
+          onEscapeKeyDown={(event) => event.preventDefault()}
+          {...slots.content}
+          aria-labelledby={titleId}
+          className={mx(defaultDialogContent, slots.content?.className)}
+        >
+          {children}
+        </AlertDialog.Content>
+      </AlertDialog.Overlay>
+    </AlertDialog.Root>
+  );
+};

package/src/layouts/PanelAlertDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './PanelAlertDialog';

package/src/layouts/PanelDialog/PanelDialog.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Dialog from '@radix-ui/react-dialog';
+import React, { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
+
+import { mx } from '@dxos/react-components';
+
+import { defaultDialogContent, defaultOverlay } from '../../styles';
+
+export interface PanelDialogSlots {
+  root: ComponentPropsWithoutRef<typeof Dialog.Root>;
+  overlay: ComponentPropsWithoutRef<typeof Dialog.Overlay>;
+  content: ComponentPropsWithoutRef<typeof Dialog.Content>;
+  trigger: ComponentPropsWithoutRef<typeof Dialog.Trigger>;
+}
+
+export type PanelDialogProps = PropsWithChildren<{
+  titleId: string;
+  slots?: Partial<PanelDialogSlots>;
+}>;
+
+export const PanelDialog = ({ titleId, slots = {}, children }: PanelDialogProps) => {
+  return (
+    <Dialog.Root defaultOpen {...slots.root}>
+      {slots.trigger && <Dialog.Trigger {...slots.trigger} />}
+      <Dialog.Overlay {...slots.overlay} className={mx(defaultOverlay, 'z-40', slots.overlay?.className)}>
+        <Dialog.Content
+          {...slots.content}
+          aria-labelledby={titleId}
+          className={mx(defaultDialogContent, slots.content?.className)}
+        >
+          {children}
+        </Dialog.Content>
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};

package/src/layouts/PanelDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './PanelDialog';

package/src/layouts/PanelPopover/PanelPopover.tsx

@@ -6,7 +6,7 @@ import React, { ComponentProps } from 'react';
 
 import { mx, Popover } from '@dxos/react-components';
 
-import { defaultPanel, defaultArrow } from '../../styles';
+import { defaultSurface, defaultArrow } from '../../styles';
 
 /**
  * This component essentially sets default styles for popovers which have panels as their content
@@ -24,7 +24,7 @@ export const PanelPopover = ({ slots, children, ...popoverProps }: ComponentProp
           collisionPadding: 8,
           sideOffset: 4,
           ...slots?.content,
-          className: mx(defaultPanel, slots?.content?.className)
+          className: mx(defaultSurface, slots?.content?.className)
         },
         trigger: {
           ...slots?.trigger,

package/src/layouts/PanelSidebar/PanelSidebar.tsx

@@ -7,7 +7,6 @@ import React, {
   ComponentProps,
   createContext,
   Dispatch,
-  Fragment,
   PropsWithChildren,
   SetStateAction,
   useCallback,
@@ -19,8 +18,6 @@ import { defaultOverlay, mx, useMediaQuery, useTranslation } from '@dxos/react-c
 
 export type PanelSidebarState = 'show' | 'hide';
 
-export const sidebarWidth = 272;
-
 export interface PanelSidebarContextValue {
   setDisplayState: Dispatch<SetStateAction<PanelSidebarState>>;
   displayState: PanelSidebarState;
@@ -39,9 +36,8 @@ export const useTogglePanelSidebar = () => {
 };
 
 export interface PanelSidebarProviderSlots {
-  content?: ComponentProps<typeof Fragment>;
-  fixedBlockStart?: ComponentProps<'div'>;
-  fixedBlockEnd?: ComponentProps<'div'>;
+  content?: ComponentProps<typeof DialogPrimitive.Content>;
+  main?: ComponentProps<'div'>;
 }
 
 export interface PanelSidebarProviderProps {
@@ -51,20 +47,22 @@ export interface PanelSidebarProviderProps {
 
 export const PanelSidebarProvider = ({ children, slots }: PropsWithChildren<PanelSidebarProviderProps>) => {
   const { t } = useTranslation('os');
-  const [displayState, setInternalDisplayState] = useState<PanelSidebarState>('hide');
-  const [transitionShow, setTransitionShow] = useState(false);
+  const [isLg] = useMediaQuery('lg', { ssr: false });
+  const [displayState, setInternalDisplayState] = useState<PanelSidebarState>(isLg ? 'show' : 'hide');
   const isOpen = displayState === 'show';
-
-  const [isLg] = useMediaQuery('lg');
+  const [transitionShow, setTransitionShow] = useState(isOpen);
+  const [domShow, setDomShow] = useState(isOpen);
 
   const internalHide = () => {
     setTransitionShow(false);
+    setInternalDisplayState('hide');
     setTimeout(() => {
-      setInternalDisplayState('hide');
+      setDomShow(false);
     }, 200);
   };
 
   const internalShow = () => {
+    setDomShow(true);
     setInternalDisplayState('show');
     setTimeout(() => {
       setTransitionShow(true);
@@ -77,30 +75,24 @@ export const PanelSidebarProvider = ({ children, slots }: PropsWithChildren<Pane
 
   return (
     <PanelSidebarContext.Provider value={{ setDisplayState, displayState }}>
-      <DialogPrimitive.Root open={isOpen} modal={!isLg}>
+      <DialogPrimitive.Root open={domShow} modal={!isLg}>
+        {/* Sidebar. */}
         <DialogPrimitive.Content
+          onOpenAutoFocus={(event) => isLg && event.preventDefault()}
+          onCloseAutoFocus={(event) => isLg && event.preventDefault()}
+          {...slots?.content}
           className={mx(
-            'fixed block-start-0 block-end-0 is-[272px] z-50 transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out',
-            'bg-neutral-50 dark:bg-neutral-950',
-            transitionShow ? 'inline-start-0' : `inline-start-[-${sidebarWidth}px]`
+            'fixed block-start-0 block-end-0 is-sidebar z-30 overscroll-contain overflow-x-hidden overflow-y-auto',
+            'transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out',
+            transitionShow ? 'inline-start-0' : '-inline-start-sidebar',
+            slots?.content?.className
           )}
         >
           <DialogPrimitive.Title className='sr-only'>{t('sidebar label')}</DialogPrimitive.Title>
-          <Fragment {...slots?.content} />
+          {slots?.content?.children}
         </DialogPrimitive.Content>
-        {slots?.fixedBlockStart && (
-          <div
-            role='none'
-            {...slots?.fixedBlockStart}
-            className={mx(
-              'fixed inline-end-0 block-start-0 z-[49] transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out',
-              transitionShow ? 'inline-start-[272px]' : 'inline-start-0',
-              slots?.fixedBlockStart?.className
-            )}
-          >
-            {slots?.fixedBlockStart?.children}
-          </div>
-        )}
+
+        {/* TODO(burdon): Simple comment required. */}
         {!isLg && (
           <DialogPrimitive.Overlay
             className={mx(
@@ -111,11 +103,15 @@ export const PanelSidebarProvider = ({ children, slots }: PropsWithChildren<Pane
             onClick={internalHide}
           />
         )}
+
+        {/* Main content. */}
         <div
           role='none'
+          {...slots?.main}
           className={mx(
-            'bs-full transition-[padding-inline-start] duration-200 ease-in-out',
-            isLg && isOpen ? 'pis-[272px]' : 'pis-0'
+            'transition-[padding-inline-start] duration-200 ease-in-out',
+            isLg && isOpen ? 'pis-sidebar' : 'pis-0',
+            slots?.main?.className
           )}
         >
           {children}

package/src/layouts/index.ts

@@ -4,3 +4,5 @@
 
 export * from './PanelPopover';
 export * from './PanelSidebar';
+export * from './PanelAlertDialog';
+export * from './PanelDialog';

package/src/panels/DevicesPanel/DevicesPanel.tsx

@@ -0,0 +1,98 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { UserPlus, X } from 'phosphor-react';
+import React, { cloneElement, useReducer } from 'react';
+
+import { useClient, useDevices, useHaloInvitations, useIdentity } from '@dxos/react-client';
+import { Button, getSize, mx, Tooltip, useTranslation } from '@dxos/react-components';
+
+import { DeviceList, InvitationList, PanelSeparator } from '../../components';
+import { defaultSurface, subduedSurface } from '../../styles';
+
+export type DevicesPanelProps = {
+  titleId?: string;
+  createInvitationUrl: (invitationCode: string) => string;
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+  onDone?: () => void;
+};
+
+export type DevicesView = 'device list';
+
+const DeviceListView = ({ createInvitationUrl, titleId, onDone, doneActionParent }: DevicesPanelProps) => {
+  const { t } = useTranslation('os');
+  const client = useClient();
+  const identity = useIdentity();
+  const devices = useDevices();
+  const invitations = useHaloInvitations();
+  const displayName = identity?.displayName;
+
+  if (!identity) {
+    return null;
+  }
+
+  const doneButton = (
+    <Button compact variant='ghost' onClick={() => onDone?.()} data-testid='show-all-spaces'>
+      <X className={getSize(4)} weight='bold' />
+    </Button>
+  );
+
+  return (
+    <div role='none' className='flex flex-col'>
+      <div role='none' className={mx(subduedSurface, 'rounded-bs-md flex items-center p-2 gap-2')}>
+        {/* TODO(wittjosiah): Label this as the identity panel. */}
+        <h2 id={titleId} className={mx('grow font-system-medium', !displayName && 'font-mono')}>
+          {displayName ?? identity.identityKey.truncate()}
+        </h2>
+        <Tooltip content={t('close label')} zIndex='z-50'>
+          {doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton}
+        </Tooltip>
+      </div>
+      <div role='region' className={mx(defaultSurface, 'rounded-be-md p-2')}>
+        <InvitationList
+          invitations={invitations}
+          onClickRemove={({ invitation }) => invitation && client.halo.removeInvitation(invitation.invitationId!)}
+          createInvitationUrl={createInvitationUrl}
+        />
+        <Button
+          className='is-full flex gap-2 mbs-2'
+          compact
+          onClick={() => client.halo.createInvitation()}
+          data-testid='create-space-invitation'
+        >
+          <span>{t('create space invitation label')}</span>
+          <UserPlus className={getSize(4)} weight='bold' />
+        </Button>
+        <PanelSeparator />
+        <DeviceList devices={devices} />
+      </div>
+    </div>
+  );
+};
+
+type DevicesPanelState = {
+  activeView: DevicesView;
+};
+
+type DevicesPanelAction = {
+  type: null;
+};
+
+// TODO(wittjosiah): Rename identity panel and include other views?
+export const DevicesPanel = (props: DevicesPanelProps) => {
+  const reducer = (state: DevicesPanelState, action: DevicesPanelAction) => {
+    const nextState = { ...state };
+    switch (action.type) {
+      case null:
+    }
+    return nextState;
+  };
+
+  const [panelState] = useReducer(reducer, {
+    activeView: 'device list'
+  });
+
+  // TODO(wittjosiah): Use ViewState or similar.
+  return <>{panelState.activeView === 'device list' ? <DeviceListView {...props} /> : null}</>;
+};

package/src/panels/DevicesPanel/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './DevicesPanel';