@dxos/react-ui 0.1.23 → 0.1.24-next.6b1f434

package/src/components/IdentityList/DeviceList.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { DeviceInfo } from '@dxos/protocols/proto/dxos/halo/credentials/identity';
+
+import { IdentityListItem } from './IdentityListItem';
+
+export interface DeviceListProps {
+  devices: DeviceInfo[];
+  onSelect?: (device: DeviceInfo) => void;
+}
+
+export const DeviceList = ({ devices, onSelect }: DeviceListProps) => {
+  return (
+    <ul className='flex flex-col gap-2'>
+      {devices.map((device) => {
+        const identity = { identityKey: device.publicKey, displayName: device.displayName };
+        return (
+          <IdentityListItem
+            key={device.publicKey.toHex()}
+            identity={identity}
+            onClick={onSelect && (() => onSelect(device))}
+          />
+        );
+      })}
+    </ul>
+  );
+};

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

@@ -4,17 +4,30 @@
 import React from 'react';
 
 import { Profile, SpaceMember } from '@dxos/client';
-import { Avatar, useTranslation } from '@dxos/react-components';
+import { Avatar, mx, useTranslation } from '@dxos/react-components';
 
-export const IdentityListItem = ({ identity, presence }: { identity: Profile; presence?: SpaceMember['presence'] }) => {
+export const IdentityListItem = ({
+  identity,
+  presence,
+  onClick
+}: {
+  identity: Profile;
+  presence?: SpaceMember['presence'];
+  onClick?: () => void;
+}) => {
   const { t } = useTranslation('os');
   return (
-    <li className='flex gap-2'>
+    <li
+      className={mx('flex gap-2 items-center', onClick && 'cursor-pointer')}
+      onClick={() => onClick?.()}
+      data-testid='identity-list-item'
+    >
       <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 +37,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,33 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import type { SpaceMember } from '@dxos/client';
+
+import { IdentityListItem } from './IdentityListItem';
+
+export interface SpaceMemberListProps {
+  members: SpaceMember[];
+  onSelect?: (member: SpaceMember) => void;
+}
+
+export const SpaceMemberList = ({ members, onSelect }: SpaceMemberListProps) => {
+  return (
+    <ul className='flex flex-col gap-2'>
+      {members
+        .filter((member) => member.profile)
+        .map((member) => {
+          return (
+            <IdentityListItem
+              key={member.identityKey.toHex()}
+              identity={member.profile!}
+              presence={member.presence}
+              onClick={onSelect && (() => onSelect(member))}
+            />
+          );
+        })}
+    </ul>
+  );
+};

package/src/components/IdentityList/SpaceMemberListContainer.tsx

@@ -0,0 +1,28 @@
+//
+// Copyright 2023 DXOS.org
+//
+import React, { useMemo } from 'react';
+
+import { PublicKey } from '@dxos/keys';
+import { SpaceMember, useClient, useMembers } from '@dxos/react-client';
+
+import { SpaceMemberList } from './SpaceMemberList';
+
+export interface SpaceMemberListContainerProps {
+  spaceKey: PublicKey;
+  includeSelf?: boolean;
+  onSelect?: (member: SpaceMember) => void;
+}
+
+export const SpaceMemberListContainer = ({ spaceKey, includeSelf, onSelect }: SpaceMemberListContainerProps) => {
+  const client = useClient();
+  const allUnsortedMembers = useMembers(spaceKey);
+  const members = 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 members={members} onSelect={onSelect} />;
+};

package/src/components/IdentityList/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './DeviceList';
+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,28 @@
+//
+// Copyright 2023 DXOS.org
+//
+import { Root as AccordionRoot } from '@radix-ui/react-accordion';
+import React from 'react';
+
+import type { CancellableInvitationObservable } from '@dxos/client';
+import { defaultDescription, mx, useTranslation } from '@dxos/react-components';
+
+import { InvitationListItem, InvitationListItemProps } from './InvitationListItem';
+
+export interface InvitationListProps extends Omit<InvitationListItemProps, 'invitation' | 'value'> {
+  invitations: CancellableInvitationObservable[];
+}
+
+export const InvitationList = ({ invitations, ...invitationProps }: InvitationListProps) => {
+  const { t } = useTranslation('os');
+  return invitations.length ? (
+    <AccordionRoot type='single' collapsible className='flex flex-col gap-1'>
+      {invitations.map((invitation, index) => {
+        const value = invitation.invitation?.invitationId ?? `inv_${index}`;
+        return <InvitationListItem key={value} value={value} invitation={invitation} {...invitationProps} />;
+      })}
+    </AccordionRoot>
+  ) : (
+    <p className={mx(defaultDescription, 'text-center p-2')}>{t('empty invitations message')}</p>
+  );
+};

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,106 @@
+//
+// 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, useId, 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 qrLabel = useId('qrLabel');
+
+  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 showAuthCode = 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, size: 8 }} />
+        {showShare && invitationUrl ? (
+          <>
+            <AccordionPrimitive.Trigger asChild>
+              <Button className='grow flex gap-1' data-testid='show-qrcode'>
+                <span>{t('open share panel label')}</span>
+                <QrCode className={getSize(4)} weight='bold' />
+              </Button>
+            </AccordionPrimitive.Trigger>
+            <Button className='flex gap-1' onClick={handleClickCopy} data-testid='copy-invitation'>
+              <span className='pli-1'>{t('copy invitation code label')}</span>
+              <Copy className={getSize(4)} weight='bold' />
+            </Button>
+          </>
+        ) : showAuthCode ? (
+          <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} data-testid='cancel-invitation'>
+            <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}
+            data-testid='remove-invitation'
+          >
+            <span className='sr-only'>{t('remove invitation label')}</span>
+            <X className={getSize(4)} weight='bold' />
+          </Button>
+        )}
+      </AccordionPrimitive.Header>
+      {showShare && invitationUrl && (
+        <AccordionPrimitive.Content className='flex gap-2 is-full radix-state-open:p-1 items-center'>
+          <QRCodeSVG
+            bgColor='transparent'
+            fgColor='currentColor'
+            value={invitationUrl}
+            className={mx('grow-[2] aspect-square is-24 bs-auto')}
+            aria-labelledby={qrLabel}
+          />
+          <span className='pli-1 flex-1 font-system-normal text-sm text-center' id={qrLabel}>
+            {t('qr label')}
+          </span>
+        </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,80 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { ComponentPropsWithoutRef } from 'react';
+
+import { Invitation } from '@dxos/client';
+import { getSize, mx, Size } from '@dxos/react-components';
+
+import { inactiveStrokeColor, activeStrokeColor, resolvedStrokeColor } from '../../styles';
+import { invitationStatusValue } from '../../util';
+
+export interface InvitationStatusAvatarSlots {
+  svg?: ComponentPropsWithoutRef<'svg'>;
+}
+
+export interface InvitationStatusAvatarProps {
+  size?: Size;
+  status: Invitation.State;
+  haltedAt?: Invitation.State;
+  slots?: InvitationStatusAvatarSlots;
+}
+
+const svgSize = 32;
+const strokeWidth = 5;
+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,
+  strokeDasharray: `${segment - gap} ${2 * segment + gap}`
+};
+
+export const InvitationStatusAvatar = ({ size = 10, status, haltedAt, slots = {} }: 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 {...slots.svg} viewBox={`0 0 ${svgSize} ${svgSize}`} className={mx(getSize(size), slots.svg?.className)}>
+      {[...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/SpaceList/SpaceListItem.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { ForwardedRef, forwardRef } from 'react';
+
+import type { Space } from '@dxos/client';
+import { Avatar, mx } from '@dxos/react-components';
+import { humanize } from '@dxos/util';
+
+export const SpaceListItem = forwardRef(
+  ({ space, onClick }: { space: Space; onClick?: () => void }, ref: ForwardedRef<HTMLLIElement>) => {
+    return (
+      <li
+        className={mx('flex gap-2 items-center', onClick && 'cursor-pointer')}
+        onClick={() => onClick?.()}
+        ref={ref}
+        data-testid='space-list-item'
+      >
+        <Avatar
+          {...{
+            variant: 'circle',
+            size: 9,
+            fallbackValue: space.key.toHex(),
+            label: <p className='text-sm truncate'>{space.properties.name ?? humanize(space.key)}</p>,
+            slots: { labels: { className: 'block shrink overflow-hidden' }, root: { className: 'shrink-0' } }
+          }}
+        />
+      </li>
+    );
+  }
+);

package/src/components/SpaceList/index.ts

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

package/src/components/index.ts

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

package/src/composites/DevicesDialog/DevicesDialog.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Close } from '@radix-ui/react-dialog';
+import React from 'react';
+
+import { ThemeContext, useId } from '@dxos/react-components';
+
+import { PanelDialog, PanelDialogProps } from '../../layouts';
+import { DevicesPanel, DevicesPanelProps } from '../../panels';
+
+export interface DevicesDialogProps
+  extends Omit<PanelDialogProps, 'titleId' | 'children'>,
+    Omit<DevicesPanelProps, 'doneActionParent'> {}
+
+export const DevicesDialog = ({ slots, ...devicesDialogProps }: DevicesDialogProps) => {
+  const titleId = useId('spaceDialog__title');
+
+  return (
+    <PanelDialog
+      {...{
+        slots: { ...slots, root: { onOpenChange: (open) => open || devicesDialogProps.onDone?.(), ...slots?.root } },
+        titleId
+      }}
+    >
+      <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+        <DevicesPanel
+          {...{
+            ...devicesDialogProps,
+            titleId,
+            doneActionParent: <Close asChild />
+          }}
+        />
+      </ThemeContext.Provider>
+    </PanelDialog>
+  );
+};

package/src/composites/DevicesDialog/index.ts

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