@walkeros/explorer 1.0.2 → 2.1.0
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/LICENSE +2 -2
- package/STYLE.md +240 -136
- package/dist/{chunk-VWWAIDNX.mjs → chunk-YKT4D7MG.mjs} +201 -53
- package/dist/chunk-YKT4D7MG.mjs.map +1 -0
- package/dist/components/atoms/alert.d.ts +29 -0
- package/dist/components/atoms/alert.d.ts.map +1 -0
- package/dist/components/atoms/alert.js +19 -0
- package/dist/components/atoms/alert.js.map +1 -0
- package/dist/components/atoms/alert.stories.d.ts +7 -0
- package/dist/components/atoms/alert.stories.d.ts.map +1 -0
- package/dist/components/atoms/alert.stories.js +14 -0
- package/dist/components/atoms/alert.stories.js.map +1 -0
- package/dist/components/atoms/button.stories.d.ts +14 -0
- package/dist/components/atoms/button.stories.d.ts.map +1 -0
- package/dist/components/atoms/button.stories.js +25 -0
- package/dist/components/atoms/button.stories.js.map +1 -0
- package/dist/components/atoms/code.d.ts +4 -1
- package/dist/components/atoms/code.d.ts.map +1 -1
- package/dist/components/atoms/code.js +45 -12
- package/dist/components/atoms/code.js.map +1 -1
- package/dist/components/atoms/footer.stories.d.ts +14 -0
- package/dist/components/atoms/footer.stories.d.ts.map +1 -0
- package/dist/components/atoms/footer.stories.js +29 -0
- package/dist/components/atoms/footer.stories.js.map +1 -0
- package/dist/components/atoms/form-field.d.ts +28 -0
- package/dist/components/atoms/form-field.d.ts.map +1 -0
- package/dist/components/atoms/form-field.js +16 -0
- package/dist/components/atoms/form-field.js.map +1 -0
- package/dist/components/atoms/form-field.stories.d.ts +7 -0
- package/dist/components/atoms/form-field.stories.d.ts.map +1 -0
- package/dist/components/atoms/form-field.stories.js +16 -0
- package/dist/components/atoms/form-field.stories.js.map +1 -0
- package/dist/components/atoms/form-input.d.ts +43 -0
- package/dist/components/atoms/form-input.d.ts.map +1 -0
- package/dist/components/atoms/form-input.js +26 -0
- package/dist/components/atoms/form-input.js.map +1 -0
- package/dist/components/atoms/form-input.stories.d.ts +7 -0
- package/dist/components/atoms/form-input.stories.d.ts.map +1 -0
- package/dist/components/atoms/form-input.stories.js +17 -0
- package/dist/components/atoms/form-input.stories.js.map +1 -0
- package/dist/components/atoms/form-textarea.d.ts +41 -0
- package/dist/components/atoms/form-textarea.d.ts.map +1 -0
- package/dist/components/atoms/form-textarea.js +26 -0
- package/dist/components/atoms/form-textarea.js.map +1 -0
- package/dist/components/atoms/form-textarea.stories.d.ts +7 -0
- package/dist/components/atoms/form-textarea.stories.d.ts.map +1 -0
- package/dist/components/atoms/form-textarea.stories.js +17 -0
- package/dist/components/atoms/form-textarea.stories.js.map +1 -0
- package/dist/components/atoms/grid.stories.d.ts +18 -0
- package/dist/components/atoms/grid.stories.d.ts.map +1 -0
- package/dist/components/atoms/grid.stories.js +60 -0
- package/dist/components/atoms/grid.stories.js.map +1 -0
- package/dist/components/atoms/header.stories.d.ts +15 -0
- package/dist/components/atoms/header.stories.d.ts.map +1 -0
- package/dist/components/atoms/header.stories.js +37 -0
- package/dist/components/atoms/header.stories.js.map +1 -0
- package/dist/components/atoms/icons/icon.stories.d.ts +18 -0
- package/dist/components/atoms/icons/icon.stories.d.ts.map +1 -0
- package/dist/components/atoms/icons/icon.stories.js +37 -0
- package/dist/components/atoms/icons/icon.stories.js.map +1 -0
- package/dist/components/atoms/panel-hints.stories.d.ts +14 -0
- package/dist/components/atoms/panel-hints.stories.d.ts.map +1 -0
- package/dist/components/atoms/panel-hints.stories.js +35 -0
- package/dist/components/atoms/panel-hints.stories.js.map +1 -0
- package/dist/components/atoms/spinner.d.ts +17 -0
- package/dist/components/atoms/spinner.d.ts.map +1 -0
- package/dist/components/atoms/spinner.js +14 -0
- package/dist/components/atoms/spinner.js.map +1 -0
- package/dist/components/atoms/spinner.stories.d.ts +7 -0
- package/dist/components/atoms/spinner.stories.d.ts.map +1 -0
- package/dist/components/atoms/spinner.stories.js +9 -0
- package/dist/components/atoms/spinner.stories.js.map +1 -0
- package/dist/components/atoms/submit-button.d.ts +34 -0
- package/dist/components/atoms/submit-button.d.ts.map +1 -0
- package/dist/components/atoms/submit-button.js +18 -0
- package/dist/components/atoms/submit-button.js.map +1 -0
- package/dist/components/atoms/submit-button.stories.d.ts +7 -0
- package/dist/components/atoms/submit-button.stories.d.ts.map +1 -0
- package/dist/components/atoms/submit-button.stories.js +13 -0
- package/dist/components/atoms/submit-button.stories.js.map +1 -0
- package/dist/components/molecules/architecture-flow/ArchitectureFlow.stories.js +1 -1
- package/dist/components/molecules/architecture-flow/ArchitectureFlow.stories.js.map +1 -1
- package/dist/components/molecules/code-box.d.ts +2 -1
- package/dist/components/molecules/code-box.d.ts.map +1 -1
- package/dist/components/molecules/code-box.js +32 -6
- package/dist/components/molecules/code-box.js.map +1 -1
- package/dist/components/molecules/code-box.stories.d.ts +21 -0
- package/dist/components/molecules/code-box.stories.d.ts.map +1 -1
- package/dist/components/molecules/code-box.stories.js +112 -0
- package/dist/components/molecules/code-box.stories.js.map +1 -1
- package/dist/components/molecules/code-snippet.stories.d.ts +11 -0
- package/dist/components/molecules/code-snippet.stories.d.ts.map +1 -1
- package/dist/components/molecules/code-snippet.stories.js +38 -0
- package/dist/components/molecules/code-snippet.stories.js.map +1 -1
- package/dist/components/molecules/config-form-card.d.ts +50 -0
- package/dist/components/molecules/config-form-card.d.ts.map +1 -0
- package/dist/components/molecules/config-form-card.js +30 -0
- package/dist/components/molecules/config-form-card.js.map +1 -0
- package/dist/components/molecules/config-form-card.stories.d.ts +7 -0
- package/dist/components/molecules/config-form-card.stories.d.ts.map +1 -0
- package/dist/components/molecules/config-form-card.stories.js +21 -0
- package/dist/components/molecules/config-form-card.stories.js.map +1 -0
- package/dist/components/molecules/dropdown.d.ts +68 -0
- package/dist/components/molecules/dropdown.d.ts.map +1 -0
- package/dist/components/molecules/dropdown.js +47 -0
- package/dist/components/molecules/dropdown.js.map +1 -0
- package/dist/components/molecules/dropdown.stories.d.ts +7 -0
- package/dist/components/molecules/dropdown.stories.d.ts.map +1 -0
- package/dist/components/molecules/dropdown.stories.js +18 -0
- package/dist/components/molecules/dropdown.stories.js.map +1 -0
- package/dist/components/molecules/flow-map/FlowMap.stories.d.ts.map +1 -1
- package/dist/components/molecules/flow-map/FlowMap.stories.js +7 -1
- package/dist/components/molecules/flow-map/FlowMap.stories.js.map +1 -1
- package/dist/components/molecules/flow-selector.d.ts +19 -0
- package/dist/components/molecules/flow-selector.d.ts.map +1 -0
- package/dist/components/molecules/flow-selector.js +26 -0
- package/dist/components/molecules/flow-selector.js.map +1 -0
- package/dist/components/molecules/flow-selector.stories.d.ts +28 -0
- package/dist/components/molecules/flow-selector.stories.d.ts.map +1 -0
- package/dist/components/molecules/flow-selector.stories.js +66 -0
- package/dist/components/molecules/flow-selector.stories.js.map +1 -0
- package/dist/components/molecules/form-card.d.ts +28 -0
- package/dist/components/molecules/form-card.d.ts.map +1 -0
- package/dist/components/molecules/form-card.js +16 -0
- package/dist/components/molecules/form-card.js.map +1 -0
- package/dist/components/molecules/form-card.stories.d.ts +7 -0
- package/dist/components/molecules/form-card.stories.d.ts.map +1 -0
- package/dist/components/molecules/form-card.stories.js +16 -0
- package/dist/components/molecules/form-card.stories.js.map +1 -0
- package/dist/components/molecules/preview.d.ts.map +1 -1
- package/dist/components/molecules/preview.js +0 -1
- package/dist/components/molecules/preview.js.map +1 -1
- package/dist/components/molecules/split-button.d.ts +25 -0
- package/dist/components/molecules/split-button.d.ts.map +1 -0
- package/dist/components/molecules/split-button.js +37 -0
- package/dist/components/molecules/split-button.js.map +1 -0
- package/dist/components/molecules/split-button.stories.d.ts +32 -0
- package/dist/components/molecules/split-button.stories.d.ts.map +1 -0
- package/dist/components/molecules/split-button.stories.js +88 -0
- package/dist/components/molecules/split-button.stories.js.map +1 -0
- package/dist/hooks/useDropdown.d.ts +34 -0
- package/dist/hooks/useDropdown.d.ts.map +1 -0
- package/dist/hooks/useDropdown.js +66 -0
- package/dist/hooks/useDropdown.js.map +1 -0
- package/dist/index.d.cts +432 -4
- package/dist/index.d.ts +25 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +15 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +861 -178
- package/dist/index.mjs.map +1 -1
- package/dist/{monaco-types-4FIH5OVX.mjs → monaco-types-OLSF6MIE.mjs} +2 -2
- package/dist/styles.css +534 -0
- package/dist/themes/lighthouse.d.ts.map +1 -1
- package/dist/themes/lighthouse.js +1 -0
- package/dist/themes/lighthouse.js.map +1 -1
- package/dist/themes/palenight.d.ts.map +1 -1
- package/dist/themes/palenight.js +1 -0
- package/dist/themes/palenight.js.map +1 -1
- package/dist/utils/format-code.d.ts.map +1 -1
- package/dist/utils/format-code.js +11 -2
- package/dist/utils/format-code.js.map +1 -1
- package/dist/utils/monaco-decorators.d.ts.map +1 -1
- package/dist/utils/monaco-decorators.js +2 -0
- package/dist/utils/monaco-decorators.js.map +1 -1
- package/dist/utils/monaco-json-schema.d.ts +24 -0
- package/dist/utils/monaco-json-schema.d.ts.map +1 -0
- package/dist/utils/monaco-json-schema.js +65 -0
- package/dist/utils/monaco-json-schema.js.map +1 -0
- package/package.json +5 -14
- package/dist/chunk-VWWAIDNX.mjs.map +0 -1
- /package/dist/{monaco-types-4FIH5OVX.mjs.map → monaco-types-OLSF6MIE.mjs.map} +0 -0
|
@@ -5,6 +5,7 @@ import { registerAllThemes } from '../../themes';
|
|
|
5
5
|
import { registerWalkerOSTypes } from '../../utils/monaco-types';
|
|
6
6
|
import { applyDataElbDecorations, registerDataElbStyles, } from '../../utils/monaco-decorators';
|
|
7
7
|
import { registerFormatters } from '../../utils/monaco-formatters';
|
|
8
|
+
import { generateModelPath, registerJsonSchema, unregisterJsonSchema, } from '../../utils/monaco-json-schema';
|
|
8
9
|
import { useMonacoHeight } from '../../hooks/useMonacoHeight';
|
|
9
10
|
import { useGridHeight } from '../../contexts/GridHeightContext';
|
|
10
11
|
/**
|
|
@@ -39,7 +40,10 @@ import { useGridHeight } from '../../contexts/GridHeightContext';
|
|
|
39
40
|
* autoHeight={{ min: 100, max: 600 }}
|
|
40
41
|
* />
|
|
41
42
|
*/
|
|
42
|
-
export function Code({ code, language = 'javascript', onChange, disabled = false, lineNumbers = false, folding = false, wordWrap = false, className, beforeMount, onMount, autoHeight, fontSize = 13, packages, sticky = true, ide = false, }) {
|
|
43
|
+
export function Code({ code, language = 'javascript', onChange, disabled = false, lineNumbers = false, minimap = false, folding = false, wordWrap = false, className, beforeMount, onMount, autoHeight, fontSize = 13, packages, sticky = true, ide = false, jsonSchema, }) {
|
|
44
|
+
// Track if component has mounted (client-side hydration complete)
|
|
45
|
+
const [isMounted, setIsMounted] = useState(false);
|
|
46
|
+
// Use a consistent default theme for SSR - only update after mount
|
|
43
47
|
const [monacoTheme, setMonacoTheme] = useState('vs-light');
|
|
44
48
|
const decorationsCleanupRef = useRef(null);
|
|
45
49
|
const monacoRef = useRef(null);
|
|
@@ -75,7 +79,10 @@ export function Code({ code, language = 'javascript', onChange, disabled = false
|
|
|
75
79
|
registerDataElbStyles();
|
|
76
80
|
}, []);
|
|
77
81
|
// Helper: Find data-theme attribute from closest ancestor or document
|
|
82
|
+
// Returns null during SSR (no document available)
|
|
78
83
|
const getDataTheme = useCallback(() => {
|
|
84
|
+
if (typeof document === 'undefined')
|
|
85
|
+
return null;
|
|
79
86
|
// Check container ref first (closest to Monaco)
|
|
80
87
|
if (containerRef.current) {
|
|
81
88
|
const closest = containerRef.current.closest('[data-theme]');
|
|
@@ -86,8 +93,14 @@ export function Code({ code, language = 'javascript', onChange, disabled = false
|
|
|
86
93
|
// Fall back to document root
|
|
87
94
|
return document.documentElement.getAttribute('data-theme');
|
|
88
95
|
}, []);
|
|
89
|
-
//
|
|
96
|
+
// Mark component as mounted (hydration complete)
|
|
90
97
|
useEffect(() => {
|
|
98
|
+
setIsMounted(true);
|
|
99
|
+
}, []);
|
|
100
|
+
// Theme detection - only runs after mount to prevent hydration mismatch
|
|
101
|
+
useEffect(() => {
|
|
102
|
+
if (!isMounted)
|
|
103
|
+
return;
|
|
91
104
|
const checkTheme = () => {
|
|
92
105
|
const dataTheme = getDataTheme();
|
|
93
106
|
const isDark = dataTheme === 'dark' ||
|
|
@@ -113,7 +126,7 @@ export function Code({ code, language = 'javascript', onChange, disabled = false
|
|
|
113
126
|
observer.disconnect();
|
|
114
127
|
mediaQuery.removeEventListener('change', handleChange);
|
|
115
128
|
};
|
|
116
|
-
}, [getDataTheme]);
|
|
129
|
+
}, [isMounted, getDataTheme]);
|
|
117
130
|
// ResizeObserver for container size changes
|
|
118
131
|
// Complements automaticLayout: true for more reliable detection
|
|
119
132
|
// Handles cases where Grid constraints change or parent container resizes
|
|
@@ -133,6 +146,23 @@ export function Code({ code, language = 'javascript', onChange, disabled = false
|
|
|
133
146
|
resizeObserver.disconnect();
|
|
134
147
|
};
|
|
135
148
|
}, []);
|
|
149
|
+
// JSON Schema registration for IntelliSense
|
|
150
|
+
const modelPathRef = useRef(null);
|
|
151
|
+
// Generate stable model path on first render if jsonSchema is provided
|
|
152
|
+
if (jsonSchema && !modelPathRef.current) {
|
|
153
|
+
modelPathRef.current = generateModelPath();
|
|
154
|
+
}
|
|
155
|
+
// Register/update JSON schema when it changes
|
|
156
|
+
useEffect(() => {
|
|
157
|
+
if (!jsonSchema || !modelPathRef.current)
|
|
158
|
+
return;
|
|
159
|
+
registerJsonSchema(modelPathRef.current, jsonSchema);
|
|
160
|
+
return () => {
|
|
161
|
+
if (modelPathRef.current) {
|
|
162
|
+
unregisterJsonSchema(modelPathRef.current);
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
}, [jsonSchema]);
|
|
136
166
|
const handleChange = (value) => {
|
|
137
167
|
if (onChange && value !== undefined) {
|
|
138
168
|
onChange(value);
|
|
@@ -140,10 +170,7 @@ export function Code({ code, language = 'javascript', onChange, disabled = false
|
|
|
140
170
|
};
|
|
141
171
|
const handleBeforeMount = async (monaco) => {
|
|
142
172
|
monacoRef.current = monaco;
|
|
143
|
-
|
|
144
|
-
beforeMount(monaco);
|
|
145
|
-
return;
|
|
146
|
-
}
|
|
173
|
+
// Always run built-in setup
|
|
147
174
|
registerAllThemes(monaco);
|
|
148
175
|
registerFormatters(monaco);
|
|
149
176
|
if (packages && packages.length > 0) {
|
|
@@ -161,6 +188,10 @@ export function Code({ code, language = 'javascript', onChange, disabled = false
|
|
|
161
188
|
window.matchMedia('(prefers-color-scheme: dark)').matches);
|
|
162
189
|
const themeName = isDark ? 'elbTheme-dark' : 'elbTheme-light';
|
|
163
190
|
monaco.editor.setTheme(themeName);
|
|
191
|
+
// Call user's beforeMount AFTER built-in setup
|
|
192
|
+
if (beforeMount) {
|
|
193
|
+
beforeMount(monaco);
|
|
194
|
+
}
|
|
164
195
|
};
|
|
165
196
|
const MonacoEditor = Editor;
|
|
166
197
|
const handleEditorMount = (monacoEditor) => {
|
|
@@ -197,10 +228,10 @@ export function Code({ code, language = 'javascript', onChange, disabled = false
|
|
|
197
228
|
// Add modifier class when using auto-height or synced height
|
|
198
229
|
const useContentHeight = !!autoHeight || !!gridContext?.enabled;
|
|
199
230
|
const codeClassName = `elb-code ${useContentHeight ? 'elb-code--auto-height' : ''} ${className || ''}`.trim();
|
|
200
|
-
return (_jsx("div", { className: codeClassName, ref: containerRef, children: _jsx(MonacoEditor, { height: monacoHeight, language: language, value: code, onChange: handleChange, beforeMount: handleBeforeMount, onMount: handleEditorMount, theme: monacoTheme, options: {
|
|
231
|
+
return (_jsx("div", { className: codeClassName, ref: containerRef, children: _jsx(MonacoEditor, { height: monacoHeight, language: language, value: code, onChange: handleChange, beforeMount: handleBeforeMount, onMount: handleEditorMount, theme: monacoTheme, path: modelPathRef.current || undefined, options: {
|
|
201
232
|
readOnly: disabled || !onChange,
|
|
202
233
|
readOnlyMessage: { value: '' },
|
|
203
|
-
minimap: { enabled:
|
|
234
|
+
minimap: { enabled: minimap },
|
|
204
235
|
fontSize: fontSize,
|
|
205
236
|
lineHeight: Math.round(fontSize * 1.5),
|
|
206
237
|
padding: 0,
|
|
@@ -218,8 +249,8 @@ export function Code({ code, language = 'javascript', onChange, disabled = false
|
|
|
218
249
|
fixedOverflowWidgets: true,
|
|
219
250
|
overviewRulerLanes: 0,
|
|
220
251
|
renderLineHighlight: 'none',
|
|
221
|
-
renderValidationDecorations: ide ? 'editable' : 'off',
|
|
222
|
-
hover: { enabled: ide },
|
|
252
|
+
renderValidationDecorations: ide || jsonSchema ? 'editable' : 'off',
|
|
253
|
+
hover: { enabled: ide || !!jsonSchema },
|
|
223
254
|
'semanticHighlighting.enabled': ide,
|
|
224
255
|
showDeprecated: ide,
|
|
225
256
|
showUnused: ide,
|
|
@@ -244,7 +275,9 @@ export function Code({ code, language = 'javascript', onChange, disabled = false
|
|
|
244
275
|
occurrencesHighlight: 'off', // Disable highlighting matching words
|
|
245
276
|
selectOnLineNumbers: false, // Don't select line when clicking line numbers
|
|
246
277
|
wordBasedSuggestions: 'off', // Reduce auto-completion interference
|
|
247
|
-
quickSuggestions:
|
|
278
|
+
quickSuggestions: jsonSchema
|
|
279
|
+
? { strings: true, other: true, comments: false }
|
|
280
|
+
: false,
|
|
248
281
|
stickyScroll: { enabled: sticky },
|
|
249
282
|
} }) }));
|
|
250
283
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code.js","sourceRoot":"","sources":["../../../src/components/atoms/code.tsx"],"names":[],"mappings":";AAAA,OAAc,EAEZ,SAAS,EACT,QAAQ,EACR,MAAM,EACN,WAAW,GACZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,EAAU,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EACL,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"code.js","sourceRoot":"","sources":["../../../src/components/atoms/code.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Footer } from './footer';
|
|
3
|
+
/**
|
|
4
|
+
* Footer - Footer component for boxes and panels
|
|
5
|
+
*
|
|
6
|
+
* Provides a fixed-height footer area at the bottom of a box.
|
|
7
|
+
* Pairs with Header for consistent box structure.
|
|
8
|
+
*/
|
|
9
|
+
declare const meta: Meta<typeof Footer>;
|
|
10
|
+
export default meta;
|
|
11
|
+
type Story = StoryObj<typeof Footer>;
|
|
12
|
+
export declare const Default: Story;
|
|
13
|
+
export declare const WithText: Story;
|
|
14
|
+
//# sourceMappingURL=footer.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"footer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/footer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAI7B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Footer } from './footer';
|
|
3
|
+
import { ButtonGroup } from './button-group';
|
|
4
|
+
/**
|
|
5
|
+
* Footer - Footer component for boxes and panels
|
|
6
|
+
*
|
|
7
|
+
* Provides a fixed-height footer area at the bottom of a box.
|
|
8
|
+
* Pairs with Header for consistent box structure.
|
|
9
|
+
*/
|
|
10
|
+
const meta = {
|
|
11
|
+
title: 'Atoms/Footer',
|
|
12
|
+
component: Footer,
|
|
13
|
+
tags: ['autodocs'],
|
|
14
|
+
};
|
|
15
|
+
export default meta;
|
|
16
|
+
export const Default = {
|
|
17
|
+
args: {
|
|
18
|
+
children: (_jsx(ButtonGroup, { buttons: [
|
|
19
|
+
{ label: 'Cancel', value: 'cancel' },
|
|
20
|
+
{ label: 'Save', value: 'save', active: true },
|
|
21
|
+
], onButtonClick: () => { } })),
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
|
+
export const WithText = {
|
|
25
|
+
args: {
|
|
26
|
+
children: _jsx("span", { children: "Last saved: 2 minutes ago" }),
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=footer.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"footer.stories.js","sourceRoot":"","sources":["../../../src/components/atoms/footer.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;;;;GAKG;AACH,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,QAAQ,EAAE,CACR,KAAC,WAAW,IACV,OAAO,EAAE;gBACP,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;gBACpC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE;aAC/C,EACD,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC,GACvB,CACH;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,QAAQ,EAAE,uDAAsC;KACjD;CACF,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface FormFieldProps {
|
|
3
|
+
/** Form field content (input, textarea, etc.) */
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
/** Field label */
|
|
6
|
+
label?: string;
|
|
7
|
+
/** HTML id for the input (links label to input) */
|
|
8
|
+
htmlFor?: string;
|
|
9
|
+
/** Error message to display */
|
|
10
|
+
error?: string;
|
|
11
|
+
/** Whether the field is required */
|
|
12
|
+
required?: boolean;
|
|
13
|
+
/** Additional CSS class */
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* FormField - Label + input + error wrapper
|
|
18
|
+
*
|
|
19
|
+
* Pure UI component for consistent form field layout.
|
|
20
|
+
* Wraps input elements with label and error message.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* <FormField label="Email" htmlFor="email" error={errors.email}>
|
|
24
|
+
* <input id="email" type="email" />
|
|
25
|
+
* </FormField>
|
|
26
|
+
*/
|
|
27
|
+
export declare function FormField({ children, label, htmlFor, error, required, className, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
//# sourceMappingURL=form-field.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/form-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,cAAc;IAC7B,iDAAiD;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAc,GACf,EAAE,cAAc,2CAuBhB"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* FormField - Label + input + error wrapper
|
|
4
|
+
*
|
|
5
|
+
* Pure UI component for consistent form field layout.
|
|
6
|
+
* Wraps input elements with label and error message.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* <FormField label="Email" htmlFor="email" error={errors.email}>
|
|
10
|
+
* <input id="email" type="email" />
|
|
11
|
+
* </FormField>
|
|
12
|
+
*/
|
|
13
|
+
export function FormField({ children, label, htmlFor, error, required, className = '', }) {
|
|
14
|
+
return (_jsxs("div", { className: `elb-form-field ${error ? 'elb-form-field--error' : ''} ${className}`.trim(), children: [label && (_jsxs("label", { htmlFor: htmlFor, className: "elb-form-field__label", children: [label, required && (_jsx("span", { className: "elb-form-field__required", "aria-hidden": "true", children: "*" }))] })), _jsx("div", { className: "elb-form-field__input", children: children }), error && (_jsx("div", { className: "elb-form-field__error", role: "alert", children: error }))] }));
|
|
15
|
+
}
|
|
16
|
+
//# sourceMappingURL=form-field.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../src/components/atoms/form-field.tsx"],"names":[],"mappings":";AAiBA;;;;;;;;;;GAUG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,QAAQ,EACR,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,EAAE,GACC;IACf,OAAO,CACL,eACE,SAAS,EAAE,kBAAkB,KAAK,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,aAEtF,KAAK,IAAI,CACR,iBAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,uBAAuB,aACvD,KAAK,EACL,QAAQ,IAAI,CACX,eAAM,SAAS,EAAC,0BAA0B,iBAAa,MAAM,kBAEtD,CACR,IACK,CACT,EACD,cAAK,SAAS,EAAC,uBAAuB,YAAE,QAAQ,GAAO,EACtD,KAAK,IAAI,CACR,cAAK,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO,YAChD,KAAK,GACF,CACP,IACG,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { FormField } from './form-field';
|
|
3
|
+
declare const meta: Meta<typeof FormField>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof FormField>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
//# sourceMappingURL=form-field.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-field.stories.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/form-field.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAIhC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { FormField } from './form-field';
|
|
3
|
+
const meta = {
|
|
4
|
+
title: 'Atoms/FormField',
|
|
5
|
+
component: FormField,
|
|
6
|
+
tags: ['autodocs'],
|
|
7
|
+
};
|
|
8
|
+
export default meta;
|
|
9
|
+
export const Default = {
|
|
10
|
+
args: {
|
|
11
|
+
label: 'Email address',
|
|
12
|
+
htmlFor: 'email',
|
|
13
|
+
children: _jsx("input", { id: "email", type: "email", placeholder: "you@example.com" }),
|
|
14
|
+
},
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=form-field.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-field.stories.js","sourceRoot":"","sources":["../../../src/components/atoms/form-field.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,gBAAO,EAAE,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,iBAAiB,GAAG;KAC1E;CACF,CAAC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
export interface FormInputProps {
|
|
2
|
+
/** Current value (controlled) */
|
|
3
|
+
value: string;
|
|
4
|
+
/** Change handler */
|
|
5
|
+
onChange: (value: string) => void;
|
|
6
|
+
/** Field label */
|
|
7
|
+
label?: string;
|
|
8
|
+
/** Input type */
|
|
9
|
+
type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
|
|
10
|
+
/** Placeholder text */
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
/** Disabled state */
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
/** Autofocus on mount */
|
|
15
|
+
autoFocus?: boolean;
|
|
16
|
+
/** Autocomplete attribute */
|
|
17
|
+
autoComplete?: string;
|
|
18
|
+
/** Required field */
|
|
19
|
+
required?: boolean;
|
|
20
|
+
/** Error state (boolean shows error style, string shows error message) */
|
|
21
|
+
error?: boolean | string;
|
|
22
|
+
/** HTML id (auto-generated if not provided) */
|
|
23
|
+
id?: string;
|
|
24
|
+
/** Additional CSS class */
|
|
25
|
+
className?: string;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* FormInput - Text input with label and error support
|
|
29
|
+
*
|
|
30
|
+
* Pure UI component for single-line text inputs.
|
|
31
|
+
* Fully controlled - all state managed by parent.
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* <FormInput
|
|
35
|
+
* label="Email"
|
|
36
|
+
* type="email"
|
|
37
|
+
* value={email}
|
|
38
|
+
* onChange={setEmail}
|
|
39
|
+
* error={emailError}
|
|
40
|
+
* />
|
|
41
|
+
*/
|
|
42
|
+
export declare function FormInput({ value, onChange, label, type, placeholder, disabled, autoFocus, autoComplete, required, error, id, className, }: FormInputProps): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
//# sourceMappingURL=form-input.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-input.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/form-input.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;IAChE,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,+CAA+C;IAC/C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAa,EACb,WAAW,EACX,QAAgB,EAChB,SAAiB,EACjB,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,EAAE,EACF,SAAc,GACf,EAAE,cAAc,2CA6BhB"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useId } from 'react';
|
|
3
|
+
import { FormField } from './form-field';
|
|
4
|
+
/**
|
|
5
|
+
* FormInput - Text input with label and error support
|
|
6
|
+
*
|
|
7
|
+
* Pure UI component for single-line text inputs.
|
|
8
|
+
* Fully controlled - all state managed by parent.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* <FormInput
|
|
12
|
+
* label="Email"
|
|
13
|
+
* type="email"
|
|
14
|
+
* value={email}
|
|
15
|
+
* onChange={setEmail}
|
|
16
|
+
* error={emailError}
|
|
17
|
+
* />
|
|
18
|
+
*/
|
|
19
|
+
export function FormInput({ value, onChange, label, type = 'text', placeholder, disabled = false, autoFocus = false, autoComplete, required = false, error, id, className = '', }) {
|
|
20
|
+
const generatedId = useId();
|
|
21
|
+
const inputId = id ?? generatedId;
|
|
22
|
+
const hasError = Boolean(error);
|
|
23
|
+
const errorMessage = typeof error === 'string' ? error : undefined;
|
|
24
|
+
return (_jsx(FormField, { label: label, htmlFor: inputId, error: errorMessage, required: required, className: className, children: _jsx("input", { id: inputId, type: type, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, autoFocus: autoFocus, autoComplete: autoComplete, required: required, className: `elb-form-input ${hasError ? 'elb-form-input--error' : ''}`, "aria-invalid": hasError }) }));
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=form-input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-input.js","sourceRoot":"","sources":["../../../src/components/atoms/form-input.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AA6BzC;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,MAAM,EACb,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,EAAE,EACF,SAAS,GAAG,EAAE,GACC;IACf,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,WAAW,CAAC;IAClC,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAChC,MAAM,YAAY,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAEnE,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,YAEpB,gBACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,kBAAkB,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAAE,kBACxD,QAAQ,GACtB,GACQ,CACb,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { FormInput } from './form-input';
|
|
3
|
+
declare const meta: Meta<typeof FormInput>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof FormInput>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
//# sourceMappingURL=form-input.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-input.stories.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/form-input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAIhC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { FormInput } from './form-input';
|
|
2
|
+
const meta = {
|
|
3
|
+
title: 'Atoms/FormInput',
|
|
4
|
+
component: FormInput,
|
|
5
|
+
tags: ['autodocs'],
|
|
6
|
+
};
|
|
7
|
+
export default meta;
|
|
8
|
+
export const Default = {
|
|
9
|
+
args: {
|
|
10
|
+
label: 'Email address',
|
|
11
|
+
type: 'email',
|
|
12
|
+
value: '',
|
|
13
|
+
onChange: () => { },
|
|
14
|
+
placeholder: 'you@example.com',
|
|
15
|
+
},
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=form-input.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-input.stories.js","sourceRoot":"","sources":["../../../src/components/atoms/form-input.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;QAClB,WAAW,EAAE,iBAAiB;KAC/B;CACF,CAAC"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
export interface FormTextareaProps {
|
|
2
|
+
/** Current value (controlled) */
|
|
3
|
+
value: string;
|
|
4
|
+
/** Change handler */
|
|
5
|
+
onChange: (value: string) => void;
|
|
6
|
+
/** Field label */
|
|
7
|
+
label?: string;
|
|
8
|
+
/** Number of visible rows */
|
|
9
|
+
rows?: number;
|
|
10
|
+
/** Placeholder text */
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
/** Disabled state */
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
/** Spellcheck enabled */
|
|
15
|
+
spellCheck?: boolean;
|
|
16
|
+
/** Required field */
|
|
17
|
+
required?: boolean;
|
|
18
|
+
/** Error state (boolean shows error style, string shows error message) */
|
|
19
|
+
error?: boolean | string;
|
|
20
|
+
/** HTML id (auto-generated if not provided) */
|
|
21
|
+
id?: string;
|
|
22
|
+
/** Additional CSS class */
|
|
23
|
+
className?: string;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* FormTextarea - Multi-line text input with label and error support
|
|
27
|
+
*
|
|
28
|
+
* Pure UI component for multi-line text inputs.
|
|
29
|
+
* Fully controlled - all state managed by parent.
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* <FormTextarea
|
|
33
|
+
* label="Configuration"
|
|
34
|
+
* value={config}
|
|
35
|
+
* onChange={setConfig}
|
|
36
|
+
* rows={15}
|
|
37
|
+
* spellCheck={false}
|
|
38
|
+
* />
|
|
39
|
+
*/
|
|
40
|
+
export declare function FormTextarea({ value, onChange, label, rows, placeholder, disabled, spellCheck, required, error, id, className, }: FormTextareaProps): import("react/jsx-runtime").JSX.Element;
|
|
41
|
+
//# sourceMappingURL=form-textarea.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-textarea.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/form-textarea.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,iBAAiB;IAChC,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,+CAA+C;IAC/C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAQ,EACR,WAAW,EACX,QAAgB,EAChB,UAAiB,EACjB,QAAgB,EAChB,KAAK,EACL,EAAE,EACF,SAAc,GACf,EAAE,iBAAiB,2CA4BnB"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useId } from 'react';
|
|
3
|
+
import { FormField } from './form-field';
|
|
4
|
+
/**
|
|
5
|
+
* FormTextarea - Multi-line text input with label and error support
|
|
6
|
+
*
|
|
7
|
+
* Pure UI component for multi-line text inputs.
|
|
8
|
+
* Fully controlled - all state managed by parent.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* <FormTextarea
|
|
12
|
+
* label="Configuration"
|
|
13
|
+
* value={config}
|
|
14
|
+
* onChange={setConfig}
|
|
15
|
+
* rows={15}
|
|
16
|
+
* spellCheck={false}
|
|
17
|
+
* />
|
|
18
|
+
*/
|
|
19
|
+
export function FormTextarea({ value, onChange, label, rows = 5, placeholder, disabled = false, spellCheck = true, required = false, error, id, className = '', }) {
|
|
20
|
+
const generatedId = useId();
|
|
21
|
+
const textareaId = id ?? generatedId;
|
|
22
|
+
const hasError = Boolean(error);
|
|
23
|
+
const errorMessage = typeof error === 'string' ? error : undefined;
|
|
24
|
+
return (_jsx(FormField, { label: label, htmlFor: textareaId, error: errorMessage, required: required, className: className, children: _jsx("textarea", { id: textareaId, value: value, onChange: (e) => onChange(e.target.value), rows: rows, placeholder: placeholder, disabled: disabled, spellCheck: spellCheck, required: required, className: `elb-form-textarea ${hasError ? 'elb-form-textarea--error' : ''}`, "aria-invalid": hasError }) }));
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=form-textarea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-textarea.js","sourceRoot":"","sources":["../../../src/components/atoms/form-textarea.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AA2BzC;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,CAAC,EACR,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,IAAI,EACjB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,EAAE,EACF,SAAS,GAAG,EAAE,GACI;IAClB,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,UAAU,GAAG,EAAE,IAAI,WAAW,CAAC;IACrC,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAChC,MAAM,YAAY,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAEnE,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,YAEpB,mBACE,EAAE,EAAE,UAAU,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,qBAAqB,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,EAAE,kBAC9D,QAAQ,GACtB,GACQ,CACb,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { FormTextarea } from './form-textarea';
|
|
3
|
+
declare const meta: Meta<typeof FormTextarea>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof FormTextarea>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
//# sourceMappingURL=form-textarea.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/form-textarea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAInC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { FormTextarea } from './form-textarea';
|
|
2
|
+
const meta = {
|
|
3
|
+
title: 'Atoms/FormTextarea',
|
|
4
|
+
component: FormTextarea,
|
|
5
|
+
tags: ['autodocs'],
|
|
6
|
+
};
|
|
7
|
+
export default meta;
|
|
8
|
+
export const Default = {
|
|
9
|
+
args: {
|
|
10
|
+
label: 'Configuration',
|
|
11
|
+
value: '',
|
|
12
|
+
onChange: () => { },
|
|
13
|
+
rows: 5,
|
|
14
|
+
placeholder: 'Enter your configuration...',
|
|
15
|
+
},
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=form-textarea.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-textarea.stories.js","sourceRoot":"","sources":["../../../src/components/atoms/form-textarea.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,IAAI,GAA8B;IACtC,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;QAClB,IAAI,EAAE,CAAC;QACP,WAAW,EAAE,6BAA6B;KAC3C;CACF,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Grid } from './grid';
|
|
3
|
+
/**
|
|
4
|
+
* Grid - Horizontal scrolling layout component
|
|
5
|
+
*
|
|
6
|
+
* Arranges Box components in a horizontal grid with optional scroll buttons.
|
|
7
|
+
* Supports various row height modes: auto, equal, synced, or fixed pixel value.
|
|
8
|
+
*/
|
|
9
|
+
declare const meta: Meta<typeof Grid>;
|
|
10
|
+
export default meta;
|
|
11
|
+
type Story = StoryObj<typeof Grid>;
|
|
12
|
+
export declare const Default: Story;
|
|
13
|
+
export declare const AutoHeight: Story;
|
|
14
|
+
export declare const EqualHeight: Story;
|
|
15
|
+
export declare const FixedHeight: Story;
|
|
16
|
+
export declare const CustomGap: Story;
|
|
17
|
+
export declare const NoScrollButtons: Story;
|
|
18
|
+
//# sourceMappingURL=grid.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"grid.stories.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/grid.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAW3B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAgBzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAC"}
|