@dxos/react-ui 0.1.41-next.adfd7c6 → 0.3.3-main.3ce60d4

package/src/components/InvitationList/InvitationList.tsx

@@ -1,33 +0,0 @@
-//
-// 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, DensityProvider, mx, useTranslation } from '@dxos/react-components';
-
-import { ClipboardProvider } from '../Clipboard';
-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'>
-      <DensityProvider density='fine'>
-        <ClipboardProvider>
-          {invitations.map((invitation) => {
-            const value = invitation.get().invitationId;
-            return <InvitationListItem key={value} value={value} invitation={invitation} {...invitationProps} />;
-          })}
-        </ClipboardProvider>
-      </DensityProvider>
-    </AccordionRoot>
-  ) : (
-    <p className={mx(defaultDescription, 'text-center p-2')}>{t('empty invitations message')}</p>
-  );
-};

package/src/components/InvitationList/InvitationListContainer.tsx

@@ -1,27 +0,0 @@
-//
-// 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) => {
-      void invitation.cancel();
-    },
-    [space]
-  );
-  return <InvitationList invitations={invitations} {...{ onClickRemove, createInvitationUrl }} />;
-};

package/src/components/InvitationList/InvitationListItem.tsx

@@ -1,91 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-import { ProhibitInset, QrCode, X } from '@phosphor-icons/react';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-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 { CopyButton } from '../Clipboard';
-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, authCode } = useInvitationStatus(invitation);
-  const statusValue = invitationStatusValue.get(status) ?? 0;
-
-  const isCancellable = statusValue < 5 && statusValue >= 0;
-  const showShare = statusValue < 3 && statusValue >= 0;
-  const showAuthCode = statusValue === 3;
-
-  const handleClickRemove = useCallback(() => onClickRemove(invitation), [invitation, onClickRemove]);
-
-  const invitationUrl = invitationCode && createInvitationUrl(invitationCode);
-
-  return (
-    <AccordionPrimitive.Item value={value}>
-      <AccordionPrimitive.Header className='flex gap-2 items-center'>
-        <InvitationStatusAvatar {...{ status, haltedAt, size: 8, invitationId: invitation?.get().invitationId }} />
-        {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>
-            <CopyButton value={invitationUrl} />
-          </>
-        ) : showAuthCode ? (
-          <p className='grow text-xl text-center text-success-500 dark:text-success-300 font-mono'>{authCode}</p>
-        ) : (
-          <span role='none' className='grow' />
-        )}
-        {isCancellable ? (
-          <Button variant='ghost' 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' 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

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

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

@@ -1,52 +0,0 @@
-//
-// 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

@@ -1,91 +0,0 @@
-//
-// 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';
-import { InvitationEmoji } from '../InvitationEmoji';
-
-export interface InvitationStatusAvatarSlots {
-  svg?: ComponentPropsWithoutRef<'svg'>;
-}
-
-export interface InvitationStatusAvatarProps {
-  size?: Size;
-  status: Invitation.State;
-  haltedAt?: Invitation.State;
-  slots?: InvitationStatusAvatarSlots;
-  invitationId?: string;
-}
-
-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 = {},
-  invitationId
-}: 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 (
-    <div className='inline-block relative'>
-      <InvitationEmoji {...{ invitationId }} size='sm' className='absolute inset-0 text-base' />
-      <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>
-    </div>
-  );
-};

package/src/components/InvitationList/index.ts

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

package/src/components/PanelSeparator/PanelSeparator.tsx

@@ -1,17 +0,0 @@
-//
-// 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

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

package/src/components/SpaceList/SpaceListItem.tsx

@@ -1,32 +0,0 @@
-//
-// 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 mbe-2', 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

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

package/src/composites/DevicesDialog/DevicesDialog.tsx

@@ -1,39 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { Close } from '@radix-ui/react-dialog';
-import React from 'react';
-
-import { ThemeContext, useId, useThemeContext } 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');
-  const themeContextValue = useThemeContext();
-
-  return (
-    <PanelDialog
-      {...{
-        slots: { ...slots, root: { onOpenChange: (open) => open || devicesDialogProps.onDone?.(), ...slots?.root } },
-        titleId
-      }}
-    >
-      <ThemeContext.Provider value={{ ...themeContextValue, themeVariant: 'os' }}>
-        <DevicesPanel
-          {...{
-            ...devicesDialogProps,
-            titleId,
-            doneActionParent: <Close asChild />
-          }}
-        />
-      </ThemeContext.Provider>
-    </PanelDialog>
-  );
-};

package/src/composites/DevicesDialog/index.ts

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

package/src/composites/IdentityPopover/IdentityPopover.tsx

@@ -1,54 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { ComponentProps } from 'react';
-
-import { Identity } from '@dxos/client';
-import { Avatar, mx } from '@dxos/react-components';
-
-import { PanelPopover } from '../../layouts';
-import { IdentityPanel } from '../../panels';
-
-export interface IdentityPopoverProps extends Partial<ComponentProps<typeof PanelPopover>> {
-  identity: Identity;
-  onClickManageProfile?: () => void;
-}
-
-export const IdentityPopover = ({
-  identity,
-  openTrigger,
-  slots,
-  triggerIsInToolbar = true,
-  onClickManageProfile,
-  ...popoverProps
-}: IdentityPopoverProps) => {
-  return (
-    <PanelPopover
-      {...popoverProps}
-      openTrigger={
-        openTrigger ?? (
-          <Avatar
-            size={10}
-            variant='circle'
-            fallbackValue={identity.identityKey.toHex()}
-            label={identity.profile?.displayName ?? ''}
-          />
-        )
-      }
-      slots={{
-        ...slots,
-        trigger: {
-          ...slots?.trigger,
-          className: mx(
-            'flex justify-self-end pointer-events-auto bg-white dark:bg-neutral-700 p-0.5 button-elevation rounded-full',
-            slots?.trigger?.className
-          )
-        }
-      }}
-      triggerIsInToolbar={triggerIsInToolbar}
-    >
-      <IdentityPanel {...{ identity, onClickManageProfile }} />
-    </PanelPopover>
-  );
-};

package/src/composites/IdentityPopover/index.ts

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

package/src/composites/JoinDialog/JoinDialog.stories.tsx

@@ -1,74 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import '@dxosTheme';
-
-import { StoryContext, StoryFn } from '@storybook/react';
-import React, { useCallback, useMemo, useState } from 'react';
-
-import { Client, Invitation, InvitationEncoder } from '@dxos/client';
-import { TestBuilder } from '@dxos/client-services/testing';
-import { log } from '@dxos/log';
-import { useAsyncEffect } from '@dxos/react-async';
-import { ClientProvider } from '@dxos/react-client';
-import { Loading } from '@dxos/react-components';
-
-import { JoinDialog } from './JoinDialog';
-
-export default {
-  component: JoinDialog
-};
-
-const JoinClientDecorator = (Story: StoryFn, { args }: StoryContext) => {
-  const n = 2;
-  const testBuilder = new TestBuilder();
-  const clients = useMemo(() => {
-    return [...Array(n)].map(() => new Client({ services: testBuilder.createLocal() }));
-  }, []);
-
-  const [invitationCode, setInvitationCode] = useState<string>();
-
-  const onInvitationEvent = useCallback((invitation: Invitation) => {
-    if (!invitationCode) {
-      const nextInvitationCode = InvitationEncoder.encode(invitation);
-      log.info('[next invitation code]', { nextInvitationCode });
-      setInvitationCode(nextInvitationCode);
-    }
-    if (invitation.authCode) {
-      log.info('[verification code]', invitation.authCode);
-    }
-  }, []);
-
-  useAsyncEffect(async () => {
-    await Promise.all(clients.map((client) => client.initialize()));
-    log.info('[initialized]');
-
-    await clients[0].halo.createIdentity({ displayName: 'Os Mutantes' });
-
-    const space = await clients[0].createSpace();
-    log.info('[space created]', space);
-    space.properties.name = 'Q3 2022 Planning';
-
-    const invitation = space.createInvitation({ type: Invitation.Type.INTERACTIVE });
-    invitation.subscribe(onInvitationEvent, (err) => log.catch(err));
-
-    return () => {
-      void Promise.all(clients.map((client) => client.destroy()));
-    };
-  }, clients);
-
-  if (!invitationCode) {
-    return <Loading label='Setting things up…' />;
-  }
-
-  return (
-    <ClientProvider client={clients[1]} fallback={() => <Loading label='Loading client…' />}>
-      <Story args={{ initialInvitationCode: invitationCode, ...args }} />
-    </ClientProvider>
-  );
-};
-
-export const Default = {
-  decorators: [JoinClientDecorator]
-};

package/src/composites/JoinDialog/JoinDialog.tsx

@@ -1,35 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { Action, Cancel } from '@radix-ui/react-alert-dialog';
-import React from 'react';
-
-import { ThemeContext, useId, useThemeContext } from '@dxos/react-components';
-
-import { PanelAlertDialog, PanelAlertDialogProps } from '../../layouts';
-import { JoinPanel, JoinPanelProps } from '../../panels';
-
-export interface JoinDialogProps
-  extends Omit<PanelAlertDialogProps, 'titleId' | 'children'>,
-    Omit<JoinPanelProps, 'exitActionParent' | 'doneActionParent'> {}
-
-export const JoinDialog = ({ slots, ...joinPanelProps }: JoinDialogProps) => {
-  const titleId = useId('joinDialog__title');
-  const themeContextValue = useThemeContext();
-
-  return (
-    <PanelAlertDialog {...{ slots, titleId }}>
-      <ThemeContext.Provider value={{ ...themeContextValue, themeVariant: 'os' }}>
-        <JoinPanel
-          {...{
-            ...joinPanelProps,
-            titleId,
-            exitActionParent: <Cancel asChild />,
-            doneActionParent: <Action asChild />
-          }}
-        />
-      </ThemeContext.Provider>
-    </PanelAlertDialog>
-  );
-};