@dsh-workbench/shared 0.2.12 → 0.2.14

package/src/components/FormActions.test.tsx

@@ -0,0 +1,157 @@
+import { readFileSync } from 'node:fs';
+import { describe, expect, it, vi } from 'vitest';
+import { FormActions, type FormAction, type FormActionKind } from './FormActions.js';
+import { SaveBar } from './SaveBar.js';
+
+function action(key: string, kind?: FormActionKind): FormAction {
+  return { key, label: key, ...(kind === undefined ? {} : { kind }), onClick: () => {} };
+}
+
+function buttonsOf(node: unknown): { props: Record<string, unknown> }[] {
+  return (node as { props: { children: unknown[] } }).props.children as { props: Record<string, unknown> }[];
+}
+
+function labelsOf(node: unknown): unknown[] {
+  return buttonsOf(node).map((one) => one.props['children']);
+}
+
+describe('FormActions', () => {
+  it('★ 顺序由组件决定：给乱序数组，primary 仍在末尾、danger 紧挨它左侧、其余保持调用点顺序', () => {
+    const node = FormActions({
+      actions: [action('save', 'primary'), action('retry'), action('remove', 'danger'), action('edit')],
+    });
+
+    expect(labelsOf(node)).toEqual(['retry', 'edit', 'remove', 'save']);
+    expect(buttonsOf(node).map((one) => one.props['variant'])).toEqual([
+      'ghost',
+      'ghost',
+      'outline',
+      'primary',
+    ]);
+  });
+
+  it('没有 primary 时 danger 仍是最后一个（固定槽位，不随调用点顺序漂）', () => {
+    const node = FormActions({ actions: [action('remove', 'danger'), action('reset')] });
+
+    expect(labelsOf(node)).toEqual(['reset', 'remove']);
+  });
+
+  it('★ 两颗 primary 给可诊断信号（点名 key），但不吞、不挪、不丢', () => {
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    try {
+      const node = FormActions({ actions: [action('keep', 'primary'), action('also', 'primary')] });
+
+      expect(spy).toHaveBeenCalledTimes(1);
+      const message = String(spy.mock.calls[0]?.[0]);
+      expect(message).toContain('[dsh-workbench]');
+      expect(message).toContain('keep');
+      expect(message).toContain('also');
+      expect(labelsOf(node)).toEqual(['keep', 'also']);
+    } finally {
+      spy.mockRestore();
+    }
+  });
+
+  it('一颗 primary 不报', () => {
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    try {
+      FormActions({ actions: [action('save', 'primary'), action('cancel')] });
+      expect(spy).not.toHaveBeenCalled();
+    } finally {
+      spy.mockRestore();
+    }
+  });
+
+  it('★ 空数组不渲空壳', () => {
+    expect(FormActions({ actions: [] })).toBeNull();
+  });
+
+  it('danger 是 outline + 危险类，绝不是 primary 填充', () => {
+    const node = FormActions({ actions: [action('remove', 'danger')] });
+    const only = buttonsOf(node)[0];
+
+    expect(only?.props['variant']).toBe('outline');
+    expect(only?.props['className']).toBe('wb-formActionDanger');
+  });
+
+  it('busy 那颗禁用并带 Spinner；disabled 单独算', () => {
+    const node = FormActions({
+      actions: [
+        { key: 'save', label: '保存', kind: 'primary', onClick: () => {}, busy: true },
+        { key: 'cancel', label: '取消', onClick: () => {}, disabled: true },
+      ],
+    });
+    const [cancel, save] = buttonsOf(node);
+
+    expect(save?.props['disabled']).toBe(true);
+    expect(save?.props['icon']).toBeTruthy();
+    expect(cancel?.props['disabled']).toBe(true);
+    expect(cancel?.props['icon']).toBeUndefined();
+  });
+});
+
+const CSS = readFileSync(new URL('./FormActions.css', import.meta.url), 'utf8');
+
+function declarations(selector: string): string[] {
+  for (const block of CSS.split('}')) {
+    const [head, ...rest] = block.split('{');
+    if (rest.length === 0 || head === undefined) continue;
+    if (head.trim() !== selector) continue;
+    return rest
+      .join('{')
+      .split(';')
+      .map((one) => one.replace(/\s+/g, ' ').trim())
+      .filter((one) => one !== '');
+  }
+  throw new Error(`FormActions.css 里没有这条规则：${selector}`);
+}
+
+describe('操作区的版式（ADR-0054 §2 规则四）', () => {
+  it('★ 窄容器换行 + 整组右对齐 + 唯一一档间距', () => {
+    const rule = declarations('.wb-formActions');
+
+    expect(rule).toContain('flex-wrap: wrap');
+    expect(rule).toContain('justify-content: flex-end');
+    expect(rule).toContain('gap: var(--wb-len-8)');
+  });
+
+  it('★ 危险色走现成令牌（文字 / 描边 / 悬停）', () => {
+    const rule = declarations('.wb-formActionDanger');
+
+    expect(rule).toContain('color: var(--dsw-alias-state-error-primary)');
+    expect(rule.some((one) => one.startsWith('border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary)'))).toBe(
+      true,
+    );
+    expect(rule.some((one) => one.startsWith('--dsw-alias-interactive-bg-hover:'))).toBe(true);
+  });
+});
+
+describe('SaveBar 自吃狗粮（ADR-0054 §10）', () => {
+  it('两个动作喂给 FormActions：取消是 default、保存是 primary（顺序不再由它摆）', () => {
+    const node = SaveBar({
+      busy: false,
+      labels: { cancel: '取消', save: '保存', saving: '保存中…' },
+      onCancel: () => {},
+      onSave: () => {},
+    }) as unknown as { props: { actions: readonly FormAction[] } };
+
+    expect(node.props.actions.map((one) => [one.key, one.kind])).toEqual([
+      ['cancel', 'default'],
+      ['save', 'primary'],
+    ]);
+  });
+
+  it('busy 时保存那颗显示 saving 文案、禁用且带忙碌标记', () => {
+    const node = SaveBar({
+      busy: true,
+      labels: { cancel: '取消', save: '保存', saving: '保存中…' },
+      onCancel: () => {},
+      onSave: () => {},
+    }) as unknown as { props: { actions: readonly FormAction[] } };
+    const save = node.props.actions[1];
+
+    expect(save?.label).toBe('保存中…');
+    expect(save?.disabled).toBe(true);
+    expect(save?.busy).toBe(true);
+  });
+});

package/src/components/FormActions.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode } from '../lib/react.js';
+import { h } from '../lib/react.js';
+import { Button } from '@deepseek-ai/dsh-client-ui-primitives';
+import { Spinner } from './Spinner.js';
+import './FormActions.css';
+
+export type FormActionKind = 'default' | 'danger' | 'primary';
+
+export interface FormAction {
+  readonly key: string;
+  readonly label: ReactNode;
+  readonly kind?: FormActionKind | undefined;
+  readonly onClick: () => void;
+  readonly disabled?: boolean | undefined;
+  readonly busy?: boolean | undefined;
+}
+
+export interface FormActionsProps {
+  readonly actions: readonly FormAction[];
+}
+
+const RANK: Record<FormActionKind, number> = { default: 0, danger: 1, primary: 2 };
+
+function kindOf(action: FormAction): FormActionKind {
+  return action.kind ?? 'default';
+}
+
+function ordered(actions: readonly FormAction[]): readonly FormAction[] {
+  return actions
+    .map((action, index) => ({ action, index, rank: RANK[kindOf(action)] }))
+    .sort((left, right) => left.rank - right.rank || left.index - right.index)
+    .map((one) => one.action);
+}
+
+function reportExtraPrimaries(actions: readonly FormAction[]): void {
+  const keys = actions.filter((one) => kindOf(one) === 'primary').map((one) => one.key);
+  if (keys.length < 2) return;
+  console.error(
+    `[dsh-workbench] FormActions 一个区里出现了 ${keys.length} 颗 primary（${keys.join('、')}）—— ` +
+      '一个区只许一颗主操作（ADR-0054 §2 规则二）：多余的这颗该改成 default',
+  );
+}
+
+function variantOf(kind: FormActionKind): 'ghost' | 'outline' | 'primary' {
+  if (kind === 'primary') return 'primary';
+  if (kind === 'danger') return 'outline';
+  return 'ghost';
+}
+
+export function FormActions({ actions }: FormActionsProps) {
+  if (actions.length === 0) return null;
+  reportExtraPrimaries(actions);
+  return (
+    <div className="wb-formActions">
+      {ordered(actions).map((action) => {
+        const kind = kindOf(action);
+        const busy = action.busy === true;
+        return (
+          <Button
+            key={action.key}
+            type="button"
+            size="sm"
+            variant={variantOf(kind)}
+            className={kind === 'danger' ? 'wb-formActionDanger' : undefined}
+            disabled={busy || action.disabled === true}
+            icon={busy ? <Spinner size={12} /> : undefined}
+            onClick={action.onClick}
+          >
+            {action.label}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/FormRows.css

@@ -0,0 +1,69 @@
+.wb-formRows {
+  display: grid;
+  grid-template-columns: minmax(72px, max-content) minmax(0, 1fr);
+  column-gap: var(--wb-len-8);
+  row-gap: var(--wb-len-12);
+}
+
+.wb-formRows > :not(.wb-formRow) {
+  grid-column: 1 / -1;
+}
+
+.wb-formRow {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: minmax(72px, max-content) minmax(0, 1fr);
+  align-items: center;
+  column-gap: var(--wb-len-8);
+  row-gap: var(--wb-len-8);
+}
+
+.wb-formRows > .wb-formRow {
+  grid-template-columns: subgrid;
+}
+
+.wb-formRow[data-layout='stacked'] {
+  grid-template-columns: minmax(0, 1fr);
+  align-items: stretch;
+  gap: var(--wb-len-6);
+}
+
+.wb-formLabel {
+  min-width: 0;
+  font-size: var(--dsw-font-xs-13-font-size);
+  color: var(--dsw-alias-label-secondary);
+  overflow-wrap: anywhere;
+  white-space: nowrap;
+}
+
+.wb-formRow[data-layout='stacked'] .wb-formLabel {
+  white-space: normal;
+}
+
+.wb-formControl {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.wb-formHint {
+  grid-column: 2;
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-formProblem {
+  grid-column: 2;
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.wb-formRow:has(.wb-formProblem) .wb-formLabel {
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.wb-formRow:has(:disabled) .wb-formLabel {
+  opacity: 0.4;
+}

package/src/components/FormRows.test.tsx

@@ -0,0 +1,138 @@
+import { readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+import { FormRow, FormRows } from './FormRows.js';
+
+function texts(node: unknown): string[] {
+  if (node === null || node === undefined || typeof node === 'boolean') return [];
+  if (typeof node === 'string') return [node];
+  if (typeof node === 'number') return [String(node)];
+  if (Array.isArray(node)) return node.flatMap((one) => texts(one));
+  const element = node as { props?: { children?: unknown } };
+  return texts(element.props?.children);
+}
+
+function childrenOf(node: unknown): unknown[] {
+  return (node as { props: { children: unknown } }).props.children as unknown[];
+}
+
+function noteNodeOf(node: unknown, className: string): unknown {
+  return childrenOf(node).find(
+    (one) => (one as { props?: Record<string, unknown> } | null)?.props?.['className'] === className,
+  );
+}
+
+describe('FormRow', () => {
+  it('标签、控件、提示按顺序出现（提示排在控件下面那一格）', () => {
+    expect(texts(FormRow({ label: '项目', hint: '选错了也能改', children: '下拉' }))).toEqual([
+      '项目',
+      '下拉',
+      '选错了也能改',
+    ]);
+  });
+
+  it('默认是「标签在左」的两列；stacked 才是上下堆叠', () => {
+    const inline = FormRow({ label: '项目', children: '下拉' }) as unknown as { props: Record<string, unknown> };
+    const stacked = FormRow({ label: '项目', layout: 'stacked', children: '下拉' }) as unknown as {
+      props: Record<string, unknown>;
+    };
+
+    expect(inline.props['data-layout']).toBe('inline');
+    expect(stacked.props['data-layout']).toBe('stacked');
+    expect(inline.props['className']).toBe('wb-formRow');
+  });
+
+  it('没给提示就不多一个空节点（否则每行都空一截）', () => {
+    const node = FormRow({ label: '项目', children: '下拉' });
+
+    expect(texts(node)).toEqual(['项目', '下拉']);
+    expect(childrenOf(node).filter((one) => one !== null)).toHaveLength(2);
+  });
+
+  it('有 problem 就顶掉 hint（同一格，二选一），错误行挂 data-wb-problem 给聚焦那件找', () => {
+    const node = FormRow({
+      label: '项目',
+      hint: '只列非生产',
+      problem: '这个项目不存在',
+      children: '下拉',
+    }) as unknown as { props: Record<string, unknown> };
+
+    expect(texts(node)).toEqual(['项目', '下拉', '这个项目不存在']);
+    expect((noteNodeOf(node, 'wb-formProblem') as { props: Record<string, unknown> }).props['className']).toBe(
+      'wb-formProblem',
+    );
+    expect(node.props['data-wb-problem']).toBe('');
+  });
+
+  it('没有 problem 就不多挂标记，hint 照常', () => {
+    const node = FormRow({ label: '项目', hint: '只列非生产', children: '下拉' }) as unknown as {
+      props: Record<string, unknown>;
+    };
+
+    expect(node.props['data-wb-problem']).toBeUndefined();
+    expect(noteNodeOf(node, 'wb-formHint')).toBeDefined();
+    expect(noteNodeOf(node, 'wb-formProblem')).toBeUndefined();
+    expect(texts(node)).toEqual(['项目', '下拉', '只列非生产']);
+  });
+
+  it('FormRows 只是一列容器，不替调用点决定格子', () => {
+    const node = FormRows({ children: '两行' }) as unknown as { props: Record<string, unknown> };
+
+    expect(node.props['className']).toBe('wb-formRows');
+    expect(texts(node)).toEqual(['两行']);
+  });
+});
+
+const FORM_CSS = readFileSync(new URL('./FormRows.css', import.meta.url), 'utf8');
+
+function declarations(selector: string): string[] {
+  for (const block of FORM_CSS.split('}')) {
+    const [head, ...rest] = block.split('{');
+    if (rest.length === 0 || head === undefined) continue;
+    if (head.trim() !== selector) continue;
+    return rest
+      .join('{')
+      .split(';')
+      .map((one) => one.replace(/\s+/g, ' ').trim())
+      .filter((one) => one !== '');
+  }
+  throw new Error(`FormRows.css 里没有这条规则：${selector}`);
+}
+
+describe('标签列：同一个 FormRows 共用一列（ADR-0052 §11）', () => {
+  it('★ FormRows 自己是一个 grid：标签列 minmax(72px, max-content)，行距还是那一档', () => {
+    const rows = declarations('.wb-formRows');
+
+    expect(rows).toContain('display: grid');
+    expect(rows).toContain('grid-template-columns: minmax(72px, max-content) minmax(0, 1fr)');
+    expect(rows).toContain('row-gap: var(--wb-len-12)');
+  });
+
+  it('★ 行先留回退两列，再由 subgrid 继承父网格那两列（老浏览器丢掉 subgrid 仍有回退）', () => {
+    expect(declarations('.wb-formRow')).toContain(
+      'grid-template-columns: minmax(72px, max-content) minmax(0, 1fr)',
+    );
+    expect(declarations('.wb-formRows > .wb-formRow')).toContain('grid-template-columns: subgrid');
+  });
+
+  it('★ 行自己的列距与 FormRows 那一档同值（不同值就是控件起点参差）', () => {
+    const rowGap = declarations('.wb-formRow').find((one) => one.startsWith('column-gap:'));
+    const rowsGap = declarations('.wb-formRows').find((one) => one.startsWith('column-gap:'));
+
+    expect(rowGap).toBe('column-gap: var(--wb-len-8)');
+    expect(rowGap).toBe(rowsGap);
+  });
+
+  it('★ 标签不折行；stacked 还是单列、标签照常换行', () => {
+    expect(declarations('.wb-formLabel')).toContain('white-space: nowrap');
+    expect(declarations(".wb-formRow[data-layout='stacked'] .wb-formLabel")).toContain(
+      'white-space: normal',
+    );
+    expect(declarations(".wb-formRow[data-layout='stacked']")).toContain(
+      'grid-template-columns: minmax(0, 1fr)',
+    );
+  });
+
+  it('★ 不是 FormRow 的子项（分组标题那种）通栏，别被塞进标签那一列', () => {
+    expect(declarations('.wb-formRows > :not(.wb-formRow)')).toContain('grid-column: 1 / -1');
+  });
+});

package/src/components/FormRows.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from '../lib/react.js';
+import { h } from '../lib/react.js';
+import './FormRows.css';
+
+export interface FormRowsProps {
+  readonly children?: ReactNode | undefined;
+}
+
+export function FormRows({ children }: FormRowsProps) {
+  return <div className="wb-formRows">{children}</div>;
+}
+
+export interface FormRowProps {
+  readonly label: ReactNode;
+  readonly hint?: ReactNode | undefined;
+  readonly problem?: ReactNode | undefined;
+  readonly layout?: 'inline' | 'stacked' | undefined;
+  readonly children?: ReactNode | undefined;
+}
+
+export function FormRow({ label, hint, problem, layout = 'inline', children }: FormRowProps) {
+  return (
+    <label
+      className="wb-formRow"
+      data-layout={layout}
+      data-wb-problem={problem === undefined ? undefined : ''}
+    >
+      <span className="wb-formLabel">{label}</span>
+      <span className="wb-formControl">{children}</span>
+      {problem === undefined ? (
+        hint === undefined ? null : (
+          <span className="wb-formHint">{hint}</span>
+        )
+      ) : (
+        <span className="wb-formProblem">{problem}</span>
+      )}
+    </label>
+  );
+}

package/src/components/SaveBar.tsx

@@ -1,6 +1,6 @@
-import { Button } from '@deepseek-ai/dsh-client-ui-primitives';
 import { h } from '../lib/react.js';
-import './SaveBar.css';
+import type { FormAction } from './FormActions.js';
+import { FormActions } from './FormActions.js';
 
 export interface SaveBarProps {
   readonly busy: boolean;
@@ -15,20 +15,16 @@ export interface SaveBarProps {
 }
 
 export function SaveBar({ busy, disabled, labels, onCancel, onSave }: SaveBarProps) {
-  return (
-    <div className="wb-formActions">
-      <Button type="button" size="sm" variant="ghost" onClick={onCancel} disabled={busy}>
-        {labels.cancel}
-      </Button>
-      <Button
-        type="button"
-        size="sm"
-        variant="primary"
-        onClick={onSave}
-        disabled={busy || disabled === true}
-      >
-        {busy ? labels.saving : labels.save}
-      </Button>
-    </div>
-  );
+  const actions: readonly FormAction[] = [
+    { key: 'cancel', label: labels.cancel, kind: 'default', onClick: onCancel, disabled: busy },
+    {
+      key: 'save',
+      label: busy ? labels.saving : labels.save,
+      kind: 'primary',
+      onClick: onSave,
+      disabled: busy || disabled === true,
+      busy,
+    },
+  ];
+  return <FormActions actions={actions} />;
 }

package/src/components/SelectField.css

@@ -4,8 +4,8 @@
   align-items: center;
   gap: var(--wb-len-8);
   width: 100%;
-  min-height: var(--wb-len-32);
-  padding: var(--wb-len-6) var(--wb-len-12);
+  min-height: var(--wb-len-28);
+  padding: var(--wb-len-4) var(--wb-len-10);
   border: 0.5px solid var(--dsw-alias-border-l4);
   border-radius: var(--dsw-radius-md);
   background: var(--dsw-alias-bg-layer-3);
@@ -21,6 +21,14 @@
   box-shadow: inset 0 0 0 0.5px var(--dsw-alias-state-business-primary);
 }
 
+.wb-selectTrigger[aria-invalid='true'] {
+  border-color: var(--dsw-alias-state-error-primary);
+}
+
+.wb-selectTrigger[aria-invalid='true']:focus-visible {
+  box-shadow: inset 0 0 0 0.5px var(--dsw-alias-state-error-primary);
+}
+
 .wb-selectTrigger:disabled {
   cursor: not-allowed;
   opacity: 0.4;
@@ -100,8 +108,8 @@
   align-items: center;
   gap: var(--wb-len-8);
   width: 100%;
-  min-height: var(--wb-len-32);
-  padding: var(--wb-len-6) var(--wb-len-12);
+  min-height: var(--wb-len-28);
+  padding: var(--wb-len-4) var(--wb-len-10);
   border: 0.5px solid var(--dsw-alias-border-l4);
   border-radius: var(--dsw-radius-md);
   background: var(--dsw-alias-bg-layer-3);

package/src/components/SelectField.test.tsx

@@ -11,7 +11,8 @@ vi.mock('../lib/react.js', () => ({
 
 vi.mock('./SelectField.css', () => ({ default: {} }));
 
-import { Menu, StateDot, TextShimmer } from '@deepseek-ai/dsh-client-ui-primitives';
+import { Menu, TextShimmer } from '@deepseek-ai/dsh-client-ui-primitives';
+import { Spinner } from './Spinner.js';
 import type { MenuEntry } from '@deepseek-ai/dsh-client-ui-primitives';
 import { h } from '../lib/react.js';
 import { Field } from './Field.js';
@@ -169,7 +170,7 @@ describe('SelectField：工作区那套下拉的公共形状', () => {
     expect(busy?.props['aria-busy']).toBe('true');
     expect(busy?.props['disabled']).toBe(true);
     expect(elementsOf(busy?.children).some((one) => one.type === TextShimmer)).toBe(true);
-    expect(elementsOf(busy?.children).some((one) => one.type === StateDot)).toBe(true);
+    expect(elementsOf(busy?.children).some((one) => one.type === Spinner)).toBe(true);
 
     const fallback = render({
       options: [],
@@ -178,6 +179,23 @@ describe('SelectField：工作区那套下拉的公共形状', () => {
     expect(inputOf(fallback)?.props['value']).toBe('手填的');
   });
 
+  it('invalid：触发钮与退化成手填那格都挂 aria-invalid，没给就不挂', () => {
+    const trigger = elementsOf(menuOf(render({ invalid: true })).props['anchor']).find(
+      (one) => one.type === 'button',
+    );
+    expect(trigger?.props['aria-invalid']).toBe(true);
+
+    const ok = elementsOf(menuOf(render({})).props['anchor']).find((one) => one.type === 'button');
+    expect(ok?.props['aria-invalid']).toBeUndefined();
+
+    const fallback = render({
+      options: [],
+      invalid: true,
+      fallback: { value: '手填的', onChange: () => {} },
+    });
+    expect(inputOf(fallback)?.props['invalid']).toBe(true);
+  });
+
   it('label / hint 走 Field，footer 那条动作独立成一行', () => {
     const root = render({ label: '工作区', hint: '三选一' });
     expect(elementsOf(root).some((one) => one.type === Field)).toBe(true);