feat(mosaic): Organization Profile and General Panel

.changeset/organization-profile-general.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/components/action-menu/action-menu.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { MosaicProvider } from '../../MosaicProvider';
+import { ActionMenu } from './action-menu';
+
+function renderMenu(actions: Parameters<typeof ActionMenu>[0]['actions']) {
+  return render(
+    <MosaicProvider>
+      <ActionMenu
+        label='Manage passkey'
+        actions={actions}
+      />
+    </MosaicProvider>,
+  );
+}
+
+describe('Mosaic ActionMenu', () => {
+  it('renders nothing when there are no actions', () => {
+    renderMenu([]);
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('names its trigger and runs the action picked from it', async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    renderMenu([
+      { label: 'Rename', icon: 'pen', onClick },
+      { label: 'Remove', color: 'negative', onClick: vi.fn() },
+    ]);
+
+    await user.click(screen.getByRole('button', { name: 'Manage passkey' }));
+    await user.click(await screen.findByRole('menuitem', { name: 'Rename' }));
+
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});

packages/mosaic/src/features/user-profile/user-profile-action-menu.tsx → packages/mosaic/src/components/action-menu/action-menu.tsx

@@ -1,26 +1,23 @@
 import type { Ref } from 'react';
 
-import { Icon } from '../../components/icon';
-import { Menu } from '../../components/menu';
 import type { IconName } from '../../icons/registry';
+import { Icon } from '../icon';
+import { Menu } from '../menu';
 
-export interface UserProfileMenuAction {
+export interface ActionMenuAction {
   label: string;
   color?: 'neutral' | 'negative';
   icon?: IconName;
   onClick: () => void;
 }
 
-export function UserProfileActionMenu({
-  label,
-  actions,
-  triggerRef,
-}: {
+export interface ActionMenuProps {
   label: string;
-  actions: UserProfileMenuAction[];
-  /** The trigger element, for a caller that has to hand focus back to this row. */
+  actions: ActionMenuAction[];
   triggerRef?: Ref<HTMLButtonElement>;
-}) {
+}
+
+export function ActionMenu({ label, actions, triggerRef }: ActionMenuProps) {
   if (actions.length === 0) {
     return null;
   }

packages/mosaic/src/components/action-menu/index.ts

@@ -0,0 +1,2 @@
+export { ActionMenu } from './action-menu';
+export type { ActionMenuAction, ActionMenuProps } from './action-menu';

packages/mosaic/src/components/copy-button/copy-button.styles.ts

@@ -0,0 +1,49 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { colorVars, durationVars, easingVars, radiusVars, space, typeScaleVars } from '../../tokens.stylex';
+
+export const styles = stylex.create({
+  toast: {
+    borderRadius: radiusVars['--cl-radius-md'],
+    gap: space['1'],
+    paddingBlock: space['1'],
+    paddingInline: space['1.5'],
+    alignItems: 'center',
+    backgroundColor: colorVars['--cl-color-foreground'],
+    color: colorVars['--cl-color-background'],
+    // A copy while one is still showing queues behind the `limit`; only the newest is wanted.
+    display: { default: 'flex', ':where([data-limited])': 'none' },
+    fontSize: typeScaleVars['--cl-text-sm-size'],
+    lineHeight: typeScaleVars['--cl-text-sm-leading'],
+    opacity: {
+      default: 1,
+      ':where([data-starting-style], [data-ending-style])': 0,
+    },
+    transform: {
+      default: 'scale(1)',
+      ':where([data-starting-style], [data-ending-style])': 'scale(0.94)',
+      '@media (prefers-reduced-motion: reduce)': {
+        default: 'scale(1)',
+        ':where([data-starting-style], [data-ending-style])': 'scale(1)',
+      },
+    },
+    transformOrigin: 'var(--cl-anchor-origin, center)',
+    transitionDuration: {
+      default: `${durationVars['--cl-duration-fast']}, ${durationVars['--cl-duration-base']}`,
+      ':where([data-ending-style])': durationVars['--cl-duration-fast'],
+    },
+    transitionProperty: {
+      default: 'opacity, transform',
+      '@media (prefers-reduced-motion: reduce)': 'opacity',
+    },
+    transitionTimingFunction: {
+      default: `${easingVars['--cl-ease-enter']}, ${easingVars['--cl-ease-default']}`,
+      ':where([data-ending-style])': easingVars['--cl-ease-exit'],
+    },
+    whiteSpace: 'nowrap',
+  },
+  title: {
+    font: 'inherit',
+    margin: 0,
+  },
+});

packages/mosaic/src/components/copy-button/copy-button.test.tsx

@@ -0,0 +1,119 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { CopyButton } from './copy-button';
+
+describe('Mosaic CopyButton', () => {
+  it('writes the value to the clipboard', async () => {
+    const user = userEvent.setup();
+    render(<CopyButton value='acme-inc' />);
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    await expect(navigator.clipboard.readText()).resolves.toBe('acme-inc');
+  });
+
+  it('confirms the copy in a toast and keeps the button named', async () => {
+    const user = userEvent.setup();
+    render(<CopyButton value='acme-inc' />);
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    const toast = await screen.findByRole('dialog', { name: 'Copied' });
+    expect(toast.querySelector('.cl-icon')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Copy' })).toBeInTheDocument();
+  });
+
+  it('announces the copy from the region the button names', async () => {
+    const user = userEvent.setup();
+    render(
+      <CopyButton
+        value='acme-inc'
+        label='Copy slug'
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Copy slug' }));
+
+    expect(await screen.findByRole('region', { name: 'Copy slug' })).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByRole('status')).toHaveTextContent('Copied'));
+  });
+
+  it('takes the confirmation text from copiedLabel', async () => {
+    const user = userEvent.setup();
+    render(
+      <CopyButton
+        value='acme-inc'
+        copiedLabel='Slug copied'
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    expect(await screen.findByRole('dialog', { name: 'Slug copied' })).toBeInTheDocument();
+  });
+
+  it('settles back after the confirmation expires', async () => {
+    const user = userEvent.setup();
+    render(
+      <CopyButton
+        value='acme-inc'
+        resetAfter={200}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+    await screen.findByRole('dialog');
+
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  });
+
+  it('shows one confirmation when the value is copied twice', async () => {
+    const user = userEvent.setup();
+    render(<CopyButton value='acme-inc' />);
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+    await screen.findByRole('dialog');
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    await waitFor(() => expect(screen.getAllByRole('dialog')).toHaveLength(1));
+  });
+
+  it('copies through onCopy when one is given', async () => {
+    const onCopy = vi.fn();
+    const user = userEvent.setup();
+    const writeText = vi.spyOn(navigator.clipboard, 'writeText');
+    render(
+      <CopyButton
+        value='acme-inc'
+        onCopy={onCopy}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    expect(onCopy).toHaveBeenCalledWith('acme-inc');
+    expect(writeText).not.toHaveBeenCalled();
+  });
+
+  it('confirms nothing when the copy fails, and hands the caller the reason', async () => {
+    const onCopyError = vi.fn();
+    const denied = new Error('denied');
+    const user = userEvent.setup();
+    render(
+      <CopyButton
+        value='acme-inc'
+        onCopy={() => Promise.reject(denied)}
+        onCopyError={onCopyError}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    await waitFor(() => expect(onCopyError).toHaveBeenCalledWith(denied));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+});

packages/mosaic/src/components/copy-button/copy-button.tsx

@@ -0,0 +1,127 @@
+import * as stylex from '@stylexjs/stylex';
+import React from 'react';
+
+import type { ToastSide } from '../../primitives/toast';
+import { Toast } from '../../primitives/toast';
+import { mergeStyleProps, themeProps } from '../../props';
+import type { ButtonProps } from '../button';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { styles } from './copy-button.styles';
+
+const SIDE_OFFSET = 4;
+
+export interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onCopy'> {
+  value: string;
+  label?: string;
+  copiedLabel?: string;
+  side?: ToastSide;
+  resetAfter?: number;
+  onCopy?: (value: string) => void | Promise<void>;
+  onCopyError?: (error: unknown) => void;
+}
+
+export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(function MosaicCopyButton(
+  { resetAfter = 2000, ...rest },
+  ref,
+) {
+  return (
+    <Toast.Provider
+      timeout={resetAfter}
+      limit={1}
+    >
+      <CopyButtonTrigger
+        ref={ref}
+        {...rest}
+      />
+    </Toast.Provider>
+  );
+});
+
+const CopyButtonTrigger = React.forwardRef<HTMLButtonElement, Omit<CopyButtonProps, 'resetAfter'>>(
+  function CopyButtonTrigger(
+    {
+      value,
+      label = 'Copy',
+      copiedLabel = 'Copied',
+      side = 'top',
+      onCopy,
+      onCopyError,
+      color = 'neutral',
+      variant = 'ghost',
+      size = 'xs',
+      shape = 'square',
+      onClick,
+      ...rest
+    },
+    ref,
+  ) {
+    const manager = Toast.useToastManager();
+
+    const copy = async (anchor: HTMLElement) => {
+      try {
+        await (onCopy ? onCopy(value) : navigator.clipboard.writeText(value));
+      } catch (error) {
+        // A blocked clipboard confirms nothing; the caller decides whether to say so.
+        onCopyError?.(error);
+        return;
+      }
+      manager.add({
+        title: copiedLabel,
+        positionerProps: { anchor, side, sideOffset: SIDE_OFFSET },
+      });
+    };
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) {
+        void copy(event.currentTarget);
+      }
+    };
+
+    return (
+      <>
+        <Button
+          ref={ref}
+          type='button'
+          aria-label={label}
+          color={color}
+          variant={variant}
+          size={size}
+          shape={shape}
+          onClick={handleClick}
+          {...rest}
+        >
+          <Icon
+            name='clipboard'
+            size='sm'
+          />
+        </Button>
+        <Toast.Portal>
+          <Toast.Viewport aria-label={label}>
+            {manager.toasts.map(toast => (
+              <Toast.Positioner
+                key={toast.id}
+                toast={toast}
+              >
+                <Toast.Root
+                  toast={toast}
+                  {...mergeStyleProps(themeProps('copy-button-toast'), stylex.props(styles.toast))}
+                >
+                  <Toast.Title
+                    {...mergeStyleProps(themeProps('copy-button-toast-title'), stylex.props(styles.title))}
+                  />
+                  <Icon
+                    name='checkmark'
+                    size='sm'
+                    aria-hidden='true'
+                  />
+                </Toast.Root>
+              </Toast.Positioner>
+            ))}
+          </Toast.Viewport>
+        </Toast.Portal>
+      </>
+    );
+  },
+);

packages/mosaic/src/components/copy-button/index.ts

@@ -0,0 +1,2 @@
+export { CopyButton } from './copy-button';
+export type { CopyButtonProps } from './copy-button';