@dxos/shell 0.3.11-main.1caa3af

package/src/components/InvitationList/InvitationListItem.tsx

@@ -0,0 +1,183 @@
+//
+// Copyright 2023 DXOS.org
+//
+import { X } from '@phosphor-icons/react';
+import React, { useCallback } from 'react';
+
+import {
+  type CancellableInvitationObservable,
+  Invitation,
+  type InvitationStatus,
+  useInvitationStatus,
+} from '@dxos/react-client/invitations';
+import {
+  Button,
+  ListItem,
+  useTranslation,
+  Avatar,
+  useThemeContext,
+  type AvatarRootProps,
+  Tooltip,
+} from '@dxos/react-ui';
+import { focusRing, getSize, mx } from '@dxos/react-ui-theme';
+
+import { type SharedInvitationListProps } from './InvitationListProps';
+import { toEmoji } from '../../util';
+import { AuthCode } from '../AuthCode';
+import { CopyButtonIconOnly } from '../Clipboard';
+
+export interface InvitationListItemProps extends SharedInvitationListProps {
+  invitation: CancellableInvitationObservable;
+  onClickRemove?: (invitation: CancellableInvitationObservable) => void;
+}
+
+export interface InvitationListItemImplProps extends InvitationListItemProps {
+  invitationStatus: InvitationStatus;
+}
+
+export const InvitationListItem = (props: InvitationListItemProps) => {
+  const { invitation } = props;
+  const invitationStatus = useInvitationStatus(invitation);
+  return <InvitationListItemImpl {...props} invitationStatus={invitationStatus} />;
+};
+
+const avatarProps: Pick<AvatarRootProps, 'size' | 'variant'> = { size: 10, variant: 'circle' };
+
+const AvatarStackEffect = ({ animation, status }: Pick<AvatarRootProps, 'status' | 'animation'>) => {
+  const { tx } = useThemeContext();
+  return (
+    <>
+      <span
+        role='none'
+        className={mx('absolute inline-start-1 inline-end-auto opacity-20', getSize(avatarProps.size!))}
+      >
+        <span
+          role='none'
+          className={tx('avatar.ring', 'avatar__ring', { ...avatarProps, status, animation })}
+          style={{ animationDelay: '400ms' }}
+        />
+      </span>
+      <span
+        role='none'
+        className={mx('absolute inline-start-2 inline-end-auto opacity-50', getSize(avatarProps.size!))}
+      >
+        <span
+          role='none'
+          className={tx('avatar.ring', 'avatar__ring', { ...avatarProps, status, animation })}
+          style={{ animationDelay: '200ms' }}
+        />
+      </span>
+    </>
+  );
+};
+
+export const InvitationListItemImpl = ({
+  invitation,
+  invitationStatus: propsInvitationStatus,
+  send,
+  onClickRemove,
+  createInvitationUrl,
+}: InvitationListItemImplProps) => {
+  const { t } = useTranslation('os');
+  const { cancel, status: invitationStatus, invitationCode, authCode, type } = propsInvitationStatus;
+
+  const isCancellable = !(
+    [Invitation.State.ERROR, Invitation.State.TIMEOUT, Invitation.State.CANCELLED].indexOf(invitationStatus) >= 0
+  );
+
+  const showShare =
+    type === Invitation.Type.MULTIUSE ||
+    [Invitation.State.INIT, Invitation.State.CONNECTING, Invitation.State.CONNECTED].indexOf(invitationStatus) >= 0;
+
+  const showAuthCode = invitationStatus === Invitation.State.READY_FOR_AUTHENTICATION;
+
+  const handleClickRemove = useCallback(() => onClickRemove?.(invitation), [invitation, onClickRemove]);
+
+  const invitationUrl = invitationCode && createInvitationUrl(invitationCode);
+  const invitationId = invitation?.get().invitationId;
+
+  const avatarAnimation = [
+    Invitation.State.INIT,
+    Invitation.State.CONNECTING,
+    Invitation.State.CONNECTED,
+    Invitation.State.READY_FOR_AUTHENTICATION,
+    Invitation.State.AUTHENTICATING,
+  ].includes(invitationStatus)
+    ? 'pulse'
+    : 'none';
+
+  const avatarError = [Invitation.State.ERROR, Invitation.State.TIMEOUT, Invitation.State.CANCELLED].includes(
+    invitationStatus,
+  );
+
+  const avatarGreen = [
+    Invitation.State.CONNECTED,
+    Invitation.State.READY_FOR_AUTHENTICATION,
+    Invitation.State.AUTHENTICATING,
+    Invitation.State.SUCCESS,
+  ].includes(invitationStatus);
+
+  const avatarStatus = avatarError ? 'error' : avatarGreen ? 'active' : 'inactive';
+
+  return (
+    <ListItem.Root id={invitationCode} classNames='flex gap-2 pis-3 pie-1 items-center relative'>
+      <ListItem.Heading classNames='sr-only'>
+        {t(type === Invitation.Type.MULTIUSE ? 'invite many list item label' : 'invite one list item label')}
+      </ListItem.Heading>
+      {type === Invitation.Type.MULTIUSE && <AvatarStackEffect status={avatarStatus} animation={avatarAnimation} />}
+      <Tooltip.Root>
+        <Avatar.Root {...avatarProps} animation={avatarAnimation} status={avatarStatus}>
+          <Tooltip.Trigger asChild>
+            <Avatar.Frame tabIndex={0} classNames={[focusRing, 'relative rounded-full']}>
+              <Avatar.Fallback text={toEmoji(invitationId)} />
+            </Avatar.Frame>
+          </Tooltip.Trigger>
+        </Avatar.Root>
+        <Tooltip.Portal>
+          <Tooltip.Content side='left' classNames='z-[70]'>
+            {t(type === Invitation.Type.MULTIUSE ? 'invite many qr label' : 'invite one qr label')}
+            <Tooltip.Arrow />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+      {showShare && invitationUrl ? (
+        <>
+          <Button
+            variant='ghost'
+            classNames='grow justify-start font-medium'
+            onClick={() => send({ type: 'selectInvitation', invitation })}
+            data-testid='show-qrcode'
+          >
+            <span>{t('open share panel label')}</span>
+          </Button>
+          <CopyButtonIconOnly variant='ghost' value={invitationUrl} />
+        </>
+      ) : showAuthCode ? (
+        <AuthCode code={authCode} classNames='grow' />
+      ) : invitationStatus === Invitation.State.CONNECTING ? (
+        <span className='pli-2 grow text-neutral-500'>Connecting...</span>
+      ) : invitationStatus === Invitation.State.AUTHENTICATING ? (
+        <span className='pli-2 grow text-neutral-500'>Authenticating...</span>
+      ) : invitationStatus === Invitation.State.ERROR || invitationStatus === Invitation.State.TIMEOUT ? (
+        <span className='pli-2 grow text-neutral-500'>Failed</span>
+      ) : invitationStatus === Invitation.State.CANCELLED ? (
+        <span className='pli-2 grow text-neutral-500'>Cancelled</span>
+      ) : invitationStatus === Invitation.State.SUCCESS ? (
+        <span className='pli-2 grow truncate'>User joined</span>
+      ) : (
+        <span className='grow'> </span>
+      )}
+      {isCancellable ? (
+        <Button variant='ghost' classNames='flex gap-1' onClick={cancel} data-testid='cancel-invitation'>
+          <span className='sr-only'>{t('cancel invitation label')}</span>
+          <X className={getSize(5)} weight='bold' />
+        </Button>
+      ) : (
+        <Button variant='ghost' classNames='flex gap-1' onClick={handleClickRemove} data-testid='remove-invitation'>
+          <span className='sr-only'>{t('remove invitation label')}</span>
+          <X className={getSize(5)} weight='bold' />
+        </Button>
+      )}
+    </ListItem.Root>
+  );
+};

package/src/components/InvitationList/InvitationListProps.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+import { type CancellableInvitationObservable } from '@dxos/react-client/invitations';
+
+export interface SharedInvitationListProps {
+  createInvitationUrl: (invitationCode: string) => string;
+  send: (event: { type: 'selectInvitation'; invitation: CancellableInvitationObservable }) => void;
+}

package/src/components/InvitationList/index.ts

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

package/src/components/Panel/Action.tsx

@@ -0,0 +1,142 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretDown, Check, type IconProps, Placeholder } from '@phosphor-icons/react';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, { type Dispatch, type FC, forwardRef, type SetStateAction } from 'react';
+
+import { type ButtonProps, Button, type ComponentFragment, DropdownMenu, useTranslation } from '@dxos/react-ui';
+import { descriptionText, getSize, mx } from '@dxos/react-ui-theme';
+
+export type LargeButtonProps = ButtonProps & {
+  isFull?: boolean;
+};
+
+export type ActionMenuItem = {
+  label: string;
+  description: string;
+  icon: FC<IconProps>;
+} & Pick<ButtonProps, 'onClick'>;
+
+export type BifurcatedActionProps = {
+  actions: Record<string, ActionMenuItem>;
+  activeAction?: string;
+  onChangeActiveAction?: Dispatch<SetStateAction<string>>;
+  defaultActiveAction?: string;
+} & Omit<LargeButtonProps, 'children' | 'onClick'>;
+
+const buttonColorFragment: ComponentFragment<LargeButtonProps> = (props: LargeButtonProps) => {
+  const resolvedVariant = props.variant ?? 'default';
+  return [
+    !props.disabled
+      ? resolvedVariant === 'default'
+        ? 'bg-neutral-25 hover:bg-white hover:text-primary-500 active:bg-neutral-25 dark:active:bg-neutral-800'
+        : resolvedVariant === 'ghost'
+        ? 'active:bg-neutral-125 dark:active:bg-neutral-800'
+        : resolvedVariant === 'primary'
+        ? 'active:bg-primary-700 dark:active:bg-primary-500'
+        : ''
+      : '',
+  ];
+};
+
+const defaultActions = {
+  noopAction: {
+    label: 'No-op',
+    description: '',
+    icon: Placeholder,
+    onClick: () => {},
+  },
+} as Record<string, ActionMenuItem>;
+
+export const BifurcatedAction = forwardRef<HTMLButtonElement, BifurcatedActionProps>((props, forwardedRef) => {
+  const {
+    classNames,
+    variant,
+    isFull = true,
+    actions = defaultActions,
+    activeAction: propsActiveAction,
+    onChangeActiveAction,
+    defaultActiveAction,
+    ...rest
+  } = props;
+
+  const [activeActionKey = Object.keys(actions)[0], setActiveAction] = useControllableState({
+    prop: propsActiveAction,
+    onChange: onChangeActiveAction,
+    defaultProp: defaultActiveAction,
+  });
+
+  const activeAction = actions[activeActionKey as string] ?? {};
+
+  const { t } = useTranslation('os');
+
+  return (
+    <div role='none' className={mx('mbs-2 flex gap-px items-center', isFull && 'is-full')}>
+      <Button
+        {...rest}
+        classNames={['bs-11 flex-1 min-is-0 flex gap-2 rounded-ie-none', classNames, ...buttonColorFragment(props)]}
+        ref={forwardedRef}
+        variant={variant}
+        onClick={activeAction.onClick}
+      >
+        {activeAction.icon && <activeAction.icon />}
+        <span>{activeAction.label}</span>
+      </Button>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger asChild>
+          <Button classNames={['bs-11 flex-none rounded-is-none', classNames, ...buttonColorFragment(props)]}>
+            <span className='sr-only'>{t('invite options label')}</span>
+            <CaretDown />
+          </Button>
+        </DropdownMenu.Trigger>
+        {/* TODO(thure): Putting `DropdownMenu.Portal` here breaks highlighting and focus. Why? */}
+        <DropdownMenu.Content>
+          <DropdownMenu.Viewport>
+            {Object.entries(actions).map(([id, action]) => {
+              return (
+                <DropdownMenu.CheckboxItem
+                  key={id}
+                  aria-labelledby={`${id}__label`}
+                  aria-describedby={`${id}__description`}
+                  checked={activeActionKey === id}
+                  onCheckedChange={(checked) => checked && setActiveAction(id)}
+                  classNames='gap-2'
+                >
+                  {action.icon && <action.icon className={getSize(5)} />}
+                  <div role='none' className='flex-1 min-is-0 space-b-1'>
+                    <p id={`${id}__label`}>{action.label}</p>
+                    {action.description && (
+                      <p id={`${id}__description`} className={descriptionText}>
+                        {action.description}
+                      </p>
+                    )}
+                  </div>
+                  <DropdownMenu.ItemIndicator asChild>
+                    <Check />
+                  </DropdownMenu.ItemIndicator>
+                </DropdownMenu.CheckboxItem>
+              );
+            })}
+          </DropdownMenu.Viewport>
+          <DropdownMenu.Arrow />
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </div>
+  );
+});
+
+export const Action = forwardRef<HTMLButtonElement, LargeButtonProps>((props, forwardedRef) => {
+  const { children, classNames, variant, isFull = true, ...rest } = props;
+  return (
+    <Button
+      {...rest}
+      classNames={[isFull && 'is-full', 'bs-11 flex gap-2 mbs-2', classNames, ...buttonColorFragment(props)]}
+      ref={forwardedRef}
+      variant={variant}
+    >
+      {children}
+    </Button>
+  );
+});

package/src/components/Panel/Actions.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+type ActionsProps = Omit<ThemedClassName<ComponentPropsWithoutRef<'div'>>, 'children'> & {
+  children: ReactNode | ReactNode[];
+};
+
+const Actions = forwardRef<HTMLDivElement, ActionsProps>(({ classNames, children, ...props }, forwardedRef) => {
+  return (
+    <div
+      {...props}
+      className={mx(
+        'flex flex-col gap-2 mbs-2',
+        Array.isArray(children) && children.length > 1 ? 'justify-between' : 'justify-center',
+        classNames,
+      )}
+      ref={forwardedRef}
+    >
+      {children}
+    </div>
+  );
+});
+
+export { Actions };
+export type { ActionsProps };

package/src/components/Panel/CloseButton.tsx

@@ -0,0 +1,24 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { X } from '@phosphor-icons/react';
+import React from 'react';
+
+import { Button, type ButtonProps, useTranslation } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+export const CloseButton = ({ onDone, ...props }: Omit<ButtonProps, 'onClick'> & { onDone?: () => void }) => {
+  const { t } = useTranslation('os');
+  return (
+    <Button
+      variant='ghost'
+      classNames={mx('plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]')}
+      onClick={() => onDone?.()}
+      {...props}
+    >
+      <X weight='bold' className={getSize(4)} />
+      <span className='sr-only'>{t('exit label')}</span>
+    </Button>
+  );
+};

package/src/components/Panel/Emoji.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { mx, getSize } from '@dxos/react-ui-theme';
+
+export const Emoji = ({ text, className }: { text?: string; className?: string }) => {
+  const size = 14;
+  return (
+    <div role='none' className={mx(getSize(size), 'rounded relative pointer-events-none', className)}>
+      <svg viewBox={`0 0 ${size * 4} ${size * 4}`} width={size * 4} height={size * 4}>
+        <text
+          x='50%'
+          y='50%'
+          textAnchor='middle'
+          dominantBaseline='middle'
+          baselineShift={'-0.25rem'}
+          fontSize={'2.25rem'}
+        >
+          {text}
+        </text>
+      </svg>
+    </div>
+  );
+};
+
+export const Centered = (props: PropsWithChildren) => {
+  const { children } = props;
+  return (
+    <div role='none' className='absolute inset-0 flex items-center justify-center'>
+      {children}
+    </div>
+  );
+};

package/src/components/Panel/Heading.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { forwardRef, type PropsWithChildren, type ReactNode } from 'react';
+
+import { descriptionText, mx } from '@dxos/react-ui-theme';
+
+export type PanelHeadingProps = PropsWithChildren<{
+  titleId: string;
+  title: string;
+  titleSrOnly?: boolean;
+  corner?: ReactNode;
+}>;
+
+export const Heading = forwardRef<HTMLDivElement, PanelHeadingProps>(
+  ({ titleId, title, titleSrOnly, children, corner }, forwardedRef) => {
+    return (
+      <div role='none' className='pbe-2 relative' ref={forwardedRef}>
+        {corner}
+        <h1
+          {...(!titleSrOnly && { id: titleId })}
+          className={mx(descriptionText, 'text-center mlb-2', titleSrOnly && 'invisible')}
+        >
+          {title}
+        </h1>
+        {titleSrOnly && <span id={titleId}>{title}</span>}
+        {children}
+      </div>
+    );
+  },
+);

package/src/components/Panel/Input.tsx

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type ReactNode } from 'react';
+
+import { Input as UiInput, type TextInputProps } from '@dxos/react-ui';
+
+export type LargeInputProps = TextInputProps & {
+  validationMessage?: string;
+  label?: ReactNode;
+  disabled?: boolean;
+  placeholder?: string;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+};
+
+export const Input = ({ validationMessage, label, ...props }: LargeInputProps) => {
+  return (
+    <UiInput.Root>
+      <UiInput.Label>{label}</UiInput.Label>
+      <UiInput.TextInput {...props} classNames='plb-3 mbs-2 text-center' />
+      <UiInput.DescriptionAndValidation>
+        {validationMessage && <UiInput.Validation>{validationMessage}</UiInput.Validation>}
+      </UiInput.DescriptionAndValidation>
+    </UiInput.Root>
+  );
+};

package/src/components/Panel/Label.tsx

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { descriptionText, mx } from '@dxos/react-ui-theme';
+
+export type LabelProps = PropsWithChildren<{}>;
+
+export const Label = (props: LabelProps) => {
+  const { children } = props;
+  return <span className={mx(descriptionText, 'text-center mli-6 whitespace-normal')}>{children}</span>;
+};

package/src/components/Panel/Panel.stories.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import { Action } from './Action';
+import { Actions } from './Actions';
+import { Heading } from './Heading';
+import { Label } from './Label';
+import { StorybookDialog } from '../StorybookDialog';
+
+export default {
+  title: 'react-shell/StorybookDialog',
+  component: StorybookDialog,
+  actions: { argTypesRegex: '^on.*' },
+  decorators: [withTheme],
+};
+
+export const Normal = (props: any) => {
+  return (
+    <StorybookDialog {...props}>
+      <Heading title='Panel heading' titleId='panel-heading'></Heading>
+      <div className='p-3 text-center'>
+        <Label>Lorem ipsum</Label>
+        <Actions>
+          <Action variant='ghost'>Ghost</Action>
+          <Action>Normal</Action>
+        </Actions>
+      </div>
+    </StorybookDialog>
+  );
+};
+
+export const Primary = (props: any) => {
+  return (
+    <StorybookDialog {...props}>
+      <Heading title='Panel heading' titleId='panel-heading'></Heading>
+      <div className='p-3 text-center'>
+        <Label>Lorem ipsum</Label>
+        <Actions>
+          <Action variant='ghost'>Ghost</Action>
+          <Action variant='primary'>Primary</Action>
+        </Actions>
+      </div>
+    </StorybookDialog>
+  );
+};

package/src/components/Panel/StepHeading.tsx

@@ -0,0 +1,17 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { mx } from '@dxos/react-ui-theme';
+
+export const StepHeading = forwardRef<HTMLHeadingElement, ComponentPropsWithRef<'h2'>>(
+  ({ children, className, ...props }, forwardedRef) => {
+    return (
+      <h2 {...props} className={mx('font-normal text-sm mbe-4 mli-1 text-center', className)} ref={forwardedRef}>
+        {children}
+      </h2>
+    );
+  },
+);

package/src/components/Panel/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Action';
+export * from './Actions';
+export * from './CloseButton';
+export * from './Emoji';
+export * from './Heading';
+export * from './Label';
+export * from './Input';
+export * from './StepHeading';

package/src/components/SpaceListItem.tsx

@@ -0,0 +1,35 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type ForwardedRef, forwardRef } from 'react';
+
+import type { Space } from '@dxos/react-client/echo';
+import { Avatar, useId, useJdenticonHref } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { humanize } from '@dxos/util';
+
+export const SpaceListItem = forwardRef(
+  ({ space, onClick }: { space: Space; onClick?: () => void }, ref: ForwardedRef<HTMLLIElement>) => {
+    const fallbackValue = space.key.toHex();
+    const labelId = useId('identityListItem__label');
+    const jdenticon = useJdenticonHref(fallbackValue ?? '', 12);
+    const displayName = space.properties.name ?? humanize(space.key.toHex());
+
+    return (
+      <li
+        className={mx('flex gap-2 items-center mbe-2', onClick && 'cursor-pointer')}
+        onClick={() => onClick?.()}
+        ref={ref}
+        data-testid='space-list-item'
+      >
+        <Avatar.Root labelId={labelId}>
+          <Avatar.Frame>
+            <Avatar.Fallback href={jdenticon} />
+          </Avatar.Frame>
+          <Avatar.Label classNames='text-sm truncate'>{displayName}</Avatar.Label>
+        </Avatar.Root>
+      </li>
+    );
+  },
+);

package/src/components/StorybookDialog.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { ElevationProvider, Tooltip, useThemeContext } from '@dxos/react-ui';
+
+import { ClipboardProvider } from './Clipboard';
+
+export type StorybookDialogProps = PropsWithChildren & {
+  inOverlayLayout?: boolean;
+};
+
+// TODO(burdon): Move out of components.
+export const StorybookDialog = (props: StorybookDialogProps) => {
+  const { inOverlayLayout = false } = props;
+  const { tx } = useThemeContext();
+  return (
+    <Tooltip.Provider>
+      <ElevationProvider elevation='chrome'>
+        <ClipboardProvider>
+          <div
+            role='group'
+            className={tx('dialog.content', 'dialog', { inOverlayLayout }, 'p-1', inOverlayLayout ? 'm-4' : '')}
+          >
+            {props.children}
+          </div>
+        </ClipboardProvider>
+      </ElevationProvider>
+    </Tooltip.Provider>
+  );
+};