@linhey/rhine-design 0.2.0 → 0.4.0

package/tests/CommonComponents.test.tsx

@@ -65,7 +65,7 @@ describe('common design components', () => {
   });
   it('keeps a failed confirmation open and closes only after successful retry', async () => {
     const confirm=vi.fn().mockRejectedValueOnce(new Error('demo')).mockResolvedValue(undefined);
-    render(<div className="tod-theme"><ConfirmDialog trigger={<button>打开</button>} title="确认任务" description="演示" onConfirm={confirm}/></div>);
+    render(<div className="rhine-theme"><ConfirmDialog trigger={<button>打开</button>} title="确认任务" description="演示" onConfirm={confirm}/></div>);
     fireEvent.click(screen.getByRole('button',{name:'打开'}));expect(await screen.findByRole('alertdialog')).toBeVisible();expect(screen.getByRole('button',{name:'取消'})).toHaveFocus();fireEvent.click(screen.getByRole('button',{name:'确认操作'}));expect(await screen.findByRole('alert')).toHaveTextContent('操作未完成');fireEvent.click(screen.getByRole('button',{name:'确认操作'}));await waitFor(()=>expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
   });
 });

package/tests/GalleryShell.test.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { GalleryShell } from '../preview/GalleryShell';
+import { themes } from '@linhey/rhine-design/theme';
+
+function Demo() {
+  const [motion, setMotion] = useState('system');
+  return <GalleryShell motion={motion} onMotionChange={setMotion}>{section => <h1>{section}</h1>}</GalleryShell>;
+}
+function navigate(hash: string) {
+  act(() => {
+    window.history.replaceState(null, '', hash);
+    window.dispatchEvent(new HashChangeEvent('hashchange'));
+  });
+}
+afterEach(() => {
+  vi.restoreAllMocks();
+  window.history.replaceState(null, '', '/');
+  window.localStorage.clear();
+});
+
+describe('gallery theme integration', () => {
+  it('uses public metadata, prioritizes URL theme and persists choices without losing the chapter', () => {
+    window.localStorage.setItem('rhine-preview-theme', 'rhine');
+    window.history.replaceState(null, '', '/?theme=arknights&other=keep#forms');
+    render(<Demo />);
+    const picker = screen.getByRole('combobox', { name: '界面主题' });
+    expect(picker).toHaveValue('arknights');
+    expect(screen.getAllByRole('option').map(option => option.textContent)).toEqual(themes.map(item => item.label));
+    const main = screen.getByRole('main');
+    main.scrollTop = 120;
+    fireEvent.change(picker, { target: { value: 'neo-brutalism' } });
+    expect(main.closest('.rhine-theme')).toHaveAttribute('data-rhine-theme', 'neo-brutalism');
+    expect(main.scrollTop).toBe(120);
+    expect(screen.getByRole('heading')).toHaveTextContent('forms');
+    expect(window.localStorage.getItem('rhine-preview-theme')).toBe('neo-brutalism');
+    expect(window.location.search).toBe('?other=keep');
+    expect(window.location.hash).toBe('#forms');
+  });
+
+  it('restores a stored theme when the URL is invalid and falls back for unknown stored values', () => {
+    window.localStorage.setItem('rhine-preview-theme', 'neo-brutalism');
+    window.history.replaceState(null, '', '/?theme=unknown');
+    const { unmount } = render(<Demo />);
+    expect(screen.getByRole('combobox', { name: '界面主题' })).toHaveValue('neo-brutalism');
+    unmount();
+    window.localStorage.setItem('rhine-preview-theme', 'unknown');
+    render(<Demo />);
+    expect(screen.getByRole('combobox', { name: '界面主题' })).toHaveValue('rhine');
+  });
+
+  it('still switches when browser storage is unavailable', () => {
+    vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => { throw new Error('Storage disabled'); });
+    vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => { throw new Error('Storage disabled'); });
+    render(<Demo />);
+    const picker = screen.getByRole('combobox', { name: '界面主题' });
+    fireEvent.change(picker, { target: { value: 'arknights' } });
+    expect(picker).toHaveValue('arknights');
+    expect(screen.getByRole('main').closest('.rhine-theme')).toHaveAttribute('data-rhine-theme', 'arknights');
+  });
+});
+
+describe('gallery chapter navigation', () => {
+  it('opens deep links and follows history changes with one chapter and a current link', () => {
+    window.history.replaceState(null, '', '#typography');
+    render(<Demo />);
+    expect(screen.getByRole('heading')).toHaveTextContent('typography');
+    expect(screen.getByRole('link', {name:'字体与文字'})).toHaveAttribute('aria-current', 'page');
+    navigate('#motion');
+    expect(screen.getAllByRole('heading')).toHaveLength(1);
+    expect(screen.getByRole('heading')).toHaveTextContent('motion');
+    expect(screen.getByRole('main')).toHaveFocus();
+    navigate('#typography');
+    expect(screen.getByRole('heading')).toHaveTextContent('typography');
+    navigate('#unknown');
+    expect(screen.getByRole('heading')).toHaveTextContent('top');
+  });
+  it('keeps motion preferences while closing navigation on chapter changes', () => {
+    render(<Demo />);
+    fireEvent.click(screen.getByRole('radio', {name:'减少动态'}));
+    fireEvent.click(screen.getByRole('button', {name:'目录'}));
+    expect(screen.getByRole('button', {name:'目录'})).toHaveAttribute('aria-expanded','true');
+    navigate('#startup');
+    expect(screen.getByRole('button', {name:'目录'})).toHaveAttribute('aria-expanded','false');
+    expect(screen.getByRole('main').closest('.rhine-theme')).toHaveAttribute('data-rhine-motion','reduced');
+  });
+  it('closes the compact directory with Escape and returns focus to its trigger', () => {
+    render(<Demo />);
+    const trigger = screen.getByRole('button', {name:'目录'});
+    fireEvent.click(trigger);
+    const link = screen.getByRole('link', {name:'字体与文字'});
+    link.focus();
+    fireEvent.keyDown(link, {key:'Escape'});
+    expect(trigger).toHaveAttribute('aria-expanded','false');
+    expect(trigger).toHaveFocus();
+  });
+});

package/tests/Patterns.test.tsx

@@ -0,0 +1,75 @@
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Breadcrumbs, Drawer, ErrorSummary, Fieldset, SideNav, Steps, TextField } from '../components';
+import { PatternGallery } from '../preview/PatternGallery';
+
+describe('navigation and form workflow contracts', () => {
+  it('keeps split dialog selection and preview in one accessible modal', async () => {
+    render(<PatternGallery section="patterns"/>);
+    fireEvent.change(screen.getByRole('combobox',{name:'我正在设计什么场景'}),{target:{value:'monitor'}});
+    fireEvent.click(screen.getByRole('button',{name:'左右分栏预览'}));
+    const dialog=await screen.findByRole('dialog',{name:'选择范围'});
+    expect(dialog).toHaveClass('rhine-dialog--split');
+    fireEvent.change(within(dialog).getByRole('combobox',{name:'范围'}),{target:{value:'backup'}});
+    expect(within(dialog).getByRole('heading',{name:'备用资源 · 健康记录'})).toBeVisible();
+    expect(within(dialog).getByRole('slider')).toHaveAttribute('aria-valuetext','时段 96 · 未知 / 无数据');
+    fireEvent.keyDown(document.activeElement!,{key:'Escape'});
+    await waitFor(()=>expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  });
+  it('preserves real navigation links and identifies the current location', () => {
+    const navigate = vi.fn();
+    render(<><SideNav groups={[{label:'工作区',items:[{id:'a',label:'概览',href:'/overview',icon:'chart'},{id:'b',label:'记录',href:'/records'}]}]} currentId="b" onNavigate={(item,event)=>{event.preventDefault();navigate(item.id);}}/><Breadcrumbs items={[{label:'首页',href:'/'},{label:'记录'}]}/></>);
+    expect(screen.getByRole('link',{name:'记录'})).toHaveAttribute('href','/records');
+    expect(screen.getByRole('link',{name:'记录'})).toHaveAttribute('aria-current','page');
+    fireEvent.click(screen.getByRole('link',{name:'概览'})); expect(navigate).toHaveBeenCalledWith('a');
+    expect(within(screen.getByRole('navigation',{name:'当前位置'})).getByText('记录')).toHaveAttribute('aria-current','page');
+  });
+  it('only permits returning to completed steps and exposes current/error/completed states', () => {
+    const change=vi.fn(), items=[{id:'a',label:'输入'},{id:'b',label:'核对'},{id:'c',label:'完成'}];
+    const {rerender}=render(<Steps items={items} current={1} onStepChange={change} error="信息不完整"/>);
+    expect(screen.getAllByRole('button')).toHaveLength(1);
+    fireEvent.click(screen.getByRole('button',{name:'返回输入'}));expect(change).toHaveBeenCalledWith(0);
+    expect(screen.getByText('核对').closest('li')).toHaveAttribute('aria-current','step');
+    expect(screen.getByText(/需要修正/)).toHaveTextContent('信息不完整');
+    rerender(<Steps items={items} current={3}/>);
+    expect(screen.getAllByText('已完成')).toHaveLength(3);
+    expect(document.querySelector('[aria-current=step]')).toBeNull();
+  });
+  it('groups fields semantically and supports native disabled fieldsets', () => {
+    render(<Fieldset legend="连接" hint="只读任务暂不可编辑" disabled><TextField label="地址"/></Fieldset>);
+    expect(screen.getByRole('group',{name:'连接'})).toHaveAccessibleDescription('只读任务暂不可编辑');
+    expect(screen.getByRole('textbox',{name:'地址'})).toBeDisabled();
+  });
+  it('focuses an error summary only for submissions and links back without changing routes', () => {
+    const errors=[{fieldId:'workspace',message:'请输入名称'}];
+    const {rerender}=render(<><ErrorSummary errors={errors} focusKey={1}/><TextField id="workspace" label="名称"/></>);
+    expect(screen.getByRole('region',{name:'请修正以下问题'})).toHaveFocus();
+    const before=window.location.hash;fireEvent.click(screen.getByRole('link',{name:'请输入名称'}));
+    expect(screen.getByRole('textbox')).toHaveFocus();expect(window.location.hash).toBe(before);
+    rerender(<><ErrorSummary errors={[...errors]} focusKey={1}/><TextField id="workspace" label="名称"/></>);
+    expect(screen.getByRole('textbox')).toHaveFocus();
+    rerender(<><ErrorSummary errors={errors} focusKey={2}/><TextField id="workspace" label="名称"/></>);
+    expect(screen.getByRole('region')).toHaveFocus();
+  });
+  it('opens a themed drawer and restores the trigger focus on Escape', async () => {
+    render(<div className="rhine-theme" data-rhine-motion="reduced"><Drawer trigger={<button>查看详情</button>} title="详情" description="记录信息"><TextField label="备注"/></Drawer></div>);
+    const trigger=screen.getByRole('button',{name:'查看详情'}); trigger.focus();fireEvent.click(trigger);
+    const dialog=await screen.findByRole('dialog'); expect(dialog).toHaveClass('rhine-drawer');
+    expect(dialog.closest('.rhine-theme')).toHaveAttribute('data-rhine-motion','reduced');
+    expect(dialog).toContainElement(document.activeElement as HTMLElement);
+    fireEvent.keyDown(document.activeElement!,{key:'Escape'});
+    await waitFor(()=>expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    await waitFor(()=>expect(trigger).toHaveFocus());
+  });
+  it('retains form input on failure and clears the summary only after valid resubmission', () => {
+    render(<PatternGallery section="form-workflow"/>);
+    fireEvent.change(screen.getByRole('textbox',{name:'工作区名称'}),{target:{value:'研究'}});
+    fireEvent.click(screen.getByRole('button',{name:'验证配置'}));
+    expect(screen.getByRole('textbox',{name:'工作区名称'})).toHaveValue('研究');
+    expect(screen.getByRole('region')).toHaveFocus();
+    fireEvent.change(screen.getByRole('textbox',{name:'服务地址'}),{target:{value:'https://example.com'}});
+    fireEvent.click(screen.getByRole('button',{name:'验证配置'}));
+    expect(screen.queryByRole('region')).not.toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveTextContent('没有保存到服务端');
+  });
+});

package/tests/StartupGallery.test.tsx

@@ -44,11 +44,11 @@ it('keeps the same brand node when readiness arrives and makes the login preview
   vi.useFakeTimers();
   const { container } = render(<StartupGallery reduced={false} />);
   fireEvent.click(screen.getByRole('button', { name: '播放启动动画' }));
-  const logo = container.querySelector('.ds-startup-logo-anchor .tod-logo');
+  const logo = container.querySelector('.ds-startup-logo-anchor .rhine-logo');
   act(() => vi.advanceTimersByTime(300));
   fireEvent.click(screen.getByRole('button', { name: '模拟就绪 · 立即进入' }));
-  expect(container.querySelector('.ds-startup-logo-anchor .tod-logo')).toBe(logo);
-  expect(container.querySelectorAll('.ds-startup-stage .tod-logo')).toHaveLength(1);
+  expect(container.querySelector('.ds-startup-logo-anchor .rhine-logo')).toBe(logo);
+  expect(container.querySelectorAll('.ds-startup-stage .rhine-logo')).toHaveLength(1);
   fireEvent.click(screen.getByRole('button', { name: '在浏览器中登录' }));
   expect(screen.getByText('仅演示登录入口，不会打开授权页面。')).toBeInTheDocument();
   expect(vi.getTimerCount()).toBe(0);

package/tests/StatusTimeline.test.tsx

@@ -0,0 +1,15 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { expect, it } from 'vitest';
+import { StatusTimeline, TimelineLegend } from '../components';
+
+it('announces time and evidence with a single native range control, including unknown and empty states',()=>{
+  const {rerender}=render(<><StatusTimeline label="账号历史" startLabel="昨天" endLabel="今天" segments={[{id:'a',label:'10:00',status:'failed'},{id:'b',label:'10:15',status:'unknown'}]}/><TimelineLegend/></>);
+  const slider=screen.getByRole('slider',{name:'账号历史'});
+  expect(slider).toHaveAttribute('aria-valuetext','10:15 · 未知 / 无数据');
+  fireEvent.change(slider,{target:{value:'0'}});
+  expect(slider).toHaveAttribute('aria-valuetext','10:00 · 存在最终失败');
+  expect(screen.getByRole('list',{name:'健康记录图例'})).toHaveTextContent('重试已恢复');
+  rerender(<StatusTimeline label="账号历史" startLabel="昨天" endLabel="今天" segments={[]}/>);
+  expect(screen.getByRole('slider')).toBeDisabled();
+  expect(screen.getByText('暂无记录')).toBeVisible();
+});

package/tests/Theme.test.tsx

@@ -0,0 +1,112 @@
+import { useState } from 'react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ThemeProvider, themes, useTheme, type ThemeName } from '@linhey/rhine-design/theme';
+import { Button, Dialog } from '../components';
+
+function Controls() {
+  const { theme, setTheme } = useTheme();
+  const [count, setCount] = useState(0);
+  return <>
+    <output aria-label="当前主题">{theme}</output>
+    {themes.map(item => <button key={item.name} onClick={() => setTheme(item.name)}>{item.label}</button>)}
+    <button onClick={() => setCount(count + 1)}>计数 {count}</button>
+    <input aria-label="草稿" defaultValue="" />
+  </>;
+}
+
+describe('public theme API', () => {
+  it('defaults to rhine and preserves the DOM, state and input across all themes', () => {
+    const onThemeChange = vi.fn();
+    render(<ThemeProvider onThemeChange={onThemeChange} className="host" id="app" data-rhine-motion="reduced"><Controls /></ThemeProvider>);
+    const root = document.getElementById('app')!;
+    expect(root).toHaveClass('rhine-theme', 'host');
+    expect(root).toHaveAttribute('data-rhine-motion', 'reduced');
+    expect(root).toHaveAttribute('data-rhine-theme', 'rhine');
+    fireEvent.click(screen.getByRole('button', { name: '计数 0' }));
+    const input = screen.getByRole('textbox', { name: '草稿' });
+    fireEvent.change(input, { target: { value: '未保存的内容' } });
+    for (const name of ['arknights', 'neo-brutalism', 'rhine'] as const) {
+      fireEvent.click(screen.getByRole('button', { name: themes.find(item => item.name === name)!.label }));
+      expect(root).toHaveAttribute('data-rhine-theme', name);
+      expect(screen.getByLabelText('当前主题')).toHaveTextContent(name);
+      expect(screen.getByRole('textbox')).toBe(input);
+      expect(input).toHaveValue('未保存的内容');
+      expect(screen.getByRole('button', { name: '计数 1' })).toBeInTheDocument();
+    }
+    expect(onThemeChange.mock.calls).toEqual([['arknights'], ['neo-brutalism'], ['rhine']]);
+    fireEvent.click(screen.getByRole('button', { name: '莱茵 · 纸面' }));
+    expect(onThemeChange).toHaveBeenCalledTimes(3);
+  });
+
+  it('uses defaultTheme only on mount', () => {
+    const { rerender } = render(<ThemeProvider defaultTheme="arknights"><Controls /></ThemeProvider>);
+    expect(screen.getByLabelText('当前主题')).toHaveTextContent('arknights');
+    rerender(<ThemeProvider defaultTheme="neo-brutalism"><Controls /></ThemeProvider>);
+    expect(screen.getByLabelText('当前主题')).toHaveTextContent('arknights');
+  });
+
+  it('leaves controlled updates to the host and follows subsequent props', () => {
+    const onThemeChange = vi.fn();
+    const { rerender } = render(<ThemeProvider theme="rhine" onThemeChange={onThemeChange}><Controls /></ThemeProvider>);
+    fireEvent.click(screen.getByRole('button', { name: '明日方舟 · 战术终端' }));
+    expect(onThemeChange).toHaveBeenCalledWith('arknights');
+    expect(screen.getByLabelText('当前主题')).toHaveTextContent('rhine');
+    rerender(<ThemeProvider theme="arknights" onThemeChange={onThemeChange}><Controls /></ThemeProvider>);
+    expect(screen.getByLabelText('当前主题')).toHaveTextContent('arknights');
+    expect(onThemeChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps sibling providers independent', () => {
+    render(<><ThemeProvider aria-label="A"><Controls /></ThemeProvider><ThemeProvider aria-label="B" defaultTheme="neo-brutalism"><Controls /></ThemeProvider></>);
+    const a = screen.getByLabelText('A'), b = screen.getByLabelText('B');
+    fireEvent.click(within(a).getByRole('button', { name: '明日方舟 · 战术终端' }));
+    expect(a).toHaveAttribute('data-rhine-theme', 'arknights');
+    expect(b).toHaveAttribute('data-rhine-theme', 'neo-brutalism');
+    expect(within(b).getByLabelText('当前主题')).toHaveTextContent('neo-brutalism');
+  });
+
+  it('does not read or write host storage', () => {
+    const read = vi.spyOn(Storage.prototype, 'getItem');
+    const write = vi.spyOn(Storage.prototype, 'setItem');
+    try {
+      render(<ThemeProvider><Controls /></ThemeProvider>);
+      fireEvent.click(screen.getByRole('button', { name: '明日方舟 · 战术终端' }));
+      expect(read).not.toHaveBeenCalled();
+      expect(write).not.toHaveBeenCalled();
+    } finally { read.mockRestore(); write.mockRestore(); }
+  });
+
+  it('keeps an open dialog in the same theme root, preserving its draft and focus', () => {
+    render(<ThemeProvider><Dialog trigger={<Button>打开</Button>} title="主题测试" description="保持浮层状态"><Controls /></Dialog></ThemeProvider>);
+    const trigger = screen.getByRole('button', { name: '打开' });
+    fireEvent.click(trigger);
+    const dialog = screen.getByRole('dialog');
+    const root = trigger.closest('.rhine-theme');
+    expect(dialog.closest('.rhine-theme')).toBe(root);
+    fireEvent.change(within(dialog).getByRole('textbox'), { target: { value: '浮层草稿' } });
+    const switcher = within(dialog).getByRole('button', { name: '明日方舟 · 战术终端' });
+    switcher.focus();
+    fireEvent.click(switcher);
+    expect(root).toHaveAttribute('data-rhine-theme', 'arknights');
+    expect(screen.getByRole('dialog')).toBe(dialog);
+    expect(within(dialog).getByRole('textbox')).toHaveValue('浮层草稿');
+    expect(switcher).toHaveFocus();
+  });
+
+  it('explains missing providers, nested providers and invalid theme names', () => {
+    expect(() => render(<Controls />)).toThrow('useTheme must be used within');
+    expect(() => render(<ThemeProvider><ThemeProvider /></ThemeProvider>)).toThrow('Nested Rhine ThemeProvider is not supported');
+    expect(() => render(<ThemeProvider theme={'unknown' as ThemeName} />)).toThrow('Unknown Rhine theme');
+  });
+
+  it('rejects invalid imperative requests without updating state or notifying the host', () => {
+    let setTheme: (theme: ThemeName) => void = () => {};
+    function Capture() { setTheme = useTheme().setTheme; return null; }
+    const onThemeChange = vi.fn();
+    render(<ThemeProvider onThemeChange={onThemeChange}><Capture /><Controls /></ThemeProvider>);
+    expect(() => setTheme('unknown' as ThemeName)).toThrow('Unknown Rhine theme');
+    expect(screen.getByLabelText('当前主题')).toHaveTextContent('rhine');
+    expect(onThemeChange).not.toHaveBeenCalled();
+  });
+});