@dxos/react-ui 0.1.24 → 0.1.25-next.3c6b542

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.createProfile();
+      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,174 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretLeft, CaretRight, Intersect, PlusCircle, UserPlus } from 'phosphor-react';
+import React, { cloneElement, useReducer } from 'react';
+
+import { Space, SpaceMember } from '@dxos/client';
+import { useClient, useSpaceInvitations, useSpaces } from '@dxos/react-client';
+import { Button, getSize, mx, Tooltip, useTranslation } from '@dxos/react-components';
+
+import { InvitationList, PanelSeparator, SpaceListItem, SpaceMemberListContainer } from '../../components';
+import { defaultSurface, subduedSurface } from '../../styles';
+
+export type SpacePanelProps = {
+  titleId?: string;
+  space?: Space;
+  initialState?: SpaceView;
+  createInvitationUrl: (invitationCode: string) => string;
+  onClickJoinSpace?: () => void;
+  onClickMember?: (member: SpaceMember) => void;
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+  onDone?: (result: Space | null) => void;
+};
+
+export type SpaceView = 'current space' | 'space list';
+
+export type SpaceState = {
+  activeView: SpaceView;
+};
+
+const CurrentSpaceView = ({
+  space,
+  createInvitationUrl,
+  onClickMember,
+  onShowAll,
+  titleId
+}: { onShowAll: () => void } & 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')}>
+        <Tooltip content={t('show all spaces label')} zIndex='z-50'>
+          <Button compact variant='ghost' onClick={onShowAll} data-testid='show-all-spaces'>
+            <CaretLeft className={getSize(4)} weight='bold' />
+          </Button>
+        </Tooltip>
+        {/* 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'
+          compact
+          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 onSelect={onClickMember} />
+      </div>
+    </div>
+  );
+};
+
+const SpaceListView = ({
+  doneActionParent,
+  onDone,
+  onClickJoinSpace,
+  onShowCurrent,
+  titleId
+}: { onShowCurrent: () => void } & SpacePanelProps) => {
+  const { t } = useTranslation('os');
+  const client = useClient();
+  const spaces = useSpaces();
+
+  const handleCreateSpace = async () => {
+    const space = await client.echo.createSpace();
+    onDone?.(space);
+  };
+
+  return (
+    <div role='none' className='flex flex-col'>
+      <div role='none' className={mx(subduedSurface, 'rounded-bs-md flex items-center p-2 gap-2')}>
+        <h2 id={titleId} className='grow font-system-medium'>
+          {t('all spaces label')}
+        </h2>
+        <Tooltip content={t('show current space label')} zIndex='z-50'>
+          <Button compact variant='ghost' onClick={onShowCurrent} data-testid='show-current-space'>
+            <CaretRight className={getSize(4)} weight='bold' />
+          </Button>
+        </Tooltip>
+      </div>
+      <div role='region' className={mx(defaultSurface, 'rounded-be-md p-2')}>
+        <ul className='flex flex-col gap-2'>
+          {spaces.map((space) => {
+            const key = space.key.toHex();
+            const listItem = <SpaceListItem key={key} space={space} onClick={() => onDone?.(space)} />;
+            return doneActionParent ? cloneElement(doneActionParent, { key }, listItem) : listItem;
+          })}
+        </ul>
+        <Button className='is-full flex gap-2 mbs-2' compact onClick={handleCreateSpace} data-testid='create-space'>
+          <span>{t('create space label')}</span>
+          <PlusCircle className={getSize(4)} weight='bold' />
+        </Button>
+        {onClickJoinSpace && (
+          <Button
+            className='is-full flex gap-2 mbs-2'
+            compact
+            onClick={() => onClickJoinSpace?.()}
+            data-testid='join-space'
+          >
+            <span>{t('join space label')}</span>
+            <Intersect className={getSize(4)} weight='bold' />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface SpacePanelState {
+  activeView: SpaceView;
+}
+
+interface SpacePanelAction {
+  type: 'deselect space' | 'select space';
+}
+
+export const SpacePanel = (props: SpacePanelProps) => {
+  const reducer = (state: SpacePanelState, action: SpacePanelAction) => {
+    const nextState = { ...state };
+    switch (action.type) {
+      case 'deselect space':
+        nextState.activeView = 'space list';
+        break;
+      case 'select space':
+        nextState.activeView = 'current space';
+        break;
+    }
+    return nextState;
+  };
+
+  const [panelState, dispatch] = useReducer(reducer, {
+    activeView: props.initialState ?? 'current space'
+  });
+
+  // TODO(wittjosiah): Use ViewState or similar.
+  return (
+    <>
+      {panelState.activeView === 'current space' ? (
+        <CurrentSpaceView {...props} onShowAll={() => dispatch({ type: 'deselect space' })} />
+      ) : (
+        <SpaceListView {...props} onShowCurrent={() => dispatch({ type: 'select space' })} />
+      )}
+    </>
+  );
+};

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'
 };