@dxos/react-ui 0.1.26 → 0.1.27-next.6f5e1d5

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

@@ -23,7 +23,7 @@ export const IdentityInput = ({ method, ...viewStateProps }: IdentityCreatorProp
   const [validationMessage, setValidationMessage] = useState('');
   const isRecover = method === 'recover identity';
   const handleNext = () => {
-    void client.halo.createProfile({ [isRecover ? 'seedphrase' : 'displayName']: inputValue }).then(
+    void client.halo.createIdentity({ [isRecover ? 'seedphrase' : 'displayName']: inputValue }).then(
       (identity) => {
         dispatch({ type: 'added identity', identity });
       },
@@ -50,10 +50,16 @@ export const IdentityInput = ({ method, ...viewStateProps }: IdentityCreatorProp
           } 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}>
+        <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)} />
@@ -62,6 +68,7 @@ export const IdentityInput = ({ method, ...viewStateProps }: IdentityCreatorProp
           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>

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

@@ -6,13 +6,13 @@ import * as RadioGroup from '@radix-ui/react-radio-group';
 import { CaretLeft, CaretRight, UserPlus } from 'phosphor-react';
 import React, { useCallback, useState } from 'react';
 
+import type { Identity } from '@dxos/client';
 import { Avatar, Button, themeVariantFocus, getSize, mx, useTranslation } from '@dxos/react-components';
 
-import { Profile } from '../JoinPanelProps';
 import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
 
 export interface IdentitySelectorProps extends ViewStateProps {
-  availableIdentities: Profile[];
+  availableIdentities: Identity[];
 }
 
 export const IdentitySelector = ({ availableIdentities, ...viewStateProps }: IdentitySelectorProps) => {
@@ -40,7 +40,7 @@ export const IdentitySelector = ({ availableIdentities, ...viewStateProps }: Ide
         aria-label={t('identity radio group title')}
         data-autofocus='identity selector'
       >
-        {availableIdentities.map(({ displayName, identityKey }) => {
+        {availableIdentities.map(({ profile, identityKey }) => {
           const hex = identityKey.toHex();
           const inputId = `identitySelector__item--${hex}`;
           const labelId = `identitySelector__itemLabel--${hex}`;
@@ -57,14 +57,15 @@ export const IdentitySelector = ({ availableIdentities, ...viewStateProps }: Ide
                   '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 id={labelId} className={mx(!profile?.displayName && 'font-mono')}>
+                {profile?.displayName ?? identityKey.truncate() ?? ''}
               </span>
             </label>
           );
@@ -72,9 +73,9 @@ export const IdentitySelector = ({ availableIdentities, ...viewStateProps }: Ide
       </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)} />
@@ -88,6 +89,7 @@ export const IdentitySelector = ({ availableIdentities, ...viewStateProps }: Ide
             identity: activeIdentity
           })
         }
+        data-testid='select-identity'
       >
         <CaretLeft weight='bold' className={mx(getSize(4), 'invisible')} />
         <span className='grow'>{t('continue label')}</span>

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

@@ -33,6 +33,7 @@ const PureInvitationAcceptedContent = ({
       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>

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

@@ -37,7 +37,7 @@ const PureInvitationAuthenticatorContent = ({
   return (
     <>
       <Input
-        label={t('pin input label')}
+        label={t('auth code input label')}
         size='pin'
         length={pinLength}
         onChange={onChange}
@@ -57,6 +57,7 @@ const PureInvitationAuthenticatorContent = ({
           validationValence: 'error',
           validationMessage: t('failed to authenticate message')
         })}
+        data-testid='auth-code-input'
       />
       <div role='none' className='grow' />
       <div className='flex gap-2'>
@@ -65,6 +66,7 @@ const PureInvitationAuthenticatorContent = ({
           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>
@@ -74,6 +76,7 @@ const PureInvitationAuthenticatorContent = ({
           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>

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

@@ -46,10 +46,16 @@ export const InvitationInput = ({ invitationType, ...viewStateProps }: Invitatio
             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}>
+        <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)} />
@@ -58,6 +64,7 @@ export const InvitationInput = ({ invitationType, ...viewStateProps }: Invitatio
           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>

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

@@ -35,7 +35,7 @@ const InvitationActions = ({
         <>
           <div role='none' className='grow' />
           <div className='flex gap-2'>
-            <Button disabled className='grow flex items-center gap-2 pli-2 order-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)} />
@@ -45,6 +45,7 @@ const InvitationActions = ({
               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>
@@ -62,6 +63,7 @@ const InvitationActions = ({
           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>
@@ -82,6 +84,7 @@ export const InvitationRescuer = ({ invitationType, ...viewStateProps }: Invitat
           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>

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

@@ -5,7 +5,7 @@
 import { CheckCircle, HourglassSimple, X } from 'phosphor-react';
 import React, { ComponentProps, ComponentPropsWithoutRef, ReactNode, useMemo } from 'react';
 
-import type { AuthenticatingInvitationObservable, Profile } from '@dxos/client';
+import type { AuthenticatingInvitationObservable, Identity } 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';
@@ -17,7 +17,7 @@ import { JoinDispatch } from '../JoinPanelProps';
 export interface ViewStateProps extends ComponentProps<'div'> {
   active: boolean;
   dispatch: JoinDispatch;
-  selectedIdentity?: true | Profile;
+  selectedIdentity?: true | Identity;
   activeInvitation?: true | AuthenticatingInvitationObservable;
 }
 
@@ -176,7 +176,7 @@ export const ViewState = ({
                 labelValue:
                   selectedIdentity === true
                     ? ' '
-                    : selectedIdentity.displayName ?? selectedIdentity.identityKey.truncate()
+                    : selectedIdentity.profile?.displayName ?? selectedIdentity.identityKey.truncate()
               }
             }}
           />

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

@@ -0,0 +1,53 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { StoryContext, StoryFn } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+
+import { Client, Space } from '@dxos/client';
+import { TestBuilder } from '@dxos/client/testing';
+import { ClientContext } from '@dxos/react-client';
+import { Loading } from '@dxos/react-components';
+
+import { SpacePanel } from './SpacePanel';
+
+export default {
+  component: SpacePanel
+};
+
+const SpaceDecorator = (Story: StoryFn, { args }: StoryContext) => {
+  const testBuilder = new TestBuilder();
+  const [client, setClient] = useState<Client>();
+  const [space, setSpace] = useState<Space>();
+
+  useEffect(() => {
+    const timeout = setTimeout(async () => {
+      const client = new Client({ services: testBuilder.createClientServicesHost() });
+      await client.initialize();
+      setClient(client);
+
+      await client.halo.createIdentity();
+      const space = await client.echo.createSpace();
+      space.properties.name = 'Q3 2022 Planning';
+
+      setSpace(space);
+    });
+
+    return () => clearTimeout(timeout);
+  }, []);
+
+  if (!client || !space) {
+    return <Loading label='Setting things up…' />;
+  }
+
+  return (
+    <ClientContext.Provider value={{ client }}>
+      <Story args={{ space, ...args }} />
+    </ClientContext.Provider>
+  );
+};
+
+export const Default = {
+  decorators: [SpaceDecorator]
+};

package/src/panels/SpacePanel/SpacePanel.tsx

@@ -0,0 +1,90 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { UserPlus } from 'phosphor-react';
+import React, { cloneElement, useReducer } from 'react';
+
+import { Space } from '@dxos/client';
+import { useSpaceInvitations } from '@dxos/react-client';
+import { Button, DensityProvider, getSize, mx, useTranslation } from '@dxos/react-components';
+
+import { InvitationList, PanelSeparator, SpaceMemberListContainer } from '../../components';
+import { defaultSurface, subduedSurface } from '../../styles';
+
+export type SpacePanelProps = {
+  titleId?: string;
+  space?: Space;
+  createInvitationUrl: (invitationCode: string) => string;
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+  onDone?: () => void;
+};
+
+export type SpaceView = 'current space';
+
+const CurrentSpaceView = ({ space, createInvitationUrl, titleId }: SpacePanelProps) => {
+  const { t } = useTranslation('os');
+  const invitations = useSpaceInvitations(space?.key);
+  const name = space?.properties.name;
+
+  if (!space) {
+    return null;
+  }
+
+  return (
+    <div role='none' className='flex flex-col'>
+      <div role='none' className={mx(subduedSurface, 'rounded-bs-md flex items-center p-2 gap-2')}>
+        {/* TODO(wittjosiah): Label this as the space panel. */}
+        <h2 id={titleId} className={mx('grow font-system-medium', !name && 'font-mono')}>
+          {name ?? space.key.truncate()}
+        </h2>
+      </div>
+      <div role='region' className={mx(defaultSurface, 'rounded-be-md p-2')}>
+        <InvitationList
+          invitations={invitations}
+          onClickRemove={({ invitation }) => invitation && space?.removeInvitation(invitation.invitationId!)}
+          createInvitationUrl={createInvitationUrl}
+        />
+        <Button
+          className='is-full flex gap-2 mbs-2'
+          onClick={() => space?.createInvitation()}
+          data-testid='create-space-invitation'
+        >
+          <span>{t('create space invitation label')}</span>
+          <UserPlus className={getSize(4)} weight='bold' />
+        </Button>
+        <PanelSeparator />
+        <SpaceMemberListContainer spaceKey={space.key} includeSelf />
+      </div>
+    </div>
+  );
+};
+
+interface SpacePanelState {
+  activeView: SpaceView;
+}
+
+interface SpacePanelAction {
+  type: null;
+}
+
+export const SpacePanel = (props: SpacePanelProps) => {
+  const reducer = (state: SpacePanelState, action: SpacePanelAction) => {
+    const nextState = { ...state };
+    switch (action.type) {
+      case null:
+    }
+    return nextState;
+  };
+
+  const [panelState] = useReducer(reducer, {
+    activeView: 'current space'
+  });
+
+  // TODO(wittjosiah): Use ViewState or similar.
+  return (
+    <DensityProvider density='fine'>
+      {panelState.activeView === 'current space' ? <CurrentSpaceView {...props} /> : null}
+    </DensityProvider>
+  );
+};

package/src/panels/SpacePanel/index.ts

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

package/src/panels/index.ts

@@ -2,5 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './DevicesPanel';
 export * from './IdentityPanel';
 export * from './JoinPanel';
+export * from './SpacePanel';

package/src/styles/dialogStyles.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const defaultOverlay =
+  'fixed inset-0 backdrop-blur z-50 overflow-auto grid place-items-center p-2 md:p-4 lg:p-8';
+
+export const defaultDialogContent = 'is-full min-is-[260px] max-is-[320px] rounded-md shadow-md backdrop-blur-md';

package/src/styles/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './dialogStyles';
 export * from './panelStyles';
 export * from './invitationStatusStyles';

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

@@ -8,7 +8,9 @@ export const os = {
   'sidebar label': 'DXOS sidebar',
   'copy invitation code label': 'Copy',
   'open share panel label': 'Share',
-  'join space heading': '<small>Joining</small><large>{{spaceTitle}}</large>',
+  'joining heading': '<small>Joining</small><large>{{name}}</large>',
+  'join space heading': 'Join a space',
+  'halo heading': 'Initialize device identity',
   'exit label': 'Exit',
   'identity selector title': 'Join as',
   'identity radio group title': 'Select an identity you’ve associated with this device already',
@@ -16,6 +18,7 @@ export const os = {
   'continue label': 'Continue',
   'back label': 'Back',
   'next label': 'Next',
+  'close label': 'Close',
   'auth choices label': 'Choose an identity',
   'create identity label': 'Create an identity',
   'create identity description': 'Create a new identity.',
@@ -45,6 +48,14 @@ export const os = {
   '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'
+  'auth code input label': 'Auth code provided by the invitation sender',
+  'invitation input label': 'Paste an invitation code or URL',
+  'create space invitation label': 'Invite',
+  'qr label': 'Scan to accept invitation',
+  'empty invitations message': 'No pending invitations',
+  'show all spaces label': 'All spaces',
+  'all spaces label': 'All spaces',
+  'create space label': 'Create a new space',
+  'join space label': 'Join a space',
+  'show current space label': 'Current space'
 };