storybook-addon-design-system-docs 1.0.0 → 1.0.2
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/README.md +143 -15
- package/dist/TypographySection-D8HHJr-s.d.ts +258 -0
- package/dist/TypographySection-DsqZs5oA.d.cts +258 -0
- package/dist/TypographySection-c6k_4ZVC.d.ts +258 -0
- package/dist/TypographySection-lyEjSYKu.d.cts +258 -0
- package/dist/assets.cjs +9 -0
- package/dist/assets.cjs.map +1 -0
- package/dist/assets.d.cts +28 -0
- package/dist/assets.d.ts +28 -0
- package/dist/assets.js +7 -0
- package/dist/assets.js.map +1 -0
- package/dist/components/assets/index.cjs +634 -0
- package/dist/components/assets/index.cjs.map +1 -0
- package/dist/components/assets/index.d.cts +150 -0
- package/dist/components/assets/index.d.ts +150 -0
- package/dist/components/assets/index.js +604 -0
- package/dist/components/assets/index.js.map +1 -0
- package/dist/components/primitives/index.cjs +963 -0
- package/dist/components/primitives/index.cjs.map +1 -0
- package/dist/components/primitives/index.d.cts +194 -0
- package/dist/components/primitives/index.d.ts +194 -0
- package/dist/components/primitives/index.js +905 -0
- package/dist/components/primitives/index.js.map +1 -0
- package/dist/index.cjs +8695 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +136 -0
- package/dist/index.d.ts +136 -0
- package/dist/index.js +8639 -0
- package/dist/index.js.map +1 -0
- package/dist/jsx-runtime.d-kG9JzmQF.d.cts +15239 -0
- package/dist/jsx-runtime.d-kG9JzmQF.d.ts +15239 -0
- package/dist/manager.js +2 -2
- package/dist/manager.js.map +1 -0
- package/dist/preset.cjs +8185 -172
- package/dist/preset.cjs.map +1 -0
- package/dist/preset.js +8187 -8
- package/dist/preset.js.map +1 -0
- package/dist/types-BVOYHsBN.d.cts +178 -0
- package/dist/types-BVOYHsBN.d.ts +178 -0
- package/package.json +141 -143
- package/templates/spacing.mdx +1 -1
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { d as NormalizedSection, e as TemplateConfig } from './types-BVOYHsBN.js';
|
|
3
|
+
import react__default, { ReactNode } from 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Normalized configuration for the Design System Addon.
|
|
7
|
+
* This is the internal representation of the options after validation and defaults.
|
|
8
|
+
*/
|
|
9
|
+
interface NormalizedAddonOptions {
|
|
10
|
+
/** The validated Tailwind config path */
|
|
11
|
+
tailwindConfig: string;
|
|
12
|
+
/** The base sidebar group name (e.g., "Design System/") */
|
|
13
|
+
sidebarGroup: string;
|
|
14
|
+
/** The list of enabled and normalized primitive sections */
|
|
15
|
+
sections: NormalizedSection[];
|
|
16
|
+
/** Optional configuration for forcing all primitives into a single document */
|
|
17
|
+
forceSingleDoc?: NormalizedSection;
|
|
18
|
+
/** Whether to hide default Tailwind values */
|
|
19
|
+
showOnlyCustom: boolean;
|
|
20
|
+
/** Typography configuration */
|
|
21
|
+
typography?: {
|
|
22
|
+
example?: string;
|
|
23
|
+
};
|
|
24
|
+
/** Template engine configuration */
|
|
25
|
+
templates?: TemplateConfig;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Represents a single color definition in the theme.
|
|
29
|
+
*/
|
|
30
|
+
interface ColorData {
|
|
31
|
+
/** The base name of the color (e.g., 'blue') */
|
|
32
|
+
baseName: string;
|
|
33
|
+
/** A record of shades where key is the shade level (e.g., '500') and value is the hex code */
|
|
34
|
+
shades: Record<string, string>;
|
|
35
|
+
/** A descriptive subtitle for the color group */
|
|
36
|
+
subtitle: string;
|
|
37
|
+
/** Whether this color is a custom definition (not in base Tailwind) */
|
|
38
|
+
isCustom: boolean;
|
|
39
|
+
/** Whether this color extends an existing Tailwind color */
|
|
40
|
+
isExtended: boolean;
|
|
41
|
+
/** Whether this is a default Tailwind color */
|
|
42
|
+
isDefault: boolean;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Context data for rendering the colors section.
|
|
46
|
+
*/
|
|
47
|
+
interface ColorsContext {
|
|
48
|
+
/** All color definitions */
|
|
49
|
+
colors: ColorData[];
|
|
50
|
+
/** Colors marked as custom/extended */
|
|
51
|
+
customColors: ColorData[];
|
|
52
|
+
/** Colors from Tailwind defaults */
|
|
53
|
+
builtInColors: ColorData[];
|
|
54
|
+
/** Whether there are any colors to display */
|
|
55
|
+
hasColors: boolean;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Context data for rendering the typography section.
|
|
59
|
+
*/
|
|
60
|
+
interface TypographyContext {
|
|
61
|
+
/** Font family definitions as pairs of [label, fontFamily] */
|
|
62
|
+
fontFamilies: [string, string][];
|
|
63
|
+
/** Custom font families defined in the theme */
|
|
64
|
+
customFamilies: [string, string][];
|
|
65
|
+
/** Standard Tailwind built-in font families (sans, serif, mono) */
|
|
66
|
+
builtInFamilies: [string, string][];
|
|
67
|
+
/** Font weight definitions as pairs of [label, value] */
|
|
68
|
+
fontWeights: [string, string][];
|
|
69
|
+
/** Font size definitions as pairs of [label, value] */
|
|
70
|
+
fontSizes: [string, string][];
|
|
71
|
+
/** Whether there are any font families to display */
|
|
72
|
+
hasFontFamily: boolean;
|
|
73
|
+
/** All weight keys available for filter state initialization */
|
|
74
|
+
allWeightKeys: string[];
|
|
75
|
+
/** All size keys available for filter state initialization */
|
|
76
|
+
allSizeKeys: string[];
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* Context data for rendering the spacing section.
|
|
80
|
+
*/
|
|
81
|
+
interface SpacingContext {
|
|
82
|
+
/** Spacing value entries as pairs of [label, value] */
|
|
83
|
+
entries: [string, string][];
|
|
84
|
+
/** Whether there are any spacing values to display */
|
|
85
|
+
hasSpacing: boolean;
|
|
86
|
+
/** The maximum numeric value in the entries, used for bar chart scaling */
|
|
87
|
+
maxValue: number;
|
|
88
|
+
}
|
|
89
|
+
/**
|
|
90
|
+
* Context data for rendering the shadows section.
|
|
91
|
+
*/
|
|
92
|
+
interface ShadowsContext {
|
|
93
|
+
/** Shadow value entries as pairs of [label, value] */
|
|
94
|
+
entries: [string, string][];
|
|
95
|
+
/** Whether there are any shadow values to display */
|
|
96
|
+
hasShadows: boolean;
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* Context data for rendering the border radius section.
|
|
100
|
+
*/
|
|
101
|
+
interface RadiusContext {
|
|
102
|
+
/** Border radius entries as pairs of [label, value] */
|
|
103
|
+
entries: [string, string][];
|
|
104
|
+
/** Whether there are any border radius values to display */
|
|
105
|
+
hasRadius: boolean;
|
|
106
|
+
}
|
|
107
|
+
/**
|
|
108
|
+
* Main context for theme template rendering, combining all section contexts and global settings.
|
|
109
|
+
*/
|
|
110
|
+
interface DesignSystemData {
|
|
111
|
+
/** List of section names that are currently enabled */
|
|
112
|
+
enabledSections: string[];
|
|
113
|
+
/** Whether to show only custom values, hiding default Tailwind tokens */
|
|
114
|
+
showOnlyCustom: boolean;
|
|
115
|
+
/** Default text to use for typography samples */
|
|
116
|
+
defaultSampleText: string;
|
|
117
|
+
/** Whether to use optimized React components for rendering */
|
|
118
|
+
useReactComponents: boolean;
|
|
119
|
+
/** Whether to force generation of a single documentation story instead of individual ones */
|
|
120
|
+
forceSingleDoc: boolean;
|
|
121
|
+
/** The sanitized export name when in single-story mode */
|
|
122
|
+
exportName?: string;
|
|
123
|
+
/** Context for the colors documentation section */
|
|
124
|
+
colors: ColorsContext;
|
|
125
|
+
/** Context for the typography documentation section */
|
|
126
|
+
typography: TypographyContext;
|
|
127
|
+
/** Optional context for the spacing documentation section */
|
|
128
|
+
spacing?: SpacingContext;
|
|
129
|
+
/** Optional context for the shadows documentation section */
|
|
130
|
+
shadows?: ShadowsContext;
|
|
131
|
+
/** Optional context for the border radius documentation section */
|
|
132
|
+
borderRadius?: RadiusContext;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
interface ColorSectionProps {
|
|
136
|
+
/** Custom/extended colors from user's Tailwind config */
|
|
137
|
+
customColors: ColorData[];
|
|
138
|
+
/** Built-in Tailwind colors */
|
|
139
|
+
builtInColors: ColorData[];
|
|
140
|
+
/** Whether to show only custom colors */
|
|
141
|
+
showOnlyCustom: boolean;
|
|
142
|
+
}
|
|
143
|
+
/**
|
|
144
|
+
* Renders a color palette section with search filtering.
|
|
145
|
+
*/
|
|
146
|
+
declare function ColorSection({ customColors, builtInColors, showOnlyCustom, }: ColorSectionProps): react_jsx_runtime.JSX.Element;
|
|
147
|
+
/**
|
|
148
|
+
* Full page wrapper for Colors story.
|
|
149
|
+
*/
|
|
150
|
+
interface ColorsPageProps extends ColorSectionProps {
|
|
151
|
+
}
|
|
152
|
+
declare function ColorsPage(props: ColorsPageProps): react_jsx_runtime.JSX.Element;
|
|
153
|
+
|
|
154
|
+
/**
|
|
155
|
+
* RadiusSection - Renders border radius values with preview cards.
|
|
156
|
+
*/
|
|
157
|
+
interface RadiusSectionProps {
|
|
158
|
+
/** Border radius entries: [label, value][] */
|
|
159
|
+
entries: [string, string][];
|
|
160
|
+
}
|
|
161
|
+
/**
|
|
162
|
+
* Renders border radius values with visual preview cards.
|
|
163
|
+
*/
|
|
164
|
+
declare function RadiusSection({ entries }: RadiusSectionProps): react_jsx_runtime.JSX.Element;
|
|
165
|
+
/**
|
|
166
|
+
* Full page wrapper for Border Radius story.
|
|
167
|
+
*/
|
|
168
|
+
interface RadiusPageProps extends RadiusSectionProps {
|
|
169
|
+
}
|
|
170
|
+
declare function RadiusPage(props: RadiusPageProps): react_jsx_runtime.JSX.Element;
|
|
171
|
+
|
|
172
|
+
/**
|
|
173
|
+
* ShadowsSection - Renders shadow values with preview cards.
|
|
174
|
+
*/
|
|
175
|
+
interface ShadowsSectionProps {
|
|
176
|
+
/** Shadow value entries: [label, value][] */
|
|
177
|
+
entries: [string, string][];
|
|
178
|
+
}
|
|
179
|
+
/**
|
|
180
|
+
* Renders shadow values with visual preview cards.
|
|
181
|
+
*/
|
|
182
|
+
declare function ShadowsSection({ entries }: ShadowsSectionProps): react_jsx_runtime.JSX.Element;
|
|
183
|
+
/**
|
|
184
|
+
* Full page wrapper for Shadows story.
|
|
185
|
+
*/
|
|
186
|
+
interface ShadowsPageProps extends ShadowsSectionProps {
|
|
187
|
+
}
|
|
188
|
+
declare function ShadowsPage(props: ShadowsPageProps): react_jsx_runtime.JSX.Element;
|
|
189
|
+
|
|
190
|
+
/**
|
|
191
|
+
* SpacingSection - Renders spacing values with visual bars.
|
|
192
|
+
*/
|
|
193
|
+
interface SpacingSectionProps {
|
|
194
|
+
/** Spacing value entries: [label, value][] */
|
|
195
|
+
entries: [string, string][];
|
|
196
|
+
/** Maximum numeric value (for bar scaling) */
|
|
197
|
+
maxValue: number;
|
|
198
|
+
}
|
|
199
|
+
/**
|
|
200
|
+
* Renders spacing values with visual bars showing relative sizes.
|
|
201
|
+
*/
|
|
202
|
+
declare function SpacingSection({ entries }: SpacingSectionProps): react_jsx_runtime.JSX.Element;
|
|
203
|
+
/**
|
|
204
|
+
* Full page wrapper for Spacing story.
|
|
205
|
+
*/
|
|
206
|
+
interface SpacingPageProps extends SpacingSectionProps {
|
|
207
|
+
}
|
|
208
|
+
declare function SpacingPage(props: SpacingPageProps): react_jsx_runtime.JSX.Element;
|
|
209
|
+
|
|
210
|
+
interface ThemeLayoutProps {
|
|
211
|
+
/** Title for the page */
|
|
212
|
+
title: string;
|
|
213
|
+
/** Child components */
|
|
214
|
+
children: ReactNode;
|
|
215
|
+
}
|
|
216
|
+
/**
|
|
217
|
+
* Wrapper component that provides Storybook theming and common layout.
|
|
218
|
+
* Used as the decorator for theme stories.
|
|
219
|
+
*/
|
|
220
|
+
declare function ThemeLayout({ title, children }: ThemeLayoutProps): react_jsx_runtime.JSX.Element;
|
|
221
|
+
/**
|
|
222
|
+
* Storybook decorator function that wraps stories with ThemeLayout.
|
|
223
|
+
*/
|
|
224
|
+
declare function themeDecorator(Story: react__default.ComponentType): react_jsx_runtime.JSX.Element;
|
|
225
|
+
|
|
226
|
+
/**
|
|
227
|
+
* TypographySection - Renders typography preview with weight/size filters.
|
|
228
|
+
*/
|
|
229
|
+
interface TypographySectionProps {
|
|
230
|
+
/** Custom font families */
|
|
231
|
+
customFamilies: [string, string][];
|
|
232
|
+
/** Built-in font families (sans, serif, mono) */
|
|
233
|
+
builtInFamilies: [string, string][];
|
|
234
|
+
/** Font weight definitions: [label, value][] */
|
|
235
|
+
fontWeights: [string, string][];
|
|
236
|
+
/** Font size definitions: [label, value][] */
|
|
237
|
+
fontSizes: [string, string][];
|
|
238
|
+
/** All weight keys for initial filter state */
|
|
239
|
+
allWeightKeys: string[];
|
|
240
|
+
/** All size keys for initial filter state */
|
|
241
|
+
allSizeKeys: string[];
|
|
242
|
+
/** Default sample text for typography preview */
|
|
243
|
+
defaultSampleText: string;
|
|
244
|
+
/** Whether to show only custom fonts */
|
|
245
|
+
showOnlyCustom: boolean;
|
|
246
|
+
}
|
|
247
|
+
/**
|
|
248
|
+
* Renders typography section with weight/size filter controls.
|
|
249
|
+
*/
|
|
250
|
+
declare function TypographySection({ customFamilies, builtInFamilies, fontWeights, fontSizes, allWeightKeys, allSizeKeys, defaultSampleText, showOnlyCustom, }: TypographySectionProps): react_jsx_runtime.JSX.Element;
|
|
251
|
+
/**
|
|
252
|
+
* Full page wrapper for Typography story.
|
|
253
|
+
*/
|
|
254
|
+
interface TypographyPageProps extends TypographySectionProps {
|
|
255
|
+
}
|
|
256
|
+
declare function TypographyPage(props: TypographyPageProps): react_jsx_runtime.JSX.Element;
|
|
257
|
+
|
|
258
|
+
export { ColorSection as C, type DesignSystemData as D, type NormalizedAddonOptions as N, RadiusPage as R, ShadowsPage as S, ThemeLayout as T, ColorsPage as a, RadiusSection as b, ShadowsSection as c, SpacingPage as d, SpacingSection as e, TypographyPage as f, TypographySection as g, type ColorData as h, type ColorsContext as i, type TypographyContext as j, type SpacingContext as k, type ShadowsContext as l, type RadiusContext as m, type ColorSectionProps as n, type ColorsPageProps as o, type RadiusPageProps as p, type RadiusSectionProps as q, type ShadowsPageProps as r, type ShadowsSectionProps as s, themeDecorator as t, type SpacingPageProps as u, type SpacingSectionProps as v, type ThemeLayoutProps as w, type TypographyPageProps as x, type TypographySectionProps as y };
|
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { d as NormalizedSection, e as TemplateConfig } from './types-BVOYHsBN.cjs';
|
|
3
|
+
import react__default, { ReactNode } from 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Normalized configuration for the Design System Addon.
|
|
7
|
+
* This is the internal representation of the options after validation and defaults.
|
|
8
|
+
*/
|
|
9
|
+
interface NormalizedAddonOptions {
|
|
10
|
+
/** The validated Tailwind config path */
|
|
11
|
+
tailwindConfig: string;
|
|
12
|
+
/** The base sidebar group name (e.g., "Design System/") */
|
|
13
|
+
sidebarGroup: string;
|
|
14
|
+
/** The list of enabled and normalized primitive sections */
|
|
15
|
+
sections: NormalizedSection[];
|
|
16
|
+
/** Optional configuration for forcing all primitives into a single document */
|
|
17
|
+
forceSingleDoc?: NormalizedSection;
|
|
18
|
+
/** Whether to hide default Tailwind values */
|
|
19
|
+
showOnlyCustom: boolean;
|
|
20
|
+
/** Typography configuration */
|
|
21
|
+
typography?: {
|
|
22
|
+
example?: string;
|
|
23
|
+
};
|
|
24
|
+
/** Template engine configuration */
|
|
25
|
+
templates?: TemplateConfig;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Represents a single color definition in the theme.
|
|
29
|
+
*/
|
|
30
|
+
interface ColorData {
|
|
31
|
+
/** The base name of the color (e.g., 'blue') */
|
|
32
|
+
baseName: string;
|
|
33
|
+
/** A record of shades where key is the shade level (e.g., '500') and value is the hex code */
|
|
34
|
+
shades: Record<string, string>;
|
|
35
|
+
/** A descriptive subtitle for the color group */
|
|
36
|
+
subtitle: string;
|
|
37
|
+
/** Whether this color is a custom definition (not in base Tailwind) */
|
|
38
|
+
isCustom: boolean;
|
|
39
|
+
/** Whether this color extends an existing Tailwind color */
|
|
40
|
+
isExtended: boolean;
|
|
41
|
+
/** Whether this is a default Tailwind color */
|
|
42
|
+
isDefault: boolean;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Context data for rendering the colors section.
|
|
46
|
+
*/
|
|
47
|
+
interface ColorsContext {
|
|
48
|
+
/** All color definitions */
|
|
49
|
+
colors: ColorData[];
|
|
50
|
+
/** Colors marked as custom/extended */
|
|
51
|
+
customColors: ColorData[];
|
|
52
|
+
/** Colors from Tailwind defaults */
|
|
53
|
+
builtInColors: ColorData[];
|
|
54
|
+
/** Whether there are any colors to display */
|
|
55
|
+
hasColors: boolean;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Context data for rendering the typography section.
|
|
59
|
+
*/
|
|
60
|
+
interface TypographyContext {
|
|
61
|
+
/** Font family definitions as pairs of [label, fontFamily] */
|
|
62
|
+
fontFamilies: [string, string][];
|
|
63
|
+
/** Custom font families defined in the theme */
|
|
64
|
+
customFamilies: [string, string][];
|
|
65
|
+
/** Standard Tailwind built-in font families (sans, serif, mono) */
|
|
66
|
+
builtInFamilies: [string, string][];
|
|
67
|
+
/** Font weight definitions as pairs of [label, value] */
|
|
68
|
+
fontWeights: [string, string][];
|
|
69
|
+
/** Font size definitions as pairs of [label, value] */
|
|
70
|
+
fontSizes: [string, string][];
|
|
71
|
+
/** Whether there are any font families to display */
|
|
72
|
+
hasFontFamily: boolean;
|
|
73
|
+
/** All weight keys available for filter state initialization */
|
|
74
|
+
allWeightKeys: string[];
|
|
75
|
+
/** All size keys available for filter state initialization */
|
|
76
|
+
allSizeKeys: string[];
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* Context data for rendering the spacing section.
|
|
80
|
+
*/
|
|
81
|
+
interface SpacingContext {
|
|
82
|
+
/** Spacing value entries as pairs of [label, value] */
|
|
83
|
+
entries: [string, string][];
|
|
84
|
+
/** Whether there are any spacing values to display */
|
|
85
|
+
hasSpacing: boolean;
|
|
86
|
+
/** The maximum numeric value in the entries, used for bar chart scaling */
|
|
87
|
+
maxValue: number;
|
|
88
|
+
}
|
|
89
|
+
/**
|
|
90
|
+
* Context data for rendering the shadows section.
|
|
91
|
+
*/
|
|
92
|
+
interface ShadowsContext {
|
|
93
|
+
/** Shadow value entries as pairs of [label, value] */
|
|
94
|
+
entries: [string, string][];
|
|
95
|
+
/** Whether there are any shadow values to display */
|
|
96
|
+
hasShadows: boolean;
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* Context data for rendering the border radius section.
|
|
100
|
+
*/
|
|
101
|
+
interface RadiusContext {
|
|
102
|
+
/** Border radius entries as pairs of [label, value] */
|
|
103
|
+
entries: [string, string][];
|
|
104
|
+
/** Whether there are any border radius values to display */
|
|
105
|
+
hasRadius: boolean;
|
|
106
|
+
}
|
|
107
|
+
/**
|
|
108
|
+
* Main context for theme template rendering, combining all section contexts and global settings.
|
|
109
|
+
*/
|
|
110
|
+
interface DesignSystemData {
|
|
111
|
+
/** List of section names that are currently enabled */
|
|
112
|
+
enabledSections: string[];
|
|
113
|
+
/** Whether to show only custom values, hiding default Tailwind tokens */
|
|
114
|
+
showOnlyCustom: boolean;
|
|
115
|
+
/** Default text to use for typography samples */
|
|
116
|
+
defaultSampleText: string;
|
|
117
|
+
/** Whether to use optimized React components for rendering */
|
|
118
|
+
useReactComponents: boolean;
|
|
119
|
+
/** Whether to force generation of a single documentation story instead of individual ones */
|
|
120
|
+
forceSingleDoc: boolean;
|
|
121
|
+
/** The sanitized export name when in single-story mode */
|
|
122
|
+
exportName?: string;
|
|
123
|
+
/** Context for the colors documentation section */
|
|
124
|
+
colors: ColorsContext;
|
|
125
|
+
/** Context for the typography documentation section */
|
|
126
|
+
typography: TypographyContext;
|
|
127
|
+
/** Optional context for the spacing documentation section */
|
|
128
|
+
spacing?: SpacingContext;
|
|
129
|
+
/** Optional context for the shadows documentation section */
|
|
130
|
+
shadows?: ShadowsContext;
|
|
131
|
+
/** Optional context for the border radius documentation section */
|
|
132
|
+
borderRadius?: RadiusContext;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
interface ColorSectionProps {
|
|
136
|
+
/** Custom/extended colors from user's Tailwind config */
|
|
137
|
+
customColors: ColorData[];
|
|
138
|
+
/** Built-in Tailwind colors */
|
|
139
|
+
builtInColors: ColorData[];
|
|
140
|
+
/** Whether to show only custom colors */
|
|
141
|
+
showOnlyCustom: boolean;
|
|
142
|
+
}
|
|
143
|
+
/**
|
|
144
|
+
* Renders a color palette section with search filtering.
|
|
145
|
+
*/
|
|
146
|
+
declare function ColorSection({ customColors, builtInColors, showOnlyCustom, }: ColorSectionProps): react_jsx_runtime.JSX.Element;
|
|
147
|
+
/**
|
|
148
|
+
* Full page wrapper for Colors story.
|
|
149
|
+
*/
|
|
150
|
+
interface ColorsPageProps extends ColorSectionProps {
|
|
151
|
+
}
|
|
152
|
+
declare function ColorsPage(props: ColorsPageProps): react_jsx_runtime.JSX.Element;
|
|
153
|
+
|
|
154
|
+
/**
|
|
155
|
+
* RadiusSection - Renders border radius values with preview cards.
|
|
156
|
+
*/
|
|
157
|
+
interface RadiusSectionProps {
|
|
158
|
+
/** Border radius entries: [label, value][] */
|
|
159
|
+
entries: [string, string][];
|
|
160
|
+
}
|
|
161
|
+
/**
|
|
162
|
+
* Renders border radius values with visual preview cards.
|
|
163
|
+
*/
|
|
164
|
+
declare function RadiusSection({ entries }: RadiusSectionProps): react_jsx_runtime.JSX.Element;
|
|
165
|
+
/**
|
|
166
|
+
* Full page wrapper for Border Radius story.
|
|
167
|
+
*/
|
|
168
|
+
interface RadiusPageProps extends RadiusSectionProps {
|
|
169
|
+
}
|
|
170
|
+
declare function RadiusPage(props: RadiusPageProps): react_jsx_runtime.JSX.Element;
|
|
171
|
+
|
|
172
|
+
/**
|
|
173
|
+
* ShadowsSection - Renders shadow values with preview cards.
|
|
174
|
+
*/
|
|
175
|
+
interface ShadowsSectionProps {
|
|
176
|
+
/** Shadow value entries: [label, value][] */
|
|
177
|
+
entries: [string, string][];
|
|
178
|
+
}
|
|
179
|
+
/**
|
|
180
|
+
* Renders shadow values with visual preview cards.
|
|
181
|
+
*/
|
|
182
|
+
declare function ShadowsSection({ entries }: ShadowsSectionProps): react_jsx_runtime.JSX.Element;
|
|
183
|
+
/**
|
|
184
|
+
* Full page wrapper for Shadows story.
|
|
185
|
+
*/
|
|
186
|
+
interface ShadowsPageProps extends ShadowsSectionProps {
|
|
187
|
+
}
|
|
188
|
+
declare function ShadowsPage(props: ShadowsPageProps): react_jsx_runtime.JSX.Element;
|
|
189
|
+
|
|
190
|
+
/**
|
|
191
|
+
* SpacingSection - Renders spacing values with visual bars.
|
|
192
|
+
*/
|
|
193
|
+
interface SpacingSectionProps {
|
|
194
|
+
/** Spacing value entries: [label, value][] */
|
|
195
|
+
entries: [string, string][];
|
|
196
|
+
/** Maximum numeric value (for bar scaling) */
|
|
197
|
+
maxValue: number;
|
|
198
|
+
}
|
|
199
|
+
/**
|
|
200
|
+
* Renders spacing values with visual bars showing relative sizes.
|
|
201
|
+
*/
|
|
202
|
+
declare function SpacingSection({ entries }: SpacingSectionProps): react_jsx_runtime.JSX.Element;
|
|
203
|
+
/**
|
|
204
|
+
* Full page wrapper for Spacing story.
|
|
205
|
+
*/
|
|
206
|
+
interface SpacingPageProps extends SpacingSectionProps {
|
|
207
|
+
}
|
|
208
|
+
declare function SpacingPage(props: SpacingPageProps): react_jsx_runtime.JSX.Element;
|
|
209
|
+
|
|
210
|
+
interface ThemeLayoutProps {
|
|
211
|
+
/** Title for the page */
|
|
212
|
+
title: string;
|
|
213
|
+
/** Child components */
|
|
214
|
+
children: ReactNode;
|
|
215
|
+
}
|
|
216
|
+
/**
|
|
217
|
+
* Wrapper component that provides Storybook theming and common layout.
|
|
218
|
+
* Used as the decorator for theme stories.
|
|
219
|
+
*/
|
|
220
|
+
declare function ThemeLayout({ title, children }: ThemeLayoutProps): react_jsx_runtime.JSX.Element;
|
|
221
|
+
/**
|
|
222
|
+
* Storybook decorator function that wraps stories with ThemeLayout.
|
|
223
|
+
*/
|
|
224
|
+
declare function themeDecorator(Story: react__default.ComponentType): react_jsx_runtime.JSX.Element;
|
|
225
|
+
|
|
226
|
+
/**
|
|
227
|
+
* TypographySection - Renders typography preview with weight/size filters.
|
|
228
|
+
*/
|
|
229
|
+
interface TypographySectionProps {
|
|
230
|
+
/** Custom font families */
|
|
231
|
+
customFamilies: [string, string][];
|
|
232
|
+
/** Built-in font families (sans, serif, mono) */
|
|
233
|
+
builtInFamilies: [string, string][];
|
|
234
|
+
/** Font weight definitions: [label, value][] */
|
|
235
|
+
fontWeights: [string, string][];
|
|
236
|
+
/** Font size definitions: [label, value][] */
|
|
237
|
+
fontSizes: [string, string][];
|
|
238
|
+
/** All weight keys for initial filter state */
|
|
239
|
+
allWeightKeys: string[];
|
|
240
|
+
/** All size keys for initial filter state */
|
|
241
|
+
allSizeKeys: string[];
|
|
242
|
+
/** Default sample text for typography preview */
|
|
243
|
+
defaultSampleText: string;
|
|
244
|
+
/** Whether to show only custom fonts */
|
|
245
|
+
showOnlyCustom: boolean;
|
|
246
|
+
}
|
|
247
|
+
/**
|
|
248
|
+
* Renders typography section with weight/size filter controls.
|
|
249
|
+
*/
|
|
250
|
+
declare function TypographySection({ customFamilies, builtInFamilies, fontWeights, fontSizes, allWeightKeys, allSizeKeys, defaultSampleText, showOnlyCustom, }: TypographySectionProps): react_jsx_runtime.JSX.Element;
|
|
251
|
+
/**
|
|
252
|
+
* Full page wrapper for Typography story.
|
|
253
|
+
*/
|
|
254
|
+
interface TypographyPageProps extends TypographySectionProps {
|
|
255
|
+
}
|
|
256
|
+
declare function TypographyPage(props: TypographyPageProps): react_jsx_runtime.JSX.Element;
|
|
257
|
+
|
|
258
|
+
export { ColorSection as C, type DesignSystemData as D, type NormalizedAddonOptions as N, RadiusPage as R, ShadowsPage as S, ThemeLayout as T, ColorsPage as a, RadiusSection as b, ShadowsSection as c, SpacingPage as d, SpacingSection as e, TypographyPage as f, TypographySection as g, type ColorData as h, type ColorsContext as i, type TypographyContext as j, type SpacingContext as k, type ShadowsContext as l, type RadiusContext as m, type ColorSectionProps as n, type ColorsPageProps as o, type RadiusPageProps as p, type RadiusSectionProps as q, type ShadowsPageProps as r, type ShadowsSectionProps as s, themeDecorator as t, type SpacingPageProps as u, type SpacingSectionProps as v, type ThemeLayoutProps as w, type TypographyPageProps as x, type TypographySectionProps as y };
|
package/dist/assets.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/addon/assets.ts"],"names":[],"mappings":";;;AAwBA,IAAM,SAAA,GAAwB,IAAA;AAE9B,IAAO,cAAA,GAAQ","file":"assets.cjs","sourcesContent":["/**\n * Asset Group Data Export\n *\n * This module provides typed asset group data for custom MDX templates.\n * At runtime, unplugin swaps this import to the actual per-group data module\n * based on which virtual asset MDX is being processed.\n *\n * Usage in templates:\n * ```mdx\n * import groupData from 'storybook-addon-design-system-docs/assets';\n *\n * <AssetSection {...groupData} />\n * ```\n *\n * The `groupData` will be the full AssetGroup object for the current asset group\n * (e.g., Icons, Illustrations), including all assets, configuration, and metadata.\n */\n\nimport type { AssetGroup } from \"./types\";\n\n/**\n * The asset group data for the current documentation page.\n * This placeholder is replaced at build time with the actual group data.\n */\nconst groupData: AssetGroup = null as unknown as AssetGroup;\n\nexport default groupData;\n\n// Re-export types for convenience\nexport type { Asset, AssetGroup, NormalizedAssetGroup } from \"./types\";\n"]}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { A as AssetGroup } from './types-BVOYHsBN.cjs';
|
|
2
|
+
export { a as Asset, N as NormalizedAssetGroup } from './types-BVOYHsBN.cjs';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Asset Group Data Export
|
|
6
|
+
*
|
|
7
|
+
* This module provides typed asset group data for custom MDX templates.
|
|
8
|
+
* At runtime, unplugin swaps this import to the actual per-group data module
|
|
9
|
+
* based on which virtual asset MDX is being processed.
|
|
10
|
+
*
|
|
11
|
+
* Usage in templates:
|
|
12
|
+
* ```mdx
|
|
13
|
+
* import groupData from 'storybook-addon-design-system-docs/assets';
|
|
14
|
+
*
|
|
15
|
+
* <AssetSection {...groupData} />
|
|
16
|
+
* ```
|
|
17
|
+
*
|
|
18
|
+
* The `groupData` will be the full AssetGroup object for the current asset group
|
|
19
|
+
* (e.g., Icons, Illustrations), including all assets, configuration, and metadata.
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* The asset group data for the current documentation page.
|
|
24
|
+
* This placeholder is replaced at build time with the actual group data.
|
|
25
|
+
*/
|
|
26
|
+
declare const groupData: AssetGroup;
|
|
27
|
+
|
|
28
|
+
export { AssetGroup, groupData as default };
|
package/dist/assets.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { A as AssetGroup } from './types-BVOYHsBN.js';
|
|
2
|
+
export { a as Asset, N as NormalizedAssetGroup } from './types-BVOYHsBN.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Asset Group Data Export
|
|
6
|
+
*
|
|
7
|
+
* This module provides typed asset group data for custom MDX templates.
|
|
8
|
+
* At runtime, unplugin swaps this import to the actual per-group data module
|
|
9
|
+
* based on which virtual asset MDX is being processed.
|
|
10
|
+
*
|
|
11
|
+
* Usage in templates:
|
|
12
|
+
* ```mdx
|
|
13
|
+
* import groupData from 'storybook-addon-design-system-docs/assets';
|
|
14
|
+
*
|
|
15
|
+
* <AssetSection {...groupData} />
|
|
16
|
+
* ```
|
|
17
|
+
*
|
|
18
|
+
* The `groupData` will be the full AssetGroup object for the current asset group
|
|
19
|
+
* (e.g., Icons, Illustrations), including all assets, configuration, and metadata.
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* The asset group data for the current documentation page.
|
|
24
|
+
* This placeholder is replaced at build time with the actual group data.
|
|
25
|
+
*/
|
|
26
|
+
declare const groupData: AssetGroup;
|
|
27
|
+
|
|
28
|
+
export { AssetGroup, groupData as default };
|
package/dist/assets.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/addon/assets.ts"],"names":[],"mappings":";AAwBA,IAAM,SAAA,GAAwB,IAAA;AAE9B,IAAO,cAAA,GAAQ","file":"assets.js","sourcesContent":["/**\n * Asset Group Data Export\n *\n * This module provides typed asset group data for custom MDX templates.\n * At runtime, unplugin swaps this import to the actual per-group data module\n * based on which virtual asset MDX is being processed.\n *\n * Usage in templates:\n * ```mdx\n * import groupData from 'storybook-addon-design-system-docs/assets';\n *\n * <AssetSection {...groupData} />\n * ```\n *\n * The `groupData` will be the full AssetGroup object for the current asset group\n * (e.g., Icons, Illustrations), including all assets, configuration, and metadata.\n */\n\nimport type { AssetGroup } from \"./types\";\n\n/**\n * The asset group data for the current documentation page.\n * This placeholder is replaced at build time with the actual group data.\n */\nconst groupData: AssetGroup = null as unknown as AssetGroup;\n\nexport default groupData;\n\n// Re-export types for convenience\nexport type { Asset, AssetGroup, NormalizedAssetGroup } from \"./types\";\n"]}
|