@shohojdhara/atomix 0.3.13 → 0.3.15

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 (249) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/README.md +2 -0
  3. package/build-tools/EXAMPLES.md +372 -0
  4. package/build-tools/README.md +242 -0
  5. package/build-tools/__tests__/error-handler.test.js +230 -0
  6. package/build-tools/__tests__/index.test.js +141 -0
  7. package/build-tools/__tests__/rollup-plugin.test.js +194 -0
  8. package/build-tools/__tests__/utils.test.js +161 -0
  9. package/build-tools/__tests__/vite-plugin.test.js +129 -0
  10. package/build-tools/__tests__/webpack-loader.test.js +190 -0
  11. package/build-tools/error-handler.js +308 -0
  12. package/build-tools/index.d.ts +43 -0
  13. package/build-tools/index.js +88 -0
  14. package/build-tools/package.json +67 -0
  15. package/build-tools/rollup-plugin.js +236 -0
  16. package/build-tools/types.d.ts +163 -0
  17. package/build-tools/utils.js +203 -0
  18. package/build-tools/vite-plugin.js +161 -0
  19. package/build-tools/webpack-loader.js +123 -0
  20. package/dist/atomix.css +298 -167
  21. package/dist/atomix.css.map +1 -1
  22. package/dist/atomix.min.css +3 -3
  23. package/dist/atomix.min.css.map +1 -1
  24. package/dist/build-tools/EXAMPLES.md +372 -0
  25. package/dist/build-tools/README.md +242 -0
  26. package/dist/build-tools/__tests__/error-handler.test.js +230 -0
  27. package/dist/build-tools/__tests__/index.test.js +141 -0
  28. package/dist/build-tools/__tests__/rollup-plugin.test.js +194 -0
  29. package/dist/build-tools/__tests__/utils.test.js +161 -0
  30. package/dist/build-tools/__tests__/vite-plugin.test.js +129 -0
  31. package/dist/build-tools/__tests__/webpack-loader.test.js +190 -0
  32. package/dist/build-tools/error-handler.js +308 -0
  33. package/dist/build-tools/index.d.ts +43 -0
  34. package/dist/build-tools/index.js +88 -0
  35. package/dist/build-tools/package.json +67 -0
  36. package/dist/build-tools/rollup-plugin.js +236 -0
  37. package/dist/build-tools/types.d.ts +163 -0
  38. package/dist/build-tools/utils.js +203 -0
  39. package/dist/build-tools/vite-plugin.js +161 -0
  40. package/dist/build-tools/webpack-loader.js +123 -0
  41. package/dist/charts.d.ts +2 -2
  42. package/dist/charts.js +87 -58
  43. package/dist/charts.js.map +1 -1
  44. package/dist/core.d.ts +42 -12
  45. package/dist/core.js +175 -135
  46. package/dist/core.js.map +1 -1
  47. package/dist/forms.d.ts +30 -16
  48. package/dist/forms.js +146 -131
  49. package/dist/forms.js.map +1 -1
  50. package/dist/heavy.d.ts +2 -2
  51. package/dist/heavy.js +151 -118
  52. package/dist/heavy.js.map +1 -1
  53. package/dist/index.d.ts +130 -106
  54. package/dist/index.esm.js +1083 -465
  55. package/dist/index.esm.js.map +1 -1
  56. package/dist/index.js +1102 -483
  57. package/dist/index.js.map +1 -1
  58. package/dist/index.min.js +1 -1
  59. package/dist/index.min.js.map +1 -1
  60. package/dist/theme.d.ts +27 -2
  61. package/dist/theme.js +721 -108
  62. package/dist/theme.js.map +1 -1
  63. package/package.json +23 -8
  64. package/scripts/atomix-cli.js +749 -1153
  65. package/scripts/cli/__tests__/README.md +81 -0
  66. package/scripts/cli/__tests__/basic.test.js +115 -0
  67. package/scripts/cli/__tests__/component-generator.test.js +332 -0
  68. package/scripts/cli/__tests__/integration.test.js +327 -0
  69. package/scripts/cli/__tests__/test-setup.js +133 -0
  70. package/scripts/cli/__tests__/token-manager.test.js +251 -0
  71. package/scripts/cli/__tests__/utils.test.js +78 -118
  72. package/scripts/cli/component-generator.js +564 -0
  73. package/scripts/cli/dependency-checker.js +355 -0
  74. package/scripts/cli/documentation-sync.js +542 -0
  75. package/scripts/cli/interactive-init.js +129 -292
  76. package/scripts/cli/mappings.js +211 -0
  77. package/scripts/cli/migration-tools.js +95 -288
  78. package/scripts/cli/template-manager.js +105 -0
  79. package/scripts/cli/templates/README.md +123 -0
  80. package/scripts/cli/templates/common-templates.js +636 -0
  81. package/scripts/cli/templates/composable-templates.js +171 -0
  82. package/scripts/cli/templates/config-templates.js +126 -0
  83. package/scripts/cli/templates/index.js +102 -0
  84. package/scripts/cli/templates/project-templates.js +342 -0
  85. package/scripts/cli/templates/react-templates.js +331 -0
  86. package/scripts/cli/templates/scss-templates.js +155 -0
  87. package/scripts/cli/templates/storybook-templates.js +236 -0
  88. package/scripts/cli/templates/testing-templates.js +224 -0
  89. package/scripts/cli/templates/testing-utils.js +278 -0
  90. package/scripts/cli/templates/token-templates.js +447 -0
  91. package/scripts/cli/templates/types-templates.js +147 -0
  92. package/scripts/cli/templates.js +35 -0
  93. package/scripts/cli/theme-bridge.js +28 -16
  94. package/scripts/cli/token-manager.js +432 -247
  95. package/scripts/cli/utils.js +37 -26
  96. package/src/components/Accordion/Accordion.stories.tsx +369 -870
  97. package/src/components/Accordion/Accordion.test.tsx +57 -0
  98. package/src/components/Accordion/Accordion.tsx +4 -0
  99. package/src/components/AtomixGlass/AtomixGlass.tsx +80 -39
  100. package/src/components/AtomixGlass/AtomixGlassContainer.tsx +103 -81
  101. package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap +8 -7
  102. package/src/components/AtomixGlass/glass-utils.ts +2 -2
  103. package/src/components/AtomixGlass/shader-utils.ts +5 -0
  104. package/src/components/AtomixGlass/stories/Customization.stories.tsx +131 -0
  105. package/src/components/AtomixGlass/stories/Examples.stories.tsx +2965 -2861
  106. package/src/components/AtomixGlass/stories/Modes.stories.tsx +1 -1
  107. package/src/components/AtomixGlass/stories/Overview.stories.tsx +348 -0
  108. package/src/components/AtomixGlass/stories/Performance.stories.tsx +103 -0
  109. package/src/components/AtomixGlass/stories/Playground.stories.tsx +73 -59
  110. package/src/components/AtomixGlass/stories/{ShaderVariants.stories.tsx → Shaders.stories.tsx} +1 -1
  111. package/src/components/AtomixGlass/stories/shared-components.tsx +90 -190
  112. package/src/components/Avatar/Avatar.stories.tsx +239 -27
  113. package/src/components/Badge/Badge.stories.tsx +132 -373
  114. package/src/components/Badge/Badge.test.tsx +51 -0
  115. package/src/components/Badge/Badge.tsx +20 -1
  116. package/src/components/Block/Block.stories.tsx +26 -17
  117. package/src/components/Breadcrumb/Breadcrumb.stories.tsx +141 -23
  118. package/src/components/Breadcrumb/Breadcrumb.tsx +2 -2
  119. package/src/components/Button/Button.stories.tsx +463 -1126
  120. package/src/components/Button/Button.test.tsx +107 -0
  121. package/src/components/Button/Button.tsx +50 -54
  122. package/src/components/Button/ButtonGroup.stories.tsx +373 -217
  123. package/src/components/Button/README.md +5 -0
  124. package/src/components/Callout/Callout.stories.tsx +299 -644
  125. package/src/components/Callout/Callout.test.tsx +10 -10
  126. package/src/components/Callout/Callout.tsx +7 -7
  127. package/src/components/Callout/README.md +9 -8
  128. package/src/components/Card/Card.stories.tsx +248 -68
  129. package/src/components/Card/Card.tsx +2 -2
  130. package/src/components/Chart/Chart.stories.tsx +156 -14
  131. package/src/components/Chart/Chart.tsx +1 -1
  132. package/src/components/ColorModeToggle/ColorModeToggle.stories.tsx +151 -69
  133. package/src/components/Countdown/Countdown.stories.tsx +115 -8
  134. package/src/components/DataTable/DataTable.stories.tsx +346 -146
  135. package/src/components/DataTable/DataTable.tsx +14 -12
  136. package/src/components/DatePicker/DatePicker.stories.tsx +325 -1066
  137. package/src/components/Dropdown/Dropdown.stories.tsx +157 -37
  138. package/src/components/EdgePanel/EdgePanel.stories.tsx +230 -21
  139. package/src/components/Footer/Footer.stories.tsx +392 -328
  140. package/src/components/Form/Checkbox.stories.tsx +143 -9
  141. package/src/components/Form/Checkbox.test.tsx +63 -0
  142. package/src/components/Form/Checkbox.tsx +90 -52
  143. package/src/components/Form/Form.stories.tsx +121 -22
  144. package/src/components/Form/FormGroup.stories.tsx +128 -5
  145. package/src/components/Form/Input.stories.tsx +28 -16
  146. package/src/components/Form/Input.test.tsx +59 -0
  147. package/src/components/Form/Input.tsx +97 -95
  148. package/src/components/Form/Radio.stories.tsx +232 -97
  149. package/src/components/Form/Radio.tsx +2 -2
  150. package/src/components/Form/Select.stories.tsx +144 -12
  151. package/src/components/Form/Select.tsx +2 -2
  152. package/src/components/Form/Textarea.stories.tsx +171 -13
  153. package/src/components/Form/Textarea.test.tsx +45 -0
  154. package/src/components/Form/Textarea.tsx +88 -86
  155. package/src/components/Hero/Hero.stories.tsx +333 -32
  156. package/src/components/List/List.stories.tsx +143 -5
  157. package/src/components/Modal/Modal.stories.tsx +185 -46
  158. package/src/components/Navigation/Navbar/Navbar.stories.tsx +5 -5
  159. package/src/components/Navigation/Navbar/Navbar.tsx +1 -1
  160. package/src/components/Navigation/README.md +1 -1
  161. package/src/components/Pagination/Pagination.stories.tsx +5 -2
  162. package/src/components/Pagination/Pagination.tsx +1 -1
  163. package/src/components/PhotoViewer/PhotoViewer.stories.tsx +10 -10
  164. package/src/components/Popover/Popover.stories.tsx +449 -99
  165. package/src/components/ProductReview/ProductReview.tsx +1 -1
  166. package/src/components/Progress/Progress.stories.tsx +167 -5
  167. package/src/components/Progress/Progress.tsx +46 -46
  168. package/src/components/Rating/Rating.stories.tsx +4 -4
  169. package/src/components/Rating/Rating.tsx +8 -8
  170. package/src/components/River/River.stories.tsx +1 -1
  171. package/src/components/SectionIntro/SectionIntro.stories.tsx +240 -48
  172. package/src/components/Slider/Slider.stories.tsx +63 -63
  173. package/src/components/Spinner/Spinner.stories.tsx +104 -10
  174. package/src/components/Spinner/Spinner.test.tsx +35 -0
  175. package/src/components/Spinner/Spinner.tsx +9 -2
  176. package/src/components/Steps/Steps.stories.tsx +172 -43
  177. package/src/components/Tabs/Tabs.stories.tsx +136 -10
  178. package/src/components/Testimonial/Testimonial.stories.tsx +121 -4
  179. package/src/components/Todo/Todo.stories.tsx +198 -9
  180. package/src/components/Toggle/Toggle.stories.tsx +153 -43
  181. package/src/components/Toggle/Toggle.test.tsx +91 -0
  182. package/src/components/Toggle/Toggle.tsx +44 -27
  183. package/src/components/Tooltip/Tooltip.stories.tsx +194 -104
  184. package/src/components/Tooltip/Tooltip.tsx +1 -1
  185. package/src/components/Upload/Upload.stories.tsx +113 -24
  186. package/src/layouts/Grid/Grid.stories.tsx +49 -49
  187. package/src/layouts/MasonryGrid/MasonryGrid.stories.tsx +2 -2
  188. package/src/lib/README.md +2 -2
  189. package/src/lib/__tests__/theme-tools.test.ts +193 -0
  190. package/src/lib/composables/index.ts +2 -2
  191. package/src/lib/composables/useAccordion.ts +12 -3
  192. package/src/lib/composables/useAtomixGlass.ts +28 -56
  193. package/src/lib/composables/useBreadcrumb.ts +2 -2
  194. package/src/lib/composables/useCallout.ts +7 -7
  195. package/src/lib/composables/useChartExport.ts +2 -7
  196. package/src/lib/composables/useDataTable.ts +46 -29
  197. package/src/lib/composables/useNavbar.ts +1 -1
  198. package/src/lib/constants/components.ts +10 -33
  199. package/src/lib/storybook/InteractiveDemo.tsx +113 -0
  200. package/src/lib/storybook/PreviewContainer.tsx +36 -0
  201. package/src/lib/storybook/VariantsGrid.tsx +21 -0
  202. package/src/lib/storybook/index.ts +3 -0
  203. package/src/lib/theme/core/createThemeObject.ts +9 -5
  204. package/src/lib/theme/devtools/CLI.ts +155 -0
  205. package/src/lib/theme/devtools/DesignTokensCustomizer.stories.tsx +213 -0
  206. package/src/lib/theme/devtools/DesignTokensCustomizer.tsx +566 -0
  207. package/src/lib/theme/devtools/LiveEditor.tsx +2 -1
  208. package/src/lib/theme/devtools/index.ts +3 -0
  209. package/src/lib/theme/errors/errors.ts +8 -0
  210. package/src/lib/theme/runtime/ThemeProvider.tsx +117 -57
  211. package/src/lib/theme/runtime/__tests__/ThemeProvider.integration.test.tsx +305 -0
  212. package/src/lib/theme/runtime/__tests__/ThemeProvider.test.tsx +588 -0
  213. package/src/lib/theme/utils/__tests__/themeValidation.test.ts +264 -0
  214. package/src/lib/theme/utils/index.ts +1 -0
  215. package/src/lib/theme/utils/themeValidation.ts +501 -0
  216. package/src/lib/theme-tools.ts +32 -3
  217. package/src/lib/types/components.ts +82 -27
  218. package/src/lib/utils/__tests__/csv.test.ts +45 -0
  219. package/src/lib/utils/csv.ts +17 -0
  220. package/src/lib/utils/dataTableExport.ts +1 -10
  221. package/src/lib/utils/themeNaming.ts +1 -1
  222. package/src/styles/01-settings/_index.scss +2 -1
  223. package/src/styles/01-settings/_settings.accordion.scss +28 -7
  224. package/src/styles/01-settings/_settings.colors.scss +11 -11
  225. package/src/styles/01-settings/_settings.typography.scss +5 -5
  226. package/src/styles/02-tools/_tools.utility-api.scss +14 -0
  227. package/src/styles/06-components/_components.accordion.scss +56 -14
  228. package/src/styles/06-components/_components.callout.scss +29 -33
  229. package/src/styles/06-components/_components.checkbox.scss +23 -17
  230. package/src/styles/06-components/_index.scss +1 -1
  231. package/src/styles/99-utilities/_index.scss +2 -0
  232. package/src/styles/99-utilities/_utilities.display.scss +14 -3
  233. package/src/styles/99-utilities/_utilities.flex.scss +10 -10
  234. package/src/styles/99-utilities/_utilities.scss +3 -1
  235. package/src/styles/99-utilities/_utilities.text-gradient.scss +45 -0
  236. package/src/styles/99-utilities/_utilities.text.scss +28 -8
  237. package/themes/dark-complementary/README.md +98 -0
  238. package/themes/dark-complementary/index.scss +158 -0
  239. package/themes/default-light/README.md +81 -0
  240. package/themes/default-light/index.scss +154 -0
  241. package/themes/high-contrast/README.md +105 -0
  242. package/themes/high-contrast/index.scss +172 -0
  243. package/themes/test-theme/README.md +38 -0
  244. package/themes/test-theme/index.scss +47 -0
  245. package/scripts/cli/__tests__/cli-commands.test.js +0 -204
  246. package/scripts/cli/__tests__/vitest.config.js +0 -26
  247. package/src/components/AtomixGlass/stories/AtomixGlass.stories.tsx +0 -1438
  248. package/src/lib/composables/useButton.ts +0 -93
  249. package/src/lib/composables/useCheckbox.ts +0 -70
package/scripts/cli/templates/project-templates.js ADDED
@@ -0,0 +1,342 @@
1
+ /**
2
+ * Project Templates
3
+ * Templates for different project types and configurations
4
+ */
5
+
6
+ import { commonTemplates } from './common-templates.js';
7
+
8
+ /**
9
+ * React project templates
10
+ */
11
+ export const reactProjectTemplates = {
12
+ dependencies: ['react', 'react-dom'],
13
+ devDependencies: ['@vitejs/plugin-react', 'vite', 'typescript', '@types/react', '@types/react-dom', 'sass'],
14
+ files: {
15
+ // TypeScript Configuration
16
+ 'tsconfig.json': commonTemplates.typescript.react,
17
+ 'tsconfig.node.json': commonTemplates.typescript.reactNode,
18
+
19
+ // Git Configuration
20
+ '.gitignore': commonTemplates.git.gitignore,
21
+ '.gitattributes': commonTemplates.git.gitattributes,
22
+
23
+ // Code Quality
24
+ '.prettierrc': commonTemplates.prettier.prettierrc,
25
+ '.prettierignore': commonTemplates.prettier.prettierignore,
26
+ '.eslintrc.cjs': commonTemplates.eslint.react,
27
+
28
+ // Environment
29
+ '.env.example': commonTemplates.env,
30
+
31
+ // Vite Environment Types
32
+ 'src/vite-env.d.ts': commonTemplates.viteEnv,
33
+
34
+ // Main Application Files
35
+ 'src/App.tsx': `import React from 'react';
36
+ import './App.css';
37
+
38
+ function App() {
39
+ return (
40
+ <div className="App">
41
+ <header className="App-header">
42
+ <h1>Welcome to Atomix Design System</h1>
43
+ <p>
44
+ Your React application is ready with Atomix components!
45
+ </p>
46
+ </header>
47
+ </div>
48
+ );
49
+ }
50
+
51
+ export default App;`,
52
+
53
+ 'src/main.tsx': `import React from 'react';
54
+ import ReactDOM from 'react-dom/client';
55
+ import App from './App';
56
+ import './styles/index.scss';
57
+
58
+ ReactDOM.createRoot(document.getElementById('root')!).render(
59
+ <React.StrictMode>
60
+ <App />
61
+ </React.StrictMode>,
62
+ );`,
63
+
64
+ 'src/App.css': `.App {
65
+ text-align: center;
66
+ }
67
+
68
+ .App-header {
69
+ background-color: #282c34;
70
+ padding: 20px;
71
+ color: white;
72
+ min-height: 100vh;
73
+ display: flex;
74
+ flex-direction: column;
75
+ align-items: center;
76
+ justify-content: center;
77
+ font-size: calc(10px + 2vmin);
78
+ }`,
79
+
80
+ 'index.html': `<!DOCTYPE html>
81
+ <html lang="en">
82
+ <head>
83
+ <meta charset="UTF-8" />
84
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
85
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
86
+ <title>Atomix React App</title>
87
+ </head>
88
+ <body>
89
+ <div id="root"></div>
90
+ <script type="module" src="/src/main.tsx"></script>
91
+ </body>
92
+ </html>`,
93
+
94
+ 'vite.config.ts': `import { defineConfig } from 'vite';
95
+ import react from '@vitejs/plugin-react';
96
+ import { resolve } from 'path';
97
+
98
+ export default defineConfig({
99
+ plugins: [react()],
100
+ resolve: {
101
+ alias: {
102
+ '@': resolve(__dirname, './src'),
103
+ '@components': resolve(__dirname, './src/components'),
104
+ '@lib': resolve(__dirname, './src/lib'),
105
+ '@styles': resolve(__dirname, './src/styles'),
106
+ },
107
+ },
108
+ css: {
109
+ preprocessorOptions: {
110
+ scss: {
111
+ additionalData: \`@use "@shohojdhara/atomix/scss/settings" as *;\`
112
+ }
113
+ }
114
+ }
115
+ });`,
116
+
117
+ // ITCSS Structure
118
+ 'src/styles/index.scss': commonTemplates.itcss.main,
119
+ 'src/styles/01-settings/_index.scss': commonTemplates.itcss.settings,
120
+ 'src/styles/02-tools/_index.scss': commonTemplates.itcss.tools,
121
+ 'src/styles/03-generic/_index.scss': commonTemplates.itcss.generic,
122
+ 'src/styles/04-elements/_index.scss': commonTemplates.itcss.elements,
123
+ 'src/styles/05-objects/_index.scss': commonTemplates.itcss.objects,
124
+ 'src/styles/06-components/_index.scss': commonTemplates.itcss.components,
125
+ 'src/styles/99-utilities/_index.scss': commonTemplates.itcss.utilities,
126
+
127
+ // Library Structure
128
+ 'src/lib/types/index.ts': commonTemplates.lib.types,
129
+ 'src/lib/types/components.ts': `// Component type definitions\n`,
130
+ 'src/lib/constants/index.ts': commonTemplates.lib.constants,
131
+ 'src/lib/composables/index.ts': commonTemplates.lib.composables,
132
+ 'src/lib/utils/index.ts': commonTemplates.lib.utils,
133
+
134
+ // Placeholder files
135
+ 'src/components/.gitkeep': '',
136
+ 'src/assets/.gitkeep': '',
137
+ }
138
+ };
139
+
140
+ /**
141
+ * Next.js project templates
142
+ */
143
+ export const nextjsProjectTemplates = {
144
+ dependencies: ['next', 'react', 'react-dom'],
145
+ devDependencies: ['typescript', '@types/node', '@types/react', '@types/react-dom', 'sass', 'eslint', 'eslint-config-next'],
146
+ files: {
147
+ // TypeScript Configuration
148
+ 'tsconfig.json': commonTemplates.typescript.nextjs,
149
+
150
+ // Git Configuration
151
+ '.gitignore': commonTemplates.git.gitignore,
152
+ '.gitattributes': commonTemplates.git.gitattributes,
153
+
154
+ // Code Quality
155
+ '.prettierrc': commonTemplates.prettier.prettierrc,
156
+ '.prettierignore': commonTemplates.prettier.prettierignore,
157
+ '.eslintrc.json': commonTemplates.eslint.nextjs,
158
+
159
+ // Environment
160
+ '.env.example': commonTemplates.env,
161
+
162
+ // Next.js Pages
163
+ 'src/pages/_app.tsx': `import '../styles/globals.scss';
164
+ import type { AppProps } from 'next/app';
165
+
166
+ export default function App({ Component, pageProps }: AppProps) {
167
+ return <Component {...pageProps} />;
168
+ }`,
169
+
170
+ 'src/pages/index.tsx': `import Head from 'next/head';
171
+
172
+ export default function Home() {
173
+ return (
174
+ <>
175
+ <Head>
176
+ <title>Atomix Next.js App</title>
177
+ <meta name="description" content="Generated by Atomix CLI" />
178
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
179
+ </Head>
180
+ <main>
181
+ <h1>Welcome to Atomix Design System</h1>
182
+ <p>Your Next.js application is ready with Atomix components!</p>
183
+ </main>
184
+ </>
185
+ );
186
+ }`,
187
+
188
+ 'src/styles/globals.scss': `@use './index.scss';
189
+
190
+ html,
191
+ body {
192
+ padding: 0;
193
+ margin: 0;
194
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
195
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
196
+ }
197
+
198
+ main {
199
+ padding: 2rem;
200
+ text-align: center;
201
+ }`,
202
+
203
+ 'next.config.js': `/** @type {import('next').NextConfig} */
204
+ const nextConfig = {
205
+ reactStrictMode: true,
206
+ sassOptions: {
207
+ includePaths: ['./node_modules'],
208
+ },
209
+ };
210
+
211
+ module.exports = nextConfig;`,
212
+
213
+ // ITCSS Structure
214
+ 'src/styles/index.scss': commonTemplates.itcss.main,
215
+ 'src/styles/01-settings/_index.scss': commonTemplates.itcss.settings,
216
+ 'src/styles/02-tools/_index.scss': commonTemplates.itcss.tools,
217
+ 'src/styles/03-generic/_index.scss': commonTemplates.itcss.generic,
218
+ 'src/styles/04-elements/_index.scss': commonTemplates.itcss.elements,
219
+ 'src/styles/05-objects/_index.scss': commonTemplates.itcss.objects,
220
+ 'src/styles/06-components/_index.scss': commonTemplates.itcss.components,
221
+ 'src/styles/99-utilities/_index.scss': commonTemplates.itcss.utilities,
222
+
223
+ // Library Structure
224
+ 'src/lib/types/index.ts': commonTemplates.lib.types,
225
+ 'src/lib/types/components.ts': `// Component type definitions\n`,
226
+ 'src/lib/constants/index.ts': commonTemplates.lib.constants,
227
+ 'src/lib/utils/index.ts': commonTemplates.lib.utils,
228
+
229
+ // Placeholder files
230
+ 'src/components/.gitkeep': '',
231
+ 'src/public/.gitkeep': '',
232
+ }
233
+ };
234
+
235
+ /**
236
+ * Vanilla JavaScript project templates
237
+ */
238
+ export const vanillaProjectTemplates = {
239
+ dependencies: [],
240
+ devDependencies: ['vite', 'typescript', 'sass'],
241
+ files: {
242
+ // TypeScript Configuration
243
+ 'tsconfig.json': commonTemplates.typescript.vanilla,
244
+
245
+ // Git Configuration
246
+ '.gitignore': commonTemplates.git.gitignore,
247
+ '.gitattributes': commonTemplates.git.gitattributes,
248
+
249
+ // Code Quality
250
+ '.prettierrc': commonTemplates.prettier.prettierrc,
251
+ '.prettierignore': commonTemplates.prettier.prettierignore,
252
+
253
+ // Environment
254
+ '.env.example': commonTemplates.env,
255
+
256
+ // Vite Environment Types
257
+ 'src/vite-env.d.ts': commonTemplates.viteEnv,
258
+
259
+ // Main Application Files
260
+ 'index.html': `<!DOCTYPE html>
261
+ <html lang="en">
262
+ <head>
263
+ <meta charset="UTF-8" />
264
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
265
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
266
+ <title>Atomix Vanilla App</title>
267
+ </head>
268
+ <body>
269
+ <div id="app">
270
+ <header>
271
+ <h1>Welcome to Atomix Design System</h1>
272
+ <p>Your vanilla JavaScript application is ready with Atomix components!</p>
273
+ </header>
274
+ </div>
275
+ <script type="module" src="/src/main.ts"></script>
276
+ </body>
277
+ </html>`,
278
+
279
+ 'src/main.ts': `import './styles/main.scss';
280
+
281
+ console.log('Atomix Vanilla JavaScript App Initialized');`,
282
+
283
+ 'src/styles/main.scss': `@use './index.scss';
284
+
285
+ #app {
286
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
287
+ text-align: center;
288
+ }
289
+
290
+ header {
291
+ background-color: #f8f9fa;
292
+ padding: 2rem;
293
+ border-bottom: 1px solid #dee2e6;
294
+ }`,
295
+
296
+ 'vite.config.ts': `import { defineConfig } from 'vite';
297
+ import { resolve } from 'path';
298
+
299
+ export default defineConfig({
300
+ resolve: {
301
+ alias: {
302
+ '@': resolve(__dirname, './src'),
303
+ '@lib': resolve(__dirname, './src/lib'),
304
+ '@styles': resolve(__dirname, './src/styles'),
305
+ },
306
+ },
307
+ css: {
308
+ preprocessorOptions: {
309
+ scss: {
310
+ additionalData: \`@use "@shohojdhara/atomix/scss/settings" as *;\`
311
+ }
312
+ }
313
+ }
314
+ });`,
315
+
316
+ // ITCSS Structure
317
+ 'src/styles/index.scss': commonTemplates.itcss.main,
318
+ 'src/styles/01-settings/_index.scss': commonTemplates.itcss.settings,
319
+ 'src/styles/02-tools/_index.scss': commonTemplates.itcss.tools,
320
+ 'src/styles/03-generic/_index.scss': commonTemplates.itcss.generic,
321
+ 'src/styles/04-elements/_index.scss': commonTemplates.itcss.elements,
322
+ 'src/styles/05-objects/_index.scss': commonTemplates.itcss.objects,
323
+ 'src/styles/06-components/_index.scss': commonTemplates.itcss.components,
324
+ 'src/styles/99-utilities/_index.scss': commonTemplates.itcss.utilities,
325
+
326
+ // Library Structure
327
+ 'src/lib/types/index.ts': commonTemplates.lib.types,
328
+ 'src/lib/utils/index.ts': commonTemplates.lib.utils,
329
+
330
+ // Placeholder files
331
+ 'src/assets/.gitkeep': '',
332
+ }
333
+ };
334
+
335
+ /**
336
+ * Project templates export object
337
+ */
338
+ export const projectTemplates = {
339
+ react: reactProjectTemplates,
340
+ nextjs: nextjsProjectTemplates,
341
+ vanilla: vanillaProjectTemplates,
342
+ };
package/scripts/cli/templates/react-templates.js ADDED
@@ -0,0 +1,331 @@
1
+ // Creating react-templates.js since it doesn't exist yet but is referenced in the modular templates
2
+
3
+ /**
4
+ * React Component Templates
5
+ * Templates for React component generation
6
+ */
7
+
8
+ /**
9
+ * Default component template that matches existing components
10
+ */
11
+ export const componentTemplate = (name) => {
12
+ const componentPrefix = name.toLowerCase().replace(/([A-Z])/g, '-$1').toLowerCase().replace(/^-/, '');
13
+
14
+ return `import React, { forwardRef, useCallback, memo } from 'react';
15
+ import { use${name} } from '../../lib/composables/use${name}';
16
+ import { ${name.toUpperCase()}, THEME_NAMING } from '../../lib/constants/components';
17
+ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
18
+ import { ThemeNaming } from '../../lib/utils/themeNaming';
19
+ import type { ${name}Props } from '../../lib/types/components';
20
+
21
+ export const ${name} = React.memo(
22
+ forwardRef<HTMLDivElement, ${name}Props>(
23
+ (
24
+ {
25
+ children,
26
+ className = '',
27
+ disabled = false,
28
+ variant = 'primary',
29
+ size = 'md',
30
+ glass,
31
+ onClick,
32
+ onHover,
33
+ onFocus,
34
+ onBlur,
35
+ 'aria-label': ariaLabel,
36
+ 'aria-describedby': ariaDescribedBy,
37
+ tabIndex,
38
+ style,
39
+ ...props
40
+ },
41
+ ref
42
+ ) => {
43
+ const { generateClassNames, handleClick } = use${name}({
44
+ variant,
45
+ size,
46
+ disabled,
47
+ glass,
48
+ });
49
+
50
+ const componentClass = [
51
+ ${name.toUpperCase()}.BASE_CLASS,
52
+ ThemeNaming.variantClass('${componentPrefix}', variant),
53
+ size !== 'md' ? ThemeNaming.sizeClass('${componentPrefix}', size) : '',
54
+ disabled ? ThemeNaming.stateClass('${componentPrefix}', 'disabled') : '',
55
+ glass ? ThemeNaming.stateClass('${componentPrefix}', 'glass') : '',
56
+ className,
57
+ ]
58
+ .filter(Boolean)
59
+ .join(' ');
60
+
61
+ // Handle click event
62
+ const handleClickEvent = useCallback(
63
+ (event: React.MouseEvent<HTMLDivElement>) => {
64
+ if (disabled) {
65
+ event.preventDefault();
66
+ return;
67
+ }
68
+ onClick?.(event);
69
+ },
70
+ [disabled, onClick]
71
+ );
72
+
73
+ // Handle hover
74
+ const handleMouseEnter = useCallback(
75
+ (event: React.MouseEvent<HTMLDivElement>) => {
76
+ if (!disabled) {
77
+ onHover?.(event);
78
+ }
79
+ },
80
+ [disabled, onHover]
81
+ );
82
+
83
+ // Handle focus
84
+ const handleFocusEvent = useCallback(
85
+ (event: React.FocusEvent<HTMLDivElement>) => {
86
+ if (!disabled) {
87
+ onFocus?.(event);
88
+ }
89
+ },
90
+ [disabled, onFocus]
91
+ );
92
+
93
+ // Handle blur
94
+ const handleBlurEvent = useCallback(
95
+ (event: React.FocusEvent<HTMLDivElement>) => {
96
+ if (!disabled) {
97
+ onBlur?.(event);
98
+ }
99
+ },
100
+ [disabled, onBlur]
101
+ );
102
+
103
+ // Component props
104
+ const componentProps = {
105
+ ref,
106
+ className: componentClass,
107
+ onClick: handleClickEvent,
108
+ onMouseEnter: onHover ? handleMouseEnter : undefined,
109
+ onFocus: onFocus ? handleFocusEvent : undefined,
110
+ onBlur: onBlur ? handleBlurEvent : undefined,
111
+ 'aria-disabled': disabled,
112
+ 'aria-label': ariaLabel,
113
+ 'aria-describedby': ariaDescribedBy,
114
+ tabIndex: tabIndex !== undefined ? tabIndex : (disabled ? -1 : 0),
115
+ style,
116
+ ...props,
117
+ };
118
+
119
+ // Default glass props
120
+ const defaultGlassProps = {
121
+ displacementScale: 20,
122
+ blurAmount: 0,
123
+ saturation: 200,
124
+ elasticity: 0,
125
+ };
126
+ const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
127
+
128
+ // Component content
129
+ const componentContent = (
130
+ <div {...componentProps}>
131
+ {children}
132
+ </div>
133
+ );
134
+
135
+ return glass ? <AtomixGlass {...glassProps}>{componentContent}</AtomixGlass> : componentContent;
136
+ }
137
+ )
138
+ );
139
+
140
+ ${name}.displayName = '${name}';
141
+
142
+ export default ${name};`;
143
+ };
144
+
145
+ /**
146
+ * Simple component template
147
+ */
148
+ export const simpleTemplate = (name) => `import React, { forwardRef } from 'react';
149
+ import type { ${name}Props } from './${name}.types';
150
+
151
+ /**
152
+ * ${name} - Simple Presentational Component
153
+ *
154
+ * A basic component for rendering content with minimal overhead.
155
+ */
156
+ export const ${name} = forwardRef<HTMLDivElement, ${name}Props>(
157
+ ({ children, className, ...props }, ref) => {
158
+ return (
159
+ <div ref={ref} className={\`c-${name.toLowerCase()} \${className || ''}\`} {...props}>
160
+ {children}
161
+ </div>
162
+ );
163
+ }
164
+ );
165
+
166
+ ${name}.displayName = '${name}';
167
+ `;
168
+
169
+ /**
170
+ * Medium complexity template
171
+ */
172
+ export const mediumTemplate = (name) => `import React, { forwardRef, useId, memo } from 'react';
173
+ import { ${name.toUpperCase()} } from '../../lib/constants/components';
174
+ import { use${name} } from '../../lib/composables/use${name}';
175
+ import type { ${name}Props, ${name}State } from '../../lib/types/components';
176
+
177
+ export interface ${name}Props {
178
+ /**
179
+ * Content to be rendered
180
+ */
181
+ children?: React.ReactNode;
182
+
183
+ /**
184
+ * Additional CSS classes
185
+ */
186
+ className?: string;
187
+
188
+ /**
189
+ * Disabled state
190
+ */
191
+ disabled?: boolean;
192
+
193
+ /**
194
+ * Inline styles
195
+ */
196
+ style?: React.CSSProperties;
197
+
198
+ /**
199
+ * Other component-specific props would go here
200
+ */
201
+ }
202
+
203
+ export interface ${name}State {
204
+ // Define state interface for the component
205
+ }
206
+
207
+ export const ${name}: React.FC<${name}Props> = memo(({
208
+ children,
209
+ className = '',
210
+ disabled = false,
211
+ style,
212
+ ...props
213
+ }) => {
214
+ const instanceId = useId();
215
+ const { generateClassNames } = use${name}({ disabled });
216
+
217
+ return (
218
+ <div
219
+ className={generateClassNames(className)}
220
+ style={style}
221
+ {...props}
222
+ >
223
+ {children}
224
+ </div>
225
+ );
226
+ });
227
+
228
+ ${name}.displayName = '${name}';
229
+
230
+ export default ${name};
231
+ `;
232
+
233
+ /**
234
+ * Complex template
235
+ */
236
+ export const complexTemplate = (name) => `import React, { forwardRef, useId, memo } from 'react';
237
+ import { ${name.toUpperCase()} } from '../../lib/constants/components';
238
+ import { use${name} } from '../../lib/composables/use${name}';
239
+ import type { ${name}Props, ${name}State } from '../../lib/types/components';
240
+ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
241
+ import type { AtomixGlassProps } from '../AtomixGlass/AtomixGlass';
242
+
243
+ export interface ${name}Props {
244
+ /**
245
+ * Content to be rendered
246
+ */
247
+ children?: React.ReactNode;
248
+
249
+ /**
250
+ * Additional CSS classes
251
+ */
252
+ className?: string;
253
+
254
+ /**
255
+ * Disabled state
256
+ */
257
+ disabled?: boolean;
258
+
259
+ /**
260
+ * Glass effect options
261
+ */
262
+ glass?: boolean | AtomixGlassProps;
263
+
264
+ /**
265
+ * Inline styles
266
+ */
267
+ style?: React.CSSProperties;
268
+
269
+ /**
270
+ * Callback when component state changes
271
+ */
272
+ onStateChange?: (state: ${name}State) => void;
273
+ }
274
+
275
+ export interface ${name}State {
276
+ // Define state interface for the component
277
+ }
278
+
279
+ export const ${name}: React.FC<${name}Props> = memo(({
280
+ children,
281
+ className = '',
282
+ disabled = false,
283
+ glass,
284
+ style,
285
+ onStateChange,
286
+ ...props
287
+ }) => {
288
+ const instanceId = useId();
289
+ const { generateClassNames } = use${name}({ disabled, onStateChange });
290
+
291
+ const componentContent = (
292
+ <div
293
+ className={generateClassNames(className)}
294
+ style={style}
295
+ {...props}
296
+ >
297
+ {children}
298
+ </div>
299
+ );
300
+
301
+ if (glass) {
302
+ const defaultGlassProps = {
303
+ // Default glass settings specific to this component
304
+ };
305
+
306
+ const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
307
+
308
+ return <AtomixGlass {...glassProps}>{componentContent}</AtomixGlass>;
309
+ }
310
+
311
+ return componentContent;
312
+ });
313
+
314
+ ${name}.displayName = '${name}';
315
+
316
+ export default ${name};
317
+ `;
318
+
319
+ /**
320
+ * Index template
321
+ */
322
+ export const indexTemplate = (name) => `export { default as ${name} } from './${name}';
323
+ export type { ${name}Props } from './${name}';`;
324
+
325
+ export const reactTemplates = {
326
+ component: componentTemplate,
327
+ simple: simpleTemplate,
328
+ medium: mediumTemplate,
329
+ complex: complexTemplate,
330
+ index: indexTemplate,
331
+ };