Skip to content

Commit 1757698

Browse files
RtlZeroMemoryRtlZeroMemory
authored
Merge pull request #277 from RtlZeroMemory/codex/split-widgets-types
refactor(core): split widget prop types by family
2 parents ec8a6c8 + 4aa7d13 commit 1757698

File tree

8 files changed

+2658
-2395
lines changed

8 files changed

+2658
-2395
lines changed

‎packages/core/src/widgets/types.ts‎

Lines changed: 236 additions & 2395 deletions
Large diffs are not rendered by default.

‎packages/core/src/widgets/types/advanced.ts‎

Lines changed: 703 additions & 0 deletions
Large diffs are not rendered by default.

‎packages/core/src/widgets/types/base.ts‎

Lines changed: 1035 additions & 0 deletions
Large diffs are not rendered by default.

‎packages/core/src/widgets/types/forms.ts‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import type { FocusConfig } from "../../focus/styles.js";
2+
import type { WidgetSize, WidgetTone, WidgetVariant } from "../../ui/designTokens.js";
3+
import type { TextStyle } from "../style.js";
4+
import type { VNode } from "../types.js";
5+
6+
/* ========== Form Widgets (GitHub issue #119) ========== */
7+
8+
/** Option for select and radio group widgets. */
9+
export type SelectOption = Readonly<{
10+
/** Option value used in form state. */
11+
value: string;
12+
/** Display label for the option. */
13+
label: string;
14+
/** Whether this option is disabled. */
15+
disabled?: boolean;
16+
}>;
17+
18+
/** Props for field wrapper widget. Wraps an input with label, error, and hint. */
19+
export type FieldProps = Readonly<{
20+
key?: string;
21+
/** Field label displayed above the input. */
22+
label: string;
23+
/** Error message to display below the input. */
24+
error?: string;
25+
/** Whether the field is required (shows asterisk). */
26+
required?: boolean;
27+
/** Help text displayed below the input. */
28+
hint?: string;
29+
/** The wrapped input widget. */
30+
children: VNode;
31+
}>;
32+
33+
/** Props for select dropdown widget. */
34+
export type SelectProps = Readonly<{
35+
id: string;
36+
key?: string;
37+
/** Opt out of Tab focus order while keeping id-based routing available. */
38+
focusable?: boolean;
39+
/** Optional semantic label used for accessibility/debug announcements. */
40+
accessibleLabel?: string;
41+
/** Currently selected value. */
42+
value: string;
43+
/** Available options. */
44+
options: readonly SelectOption[];
45+
/** Callback when selection changes. */
46+
onChange?: (value: string) => void;
47+
/** Whether the select is disabled. */
48+
disabled?: boolean;
49+
/** Placeholder text when no value is selected. */
50+
placeholder?: string;
51+
/** Whether to show the select in an error state. */
52+
error?: boolean;
53+
/** Optional focus appearance configuration. */
54+
focusConfig?: FocusConfig;
55+
/** Design system: visual variant (reserved for future select recipes). */
56+
dsVariant?: WidgetVariant;
57+
/** Design system: tone (reserved for future select recipes). */
58+
dsTone?: WidgetTone;
59+
/** Design system: size preset. */
60+
dsSize?: WidgetSize;
61+
}>;
62+
63+
/** Props for slider widget. */
64+
export type SliderProps = Readonly<{
65+
id: string;
66+
key?: string;
67+
/** Opt out of Tab focus order while keeping id-based routing available. */
68+
focusable?: boolean;
69+
/** Optional semantic label used for accessibility/debug announcements. */
70+
accessibleLabel?: string;
71+
/** Current slider value. */
72+
value: number;
73+
/** Minimum value (default: 0). */
74+
min?: number;
75+
/** Maximum value (default: 100). */
76+
max?: number;
77+
/** Step increment for keyboard changes (default: 1). */
78+
step?: number;
79+
/** Optional fixed track width in cells (default: fills available width). */
80+
width?: number;
81+
/** Optional label shown before the track. */
82+
label?: string;
83+
/** Show numeric value text (default: true). */
84+
showValue?: boolean;
85+
/** Callback when value changes. */
86+
onChange?: (value: number) => void;
87+
/** Whether the slider is disabled. */
88+
disabled?: boolean;
89+
/** Whether the slider is read-only (focusable but non-editable). */
90+
readOnly?: boolean;
91+
/** Optional style applied to label/value text. */
92+
style?: TextStyle;
93+
/** Optional focus appearance configuration. */
94+
focusConfig?: FocusConfig;
95+
}>;
96+
97+
/** Props for checkbox widget. */
98+
export type CheckboxProps = Readonly<{
99+
id: string;
100+
key?: string;
101+
/** Opt out of Tab focus order while keeping id-based routing available. */
102+
focusable?: boolean;
103+
/** Optional semantic label used for accessibility/debug announcements. */
104+
accessibleLabel?: string;
105+
/** Whether the checkbox is checked. */
106+
checked: boolean;
107+
/** Label displayed next to the checkbox. */
108+
label?: string;
109+
/** Callback when checked state changes. */
110+
onChange?: (checked: boolean) => void;
111+
/** Whether the checkbox is disabled. */
112+
disabled?: boolean;
113+
/** Optional focus appearance configuration. */
114+
focusConfig?: FocusConfig;
115+
/** Design system: tone for checked/focus rendering. */
116+
dsTone?: WidgetTone;
117+
/** Design system: size preset. */
118+
dsSize?: WidgetSize;
119+
}>;
120+
121+
/** Props for radio group widget. */
122+
export type RadioGroupProps = Readonly<{
123+
id: string;
124+
key?: string;
125+
/** Opt out of Tab focus order while keeping id-based routing available. */
126+
focusable?: boolean;
127+
/** Optional semantic label used for accessibility/debug announcements. */
128+
accessibleLabel?: string;
129+
/** Currently selected value. */
130+
value: string;
131+
/** Available options. */
132+
options: readonly SelectOption[];
133+
/** Callback when selection changes. */
134+
onChange?: (value: string) => void;
135+
/** Layout direction. */
136+
direction?: "horizontal" | "vertical";
137+
/** Whether the radio group is disabled. */
138+
disabled?: boolean;
139+
/** Optional focus appearance configuration. */
140+
focusConfig?: FocusConfig;
141+
/** Design system: tone for selected/focus rendering. */
142+
dsTone?: WidgetTone;
143+
/** Design system: size preset. */
144+
dsSize?: WidgetSize;
145+
}>;

‎packages/core/src/widgets/types/navigation.ts‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import type { WidgetSize, WidgetTone, WidgetVariant } from "../../ui/designTokens.js";
2+
import type { VNode } from "../types.js";
3+
4+
/* ========== Navigation Widgets ========== */
5+
6+
/** Tabs visual style variant. */
7+
export type TabsVariant = "line" | "enclosed" | "pills";
8+
9+
/** Tabs bar position relative to content. */
10+
export type TabsPosition = "top" | "bottom";
11+
12+
/** Tab item descriptor. */
13+
export type TabsItem = Readonly<{
14+
key: string;
15+
label: string;
16+
content: VNode;
17+
}>;
18+
19+
/** Props for tabs widget. */
20+
export type TabsProps = Readonly<{
21+
id: string;
22+
key?: string;
23+
tabs: readonly TabsItem[];
24+
activeTab: string;
25+
onChange: (key: string) => void;
26+
variant?: TabsVariant;
27+
position?: TabsPosition;
28+
/** Design system: visual variant. */
29+
dsVariant?: WidgetVariant;
30+
/** Design system: color tone. */
31+
dsTone?: WidgetTone;
32+
/** Design system: size preset. */
33+
dsSize?: WidgetSize;
34+
}>;
35+
36+
/** Accordion item descriptor. */
37+
export type AccordionItem = Readonly<{
38+
key: string;
39+
title: string;
40+
content: VNode;
41+
}>;
42+
43+
/** Props for accordion widget. */
44+
export type AccordionProps = Readonly<{
45+
id: string;
46+
key?: string;
47+
items: readonly AccordionItem[];
48+
expanded: readonly string[];
49+
onChange: (expanded: readonly string[]) => void;
50+
allowMultiple?: boolean;
51+
/** Design system: visual variant. */
52+
dsVariant?: WidgetVariant;
53+
/** Design system: color tone. */
54+
dsTone?: WidgetTone;
55+
/** Design system: size preset. */
56+
dsSize?: WidgetSize;
57+
}>;
58+
59+
/** Breadcrumb item descriptor. */
60+
export type BreadcrumbItem = Readonly<{
61+
label: string;
62+
onPress?: () => void;
63+
}>;
64+
65+
/** Props for breadcrumb widget. */
66+
export type BreadcrumbProps = Readonly<{
67+
id?: string;
68+
key?: string;
69+
items: readonly BreadcrumbItem[];
70+
separator?: string;
71+
/** Design system: visual variant. */
72+
dsVariant?: WidgetVariant;
73+
/** Design system: color tone. */
74+
dsTone?: WidgetTone;
75+
/** Design system: size preset. */
76+
dsSize?: WidgetSize;
77+
}>;
78+
79+
/** Props for pagination widget. */
80+
export type PaginationProps = Readonly<{
81+
id: string;
82+
key?: string;
83+
page: number;
84+
totalPages: number;
85+
onChange: (page: number) => void;
86+
showFirstLast?: boolean;
87+
/** Design system: visual variant. */
88+
dsVariant?: WidgetVariant;
89+
/** Design system: color tone. */
90+
dsTone?: WidgetTone;
91+
/** Design system: size preset. */
92+
dsSize?: WidgetSize;
93+
}>;

0 commit comments

Comments
 (0)