Skip to content

Commit 989d4f1

Browse files
antfubotantfubot
committed
refactor: centralize dock-icon class map in shared design helpers
The vite and next hub playgrounds each hand-maintained an identical copy of the dock-icon -> UnoCSS class map. Move it into the shared design/design.ts class-helper module (already the one source of truth for devframe -> @antfu/design class chains) and have both examples' icons.ts re-export it, matching the existing local design.ts re-export pattern used by every other plugin/example.
1 parent feff553 commit 989d4f1

3 files changed

Lines changed: 45 additions & 70 deletions

File tree

‎design/design.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,43 @@ export function cx(...parts: Array<string | false | null | undefined>): string {
1313
return parts.filter(Boolean).join(' ')
1414
}
1515

16+
// ── Dock icons ──────────────────────────────────────────────────────────────
17+
// Map a devframe dock `icon` (e.g. `ph:git-branch-duotone`) to a UnoCSS
18+
// `preset-icons` class. Keeping the class strings literal lets UnoCSS
19+
// statically extract them and inline only these glyphs from `@iconify-json/ph`
20+
// at build time — the same icon strategy vite-devtools uses. This is the one
21+
// source of truth every hub shell (vite, next, storybook, …) shares instead of
22+
// hand-maintaining its own copy — add a row here to support another dock icon.
23+
const DOCK_ICON_CLASS: Record<string, string> = {
24+
'ph:git-branch-duotone': 'i-ph-git-branch-duotone',
25+
'ph:terminal-window-duotone': 'i-ph-terminal-window-duotone',
26+
'ph:code-duotone': 'i-ph-code-duotone',
27+
'ph:stethoscope-duotone': 'i-ph-stethoscope-duotone',
28+
'ph:wheelchair-duotone': 'i-ph-wheelchair-duotone',
29+
'ph:rocket-duotone': 'i-ph-rocket-duotone',
30+
'ph:wrench-duotone': 'i-ph-wrench-duotone',
31+
'ph:plug-duotone': 'i-ph-plug-duotone',
32+
'ph:layout-duotone': 'i-ph-layout-duotone',
33+
'ph:note-pencil-duotone': 'i-ph-note-pencil-duotone',
34+
'ph:squares-four-duotone': 'i-ph-squares-four-duotone',
35+
'ph:house-duotone': 'i-ph-house-duotone',
36+
'ph:puzzle-piece-duotone': 'i-ph-puzzle-piece-duotone',
37+
'ph:clock-duotone': 'i-ph-clock-duotone',
38+
'ph:gear-duotone': 'i-ph-gear-duotone',
39+
'ph:sliders-horizontal-duotone': 'i-ph-sliders-horizontal-duotone',
40+
}
41+
42+
/**
43+
* Resolve a dock icon to its UnoCSS class, or an empty string when the icon
44+
* isn't mapped (the caller falls back to a text initial).
45+
*/
46+
export function iconClass(name: string | { light: string, dark: string } | undefined): string {
47+
if (!name)
48+
return ''
49+
const id = typeof name === 'string' ? name : name.light
50+
return DOCK_ICON_CLASS[id] ?? ''
51+
}
52+
1653
export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'
1754
export type ButtonSize = 'md' | 'sm' | 'lg'
1855
export interface ButtonProps { variant?: ButtonVariant, size?: ButtonSize, class?: string }

‎examples/minimal-next-devframe-hub/src/client/app/icons.ts‎

Lines changed: 4 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,4 @@
1-
// @unocss-include
2-
// Map a devframe dock `icon` (e.g. `ph:git-branch-duotone`) to a UnoCSS
3-
// `preset-icons` class. Keeping the class strings literal lets UnoCSS
4-
// statically extract them and inline only these glyphs from `@iconify-json/ph`
5-
// at build time — the same icon strategy vite-devtools uses. Add a row here to
6-
// support another dock icon.
7-
const ICON_CLASS: Record<string, string> = {
8-
'ph:git-branch-duotone': 'i-ph-git-branch-duotone',
9-
'ph:terminal-window-duotone': 'i-ph-terminal-window-duotone',
10-
'ph:code-duotone': 'i-ph-code-duotone',
11-
'ph:stethoscope-duotone': 'i-ph-stethoscope-duotone',
12-
'ph:wheelchair-duotone': 'i-ph-wheelchair-duotone',
13-
'ph:rocket-duotone': 'i-ph-rocket-duotone',
14-
'ph:wrench-duotone': 'i-ph-wrench-duotone',
15-
'ph:plug-duotone': 'i-ph-plug-duotone',
16-
'ph:layout-duotone': 'i-ph-layout-duotone',
17-
'ph:note-pencil-duotone': 'i-ph-note-pencil-duotone',
18-
'ph:squares-four-duotone': 'i-ph-squares-four-duotone',
19-
'ph:house-duotone': 'i-ph-house-duotone',
20-
'ph:puzzle-piece-duotone': 'i-ph-puzzle-piece-duotone',
21-
'ph:clock-duotone': 'i-ph-clock-duotone',
22-
'ph:gear-duotone': 'i-ph-gear-duotone',
23-
'ph:sliders-horizontal-duotone': 'i-ph-sliders-horizontal-duotone',
24-
}
25-
26-
/**
27-
* Resolve a dock icon to its UnoCSS class, or an empty string when the icon
28-
* isn't mapped (the caller falls back to a text initial).
29-
*/
30-
export function iconClass(name: string | { light: string, dark: string } | undefined): string {
31-
if (!name)
32-
return ''
33-
const id = typeof name === 'string' ? name : name.light
34-
return ICON_CLASS[id] ?? ''
35-
}
1+
// Re-exports the shared devframe dock-icon → UnoCSS class map (see
2+
// `design/design.ts`) so this surface stays in lockstep with every other hub
3+
// shell instead of hand-maintaining its own copy of the icon table.
4+
export { iconClass } from '../../../../../design/design'

‎examples/minimal-vite-devframe-hub/src/client/icons.ts‎

Lines changed: 4 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,4 @@
1-
// @unocss-include
2-
// Map a devframe dock `icon` (e.g. `ph:git-branch-duotone`) to a UnoCSS
3-
// `preset-icons` class. Keeping the class strings literal lets UnoCSS
4-
// statically extract them and inline only these glyphs from `@iconify-json/ph`
5-
// at build time — the same icon strategy vite-devtools uses. Add a row here to
6-
// support another dock icon.
7-
const ICON_CLASS: Record<string, string> = {
8-
'ph:git-branch-duotone': 'i-ph-git-branch-duotone',
9-
'ph:terminal-window-duotone': 'i-ph-terminal-window-duotone',
10-
'ph:code-duotone': 'i-ph-code-duotone',
11-
'ph:stethoscope-duotone': 'i-ph-stethoscope-duotone',
12-
'ph:wheelchair-duotone': 'i-ph-wheelchair-duotone',
13-
'ph:rocket-duotone': 'i-ph-rocket-duotone',
14-
'ph:wrench-duotone': 'i-ph-wrench-duotone',
15-
'ph:plug-duotone': 'i-ph-plug-duotone',
16-
'ph:layout-duotone': 'i-ph-layout-duotone',
17-
'ph:note-pencil-duotone': 'i-ph-note-pencil-duotone',
18-
'ph:squares-four-duotone': 'i-ph-squares-four-duotone',
19-
'ph:house-duotone': 'i-ph-house-duotone',
20-
'ph:puzzle-piece-duotone': 'i-ph-puzzle-piece-duotone',
21-
'ph:clock-duotone': 'i-ph-clock-duotone',
22-
'ph:gear-duotone': 'i-ph-gear-duotone',
23-
'ph:sliders-horizontal-duotone': 'i-ph-sliders-horizontal-duotone',
24-
}
25-
26-
/**
27-
* Resolve a dock icon to its UnoCSS class, or an empty string when the icon
28-
* isn't mapped (the caller falls back to a text initial).
29-
*/
30-
export function iconClass(name: string | { light: string, dark: string } | undefined): string {
31-
if (!name)
32-
return ''
33-
const id = typeof name === 'string' ? name : name.light
34-
return ICON_CLASS[id] ?? ''
35-
}
1+
// Re-exports the shared devframe dock-icon → UnoCSS class map (see
2+
// `design/design.ts`) so this surface stays in lockstep with every other hub
3+
// shell instead of hand-maintaining its own copy of the icon table.
4+
export { iconClass } from '../../../../design/design'

0 commit comments

Comments
 (0)