@dxos/shell 0.3.11-main.1caa3af

package/src/panels/JoinPanel/steps/IdentityInput.tsx

@@ -0,0 +1,86 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { log } from '@dxos/log';
+import { useClient } from '@dxos/react-client';
+import { useTranslation } from '@dxos/react-ui';
+
+import { Action, Actions, StepHeading, Input } from '../../../components';
+import { type JoinStepProps } from '../JoinPanelProps';
+
+export interface IdentityCreatorProps extends JoinStepProps {
+  method: 'recover identity' | 'create identity';
+}
+
+export type IdentityInputProps = IdentityCreatorProps;
+
+export type IdentityInputImplProps = IdentityCreatorProps & {
+  onDisplayNameConfirm?: (displayName: string) => void;
+  validationMessage?: string;
+};
+
+export const IdentityInput = (props: IdentityInputProps) => {
+  const { send, method } = props;
+  const isRecover = method === 'recover identity';
+  const client = useClient();
+  const { t } = useTranslation('os');
+  const [validationMessage, setValidationMessage] = useState('');
+  const createIdentity = (displayName: string) => {
+    void client.halo.createIdentity({ [isRecover ? 'seedphrase' : 'displayName']: displayName }).then(
+      (identity) => {
+        send?.({ type: 'selectIdentity' as const, identity });
+      },
+      (error) => {
+        log.catch(error);
+        setValidationMessage(t(isRecover ? 'failed to recover identity message' : 'failed to create identity message'));
+      },
+    );
+  };
+  return <IdentityInputImpl {...props} onDisplayNameConfirm={createIdentity} validationMessage={validationMessage} />;
+};
+
+// TODO(zhenyasav): impl shouldn't need send()
+export const IdentityInputImpl = (props: IdentityInputImplProps) => {
+  const { method, send, active, onDisplayNameConfirm, validationMessage } = props;
+  const disabled = !active;
+  const { t } = useTranslation('os');
+  const [inputValue, setInputValue] = useState('');
+  const isRecover = method === 'recover identity';
+  return (
+    <>
+      <div role='none' className='grow flex flex-col justify-center'>
+        <Input
+          {...{ validationMessage }}
+          label={
+            <StepHeading>{t(isRecover ? 'recover identity input label' : 'new identity input label')}</StepHeading>
+          }
+          disabled={disabled}
+          data-testid='identity-input'
+          placeholder={isRecover ? 'Type your recovery phrase' : 'Type a display name'}
+          onChange={({ target: { value } }) => setInputValue(value)}
+        />
+      </div>
+      <Actions>
+        <Action
+          variant='ghost'
+          disabled={disabled}
+          onClick={() => send?.({ type: 'deselectAuthMethod' })}
+          data-testid={`${method === 'recover identity' ? 'recover' : 'create'}-identity-input-back`}
+        >
+          {t('back label')}
+        </Action>
+        <Action
+          variant='primary'
+          disabled={disabled}
+          onClick={() => onDisplayNameConfirm?.(inputValue)}
+          data-testid={`${method === 'recover identity' ? 'recover' : 'create'}-identity-input-continue`}
+        >
+          {t('continue label')}
+        </Action>
+      </Actions>
+    </>
+  );
+};

package/src/panels/JoinPanel/steps/InvitationAccepted.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { cloneElement } from 'react';
+
+import { useTranslation } from '@dxos/react-ui';
+
+import { Actions, Action } from '../../../components';
+import { type JoinStepProps } from '../JoinPanelProps';
+
+export interface InvitationAcceptedProps extends JoinStepProps {
+  Kind: 'Space' | 'Halo';
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+  onDone?: () => void;
+}
+
+export const InvitationAccepted = (props: InvitationAcceptedProps) => {
+  const { active, Kind, doneActionParent, onDone } = props;
+  const disabled = !active;
+  const { t } = useTranslation('os');
+
+  const doneAction = (
+    <Action
+      variant='primary'
+      onClick={onDone}
+      disabled={disabled}
+      data-autofocus={`success${Kind}Invitation finishingJoining${Kind}`}
+      data-testid={`${Kind.toLowerCase()}-invitation-accepted-done`}
+    >
+      {t('done label')}
+    </Action>
+  );
+
+  return (
+    <>
+      <div role='none' className='grow flex flex-col justify-center'>
+        <p className='text-center text-sm font-normal'>{t('welcome message')}</p>
+      </div>
+      <Actions>{doneActionParent ? cloneElement(doneActionParent, {}, doneAction) : doneAction}</Actions>
+    </>
+  );
+};

package/src/panels/JoinPanel/steps/InvitationAuthenticator.tsx

@@ -0,0 +1,99 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type ChangeEvent, useState } from 'react';
+
+import { Input, useTranslation } from '@dxos/react-ui';
+
+import { Actions, Action, Emoji, StepHeading } from '../../../components';
+import { toEmoji } from '../../../util';
+import { type JoinStepProps } from '../JoinPanelProps';
+
+const pinLength = 6;
+
+export interface InvitationAuthenticatorProps extends JoinStepProps {
+  Kind: 'Space' | 'Halo';
+  failed?: boolean;
+  pending?: boolean;
+  invitationId?: string;
+  onInvitationCancel?: () => Promise<void> | undefined;
+  onInvitationAuthenticate?: (authCode: string) => Promise<void> | undefined;
+}
+
+export const InvitationAuthenticator = ({
+  failed,
+  Kind,
+  active,
+  pending,
+  invitationId,
+  onInvitationAuthenticate,
+  onInvitationCancel,
+}: InvitationAuthenticatorProps) => {
+  const disabled = !active || pending;
+  const { t } = useTranslation('os');
+  const invitationType = Kind.toLowerCase() as 'space' | 'halo';
+  const [authCode, setAuthCode] = useState('');
+
+  const onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+    setAuthCode(value);
+    if (value.length === pinLength) {
+      (document.querySelector(`[data-autofocus-pinlength="${invitationType}"]`) as HTMLElement | null)?.focus();
+    }
+  };
+
+  return (
+    <>
+      <div role='none' className='grow flex flex-col justify-center'>
+        {invitationId && <Emoji text={toEmoji(invitationId)} />}
+        <Input.Root
+          {...(failed && {
+            validationValence: 'error',
+          })}
+        >
+          <Input.Label asChild>
+            <StepHeading>{t('auth code input label')}</StepHeading>
+          </Input.Label>
+          <Input.PinInput
+            {...{
+              disabled,
+              length: pinLength,
+              onChange,
+              inputMode: 'numeric',
+              autoComplete: 'off',
+              pattern: '\\d*',
+              'data-autofocus': `connecting${Kind}Invitation inputting${Kind}VerificationCode authenticationFailing${Kind}VerificationCode authenticating${Kind}VerificationCode`,
+              'data-prevent-ios-autofocus': true,
+              'data-testid': `${invitationType}-auth-code-input`,
+              'data-1p-ignore': true,
+            }}
+          />
+          {failed && (
+            <Input.DescriptionAndValidation classNames='text-center'>
+              <Input.Validation>{t('failed to authenticate message')}</Input.Validation>
+            </Input.DescriptionAndValidation>
+          )}
+        </Input.Root>
+      </div>
+      <Actions>
+        <Action
+          variant='ghost'
+          disabled={disabled}
+          onClick={() => onInvitationCancel?.()}
+          data-testid={`${invitationType}-invitation-authenticator-cancel`}
+        >
+          {t('cancel label')}
+        </Action>
+        <Action
+          variant='primary'
+          disabled={disabled}
+          onClick={() => onInvitationAuthenticate?.(authCode)}
+          data-autofocus-pinlength={invitationType}
+          data-testid={`${invitationType}-invitation-authenticator-next`}
+        >
+          {t('next label')}
+        </Action>
+      </Actions>
+    </>
+  );
+};

package/src/panels/JoinPanel/steps/InvitationInput.tsx

@@ -0,0 +1,102 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useState, useEffect, cloneElement } from 'react';
+
+import { log } from '@dxos/log';
+import { useTranslation } from '@dxos/react-ui';
+
+import { Actions, StepHeading, Action, Input } from '../../../components';
+import { type JoinPanelProps, type JoinStepProps } from '../JoinPanelProps';
+
+export interface InvitationInputProps extends JoinStepProps, Pick<JoinPanelProps, 'onExit' | 'exitActionParent'> {
+  Kind: 'Space' | 'Halo';
+  unredeemedCode?: string;
+  succeededKeys?: Set<string>;
+}
+
+const invitationCodeFromUrl = (text: string) => {
+  try {
+    const searchParams = new URLSearchParams(text.substring(text.lastIndexOf('?')));
+    const invitation = searchParams.get('spaceInvitationCode') ?? searchParams.get('deviceInvitationCode');
+    return invitation ?? text;
+  } catch (err) {
+    log.catch(err);
+    return text;
+  }
+};
+
+export const InvitationInput = (props: InvitationInputProps) => {
+  const { Kind, active, send, unredeemedCode, onExit, exitActionParent, onDone, doneActionParent, succeededKeys } =
+    props;
+  const disabled = !active;
+  const { t } = useTranslation('os');
+
+  const [inputValue, setInputValue] = useState(unredeemedCode ?? '');
+
+  useEffect(() => {
+    unredeemedCode && setInputValue(unredeemedCode ?? '');
+  }, [unredeemedCode]);
+
+  const handleNext = () =>
+    send({
+      type: `set${Kind}InvitationCode`,
+      code: invitationCodeFromUrl(inputValue),
+      ...(Kind === 'Space' && { succeededKeys }),
+    });
+
+  const exitAction = (
+    <Action
+      variant='ghost'
+      disabled={disabled}
+      {...(onExit ? { onClick: () => onExit() } : { onClick: () => onDone?.(null) })}
+      data-testid='join-exit'
+    >
+      {t('cancel label')}
+    </Action>
+  );
+
+  return (
+    <>
+      <div role='none' className='grow flex flex-col justify-center'>
+        <Input
+          label={<StepHeading>{t('invitation input label')}</StepHeading>}
+          placeholder='Type an invitation code'
+          disabled={disabled}
+          value={inputValue}
+          onChange={({ target: { value } }) => setInputValue(value)}
+          data-autofocus={`inputting${Kind}InvitationCode`}
+          data-testid={`${Kind.toLowerCase()}-invitation-input`}
+          onKeyUp={({ key }) => key === 'Enter' && handleNext()}
+        />
+      </div>
+      <Actions>
+        {Kind === 'Halo' ? (
+          <Action
+            variant='ghost'
+            disabled={disabled}
+            onClick={() => send({ type: 'deselectAuthMethod' })}
+            data-testid={`${Kind.toLowerCase()}-invitation-input-back`}
+          >
+            {t('back label')}
+          </Action>
+        ) : exitActionParent ? (
+          cloneElement(exitActionParent, {}, exitAction)
+        ) : doneActionParent ? (
+          cloneElement(doneActionParent, {}, exitAction)
+        ) : (
+          exitAction
+        )}
+        <Action
+          variant='primary'
+          disabled={disabled}
+          onClick={handleNext}
+          data-testid={`${Kind.toLowerCase()}-invitation-input-continue`}
+        >
+          {t('continue label')}
+        </Action>
+      </Actions>
+    </>
+  );
+};

package/src/panels/JoinPanel/steps/InvitationRescuer.tsx

@@ -0,0 +1,102 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type Invitation } from '@dxos/react-client/invitations';
+import { useTranslation } from '@dxos/react-ui';
+import { descriptionText } from '@dxos/react-ui-theme';
+
+import { Action, Actions, StepHeading } from '../../../components';
+import { type FailReason } from '../../../types';
+import { type JoinStepProps } from '../JoinPanelProps';
+
+export interface InvitationRescuerProps extends JoinStepProps {
+  Kind: 'Space' | 'Halo';
+  invitationState?: Invitation.State;
+  onInvitationCancel?: () => Promise<void> | undefined;
+  failReason?: FailReason | null;
+}
+
+const InvitationActions = ({
+  // `invitationState` does report correct state, but here we evaluate whether `failReason` is a better source of truth
+  // for the UI in particular.
+  invitationState,
+  onInvitationCancel,
+  active,
+  send,
+  Kind,
+  failReason,
+}: InvitationRescuerProps) => {
+  const { t } = useTranslation('os');
+
+  if (failReason) {
+    return (
+      <>
+        <StepHeading className={descriptionText}>
+          {t(
+            failReason === 'timeout'
+              ? 'timeout status label'
+              : failReason === 'cancelled'
+              ? 'cancelled status label'
+              : 'error status label',
+          )}
+        </StepHeading>
+        <div role='none' className='grow' />
+        <Actions>
+          <Action
+            disabled={!active}
+            onClick={() => send({ type: `reset${Kind}Invitation` })}
+            data-testid='invitation-rescuer-reset'
+          >
+            {t('reset label')}
+          </Action>
+        </Actions>
+      </>
+    );
+  } else {
+    return (
+      <>
+        <StepHeading className={descriptionText}>{t('connecting status label')}</StepHeading>
+        <div role='none' className='grow' />
+        <Actions>
+          <Action disabled classNames='order-2' data-testid='next'>
+            {t('next label')}
+          </Action>
+          <Action disabled={!active} onClick={onInvitationCancel} data-testid='invitation-rescuer-cancel'>
+            {t('cancel label')}
+          </Action>
+        </Actions>
+      </>
+    );
+  }
+};
+
+export const InvitationRescuer = (props: InvitationRescuerProps) => {
+  const { Kind, invitationState, active, send } = props;
+  const { t } = useTranslation('os');
+
+  return (
+    <>
+      {typeof invitationState === 'undefined' ? (
+        <>
+          <div role='none' className='grow flex flex-col justify-center'>
+            <StepHeading className={descriptionText}>There was a problem joining the space</StepHeading>
+          </div>
+          <Actions>
+            <Action
+              disabled={!active}
+              data-testid='invitation-rescuer-blank-reset'
+              onClick={() => send({ type: `reset${Kind}Invitation` })}
+            >
+              {t('reset label')}
+            </Action>
+          </Actions>
+        </>
+      ) : (
+        <InvitationActions {...props} />
+      )}
+    </>
+  );
+};

package/src/panels/JoinPanel/steps/ResetIdentity.tsx

@@ -0,0 +1,71 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { log } from '@dxos/log';
+import { useClient } from '@dxos/react-client';
+import { useTranslation } from '@dxos/react-ui';
+
+import { Action, Actions, StepHeading, Input } from '../../../components';
+import { type JoinStepProps } from '../JoinPanelProps';
+
+export type ResetIdentityProps = JoinStepProps & {
+  method: 'reset identity';
+};
+
+export type ResetIdentityImplProps = {
+  disabled?: boolean;
+  validationMessage?: string;
+  onConfirm?: () => void;
+};
+
+export const ResetIdentity = ({ send, active }: ResetIdentityProps) => {
+  const client = useClient();
+  const { t } = useTranslation('os');
+  const [validationMessage, setValidationMessage] = useState('');
+  const resetIdentity = () => {
+    void client.reset().then(
+      () => send?.({ type: 'resetIdentity' }),
+      (error) => {
+        log.catch(error);
+        setValidationMessage(t('failed to reset identity message'));
+      },
+    );
+  };
+  return (
+    <ResetIdentityImpl disabled={!active} validationMessage={validationMessage} onConfirm={() => resetIdentity()} />
+  );
+};
+
+export const ResetIdentityImpl = ({ disabled, validationMessage, onConfirm }: ResetIdentityImplProps) => {
+  const { t } = useTranslation('os');
+  const confirmationValue = t('confirmation value');
+  const [inputValue, setInputValue] = useState('');
+  return (
+    <>
+      <div role='none' className='grow flex flex-col justify-center'>
+        <Input
+          {...{ validationMessage }}
+          label={<StepHeading>{t('reset identity input label', { confirmationValue })}</StepHeading>}
+          disabled={disabled}
+          data-testid='identity-input'
+          placeholder={confirmationValue}
+          onChange={({ target: { value } }) => setInputValue(value)}
+        />
+      </div>
+      <Actions>
+        <Action
+          // TODO(wittjosiah): Probably make this red?
+          variant='primary'
+          disabled={disabled || inputValue !== confirmationValue}
+          onClick={() => onConfirm?.()}
+          data-testid='reset-identity-input-confirm'
+        >
+          {t('confirm label')}
+        </Action>
+      </Actions>
+    </>
+  );
+};

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

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './AdditionMethodChooser';
+export * from './IdentityAdded';
+export * from './IdentityInput';
+export * from './InvitationAccepted';
+export * from './InvitationInput';
+export * from './InvitationRescuer';
+export * from './InvitationAuthenticator';
+export * from './ResetIdentity';

package/src/panels/Panels.stories.tsx

@@ -0,0 +1,61 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import * as IdentityPanels from './IdentityPanel/IdentityPanel.stories';
+import * as JoinPanels from './JoinPanel/JoinPanel.stories';
+import * as SpacePanels from './SpacePanel/SpacePanel.stories';
+
+const getComponentNames = (module: any): string[] =>
+  module?.__namedExportsOrder ??
+  Object.getOwnPropertyNames(module).filter((name) => !(name === 'default' || name.startsWith('__')));
+
+const getComponents = (module: any): React.FC[] => {
+  const components = getComponentNames(module).map((name) => module[name]);
+  console.log(module);
+  return components;
+};
+
+const camelCaseToSpacedName = (camelCase: string) => {
+  return camelCase.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');
+};
+
+const StoryRow = ({ components }: { components: React.FC[] }) => {
+  return (
+    <tr style={{ whiteSpace: 'nowrap' }}>
+      {components?.map((Comp) => (
+        <td key={Comp.name}>
+          <div className='bg-zinc-500 text-zinc-200 p-3 text-sm text-center'>{camelCaseToSpacedName(Comp.name)}</div>
+          <Comp />
+        </td>
+      ))}
+    </tr>
+  );
+};
+
+export const Default = (props: any) => {
+  return (
+    <table className='bg-body'>
+      <tbody>
+        <StoryRow components={getComponents(IdentityPanels)} />
+        <StoryRow components={getComponents(SpacePanels)} />
+        <StoryRow components={getComponents(JoinPanels)} />
+      </tbody>
+    </table>
+  );
+};
+
+Default.parameters = { layout: 'fullscreen' };
+
+export default {
+  title: 'react-shell/All',
+  decorators: [withTheme],
+  component: StoryRow,
+  parameters: { chromatic: { disableSnapshot: false } },
+};