@lar-works/design-system 0.0.0-stage → 0.1.1

package/src/navigation/DrilldownBrowseSelector.tsx

@@ -0,0 +1,229 @@
+import { ChevronDownIcon, SearchIcon } from 'lucide-react';
+import { type ReactNode, useMemo, useState } from 'react';
+
+import { Input } from '../forms/Input';
+import { tabbable } from '../foundations/KeyboardFocus';
+import { ScrollArea } from '../layout/ScrollArea';
+import { Popover } from '../overlays/Popover';
+import { CollectionBrowseTrigger } from './CollectionBrowseSelector';
+
+export interface DrilldownBrowseItem {
+    id: string;
+    label: string;
+}
+
+export interface DrilldownBrowseGroup {
+    id: string;
+    label: string;
+    items: readonly DrilldownBrowseItem[];
+    loading: boolean;
+    loadingLabel: string;
+    noResultsLabel: string;
+    /** Clears this group alone, leaving the groups it combines with. */
+    allLabel: string;
+    /** Long lists are searchable; short ones list every item at once. */
+    searchLabel?: string;
+    selectedId?: string;
+    onChange: (itemId: string | undefined) => void;
+}
+
+interface DrilldownBrowseSelectorProps {
+    icon?: ReactNode;
+    allLabel: string;
+    backLabel: string;
+    disabledOptionLabel?: string;
+    groups: readonly DrilldownBrowseGroup[];
+    label: string;
+    onClear: () => void;
+}
+
+export function DrilldownBrowseSelector({
+    icon,
+    allLabel,
+    backLabel,
+    disabledOptionLabel,
+    groups,
+    label,
+    onClear,
+}: DrilldownBrowseSelectorProps) {
+    const [open, setOpen] = useState(false);
+    const [groupId, setGroupId] = useState<string | null>(null);
+    const [query, setQuery] = useState('');
+    const group = groups.find(({ id }) => id === groupId);
+    const normalizedQuery = normalizeSearch(query);
+    const filteredItems = useMemo(
+        () => group?.items.filter((item) => normalizeSearch(item.label).includes(normalizedQuery)) ?? [],
+        [group, normalizedQuery],
+    );
+
+    const closeAndSelect = (select: () => void) => {
+        select();
+        setQuery('');
+        setGroupId(null);
+        setOpen(false);
+    };
+
+    return (
+        <Popover
+            open={open}
+            onOpenChange={(nextOpen) => {
+                setOpen(nextOpen);
+
+                if (!nextOpen) {
+                    setQuery('');
+                    setGroupId(null);
+                }
+            }}
+        >
+            <Popover.Trigger asChild>
+                <CollectionBrowseTrigger
+                    label={label}
+                    icon={icon}
+                    active={groups.some(({ selectedId }) => Boolean(selectedId))}
+                />
+            </Popover.Trigger>
+            <Popover.Content align="start" presentation="menu" sideOffset={8} width="sm">
+                {!group ? (
+                    <div role="menu" aria-label={label}>
+                        <MenuOption
+                            label={allLabel}
+                            selected={groups.every(({ selectedId }) => !selectedId)}
+                            onSelect={() => closeAndSelect(onClear)}
+                        />
+                        {disabledOptionLabel ? (
+                            <MenuOption disabled label={disabledOptionLabel} selected={false} />
+                        ) : null}
+                        {groups.map(({ id, items, label: groupLabel, selectedId }) => (
+                            <button
+                                key={id}
+                                {...tabbable}
+                                className="hover:bg-base-200 focus-visible:outline-primary flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-sm transition-colors focus-visible:outline-2"
+                                role="menuitem"
+                                type="button"
+                                onClick={() => setGroupId(id)}
+                            >
+                                <span className="min-w-0 flex-1 truncate">{groupLabel}</span>{' '}
+                                {selectedId ? (
+                                    <span className="text-base-600 max-w-1/2 min-w-0 truncate">
+                                        {items.find((item) => item.id === selectedId)?.label}
+                                    </span>
+                                ) : null}
+                                <span aria-hidden="true" className="size-4 shrink-0 -rotate-90 [&>svg]:size-full">
+                                    <ChevronDownIcon />
+                                </span>
+                            </button>
+                        ))}
+                    </div>
+                ) : (
+                    <div className="space-y-2">
+                        <button
+                            {...tabbable}
+                            className="hover:bg-base-200 focus-visible:outline-primary flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-sm transition-colors focus-visible:outline-2"
+                            type="button"
+                            onClick={() => {
+                                setQuery('');
+                                setGroupId(null);
+                            }}
+                        >
+                            <span aria-hidden="true" className="size-4 shrink-0 rotate-90 [&>svg]:size-full">
+                                <ChevronDownIcon />
+                            </span>
+                            {backLabel}
+                        </button>
+                        <div className="bg-base-200 h-px" />
+                        {group.searchLabel ? (
+                            <div className="relative">
+                                <span className="text-base-500 pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 [&>svg]:size-full">
+                                    <SearchIcon />
+                                </span>
+                                <Input
+                                    autoFocus
+                                    aria-label={group.searchLabel}
+                                    className="pl-8"
+                                    placeholder={group.searchLabel}
+                                    size="sm"
+                                    type="search"
+                                    value={query}
+                                    onChange={(event) => setQuery(event.target.value)}
+                                />
+                            </div>
+                        ) : null}
+                        <ScrollArea role="listbox" aria-label={group.label}>
+                            {!normalizedQuery ? (
+                                <ListOption
+                                    label={group.allLabel}
+                                    selected={!group.selectedId}
+                                    onSelect={() => closeAndSelect(() => group.onChange(undefined))}
+                                />
+                            ) : null}
+                            {group.loading ? (
+                                <p className="text-base-600 px-2 py-3 text-sm">{group.loadingLabel}</p>
+                            ) : null}
+                            {!group.loading && filteredItems.length === 0 ? (
+                                <p className="text-base-600 px-2 py-3 text-sm">{group.noResultsLabel}</p>
+                            ) : null}
+                            {filteredItems.map((item) => (
+                                <ListOption
+                                    key={item.id}
+                                    label={item.label}
+                                    selected={item.id === group.selectedId}
+                                    onSelect={() => closeAndSelect(() => group.onChange(item.id))}
+                                />
+                            ))}
+                        </ScrollArea>
+                    </div>
+                )}
+            </Popover.Content>
+        </Popover>
+    );
+}
+
+function MenuOption({
+    disabled = false,
+    label,
+    onSelect,
+    selected,
+}: {
+    disabled?: boolean;
+    label: string;
+    onSelect?: () => void;
+    selected: boolean;
+}) {
+    return (
+        <button
+            {...tabbable}
+            aria-checked={selected}
+            aria-disabled={disabled || undefined}
+            className={`hover:bg-base-200 focus-visible:outline-primary flex h-8 w-full items-center rounded-md px-2 text-left text-sm transition-colors focus-visible:outline-2 ${
+                selected ? 'bg-base-200 font-medium' : ''
+            } ${disabled ? 'pointer-events-none opacity-50' : ''}`}
+            disabled={disabled}
+            role="menuitemradio"
+            type="button"
+            onClick={onSelect}
+        >
+            {label}
+        </button>
+    );
+}
+
+function ListOption({ label, onSelect, selected }: { label: string; onSelect: () => void; selected: boolean }) {
+    return (
+        <button
+            {...tabbable}
+            aria-selected={selected}
+            className={`hover:bg-base-200 focus-visible:outline-primary flex h-8 w-full items-center rounded-md px-2 text-left text-sm transition-colors focus-visible:outline-2 ${
+                selected ? 'bg-base-200 font-medium' : ''
+            }`}
+            role="option"
+            type="button"
+            onClick={onSelect}
+        >
+            {label}
+        </button>
+    );
+}
+
+function normalizeSearch(value: string): string {
+    return value.normalize('NFKD').replace(/\p{M}/gu, '').toLocaleLowerCase().trim();
+}

package/src/navigation/FolderSelector.tsx

@@ -0,0 +1,172 @@
+import { Alert, Loading } from '@ninna-ui/feedback';
+import { ChevronDownIcon, FolderIcon, FolderUpIcon, HouseIcon } from 'lucide-react';
+import type { ComponentPropsWithoutRef } from 'react';
+
+import { Button } from '../actions/Button';
+import { IconButton } from '../actions/IconButton';
+import { formControlClasses } from '../forms/FormControlStyles';
+import { useDesignSystemLabels } from '../foundations/DesignSystemProvider';
+import { Inline, Stack } from '../layout/Flow';
+import { ScrollArea } from '../layout/ScrollArea';
+import { Popover } from '../overlays/Popover';
+import { Text } from '../typography/Typography';
+
+export interface FolderSelectorOption {
+    name: string;
+    path: string;
+}
+
+export interface FolderSelectorProps extends Pick<
+    ComponentPropsWithoutRef<'button'>,
+    'id' | 'title' | 'aria-describedby' | 'aria-invalid' | 'aria-required'
+> {
+    browsePath: string;
+    disabled?: boolean;
+    error?: string;
+    hasMore?: boolean;
+    loading?: boolean;
+    loadingMore?: boolean;
+    onBrowsePathChange: (path: string) => void;
+    onChange: (path: string) => void;
+    onLoadMore: () => void;
+    onOpenChange: (open: boolean) => void;
+    onRetry: () => void;
+    open: boolean;
+    options: readonly FolderSelectorOption[];
+    parentPath?: string | null;
+    value: string;
+}
+
+export function FolderSelector({
+    id,
+    title,
+    'aria-describedby': describedBy,
+    'aria-invalid': invalid,
+    'aria-required': required,
+    browsePath,
+    disabled,
+    error,
+    hasMore,
+    loading,
+    loadingMore,
+    onBrowsePathChange,
+    onChange,
+    onLoadMore,
+    onOpenChange,
+    onRetry,
+    open,
+    options,
+    parentPath,
+    value,
+}: FolderSelectorProps) {
+    const labels = useDesignSystemLabels();
+
+    return (
+        <Popover open={open} onOpenChange={onOpenChange} modal>
+            <Popover.Trigger asChild>
+                <Button
+                    id={id}
+                    title={title}
+                    aria-describedby={describedBy}
+                    aria-invalid={invalid}
+                    aria-required={required}
+                    aria-label={value ? labels.folders.selectedPath(value) : labels.folders.path}
+                    className={`${formControlClasses} hover:bg-base-200 justify-between font-normal [&>span>svg]:size-4`}
+                    disabled={disabled}
+                    fullWidth
+                    leftIcon={<FolderIcon />}
+                    rightIcon={<ChevronDownIcon />}
+                    type="button"
+                    variant="quiet"
+                >
+                    <span className="min-w-0 flex-1 truncate text-left">{value || labels.folders.chooseFolder}</span>
+                </Button>
+            </Popover.Trigger>
+            <Popover.Content side="bottom" align="start" sideOffset={8} width="trigger" layout="fill">
+                <Stack className="min-h-0" space="group">
+                    <Stack space="tight">
+                        <Inline align="center" justify="between" space="related">
+                            <Text className="min-w-0 flex-1 truncate" variant="label">
+                                {labels.folders.title}
+                            </Text>
+                            <Inline space="tight">
+                                <IconButton
+                                    type="button"
+                                    aria-label={labels.folders.root}
+                                    title={labels.folders.root}
+                                    disabled={browsePath === '/'}
+                                    icon={<HouseIcon />}
+                                    onClick={() => onBrowsePathChange('/')}
+                                />
+                                <IconButton
+                                    type="button"
+                                    aria-label={labels.folders.upOneLevel}
+                                    title={labels.folders.upOneLevel}
+                                    disabled={!parentPath}
+                                    icon={<FolderUpIcon />}
+                                    onClick={() => parentPath && onBrowsePathChange(parentPath)}
+                                />
+                            </Inline>
+                        </Inline>
+                        <Text variant="caption" tone="muted">
+                            {browsePath}
+                        </Text>
+                    </Stack>
+
+                    <ScrollArea>
+                        {loading ? <Loading label={labels.folders.loading} /> : null}
+
+                        {error ? (
+                            <Alert
+                                color="danger"
+                                title={labels.folders.loadFailed}
+                                description={error}
+                                showIcon
+                                action={
+                                    <Button onClick={onRetry} variant="primary">
+                                        {labels.retry}
+                                    </Button>
+                                }
+                            />
+                        ) : null}
+
+                        {!loading && !error ? (
+                            <Stack space="tight">
+                                {options.map((option) => (
+                                    <Button
+                                        key={option.path}
+                                        aria-label={labels.folders.open(option.name)}
+                                        className="justify-start"
+                                        fullWidth
+                                        leftIcon={<FolderIcon />}
+                                        type="button"
+                                        onClick={() => onBrowsePathChange(option.path)}
+                                        variant="quiet"
+                                    >
+                                        <span className="min-w-0 flex-1 truncate text-left">{option.name}</span>
+                                    </Button>
+                                ))}
+                                {options.length === 0 ? <Text tone="muted">{labels.folders.empty}</Text> : null}
+                                {hasMore ? (
+                                    <Button type="button" loading={loadingMore} onClick={onLoadMore} variant="quiet">
+                                        {labels.folders.loadMore}
+                                    </Button>
+                                ) : null}
+                            </Stack>
+                        ) : null}
+                    </ScrollArea>
+
+                    <Button
+                        type="button"
+                        fullWidth
+                        disabled={browsePath === '/' || Boolean(error)}
+                        onClick={() => onChange(browsePath)}
+                        variant="primary"
+                    >
+                        {labels.folders.chooseThis}
+                    </Button>
+                </Stack>
+            </Popover.Content>
+        </Popover>
+    );
+}

package/src/navigation/TabKeys.ts

@@ -0,0 +1,21 @@
+import type { KeyboardEvent } from 'react';
+
+/** Moves a tab row's selection and focus with the left and right arrow keys, wrapping at either end. */
+export function moveTabSelection<T extends string>(
+    event: KeyboardEvent<HTMLElement>,
+    values: readonly T[],
+    value: T,
+    onChange: (value: T) => void,
+) {
+    const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+
+    if (step === 0 || values.length === 0) return;
+
+    event.preventDefault();
+
+    const index = values.indexOf(value);
+    const next = values[(index + step + values.length) % values.length]!;
+
+    onChange(next);
+    event.currentTarget.querySelector<HTMLButtonElement>(`[data-value="${next}"]`)?.focus();
+}

package/src/navigation/ViewTabs.tsx

@@ -0,0 +1,85 @@
+import type { ReactNode } from 'react';
+
+import { Text } from '../typography/Typography';
+import { moveTabSelection } from './TabKeys';
+
+export interface ViewTabsItem<T extends string> {
+    value: T;
+    label: string;
+    /** Already formatted for the viewer's locale. */
+    count?: string;
+}
+
+interface ViewTabsProps<T extends string> {
+    items: readonly ViewTabsItem<T>[];
+    label: string;
+    onChange: (value: T) => void;
+    value: T;
+    /** A control that acts on the same list, such as its search, beside the tabs on wide screens. */
+    end?: ReactNode;
+}
+
+/** A row of tabs that switches which list the page shows, each with its count. */
+export function ViewTabs<T extends string>({ items, label, onChange, value, end }: ViewTabsProps<T>) {
+    const tabs = (
+        <div
+            role="tablist"
+            aria-label={label}
+            className="border-base-300 flex min-w-0 gap-1 overflow-x-auto border-b"
+            onKeyDown={(event) =>
+                moveTabSelection(
+                    event,
+                    items.map((item) => item.value),
+                    value,
+                    onChange,
+                )
+            }
+        >
+            {items.map((item) => {
+                const selected = item.value === value;
+
+                return (
+                    <button
+                        key={item.value}
+                        type="button"
+                        role="tab"
+                        aria-selected={selected}
+                        tabIndex={selected ? 0 : -1}
+                        data-value={item.value}
+                        className={`focus-visible:outline-primary -mb-px flex shrink-0 items-center gap-2 border-b-2 px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-[-2px] ${
+                            selected
+                                ? 'border-base-content text-base-content'
+                                : 'text-base-700 hover:text-base-content border-transparent'
+                        }`}
+                        onClick={() => onChange(item.value)}
+                    >
+                        {item.label}
+                        {item.count !== undefined ? ' ' : null}
+                        {item.count !== undefined ? (
+                            <Text
+                                as="span"
+                                variant="caption"
+                                className={`rounded-full px-1.5 tabular-nums ${
+                                    selected
+                                        ? 'bg-base-content/10 text-base-content'
+                                        : 'bg-base-200 text-base-700 dark:bg-base-300'
+                                }`}
+                            >
+                                {item.count}
+                            </Text>
+                        ) : null}
+                    </button>
+                );
+            })}
+        </div>
+    );
+
+    return end ? (
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+            <div className="min-w-0">{tabs}</div>
+            <div className="sm:w-64 sm:pb-1">{end}</div>
+        </div>
+    ) : (
+        tabs
+    );
+}

package/src/navigation/index.ts

@@ -0,0 +1,15 @@
+export { ArtworkTabs, type ArtworkTabsItem } from './ArtworkTabs';
+export { Breadcrumbs } from './Breadcrumbs';
+export {
+    CollectionBrowseControls,
+    CollectionBrowseSelector,
+    CollectionBrowseTrigger,
+} from './CollectionBrowseSelector';
+export { type CollectionView, CollectionViewToggle } from './CollectionViewToggle';
+export {
+    type DrilldownBrowseGroup,
+    type DrilldownBrowseItem,
+    DrilldownBrowseSelector,
+} from './DrilldownBrowseSelector';
+export { FolderSelector, type FolderSelectorOption, type FolderSelectorProps } from './FolderSelector';
+export { ViewTabs, type ViewTabsItem } from './ViewTabs';

package/src/overlays/ActionModal.tsx

@@ -0,0 +1,81 @@
+import type { ReactNode } from 'react';
+
+import { Button } from '../actions/Button';
+import { useDesignSystemLabels } from '../foundations/DesignSystemProvider';
+import { Modal } from './Modal';
+
+interface ActionModalProps {
+    accessibleTitle?: string;
+    actionColor?: 'danger' | 'primary';
+    actionDisabled?: boolean;
+    actionLabel: string;
+    children: ReactNode;
+    bodyLayout?: 'scroll' | 'fill';
+    description: string;
+    footerLeading?: ReactNode;
+    headerActions?: ReactNode;
+    loading: boolean;
+    onAction: () => void;
+    onClose: () => void;
+    sidebar?: ReactNode;
+    noValidate?: boolean;
+    title: string;
+}
+
+export function ActionModal({
+    accessibleTitle,
+    actionColor = 'primary',
+    actionDisabled = false,
+    actionLabel,
+    children,
+    bodyLayout,
+    description,
+    footerLeading,
+    headerActions,
+    loading,
+    onAction,
+    onClose,
+    sidebar,
+    noValidate,
+    title,
+}: ActionModalProps) {
+    const labels = useDesignSystemLabels();
+
+    return (
+        <Modal loading={loading} onClose={onClose}>
+            <Modal.Content
+                title={title}
+                accessibleTitle={accessibleTitle}
+                description={description}
+                sidebar={sidebar}
+                headerActions={headerActions}
+            >
+                <Modal.Form
+                    noValidate={noValidate}
+                    onSubmit={(event) => {
+                        event.preventDefault();
+
+                        if (!loading && !actionDisabled) {
+                            onAction();
+                        }
+                    }}
+                >
+                    <Modal.Body layout={bodyLayout}>{children}</Modal.Body>
+                    <Modal.Footer leading={footerLeading}>
+                        <Button type="button" disabled={loading} onClick={onClose} variant="secondary">
+                            {labels.cancel}
+                        </Button>
+                        <Button
+                            type="submit"
+                            loading={loading}
+                            disabled={loading || actionDisabled}
+                            variant={actionColor === 'danger' ? 'destructive' : 'primary'}
+                        >
+                            {actionLabel}
+                        </Button>
+                    </Modal.Footer>
+                </Modal.Form>
+            </Modal.Content>
+        </Modal>
+    );
+}