lucent-ui 0.3.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +106 -19
- package/dist/index.d.ts +166 -1
- package/dist/index.js +2940 -1002
- package/dist-server/src/components/molecules/CommandPalette/CommandPalette.manifest.js +89 -0
- package/dist-server/src/components/molecules/DataTable/DataTable.manifest.js +97 -0
- package/dist-server/src/components/molecules/DatePicker/DatePicker.manifest.js +91 -0
- package/dist-server/src/components/molecules/DateRangePicker/DateRangePicker.manifest.js +85 -0
- package/dist-server/src/components/molecules/FileUpload/FileUpload.manifest.js +104 -0
- package/dist-server/src/components/molecules/MultiSelect/MultiSelect.manifest.js +100 -0
- package/dist-server/src/components/molecules/PageLayout/PageLayout.manifest.js +160 -0
- package/dist-server/src/components/molecules/Timeline/Timeline.manifest.js +60 -0
- package/package.json +1 -1
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
export const COMPONENT_MANIFEST = {
|
|
2
|
+
id: 'page-layout',
|
|
3
|
+
name: 'PageLayout',
|
|
4
|
+
tier: 'molecule',
|
|
5
|
+
domain: 'neutral',
|
|
6
|
+
specVersion: '0.1',
|
|
7
|
+
description: 'Full-viewport shell layout with optional header, left sidebar, right panel, and footer slots arranged in a flex column/row structure.',
|
|
8
|
+
designIntent: 'PageLayout owns the outermost chrome of an application page. The body row is a flex row containing ' +
|
|
9
|
+
'an optional left sidebar, a bordered main content card, and an optional right panel — all as structural ' +
|
|
10
|
+
'siblings so they share the same vertical space. The header and footer sit outside the body row as ' +
|
|
11
|
+
'flex children of the outer column, ensuring they span the full width. Sidebars collapse to zero width ' +
|
|
12
|
+
'with a smooth width transition, avoiding layout jumps. The main card automatically drops its right ' +
|
|
13
|
+
'margin when a right panel is present so no manual mainStyle override is needed. ' +
|
|
14
|
+
'The footer is intentionally narrow (default 28px) and should be used sparingly — suited to ' +
|
|
15
|
+
'status bars, connection indicators, keyboard shortcut hints, or contextual action strips, ' +
|
|
16
|
+
'in the style of an editor status bar. It is not meant as a general-purpose page footer.',
|
|
17
|
+
props: [
|
|
18
|
+
{
|
|
19
|
+
name: 'children',
|
|
20
|
+
type: 'ReactNode',
|
|
21
|
+
required: true,
|
|
22
|
+
description: 'Content rendered inside the main content card.',
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
name: 'header',
|
|
26
|
+
type: 'ReactNode',
|
|
27
|
+
required: false,
|
|
28
|
+
description: 'Content rendered in the full-width header bar above the body row.',
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
name: 'headerHeight',
|
|
32
|
+
type: 'string',
|
|
33
|
+
required: false,
|
|
34
|
+
default: '48',
|
|
35
|
+
description: 'Header height in px (number) or any CSS value (string). Default: 48.',
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
name: 'sidebar',
|
|
39
|
+
type: 'ReactNode',
|
|
40
|
+
required: false,
|
|
41
|
+
description: 'Content rendered in the left sidebar, a flex sibling of <main>.',
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
name: 'sidebarWidth',
|
|
45
|
+
type: 'string',
|
|
46
|
+
required: false,
|
|
47
|
+
default: '240',
|
|
48
|
+
description: 'Left sidebar width in px (number) or any CSS value (string). Default: 240.',
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
name: 'sidebarCollapsed',
|
|
52
|
+
type: 'boolean',
|
|
53
|
+
required: false,
|
|
54
|
+
default: 'false',
|
|
55
|
+
description: 'When true, collapses the left sidebar to zero width with a transition.',
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
name: 'rightSidebar',
|
|
59
|
+
type: 'ReactNode',
|
|
60
|
+
required: false,
|
|
61
|
+
description: 'Content rendered in the right panel, a flex sibling of <main> after it.',
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
name: 'rightSidebarWidth',
|
|
65
|
+
type: 'string',
|
|
66
|
+
required: false,
|
|
67
|
+
default: '240',
|
|
68
|
+
description: 'Right panel width in px (number) or any CSS value (string). Default: 240.',
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
name: 'rightSidebarCollapsed',
|
|
72
|
+
type: 'boolean',
|
|
73
|
+
required: false,
|
|
74
|
+
default: 'false',
|
|
75
|
+
description: 'When true, collapses the right panel to zero width with a transition.',
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
name: 'footer',
|
|
79
|
+
type: 'ReactNode',
|
|
80
|
+
required: false,
|
|
81
|
+
description: 'Content rendered in the full-width footer bar below the body row.',
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
name: 'footerHeight',
|
|
85
|
+
type: 'string',
|
|
86
|
+
required: false,
|
|
87
|
+
default: '28',
|
|
88
|
+
description: 'Footer height in px (number) or any CSS value (string). Default: 28 — sized for a compact status bar.',
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
name: 'mainStyle',
|
|
92
|
+
type: 'object',
|
|
93
|
+
required: false,
|
|
94
|
+
description: 'Inline style overrides for the main content card (border, borderRadius, boxShadow, etc.).',
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
name: 'style',
|
|
98
|
+
type: 'object',
|
|
99
|
+
required: false,
|
|
100
|
+
description: 'Inline style overrides for the outermost layout wrapper.',
|
|
101
|
+
},
|
|
102
|
+
],
|
|
103
|
+
usageExamples: [
|
|
104
|
+
{
|
|
105
|
+
title: 'Header and left sidebar',
|
|
106
|
+
code: `<PageLayout
|
|
107
|
+
header={<div>My App</div>}
|
|
108
|
+
sidebar={<nav>...</nav>}
|
|
109
|
+
sidebarWidth={200}
|
|
110
|
+
>
|
|
111
|
+
<div>Page content</div>
|
|
112
|
+
</PageLayout>`,
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
title: 'With right panel',
|
|
116
|
+
code: `<PageLayout
|
|
117
|
+
header={<div>My App</div>}
|
|
118
|
+
sidebar={<nav>...</nav>}
|
|
119
|
+
rightSidebar={<aside>Details panel</aside>}
|
|
120
|
+
rightSidebarWidth={280}
|
|
121
|
+
>
|
|
122
|
+
<div>Page content</div>
|
|
123
|
+
</PageLayout>`,
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
title: 'Collapsible sidebar',
|
|
127
|
+
code: `<PageLayout
|
|
128
|
+
sidebar={<nav>...</nav>}
|
|
129
|
+
sidebarCollapsed={isCollapsed}
|
|
130
|
+
>
|
|
131
|
+
<div>Page content</div>
|
|
132
|
+
</PageLayout>`,
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
title: 'With status bar footer',
|
|
136
|
+
code: `<PageLayout
|
|
137
|
+
header={<div>My App</div>}
|
|
138
|
+
sidebar={<nav>...</nav>}
|
|
139
|
+
footer={
|
|
140
|
+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: '100%', padding: '0 8px' }}>
|
|
141
|
+
<Text size="xs" color="secondary">main</Text>
|
|
142
|
+
<Text size="xs" color="info">Ready</Text>
|
|
143
|
+
</div>
|
|
144
|
+
}
|
|
145
|
+
>
|
|
146
|
+
<div>Page content</div>
|
|
147
|
+
</PageLayout>`,
|
|
148
|
+
},
|
|
149
|
+
],
|
|
150
|
+
compositionGraph: [
|
|
151
|
+
{ componentId: 'text', componentName: 'Text', role: 'Header/footer/sidebar labels', required: false },
|
|
152
|
+
{ componentId: 'nav-link', componentName: 'NavLink', role: 'Sidebar navigation items', required: false },
|
|
153
|
+
],
|
|
154
|
+
accessibility: {
|
|
155
|
+
notes: 'The left sidebar renders as a <div>; wrap its contents in a <nav> with aria-label for landmark semantics. ' +
|
|
156
|
+
'The right panel renders as <aside> which is a complementary landmark — provide an aria-label if multiple ' +
|
|
157
|
+
'aside elements are present on the page. The main content renders as <main>, which is a main landmark ' +
|
|
158
|
+
'and should appear only once per page.',
|
|
159
|
+
},
|
|
160
|
+
};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
export const COMPONENT_MANIFEST = {
|
|
2
|
+
id: 'timeline',
|
|
3
|
+
name: 'Timeline',
|
|
4
|
+
tier: 'molecule',
|
|
5
|
+
domain: 'neutral',
|
|
6
|
+
specVersion: '1.0',
|
|
7
|
+
description: 'A vertical ordered event list with status-colored dots, connector lines, optional dates, and custom icons.',
|
|
8
|
+
designIntent: 'Timeline renders as a semantic <ol> with each event as a <li>, preserving document order for assistive technologies. ' +
|
|
9
|
+
'The dot and connector are rendered in a fixed-width left column so content in the right column can wrap freely without misaligning the spine. ' +
|
|
10
|
+
'The connector line is omitted on the last item — there is nothing to connect to. ' +
|
|
11
|
+
'Status colors follow the same semantic token set as Alert and Badge so danger/success/warning/info carry consistent meaning across the design system. ' +
|
|
12
|
+
'Default status (no explicit icon) renders a plain dot; success/danger/warning get built-in iconography inside the dot. ' +
|
|
13
|
+
'Custom icons slot in via the icon prop to handle domain-specific event types (e.g. a deploy icon, a payment icon).',
|
|
14
|
+
props: [
|
|
15
|
+
{
|
|
16
|
+
name: 'items',
|
|
17
|
+
type: 'array',
|
|
18
|
+
required: true,
|
|
19
|
+
description: 'Array of TimelineItem objects. Each has id, title, optional description, optional date string, optional status, and optional icon.',
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
name: 'style',
|
|
23
|
+
type: 'object',
|
|
24
|
+
required: false,
|
|
25
|
+
description: 'Inline style overrides for the outer <ol> wrapper.',
|
|
26
|
+
},
|
|
27
|
+
],
|
|
28
|
+
usageExamples: [
|
|
29
|
+
{
|
|
30
|
+
title: 'Basic event log',
|
|
31
|
+
code: `<Timeline
|
|
32
|
+
items={[
|
|
33
|
+
{ id: '1', title: 'Order placed', date: 'Mar 1, 2026', status: 'success' },
|
|
34
|
+
{ id: '2', title: 'Payment processed', date: 'Mar 1, 2026', status: 'success' },
|
|
35
|
+
{ id: '3', title: 'Shipped', date: 'Mar 2, 2026', description: 'FedEx tracking: 1234567890' },
|
|
36
|
+
{ id: '4', title: 'Delivery failed', date: 'Mar 4, 2026', status: 'danger', description: 'No one home — will retry tomorrow.' },
|
|
37
|
+
]}
|
|
38
|
+
/>`,
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
title: 'With custom icons',
|
|
42
|
+
code: `<Timeline
|
|
43
|
+
items={[
|
|
44
|
+
{ id: 'deploy', title: 'v1.2.0 deployed', status: 'success', icon: <RocketIcon />, date: '2h ago' },
|
|
45
|
+
{ id: 'review', title: 'PR #47 merged', icon: <GitMergeIcon />, date: '3h ago' },
|
|
46
|
+
{ id: 'alert', title: 'Error rate spike', status: 'warning', icon: <AlertIcon />, date: '4h ago' },
|
|
47
|
+
]}
|
|
48
|
+
/>`,
|
|
49
|
+
},
|
|
50
|
+
],
|
|
51
|
+
compositionGraph: [
|
|
52
|
+
{ componentId: 'text', componentName: 'Text', role: 'Event title, description, and date label', required: true },
|
|
53
|
+
],
|
|
54
|
+
accessibility: {
|
|
55
|
+
role: 'list',
|
|
56
|
+
ariaAttributes: [],
|
|
57
|
+
keyboardInteractions: ['Standard document flow — no interactive elements unless custom icons include them'],
|
|
58
|
+
notes: 'Timeline is a semantic <ol> with <li> items. It is non-interactive by default. If items contain interactive elements (links, buttons), those elements carry their own keyboard behaviour.',
|
|
59
|
+
},
|
|
60
|
+
};
|