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

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

@@ -0,0 +1,79 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretLeft, CaretRight } from 'phosphor-react';
+import React, { ComponentPropsWithoutRef, useState } from 'react';
+
+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 { dispatch } = 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.createProfile({ [isRecover ? 'seedphrase' : 'displayName']: inputValue }).then(
+      (identity) => {
+        dispatch({ type: 'added identity', identity });
+      },
+      (_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 ? 'identity input; recover identity' : 'identity input; create identity',
+            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={() => dispatch({ type: 'add identity' })}
+          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>
+  );
+};

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

@@ -0,0 +1,101 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as RadioGroup from '@radix-ui/react-radio-group';
+import { CaretLeft, CaretRight, UserPlus } from 'phosphor-react';
+import React, { useCallback, useState } from 'react';
+
+import type { Profile } from '@dxos/client';
+import { Avatar, Button, themeVariantFocus, getSize, mx, useTranslation } from '@dxos/react-components';
+
+import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
+
+export interface IdentitySelectorProps extends ViewStateProps {
+  availableIdentities: Profile[];
+}
+
+export const IdentitySelector = ({ availableIdentities, ...viewStateProps }: IdentitySelectorProps) => {
+  const { dispatch } = viewStateProps;
+  const disabled = !viewStateProps.active;
+
+  const { t } = useTranslation('os');
+  const [activeIdentity, setActiveIdentity] = useState(availableIdentities[0]);
+  const onValueChange = useCallback(
+    (nextHex: string) =>
+      setActiveIdentity(
+        availableIdentities.find((identity) => identity.identityKey.toHex() === nextHex) || activeIdentity
+      ),
+    [availableIdentities]
+  );
+
+  return (
+    <ViewState {...viewStateProps}>
+      <ViewStateHeading>{t('identity selector title')}</ViewStateHeading>
+      <RadioGroup.Root
+        disabled={disabled}
+        value={activeIdentity?.identityKey.toHex()}
+        onValueChange={onValueChange}
+        className='overflow-y-auto grow shrink min-bs-10 pli-1 -mli-1'
+        aria-label={t('identity radio group title')}
+        data-autofocus='identity selector'
+      >
+        {availableIdentities.map(({ displayName, identityKey }) => {
+          const hex = identityKey.toHex();
+          const inputId = `identitySelector__item--${hex}`;
+          const labelId = `identitySelector__itemLabel--${hex}`;
+          return (
+            <label htmlFor={inputId} key={hex} className='flex items-center mbe-2 gap-2 cursor-pointer'>
+              <RadioGroup.Item
+                id={inputId}
+                aria-labelledby={labelId}
+                value={hex}
+                className={mx(
+                  'peer relative w-4 h-4 rounded-full',
+                  'border border-transparent text-white',
+                  'radix-state-checked:bg-primary-600',
+                  'radix-state-unchecked:bg-neutral-100 dark:radix-state-unchecked:bg-neutral-900',
+                  themeVariantFocus('os')
+                )}
+                data-testid='identity-selector-item'
+              >
+                <RadioGroup.Indicator className='absolute inset-0 flex items-center justify-center leading-0'>
+                  <div className='w-1.5 h-1.5 rounded-full bg-white' />
+                </RadioGroup.Indicator>
+              </RadioGroup.Item>
+              <Avatar fallbackValue={hex} labelId={labelId} variant='circle' />
+              <span id={labelId} className={mx(!displayName && 'font-mono')}>
+                {displayName ?? identityKey.truncate() ?? ''}
+              </span>
+            </label>
+          );
+        })}
+      </RadioGroup.Root>
+      <Button
+        disabled={disabled}
+        compact
+        onClick={() => dispatch({ type: 'add identity' })}
+        className='flex items-center gap-2 pli-2'
+        data-testid='add-identity'
+      >
+        <span>{t('add identity label')}</span>
+        <UserPlus weight='bold' className={getSize(3.5)} />
+      </Button>
+      <Button
+        disabled={disabled || !activeIdentity}
+        className='flex items-center gap-2 pli-2'
+        onClick={() =>
+          dispatch({
+            type: 'select identity',
+            identity: activeIdentity
+          })
+        }
+        data-testid='select-identity'
+      >
+        <CaretLeft weight='bold' className={mx(getSize(4), 'invisible')} />
+        <span className='grow'>{t('continue label')}</span>
+        <CaretRight weight='bold' className={getSize(4)} />
+      </Button>
+    </ViewState>
+  );
+};

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

@@ -0,0 +1,70 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretLeft, Check } from 'phosphor-react';
+import React, { cloneElement } from 'react';
+
+import { AuthenticatingInvitationObservable } from '@dxos/client';
+import { InvitationResult, useInvitationStatus } from '@dxos/react-client';
+import { Button, getSize, mx, useTranslation } from '@dxos/react-components';
+
+import { ViewState, ViewStateProps } from './ViewState';
+
+export interface InvitationAcceptedProps extends ViewStateProps {
+  invitationType: 'space' | 'halo';
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+  onDone?: (result: InvitationResult | null) => void;
+}
+
+const PureInvitationAcceptedContent = ({
+  onDone,
+  result,
+  invitationType,
+  doneActionParent,
+  active
+}: InvitationAcceptedProps & { result: InvitationResult | null }) => {
+  const disabled = !active;
+  const { t } = useTranslation('os');
+
+  const doneButton = (
+    <Button
+      {...(onDone && { onClick: () => onDone(result) })}
+      disabled={disabled}
+      className='grow flex items-center gap-2 pli-2'
+      data-autofocus={`${invitationType} invitation acceptor; invitation accepted`}
+      data-testid={`${invitationType}-invitation-accepted-done`}
+    >
+      <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
+      <span className='grow'>{t('done label')}</span>
+      <Check weight='bold' className={getSize(4)} />
+    </Button>
+  );
+
+  return doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton;
+};
+
+const InvitationAcceptedContent = (props: InvitationAcceptedProps) => {
+  const { result } = useInvitationStatus(props.activeInvitation as AuthenticatingInvitationObservable);
+  return <PureInvitationAcceptedContent {...props} result={result} />;
+};
+
+export const InvitationAccepted = (props: InvitationAcceptedProps) => {
+  const {
+    invitationType: _invitationType,
+    doneActionParent: _doneActionParent,
+    onDone: _onDone,
+    ...viewStateProps
+  } = props;
+  const { activeInvitation } = viewStateProps;
+
+  return (
+    <ViewState {...viewStateProps}>
+      {!activeInvitation || activeInvitation === true ? (
+        <PureInvitationAcceptedContent {...props} result={null} />
+      ) : (
+        <InvitationAcceptedContent {...props} />
+      )}
+    </ViewState>
+  );
+};

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

@@ -0,0 +1,142 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretLeft, CaretRight } from 'phosphor-react';
+import React, { ChangeEvent, ComponentProps, ComponentPropsWithoutRef, useCallback, useState } from 'react';
+
+import { AuthenticatingInvitationObservable } from '@dxos/client';
+import { useInvitationStatus } from '@dxos/react-client';
+import { Button, getSize, Input, mx, useTranslation } from '@dxos/react-components';
+
+import { ViewState, ViewStateProps } from './ViewState';
+
+const pinLength = 6;
+
+export interface InvitationAuthenticatorProps extends ViewStateProps {
+  invitationType: 'space' | 'halo';
+  failed?: boolean;
+}
+
+const PureInvitationAuthenticatorContent = ({
+  disabled,
+  failed,
+  dispatch,
+  invitationType,
+  onChange,
+  onAuthenticate
+}: {
+  disabled?: boolean;
+  dispatch: ViewStateProps['dispatch'];
+  invitationType: InvitationAuthenticatorProps['invitationType'];
+  failed: InvitationAuthenticatorProps['failed'];
+  onChange: ComponentProps<typeof Input>['onChange'];
+  onAuthenticate: ComponentProps<typeof Button>['onClick'];
+}) => {
+  const { t } = useTranslation('os');
+  return (
+    <>
+      <Input
+        label={t('auth code input label')}
+        size='pin'
+        length={pinLength}
+        onChange={onChange}
+        disabled={disabled}
+        slots={{
+          root: { className: 'm-0' },
+          label: { className: 'sr-only' },
+          description: { className: 'text-center' },
+          input: {
+            disabled,
+            inputMode: 'numeric',
+            pattern: '\\d*',
+            'data-autofocus': `${invitationType} invitation acceptor; invitation authenticator`
+          } as ComponentPropsWithoutRef<'input'>
+        }}
+        {...(failed && {
+          validationValence: 'error',
+          validationMessage: t('failed to authenticate message')
+        })}
+        data-testid='auth-code-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={onAuthenticate}
+          data-autofocus-pinlength={invitationType}
+          data-testid={`${invitationType}-invitation-authenticator-next`}
+        >
+          <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
+          <span className='grow'>{t('next label')}</span>
+          <CaretRight weight='bold' className={getSize(4)} />
+        </Button>
+        <Button
+          disabled={disabled}
+          className='flex items-center gap-2 pis-2 pie-4'
+          onClick={() => dispatch({ type: 'cancel invitation', from: invitationType })}
+          data-testid={`${invitationType}-invitation-authenticator-cancel`}
+        >
+          <CaretLeft weight='bold' className={getSize(4)} />
+          <span>{t('cancel label')}</span>
+        </Button>
+      </div>
+    </>
+  );
+};
+
+const InvitationAuthenticatorContent = ({
+  disabled,
+  invitation,
+  dispatch,
+  invitationType,
+  failed
+}: {
+  disabled?: boolean;
+  invitation: AuthenticatingInvitationObservable;
+  dispatch: ViewStateProps['dispatch'];
+  invitationType: InvitationAuthenticatorProps['invitationType'];
+  failed: InvitationAuthenticatorProps['failed'];
+}) => {
+  const [pinValue, setPinValue] = useState('');
+  const { authenticate } = useInvitationStatus(invitation);
+  const onAuthenticate = useCallback(() => {
+    dispatch({ type: 'authenticating invitation', from: invitationType });
+    void authenticate(pinValue);
+  }, [dispatch, invitationType, authenticate, pinValue]);
+  const onChange = useCallback(
+    ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+      setPinValue(value);
+      if (value.length === pinLength) {
+        (document.querySelector(`[data-autofocus-pinlength="${invitationType}"]`) as HTMLElement | null)?.focus();
+      }
+    },
+    [authenticate, pinValue]
+  );
+  return (
+    <PureInvitationAuthenticatorContent {...{ disabled, failed, dispatch, invitationType, onChange, onAuthenticate }} />
+  );
+};
+
+export const InvitationAuthenticator = ({
+  invitationType,
+  failed,
+  ...viewStateProps
+}: InvitationAuthenticatorProps) => {
+  const disabled = !viewStateProps.active;
+  const { activeInvitation, dispatch } = viewStateProps;
+  return (
+    <ViewState {...viewStateProps}>
+      {!activeInvitation || activeInvitation === true ? (
+        <PureInvitationAuthenticatorContent
+          {...{ disabled, failed, dispatch, invitationType, onChange: () => {}, onAuthenticate: () => {} }}
+        />
+      ) : (
+        <InvitationAuthenticatorContent
+          {...{ disabled, failed, invitation: activeInvitation, dispatch, invitationType }}
+        />
+      )}
+    </ViewState>
+  );
+};

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

@@ -0,0 +1,75 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretLeft, CaretRight } from 'phosphor-react';
+import React, { ComponentPropsWithoutRef, useState } from 'react';
+
+import { InvitationEncoder } from '@dxos/client';
+import { useClient } from '@dxos/react-client';
+import { Button, getSize, Input, mx, useTranslation } from '@dxos/react-components';
+
+import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
+
+export interface InvitationInputProps extends ViewStateProps {
+  invitationType: 'space' | 'halo';
+}
+
+export const InvitationInput = ({ invitationType, ...viewStateProps }: InvitationInputProps) => {
+  const client = useClient();
+  const disabled = !viewStateProps.active;
+  const { dispatch } = viewStateProps;
+  const { t } = useTranslation('os');
+
+  const [inputValue, setInputValue] = useState('');
+
+  const handleNext = () =>
+    dispatch({
+      type: 'connecting invitation',
+      from: invitationType,
+      invitation: client[invitationType === 'halo' ? 'halo' : 'echo'].acceptInvitation(
+        InvitationEncoder.decode(inputValue)
+      )
+    });
+
+  return (
+    <ViewState {...viewStateProps}>
+      <Input
+        disabled={disabled}
+        label={<ViewStateHeading>{t('invitation input label')}</ViewStateHeading>}
+        onChange={({ target: { value } }) => setInputValue(value)}
+        slots={{
+          root: { className: 'm-0' },
+          label: { className: 'sr-only' },
+          input: {
+            'data-autofocus': `${invitationType} invitation acceptor; invitation input`,
+            onKeyUp: ({ key }) => key === 'Enter' && handleNext()
+          } as ComponentPropsWithoutRef<'input'>
+        }}
+        data-testid='invitation-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={`${invitationType}-invitation-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={() => dispatch({ type: 'add identity' })}
+          className='flex items-center gap-2 pis-2 pie-4'
+          data-testid={`${invitationType}-invitation-input-back`}
+        >
+          <CaretLeft weight='bold' className={getSize(4)} />
+          <span>{t('back label')}</span>
+        </Button>
+      </div>
+    </ViewState>
+  );
+};

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

@@ -0,0 +1,98 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { ArrowsClockwise, CaretLeft, CaretRight } from 'phosphor-react';
+import React from 'react';
+
+import { AuthenticatingInvitationObservable, Invitation } from '@dxos/client';
+import { useInvitationStatus } from '@dxos/react-client';
+import { Button, getSize, mx, useTranslation } from '@dxos/react-components';
+
+import { ViewState, ViewStateProps } from './ViewState';
+
+export interface InvitationConnectorProps extends ViewStateProps {
+  invitationType: 'space' | 'halo';
+}
+
+const InvitationActions = ({
+  activeInvitation,
+  disabled,
+  dispatch,
+  invitationType
+}: {
+  activeInvitation: AuthenticatingInvitationObservable;
+  disabled?: boolean;
+  dispatch: ViewStateProps['dispatch'];
+  invitationType: InvitationConnectorProps['invitationType'];
+}) => {
+  const { status, cancel } = useInvitationStatus(activeInvitation);
+  const { t } = useTranslation('os');
+
+  switch (status) {
+    case Invitation.State.CONNECTING:
+      return (
+        <>
+          <div role='none' className='grow' />
+          <div className='flex gap-2'>
+            <Button disabled className='grow flex items-center gap-2 pli-2 order-2' data-testid='next'>
+              <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
+              <span className='grow'>{t('next label')}</span>
+              <CaretRight weight='bold' className={getSize(4)} />
+            </Button>
+            <Button
+              disabled={disabled}
+              className='flex items-center gap-2 pis-2 pie-4'
+              onClick={cancel}
+              data-autofocus={`${invitationType} invitation acceptor; invitation rescuer`}
+              data-testid='invitation-rescuer-cancel'
+            >
+              <CaretLeft weight='bold' className={getSize(4)} />
+              <span>{t('cancel label')}</span>
+            </Button>
+          </div>
+        </>
+      );
+    case Invitation.State.TIMEOUT:
+    case Invitation.State.CANCELLED:
+    case Invitation.State.ERROR:
+    default:
+      return (
+        <Button
+          disabled={disabled}
+          className='grow flex items-center gap-2 pli-2'
+          onClick={() => dispatch({ type: 'reset invitation', from: invitationType })}
+          data-autofocus={`${invitationType} invitation acceptor; invitation rescuer`}
+          data-testid='invitation-rescuer-reset'
+        >
+          <CaretLeft weight='bold' className={mx(getSize(5), 'invisible')} />
+          <span className='grow'>{t('reset label')}</span>
+          <ArrowsClockwise weight='bold' className={getSize(5)} />
+        </Button>
+      );
+  }
+};
+
+export const InvitationRescuer = ({ invitationType, ...viewStateProps }: InvitationConnectorProps) => {
+  const disabled = !viewStateProps.active;
+  const { dispatch, activeInvitation } = viewStateProps;
+  const { t } = useTranslation('os');
+  return (
+    <ViewState {...viewStateProps}>
+      {activeInvitation === true || !activeInvitation ? (
+        <Button
+          disabled={disabled}
+          className='grow flex items-center gap-2 pli-2'
+          data-autofocus='space invitation acceptor; invitation rescuer'
+          data-testid='invitation-rescuer-connect'
+        >
+          <CaretLeft weight='bold' className={mx(getSize(5), 'invisible')} />
+          <span className='grow'>{t('connect label')}</span>
+          <ArrowsClockwise weight='bold' className={getSize(5)} />
+        </Button>
+      ) : (
+        <InvitationActions {...{ activeInvitation, disabled, dispatch, invitationType }} />
+      )}
+    </ViewState>
+  );
+};