@shohojdhara/atomix 0.3.13 → 0.3.14

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.
Files changed (151) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +2 -0
  3. package/dist/atomix.css +95 -77
  4. package/dist/atomix.css.map +1 -1
  5. package/dist/atomix.min.css +2 -2
  6. package/dist/atomix.min.css.map +1 -1
  7. package/dist/charts.d.ts +1 -1
  8. package/dist/charts.js +1 -1
  9. package/dist/core.d.ts +41 -11
  10. package/dist/core.js +39 -23
  11. package/dist/core.js.map +1 -1
  12. package/dist/forms.d.ts +28 -11
  13. package/dist/forms.js +8 -5
  14. package/dist/forms.js.map +1 -1
  15. package/dist/heavy.d.ts +1 -1
  16. package/dist/heavy.js +15 -6
  17. package/dist/heavy.js.map +1 -1
  18. package/dist/index.d.ts +122 -46
  19. package/dist/index.esm.js +849 -182
  20. package/dist/index.esm.js.map +1 -1
  21. package/dist/index.js +854 -186
  22. package/dist/index.js.map +1 -1
  23. package/dist/index.min.js +1 -1
  24. package/dist/index.min.js.map +1 -1
  25. package/dist/theme.d.ts +27 -2
  26. package/dist/theme.js +721 -108
  27. package/dist/theme.js.map +1 -1
  28. package/package.json +1 -1
  29. package/scripts/atomix-cli.js +610 -1111
  30. package/scripts/cli/component-generator.js +610 -0
  31. package/scripts/cli/documentation-sync.js +542 -0
  32. package/scripts/cli/interactive-init.js +84 -288
  33. package/scripts/cli/mappings.js +211 -0
  34. package/scripts/cli/migration-tools.js +95 -288
  35. package/scripts/cli/template-manager.js +107 -0
  36. package/scripts/cli/templates/README.md +123 -0
  37. package/scripts/cli/templates/composable-templates.js +149 -0
  38. package/scripts/cli/templates/config-templates.js +126 -0
  39. package/scripts/cli/templates/index.js +95 -0
  40. package/scripts/cli/templates/project-templates.js +214 -0
  41. package/scripts/cli/templates/react-templates.js +261 -0
  42. package/scripts/cli/templates/scss-templates.js +156 -0
  43. package/scripts/cli/templates/storybook-templates.js +236 -0
  44. package/scripts/cli/templates/testing-templates.js +45 -0
  45. package/scripts/cli/templates/token-templates.js +447 -0
  46. package/scripts/cli/templates/types-templates.js +133 -0
  47. package/scripts/cli/templates-original-backup.js +1655 -0
  48. package/scripts/cli/templates.js +35 -0
  49. package/scripts/cli/templates_backup.js +684 -0
  50. package/scripts/cli/theme-bridge.js +20 -14
  51. package/scripts/cli/token-manager.js +150 -77
  52. package/scripts/cli/utils.js +37 -25
  53. package/src/components/Accordion/Accordion.stories.tsx +5 -5
  54. package/src/components/Accordion/Accordion.test.tsx +57 -0
  55. package/src/components/Accordion/Accordion.tsx +4 -0
  56. package/src/components/AtomixGlass/stories/AtomixGlass.stories.tsx +1 -1
  57. package/src/components/AtomixGlass/stories/Examples.stories.tsx +37 -37
  58. package/src/components/AtomixGlass/stories/Playground.stories.tsx +50 -51
  59. package/src/components/Avatar/Avatar.stories.tsx +26 -26
  60. package/src/components/Badge/Badge.stories.tsx +31 -31
  61. package/src/components/Badge/Badge.test.tsx +51 -0
  62. package/src/components/Badge/Badge.tsx +20 -1
  63. package/src/components/Block/Block.stories.tsx +5 -5
  64. package/src/components/Breadcrumb/Breadcrumb.stories.tsx +1 -1
  65. package/src/components/Breadcrumb/Breadcrumb.tsx +2 -2
  66. package/src/components/Button/Button.stories.tsx +13 -13
  67. package/src/components/Button/Button.tsx +4 -4
  68. package/src/components/Button/ButtonGroup.stories.tsx +2 -2
  69. package/src/components/Button/README.md +5 -0
  70. package/src/components/Callout/Callout.stories.tsx +11 -11
  71. package/src/components/Callout/Callout.test.tsx +10 -10
  72. package/src/components/Callout/Callout.tsx +7 -7
  73. package/src/components/Callout/README.md +9 -8
  74. package/src/components/Card/Card.tsx +2 -2
  75. package/src/components/Chart/Chart.stories.tsx +6 -6
  76. package/src/components/Chart/Chart.tsx +1 -1
  77. package/src/components/ColorModeToggle/ColorModeToggle.stories.tsx +1 -1
  78. package/src/components/DataTable/DataTable.tsx +14 -12
  79. package/src/components/DatePicker/DatePicker.stories.tsx +6 -6
  80. package/src/components/Dropdown/Dropdown.stories.tsx +4 -4
  81. package/src/components/Form/Checkbox.stories.tsx +3 -3
  82. package/src/components/Form/Checkbox.tsx +4 -2
  83. package/src/components/Form/Form.stories.tsx +3 -3
  84. package/src/components/Form/FormGroup.stories.tsx +1 -1
  85. package/src/components/Form/Input.stories.tsx +28 -16
  86. package/src/components/Form/Input.test.tsx +59 -0
  87. package/src/components/Form/Input.tsx +97 -95
  88. package/src/components/Form/Radio.stories.tsx +94 -94
  89. package/src/components/Form/Radio.tsx +2 -2
  90. package/src/components/Form/Select.stories.tsx +4 -4
  91. package/src/components/Form/Select.tsx +2 -2
  92. package/src/components/Form/Textarea.stories.tsx +22 -7
  93. package/src/components/Form/Textarea.test.tsx +45 -0
  94. package/src/components/Form/Textarea.tsx +88 -86
  95. package/src/components/List/List.stories.tsx +2 -2
  96. package/src/components/Modal/Modal.stories.tsx +4 -4
  97. package/src/components/Navigation/Navbar/Navbar.stories.tsx +5 -5
  98. package/src/components/Navigation/Navbar/Navbar.tsx +1 -1
  99. package/src/components/Navigation/README.md +1 -1
  100. package/src/components/Pagination/Pagination.stories.tsx +5 -2
  101. package/src/components/Pagination/Pagination.tsx +1 -1
  102. package/src/components/PhotoViewer/PhotoViewer.stories.tsx +10 -10
  103. package/src/components/Popover/Popover.stories.tsx +1 -1
  104. package/src/components/ProductReview/ProductReview.tsx +1 -1
  105. package/src/components/Progress/Progress.tsx +46 -46
  106. package/src/components/Rating/Rating.stories.tsx +4 -4
  107. package/src/components/Rating/Rating.tsx +8 -8
  108. package/src/components/Slider/Slider.stories.tsx +63 -63
  109. package/src/components/Spinner/Spinner.stories.tsx +2 -2
  110. package/src/components/Spinner/Spinner.test.tsx +35 -0
  111. package/src/components/Spinner/Spinner.tsx +9 -2
  112. package/src/components/Testimonial/Testimonial.stories.tsx +1 -1
  113. package/src/components/Toggle/Toggle.stories.tsx +32 -9
  114. package/src/components/Toggle/Toggle.test.tsx +91 -0
  115. package/src/components/Toggle/Toggle.tsx +44 -27
  116. package/src/components/Tooltip/Tooltip.tsx +1 -1
  117. package/src/layouts/Grid/Grid.stories.tsx +49 -49
  118. package/src/layouts/MasonryGrid/MasonryGrid.stories.tsx +2 -2
  119. package/src/lib/composables/useAccordion.ts +12 -3
  120. package/src/lib/composables/useBreadcrumb.ts +2 -2
  121. package/src/lib/composables/useCallout.ts +7 -7
  122. package/src/lib/composables/useNavbar.ts +1 -1
  123. package/src/lib/constants/components.ts +1 -1
  124. package/src/lib/storybook/InteractiveDemo.tsx +113 -0
  125. package/src/lib/storybook/PreviewContainer.tsx +36 -0
  126. package/src/lib/storybook/VariantsGrid.tsx +21 -0
  127. package/src/lib/storybook/index.ts +3 -0
  128. package/src/lib/theme/core/createThemeObject.ts +9 -5
  129. package/src/lib/theme/devtools/CLI.ts +155 -0
  130. package/src/lib/theme/devtools/DesignTokensCustomizer.stories.tsx +213 -0
  131. package/src/lib/theme/devtools/DesignTokensCustomizer.tsx +566 -0
  132. package/src/lib/theme/devtools/LiveEditor.tsx +2 -1
  133. package/src/lib/theme/devtools/index.ts +3 -0
  134. package/src/lib/theme/errors/errors.ts +8 -0
  135. package/src/lib/theme/runtime/ThemeProvider.tsx +117 -57
  136. package/src/lib/theme/runtime/__tests__/ThemeProvider.integration.test.tsx +305 -0
  137. package/src/lib/theme/runtime/__tests__/ThemeProvider.test.tsx +588 -0
  138. package/src/lib/theme/utils/__tests__/themeValidation.test.ts +264 -0
  139. package/src/lib/theme/utils/index.ts +1 -0
  140. package/src/lib/theme/utils/themeValidation.ts +501 -0
  141. package/src/lib/theme-tools.ts +32 -3
  142. package/src/lib/types/components.ts +81 -26
  143. package/src/lib/utils/themeNaming.ts +1 -1
  144. package/src/styles/06-components/_components.callout.scss +29 -33
  145. package/src/styles/06-components/_index.scss +1 -1
  146. package/src/styles/99-utilities/_utilities.display.scss +14 -3
  147. package/src/styles/99-utilities/_utilities.flex.scss +10 -10
  148. package/src/styles/99-utilities/_utilities.text.scss +28 -8
  149. package/scripts/cli/__tests__/cli-commands.test.js +0 -204
  150. package/scripts/cli/__tests__/utils.test.js +0 -201
  151. package/scripts/cli/__tests__/vitest.config.js +0 -26
package/scripts/cli/templates/project-templates.js ADDED
@@ -0,0 +1,214 @@
1
+ /**
2
+ * Project Templates
3
+ * Templates for different project types and configurations
4
+ */
5
+
6
+ /**
7
+ * React project templates
8
+ */
9
+ export const reactProjectTemplates = {
10
+ dependencies: ['react', 'react-dom'],
11
+ devDependencies: ['@vitejs/plugin-react', 'vite', 'typescript'],
12
+ files: {
13
+ 'src/App.tsx': `import React from 'react';
14
+ import './App.css';
15
+
16
+ function App() {
17
+ return (
18
+ <div className="App">
19
+ <header className="App-header">
20
+ <h1>Welcome to Atomix Design System</h1>
21
+ <p>
22
+ Your React application is ready with Atomix components!
23
+ </p>
24
+ </header>
25
+ </div>
26
+ );
27
+ }
28
+
29
+ export default App;`,
30
+ 'src/main.tsx': `import React from 'react';
31
+ import ReactDOM from 'react-dom/client';
32
+ import App from './App';
33
+
34
+ ReactDOM.createRoot(document.getElementById('root')!).render(
35
+ <React.StrictMode>
36
+ <App />
37
+ </React.StrictMode>,
38
+ );`,
39
+ 'src/App.css': `/* Import Atomix styles */
40
+ @use '@shohojdhara/atomix/scss/settings' with (
41
+ // Your custom theme overrides here
42
+ );
43
+ @use '@shohojdhara/atomix/scss/components';
44
+
45
+ .App {
46
+ text-align: center;
47
+ }
48
+
49
+ .App-header {
50
+ background-color: #282c34;
51
+ padding: 20px;
52
+ color: white;
53
+ min-height: 100vh;
54
+ display: flex;
55
+ flex-direction: column;
56
+ align-items: center;
57
+ justify-content: center;
58
+ font-size: calc(10px + 2vmin);
59
+ }`,
60
+ 'index.html': `<!DOCTYPE html>
61
+ <html lang="en">
62
+ <head>
63
+ <meta charset="UTF-8" />
64
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
65
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
+ <title>Atomix React App</title>
67
+ </head>
68
+ <body>
69
+ <div id="root"></div>
70
+ <script type="module" src="/src/main.tsx"></script>
71
+ </body>
72
+ </html>`,
73
+ 'vite.config.ts': `import { defineConfig } from 'vite';
74
+ import react from '@vitejs/plugin-react';
75
+
76
+ export default defineConfig({
77
+ plugins: [react()],
78
+ css: {
79
+ preprocessorOptions: {
80
+ scss: {
81
+ additionalData: \`@use "@shohojdhara/atomix/scss/settings" as *;\`
82
+ }
83
+ }
84
+ }
85
+ });`
86
+ }
87
+ };
88
+
89
+ /**
90
+ * Next.js project templates
91
+ */
92
+ export const nextjsProjectTemplates = {
93
+ dependencies: ['next', 'react', 'react-dom'],
94
+ devDependencies: ['typescript', '@types/node', '@types/react', '@types/react-dom', 'sass'],
95
+ files: {
96
+ 'src/pages/_app.tsx': `import '../styles/globals.scss';
97
+ import type { AppProps } from 'next/app';
98
+
99
+ export default function App({ Component, pageProps }: AppProps) {
100
+ return <Component {...pageProps} />;
101
+ }`,
102
+ 'src/pages/index.tsx': `import Head from 'next/head';
103
+
104
+ export default function Home() {
105
+ return (
106
+ <>
107
+ <Head>
108
+ <title>Atomix Next.js App</title>
109
+ <meta name="description" content="Generated by Atomix CLI" />
110
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
111
+ </Head>
112
+ <main>
113
+ <h1>Welcome to Atomix Design System</h1>
114
+ <p>Your Next.js application is ready with Atomix components!</p>
115
+ </main>
116
+ </>
117
+ );
118
+ }`,
119
+ 'src/styles/globals.scss': `/* Import Atomix styles */
120
+ @use '@shohojdhara/atomix/scss/settings' with (
121
+ // Your custom theme overrides here
122
+ );
123
+ @use '@shohojdhara/atomix/scss/components';
124
+
125
+ html,
126
+ body {
127
+ padding: 0;
128
+ margin: 0;
129
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
130
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
131
+ }
132
+
133
+ main {
134
+ padding: 2rem;
135
+ text-align: center;
136
+ }`,
137
+ 'next.config.js': `/** @type {import('next').NextConfig} */
138
+ const nextConfig = {
139
+ reactStrictMode: true,
140
+ sassOptions: {
141
+ includePaths: ['./node_modules'],
142
+ },
143
+ };
144
+
145
+ module.exports = nextConfig;`
146
+ }
147
+ };
148
+
149
+ /**
150
+ * Vanilla JavaScript project templates
151
+ */
152
+ export const vanillaProjectTemplates = {
153
+ dependencies: [],
154
+ devDependencies: ['vite', 'typescript'],
155
+ files: {
156
+ 'index.html': `<!DOCTYPE html>
157
+ <html lang="en">
158
+ <head>
159
+ <meta charset="UTF-8" />
160
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
161
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
162
+ <title>Atomix Vanilla App</title>
163
+ </head>
164
+ <body>
165
+ <div id="app">
166
+ <header>
167
+ <h1>Welcome to Atomix Design System</h1>
168
+ <p>Your vanilla JavaScript application is ready with Atomix components!</p>
169
+ </header>
170
+ </div>
171
+ <script type="module" src="/src/main.ts"></script>
172
+ </body>
173
+ </html>`,
174
+ 'src/main.ts': `import './styles/main.scss';
175
+
176
+ console.log('Atomix Vanilla JavaScript App Initialized');`,
177
+ 'src/styles/main.scss': `/* Import Atomix styles */
178
+ @use '@shohojdhara/atomix/scss/settings' with (
179
+ // Your custom theme overrides here
180
+ );
181
+ @use '@shohojdhara/atomix/scss/components';
182
+
183
+ #app {
184
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
185
+ text-align: center;
186
+ }
187
+
188
+ header {
189
+ background-color: #f8f9fa;
190
+ padding: 2rem;
191
+ border-bottom: 1px solid #dee2e6;
192
+ }`,
193
+ 'vite.config.ts': `import { defineConfig } from 'vite';
194
+
195
+ export default defineConfig({
196
+ css: {
197
+ preprocessorOptions: {
198
+ scss: {
199
+ additionalData: \`@use "@shohojdhara/atomix/scss/settings" as *;\`
200
+ }
201
+ }
202
+ }
203
+ });`
204
+ }
205
+ };
206
+
207
+ /**
208
+ * Project templates export object
209
+ */
210
+ export const projectTemplates = {
211
+ react: reactProjectTemplates,
212
+ nextjs: nextjsProjectTemplates,
213
+ vanilla: vanillaProjectTemplates,
214
+ };
package/scripts/cli/templates/react-templates.js ADDED
@@ -0,0 +1,261 @@
1
+ /**
2
+ * React Component Templates
3
+ * Different complexity levels for React components
4
+ */
5
+
6
+ /**
7
+ * Simple React component template
8
+ * Basic presentational component with minimal state
9
+ */
10
+ export const simpleTemplate = (name) => `import React, { memo, forwardRef } from 'react';
11
+ import { cn } from '../../lib/utils';
12
+ import { ACCORDION } from '../../lib/constants/components';
13
+ import type { ${name}Props } from '../../lib/types/components';
14
+
15
+ /**
16
+ * ${name} component - Simple variant
17
+ * Basic presentational component with minimal state
18
+ *
19
+ * @example
20
+ * \`\`\`tsx
21
+ * <${name}>Hello World</${name}>
22
+ * \`\`\`
23
+ */
24
+ export const ${name} = memo(
25
+ forwardRef<HTMLDivElement, ${name}Props>(
26
+ ({
27
+ children,
28
+ className,
29
+ ...props
30
+ }, ref) => {
31
+ const componentClass = cn(
32
+ ACCORDION.SELECTORS.ACCORDION.replace('.', ''),
33
+ className
34
+ );
35
+
36
+ return (
37
+ <div
38
+ ref={ref}
39
+ className={componentClass}
40
+ {...props}
41
+ >
42
+ {children}
43
+ </div>
44
+ );
45
+ }
46
+ )
47
+ );
48
+
49
+ ${name}.displayName = '${name}';`;
50
+
51
+ /**
52
+ * Medium React component template
53
+ * Component with state management and interactions
54
+ */
55
+ export const mediumTemplate = (name) => `import React, { memo, forwardRef } from 'react';
56
+ import { cn } from '../../lib/utils';
57
+ import { ACCORDION } from '../../lib/constants/components';
58
+ import type { ${name}Props } from '../../lib/types/components';
59
+ import { use${name} } from '../../lib/composables/use${name}';
60
+
61
+ /**
62
+ * ${name} component - Medium variant
63
+ * Component with state management and interactions
64
+ *
65
+ * @example
66
+ * \`\`\`tsx
67
+ * <${name}>Hello World</${name}>
68
+ * \`\`\`
69
+ */
70
+ export const ${name} = memo(
71
+ forwardRef<HTMLDivElement, ${name}Props>(
72
+ ({
73
+ children,
74
+ className,
75
+ ...props
76
+ }, ref) => {
77
+ const {
78
+ state,
79
+ toggle,
80
+ isOpen,
81
+ setIsOpen,
82
+ getTriggerProps,
83
+ getPanelProps
84
+ } = use${name}({
85
+ // Initial props can be passed here
86
+ });
87
+
88
+ const componentClass = cn(
89
+ ACCORDION.SELECTORS.ACCORDION.replace('.', ''),
90
+ className
91
+ );
92
+
93
+ return (
94
+ <div
95
+ ref={ref}
96
+ className={componentClass}
97
+ data-state={state}
98
+ {...props}
99
+ >
100
+ {children}
101
+ </div>
102
+ );
103
+ }
104
+ )
105
+ );
106
+
107
+ ${name}.displayName = '${name}';`;
108
+
109
+ /**
110
+ * Complex React component template
111
+ * Advanced component with validation, accessibility, and state management
112
+ */
113
+ export const complexTemplate = (name) => `import React, { memo, forwardRef } from 'react';
114
+ import { cn } from '../../lib/utils';
115
+ import { ACCORDION } from '../../lib/constants/components';
116
+ import type { ${name}Props, ${name}State } from '../../lib/types/components';
117
+ import { use${name} } from '../../lib/composables/use${name}';
118
+
119
+ /**
120
+ * ${name} component - Complex variant
121
+ * Advanced component with validation, accessibility, and state management
122
+ *
123
+ * @example
124
+ * \`\`\`tsx
125
+ * <${name} validationRules={rules}>
126
+ * Trigger content
127
+ * <${name}.Panel>Panel content</${name}.Panel>
128
+ * </${name}>
129
+ * \`\`\`
130
+ */
131
+ export const ${name} = memo(
132
+ forwardRef<HTMLDivElement, ${name}Props>(
133
+ ({
134
+ children,
135
+ className,
136
+ validationRules,
137
+ onValidationChange,
138
+ ...props
139
+ }, ref) => {
140
+ const {
141
+ state,
142
+ toggle,
143
+ isOpen,
144
+ setIsOpen,
145
+ isControlled,
146
+ isValid,
147
+ validationMessage,
148
+ getTriggerProps,
149
+ getPanelProps,
150
+ getHeaderProps,
151
+ getContentProps
152
+ } = use${name}({
153
+ validationRules,
154
+ onValidationChange
155
+ });
156
+
157
+ const componentClass = cn(
158
+ ACCORDION.SELECTORS.ACCORDION.replace('.', ''),
159
+ {
160
+ 'is-valid': isValid,
161
+ 'is-invalid': !isValid && validationMessage,
162
+ 'is-controlled': isControlled
163
+ },
164
+ className
165
+ );
166
+
167
+ return (
168
+ <div
169
+ ref={ref}
170
+ className={componentClass}
171
+ data-state={state}
172
+ data-valid={isValid}
173
+ {...getTriggerProps()}
174
+ >
175
+ {children}
176
+
177
+ {!isValid && validationMessage && (
178
+ <div
179
+ id={\`${name.toLowerCase()}-error\`}
180
+ className="c-${name.toLowerCase()}__error"
181
+ role="alert"
182
+ aria-live="polite"
183
+ >
184
+ {validationMessage}
185
+ </div>
186
+ )}
187
+ </div>
188
+ );
189
+ }
190
+ )
191
+ );
192
+
193
+ ${name}.displayName = '${name}';`;
194
+
195
+ /**
196
+ * Default React component template (backward compatibility)
197
+ */
198
+ export const defaultTemplate = (name) => `import React, { memo, forwardRef } from 'react';
199
+ import { cn } from '../../lib/utils';
200
+ import { ACCORDION } from '../../lib/constants/components';
201
+ import type { ${name}Props } from '../../lib/types/components';
202
+ import { use${name} } from '../../lib/composables/use${name}';
203
+
204
+ /**
205
+ * ${name} component
206
+ *
207
+ * @example
208
+ * \`\`\`tsx
209
+ * <${name}>Hello World</${name}>
210
+ * \`\`\`
211
+ */
212
+ export const ${name} = memo(
213
+ forwardRef<HTMLDivElement, ${name}Props>(
214
+ ({
215
+ children,
216
+ className,
217
+ ...props
218
+ }, ref) => {
219
+ const {
220
+ state,
221
+ toggle,
222
+ isOpen,
223
+ setIsOpen,
224
+ getTriggerProps,
225
+ getPanelProps,
226
+ getHeaderProps,
227
+ getContentProps
228
+ } = use${name}({
229
+ // Initial props can be passed here
230
+ });
231
+
232
+ const componentClass = cn(
233
+ ACCORDION.SELECTORS.ACCORDION.replace('.', ''),
234
+ className
235
+ );
236
+
237
+ return (
238
+ <div
239
+ ref={ref}
240
+ className={componentClass}
241
+ data-state={state}
242
+ {...props}
243
+ >
244
+ {children}
245
+ </div>
246
+ );
247
+ }
248
+ )
249
+ );
250
+
251
+ ${name}.displayName = '${name}';`;
252
+
253
+ /**
254
+ * React component templates object
255
+ */
256
+ export const reactTemplates = {
257
+ simple: simpleTemplate,
258
+ medium: mediumTemplate,
259
+ complex: complexTemplate,
260
+ component: defaultTemplate,
261
+ };
package/scripts/cli/templates/scss-templates.js ADDED
@@ -0,0 +1,156 @@
1
+ /**
2
+ * SCSS Templates
3
+ * Templates for styling components with SCSS
4
+ */
5
+
6
+ /**
7
+ * Main SCSS component template
8
+ */
9
+ export const scssTemplate = (name) => `// =============================================================================
10
+ // ${name.toUpperCase()}
11
+ // =============================================================================
12
+
13
+ @use '../01-settings/settings.${name.toLowerCase()}' as ${name.toLowerCase()};
14
+
15
+ .c-${name.toLowerCase()} {
16
+ // CSS Custom Properties (from settings)
17
+ --#{config.$prefix}${name.toLowerCase()}-width: #{${name.toLowerCase()}.$${name.toLowerCase()}-width};
18
+ --#{config.$prefix}${name.toLowerCase()}-padding-x: #{${name.toLowerCase()}.$${name.toLowerCase()}-padding-x};
19
+ --#{config.$prefix}${name.toLowerCase()}-padding-y: #{${name.toLowerCase()}.$${name.toLowerCase()}-padding-y};
20
+ --#{config.$prefix}${name.toLowerCase()}-bg: #{${name.toLowerCase()}.$${name.toLowerCase()}-bg};
21
+ --#{config.$prefix}${name.toLowerCase()}-color: #{${name.toLowerCase()}.$${name.toLowerCase()}-color};
22
+ --#{config.$prefix}${name.toLowerCase()}-border: #{${name.toLowerCase()}.$${name.toLowerCase()}-border};
23
+ --#{config.$prefix}${name.toLowerCase()}-border-radius: #{${name.toLowerCase()}.$${name.toLowerCase()}-border-radius};
24
+ --#{config.$prefix}${name.toLowerCase()}-transition: #{${name.toLowerCase()}.$${name.toLowerCase()}-transition};
25
+
26
+ // Base styles
27
+ width: var(#{config.$prefix}${name.toLowerCase()}-width);
28
+ padding: var(#{config.$prefix}${name.toLowerCase()}-padding-y) var(#{config.$prefix}${name.toLowerCase()}-padding-x);
29
+ background-color: var(#{config.$prefix}${name.toLowerCase()}-bg);
30
+ color: var(#{config.$prefix}${name.toLowerCase()}-color);
31
+ border: var(#{config.$prefix}${name.toLowerCase()}-border);
32
+ border-radius: var(#{config.$prefix}${name.toLowerCase()}-border-radius);
33
+ transition: var(#{config.$prefix}${name.toLowerCase()}-transition);
34
+
35
+ // Reset and base
36
+ box-sizing: border-box;
37
+ margin: 0;
38
+ font-family: inherit;
39
+ font-size: var(#{config.$prefix}${name.toLowerCase()}-font-size);
40
+ line-height: var(#{config.$prefix}${name.toLowerCase()}-line-height);
41
+ font-weight: var(#{config.$prefix}${name.toLowerCase()}-font-weight);
42
+
43
+ // Size variants
44
+ &--sm {
45
+ --#{config.$prefix}${name.toLowerCase()}-padding-x: #{${name.toLowerCase()}.$${name.toLowerCase()}-sm-padding-x};
46
+ --#{config.$prefix}${name.toLowerCase()}-padding-y: #{${name.toLowerCase()}.$${name.toLowerCase()}-sm-padding-y};
47
+ --#{config.$prefix}${name.toLowerCase()}-font-size: #{${name.toLowerCase()}.$${name.toLowerCase()}-sm-font-size};
48
+ }
49
+
50
+ &--lg {
51
+ --#{config.$prefix}${name.toLowerCase()}-padding-x: #{${name.toLowerCase()}.$${name.toLowerCase()}-lg-padding-x};
52
+ --#{config.$prefix}${name.toLowerCase()}-padding-y: #{${name.toLowerCase()}.$${name.toLowerCase()}-lg-padding-y};
53
+ --#{config.$prefix}${name.toLowerCase()}-font-size: #{${name.toLowerCase()}.$${name.toLowerCase()}-lg-font-size};
54
+ }
55
+
56
+ // Interactive states
57
+ &:hover {
58
+ --#{config.$prefix}${name.toLowerCase()}-bg: #{${name.toLowerCase()}.$${name.toLowerCase()}-hover-bg};
59
+ cursor: pointer;
60
+ }
61
+
62
+ &:focus {
63
+ --#{config.$prefix}${name.toLowerCase()}-bg: #{${name.toLowerCase()}.$${name.toLowerCase()}-focus-bg};
64
+ outline: 2px solid var(--atomix-focus-color);
65
+ outline-offset: 2px;
66
+ }
67
+
68
+ // Disabled state
69
+ &.is-disabled {
70
+ --#{config.$prefix}${name.toLowerCase()}-bg: #{${name.toLowerCase()}.$${name.toLowerCase()}-disabled-bg};
71
+ --#{config.$prefix}${name.toLowerCase()}-color: #{${name.toLowerCase()}.$${name.toLowerCase()}-disabled-color};
72
+ opacity: var(#{config.$prefix}${name.toLowerCase()}-disabled-opacity);
73
+ cursor: not-allowed;
74
+ pointer-events: none;
75
+ }
76
+
77
+ // Glass variant
78
+ &--glass {
79
+ background: #{${name.toLowerCase()}.$${name.toLowerCase()}-glass-bg};
80
+ backdrop-filter: #{${name.toLowerCase()}.$${name.toLowerCase()}-glass-backdrop};
81
+ border-color: #{${name.toLowerCase()}.$${name.toLowerCase()}-glass-border};
82
+ }
83
+
84
+ // Data states for JavaScript interaction
85
+ &[data-state="open"] {
86
+ // Styles for open state
87
+ }
88
+
89
+ &[data-state="closed"] {
90
+ // Styles for closed state
91
+ }
92
+ }
93
+ `;
94
+
95
+ /**
96
+ * SCSS settings template
97
+ */
98
+ export const scssSettingsTemplate = (name) => `// ${name} Component Settings
99
+ // Generated by Atomix CLI
100
+
101
+ // Core component dimensions
102
+ $${name.toLowerCase()}-width: 100% !default;
103
+ $${name.toLowerCase()}-padding-x: map.get($spacing-sizes, 5) !default;
104
+ $${name.toLowerCase()}-padding-y: map.get($spacing-sizes, 3) !default;
105
+ $${name.toLowerCase()}-margin-bottom: map.get($spacing-sizes, 2) !default;
106
+
107
+ // Typography settings
108
+ $${name.toLowerCase()}-font-size: map.get($font-sizes, base) !default;
109
+ $${name.toLowerCase()}-font-weight: map.get($font-weights, normal) !default;
110
+ $${name.toLowerCase()}-line-height: map.get($line-heights, base) !default;
111
+
112
+ // Border and radius
113
+ $${name.toLowerCase()}-border: 1px solid var(--atomix-border-default) !default;
114
+ $${name.toLowerCase()}-border-radius: var(--atomix-border-radius-md) !default;
115
+ $${name.toLowerCase()}-border-style: solid !default;
116
+
117
+ // Colors (using CSS custom properties)
118
+ $${name.toLowerCase()}-bg: var(--atomix-bg-surface) !default;
119
+ $${name.toLowerCase()}-color: var(--atomix-text-primary) !default;
120
+ $${name.toLowerCase()}-border-color: var(--atomix-border-default) !default;
121
+
122
+ // Transitions
123
+ $${name.toLowerCase()}-transition: var(--atomix-transition-all) !default;
124
+ $${name.toLowerCase()}-transition-duration: var(--atomix-duration-base) !default;
125
+ $${name.toLowerCase()}-transition-timing: var(--atomix-easing-smooth) !default;
126
+
127
+ // State-specific settings
128
+ $${name.toLowerCase()}-hover-bg: var(--atomix-bg-surface-hover) !default;
129
+ $${name.toLowerCase()}-focus-bg: var(--atomix-bg-surface-focus) !default;
130
+ $${name.toLowerCase()}-disabled-bg: var(--atomix-bg-surface-disabled) !default;
131
+ $${name.toLowerCase()}-disabled-color: var(--atomix-text-disabled) !default;
132
+ $${name.toLowerCase()}-disabled-opacity: var(--atomix-opacity-disabled) !default;
133
+
134
+ // Size variants
135
+ $${name.toLowerCase()}-sm-padding-x: map.get($spacing-sizes, 3) !default;
136
+ $${name.toLowerCase()}-sm-padding-y: map.get($spacing-sizes, 2) !default;
137
+ $${name.toLowerCase()}-sm-font-size: map.get($font-sizes, sm) !default;
138
+
139
+ $${name.toLowerCase()}-lg-padding-x: map.get($spacing-sizes, 7) !default;
140
+ $${name.toLowerCase()}-lg-padding-y: map.get($spacing-sizes, 4) !default;
141
+ $${name.toLowerCase()}-lg-font-size: map.get($font-sizes, lg) !default;
142
+
143
+ // Glass variant settings
144
+ $${name.toLowerCase()}-glass-bg: rgba(255, 255, 255, 0.1) !default;
145
+ $${name.toLowerCase()}-glass-backdrop: blur(10px) !default;
146
+ $${name.toLowerCase()}-glass-border: rgba(255, 255, 255, 0.2) !default;
147
+ `;
148
+
149
+ /**
150
+ * SCSS templates object
151
+ */
152
+ export const scssTemplates = {
153
+ scss: scssTemplate,
154
+ scssModule: () => '', // Disabled/Empty as we prefer global SCSS
155
+ scssSettings: scssSettingsTemplate,
156
+ };