@dxos/shell 0.3.11-main.1caa3af

package/src/components/Viewport/Viewport.stories.tsx

@@ -0,0 +1,66 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { AlertDialog } from '@dxos/react-ui';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { useViewportContext, Viewport, type ViewportScopedProps } from './Viewport';
+import { Action } from '../Panel';
+
+type StorybookViewportProps = {};
+
+const Views = ({ __viewportScope }: ViewportScopedProps<{}>) => {
+  const { setActiveView } = useViewportContext('StorybookViews', __viewportScope);
+  return (
+    <Viewport.Views>
+      <Viewport.View id='one' classNames='p-4'>
+        <p>One</p>
+        <p className='invisible'>Two</p>
+        <p className='invisible'>Three</p>
+        <Action onClick={() => setActiveView('two')}>Next</Action>
+      </Viewport.View>
+      <Viewport.View id='two' classNames='p-4'>
+        <p className='invisible'>One</p>
+        <p>Two</p>
+        <p className='invisible'>Three</p>
+        <Action onClick={() => setActiveView('three')}>Next</Action>
+      </Viewport.View>
+      <Viewport.View id='three' classNames='p-4'>
+        <p className='invisible'>One</p>
+        <p className='invisible'>Two</p>
+        <p>Three</p>
+        <Action onClick={() => setActiveView('one')}>Next</Action>
+      </Viewport.View>
+    </Viewport.Views>
+  );
+};
+
+const StorybookViewport = (props: StorybookViewportProps) => {
+  return (
+    <AlertDialog.Root defaultOpen>
+      <AlertDialog.Overlay>
+        <AlertDialog.Content classNames='p-0'>
+          <Viewport.Root defaultActiveView='one'>
+            <Views />
+          </Viewport.Root>
+        </AlertDialog.Content>
+      </AlertDialog.Overlay>
+    </AlertDialog.Root>
+  );
+};
+
+export default {
+  title: 'react-shell/StorybookViewport',
+  component: StorybookViewport,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
+};
+
+export const Default = {
+  args: {},
+};

package/src/components/Viewport/Viewport.tsx

@@ -0,0 +1,120 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useFocusFinders } from '@fluentui/react-tabster';
+import { createContextScope, type Scope } from '@radix-ui/react-context';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, {
+  type ComponentPropsWithRef,
+  type Dispatch,
+  forwardRef,
+  type ReactNode,
+  type SetStateAction,
+  useEffect,
+} from 'react';
+
+import { type ThemedClassName, useForwardedRef } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+const VIEWPORT_NAME = 'Viewport';
+const VIEWS_NAME = 'ViewportViews';
+const VIEW_NAME = 'ViewportView';
+
+type ViewportContextValue = {
+  focusManaged: boolean;
+  activeView: string;
+  setActiveView: Dispatch<SetStateAction<string | undefined>>;
+};
+
+type ViewportScopedProps<P> = P & { __viewportScope?: Scope };
+
+const [createViewportContext, createViewportScope] = createContextScope(VIEWPORT_NAME, []);
+
+const [ViewportProvider, useViewportContext] = createViewportContext<ViewportContextValue>(VIEWPORT_NAME);
+
+type ViewportRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> &
+  Partial<{
+    focusManaged: boolean;
+    defaultActiveView: string;
+    activeView: string;
+    onActiveViewChange: Dispatch<SetStateAction<string>>;
+  }>;
+
+const ViewportRoot = ({
+  __viewportScope,
+  classNames,
+  children,
+  defaultActiveView,
+  activeView: propsActiveView,
+  focusManaged = false,
+  onActiveViewChange,
+  ...props
+}: ViewportScopedProps<ViewportRootProps>) => {
+  const [activeView = 'never', setActiveView] = useControllableState({
+    prop: propsActiveView,
+    defaultProp: defaultActiveView,
+    onChange: onActiveViewChange,
+  });
+  return (
+    <ViewportProvider
+      focusManaged={focusManaged}
+      activeView={activeView}
+      setActiveView={setActiveView}
+      scope={__viewportScope}
+    >
+      <div role='region' aria-live='polite' {...props} className={mx('is-full overflow-hidden', classNames)}>
+        {children}
+      </div>
+    </ViewportProvider>
+  );
+};
+
+ViewportRoot.displayName = VIEWPORT_NAME;
+
+type ViewportViewsProps = ThemedClassName<Omit<ComponentPropsWithRef<'div'>, 'children'>> & { children: ReactNode[] };
+
+const ViewportViews = ({ classNames, children, ...props }: ViewportViewsProps) => {
+  const size = { inlineSize: `${Math.ceil(children.length) * 100}%` };
+  return (
+    <div role='none' style={size} {...props} className={mx('flex', classNames)}>
+      {children}
+    </div>
+  );
+};
+
+ViewportViews.displayName = VIEWS_NAME;
+
+type ViewportViewProps = ThemedClassName<Omit<ComponentPropsWithRef<'div'>, 'id'>> & {
+  id: string;
+};
+
+const ViewportView = forwardRef<HTMLDivElement, ViewportScopedProps<ViewportViewProps>>(
+  ({ __viewportScope, classNames, children, id, ...props }, forwardedRef) => {
+    const { activeView, focusManaged }: ViewportContextValue = useViewportContext(VIEW_NAME, __viewportScope);
+    const isActive = id === activeView;
+    const ref = useForwardedRef(forwardedRef);
+    const { findFirstFocusable } = useFocusFinders();
+    useEffect(() => {
+      if (!focusManaged && isActive && document.body.hasAttribute('data-is-keyboard') && ref.current) {
+        findFirstFocusable(ref.current)?.focus();
+      }
+    }, [focusManaged, ref.current, isActive]);
+    return (
+      <section
+        {...props}
+        {...(!isActive && { 'aria-hidden': true })}
+        className={mx('min-is-0 flex-1 flex flex-col', isActive ? 'order-2' : 'order-4 invisible', classNames)}
+        ref={ref}
+      >
+        {children}
+      </section>
+    );
+  },
+);
+
+ViewportView.displayName = VIEW_NAME;
+
+export const Viewport = { Root: ViewportRoot, Views: ViewportViews, View: ViewportView };
+export { useViewportContext, createViewportScope };
+export type { ViewportRootProps, ViewportViewsProps, ViewportViewProps, ViewportScopedProps };

package/src/components/Viewport/index.tsx

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

package/src/components/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Clipboard';
+export * from './CompoundButton';
+export * from './IdentityList';
+export * from './InvitationList';
+export * from './Panel';
+export * from './Viewport';
+export * from './AuthCode';
+export * from './SpaceListItem';

package/src/composites/IdentityDialog/IdentityDialog.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type DialogContentProps, Dialog, useId } from '@dxos/react-ui';
+
+import { ClipboardProvider } from '../../components';
+import { IdentityPanel, type IdentityPanelProps } from '../../panels';
+
+export interface IdentityDialogProps
+  extends Omit<DialogContentProps, 'children'>,
+    Omit<IdentityPanelProps, 'doneActionParent'> {
+  onDone: () => void;
+}
+
+export const IdentityDialog = (props: IdentityDialogProps) => {
+  const titleId = useId('spaceDialog__title');
+  return (
+    <Dialog.Root defaultOpen onOpenChange={(open) => open || props.onDone?.()}>
+      <Dialog.Portal>
+        <Dialog.Overlay>
+          <Dialog.Content aria-labelledby={titleId} onOpenAutoFocus={(e) => e.preventDefault()}>
+            <ClipboardProvider>
+              <IdentityPanel
+                {...{
+                  ...props,
+                  titleId,
+                  doneActionParent: <Dialog.Close asChild />,
+                }}
+              />
+            </ClipboardProvider>
+          </Dialog.Content>
+        </Dialog.Overlay>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};

package/src/composites/IdentityDialog/index.ts

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

package/src/composites/JoinDialog/JoinDialog.tsx

@@ -0,0 +1,40 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { AlertDialog, type AlertDialogContentProps, useId, useVisualViewport } from '@dxos/react-ui';
+
+import { JoinPanel, type JoinPanelProps } from '../../panels';
+
+export interface JoinDialogProps
+  extends Omit<AlertDialogContentProps, 'children'>,
+    Omit<JoinPanelProps, 'exitActionParent' | 'doneActionParent'> {}
+
+export const JoinDialog = (joinPanelProps: JoinDialogProps) => {
+  const titleId = useId('joinDialog__title');
+  // todo(thure): This doesn’t work within an iframe on iOS Safari.
+  const { height } = useVisualViewport();
+  return (
+    <AlertDialog.Root
+      defaultOpen
+      onOpenChange={(open) => open || (joinPanelProps.onExit ? joinPanelProps.onExit() : joinPanelProps.onDone?.(null))}
+    >
+      <AlertDialog.Portal>
+        <AlertDialog.Overlay classNames='backdrop-blur' {...(height && { style: { blockSize: `${height}px` } })}>
+          <AlertDialog.Content aria-labelledby={titleId}>
+            <JoinPanel
+              {...{
+                ...joinPanelProps,
+                titleId,
+                exitActionParent: <AlertDialog.Cancel asChild />,
+                doneActionParent: <AlertDialog.Action asChild />,
+              }}
+            />
+          </AlertDialog.Content>
+        </AlertDialog.Overlay>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+};

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,98 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+import { log } from '@dxos/log';
+import { type LayoutRequest, ShellDisplay, ShellLayout, type ShellRuntime } from '@dxos/react-client';
+import { useSpace } from '@dxos/react-client/echo';
+
+import { IdentityDialog } from '../IdentityDialog';
+import { JoinDialog } from '../JoinDialog';
+import { SpaceDialog } from '../SpaceDialog';
+
+export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: string }) => {
+  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));
+  }, [runtime]);
+
+  useEffect(() => {
+    if (layout === ShellLayout.SPACE && !space) {
+      log.warn('No space found for shell space invitations.');
+
+      const timeout = setTimeout(async () => {
+        await runtime.setAppContext({ display: ShellDisplay.NONE });
+        runtime.setLayout({ layout: ShellLayout.DEFAULT });
+      });
+
+      return () => clearTimeout(timeout);
+    }
+  }, [runtime, layout, space]);
+
+  switch (layout) {
+    case ShellLayout.INITIALIZE_IDENTITY:
+      return (
+        <JoinDialog
+          mode='halo-only'
+          initialInvitationCode={invitationCode}
+          onDone={() => {
+            void runtime.setAppContext({ display: ShellDisplay.NONE });
+            runtime.setLayout({ layout: ShellLayout.DEFAULT });
+          }}
+        />
+      );
+
+    // TODO(wittjosiah): Jump straight to specific step if SHARE or EDIT are specified.
+    case ShellLayout.IDENTITY:
+    case ShellLayout.SHARE_IDENTITY:
+    case ShellLayout.EDIT_PROFILE:
+      return (
+        <IdentityDialog
+          createInvitationUrl={(invitationCode) => `${origin}?deviceInvitationCode=${invitationCode}`}
+          onDone={async () => {
+            await runtime.setAppContext({ display: ShellDisplay.NONE });
+            runtime.setLayout({ layout: ShellLayout.DEFAULT });
+          }}
+        />
+      );
+
+    case ShellLayout.SPACE:
+      return space ? (
+        <SpaceDialog
+          space={space}
+          createInvitationUrl={(invitationCode) => `${origin}?spaceInvitationCode=${invitationCode}`}
+          onDone={async () => {
+            await runtime.setAppContext({ display: ShellDisplay.NONE });
+            runtime.setLayout({ layout: ShellLayout.DEFAULT });
+          }}
+        />
+      ) : null;
+
+    case ShellLayout.JOIN_SPACE:
+      return (
+        <JoinDialog
+          initialInvitationCode={invitationCode}
+          onDone={async (result) => {
+            await runtime.setAppContext({ display: ShellDisplay.NONE, spaceKey: result?.spaceKey ?? undefined });
+            runtime.setLayout({ layout: ShellLayout.DEFAULT });
+          }}
+          onExit={async () => {
+            await runtime.setAppContext({ display: ShellDisplay.NONE });
+            runtime.setLayout({ layout: ShellLayout.DEFAULT });
+          }}
+        />
+      );
+
+    default:
+      return null;
+  }
+};

package/src/composites/Shell/ShellContext.tsx

@@ -0,0 +1,163 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, {
+  type Context,
+  createContext,
+  type PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import { type PublicKey, ShellDisplay, ShellLayout, useClient, type LayoutRequest } from '@dxos/react-client';
+import type { Space } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { mx } from '@dxos/react-ui-theme';
+
+import { Shell } from './Shell';
+import { MemoryShellRuntime } from './memory-shell-runtime';
+
+export type ShellContextProps = {
+  runtime?: MemoryShellRuntime;
+  setDisplay?: (display: ShellDisplay) => void;
+};
+
+export const ShellContext: Context<ShellContextProps> = createContext<ShellContextProps>({});
+
+type SetLayout = (layout: ShellLayout, options?: Omit<LayoutRequest, 'layout'>) => void;
+
+/**
+ * @deprecated
+ */
+export const useShell = (): { setLayout: SetLayout } => {
+  const client = useClient();
+  const { runtime, setDisplay } = useContext(ShellContext);
+
+  const setLayout: SetLayout = async (layout, options) => {
+    if (runtime) {
+      if (layout === ShellLayout.DEFAULT) {
+        setDisplay?.(ShellDisplay.NONE);
+      } else {
+        setDisplay?.(ShellDisplay.FULLSCREEN);
+      }
+
+      runtime.setLayout({ layout, ...options });
+    }
+
+    await client.shell.open(layout, options);
+  };
+
+  return {
+    setLayout,
+  };
+};
+
+export type ShellProviderProps = PropsWithChildren<{
+  space?: Space;
+  deviceInvitationCode?: 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.
+ *
+ * @deprecated
+ */
+// TODO(wittjosiah): Remove? Is MemoryShellRuntime needed? We now can use shell with monolithic client.
+export const ShellProvider = ({
+  space,
+  deviceInvitationCode,
+  spaceInvitationCode,
+  onJoinedSpace,
+  children,
+}: ShellProviderProps) => {
+  const client = useClient();
+
+  //
+  // Component Shell
+  //
+
+  const identity = useIdentity();
+  const [display, setDisplay] = useState(
+    !identity || spaceInvitationCode || deviceInvitationCode ? ShellDisplay.FULLSCREEN : ShellDisplay.NONE,
+  );
+
+  const shellRuntime = useMemo(() => {
+    if (client.config.get('runtime.app.env.DX_VAULT') !== 'false') {
+      return;
+    }
+
+    if (spaceInvitationCode) {
+      return new MemoryShellRuntime({
+        layout: ShellLayout.JOIN_SPACE,
+        invitationCode: spaceInvitationCode,
+      });
+    }
+
+    if (deviceInvitationCode) {
+      return new MemoryShellRuntime({
+        layout: ShellLayout.INITIALIZE_IDENTITY,
+        invitationCode: deviceInvitationCode,
+      });
+    }
+
+    return new MemoryShellRuntime({ layout: identity ? ShellLayout.DEFAULT : ShellLayout.INITIALIZE_IDENTITY });
+  }, [client, identity, spaceInvitationCode, deviceInvitationCode]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (!space || !shellRuntime) {
+        return;
+      }
+
+      const modifier = event.ctrlKey || event.metaKey;
+      if (event.key === '>' && event.shiftKey && modifier) {
+        shellRuntime.setLayout({ layout: ShellLayout.SHARE_IDENTITY });
+        setDisplay(ShellDisplay.FULLSCREEN);
+      } else if (event.key === '.' && modifier) {
+        shellRuntime.setLayout({ layout: ShellLayout.SPACE, 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 }) => {
+      if (display) {
+        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 }}>{children}</ShellContext.Provider>
+    </>
+  );
+};

package/src/composites/Shell/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './run-shell';
+export * from './Shell';
+export * from './ShellContext';

package/src/composites/Shell/memory-shell-runtime.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Event } from '@dxos/async';
+import {
+  type AppContextRequest,
+  type LayoutRequest,
+  type PublicKey,
+  ShellLayout,
+  type ShellRuntime,
+} from '@dxos/react-client';
+
+// TODO(wittjosiah): Remove?
+export class MemoryShellRuntime implements ShellRuntime {
+  readonly layoutUpdate = new Event<LayoutRequest>();
+  readonly contextUpdate = new Event<AppContextRequest>();
+  private _layout: ShellLayout;
+  private _invitationCode?: string;
+  private _spaceKey?: PublicKey;
+
+  constructor({ layout, invitationCode, spaceKey }: Partial<LayoutRequest> & Partial<AppContextRequest> = {}) {
+    this._layout = layout ?? ShellLayout.DEFAULT;
+    this._invitationCode = invitationCode;
+    this._spaceKey = spaceKey;
+  }
+
+  get layout() {
+    return this._layout;
+  }
+
+  get invitationCode() {
+    return this._invitationCode;
+  }
+
+  get spaceKey() {
+    return this._spaceKey;
+  }
+
+  setLayout(request: LayoutRequest) {
+    this._layout = request.layout;
+    this._invitationCode = request.invitationCode;
+    this._spaceKey = request.spaceKey;
+    this.layoutUpdate.emit(request);
+  }
+
+  async setAppContext(context: AppContextRequest) {
+    this.contextUpdate.emit(context);
+  }
+}

package/src/composites/Shell/run-shell.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { DEFAULT_CLIENT_CHANNEL, DEFAULT_SHELL_CHANNEL } from '@dxos/client-protocol';
+import { ShellRuntimeImpl } from '@dxos/client-services';
+import { Client, ClientContext, ClientServicesProxy, Config, SystemStatus } from '@dxos/react-client';
+import { ThemeProvider, Tooltip } from '@dxos/react-ui';
+import { defaultTx } from '@dxos/react-ui-theme';
+import { createIFramePort } from '@dxos/rpc-tunnel';
+
+import { Shell } from './Shell';
+import { ClipboardProvider } from '../../components';
+import { osTranslations } from '../../translations';
+
+export const runShell = async (config: Config = new Config()) => {
+  const services = new ClientServicesProxy(createIFramePort({ channel: DEFAULT_CLIENT_CHANNEL }));
+  const client = new Client({ config, services });
+  const runtime = new ShellRuntimeImpl(createIFramePort({ channel: DEFAULT_SHELL_CHANNEL }));
+  await Promise.all([runtime.open(), client.initialize()]);
+
+  createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+      <ThemeProvider tx={defaultTx} resourceExtensions={[osTranslations]}>
+        <ClientContext.Provider value={{ client, status: SystemStatus.ACTIVE }}>
+          <ClipboardProvider>
+            <Tooltip.Provider>
+              <Shell runtime={runtime} origin={location.origin} />
+            </Tooltip.Provider>
+          </ClipboardProvider>
+        </ClientContext.Provider>
+      </ThemeProvider>
+    </StrictMode>,
+  );
+};