imccyu
6e721b9fdd
Add the browser Settings surface as slot-composed plugins over new preference services: - Rename dsh-client-i18n to dsh-client-locale (locale is the domain name); LocaleService adds getLocale()/setLocale(id), immutable snapshots, a locale/change event, and dsh.locale persistence. - ThemeService owns the light/dark/system preference (default system), resolves system via prefers-color-scheme, publishes theme/change snapshots, persists dsh.theme, and no longer touches the DOM; ui-layout's ThemePresenter applies resolved snapshots (body[data-ds-dark-theme] + alias tokens) and cleans up on dispose. - ui-sidebar drops the phase-1 settings dropdown/modal; the foot renders the new sidebar.settings slot with the column state. - New ui-settings shell occupies sidebar.settings: foot trigger row and the centered 1080x700 panel (figma 501:29947) with 24% mask, close button / mask click / Escape all closing, and a 188px nav projected from the settings.section list slot it declares. Nav labels are registrant-localized; sections re-register on locale change, so the ledger version is the shell's only subscription. - ui-settings-general registers the General section: Permission and Tool Call skeletons, live Language (locale menu) and Appearance (Light/Dark/System cubes following the persisted preference); its slot store mirrors both service snapshots via apply-side listeners. - ui-settings-models registers the Models nav entry with an empty content column. - Portaled menus pin z-index above modal overlays (a menu anchored inside the settings dialog rendered underneath it and was unclickable). - theme/data/list-pen icons in ui-primitives; settings copy ships as zh/en dictionaries; fixture manifests gain the settings rows.
59 lines
2.5 KiB
TypeScript
59 lines
2.5 KiB
TypeScript
// @vitest-environment jsdom
|
|
import { cleanup, render } from '@testing-library/react'
|
|
import { afterEach, describe, expect, it } from 'vitest'
|
|
import * as primitives from '@deepseek-ai/dsh-client-ui-primitives'
|
|
import { IconApiOutline14, IconFolderClose16, IconSendOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
|
|
|
|
afterEach(cleanup)
|
|
|
|
// Icon components all share the IconProps signature; the barrel also exports
|
|
// non-icon atoms (different props shapes), so filter by prefix BEFORE typing.
|
|
const icons = Object.fromEntries(
|
|
Object.entries(primitives).filter(([name]) => name.startsWith('Icon')),
|
|
) as Record<string, (p: primitives.IconProps) => React.JSX.Element>
|
|
const iconNames = Object.keys(icons)
|
|
|
|
describe('ic_ds_ icon set', () => {
|
|
it('exports the full P-I set (43 deepsuite + 12 figma extracts)', () => {
|
|
expect(iconNames.length).toBe(55)
|
|
})
|
|
|
|
it.each(iconNames)('%s renders an svg with currentColor fills and no hardcoded palette', name => {
|
|
const Icon = icons[name]!
|
|
const { container } = render(<Icon />)
|
|
const svg = container.querySelector('svg')
|
|
expect(svg).not.toBeNull()
|
|
const markup = container.innerHTML
|
|
expect(markup).not.toMatch(/#[0-9a-fA-F]{3,8}"/)
|
|
expect(markup).toContain('currentColor')
|
|
})
|
|
|
|
it('size and className props land on the root svg', () => {
|
|
const { container } = render(<IconSendOutline16 size={20} className="x" />)
|
|
const svg = container.querySelector('svg')!
|
|
expect(svg.getAttribute('width')).toBe('20')
|
|
expect(svg.getAttribute('height')).toBe('20')
|
|
expect(svg.classList.contains('x')).toBe(true)
|
|
})
|
|
|
|
it('native defaults: 14-glyphs default 14, 16-glyphs default 16', () => {
|
|
const api = render(<IconApiOutline14 />)
|
|
expect(api.container.querySelector('svg')!.getAttribute('width')).toBe('14')
|
|
const folder = render(<IconFolderClose16 />)
|
|
expect(folder.container.querySelector('svg')!.getAttribute('width')).toBe('16')
|
|
})
|
|
})
|
|
|
|
describe('FishLogo', () => {
|
|
it('renders the fish path in currentColor at the native ratio', () => {
|
|
const { container } = render(<primitives.FishLogo />)
|
|
const svg = container.querySelector('svg')!
|
|
expect(svg.getAttribute('width')).toBe('24')
|
|
expect(Number(svg.getAttribute('height'))).toBeCloseTo(17.66, 1)
|
|
expect(svg.getAttribute('viewBox')).toBe('0 0 23.16 17.04')
|
|
expect(container.querySelectorAll('path')).toHaveLength(1)
|
|
expect(container.innerHTML).toContain('currentColor')
|
|
expect(container.innerHTML).not.toContain('M0 0L23.16')
|
|
})
|
|
})
|