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

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

@@ -1,74 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { CaretLeft, Check } from '@phosphor-icons/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 {
-  Kind: 'Space' | 'Halo';
-  doneActionParent?: Parameters<typeof cloneElement>[0];
-  onDone?: (result: InvitationResult | null) => void;
-}
-
-const PureInvitationAcceptedContent = ({
-  onDone,
-  result,
-  Kind,
-  doneActionParent,
-  active
-}: InvitationAcceptedProps & { result: InvitationResult | null }) => {
-  const disabled = !active;
-  const { t } = useTranslation('os');
-
-  const doneButton = (
-    <Button
-      onClick={() => onDone?.(result)}
-      disabled={disabled}
-      className='flex items-center gap-2 pli-2'
-      data-autofocus={`success${Kind}Invitation finishingJoining${Kind}`}
-      data-testid={`${Kind.toLowerCase()}-invitation-accepted-done`}
-    >
-      <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
-      <span className='grow'>{t('done label')}</span>
-      <Check className={getSize(4)} />
-    </Button>
-  );
-
-  return (
-    <>
-      <p className='text-center text-sm font-system-normal'>{t('welcome message')}</p>
-      <div role='none' className='grow' />
-      {doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton}
-    </>
-  );
-};
-
-const InvitationAcceptedContent = (
-  props: InvitationAcceptedProps & { activeInvitation: AuthenticatingInvitationObservable }
-) => {
-  const { result } = useInvitationStatus(props.activeInvitation);
-  return <PureInvitationAcceptedContent {...props} result={result} />;
-};
-
-export const InvitationAccepted = (props: InvitationAcceptedProps) => {
-  const { Kind, doneActionParent: _doneActionParent, onDone: _onDone, ...viewStateProps } = props;
-  const activeInvitation =
-    viewStateProps.joinState?.context[Kind.toLowerCase() as 'halo' | 'space'].invitationObservable;
-
-  return (
-    <ViewState {...viewStateProps}>
-      {!activeInvitation ? (
-        <PureInvitationAcceptedContent {...props} result={null} />
-      ) : (
-        <InvitationAcceptedContent {...props} activeInvitation={activeInvitation} />
-      )}
-    </ViewState>
-  );
-};

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

@@ -1,152 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { CaretLeft, CaretRight } from '@phosphor-icons/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 { JoinSend, JoinState } from '../joinMachine';
-import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
-
-const pinLength = 6;
-
-export interface InvitationAuthenticatorProps extends ViewStateProps {
-  Kind: 'Space' | 'Halo';
-  failed?: boolean;
-}
-
-const PureInvitationAuthenticatorContent = ({
-  disabled,
-  failed,
-  joinSend,
-  joinState,
-  Kind,
-  onChange,
-  onAuthenticate
-}: {
-  disabled?: boolean;
-  joinSend: JoinSend;
-  joinState?: JoinState;
-  Kind: InvitationAuthenticatorProps['Kind'];
-  failed: InvitationAuthenticatorProps['failed'];
-  onChange: ComponentProps<typeof Input>['onChange'];
-  onAuthenticate: ComponentProps<typeof Button>['onClick'];
-}) => {
-  const { t } = useTranslation('os');
-  const invitationType = Kind.toLowerCase() as 'space' | 'halo';
-  return (
-    <>
-      <Input
-        label={<ViewStateHeading>{t('auth code input label')}</ViewStateHeading>}
-        size='pin'
-        length={pinLength}
-        onChange={onChange}
-        disabled={disabled}
-        slots={{
-          root: { className: 'm-0' },
-          description: { className: 'text-center' },
-          input: {
-            disabled,
-            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
-          } as ComponentPropsWithoutRef<'input'>
-        }}
-        {...(failed && {
-          validationValence: 'error',
-          validationMessage: t('failed to authenticate message')
-        })}
-      />
-      <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={() => joinState?.context[invitationType].invitationObservable?.cancel()}
-          data-testid={`${invitationType}-invitation-authenticator-cancel`}
-        >
-          <CaretLeft weight='bold' className={getSize(4)} />
-          <span>{t('cancel label')}</span>
-        </Button>
-      </div>
-    </>
-  );
-};
-
-const InvitationAuthenticatorContent = ({
-  joinSend,
-  joinState,
-  disabled,
-  invitation,
-  Kind,
-  failed
-}: {
-  joinSend: JoinSend;
-  joinState?: JoinState;
-  disabled?: boolean;
-  invitation: AuthenticatingInvitationObservable;
-  Kind: InvitationAuthenticatorProps['Kind'];
-  failed: InvitationAuthenticatorProps['failed'];
-}) => {
-  const invitationType = Kind.toLowerCase();
-  const [pinValue, setPinValue] = useState('');
-  const { authenticate } = useInvitationStatus(invitation);
-  const onAuthenticate = useCallback(() => {
-    joinSend({ type: `authenticate${Kind}VerificationCode` });
-    void authenticate(pinValue);
-  }, [joinSend, 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, joinSend, joinState, Kind, onChange, onAuthenticate }}
-    />
-  );
-};
-
-export const InvitationAuthenticator = ({ failed, Kind, ...viewStateProps }: InvitationAuthenticatorProps) => {
-  const { joinSend, joinState } = viewStateProps;
-  const disabled =
-    !viewStateProps.active ||
-    ['connecting', 'authenticating'].some((str) => joinState?.configuration[0].id.includes(str));
-  const activeInvitation = joinState?.context[Kind.toLowerCase() as 'space' | 'halo'].invitationObservable;
-  return (
-    <ViewState {...viewStateProps}>
-      {!activeInvitation ? (
-        <PureInvitationAuthenticatorContent
-          {...{ disabled, failed, joinSend, joinState, Kind, onChange: () => {}, onAuthenticate: () => {} }}
-        />
-      ) : (
-        <InvitationAuthenticatorContent
-          {...{ disabled, failed, invitation: activeInvitation, joinSend, joinState, Kind }}
-        />
-      )}
-    </ViewState>
-  );
-};

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

@@ -1,75 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { CaretLeft, CaretRight } from '@phosphor-icons/react';
-import React, { ComponentPropsWithoutRef, useEffect, useState } from 'react';
-
-import { Button, getSize, Input, mx, useTranslation } from '@dxos/react-components';
-
-import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
-
-export interface InvitationInputProps extends ViewStateProps {
-  Kind: 'Space' | 'Halo';
-}
-
-export const InvitationInput = ({ Kind, ...viewStateProps }: InvitationInputProps) => {
-  const disabled = !viewStateProps.active;
-  const { joinSend, joinState } = viewStateProps;
-  const { t } = useTranslation('os');
-
-  const contextUnredeemedCode = joinState?.context[Kind.toLowerCase() as 'space' | 'halo'].unredeemedCode;
-
-  const [inputValue, setInputValue] = useState(contextUnredeemedCode ?? '');
-
-  useEffect(() => {
-    contextUnredeemedCode && setInputValue(contextUnredeemedCode ?? '');
-  }, [contextUnredeemedCode]);
-
-  const handleNext = () =>
-    joinSend({
-      type: `set${Kind}InvitationCode`,
-      code: inputValue
-    });
-
-  return (
-    <ViewState {...viewStateProps}>
-      <Input
-        disabled={disabled}
-        label={<ViewStateHeading>{t('invitation input label')}</ViewStateHeading>}
-        value={inputValue}
-        onChange={({ target: { value } }) => setInputValue(value)}
-        slots={{
-          root: { className: 'm-0' },
-          input: {
-            'data-autofocus': `inputting${Kind}InvitationCode`,
-            'data-testid': `${Kind.toLowerCase()}-invitation-input`,
-            onKeyUp: ({ key }) => key === 'Enter' && handleNext()
-          } as ComponentPropsWithoutRef<'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={`${Kind.toLowerCase()}-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 || Kind === 'Space'}
-          onClick={() => joinSend({ type: 'deselectAuthMethod' })}
-          className='flex items-center gap-2 pis-2 pie-4'
-          data-testid={`${Kind.toLowerCase()}-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

@@ -1,115 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { ArrowsClockwise, CaretLeft, CaretRight } from '@phosphor-icons/react';
-import React from 'react';
-
-import { Invitation } from '@dxos/client';
-import { Button, defaultDescription, getSize, mx, useTranslation } from '@dxos/react-components';
-
-import { JoinSend, JoinState } from '../joinMachine';
-import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
-
-export interface InvitationConnectorProps extends ViewStateProps {
-  Kind: 'Space' | 'Halo';
-}
-
-const InvitationActions = ({
-  invitationState,
-  disabled,
-  joinSend,
-  joinState,
-  Kind
-}: {
-  invitationState?: Invitation.State;
-  disabled?: boolean;
-  joinSend: JoinSend;
-  joinState?: JoinState;
-  Kind: InvitationConnectorProps['Kind'];
-}) => {
-  const { t } = useTranslation('os');
-  const invitationType = Kind.toLowerCase() as 'space' | 'halo';
-  switch (invitationState) {
-    case Invitation.State.CONNECTING:
-      return (
-        <>
-          <ViewStateHeading className={defaultDescription}>{t('connecting status label')}</ViewStateHeading>
-          <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={() => joinState?.context[invitationType].invitationObservable?.cancel()}
-              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 (
-        <>
-          <ViewStateHeading className={defaultDescription}>
-            {t(
-              invitationState === Invitation.State.TIMEOUT
-                ? 'timeout status label'
-                : invitationState === Invitation.State.CANCELLED
-                ? 'cancelled status label'
-                : 'error status label'
-            )}
-          </ViewStateHeading>
-          <div role='none' className='grow' />
-          <Button
-            disabled={disabled}
-            className='flex items-center gap-2 pli-2'
-            onClick={() => joinSend({ type: `reset${Kind}Invitation` })}
-            data-testid='invitation-rescuer-reset'
-          >
-            <CaretLeft weight='bold' className={mx(getSize(5), 'invisible')} />
-            <span className='grow'>{t('reset label')}</span>
-            <ArrowsClockwise className={getSize(4)} />
-          </Button>
-        </>
-      );
-  }
-};
-
-export const InvitationRescuer = ({ Kind, ...viewStateProps }: InvitationConnectorProps) => {
-  const disabled = !viewStateProps.active;
-  const { joinSend, joinState } = viewStateProps;
-  const invitationState = joinState?.context[Kind.toLowerCase() as 'space' | 'halo'].invitation?.state;
-  const { t } = useTranslation('os');
-  return (
-    <ViewState {...viewStateProps}>
-      {typeof invitationState === 'undefined' ? (
-        <>
-          <div role='none' className='grow' />
-          <Button
-            disabled={disabled}
-            className='flex items-center gap-2 pli-2'
-            data-autofocus={`inputting${Kind}InvitationCode`}
-            data-testid='invitation-rescuer-blank-reset'
-            onClick={() => joinSend({ type: `reset${Kind}Invitation` })}
-          >
-            <CaretLeft weight='bold' className={mx(getSize(5), 'invisible')} />
-            <span className='grow'>{t('reset label')}</span>
-            <ArrowsClockwise className={getSize(5)} />
-          </Button>
-        </>
-      ) : (
-        <InvitationActions {...{ invitationState, disabled, joinSend, joinState, Kind }} />
-      )}
-    </ViewState>
-  );
-};

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

@@ -1,153 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { CheckCircle, HourglassSimple, X } from '@phosphor-icons/react';
-import React, { ComponentProps, ComponentPropsWithoutRef, ReactNode, useMemo } from 'react';
-
-import type { AuthenticatingInvitationObservable } from '@dxos/client';
-import { Invitation } from '@dxos/client';
-import { useInvitationStatus } from '@dxos/react-client';
-import { mx, useTranslation, useId, getSize, strongShimmer } from '@dxos/react-components';
-
-import { defaultSurface, resolvedBgColor, activeBgColor, inactiveBgColor } from '../../../styles';
-import { invitationStatusValue } from '../../../util';
-import { JoinSend, JoinState } from '../joinMachine';
-
-export interface ViewStateProps extends ComponentProps<'div'> {
-  active: boolean;
-  joinSend: JoinSend;
-  joinState?: JoinState;
-}
-
-const stripe = mx('rounded-full grow', getSize(3));
-
-export const ViewStateHeading = ({ children, className, ...props }: ComponentPropsWithoutRef<'h2'>) => {
-  return (
-    <h2 {...props} className={mx('font-system-normal text-sm mbe-1 mli-1 text-center', className)}>
-      {children}
-    </h2>
-  );
-};
-
-const PureViewStateInvitation = ({
-  halted,
-  cursor,
-  label,
-  resolvedColor
-}: {
-  halted?: boolean;
-  cursor: number;
-  label: ReactNode;
-  resolvedColor: string;
-}) => {
-  const labelId = useId('invitationState');
-  return (
-    <div role='none' className={mx(defaultSurface, 'pli-2 pbs-2')}>
-      <div role='status' aria-labelledby={labelId} className='flex gap-2 items-center mlb-1'>
-        <div
-          role='none'
-          className={mx(
-            stripe,
-            !halted && cursor === 1 && strongShimmer,
-            cursor === 2 ? (halted ? resolvedColor : activeBgColor) : cursor > 1 ? resolvedColor : inactiveBgColor
-          )}
-        />
-        <div
-          role='none'
-          className={mx(
-            stripe,
-            !halted && cursor === 3 && strongShimmer,
-            cursor === 3 ? (halted ? resolvedColor : activeBgColor) : cursor > 3 ? resolvedColor : inactiveBgColor
-          )}
-        />
-        <div
-          role='none'
-          className={mx(stripe, cursor > 3 ? (halted ? resolvedColor : resolvedColor) : inactiveBgColor)}
-        />
-      </div>
-      <ViewStateHeading id={labelId} className='mbs-2 flex justify-center items-center gap-2'>
-        {label}
-      </ViewStateHeading>
-    </div>
-  );
-};
-
-// todo (thure): Restore this?
-const _ViewStateInvitationStatus = ({ activeInvitation }: { activeInvitation: AuthenticatingInvitationObservable }) => {
-  const { t } = useTranslation('os');
-  const { status, haltedAt } = useInvitationStatus(activeInvitation);
-
-  const halted =
-    status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT || status === Invitation.State.ERROR;
-
-  const cursor = invitationStatusValue.get(halted ? haltedAt! : status)!;
-
-  const resolvedColor = resolvedBgColor(status);
-
-  const statusLabelMap = useMemo(
-    () =>
-      new Map<Invitation.State, ReactNode>([
-        [
-          Invitation.State.ERROR,
-          <>
-            <X weight='bold' className={mx(getSize(4), 'text-error-600 dark:text-error-400')} />
-            <span>{t('error status label')}</span>
-          </>
-        ],
-        [
-          Invitation.State.TIMEOUT,
-          <>
-            <HourglassSimple weight='fill' className={mx(getSize(4), 'text-warning-600 dark:text-warning-400')} />
-            <span>{t('timeout status label')}</span>
-          </>
-        ],
-        [
-          Invitation.State.CANCELLED,
-          <>
-            <X weight='bold' className={mx(getSize(4), 'text-warning-600 dark:text-warning-400')} />
-            <span>{t('cancelled status label')}</span>
-          </>
-        ],
-        [Invitation.State.INIT, t('init status label')],
-        [Invitation.State.CONNECTING, t('connecting status label')],
-        [Invitation.State.CONNECTED, t('connected status label')],
-        [Invitation.State.AUTHENTICATING, t('authenticating status label')],
-        [
-          Invitation.State.SUCCESS,
-          <>
-            <CheckCircle weight='fill' className={mx(getSize(4), 'text-success-600 dark:text-success-400')} />
-            <span>{t('success status label')}</span>
-          </>
-        ]
-      ]),
-    [t]
-  );
-
-  return (
-    <PureViewStateInvitation
-      {...{
-        label: statusLabelMap.get(status)!,
-        resolvedColor,
-        cursor,
-        halted
-      }}
-    />
-  );
-};
-
-export const ViewState = ({ active, children, className, joinSend, joinState, ...props }: ViewStateProps) => {
-  // note (thure): reserve `order-1` and `order-3` for outgoing steps in different directions
-  return (
-    <div
-      role='none'
-      {...props}
-      {...(!active && { 'aria-hidden': true })}
-      className={mx('is-[50%] flex flex-col', active ? 'order-2' : 'order-4', className)}
-    >
-      <div role='region' className={mx(defaultSurface, 'rounded-be-md grow shrink-0 flex flex-col gap-1 p-4 pbs-1')}>
-        {children}
-      </div>
-    </div>
-  );
-};

package/src/panels/JoinPanel/view-states/index.ts

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

package/src/panels/SpacePanel/SpacePanel.stories.tsx

@@ -1,15 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { ClientSpaceDecorator } from '@dxos/react-client/testing';
-
-import { SpacePanel } from './SpacePanel';
-
-export default {
-  component: SpacePanel
-};
-
-export const Default = {
-  decorators: [ClientSpaceDecorator()]
-};