@dxos/shell 0.3.11-main.1caa3af

package/src/panels/IdentityPanel/steps/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './IdentityActionChooser';
+export * from './ProfileForm';

package/src/panels/JoinPanel/JoinHeading.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2023 DXOS.org
+//
+import { X } from '@phosphor-icons/react';
+import React, { cloneElement, type ForwardedRef, forwardRef } from 'react';
+
+import { Button, useTranslation } from '@dxos/react-ui';
+import { descriptionText, getSize, mx } from '@dxos/react-ui-theme';
+
+import { type JoinPanelMode } from './JoinPanelProps';
+import { Heading } from '../../components';
+
+export interface JoinSpaceHeadingProps {
+  mode?: JoinPanelMode;
+  titleId: string;
+  onExit?: () => void;
+  exitActionParent?: Parameters<typeof cloneElement>[0];
+}
+
+// TODO(wittjosiah): Accesses the space properties directly which will trigger ECHO warnings without observer.
+export const JoinHeading = forwardRef(
+  ({ mode, titleId, onExit, exitActionParent }: JoinSpaceHeadingProps, forwardedRef: ForwardedRef<HTMLDivElement>) => {
+    const { t } = useTranslation('os');
+
+    const exitButton = (
+      <Button
+        variant='ghost'
+        {...(onExit && { onClick: onExit })}
+        classNames={mx(descriptionText, 'plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]')}
+        data-testid='join-exit'
+      >
+        <X weight='bold' className={getSize(4)} />
+        <span className='sr-only'>{t('exit label')}</span>
+      </Button>
+    );
+
+    return (
+      <Heading
+        ref={forwardedRef}
+        titleId={titleId}
+        title={t(mode === 'halo-only' ? 'selecting identity heading' : 'joining space heading')}
+        {...(mode === 'halo-only'
+          ? { titleSrOnly: true }
+          : { corner: exitActionParent ? cloneElement(exitActionParent, {}, exitButton) : exitButton })}
+        titleSrOnly={mode === 'halo-only'}
+      />
+    );
+  },
+);

package/src/panels/JoinPanel/JoinPanel.stories.tsx

@@ -0,0 +1,91 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import { JoinPanelImpl } from './JoinPanel';
+import { type JoinPanelImplProps } from './JoinPanelProps';
+import { IdentityInputImpl, ResetIdentityImpl } from './steps';
+import { StorybookDialog } from '../../components/StorybookDialog';
+
+const noOpProps: JoinPanelImplProps = {
+  titleId: 'storybookJoinPanel__title',
+  send: () => {},
+  activeView: 'create identity input',
+  failed: new Set(),
+  pending: false,
+};
+
+const JoinDialog = (args: Partial<JoinPanelImplProps>) => (
+  <StorybookDialog inOverlayLayout>
+    <JoinPanelImpl {...noOpProps} {...args} />
+  </StorybookDialog>
+);
+
+export default {
+  title: 'react-shell/JoinPanel',
+  component: JoinDialog,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
+  args: {
+    IdentityInput: IdentityInputImpl,
+    ResetIdentity: ResetIdentityImpl,
+  },
+};
+
+export const AdditionMethodChooser = {
+  args: { mode: 'halo-only', activeView: 'addition method chooser' },
+};
+
+export const ResetIdentity = {
+  args: { mode: 'halo-only', activeView: 'reset identity confirmation' },
+};
+
+export const CreateIdentityInput = {
+  args: { mode: 'halo-only', activeView: 'create identity input' },
+};
+
+export const RecoverIdentityInput = {
+  args: { mode: 'halo-only', activeView: 'recover identity input' },
+};
+
+export const HaloInvitationInput = {
+  args: { mode: 'halo-only', activeView: 'halo invitation input' },
+};
+
+export const HaloInvitationRescuer = {
+  args: { mode: 'halo-only', activeView: 'halo invitation rescuer' },
+};
+
+export const HaloInvitationAuthenticator = {
+  args: { mode: 'halo-only', activeView: 'halo invitation authenticator' },
+};
+
+export const HaloInvitationAccepted = {
+  args: { mode: 'halo-only', activeView: 'halo invitation accepted' },
+};
+
+export const IdentityAdded = {
+  args: { mode: 'halo-only', activeView: 'identity added' },
+};
+
+export const SpaceInvitationInput = {
+  args: { activeView: 'space invitation input' },
+};
+
+export const SpaceInvitationRescuer = {
+  args: { activeView: 'space invitation rescuer' },
+};
+
+export const SpaceInvitationAuthenticator = {
+  args: { activeView: 'space invitation authenticator' },
+};
+
+export const SpaceInvitationAccepted = {
+  args: { activeView: 'space invitation accepted' },
+};

package/src/panels/JoinPanel/JoinPanel.tsx

@@ -0,0 +1,415 @@
+//
+// Copyright 2023 DXOS.org
+//
+import React, { useCallback, useEffect, useMemo } from 'react';
+
+import { log } from '@dxos/log';
+import { useClient, useMulticastObservable } from '@dxos/react-client';
+import { useIdentity } from '@dxos/react-client/halo';
+import { DensityProvider, useId, useThemeContext } from '@dxos/react-ui';
+
+import { JoinHeading } from './JoinHeading';
+import { type JoinPanelImplProps, type JoinPanelProps } from './JoinPanelProps';
+import { useJoinMachine } from './joinMachine';
+import {
+  AdditionMethodChooser,
+  IdentityInput,
+  IdentityAdded,
+  InvitationAuthenticator,
+  InvitationRescuer,
+  InvitationInput,
+  InvitationAccepted,
+  ResetIdentity,
+} from './steps';
+import { Viewport } from '../../components';
+import { stepStyles } from '../../styles';
+
+export const JoinPanelImpl = (props: JoinPanelImplProps) => {
+  const {
+    titleId,
+    send,
+    activeView,
+    failed,
+    mode,
+    unredeemedCodes,
+    invitationStates,
+    succeededKeys,
+    failReasons,
+    onExit,
+    onHaloDone,
+    onSpaceDone,
+    exitActionParent,
+    doneActionParent,
+    onHaloInvitationCancel,
+    onSpaceInvitationCancel,
+    onHaloInvitationAuthenticate,
+    onSpaceInvitationAuthenticate,
+    IdentityInput: IdentityInputComponent = IdentityInput,
+    ResetIdentity: ResetIdentityComponent = ResetIdentity,
+  } = props;
+  return (
+    <DensityProvider density='fine'>
+      {mode !== 'halo-only' && <JoinHeading {...{ titleId, mode, onExit, exitActionParent }} />}
+      <Viewport.Root focusManaged activeView={activeView}>
+        <Viewport.Views>
+          <Viewport.View classNames={stepStyles} id='addition method chooser'>
+            <AdditionMethodChooser send={send} active={activeView === 'addition method chooser'} />
+          </Viewport.View>
+          <Viewport.View classNames={stepStyles} id='reset identity confirmation'>
+            <ResetIdentityComponent
+              send={send}
+              method='reset identity'
+              active={activeView === 'reset identity confirmation'}
+            />
+          </Viewport.View>
+          <Viewport.View classNames={stepStyles} id='create identity input'>
+            <IdentityInputComponent
+              send={send}
+              method='create identity'
+              active={activeView === 'create identity input'}
+            />
+          </Viewport.View>
+          <Viewport.View classNames={stepStyles} id='recover identity input'>
+            <IdentityInputComponent
+              send={send}
+              method='recover identity'
+              active={activeView === 'recover identity input'}
+            />
+          </Viewport.View>
+          <Viewport.View classNames={stepStyles} id='halo invitation input'>
+            <InvitationInput
+              send={send}
+              Kind='Halo'
+              active={activeView === 'halo invitation input'}
+              {...(unredeemedCodes?.Halo && { unredeemedCode: unredeemedCodes.Halo })}
+              {...(succeededKeys?.Halo && { succeededKeys: succeededKeys.Halo })}
+            />
+          </Viewport.View>
+          <Viewport.View classNames={stepStyles} id='halo invitation rescuer'>
+            <InvitationRescuer
+              send={send}
+              Kind='Halo'
+              active={activeView === 'halo invitation rescuer'}
+              invitationState={invitationStates?.Halo}
+              onInvitationCancel={onHaloInvitationCancel}
+              failReason={failReasons?.Halo}
+            />
+          </Viewport.View>
+          <Viewport.View classNames={stepStyles} id='halo invitation authenticator'>
+            <InvitationAuthenticator
+              send={send}
+              Kind='Halo'
+              active={activeView === 'halo invitation authenticator'}
+              onInvitationCancel={onHaloInvitationCancel}
+              onInvitationAuthenticate={onHaloInvitationAuthenticate}
+              {...(failed.has('Halo') && { failed: true })}
+            />
+          </Viewport.View>
+          <Viewport.View classNames={stepStyles} id='halo invitation accepted'>
+            <InvitationAccepted
+              {...{
+                send,
+                Kind: 'Halo',
+                active: activeView === 'halo invitation accepted',
+                doneActionParent,
+                onDone: onHaloDone,
+              }}
+            />
+          </Viewport.View>
+          <Viewport.View classNames={stepStyles} id='identity added'>
+            <IdentityAdded
+              {...{ send, mode, active: activeView === 'identity added', doneActionParent, onDone: onHaloDone }}
+            />
+          </Viewport.View>
+          <Viewport.View classNames={stepStyles} id='space invitation input'>
+            <InvitationInput
+              send={send}
+              Kind='Space'
+              active={activeView === 'space invitation input'}
+              {...(unredeemedCodes?.Space && { unredeemedCode: unredeemedCodes.Space })}
+              {...(succeededKeys?.Space && { succeededKeys: succeededKeys.Space })}
+              onExit={onExit}
+              exitActionParent={exitActionParent}
+            />
+          </Viewport.View>
+          <Viewport.View classNames={stepStyles} id='space invitation rescuer'>
+            <InvitationRescuer
+              send={send}
+              Kind='Space'
+              active={activeView === 'space invitation rescuer'}
+              invitationState={invitationStates?.Space}
+              onInvitationCancel={onSpaceInvitationCancel}
+              failReason={failReasons?.Space}
+            />
+          </Viewport.View>
+          <Viewport.View classNames={stepStyles} id='space invitation authenticator'>
+            <InvitationAuthenticator
+              send={send}
+              Kind='Space'
+              active={activeView === 'space invitation authenticator'}
+              onInvitationCancel={onSpaceInvitationCancel}
+              onInvitationAuthenticate={onSpaceInvitationAuthenticate}
+              {...(failed.has('Space') && { failed: true })}
+            />
+          </Viewport.View>
+          <Viewport.View classNames={stepStyles} id='space invitation accepted'>
+            <InvitationAccepted
+              {...{
+                send,
+                Kind: 'Space',
+                active: activeView === 'space invitation accepted',
+                doneActionParent,
+                onDone: onSpaceDone,
+              }}
+            />
+          </Viewport.View>
+        </Viewport.Views>
+      </Viewport.Root>
+    </DensityProvider>
+  );
+};
+
+export const JoinPanel = ({
+  titleId: propsTitleId,
+  mode = 'default',
+  initialInvitationCode,
+  exitActionParent,
+  onExit,
+  doneActionParent,
+  onDone: propsOnDone,
+}: JoinPanelProps) => {
+  const client = useClient();
+  const identity = useIdentity();
+  const { hasIosKeyboard } = useThemeContext();
+  const titleId = useId('joinPanel__heading', propsTitleId);
+
+  const [joinState, joinSend, joinService] = useJoinMachine(client, {
+    context: {
+      mode,
+      identity,
+      ...(initialInvitationCode && {
+        [mode === 'halo-only' ? 'halo' : 'space']: { unredeemedCode: initialInvitationCode },
+      }),
+    },
+  });
+
+  console.log('[joinState]', joinState);
+
+  useEffect(() => {
+    const subscription = joinService.subscribe((state) => {
+      log('[state]', state);
+    });
+
+    return subscription.unsubscribe;
+  }, [joinService]);
+
+  useEffect(() => {
+    const stateStack = joinState.configuration[0].id.split('.');
+    const innermostState = stateStack[stateStack.length - 1];
+    const autoFocusValue = innermostState === 'finishingJoining' ? 'successSpaceInvitation' : innermostState;
+    const $nextAutofocus: HTMLElement | null = document.querySelector(`[data-autofocus~="${autoFocusValue}"]`);
+    if ($nextAutofocus && !(hasIosKeyboard && $nextAutofocus.hasAttribute('data-prevent-ios-autofocus'))) {
+      $nextAutofocus.focus();
+    }
+  }, [joinState.value, hasIosKeyboard]);
+
+  const activeView = useMemo(() => {
+    switch (true) {
+      case joinState.matches({ choosingIdentity: 'choosingAuthMethod' }):
+        return 'addition method chooser';
+      case joinState.matches('resettingIdentity'):
+        return 'reset identity confirmation';
+      case joinState.matches({ choosingIdentity: 'creatingIdentity' }):
+        return 'create identity input';
+      case joinState.matches({ choosingIdentity: 'recoveringIdentity' }):
+        return 'recover identity input';
+      case joinState.matches({
+        choosingIdentity: { acceptingHaloInvitation: 'inputtingHaloInvitationCode' },
+      }):
+        return 'halo invitation input';
+      case [
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: { acceptingRedeemedHaloInvitation: 'connectingHaloInvitation' },
+          },
+        },
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: { acceptingRedeemedHaloInvitation: 'failingHaloInvitation' },
+          },
+        },
+      ].some(joinState.matches):
+        return 'halo invitation rescuer';
+      case [
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: { acceptingRedeemedHaloInvitation: 'inputtingHaloVerificationCode' },
+          },
+        },
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: { acceptingRedeemedHaloInvitation: 'authenticatingHaloVerificationCode' },
+          },
+        },
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: {
+              acceptingRedeemedHaloInvitation: 'authenticationFailingHaloVerificationCode',
+            },
+          },
+        },
+      ].some(joinState.matches):
+        return 'halo invitation authenticator';
+      case [
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: { acceptingRedeemedHaloInvitation: 'successHaloInvitation' },
+          },
+        },
+        'finishingJoiningHalo',
+      ].some(joinState.matches):
+        return 'halo invitation accepted';
+      case joinState.matches({
+        choosingIdentity: 'confirmingAddedIdentity',
+      }):
+        return 'identity added';
+      case joinState.matches({
+        acceptingSpaceInvitation: 'inputtingSpaceInvitationCode',
+      }):
+        return 'space invitation input';
+      case [
+        {
+          acceptingSpaceInvitation: { acceptingRedeemedSpaceInvitation: 'connectingSpaceInvitation' },
+        },
+        {
+          acceptingSpaceInvitation: { acceptingRedeemedSpaceInvitation: 'failingSpaceInvitation' },
+        },
+      ].some(joinState.matches):
+        return 'space invitation rescuer';
+      case [
+        {
+          acceptingSpaceInvitation: { acceptingRedeemedSpaceInvitation: 'inputtingSpaceVerificationCode' },
+        },
+        {
+          acceptingSpaceInvitation: { acceptingRedeemedSpaceInvitation: 'authenticatingSpaceVerificationCode' },
+        },
+        {
+          acceptingSpaceInvitation: {
+            acceptingRedeemedSpaceInvitation: 'authenticationFailingSpaceVerificationCode',
+          },
+        },
+      ].some(joinState.matches):
+        return 'space invitation authenticator';
+      case joinState.matches('finishingJoiningSpace'):
+        return 'space invitation accepted';
+      default:
+        return 'never';
+    }
+  }, [joinState]);
+
+  const failed = useMemo(() => {
+    const result: JoinPanelImplProps['failed'] = new Set();
+    switch (true) {
+      case joinState.matches({
+        choosingIdentity: {
+          acceptingHaloInvitation: {
+            acceptingRedeemedHaloInvitation: 'authenticationFailingHaloVerificationCode',
+          },
+        },
+      }):
+        result.add('Halo');
+        break;
+      case joinState.matches({
+        acceptingSpaceInvitation: {
+          acceptingRedeemedSpaceInvitation: 'authenticationFailingSpaceVerificationCode',
+        },
+      }):
+        result.add('Space');
+        break;
+    }
+    return result;
+  }, [joinState]);
+
+  const unredeemedCodes = useMemo(
+    () => ({
+      Halo: joinState.context.halo.unredeemedCode,
+      Space: joinState.context.space.unredeemedCode,
+    }),
+    [joinState],
+  );
+
+  const spaces = useMulticastObservable(client.spaces);
+
+  const succeededKeys = useMemo(
+    () => ({
+      Space: spaces ? new Set(spaces.map(({ key }) => key.toHex())) : undefined,
+    }),
+    [spaces],
+  );
+
+  const invitationStates = useMemo(
+    () => ({
+      Halo: joinState.context.halo.invitationObservable?.get().state,
+      Space: joinState.context.space.invitationObservable?.get().state,
+    }),
+    [joinState],
+  );
+
+  const failReasons = useMemo(
+    () => ({
+      Halo: joinState.context.halo.failReason,
+      Space: joinState.context.space.failReason,
+    }),
+    [joinState],
+  );
+
+  const onHaloDone = useCallback(() => {
+    propsOnDone?.({
+      identityKey: joinState.context.halo.invitation?.identityKey ?? null,
+      swarmKey: joinState.context.halo.invitation?.swarmKey ?? null,
+      spaceKey: joinState.context.halo.invitation?.spaceKey ?? null,
+    });
+  }, [joinState, propsOnDone]);
+
+  const onSpaceDone = useCallback(() => {
+    propsOnDone?.({
+      identityKey: joinState.context.space.invitation?.identityKey ?? null,
+      swarmKey: joinState.context.space.invitation?.swarmKey ?? null,
+      spaceKey: joinState.context.space.invitation?.spaceKey ?? null,
+    });
+  }, [joinState, propsOnDone]);
+
+  return (
+    <JoinPanelImpl
+      {...{
+        titleId,
+        mode,
+        send: joinSend,
+        activeView,
+        failed,
+        failReasons,
+        pending: ['connecting', 'authenticating'].some((str) => joinState?.configuration[0].id.includes(str)),
+        unredeemedCodes,
+        invitationStates,
+        succeededKeys,
+        identity,
+        onExit,
+        exitActionParent,
+        doneActionParent,
+        onHaloDone,
+        onSpaceDone,
+        onHaloInvitationCancel: () => joinState.context.halo.invitationObservable?.cancel(),
+        onSpaceInvitationCancel: () => joinState.context.space.invitationObservable?.cancel(),
+        onHaloInvitationAuthenticate: (authCode: string) => {
+          // todo(thure): Is this necessary? Shouldn’t the observable emit this?
+          joinSend({ type: 'authenticateHaloVerificationCode' });
+          return joinState.context.halo.invitationObservable?.authenticate(authCode);
+        },
+        onSpaceInvitationAuthenticate: (authCode: string) => {
+          joinSend({ type: 'authenticateSpaceVerificationCode' });
+          return joinState.context.space.invitationObservable?.authenticate(authCode);
+        },
+      }}
+    />
+  );
+};

package/src/panels/JoinPanel/JoinPanelProps.ts

@@ -0,0 +1,132 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type cloneElement } from 'react';
+
+import type { Identity } from '@dxos/react-client/halo';
+import type { Invitation, AuthenticatingInvitationObservable, InvitationResult } from '@dxos/react-client/invitations';
+
+import { type JoinSend } from './joinMachine';
+import { type ResetIdentityProps, type IdentityInputProps } from './steps';
+import { type StepProps } from '../../steps';
+import { type FailReason } from '../../types';
+
+export type JoinPanelMode = 'default' | 'halo-only';
+
+export type JoinStepProps = Omit<StepProps, 'send' | 'onDone'> & {
+  send: JoinSend;
+  onDone?: (result: InvitationResult | null) => void;
+};
+
+export interface JoinPanelProps {
+  mode?: JoinPanelMode;
+  initialInvitationCode?: string;
+  titleId?: string;
+  exitActionParent?: Parameters<typeof cloneElement>[0];
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+  onExit?: () => void;
+  onDone?: (result: InvitationResult | null) => void;
+  parseInvitationCodeInput?: (invitationCodeInput: string) => string;
+}
+
+export type JoinPanelImplProps = Pick<
+  JoinPanelProps,
+  'mode' | 'onExit' | 'onDone' | 'exitActionParent' | 'doneActionParent'
+> & {
+  send: JoinSend;
+  titleId: string;
+  activeView: string;
+  failed: Set<'Halo' | 'Space'>;
+  pending: boolean;
+  unredeemedCodes?: Partial<{
+    Halo: string;
+    Space: string;
+  }>;
+  invitationStates?: Partial<{
+    Halo: Invitation.State;
+    Space: Invitation.State;
+  }>;
+  succeededKeys?: Partial<{
+    Halo: Set<string>;
+    Space: Set<string>;
+  }>;
+  failReasons?: Partial<{
+    Halo: FailReason | null;
+    Space: FailReason | null;
+  }>;
+  onHaloDone?: () => void;
+  onSpaceDone?: () => void;
+  onHaloInvitationCancel?: () => Promise<void> | undefined;
+  onSpaceInvitationCancel?: () => Promise<void> | undefined;
+  onHaloInvitationAuthenticate?: (authCode: string) => Promise<void> | undefined;
+  onSpaceInvitationAuthenticate?: (authCode: string) => Promise<void> | undefined;
+  IdentityInput?: React.FC<IdentityInputProps>;
+  ResetIdentity?: React.FC<ResetIdentityProps>;
+};
+
+export interface IdentityAction {
+  type: 'select identity' | 'added identity';
+  identity: Identity;
+}
+
+export interface EmptyJoinAction {
+  type: 'deselect identity' | 'cancel addition' | 'add identity';
+}
+
+export interface EmptyInvitationAction {
+  type:
+    | 'authenticating invitation'
+    | 'authenticate invitation'
+    | 'cancel invitation'
+    | 'cancelled invitation'
+    | 'connect invitation'
+    | 'fail invitation'
+    | 'accepted invitation'
+    | 'timeout invitation'
+    | 'reset invitation';
+  from: 'space' | 'halo';
+}
+
+export interface InvitationCodeAction {
+  type: 'connecting invitation';
+  from: 'space' | 'halo';
+  invitation: AuthenticatingInvitationObservable;
+}
+
+export type InvitationAction = EmptyInvitationAction | InvitationCodeAction;
+
+export interface AdditionMethodAction {
+  type: 'select addition method';
+  method: 'recover identity' | 'accept device invitation' | 'create identity';
+}
+
+export type JoinAction = IdentityAction | EmptyJoinAction | AdditionMethodAction | InvitationAction;
+
+export type InvitationView =
+  | 'invitation input'
+  | 'invitation rescuer'
+  | 'invitation authenticator'
+  | 'invitation accepted';
+
+export type JoinView =
+  | 'identity selector'
+  | 'addition method chooser'
+  | 'identity input'
+  | 'identity added'
+  | 'space invitation acceptor'
+  | 'halo invitation acceptor';
+
+export interface JoinStateContext {
+  activeView: JoinView;
+  unredeemedSpaceInvitationCode?: string;
+  spaceInvitation?: AuthenticatingInvitationObservable;
+  spaceViewState: InvitationView;
+  spaceInvitationAnnotation?: 'authenticating' | 'authentication failed';
+  unredeemedHaloInvitationCode?: string;
+  haloInvitation?: AuthenticatingInvitationObservable;
+  haloViewState: InvitationView;
+  haloInvitationAnnotation?: 'authenticating' | 'authentication failed';
+  selectedIdentity?: Identity;
+  additionMethod?: AdditionMethodAction['method'];
+}

package/src/panels/JoinPanel/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './JoinPanel';
+export * from './JoinPanelProps';