@dxos/react-ui 0.1.41-next.adfd7c6 → 0.3.3-main.3ce60d4

package/src/panels/JoinPanel/joinMachine.ts

@@ -1,444 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { useMachine } from '@xstate/react';
-import { useCallback } from 'react';
-import { assign, createMachine, InterpreterFrom, StateFrom } from 'xstate';
-import type { StateNodeConfig, Subscribable, Subscription } from 'xstate';
-
-import type { Identity, AuthenticatingInvitationObservable, Client } from '@dxos/client';
-import { Invitation, InvitationEncoder } from '@dxos/client';
-import { log } from '@dxos/log';
-
-import { JoinPanelMode } from './JoinPanelProps';
-
-type FailReason = 'error' | 'timeout' | 'cancelled' | 'badVerificationCode';
-
-type InvitationKindContext = Partial<{
-  failReason: FailReason | null;
-  unredeemedCode: string;
-  invitationObservable: AuthenticatingInvitationObservable;
-  invitation: Invitation;
-  invitationSubscribable: Subscribable<InvitationEvent>;
-}>;
-
-type JoinMachineContext = {
-  mode: JoinPanelMode;
-  identity: Identity | null;
-  halo: InvitationKindContext;
-  space: InvitationKindContext;
-};
-
-type SelectIdentityEvent = {
-  type: 'selectIdentity';
-  identity: Identity;
-};
-
-type SetInvitationCodeEvent = {
-  type: 'setHaloInvitationCode' | 'setSpaceInvitationCode';
-  code: string;
-};
-
-type SetInvitationEvent = {
-  type:
-    | 'authenticatingHaloInvitation'
-    | 'authenticatingSpaceInvitation'
-    | 'readyForAuthenticationHaloInvitation'
-    | 'readyForAuthenticationSpaceInvitation'
-    | 'connectingHaloInvitation'
-    | 'connectingSpaceInvitation'
-    | 'connectedHaloInvitation'
-    | 'connectedSpaceInvitation'
-    | 'successHaloInvitation'
-    | 'successSpaceInvitation';
-  invitation: Invitation;
-};
-
-type FailInvitationEvent = {
-  type: 'failHaloInvitation' | 'failSpaceInvitation';
-  reason: FailReason;
-};
-
-type EmptyInvitationEvent = {
-  type:
-    | 'authenticateHaloVerificationCode'
-    | 'authenticateSpaceVerificationCode'
-    | 'resetHaloInvitation'
-    | 'resetSpaceInvitation';
-};
-
-type InvitationEvent = FailInvitationEvent | SetInvitationCodeEvent | SetInvitationEvent | EmptyInvitationEvent;
-
-const getInvitationSubscribable = (
-  Kind: 'Space' | 'Halo',
-  invitation: AuthenticatingInvitationObservable
-): Subscribable<InvitationEvent> => {
-  log('[subscribing to invitation]', invitation);
-  return {
-    subscribe: (
-      next: (value: InvitationEvent) => void,
-      onError?: (error: any) => void,
-      complete?: () => void
-    ): Subscription =>
-      invitation.subscribe(
-        (invitation: Invitation) => {
-          switch (invitation.state) {
-            case Invitation.State.CONNECTING: {
-              log('[invitation connecting]', { Kind, invitation });
-              return next({ type: `connecting${Kind}Invitation`, invitation });
-            }
-
-            case Invitation.State.CONNECTED: {
-              log('[invitation connected]', { Kind, invitation });
-              return next({ type: `connected${Kind}Invitation`, invitation });
-            }
-
-            case Invitation.State.READY_FOR_AUTHENTICATION: {
-              log('[invitation ready for authentication]', { Kind, invitation });
-              return next({ type: `readyForAuthentication${Kind}Invitation`, invitation });
-            }
-
-            case Invitation.State.AUTHENTICATING: {
-              log('[invitation authenticating]', { Kind, invitation });
-              return next({ type: `authenticating${Kind}Invitation`, invitation });
-            }
-
-            case Invitation.State.SUCCESS: {
-              log('[invitation success]', { Kind, invitation });
-              next({ type: `success${Kind}Invitation`, invitation });
-              return complete?.();
-            }
-
-            case Invitation.State.CANCELLED: {
-              log.warn('[invitation cancelled]', { Kind });
-              return next({ type: `fail${Kind}Invitation`, reason: 'cancelled' } as FailInvitationEvent);
-            }
-
-            case Invitation.State.TIMEOUT: {
-              log.error('[invitation timeout]', { Kind });
-              return next({ type: `fail${Kind}Invitation`, reason: 'timeout' } as FailInvitationEvent);
-            }
-          }
-        },
-        (error: any) => {
-          log.error('[invitation errored]', { Kind, error });
-          next({ type: `fail${Kind}Invitation`, reason: 'error' });
-          return onError?.(error);
-        }
-      )
-  } as Subscribable<InvitationEvent>;
-};
-
-const acceptingInvitationTemplate = (Kind: 'Space' | 'Halo', successTarget: string) => {
-  const config: StateNodeConfig<JoinMachineContext, any, InvitationEvent> = {
-    initial: `unknown${Kind}`,
-    states: {
-      [`unknown${Kind}`]: {
-        always: [
-          {
-            cond: ({ mode }) => mode === 'halo-only' && Kind === 'Space',
-            target: '#join.finishingJoiningHalo'
-          },
-          {
-            // cond: `no${Kind}Invitation`,
-            target: `inputting${Kind}InvitationCode`,
-            actions: 'log'
-          }
-          // todo(thure): Restore this transition that redeems the invitation code on init.
-          // {
-          //   target: `acceptingRedeemed${Kind}Invitation`,
-          //   actions: [`redeem${Kind}InvitationCode`, 'log']
-          // }
-        ]
-      },
-      [`inputting${Kind}InvitationCode`]: {},
-      [`acceptingRedeemed${Kind}Invitation`]: {
-        invoke: {
-          src: (context) => context[Kind.toLowerCase() as 'space' | 'halo'].invitationSubscribable!
-        },
-        initial: `unknown${Kind}Invitation`,
-        states: {
-          [`unknown${Kind}Invitation`]: {
-            always: [
-              {
-                cond: (context) => {
-                  const invitation = context[Kind.toLowerCase() as 'space' | 'halo'].invitation;
-                  return !invitation || invitation?.state === Invitation.State.CONNECTING;
-                },
-                target: `connecting${Kind}Invitation`,
-                actions: 'log'
-              },
-              {
-                target: `inputting${Kind}VerificationCode`,
-                actions: 'log'
-              }
-            ]
-          },
-          [`connecting${Kind}Invitation`]: {},
-          [`inputting${Kind}VerificationCode`]: {},
-          [`authenticating${Kind}VerificationCode`]: {
-            on: {
-              [`readyForAuthentication${Kind}Invitation`]: {
-                target: `authenticationFailing${Kind}VerificationCode`,
-                actions: ['setInvitation', 'log']
-              }
-            }
-          },
-          [`authenticationFailing${Kind}VerificationCode`]: {},
-          [`failing${Kind}Invitation`]: {},
-          [`success${Kind}Invitation`]: {}
-        },
-        on: {
-          [`reset${Kind}Invitation`]: {
-            target: `#join${Kind === 'Halo' ? '.choosingIdentity' : ''}.accepting${Kind}Invitation.unknown${Kind}`,
-            actions: ['resetInvitation', 'log']
-          },
-          [`connecting${Kind}Invitation`]: {
-            target: `.connecting${Kind}Invitation`,
-            actions: ['setInvitation', 'log']
-          },
-          [`connected${Kind}Invitation`]: {
-            target: `.connecting${Kind}Invitation`,
-            actions: ['setInvitation', 'log']
-          },
-          [`readyForAuthentication${Kind}Invitation`]: {
-            target: `.inputting${Kind}VerificationCode`,
-            actions: ['setInvitation', 'log']
-          },
-          [`authenticating${Kind}Invitation`]: {
-            target: `.authenticating${Kind}VerificationCode`,
-            actions: ['setInvitation', 'log']
-          },
-          [`success${Kind}Invitation`]: { target: successTarget, actions: ['setInvitation', 'log'] },
-          [`fail${Kind}Invitation`]: {
-            target: `.failing${Kind}Invitation`,
-            actions: [
-              assign({
-                [Kind.toLowerCase() as 'space' | 'halo']: (
-                  context: JoinMachineContext,
-                  event: FailInvitationEvent
-                ) => ({
-                  ...context[Kind.toLowerCase() as 'space' | 'halo'],
-                  failReason: event.reason
-                })
-              }),
-              'log'
-            ]
-          }
-        }
-      }
-    },
-    on: {
-      [`set${Kind}InvitationCode`]: {
-        target: `.acceptingRedeemed${Kind}Invitation`,
-        actions: [
-          assign({
-            [Kind.toLowerCase() as 'space' | 'halo']: (context: JoinMachineContext, event: SetInvitationCodeEvent) => ({
-              ...context[Kind.toLowerCase() as 'space' | 'halo'],
-              unredeemedCode: event.code
-            })
-          }),
-          `redeem${Kind}InvitationCode`,
-          'log'
-        ]
-      }
-    }
-  };
-  return config as StateNodeConfig<JoinMachineContext, typeof config, JoinEvent>;
-};
-
-type EmptyJoinEvent = {
-  type:
-    | 'recoverIdentity'
-    | 'createIdentity'
-    | 'acceptHaloInvitation'
-    | 'addIdentity'
-    | 'selectIdentity'
-    | 'deselectAuthMethod';
-};
-
-type JoinEvent = InvitationEvent | SelectIdentityEvent | EmptyJoinEvent;
-
-const joinMachine = createMachine<JoinMachineContext, JoinEvent>(
-  {
-    id: 'join',
-    predictableActionArguments: true,
-    context: {
-      mode: 'default',
-      identity: null,
-      halo: {},
-      space: {}
-    },
-    initial: 'unknown',
-    states: {
-      unknown: {
-        always: [
-          { cond: 'noSelectedIdentity', target: 'choosingIdentity', actions: 'log' },
-          { target: 'acceptingSpaceInvitation', actions: 'log' }
-        ]
-      },
-      choosingIdentity: {
-        initial: 'choosingAuthMethod',
-        states: {
-          choosingAuthMethod: {},
-          recoveringIdentity: {},
-          creatingIdentity: {},
-          acceptingHaloInvitation: acceptingInvitationTemplate('Halo', '#join.acceptingSpaceInvitation'),
-          confirmingAddedIdentity: {}
-        },
-        on: {
-          recoverIdentity: { target: '.recoveringIdentity', actions: 'log' },
-          createIdentity: { target: '.creatingIdentity', actions: 'log' },
-          acceptHaloInvitation: { target: '.acceptingHaloInvitation', actions: 'log' },
-          addIdentity: { target: '.confirmingAddedIdentity', actions: 'log' },
-          selectIdentity: {
-            target: 'acceptingSpaceInvitation',
-            actions: ['setIdentity', 'log']
-          },
-          deselectAuthMethod: { target: '.choosingAuthMethod', actions: 'log' }
-        }
-      },
-      acceptingSpaceInvitation: acceptingInvitationTemplate('Space', '#join.finishingJoiningSpace'),
-      finishingJoiningSpace: {
-        type: 'final'
-      },
-      finishingJoiningHalo: {
-        type: 'final'
-      }
-    }
-  },
-  {
-    guards: {
-      noSelectedIdentity: ({ identity }, _event) => !identity,
-      noHaloInvitation: ({ halo }, _event) => !halo.invitation && !halo.unredeemedCode,
-      noSpaceInvitation: ({ space }, _event) => !space.invitation && !space.unredeemedCode
-    },
-    actions: {
-      setIdentity: assign<JoinMachineContext, SelectIdentityEvent>({
-        identity: (context, event) => event.identity
-      }),
-      unsetIdentity: assign<JoinMachineContext>({
-        identity: () => null
-      }),
-      resetInvitation: assign<JoinMachineContext, EmptyInvitationEvent>({
-        halo: (context, event) => {
-          if (event.type !== 'resetHaloInvitation') {
-            return context.halo;
-          }
-
-          if (context.halo.invitationObservable) {
-            void context.halo.invitationObservable.cancel();
-          }
-
-          return {
-            ...context.halo,
-            invitation: undefined,
-            invitationObservable: undefined,
-            invitationSubscribable: undefined
-          };
-        },
-        space: (context, event) => {
-          if (event.type !== 'resetSpaceInvitation') {
-            return context.space;
-          }
-
-          if (context.space.invitationObservable) {
-            void context.space.invitationObservable.cancel();
-          }
-
-          return {
-            ...context.space,
-            invitation: undefined,
-            invitationObservable: undefined,
-            invitationSubscribable: undefined
-          };
-        }
-      }),
-      setInvitation: assign<JoinMachineContext, SetInvitationEvent>({
-        halo: (context, event) =>
-          event.type.includes('Halo') ? { ...context.halo, invitation: event.invitation } : context.halo,
-        space: (context, event) =>
-          event.type.includes('Space') ? { ...context.space, invitation: event.invitation } : context.space
-      }),
-      log: (context, event) => {
-        log('[transition]', {
-          event,
-          haloInvitation: context.halo.invitation,
-          spaceInvitation: context.space.invitation
-        });
-      }
-    }
-  }
-);
-
-type JoinMachine = typeof joinMachine;
-
-type JoinState = StateFrom<JoinMachine>;
-type JoinSend = InterpreterFrom<JoinMachine>['send'];
-
-const defaultCodeFromUrl = (invitationType: 'halo' | 'space', text: string) => {
-  try {
-    const searchParams = new URLSearchParams(text.substring(text.lastIndexOf('?')));
-    return (
-      searchParams.get(`${invitationType}InvitationCode`) ??
-      searchParams.get(`${invitationType}Invitation`) ??
-      searchParams.get('invitationCode') ??
-      searchParams.get('invitation') ??
-      text
-    );
-  } catch (err) {
-    log.catch(err);
-    return text;
-  }
-};
-
-const useJoinMachine = (client: Client, options?: Parameters<typeof useMachine<JoinMachine>>[1]) => {
-  const redeemHaloInvitationCode = useCallback(
-    ({ halo }: JoinMachineContext) => {
-      if (halo.unredeemedCode) {
-        const invitationObservable = client.halo.acceptInvitation(
-          InvitationEncoder.decode(defaultCodeFromUrl('halo', halo.unredeemedCode))
-        );
-        return {
-          ...halo,
-          invitationObservable,
-          invitationSubscribable: getInvitationSubscribable('Halo', invitationObservable)
-        };
-      } else {
-        return halo;
-      }
-    },
-    [client]
-  );
-
-  const redeemSpaceInvitationCode = useCallback(
-    ({ space }: JoinMachineContext) => {
-      if (space.unredeemedCode) {
-        const invitationObservable = client.acceptInvitation(
-          InvitationEncoder.decode(defaultCodeFromUrl('space', space.unredeemedCode))
-        );
-        return {
-          ...space,
-          invitationObservable,
-          invitationSubscribable: getInvitationSubscribable('Space', invitationObservable)
-        };
-      } else {
-        return space;
-      }
-    },
-    [client]
-  );
-
-  return useMachine(joinMachine, {
-    ...options,
-    actions: {
-      ...options?.actions,
-      redeemHaloInvitationCode: assign<JoinMachineContext>({ halo: redeemHaloInvitationCode }),
-      redeemSpaceInvitationCode: assign<JoinMachineContext>({ space: redeemSpaceInvitationCode })
-    }
-  });
-};
-
-export type { JoinMachine, JoinState, JoinSend, JoinEvent, JoinMachineContext };
-export { joinMachine, useJoinMachine };

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

@@ -1,63 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { CaretRight, Plus, QrCode, Textbox } from '@phosphor-icons/react';
-import React from 'react';
-
-import { CompoundButton, getSize, useTranslation } from '@dxos/react-components';
-
-import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
-
-export type AdditionMethodSelectorProps = ViewStateProps;
-
-export const AdditionMethodSelector = (viewStateProps: AdditionMethodSelectorProps) => {
-  const disabled = !viewStateProps.active;
-  const { joinSend } = viewStateProps;
-
-  const { t } = useTranslation('os');
-
-  const sharedButtonProps = {
-    disabled,
-    after: <CaretRight className={getSize(4)} weight='bold' />,
-    slots: { label: { className: 'text-sm' } }
-  };
-
-  return (
-    <ViewState {...viewStateProps}>
-      <ViewStateHeading>{t('addition method selector title')}</ViewStateHeading>
-      <div role='none' className='flex flex-col gap-1 grow'>
-        <CompoundButton
-          {...sharedButtonProps}
-          description={t('create identity description')}
-          before={<Plus className={getSize(6)} />}
-          onClick={() => joinSend({ type: 'createIdentity' })}
-          data-autofocus='choosingAuthMethod'
-          data-testid='create-identity'
-        >
-          {t('create identity label')}
-        </CompoundButton>
-        <CompoundButton
-          {...sharedButtonProps}
-          description={t('join identity description')}
-          before={<QrCode className={getSize(6)} />}
-          onClick={() => joinSend({ type: 'acceptHaloInvitation' })}
-          data-testid='join-identity'
-        >
-          {t('join identity label')}
-        </CompoundButton>
-        <CompoundButton
-          {...sharedButtonProps}
-          // TODO(mykola): Implement recover.
-          disabled={true}
-          description={t('recover identity description')}
-          before={<Textbox className={getSize(6)} />}
-          onClick={() => joinSend({ type: 'recoverIdentity' })}
-          data-testid='recover-identity'
-        >
-          {t('recover identity label')}
-        </CompoundButton>
-      </div>
-    </ViewState>
-  );
-};

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

@@ -1,99 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { CaretLeft, CaretRight, Check } from '@phosphor-icons/react';
-import React, { cloneElement } from 'react';
-
-import type { Identity } from '@dxos/client';
-import { InvitationResult } from '@dxos/react-client';
-import { Avatar, Button, getSize, mx, useTranslation } from '@dxos/react-components';
-
-import { JoinPanelMode } from '../JoinPanelProps';
-import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
-
-export interface IdentityAddedProps extends ViewStateProps, DoneProps {
-  mode?: JoinPanelMode;
-  addedIdentity?: Identity;
-}
-
-export interface DoneProps extends ViewStateProps {
-  doneActionParent?: Parameters<typeof cloneElement>[0];
-  onDone?: (result: InvitationResult | null) => void;
-}
-
-const Done = ({ onDone, doneActionParent, active }: DoneProps) => {
-  const disabled = !active;
-  const { t } = useTranslation('os');
-
-  const doneButton = (
-    <Button
-      {...(onDone && { onClick: () => onDone(null) })}
-      disabled={disabled}
-      className='grow flex items-center gap-2 pli-2'
-      data-autofocus='confirmingAddedIdentity'
-      data-testid='identity-added-done'
-    >
-      <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
-      <span className='grow'>{t('done label')}</span>
-      <Check className={getSize(4)} />
-    </Button>
-  );
-
-  return doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton;
-};
-
-export const IdentityAdded = ({
-  mode,
-  addedIdentity,
-  onDone,
-  doneActionParent,
-  ...viewStateProps
-}: IdentityAddedProps) => {
-  const disabled = !viewStateProps.active;
-  const { joinSend } = viewStateProps;
-  const { t } = useTranslation('os');
-
-  return (
-    <ViewState {...viewStateProps}>
-      <ViewStateHeading>{t('identity added label')}</ViewStateHeading>
-      <div role='none' className='grow flex flex-col items-center justify-center text-center gap-2'>
-        <Avatar
-          size={20}
-          fallbackValue={addedIdentity?.identityKey.toHex() ?? ''}
-          label={
-            <p className={mx('text-lg', !addedIdentity?.profile?.displayName && 'font-mono')}>
-              {addedIdentity?.profile?.displayName ?? addedIdentity?.identityKey.truncate() ?? ' '}
-            </p>
-          }
-          variant='circle'
-          status='active'
-        />
-      </div>
-      {mode === 'halo-only' ? (
-        <Done onDone={onDone} doneActionParent={doneActionParent} {...viewStateProps} />
-      ) : (
-        <div className='flex gap-2'>
-          <Button
-            disabled={disabled || !addedIdentity}
-            className='grow flex items-center gap-2 pli-2 order-2'
-            onClick={() => addedIdentity && joinSend({ type: 'selectIdentity', identity: addedIdentity })}
-            data-autofocus='confirmingAddedIdentity'
-          >
-            <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
-            <span className='grow'>{t('continue label')}</span>
-            <CaretRight weight='bold' className={getSize(4)} />
-          </Button>
-          <Button
-            disabled={disabled}
-            onClick={() => joinSend({ type: 'deselectAuthMethod' })}
-            className='flex items-center gap-2 pis-2 pie-4'
-          >
-            <CaretLeft weight='bold' className={getSize(4)} />
-            <span>{t('deselect identity label')}</span>
-          </Button>
-        </div>
-      )}
-    </ViewState>
-  );
-};

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

@@ -1,81 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { CaretLeft, CaretRight } from '@phosphor-icons/react';
-import React, { ComponentPropsWithoutRef, useState } from 'react';
-
-import { log } from '@dxos/log';
-import { useClient } from '@dxos/react-client';
-import { Button, getSize, Input, mx, useTranslation } from '@dxos/react-components';
-
-import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
-
-export interface IdentityCreatorProps extends ViewStateProps {
-  method: 'recover identity' | 'create identity';
-}
-
-export const IdentityInput = ({ method, ...viewStateProps }: IdentityCreatorProps) => {
-  const disabled = !viewStateProps.active;
-  const { joinSend } = viewStateProps;
-  const { t } = useTranslation('os');
-  const [inputValue, setInputValue] = useState('');
-  const client = useClient();
-  const [validationMessage, setValidationMessage] = useState('');
-  const isRecover = method === 'recover identity';
-  const handleNext = () => {
-    void client.halo.createIdentity({ [isRecover ? 'seedphrase' : 'displayName']: inputValue }).then(
-      (identity) => {
-        joinSend({ type: 'selectIdentity', identity });
-      },
-      (error) => {
-        log.catch(error);
-        setValidationMessage(t(isRecover ? 'failed to recover identity message' : 'failed to create identity message'));
-      }
-    );
-  };
-  return (
-    <ViewState {...viewStateProps}>
-      <Input
-        disabled={disabled}
-        label={
-          <ViewStateHeading>
-            {t(isRecover ? 'recover identity input label' : 'new identity input label')}
-          </ViewStateHeading>
-        }
-        onChange={({ target: { value } }) => setInputValue(value)}
-        slots={{
-          root: { className: 'm-0' },
-          input: {
-            'data-autofocus': isRecover ? 'recoveringIdentity' : 'creatingIdentity',
-            onKeyUp: ({ key }) => key === 'Enter' && handleNext()
-          } as ComponentPropsWithoutRef<'input'>
-        }}
-        {...(validationMessage.length && { validationValence: 'error', validationMessage })}
-        data-testid='identity-input'
-      />
-      <div role='none' className='grow' />
-      <div className='flex gap-2'>
-        <Button
-          disabled={disabled}
-          className='grow flex items-center gap-2 pli-2 order-2'
-          onClick={handleNext}
-          data-testid={`${method === 'recover identity' ? 'recover' : 'create'}-identity-input-continue`}
-        >
-          <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
-          <span className='grow'>{t('continue label')}</span>
-          <CaretRight weight='bold' className={getSize(4)} />
-        </Button>
-        <Button
-          disabled={disabled}
-          onClick={() => joinSend({ type: 'deselectAuthMethod' })}
-          className='flex items-center gap-2 pis-2 pie-4'
-          data-testid={`${method === 'recover identity' ? 'recover' : 'create'}-identity-input-back`}
-        >
-          <CaretLeft weight='bold' className={getSize(4)} />
-          <span>{t('back label')}</span>
-        </Button>
-      </div>
-    </ViewState>
-  );
-};