@dxos/react-ui 0.1.23 → 0.1.24

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

@@ -0,0 +1,95 @@
+//
+// 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'>
+              <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`}
+            >
+              <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`}
+        >
+          <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'
+        >
+          <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>
+  );
+};

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

@@ -0,0 +1,204 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CheckCircle, HourglassSimple, X } from 'phosphor-react';
+import React, { ComponentProps, ComponentPropsWithoutRef, ReactNode, useMemo } from 'react';
+
+import type { AuthenticatingInvitationObservable, Profile } from '@dxos/client';
+import { Invitation } from '@dxos/client';
+import { useInvitationStatus } from '@dxos/react-client';
+import { mx, useTranslation, Trans, Avatar, useId, getSize, strongShimmer } from '@dxos/react-components';
+
+import { defaultSurface, subduedSurface, resolvedBgColor, activeBgColor, inactiveBgColor } from '../../../styles';
+import { invitationStatusValue } from '../../../util';
+import { JoinDispatch } from '../JoinPanelProps';
+
+export interface ViewStateProps extends ComponentProps<'div'> {
+  active: boolean;
+  dispatch: JoinDispatch;
+  selectedIdentity?: true | Profile;
+  activeInvitation?: true | AuthenticatingInvitationObservable;
+}
+
+const stripe = mx('rounded-full grow', getSize(3));
+
+export const ViewStateHeading = ({ children, className, ...props }: ComponentPropsWithoutRef<'h2'>) => {
+  return (
+    <h2 {...props} className={mx('font-system-medium text-sm md:text-base 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>
+  );
+};
+
+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,
+  dispatch,
+  selectedIdentity,
+  activeInvitation,
+  ...props
+}: ViewStateProps) => {
+  // note (thure): reserve `order-1` and `order-3` for outgoing steps in different directions
+  const { t } = useTranslation('os');
+  const identityLabel = useId('selectedIdentityLabel');
+
+  return (
+    <div
+      role='none'
+      {...props}
+      {...(!active && { 'aria-hidden': true })}
+      className={mx('is-[50%] flex flex-col', active ? 'order-2' : 'order-4', className)}
+    >
+      {selectedIdentity && (
+        <div role='none' className={mx(subduedSurface, 'flex-none flex items-center gap-1 pli-2 pbe-1.5')}>
+          <Trans
+            {...{
+              defaults: t('join space as identity heading'),
+              components: {
+                icon: (
+                  <Avatar
+                    size={4}
+                    fallbackValue={selectedIdentity === true ? '' : selectedIdentity.identityKey.toHex()}
+                    labelId={identityLabel}
+                  />
+                ),
+                label: <span id={identityLabel} />,
+                part: <span role='none' className='flex items-center gap-1 leading-none' />
+              },
+              values: {
+                labelValue:
+                  selectedIdentity === true
+                    ? ' '
+                    : selectedIdentity.displayName ?? selectedIdentity.identityKey.truncate()
+              }
+            }}
+          />
+        </div>
+      )}
+      {activeInvitation &&
+        (activeInvitation === true ? (
+          <PureViewStateInvitation
+            {...{
+              halted: false,
+              status: Invitation.State.INIT,
+              label: t('invitation input label'),
+              cursor: 0,
+              resolvedColor: inactiveBgColor
+            }}
+          />
+        ) : (
+          <ViewStateInvitationStatus {...{ activeInvitation }} />
+        ))}
+      <div role='region' className={mx(defaultSurface, 'rounded-be-md grow shrink-0 flex flex-col gap-1 p-2')}>
+        {children}
+      </div>
+    </div>
+  );
+};

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

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

package/src/panels/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './IdentityPanel';
+export * from './JoinPanel';

package/src/styles/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './panelStyles';
+export * from './invitationStatusStyles';

package/src/styles/invitationStatusStyles.ts

@@ -0,0 +1,42 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Invitation } from '@dxos/client';
+
+export const inactiveBgColor = 'bg-neutral-100 dark:bg-neutral-600';
+export const activeBgColor = 'bg-primary-500 dark:bg-primary-400';
+export const successBgColor = 'bg-success-500 dark:bg-success-400';
+export const errorBgColor = 'bg-error-500 dark:bg-error-400';
+export const cancelledBgColor = 'bg-warning-500 dark:bg-warning-400';
+
+export const inactiveTextColor = 'text-neutral-100 dark:text-neutral-600';
+export const activeTextColor = 'text-primary-400 dark:text-primary-500';
+export const successTextColor = 'text-success-400 dark:text-success-500';
+export const errorTextColor = 'text-error-400 dark:text-error-500';
+export const cancelledTextColor = 'text-warning-400 dark:text-warning-500';
+
+export const inactiveStrokeColor = 'stroke-neutral-100 dark:stroke-neutral-700';
+export const activeStrokeColor = 'stroke-primary-500 dark:stroke-primary-150';
+export const successStrokeColor = 'stroke-success-400 dark:stroke-primary-400';
+export const errorStrokeColor = 'stroke-error-400 dark:stroke-error-500';
+export const cancelledStrokeColor = 'stroke-warning-400 dark:stroke-warning-500';
+
+export const resolvedStrokeColor = (status: Invitation.State) =>
+  status === Invitation.State.ERROR
+    ? errorStrokeColor
+    : status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT
+    ? cancelledStrokeColor
+    : successStrokeColor;
+export const resolvedBgColor = (status: Invitation.State) =>
+  status === Invitation.State.ERROR
+    ? errorBgColor
+    : status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT
+    ? cancelledBgColor
+    : successBgColor;
+export const resolvedTextColor = (status: Invitation.State) =>
+  status === Invitation.State.ERROR
+    ? errorTextColor
+    : status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT
+    ? cancelledTextColor
+    : successTextColor;

package/src/styles/panelStyles.ts

@@ -2,5 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export const defaultPanel = 'p-2 backdrop-blur-md bg-neutral-50/[.66] dark:bg-neutral-950/[.66]';
+export const defaultSurface = 'bg-neutral-50/[.72] dark:bg-neutral-950/[.72]';
+export const subduedSurface = 'bg-neutral-100/[.66] dark:bg-neutral-900/[.66]';
 export const defaultArrow = 'text-neutral-50/[.66] dark:text-neutral-950/[.66]';

package/src/testing/ClientProvider.tsx

@@ -11,7 +11,7 @@ const configProvider = async () => new Config(await Dynamics(), Defaults());
 
 export const ClientProvider = ({ children }: PropsWithChildren<{}>) => {
   return (
-    <NaturalClientProvider config={configProvider} fallback={<span>Starting client…</span>}>
+    <NaturalClientProvider config={configProvider} fallback={() => <span>Starting client…</span>}>
       {children}
     </NaturalClientProvider>
   );

package/src/translations/locales/en-US.ts

@@ -5,5 +5,46 @@
 export const os = {
   'manage profile label': 'Manage identity',
   'identity offline description': 'Offline',
-  'sidebar label': 'DXOS sidebar'
+  'sidebar label': 'DXOS sidebar',
+  'copy invitation code label': 'Copy',
+  'open share panel label': 'Share',
+  'join space heading': '<small>Joining</small><large>{{spaceTitle}}</large>',
+  'exit label': 'Exit',
+  'identity selector title': 'Join as',
+  'identity radio group title': 'Select an identity you’ve associated with this device already',
+  'add identity label': 'Add',
+  'continue label': 'Continue',
+  'back label': 'Back',
+  'next label': 'Next',
+  'auth choices label': 'Choose an identity',
+  'create identity label': 'Create an identity',
+  'create identity description': 'Create a new identity.',
+  'recover identity label': 'Use a seed phrase',
+  'recover identity description': 'Enter your seed phrase to log in manually.',
+  'join identity label': 'Use an authed device',
+  'join identity description': 'Add this device to an identity you’re already logged into on another device.',
+  'deselect identity label': 'Back to identities',
+  'addition method selector title': 'Add an identity to this device',
+  'new identity input label': 'Add a display name',
+  'recover identity input label': 'Type or paste your seed phrase',
+  'failed to create identity message': 'Failed to create an identity.',
+  'failed to recover identity message': 'Failed to recover an identity from the provided seed phrase.',
+  'failed to authenticate message': 'Incorrect PIN.',
+  'identity added label': 'Created identity & added to this device:',
+  'join space as identity heading': '<part>as </part><part><icon/><label>{{labelValue}}</label></part>',
+  'error status label': 'Failed',
+  'timeout status label': 'Timed out',
+  'cancelled status label': 'Cancelled',
+  'init status label': 'Ready to connect',
+  'connecting status label': 'Connecting…',
+  'connected status label': 'Enter confirmation PIN',
+  'authenticating status label': 'Enter confirmation PIN',
+  'success status label': 'Success',
+  'connect label': 'Connect',
+  'reconnect label': 'Reconnect',
+  'cancel label': 'Cancel',
+  'done label': 'Done',
+  'reset label': 'Start over',
+  'pin input label': 'The PIN provided by the invitation sender',
+  'invitation input label': 'Paste an invitation code or URL'
 };

package/src/util/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './invitationStatusValue';

package/src/util/invitationStatusValue.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Invitation } from '@dxos/client';
+
+/**
+ * This map assigns a numeric value to invitation states to facilitate
+ * more terse code which uses combinations of `>`, `<`, and `=` instead of
+ * longer sequences of `===` and `||` predicates.
+ */
+export const invitationStatusValue = new Map<Invitation.State, number>([
+  [Invitation.State.ERROR, -3],
+  [Invitation.State.TIMEOUT, -2],
+  [Invitation.State.CANCELLED, -1],
+  [Invitation.State.INIT, 0],
+  [Invitation.State.CONNECTING, 1],
+  [Invitation.State.CONNECTED, 2],
+  [Invitation.State.AUTHENTICATING, 3],
+  [Invitation.State.SUCCESS, 4]
+]);

package/theme-extensions.js

@@ -0,0 +1,11 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+module.exports = {
+  osThemeExtension: {
+    spacing: {
+      sidebar: '272px'
+    }
+  }
+};

package/dist/types/src/components/IdentityListItem/IdentityListItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IdentityListItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/IdentityListItem/IdentityListItem.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGpD,eAAO,MAAM,gBAAgB;cAAwC,OAAO;;iBAuB3E,CAAC"}

package/dist/types/src/components/IdentityListItem/IdentityListItem.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IdentityListItem.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/IdentityListItem/IdentityListItem.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;;;;;;;AAIpB,wBAEE;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;CAUnB,CAAC"}