@dxos/react-ui 0.1.23 → 0.1.24

package/dist/types/src/translations/locales/en-US.d.ts

@@ -2,5 +2,46 @@ export declare const os: {
     'manage profile label': string;
     'identity offline description': string;
     'sidebar label': string;
+    'copy invitation code label': string;
+    'open share panel label': string;
+    'join space heading': string;
+    'exit label': string;
+    'identity selector title': string;
+    'identity radio group title': string;
+    'add identity label': string;
+    'continue label': string;
+    'back label': string;
+    'next label': string;
+    'auth choices label': string;
+    'create identity label': string;
+    'create identity description': string;
+    'recover identity label': string;
+    'recover identity description': string;
+    'join identity label': string;
+    'join identity description': string;
+    'deselect identity label': string;
+    'addition method selector title': string;
+    'new identity input label': string;
+    'recover identity input label': string;
+    'failed to create identity message': string;
+    'failed to recover identity message': string;
+    'failed to authenticate message': string;
+    'identity added label': string;
+    'join space as identity heading': string;
+    'error status label': string;
+    'timeout status label': string;
+    'cancelled status label': string;
+    'init status label': string;
+    'connecting status label': string;
+    'connected status label': string;
+    'authenticating status label': string;
+    'success status label': string;
+    'connect label': string;
+    'reconnect label': string;
+    'cancel label': string;
+    'done label': string;
+    'reset label': string;
+    'pin input label': string;
+    'invitation input label': string;
 };
 //# sourceMappingURL=en-US.d.ts.map

package/dist/types/src/translations/locales/en-US.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en-US.d.ts","sourceRoot":"","sources":["../../../../../src/translations/locales/en-US.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,EAAE;;;;CAId,CAAC"}
+{"version":3,"file":"en-US.d.ts","sourceRoot":"","sources":["../../../../../src/translations/locales/en-US.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6Cd,CAAC"}

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

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

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

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

package/dist/types/src/util/invitationStatusValue.d.ts

@@ -0,0 +1,8 @@
+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 declare const invitationStatusValue: Map<Invitation.State, number>;
+//# sourceMappingURL=invitationStatusValue.d.ts.map

package/dist/types/src/util/invitationStatusValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"invitationStatusValue.d.ts","sourceRoot":"","sources":["../../../../src/util/invitationStatusValue.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,+BAShC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "description": "A React component library for DXOS’s OS experiences",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,20 +10,25 @@
   "types": "dist/types/src/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "src",
+    "theme-extensions.js"
   ],
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.0.1",
+    "@radix-ui/react-alert-dialog": "^1.0.2",
     "@radix-ui/react-dialog": "^1.0.0",
+    "@radix-ui/react-radio-group": "^1.1.1",
     "@react-hook/async": "^3.1.1",
     "debug": "^4.3.3",
+    "qrcode.react": "^3.1.0",
     "url-join": "^5.0.0",
-    "@dxos/client": "0.1.23",
-    "@dxos/config": "0.1.23",
-    "@dxos/debug": "0.1.23",
-    "@dxos/keys": "0.1.23",
-    "@dxos/react-client": "0.1.23",
-    "@dxos/react-components": "0.1.23",
-    "@dxos/util": "0.1.23"
+    "@dxos/client": "0.1.24",
+    "@dxos/config": "0.1.24",
+    "@dxos/debug": "0.1.24",
+    "@dxos/keys": "0.1.24",
+    "@dxos/react-client": "0.1.24",
+    "@dxos/react-components": "0.1.24",
+    "@dxos/util": "0.1.24"
   },
   "devDependencies": {
     "@types/debug": "^4.1.7",
@@ -33,8 +38,10 @@
     "phosphor-react": "^1.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook-dark-mode": "^1.1.2",
-    "vite": "4.0.4"
+    "vite": "4.0.4",
+    "@dxos/async": "0.1.24",
+    "@dxos/log": "0.1.24",
+    "@dxos/react-async": "0.1.24"
   },
   "peerDependencies": {
     "phosphor-react": "^1.4.1",

package/src/components/{IdentityListItem → IdentityList}/IdentityListItem.tsx

@@ -9,12 +9,13 @@ import { Avatar, useTranslation } from '@dxos/react-components';
 export const IdentityListItem = ({ identity, presence }: { identity: Profile; presence?: SpaceMember['presence'] }) => {
   const { t } = useTranslation('os');
   return (
-    <li className='flex gap-2'>
+    <li className='flex gap-2 items-center'>
       <Avatar
         {...{
+          variant: 'circle',
           size: 9,
           fallbackValue: identity.identityKey.toHex(),
-          label: <p className='text-sm'>{identity.displayName ?? identity.identityKey.truncate()}</p>,
+          label: <p className='text-sm truncate'>{identity.displayName ?? identity.identityKey.truncate()}</p>,
           ...(presence === SpaceMember.PresenceState.OFFLINE && {
             status: 'inactive',
             description: (
@@ -24,7 +25,7 @@ export const IdentityListItem = ({ identity, presence }: { identity: Profile; pr
             )
           }),
           ...(presence === SpaceMember.PresenceState.ONLINE && { status: 'active' }),
-          slots: { labels: { className: 'block' } }
+          slots: { labels: { className: 'block shrink overflow-hidden' }, root: { className: 'shrink-0' } }
         }}
       />
     </li>

package/src/components/IdentityList/SpaceMemberList.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import type { SpaceMember } from '@dxos/client';
+
+import { IdentityListItem } from './IdentityListItem';
+
+export interface SpaceMemberListProps {
+  spaceMembers: SpaceMember[];
+}
+
+export const SpaceMemberList = ({ spaceMembers }: SpaceMemberListProps) => {
+  return (
+    <ul className='flex flex-col gap-2'>
+      {spaceMembers
+        .filter((spaceMember) => spaceMember.profile)
+        .map((spaceMember) => {
+          return (
+            <IdentityListItem
+              key={spaceMember.identityKey.toHex()}
+              identity={spaceMember.profile!}
+              presence={spaceMember.presence}
+            />
+          );
+        })}
+    </ul>
+  );
+};

package/src/components/IdentityList/SpaceMemberListContainer.tsx

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 DXOS.org
+//
+import React, { useMemo } from 'react';
+
+import { PublicKey } from '@dxos/keys';
+import { useClient, useMembers } from '@dxos/react-client';
+
+import { SpaceMemberList } from './SpaceMemberList';
+
+export interface SpaceMemberListContainerProps {
+  spaceKey: PublicKey;
+  includeSelf?: boolean;
+}
+
+export const SpaceMemberListContainer = ({ spaceKey, includeSelf }: SpaceMemberListContainerProps) => {
+  const client = useClient();
+  const allUnsortedMembers = useMembers(spaceKey);
+  const spaceMembers = useMemo(
+    () =>
+      includeSelf
+        ? allUnsortedMembers.sort((a) => (a.identityKey.equals(client.halo.profile!.identityKey) ? -1 : 1))
+        : allUnsortedMembers.filter((member) => !member.identityKey.equals(client.halo.profile!.identityKey)),
+    [allUnsortedMembers]
+  );
+  return <SpaceMemberList spaceMembers={spaceMembers} />;
+};

package/src/components/IdentityList/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './IdentityListItem';
+export * from './SpaceMemberList';
+export * from './SpaceMemberListContainer';

package/src/components/InvitationList/InvitationList.stories.tsx

@@ -0,0 +1,65 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { StoryFn } from '@storybook/react';
+import React, { useMemo, useState } from 'react';
+
+import { CancellableInvitationObservable, Client, Invitation } from '@dxos/client';
+import { TestBuilder } from '@dxos/client/testing';
+import { log } from '@dxos/log';
+import { useAsyncEffect } from '@dxos/react-async';
+import { ClientProvider } from '@dxos/react-client';
+import { Loading, mx, ThemeContext } from '@dxos/react-components';
+
+import { defaultSurface } from '../../styles';
+import { InvitationList } from './InvitationList';
+
+export default {
+  component: InvitationList
+};
+
+export const Default = {
+  decorators: [
+    (Story: StoryFn) => {
+      const testBuilder = new TestBuilder();
+      const clients = useMemo(() => {
+        return [...Array(1)].map(() => new Client({ services: testBuilder.createClientServicesHost() }));
+      }, []);
+
+      const [invitations, setInvitations] = useState<CancellableInvitationObservable[]>([]);
+
+      useAsyncEffect(async () => {
+        await Promise.all(clients.map((client) => client.initialize()));
+        log.info('[initialized]');
+
+        await clients[0].halo.createProfile({ displayName: 'Os Mutantes' });
+
+        const space = await clients[0].echo.createSpace();
+        log.info('[space created]', space);
+        space.properties.name = 'Q3 2022 Planning';
+        log.info('[space title set]', space?.properties.name);
+
+        setInvitations([...Array(4)].map(() => space.createInvitation({ type: Invitation.Type.INTERACTIVE })));
+
+        log.info('[invitations created]');
+
+        return () => {
+          void Promise.all(clients.map((client) => client.destroy()));
+        };
+      }, clients);
+
+      return (
+        <ClientProvider client={clients[0]} fallback={() => <Loading label='Loading client…' />}>
+          <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+            <div className={mx(defaultSurface, 'max-is-xs mli-auto rounded-md p-2 backdrop-blur-md')}>
+              <Story args={{ invitations, createInvitationUrl: (code: string) => code }} />
+            </div>
+          </ThemeContext.Provider>
+        </ClientProvider>
+      );
+    }
+  ]
+};

package/src/components/InvitationList/InvitationList.tsx

@@ -0,0 +1,24 @@
+//
+// Copyright 2023 DXOS.org
+//
+import { Root as AccordionRoot } from '@radix-ui/react-accordion';
+import React from 'react';
+
+import type { CancellableInvitationObservable } from '@dxos/client';
+
+import { InvitationListItem, InvitationListItemProps } from './InvitationListItem';
+
+export interface InvitationListProps extends Omit<InvitationListItemProps, 'invitation' | 'value'> {
+  invitations: CancellableInvitationObservable[];
+}
+
+export const InvitationList = ({ invitations, ...invitationProps }: InvitationListProps) => {
+  return (
+    <AccordionRoot type='single' collapsible>
+      {invitations.map((invitation, index) => {
+        const value = invitation.invitation?.invitationId ?? `inv_${index}`;
+        return <InvitationListItem key={value} value={value} invitation={invitation} {...invitationProps} />;
+      })}
+    </AccordionRoot>
+  );
+};

package/src/components/InvitationList/InvitationListContainer.tsx

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 DXOS.org
+//
+import React, { useCallback } from 'react';
+
+import type { CancellableInvitationObservable } from '@dxos/client';
+import { PublicKey } from '@dxos/keys';
+import { useSpace, useSpaceInvitations } from '@dxos/react-client';
+
+import { InvitationList } from './InvitationList';
+import { SharedInvitationListProps } from './InvitationListProps';
+
+export interface InvitationListContainerProps extends SharedInvitationListProps {
+  spaceKey: PublicKey;
+}
+
+export const InvitationListContainer = ({ spaceKey, createInvitationUrl }: InvitationListContainerProps) => {
+  const space = useSpace(spaceKey);
+  const invitations = useSpaceInvitations(spaceKey);
+  const onClickRemove = useCallback(
+    ({ invitation }: CancellableInvitationObservable) => {
+      invitation?.invitationId && space?.removeInvitation(invitation.invitationId);
+    },
+    [space]
+  );
+  return <InvitationList invitations={invitations} {...{ onClickRemove, createInvitationUrl }} />;
+};

package/src/components/InvitationList/InvitationListItem.tsx

@@ -0,0 +1,95 @@
+//
+// Copyright 2023 DXOS.org
+//
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { Copy, ProhibitInset, QrCode, X } from 'phosphor-react';
+import { QRCodeSVG } from 'qrcode.react';
+import React, { useCallback } from 'react';
+
+import { CancellableInvitationObservable } from '@dxos/client';
+import { useInvitationStatus } from '@dxos/react-client';
+import { Button, getSize, mx, useTranslation } from '@dxos/react-components';
+
+import { invitationStatusValue } from '../../util';
+import { SharedInvitationListProps } from './InvitationListProps';
+import { InvitationStatusAvatar } from './InvitationStatusAvatar';
+
+export interface InvitationListItemProps extends SharedInvitationListProps {
+  invitation: CancellableInvitationObservable;
+  value: string;
+  onClickRemove: (invitation: CancellableInvitationObservable) => void;
+}
+
+export const InvitationListItem = ({
+  invitation,
+  value,
+  onClickRemove,
+  createInvitationUrl
+}: InvitationListItemProps) => {
+  const { t } = useTranslation('os');
+
+  const { cancel, status, haltedAt, invitationCode, authenticationCode } = useInvitationStatus(invitation);
+  const statusValue = invitationStatusValue.get(status) ?? 0;
+
+  const isCancellable = statusValue < 4 && statusValue >= 0;
+  const showShare = statusValue < 3 && statusValue >= 0;
+  const showPin = statusValue === 3;
+
+  const handleClickRemove = useCallback(() => onClickRemove(invitation), [invitation, onClickRemove]);
+
+  const invitationUrl = invitationCode && createInvitationUrl(invitationCode);
+  const handleCLickCopy = useCallback(() => {
+    if (invitationUrl) {
+      void navigator.clipboard.writeText(invitationUrl);
+    }
+  }, [invitationUrl]);
+
+  return (
+    <AccordionPrimitive.Item value={value}>
+      <AccordionPrimitive.Header className='flex gap-2 items-center'>
+        <InvitationStatusAvatar {...{ status, haltedAt }} />
+        {showShare && invitationUrl ? (
+          <AccordionPrimitive.Trigger asChild>
+            <Button className='grow flex gap-1'>
+              <span>{t('open share panel label')}</span>
+              <QrCode className={getSize(4)} weight='bold' />
+            </Button>
+          </AccordionPrimitive.Trigger>
+        ) : showPin ? (
+          <p className='grow text-xl text-center text-success-500 dark:text-success-300 font-mono'>
+            {authenticationCode}
+          </p>
+        ) : (
+          <span role='none' className='grow' />
+        )}
+        {isCancellable ? (
+          <Button variant='ghost' compact className='flex gap-1' onClick={cancel}>
+            <span className='sr-only'>{t('cancel invitation label')}</span>
+            <ProhibitInset className={getSize(4)} weight='bold' />
+          </Button>
+        ) : (
+          <Button variant='ghost' compact className='flex gap-1' onClick={handleClickRemove}>
+            <span className='sr-only'>{t('remove invitation label')}</span>
+            <X className={getSize(4)} weight='bold' />
+          </Button>
+        )}
+      </AccordionPrimitive.Header>
+      {showShare && invitationUrl && (
+        <AccordionPrimitive.Content>
+          <Button className='flex gap-2 is-full p-2' onClick={handleCLickCopy}>
+            <QRCodeSVG
+              bgColor='transparent'
+              fgColor='currentColor'
+              value={invitationUrl}
+              className={mx('grow aspect-square is-24 bs-auto')}
+            />
+            <span className='pli-1'>
+              {t('copy invitation code label')}
+              <Copy className={mx(getSize(4), 'inline mis-1')} weight='bold' />
+            </span>
+          </Button>
+        </AccordionPrimitive.Content>
+      )}
+    </AccordionPrimitive.Item>
+  );
+};

package/src/components/InvitationList/InvitationListProps.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export interface SharedInvitationListProps {
+  createInvitationUrl: (invitationCode: string) => string;
+}

package/src/components/InvitationList/InvitationStatusAvatar.stories.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2023 DXOS.org
+//
+import { StoryFn } from '@storybook/react';
+import React from 'react';
+
+import { Invitation } from '@dxos/client';
+import { mx, ThemeContext } from '@dxos/react-components';
+
+import { defaultSurface } from '../../styles';
+import { InvitationStatusAvatar } from './InvitationStatusAvatar';
+
+const haltedAts = [null, Invitation.State.CONNECTED, Invitation.State.AUTHENTICATING, Invitation.State.SUCCESS];
+
+const statuses = [
+  Invitation.State.INIT,
+  Invitation.State.CONNECTING,
+  Invitation.State.CONNECTED,
+  Invitation.State.AUTHENTICATING,
+  Invitation.State.SUCCESS,
+  Invitation.State.CANCELLED,
+  Invitation.State.TIMEOUT,
+  Invitation.State.ERROR
+];
+
+export default {
+  component: InvitationStatusAvatar
+};
+
+export const Default = {
+  decorators: [
+    (Story: StoryFn) => {
+      return (
+        <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+          <div
+            className={mx(defaultSurface, 'max-is-md mli-auto rounded-md p-2 backdrop-blur-md flex flex-wrap gap-4')}
+          >
+            {haltedAts.map((haltedAt) => (
+              <>
+                {statuses.map((status) => {
+                  return (
+                    <Story key={`${status}__${haltedAt}`} args={{ status, ...(haltedAt !== null && { haltedAt }) }} />
+                  );
+                })}
+              </>
+            ))}
+          </div>
+        </ThemeContext.Provider>
+      );
+    }
+  ]
+};

package/src/components/InvitationList/InvitationStatusAvatar.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { ComponentPropsWithoutRef } from 'react';
+
+import { Invitation } from '@dxos/client';
+import { getSize, Size } from '@dxos/react-components';
+
+import { inactiveStrokeColor, activeStrokeColor, resolvedStrokeColor } from '../../styles';
+import { invitationStatusValue } from '../../util';
+
+export interface InvitationStatusAvatarProps {
+  size?: Size;
+  status: Invitation.State;
+  haltedAt?: Invitation.State;
+}
+
+const svgSize = 32;
+const strokeWidth = 4;
+const radius = (svgSize - strokeWidth) / 2;
+const circumference = Math.PI * 2 * radius;
+const gap = circumference / 12;
+const nSegments = 3;
+const segment = circumference / nSegments;
+const baseOffset = (2 * circumference) / 3 - (segment - gap) / 2;
+
+const circleProps: ComponentPropsWithoutRef<'circle'> = {
+  fill: 'none',
+  strokeLinecap: 'round',
+  cx: svgSize / 2,
+  cy: svgSize / 2,
+  r: radius,
+  strokeWidth: 4,
+  strokeDasharray: `${segment - gap} ${2 * segment + gap}`
+};
+
+export const InvitationStatusAvatar = ({ size = 10, status, haltedAt }: InvitationStatusAvatarProps) => {
+  const resolvedColor = resolvedStrokeColor(status);
+  const halted =
+    status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT || status === Invitation.State.ERROR;
+  const cursor = invitationStatusValue.get(halted ? haltedAt! : status)!;
+  return (
+    <svg viewBox={`0 0 ${svgSize} ${svgSize}`} className={getSize(size)}>
+      {[...Array(nSegments)].map((_, index) => (
+        <circle
+          key={index}
+          {...circleProps}
+          strokeDashoffset={index * segment + baseOffset}
+          className={
+            index === 0
+              ? cursor === 1
+                ? halted
+                  ? resolvedColor
+                  : activeStrokeColor
+                : cursor > 1
+                ? resolvedColor
+                : inactiveStrokeColor
+              : index === 1
+              ? cursor === 3
+                ? halted
+                  ? resolvedColor
+                  : activeStrokeColor
+                : cursor > 3
+                ? resolvedColor
+                : inactiveStrokeColor
+              : cursor > 3
+              ? resolvedColor
+              : inactiveStrokeColor
+          }
+        />
+      ))}
+    </svg>
+  );
+};

package/src/components/InvitationList/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './InvitationStatusAvatar';
+export * from './InvitationListItem';
+export * from './InvitationListContainer';
+export * from './InvitationList';

package/src/components/PanelSeparator/PanelSeparator.tsx

@@ -0,0 +1,17 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { ComponentProps } from 'react';
+
+import { mx } from '@dxos/react-components';
+
+export const PanelSeparator = ({ className, ...props }: ComponentProps<'span'>) => {
+  return (
+    <span
+      role='none'
+      {...props}
+      className={mx('block bs-px mlb-1 bg-neutral-800/10 dark:bg-neutral-200/10', className)}
+    />
+  );
+};

package/src/components/PanelSeparator/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './IdentityList';
+export * from './InvitationList';
+export * from './PanelSeparator';