@dxos/shell 0.3.11-main.1caa3af

package/src/components/AuthCode.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+export type AuthCodeProps = ThemedClassName<ComponentPropsWithoutRef<'span'>> & {
+  code?: string;
+  large?: boolean;
+};
+
+export const AuthCode = (props: PropsWithChildren<AuthCodeProps>) => {
+  const { code, large, classNames } = props;
+  const l = code?.length ?? 0;
+  const left = code?.slice(0, l / 2);
+  const right = code?.slice(l / 2);
+  const handleCopy = () => {
+    void navigator.clipboard.writeText(code ?? '');
+  };
+  return (
+    <span
+      className={mx(
+        large ? 'text-6xl' : 'text-2xl',
+        'font-mono pli-2.5 flex gap-1.5 rounded cursor-pointer',
+        classNames,
+      )}
+      onClick={handleCopy}
+    >
+      <span>{left}</span>
+      <span>{right}</span>
+    </span>
+  );
+};

package/src/components/Clipboard/ClipboardProvider.tsx

@@ -0,0 +1,26 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { createContext, type PropsWithChildren, useCallback, useContext, useState } from 'react';
+
+export type ClipboardContextValue = {
+  textValue: string;
+  setTextValue: (nextValue: string) => Promise<void>;
+};
+
+export const ClipboardContext = createContext<ClipboardContextValue>({
+  textValue: '',
+  setTextValue: async (_) => {},
+});
+
+export const useClipboardContext = () => useContext(ClipboardContext);
+
+export const ClipboardProvider = ({ children }: PropsWithChildren<{}>) => {
+  const [textValue, setInternalTextValue] = useState('');
+  const setTextValue = useCallback(async (nextValue: string) => {
+    await navigator.clipboard.writeText(nextValue);
+    return setInternalTextValue(nextValue);
+  }, []);
+  return <ClipboardContext.Provider value={{ textValue, setTextValue }}>{children}</ClipboardContext.Provider>;
+};

package/src/components/Clipboard/CopyButton.tsx

@@ -0,0 +1,70 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Check, Copy, type IconProps } from '@phosphor-icons/react';
+import React, { useState } from 'react';
+
+import { Button, type ButtonProps, Tooltip, useTranslation } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { useClipboardContext } from './ClipboardProvider';
+
+export type CopyButtonProps = ButtonProps & {
+  value: string;
+  iconProps?: IconProps;
+};
+
+const inactiveLabelStyles = 'invisible bs-px -mbe-px overflow-hidden';
+
+export const CopyButton = ({ value, classNames, iconProps, ...props }: CopyButtonProps) => {
+  const { t } = useTranslation('os');
+  const { textValue, setTextValue } = useClipboardContext();
+  const isCopied = textValue === value;
+  return (
+    <Button
+      {...props}
+      classNames={['inline-flex flex-col justify-center', classNames]}
+      onClick={() => setTextValue(value)}
+      data-testid='copy-invitation'
+    >
+      <div role='none' className={mx('flex gap-1 items-center', isCopied && inactiveLabelStyles)}>
+        <span className='pli-1'>{t('copy invitation code label')}</span>
+        <Copy className={getSize(4)} weight='bold' {...iconProps} />
+      </div>
+      <div role='none' className={mx('flex gap-1 items-center', !isCopied && inactiveLabelStyles)}>
+        <span className='pli-1'>{t('copy invitation code success label')}</span>
+        <Check className={getSize(4)} weight='bold' {...iconProps} />
+      </div>
+    </Button>
+  );
+};
+
+export const CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }: CopyButtonProps) => {
+  const { t } = useTranslation('os');
+  const { textValue, setTextValue } = useClipboardContext();
+  const isCopied = textValue === value;
+  const label = isCopied ? t('copy invitation code success label') : t('copy invitation code label');
+  const [open, setOpen] = useState(false);
+  return (
+    <Tooltip.Root delayDuration={1500} open={open} onOpenChange={setOpen}>
+      <Tooltip.Portal>
+        <Tooltip.Content side='bottom' sideOffset={12} classNames='z-30'>
+          <span>{label}</span>
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+      <Tooltip.Trigger
+        aria-label={label}
+        {...props}
+        onClick={() => setTextValue(value).then(() => setOpen(true))}
+        data-testid='copy-invitation'
+        asChild
+      >
+        <Button variant={variant} classNames={['inline-flex flex-col justify-center', classNames]}>
+          <Copy className={getSize(5)} weight='bold' {...iconProps} />
+        </Button>
+      </Tooltip.Trigger>
+    </Tooltip.Root>
+  );
+};

package/src/components/Clipboard/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './CopyButton';
+export * from './ClipboardProvider';

package/src/components/CompoundButton/CompoundButton.stories.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { ArrowRight, ClockCounterClockwise } from '@phosphor-icons/react';
+import React, { type PropsWithChildren } from 'react';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import { CompoundButton, type CompoundButtonProps } from './CompoundButton';
+
+export default {
+  title: 'react-shell/CompoundButton',
+  component: CompoundButton,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
+};
+
+const Container = ({ children }: PropsWithChildren<{}>) => <div className='flex gap-4'>{children}</div>;
+
+export const Default = {
+  render: (args: Omit<CompoundButtonProps, 'ref'>) => (
+    <Container>
+      <CompoundButton {...args} />
+      <CompoundButton {...args} disabled />
+    </Container>
+  ),
+  args: {
+    children: 'Hello',
+    description: 'This is a compound button',
+    before: <ClockCounterClockwise className='w-5 h-5' />,
+    after: <ArrowRight className='w-5 h-5' />,
+    disabled: false,
+  },
+};
+
+export const Primary = {
+  ...Default,
+  args: {
+    children: 'Hello',
+    description: 'This is a compound button',
+    before: <ClockCounterClockwise className='w-5 h-5' />,
+    after: <ArrowRight className='w-5 h-5' />,
+    disabled: false,
+    variant: 'primary',
+  },
+};

package/src/components/CompoundButton/CompoundButton.tsx

@@ -0,0 +1,89 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import React, { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+
+import { useId, useThemeContext, type ButtonProps, useElevationContext } from '@dxos/react-ui';
+import { descriptionText, descriptionTextPrimary, mx } from '@dxos/react-ui-theme';
+
+export interface CompoundButtonSlots {
+  root: ComponentPropsWithoutRef<'button'>;
+  middle: ComponentPropsWithoutRef<'div'>;
+  label: ComponentPropsWithoutRef<'p'>;
+  description: ComponentPropsWithoutRef<'p'>;
+}
+
+export interface CompoundButtonProps extends ButtonProps {
+  children?: ReactNode;
+  description?: ReactNode;
+  before?: ReactNode;
+  after?: ReactNode;
+  slots?: Partial<CompoundButtonSlots>;
+}
+
+export const CompoundButton = ({
+  children,
+  description,
+  before,
+  after,
+  variant = 'default',
+  elevation: propsElevation,
+  slots = {},
+  ...buttonProps
+}: Omit<CompoundButtonProps, 'density'>) => {
+  const labelId = useId('compoundButton-label');
+  const descriptionId = useId('compoundButton-description');
+  const { tx } = useThemeContext();
+  const elevation = useElevationContext(propsElevation);
+  const styleProps = { ...buttonProps, variant, elevation, textWrap: true };
+  const buttonClassName = tx(
+    'button.root',
+    'button button--compound',
+    styleProps,
+    'flex items-center gap-4 plb-2.5',
+    slots.root?.className,
+  );
+  return (
+    <button
+      {...buttonProps}
+      {...slots.root}
+      className={buttonClassName}
+      aria-labelledby={labelId}
+      {...(description && { 'aria-describedby': descriptionId })}
+    >
+      {before && (
+        <div role='none' className='grow-0'>
+          {before}
+        </div>
+      )}
+      <div
+        role='none'
+        {...slots.middle}
+        className={mx('grow whitespace-normal flex flex-col gap-1 text-left', slots.middle?.className)}
+      >
+        <p {...slots.label} id={labelId} className={mx(slots.label?.className)}>
+          {children}
+        </p>
+        {description && (
+          <p
+            id={descriptionId}
+            {...slots.description}
+            className={mx(
+              'text-xs mbe-1 font-normal',
+              variant === 'primary' ? descriptionTextPrimary : descriptionText,
+              slots.description?.className,
+            )}
+          >
+            {description}
+          </p>
+        )}
+      </div>
+      {after && (
+        <div role='none' className='grow-0'>
+          {after}
+        </div>
+      )}
+    </button>
+  );
+};

package/src/components/CompoundButton/index.ts

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

package/src/components/IdentityList/DeviceList.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type Device } from '@dxos/react-client/halo';
+import { List, useTranslation } from '@dxos/react-ui';
+import { descriptionText, mx } from '@dxos/react-ui-theme';
+
+import { IdentityListItem } from './IdentityListItem';
+
+export interface DeviceListProps {
+  devices: Device[];
+  onSelect?: (device: Device) => void;
+}
+
+export const DeviceList = ({ devices, onSelect }: DeviceListProps) => {
+  const { t } = useTranslation('os');
+  return devices.length > 0 ? (
+    <List classNames='flex flex-col gap-2'>
+      {devices.map((device) => {
+        const identity = {
+          identityKey: device.deviceKey,
+          profile: {
+            displayName: `${device.profile?.platform} (${device.profile?.platformVersion}) on ${device.profile?.os} (${
+              device.profile?.osVersion
+            }) ${device.profile?.architecture ?? 'Unknown'}-bit`,
+          },
+        };
+        return (
+          <IdentityListItem
+            key={device.deviceKey.toHex()}
+            identity={identity}
+            onClick={onSelect && (() => onSelect(device))}
+          />
+        );
+      })}
+    </List>
+  ) : (
+    <div role='none' className='grow flex items-center p-2'>
+      <p className={mx(descriptionText, 'text-center is-full')}>{t('empty device list message')}</p>
+    </div>
+  );
+};

package/src/components/IdentityList/IdentityListItem.tsx

@@ -0,0 +1,42 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+
+import { generateName } from '@dxos/display-name';
+import { SpaceMember } from '@dxos/react-client/echo';
+import { type Identity } from '@dxos/react-client/halo';
+import { ListItem, Avatar, useJdenticonHref, useId } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+type IdentityListItemProps = {
+  identity: Identity;
+  presence?: SpaceMember['presence'];
+  onClick?: () => void;
+};
+
+export const IdentityListItem = forwardRef<HTMLLIElement, IdentityListItemProps>(
+  ({ identity, presence, onClick }: IdentityListItemProps, forwardedRef) => {
+    const fallbackValue = identity.identityKey.toHex();
+    const labelId = useId('identityListItem__label');
+    const jdenticon = useJdenticonHref(fallbackValue ?? '', 12);
+    const displayName = identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
+    return (
+      <ListItem.Root
+        classNames={mx('flex gap-2 pis-3 pie-1 items-center', onClick && 'cursor-pointer')}
+        onClick={() => onClick?.()}
+        data-testid='identity-list-item'
+        labelId={labelId}
+        ref={forwardedRef}
+      >
+        <Avatar.Root status={presence === SpaceMember.PresenceState.ONLINE ? 'active' : 'inactive'} labelId={labelId}>
+          <Avatar.Frame>
+            <Avatar.Fallback href={jdenticon} />
+          </Avatar.Frame>
+          <Avatar.Label classNames='text-sm truncate pli-2'>{displayName}</Avatar.Label>
+        </Avatar.Root>
+      </ListItem.Root>
+    );
+  },
+);

package/src/components/IdentityList/SpaceMemberList.stories.tsx

@@ -0,0 +1,24 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import { SpaceMemberListImpl } from './SpaceMemberList';
+import { alice } from '../../testing';
+
+export default {
+  title: 'react-shell/SpaceMemberList',
+  component: SpaceMemberListImpl,
+  actions: { argTypesRegex: '^on.*' },
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
+};
+
+export const Default = (props: any) => {
+  return <SpaceMemberListImpl {...props} members={[alice]} />;
+};

package/src/components/IdentityList/SpaceMemberList.tsx

@@ -0,0 +1,65 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { type PublicKey, useClient } from '@dxos/react-client';
+import type { SpaceMember } from '@dxos/react-client/echo';
+import { useMembers } from '@dxos/react-client/echo';
+import { useTranslation, List } from '@dxos/react-ui';
+import { descriptionText, mx } from '@dxos/react-ui-theme';
+
+import { IdentityListItem } from './IdentityListItem';
+
+// TODO(burdon): Consolidate into single component?
+
+export interface SpaceMemberListImplProps {
+  members: SpaceMember[];
+  onSelect?: (member: SpaceMember) => void;
+}
+
+export interface SpaceMemberListProps extends Partial<SpaceMemberListImplProps> {
+  spaceKey: PublicKey;
+  includeSelf?: boolean;
+}
+
+export const SpaceMemberList = ({ spaceKey, includeSelf, onSelect }: SpaceMemberListProps) => {
+  const client = useClient();
+  const allUnsortedMembers = useMembers(spaceKey);
+  const members = useMemo(
+    () =>
+      includeSelf
+        ? allUnsortedMembers.sort((member) =>
+            member.identity.identityKey.equals(client.halo.identity.get()!.identityKey) ? -1 : 1,
+          )
+        : allUnsortedMembers.filter(
+            (member) => !member.identity.identityKey.equals(client.halo.identity.get()!.identityKey),
+          ),
+    [allUnsortedMembers],
+  );
+  return <SpaceMemberListImpl members={members} onSelect={onSelect} />;
+};
+
+export const SpaceMemberListImpl = ({ members, onSelect }: SpaceMemberListImplProps) => {
+  const { t } = useTranslation('os');
+  const visibleMembers = members.filter((member) => member.identity);
+  return visibleMembers.length > 0 ? (
+    <List classNames='flex flex-col gap-2'>
+      {visibleMembers.map((member) => {
+        return (
+          <IdentityListItem
+            key={member.identity.identityKey.toHex()}
+            identity={member.identity}
+            presence={member.presence}
+            onClick={onSelect && (() => onSelect(member))}
+          />
+        );
+      })}
+    </List>
+  ) : (
+    <div role='none' className='grow flex items-center p-2'>
+      <p className={mx(descriptionText, 'text-center is-full mlb-2')}>{t('empty space members message')}</p>
+    </div>
+  );
+};

package/src/components/IdentityList/index.ts

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

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

@@ -0,0 +1,44 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { Invitation } from '@dxos/react-client/invitations';
+import { Tooltip } from '@dxos/react-ui';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { InvitationList } from './InvitationList';
+import { inviteWithState } from '../../testing';
+
+export default {
+  title: 'react-shell/InvitationList',
+  component: InvitationList,
+  decorators: [withTheme],
+  actions: { argTypesRegex: '^on.*' },
+  parameters: { chromatic: { disableSnapshot: false } },
+};
+
+export const Default = () => {
+  return (
+    <Tooltip.Provider>
+      <InvitationList
+        invitations={[
+          inviteWithState(Invitation.State.INIT),
+          inviteWithState(Invitation.State.CONNECTING),
+          inviteWithState(Invitation.State.CONNECTED),
+          inviteWithState(Invitation.State.READY_FOR_AUTHENTICATION),
+          inviteWithState(Invitation.State.AUTHENTICATING),
+          inviteWithState(Invitation.State.SUCCESS),
+          inviteWithState(Invitation.State.TIMEOUT),
+          inviteWithState(Invitation.State.ERROR),
+          inviteWithState(Invitation.State.CANCELLED),
+        ]}
+        send={() => {}}
+        createInvitationUrl={(invite) => invite}
+      />
+    </Tooltip.Provider>
+  );
+};

package/src/components/InvitationList/InvitationList.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2023 DXOS.org
+//
+import React from 'react';
+
+import type { CancellableInvitationObservable } from '@dxos/react-client/invitations';
+import { List } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { InvitationListItem, type InvitationListItemProps } from './InvitationListItem';
+import { type SharedInvitationListProps } from './InvitationListProps';
+
+export interface InvitationListProps
+  extends Omit<InvitationListItemProps, 'invitation' | 'value'>,
+    Pick<SharedInvitationListProps, 'send'> {
+  invitations: CancellableInvitationObservable[];
+  InvitationListItem?: React.ComponentType<InvitationListItemProps>;
+  className?: string;
+}
+
+export const InvitationList = ({ invitations, send, ...invitationProps }: InvitationListProps) => {
+  const { className, InvitationListItem: Item = InvitationListItem } = invitationProps;
+  return (
+    <List classNames={mx('flex flex-col gap-2', className)}>
+      {invitations.map((invitation) => {
+        const value = invitation.get().invitationId;
+        return <Item key={value} send={send} invitation={invitation} {...invitationProps} />;
+      })}
+    </List>
+  );
+};

package/src/components/InvitationList/InvitationListContainer.tsx

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