@dxos/react-ui 0.1.28 → 0.1.30-next.7c60cd3

package/src/stories/Invitations.stories.tsx

@@ -0,0 +1,165 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+import { faker } from '@faker-js/faker';
+import { Intersect, Laptop, Planet, Plus, PlusCircle, QrCode } from 'phosphor-react';
+import React, { useMemo, useState } from 'react';
+
+import { Space, SpaceProxy, useClient, useIdentity, useSpaces } from '@dxos/react-client';
+import { ClientDecorator } from '@dxos/react-client/testing';
+import { Button, ButtonGroup, getSize, Group } from '@dxos/react-components';
+
+import { IdentityListItem, SpaceListItem } from '../components';
+import { DevicesPanel, JoinPanel, SpacePanel } from '../panels';
+
+export default {
+  title: 'Invitations'
+};
+
+export type PanelType = Space | 'identity' | 'devices' | 'join';
+
+const createInvitationUrl = (invitation: string) => invitation;
+
+const Panel = ({ id, panel, setPanel }: { id: number; panel?: PanelType; setPanel: (panel?: PanelType) => void }) => {
+  const client = useClient();
+  const spaces = useSpaces();
+
+  useMemo(() => {
+    if (panel instanceof SpaceProxy) {
+      (window as any)[`peer${id}space`] = panel;
+    }
+  }, [panel]);
+
+  if (panel instanceof SpaceProxy) {
+    return <SpacePanel space={panel} createInvitationUrl={createInvitationUrl} />;
+  }
+
+  switch (panel) {
+    case 'identity': {
+      return <JoinPanel mode='halo-only' onDone={() => setPanel(undefined)} onExit={() => setPanel(undefined)} />;
+    }
+
+    case 'devices': {
+      return <DevicesPanel createInvitationUrl={createInvitationUrl} onDone={() => setPanel(undefined)} />;
+    }
+
+    case 'join': {
+      return <JoinPanel onDone={() => setPanel(undefined)} onExit={() => setPanel(undefined)} />;
+    }
+
+    default: {
+      // TODO(wittjosiah): Tooltips make playwright (webkit) flakier.
+      const controls = (
+        <ButtonGroup className='mbe-4'>
+          {/* <Tooltip content='Create Space'> */}
+          <Button
+            onClick={() => client.echo.createSpace({ name: faker.animal.bird() })}
+            data-testid='invitations.create-space'
+          >
+            <PlusCircle className={getSize(6)} />
+          </Button>
+          {/* </Tooltip>
+          <Tooltip content='Join Space'> */}
+          <Button onClick={() => setPanel('join')} data-testid='invitations.open-join-space'>
+            <Intersect weight='fill' className={getSize(6)} />
+          </Button>
+          {/* </Tooltip> */}
+        </ButtonGroup>
+      );
+
+      const header = (
+        <div className='flex'>
+          Spaces
+          <span className='grow' />
+          {controls}
+        </div>
+      );
+
+      return (
+        <Group label={{ children: header }}>
+          <ul>
+            {spaces.length > 0 ? (
+              spaces.map((space) => (
+                <SpaceListItem key={space.key.toHex()} space={space} onClick={() => setPanel(space)} />
+              ))
+            ) : (
+              <div className='text-center'>No spaces</div>
+            )}
+          </ul>
+        </Group>
+      );
+    }
+  }
+};
+
+const render = ({ id }: { id: number }) => {
+  const client = useClient();
+  const identity = useIdentity();
+  const [panel, setPanel] = useState<PanelType>();
+
+  useMemo(() => {
+    (window as any)[`peer${id}client`] = client;
+  }, [client]);
+
+  // TODO(wittjosiah): Tooltips make playwright (webkit) flakier.
+  const controls = (
+    <ButtonGroup className='mbe-4'>
+      {/* <Tooltip content='Create Identity'> */}
+      <Button
+        onClick={() => client.halo.createIdentity({ displayName: faker.name.firstName() })}
+        disabled={Boolean(identity)}
+        data-testid='invitations.create-identity'
+      >
+        <Plus className={getSize(6)} />
+      </Button>
+      {/* </Tooltip>
+      <Tooltip content='Join Existing Identity'> */}
+      <Button
+        onClick={() => setPanel('identity')}
+        disabled={panel === 'identity'}
+        data-testid='invitations.open-join-identity'
+      >
+        <QrCode weight='fill' className={getSize(6)} />
+      </Button>
+      {/* </Tooltip>
+      <Tooltip content='Devices'> */}
+      <Button
+        onClick={() => setPanel('devices')}
+        disabled={!identity || panel === 'devices'}
+        data-testid='invitations.open-devices'
+      >
+        <Laptop weight='fill' className={getSize(6)} />
+      </Button>
+      {/* </Tooltip>
+      <Tooltip content='List Spaces'> */}
+      <Button onClick={() => setPanel(undefined)} disabled={!panel} data-testid='invitations.list-spaces'>
+        <Planet weight='fill' className={getSize(6)} />
+      </Button>
+      {/* </Tooltip> */}
+    </ButtonGroup>
+  );
+
+  const header = (
+    <div className='flex' data-testid='invitations.identity-header'>
+      Identity
+      <span className='grow' />
+      {controls}
+    </div>
+  );
+
+  return (
+    <div className='flex flex-col p-4 flex-1 min-w-0' data-testid={`peer-${id}`}>
+      <Group label={{ children: header }} className='mbe-2'>
+        {identity ? <IdentityListItem identity={identity} /> : <div className='text-center'>No identity</div>}
+      </Group>
+      {identity || panel ? <Panel id={id} panel={panel} setPanel={setPanel} /> : null}
+    </div>
+  );
+};
+
+export const Default = {
+  render,
+  decorators: [ClientDecorator({ count: 3 })]
+};

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

@@ -50,6 +50,7 @@ export const os = {
   'reset label': 'Start over',
   'auth code input label': 'Auth code provided by the invitation sender',
   'invitation input label': 'Paste an invitation code or URL',
+  'create device invitation label': 'Invite',
   'create space invitation label': 'Invite',
   'qr label': 'Scan to accept invitation',
   'empty invitations message': 'No pending invitations',
@@ -57,5 +58,9 @@ export const os = {
   'all spaces label': 'All spaces',
   'create space label': 'Create a new space',
   'join space label': 'Join a space',
-  'show current space label': 'Current space'
+  'show current space label': 'Current space',
+  'view space invitations label': 'View space invitations',
+  'toggle sidebar label': 'Open/close sidebar',
+  'open sidebar label': 'Open sidebar',
+  'close sidebar label': 'Close sidebar'
 };

package/dist/types/src/testing/ClientProvider.d.ts

@@ -1,3 +0,0 @@
-import { PropsWithChildren } from 'react';
-export declare const ClientProvider: ({ children }: PropsWithChildren<{}>) => JSX.Element;
-//# sourceMappingURL=ClientProvider.d.ts.map

package/dist/types/src/testing/ClientProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ClientProvider.d.ts","sourceRoot":"","sources":["../../../../src/testing/ClientProvider.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAOjD,eAAO,MAAM,cAAc,iBAAkB,kBAAkB,EAAE,CAAC,gBAMjE,CAAC"}

package/dist/types/src/testing/index.d.ts

@@ -1,2 +0,0 @@
-export * from './ClientProvider';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/testing/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAIA,cAAc,kBAAkB,CAAC"}

package/src/testing/ClientProvider.tsx

@@ -1,18 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import React, { PropsWithChildren } from 'react';
-
-import { Config, Defaults, Dynamics } from '@dxos/config';
-import { ClientProvider as NaturalClientProvider } from '@dxos/react-client';
-
-const configProvider = async () => new Config(await Dynamics(), Defaults());
-
-export const ClientProvider = ({ children }: PropsWithChildren<{}>) => {
-  return (
-    <NaturalClientProvider config={configProvider} fallback={() => <span>Starting client…</span>}>
-      {children}
-    </NaturalClientProvider>
-  );
-};

package/src/testing/index.ts

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