@dsh-workbench/shared 0.2.10 → 0.2.11

package/src/components/CardAnchor.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('../lib/react.js', () => ({
+  h: (type: unknown, props: unknown, ...children: unknown[]) => ({ type, props, children }),
+}));
+
+vi.mock('./CardAnchor.module.css', () => ({ default: { anchor: 'wb-anchor' } }));
+
+import { CardAnchor, cardIdOf } from './CardAnchor.js';
+
+interface AnyElement {
+  readonly type: unknown;
+  readonly props: Record<string, unknown>;
+  readonly children: unknown[];
+}
+
+function anchor(unit: string): AnyElement {
+  return CardAnchor({ unit, children: 'card' }) as unknown as AnyElement;
+}
+
+describe('外壳给每张卡盖的锚点', () => {
+  it('★★ 锚点就是 #wb-card-<unit>，卡在外面量不出盒子也不动布局（display: contents）', () => {
+    const root = anchor('demo');
+
+    expect(root.type).toBe('div');
+    expect(root.props['id']).toBe('wb-card-demo');
+    expect(root.props['className']).toBe('wb-anchor');
+    expect(root.children).toEqual(['card']);
+  });
+
+  it('★ 名字由 unit 拼出来：空 unit 不给 id（一个页面里 id 必须唯一）', () => {
+    expect(cardIdOf(null)).toBeUndefined();
+    expect(cardIdOf('')).toBeUndefined();
+    expect(cardIdOf('cmdb')).toBe('wb-card-cmdb');
+  });
+});

package/src/components/CardAnchor.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from '../lib/react.js';
+import { h } from '../lib/react.js';
+import styles from './CardAnchor.module.css';
+
+export function cardIdOf(unit: string | null): string | undefined {
+  return unit === null || unit === '' ? undefined : `wb-card-${unit}`;
+}
+
+export interface CardAnchorProps {
+  readonly unit: string;
+  readonly children?: ReactNode | undefined;
+}
+
+export function CardAnchor({ unit, children }: CardAnchorProps) {
+  return (
+    <div id={cardIdOf(unit)} className={styles.anchor}>
+      {children}
+    </div>
+  );
+}

package/src/components/CardHead.css

@@ -4,7 +4,7 @@
   align-items: center;
   gap: var(--wb-len-6);
   flex: none;
-  padding: var(--wb-len-8) var(--wb-len-10) var(--wb-len-8) var(--wb-len-20);
+  padding: var(--wb-len-8) var(--wb-len-10) var(--wb-len-8) var(--wb-card-gutter);
   border-bottom: 0.5px solid var(--dsw-alias-border-l2);
   background: var(--dsw-alias-bg-layer-2);
 }
@@ -86,7 +86,3 @@
 .wb-cardGear:hover:not(:disabled) {
   color: var(--dsw-alias-label-primary);
 }
-
-.wb-cardRefresh.wb-spinning svg {
-  animation: wb-spin var(--wb-dur-0-9) linear infinite;
-}

package/src/components/ChoiceGroup.css

@@ -62,7 +62,7 @@
 }
 
 .wb-checkbox:disabled + .wb-checkboxBox {
-  opacity: 0.5;
+  cursor: default;
 }
 
 .wb-checkbox:focus-visible + .wb-checkboxBox {
@@ -75,6 +75,16 @@
   background: var(--dsw-alias-interactive-bg-hover);
 }
 
+.wb-choiceOption:has(:disabled) {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.wb-choiceOption:has(:disabled),
+.wb-choiceOption:has(:disabled):hover {
+  background: transparent;
+}
+
 .wb-choiceLabel {
   flex: 1;
   min-width: 0;
@@ -115,7 +125,6 @@
 
 .wb-radio:disabled {
   cursor: default;
-  opacity: 0.5;
 }
 
 .wb-radio:focus-visible {

package/src/components/Field.css

@@ -14,3 +14,7 @@
   line-height: var(--wb-line-18);
   color: var(--dsw-alias-label-tertiary);
 }
+
+.wb-field:has(:disabled) .wb-fieldLabel {
+  opacity: 0.4;
+}

package/src/components/MockStrip.css

@@ -36,4 +36,10 @@
   border-color: transparent;
   background: var(--dsw-alias-brand-primary);
   color: var(--dsw-alias-label-primary-foreground);
+}
+
+.wb-mockChipOn:hover {
+  border-color: transparent;
+  background: var(--dsw-alias-brand-primary);
+  color: var(--dsw-alias-label-primary-foreground);
 }

package/src/components/Note.css

@@ -1,14 +1,14 @@
 
 .wb-note {
   margin: 0;
-  font-size: var(--dsw-font-xxxs-11-font-size);
-  line-height: var(--wb-line-16);
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
   color: var(--dsw-alias-label-tertiary);
 }
 .wb-problem {
   margin: 0;
-  font-size: var(--dsw-font-xxxs-11-font-size);
-  line-height: var(--wb-line-16);
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
   color: var(--dsw-alias-state-error-primary);
   overflow-wrap: anywhere;
 }

package/src/components/SelectField.css

@@ -0,0 +1,156 @@
+:where(.wb-selectTrigger) {
+  box-sizing: border-box;
+  display: flex;
+  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);
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  border-radius: var(--dsw-radius-md);
+  background: var(--dsw-alias-bg-layer-3);
+  font: var(--dsw-font-xs-13);
+  color: var(--dsw-alias-label-primary);
+  text-align: left;
+  cursor: pointer;
+}
+
+.wb-selectTrigger:focus-visible {
+  outline: none;
+  border-color: var(--dsw-alias-state-business-primary);
+  box-shadow: inset 0 0 0 0.5px var(--dsw-alias-state-business-primary);
+}
+
+.wb-selectTrigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.wb-selectLoading:disabled {
+  cursor: default;
+  opacity: 1;
+}
+
+.wb-selectGhost {
+  gap: var(--wb-gap-xs);
+  min-height: 0;
+  height: var(--wb-len-34);
+  padding: 0 var(--wb-len-8);
+  border: none;
+  background: transparent;
+  font-size: var(--wb-font-row);
+}
+
+.wb-selectGhost:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.wb-selectGhost:focus-visible {
+  outline: var(--dsw-focus-ring-width) solid
+    var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: -2px;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.wb-selectAnchor {
+  display: block;
+  width: 100%;
+}
+
+.wb-selectIcon {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wb-len-16);
+  height: var(--wb-len-20);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-selectValue {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+  gap: var(--wb-len-6);
+  line-height: var(--wb-line-20);
+  overflow: hidden;
+}
+
+.wb-selectPlaceholder {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-selectChevron {
+  flex: none;
+  display: inline-flex;
+  color: var(--dsw-alias-label-caption);
+}
+
+.wb-selectMenu {
+  min-width: var(--wb-len-240);
+  max-width: var(--wb-len-360);
+  max-height: min(var(--wb-len-320), calc(100vh - var(--wb-len-24)));
+}
+
+:where(.wb-selectSearch) {
+  box-sizing: border-box;
+  display: flex;
+  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);
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  border-radius: var(--dsw-radius-md);
+  background: var(--dsw-alias-bg-layer-3);
+}
+
+.wb-selectSearch:focus-within {
+  border-color: var(--dsw-alias-state-business-primary);
+  box-shadow: inset 0 0 0 0.5px var(--dsw-alias-state-business-primary);
+}
+
+.wb-selectSearch.wb-selectGhost {
+  gap: var(--wb-gap-xs);
+  min-height: 0;
+  height: var(--wb-len-34);
+  padding: 0 var(--wb-len-8);
+  border: 0.5px solid var(--dsw-alias-border-l3);
+  background: var(--dsw-alias-bg-layer-2);
+}
+
+.wb-selectSearch.wb-selectGhost:focus-within {
+  border-color: var(--dsw-alias-state-business-primary);
+  box-shadow: none;
+}
+
+.wb-selectSearchIcon {
+  flex: none;
+  display: inline-flex;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-textField.wb-selectSearchInput {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+.wb-textField.wb-selectSearchInput:focus {
+  box-shadow: none;
+}
+
+.wb-selectFallback {
+  width: 100%;
+}
+
+.wb-selectHint {
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  color: var(--dsw-alias-label-tertiary);
+}

package/src/components/SelectField.test.tsx

@@ -0,0 +1,238 @@
+import { describe, expect, it, vi } from 'vitest';
+
+let states: unknown[] = [];
+vi.mock('../lib/react.js', () => ({
+  h: (type: unknown, props: unknown, ...children: unknown[]) => ({ type, props, children }),
+  useEffect: () => {},
+  useMemo: (compute: () => unknown) => compute(),
+  useRef: () => ({ current: null }),
+  useState: (initial: unknown) => [states.length > 0 ? states.shift() : initial, () => {}],
+}));
+
+vi.mock('./SelectField.css', () => ({ default: {} }));
+
+import { Menu, StateDot, TextShimmer } from '@deepseek-ai/dsh-client-ui-primitives';
+import type { MenuEntry } from '@deepseek-ai/dsh-client-ui-primitives';
+import { h } from '../lib/react.js';
+import { Field } from './Field.js';
+import { TextField } from './TextField.js';
+import {
+  SelectField,
+  defaultSelectFilter,
+  selectCursorValue,
+  selectEntries,
+  stepSelectCursor,
+} from './SelectField.js';
+
+interface AnyElement {
+  readonly type: unknown;
+  readonly props: Record<string, unknown>;
+  readonly children?: unknown;
+}
+
+function childrenOf(element: AnyElement): unknown {
+  return element.children ?? element.props['children'];
+}
+
+function collect(node: unknown, out: AnyElement[] = []): AnyElement[] {
+  if (node === null || node === void 0 || typeof node === 'boolean') return out;
+  if (typeof node === 'string' || typeof node === 'number') return out;
+  if (Array.isArray(node)) {
+    for (const one of node) collect(one, out);
+    return out;
+  }
+  if (typeof node !== 'object') return out;
+  const element = node as AnyElement;
+  out.push(element);
+  collect(childrenOf(element), out);
+  return out;
+}
+
+function elementsOf(root: unknown): readonly AnyElement[] {
+  return collect(root);
+}
+
+function menuOf(root: unknown): AnyElement {
+  const menu = elementsOf(root).find((one) => one.type === Menu);
+  if (menu === undefined) throw new Error('没有渲染出 Menu');
+  return menu;
+}
+
+function inputOf(root: unknown): AnyElement | undefined {
+  return elementsOf(root).find((one) => one.type === TextField);
+}
+
+function render(props: Record<string, unknown>, state: readonly unknown[] = []): unknown {
+  states = [...state];
+  return SelectField({
+    value: 'b',
+    options: OPTIONS,
+    onChange: () => {},
+    ...props,
+  } as never);
+}
+
+const OPTIONS = [
+  { value: 'a', label: '工作区甲', group: '工作区' },
+  { value: 'b', label: '工作区乙', group: '工作区' },
+  { value: 'c', label: '默认工作区', group: '默认' },
+];
+
+describe('SelectField：工作区那套下拉的公共形状', () => {
+  it('关着：触发钮上是当前选项，菜单条目已经按分组排好', () => {
+    const root = render({});
+    const menu = menuOf(root);
+
+    expect(menu.props['open']).toBe(false);
+    expect(menu.props['listClassName']).toContain('wb-selectMenu');
+    const trigger = elementsOf(menu.props['anchor']).find((one) => one.type === 'button');
+    expect(trigger?.props['aria-haspopup']).toBe('listbox');
+    expect(trigger?.props['aria-expanded']).toBe(false);
+    expect(JSON.stringify(trigger?.children)).toContain('工作区乙');
+
+    const items = menu.props['items'] as readonly MenuEntry[];
+    expect(items).toEqual([
+      { type: 'label', id: '__wb-select-group-0', text: '工作区' },
+      { id: 'a', label: '工作区甲' },
+      { id: 'b', label: '工作区乙' },
+      { type: 'label', id: '__wb-select-group-3', text: '默认' },
+      { id: 'c', label: '默认工作区' },
+    ]);
+  });
+
+  it('开着：锚点换成搜索框（这是这套交互的要点）', () => {
+    const root = render({}, [true, '', null]);
+    const menu = menuOf(root);
+
+    expect(menu.props['open']).toBe(true);
+    const anchor = elementsOf(menu.props['anchor']);
+    const box = anchor.find((one) => one.props['className'] === 'wb-selectSearch');
+    expect(box).toBeDefined();
+    expect(anchor.some((one) => one.type === 'button')).toBe(false);
+    expect(inputOf(menu.props['anchor'])?.props['value']).toBe('');
+  });
+
+  it('禁用：触发钮真的 disabled（压暗交给样式，别只在视觉上假装）', () => {
+    const root = render({ disabled: true });
+    const trigger = elementsOf(menuOf(root).props['anchor']).find((one) => one.type === 'button');
+
+    expect(trigger?.props['disabled']).toBe(true);
+  });
+
+  it('默认是常规下拉框，无边框那一档要显式选（工作区切换器走的是它）', () => {
+    const boxed = elementsOf(menuOf(render({})).props['anchor']).find(
+      (one) => one.type === 'button',
+    );
+    expect(boxed?.props['className']).toBe('wb-selectTrigger');
+
+    const ghost = elementsOf(menuOf(render({ variant: 'ghost' })).props['anchor']).find(
+      (one) => one.type === 'button',
+    );
+    expect(ghost?.props['className']).toBe('wb-selectTrigger wb-selectGhost');
+
+    const ghostSearch = elementsOf(
+      menuOf(render({ variant: 'ghost' }, [true, '', null])).props['anchor'],
+    ).find((one) => one.props['className'] === 'wb-selectSearch wb-selectGhost');
+    expect(ghostSearch).toBeDefined();
+  });
+
+  it('搜索：按纯文本过滤（label 不是字符串时用 searchText）', () => {
+    const root = render({}, [true, '默认', null]);
+    const items = menuOf(root).props['items'] as readonly MenuEntry[];
+    expect(items).toEqual([
+      { type: 'label', id: '__wb-select-group-0', text: '默认' },
+      { id: 'c', label: '默认工作区' },
+    ]);
+
+    states = [true, '甲', null];
+    const byText = menuOf(
+      SelectField({
+        value: 'b',
+        options: [{ value: 'a', label: <span>看不见的字</span>, searchText: '工作区甲' }],
+        onChange: () => {},
+      } as never),
+    ).props['items'] as readonly MenuEntry[];
+    expect(byText).toEqual([{ id: 'a', label: expect.anything() }]);
+  });
+
+  it('搜不到 / 加载中 / 空名单退化成手填，三种态各有明确落点', () => {
+    const empty = render({ emptyText: '没有匹配的工作区' }, [true, 'zzz', null]);
+    expect(menuOf(empty).props['items']).toEqual([
+      { type: 'label', id: '__wb-select-empty__', text: '没有匹配的工作区' },
+    ]);
+
+    const withoutEmpty = render({}, [true, 'zzz', null]);
+    expect(menuOf(withoutEmpty).props['items']).toEqual([]);
+
+    const loading = render({ loading: true, loadingText: '正在读工作区' });
+    const busy = elementsOf(loading).find((one) => one.type === 'button');
+    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);
+
+    const fallback = render({
+      options: [],
+      fallback: { value: '手填的', onChange: () => {} },
+    });
+    expect(inputOf(fallback)?.props['value']).toBe('手填的');
+  });
+
+  it('label / hint 走 Field，footer 那条动作独立成一行', () => {
+    const root = render({ label: '工作区', hint: '三选一' });
+    expect(elementsOf(root).some((one) => one.type === Field)).toBe(true);
+
+    const footer = render({ footer: { label: '添加工作区…' }, onFooter: () => {} });
+    expect(menuOf(footer).props['footer']).toEqual([
+      { id: '__wb-select-footer__', label: '添加工作区…' },
+    ]);
+  });
+
+  it('选中与页脚动作各给各的出口，选中之后菜单关掉', () => {
+    const seen: string[] = [];
+    const root = render({ onChange: (next: string) => seen.push(next) });
+    (menuOf(root).props['onSelect'] as (id: string) => void)('c');
+    expect(seen).toEqual(['c']);
+
+    let added = 0;
+    const withFooter = render({ footer: { label: '添加工作区…' }, onFooter: () => (added += 1) });
+    (menuOf(withFooter).props['onSelect'] as (id: string) => void)('__wb-select-footer__');
+    expect(added).toBe(1);
+  });
+
+  it('游标：从 null 起步、两头回绕、空名单不动', () => {
+    expect(stepSelectCursor(OPTIONS, null, 1)).toBe(0);
+    expect(stepSelectCursor(OPTIONS, null, -1)).toBe(2);
+    expect(stepSelectCursor(OPTIONS, 2, 1)).toBe(0);
+    expect(stepSelectCursor(OPTIONS, 0, -1)).toBe(2);
+    expect(stepSelectCursor([], null, 1)).toBeNull();
+    expect(selectCursorValue(OPTIONS, 9)).toBe('c');
+    expect(selectCursorValue(OPTIONS, null)).toBeNull();
+    expect(selectCursorValue([], 0)).toBeNull();
+  });
+
+  it('默认过滤：空查询全过、大小写不敏感、label 与 searchText 都认', () => {
+    const option = { value: 'x', label: '腾讯云 · 生产' };
+    expect(defaultSelectFilter(option, '  ')).toBe(true);
+    expect(defaultSelectFilter(option, '生产')).toBe(true);
+    expect(defaultSelectFilter({ value: 'x', label: <span>生产</span>, searchText: 'tencent-prod' }, 'TENCENT')).toBe(
+      true,
+    );
+    expect(defaultSelectFilter(option, 'nope')).toBe(false);
+  });
+
+  it('条目构造：图标与禁用照传，分组标题只在换组时出现一次', () => {
+    const items = selectEntries(
+      [
+        { value: 'a', label: '甲', group: 'G', disabled: true },
+        { value: 'b', label: '乙', group: 'G', icon: <span>ico</span> },
+      ],
+      undefined,
+    );
+    expect(items).toEqual([
+      { type: 'label', id: '__wb-select-group-0', text: 'G' },
+      { id: 'a', label: '甲', disabled: true },
+      { id: 'b', label: '乙', icon: expect.anything() },
+    ]);
+  });
+});