@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/interactive-init.js CHANGED
@@ -5,246 +5,11 @@
5
5
  import inquirer from 'inquirer';
6
6
  import chalk from 'chalk';
7
7
  import { readFile, writeFile, mkdir } from 'fs/promises';
8
- import { join } from 'path';
8
+ import { join, dirname, basename } from 'path';
9
9
  import { existsSync } from 'fs';
10
10
  import boxen from 'boxen';
11
11
 
12
- /**
13
- * Project Templates
14
- */
15
- const projectTemplates = {
16
- react: {
17
- dependencies: [
18
- '@shohojdhara/atomix',
19
- 'react',
20
- 'react-dom'
21
- ],
22
- devDependencies: [
23
- '@types/react',
24
- '@types/react-dom',
25
- 'typescript',
26
- 'vite',
27
- '@vitejs/plugin-react'
28
- ],
29
- files: {
30
- 'vite.config.ts': `import { defineConfig } from 'vite';
31
- import react from '@vitejs/plugin-react';
32
-
33
- export default defineConfig({
34
- plugins: [react()],
35
- css: {
36
- preprocessorOptions: {
37
- scss: {
38
- additionalData: \`@import '@shohojdhara/atomix/scss/settings';\`
39
- }
40
- }
41
- }
42
- });`,
43
- 'src/App.tsx': `import React from 'react';
44
- import { Button, Card } from '@shohojdhara/atomix';
45
- import '@shohojdhara/atomix/css';
46
-
47
- function App() {
48
- return (
49
- <div className="app">
50
- <Card>
51
- <h1>Welcome to Atomix Design System</h1>
52
- <Button variant="primary">Get Started</Button>
53
- </Card>
54
- </div>
55
- );
56
- }
57
-
58
- export default App;`,
59
- 'src/main.tsx': `import React from 'react';
60
- import ReactDOM from 'react-dom/client';
61
- import App from './App';
62
- import './index.css';
63
-
64
- ReactDOM.createRoot(document.getElementById('root')!).render(
65
- <React.StrictMode>
66
- <App />
67
- </React.StrictMode>
68
- );`,
69
- 'src/index.css': `/* Custom styles */
70
- body {
71
- margin: 0;
72
- font-family: var(--atomix-font-family-base);
73
- }`
74
- }
75
- },
76
-
77
- nextjs: {
78
- dependencies: [
79
- '@shohojdhara/atomix',
80
- 'next',
81
- 'react',
82
- 'react-dom'
83
- ],
84
- devDependencies: [
85
- '@types/react',
86
- '@types/react-dom',
87
- 'typescript',
88
- 'eslint',
89
- 'eslint-config-next'
90
- ],
91
- files: {
92
- 'next.config.js': `/** @type {import('next').NextConfig} */
93
- const nextConfig = {
94
- reactStrictMode: true,
95
- sassOptions: {
96
- includePaths: ['./src/styles'],
97
- prependData: \`@import '@shohojdhara/atomix/scss/settings';\`
98
- }
99
- };
100
-
101
- module.exports = nextConfig;`,
102
- 'src/pages/_app.tsx': `import type { AppProps } from 'next/app';
103
- import '@shohojdhara/atomix/css';
104
- import '../styles/globals.css';
105
-
106
- export default function App({ Component, pageProps }: AppProps) {
107
- return <Component {...pageProps} />;
108
- }`,
109
- 'src/pages/index.tsx': `import { Button, Card } from '@shohojdhara/atomix';
110
-
111
- export default function Home() {
112
- return (
113
- <main>
114
- <Card>
115
- <h1>Welcome to Atomix + Next.js</h1>
116
- <Button variant="primary">Get Started</Button>
117
- </Card>
118
- </main>
119
- );
120
- }`,
121
- 'src/styles/globals.css': `/* Global styles */
122
- body {
123
- margin: 0;
124
- padding: 0;
125
- }`
126
- }
127
- },
128
-
129
- vanilla: {
130
- dependencies: [
131
- '@shohojdhara/atomix'
132
- ],
133
- devDependencies: [
134
- 'vite',
135
- 'sass'
136
- ],
137
- files: {
138
- 'vite.config.js': `import { defineConfig } from 'vite';
139
-
140
- export default defineConfig({
141
- css: {
142
- preprocessorOptions: {
143
- scss: {
144
- additionalData: \`@import '@shohojdhara/atomix/scss/settings';\`
145
- }
146
- }
147
- }
148
- });`,
149
- 'index.html': `<!DOCTYPE html>
150
- <html lang="en">
151
- <head>
152
- <meta charset="UTF-8">
153
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
154
- <title>Atomix Design System</title>
155
- <link rel="stylesheet" href="/node_modules/@shohojdhara/atomix/dist/atomix.css">
156
- <link rel="stylesheet" href="/src/styles/main.scss">
157
- </head>
158
- <body>
159
- <div class="c-card">
160
- <h1>Welcome to Atomix Design System</h1>
161
- <button class="c-btn c-btn-primary">Get Started</button>
162
- </div>
163
-
164
- <script type="module" src="/src/main.js"></script>
165
- </body>
166
- </html>`,
167
- 'src/main.js': `// Initialize Atomix components
168
- import { initializeComponents } from '@shohojdhara/atomix/vanilla';
169
-
170
- document.addEventListener('DOMContentLoaded', () => {
171
- initializeComponents();
172
-
173
- // Your custom code here
174
- console.log('Atomix Design System initialized');
175
- });`,
176
- 'src/styles/main.scss': `// Import Atomix
177
- @import '@shohojdhara/atomix/scss';
178
-
179
- // Your custom styles
180
- .app {
181
- padding: 2rem;
182
- }`
183
- }
184
- }
185
- };
186
-
187
- /**
188
- * Configuration templates
189
- */
190
- const configTemplates = {
191
- basic: {
192
- '.atomixrc.json': {
193
- theme: {
194
- name: 'custom',
195
- outputDir: './dist/themes',
196
- minify: true,
197
- sourceMaps: false
198
- },
199
- components: {
200
- style: 'scss',
201
- typescript: true,
202
- stories: true
203
- }
204
- }
205
- },
206
-
207
- advanced: {
208
- 'atomix.config.js': `module.exports = {
209
- // Theme configuration
210
- theme: {
211
- name: process.env.ATOMIX_THEME || 'custom',
212
- outputDir: './dist/themes',
213
- minify: process.env.NODE_ENV === 'production',
214
- sourceMaps: process.env.NODE_ENV === 'development',
215
- watch: process.env.NODE_ENV === 'development'
216
- },
217
-
218
- // Component generation
219
- components: {
220
- path: './src/components',
221
- style: 'scss-module', // scss | scss-module | css-in-js
222
- typescript: true,
223
- stories: true,
224
- tests: true
225
- },
226
-
227
- // Design tokens
228
- tokens: {
229
- colors: {
230
- custom: true,
231
- validate: true
232
- },
233
- typography: {
234
- scale: '1.25', // Major third
235
- baseSize: '16px'
236
- }
237
- },
238
-
239
- // Build options
240
- build: {
241
- clean: true,
242
- analyze: false,
243
- report: true
244
- }
245
- };`
246
- }
247
- };
12
+ import { projectTemplates, configTemplates } from './templates.js';
248
13
 
249
14
  /**
250
15
  * Run the interactive init wizard
@@ -345,18 +110,95 @@ export async function runInitWizard() {
345
110
  }
346
111
  ]);
347
112
 
348
- // Generate files
349
- console.log(chalk.cyan('\n📦 Generating project files...\n'));
350
-
351
113
  // Create project structure
352
114
  if (projectType !== 'custom') {
353
115
  const template = projectTemplates[projectType];
354
116
 
117
+ // Step 6: Create/Update package.json
118
+ const packageJsonPath = join(process.cwd(), 'package.json');
119
+ let packageJson = {};
120
+
121
+ if (existsSync(packageJsonPath)) {
122
+ packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8'));
123
+ } else {
124
+ // Create basic package.json
125
+ packageJson = {
126
+ name: basename(process.cwd()),
127
+ version: '0.1.0',
128
+ private: true,
129
+ scripts: {},
130
+ dependencies: {},
131
+ devDependencies: {}
132
+ };
133
+ }
134
+
135
+ // Merge dependencies
136
+ const packageJsonVersion = packageJson.version || '0.1.0';
137
+
138
+ template.dependencies.forEach(dep => {
139
+ if (!packageJson.dependencies[dep]) {
140
+ // Use a default compatible version if not specified
141
+ const defaultVersions = {
142
+ 'react': '^18.0.0',
143
+ 'react-dom': '^18.0.0',
144
+ 'next': '^14.0.0',
145
+ 'sass': '^1.70.0'
146
+ };
147
+ packageJson.dependencies[dep] = defaultVersions[dep] || 'latest';
148
+ }
149
+ });
150
+
151
+ template.devDependencies.forEach(dep => {
152
+ if (!packageJson.devDependencies[dep]) {
153
+ const defaultDevVersions = {
154
+ 'typescript': '^5.0.0',
155
+ 'vite': '^5.0.0',
156
+ '@shohojdhara/atomix': `^${packageJsonVersion}` // Self-reference for templates
157
+ };
158
+ packageJson.devDependencies[dep] = defaultDevVersions[dep] || 'latest';
159
+ }
160
+ });
161
+
162
+ // Merge scripts carefully
163
+ const newScripts = {
164
+ 'dev': projectType === 'nextjs' ? 'next dev' : 'vite',
165
+ 'build': projectType === 'nextjs' ? 'next build' : 'vite build',
166
+ 'build:theme': 'atomix build-theme themes/custom',
167
+ 'generate:component': 'atomix generate component',
168
+ 'validate': 'atomix validate --tokens --theme'
169
+ };
170
+
171
+ if (features.includes('storybook')) {
172
+ newScripts['storybook'] = 'storybook dev -p 6006';
173
+ newScripts['build:storybook'] = 'storybook build';
174
+ }
175
+
176
+ if (features.includes('testing')) {
177
+ newScripts['test'] = 'vitest';
178
+ newScripts['test:watch'] = 'vitest --watch';
179
+ }
180
+
181
+ // Add new scripts without overwriting user's existing scripts
182
+ for (const [key, value] of Object.entries(newScripts)) {
183
+ if (!packageJson.scripts[key]) {
184
+ packageJson.scripts[key] = value;
185
+ } else if (packageJson.scripts[key] !== value) {
186
+ // Suggest renamed script if conflict exists
187
+ const suggestedKey = `atomix:${key}`;
188
+ if (!packageJson.scripts[suggestedKey]) {
189
+ packageJson.scripts[suggestedKey] = value;
190
+ console.log(chalk.yellow(` ⚠️ Script conflict for "${key}". Added as "${suggestedKey}" instead.`));
191
+ }
192
+ }
193
+ }
194
+
195
+ await writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2), 'utf8');
196
+ console.log(chalk.green(' ✓ Updated package.json'));
197
+
355
198
  // Create directories
356
199
  await mkdir('src', { recursive: true });
357
200
  if (projectType === 'nextjs') {
358
201
  await mkdir('src/pages', { recursive: true });
359
- await mkdir('src/styles', { recursive: true });
360
202
  } else if (projectType === 'react') {
361
203
  await mkdir('src/components', { recursive: true });
362
204
  } else if (projectType === 'vanilla') {
@@ -366,7 +208,7 @@ export async function runInitWizard() {
366
208
  // Write template files
367
209
  for (const [path, content] of Object.entries(template.files)) {
368
210
  const filePath = join(process.cwd(), path);
369
- const dir = join(process.cwd(), path.substring(0, path.lastIndexOf('/')));
211
+ const dir = dirname(filePath);
370
212
 
371
213
  if (!existsSync(dir)) {
372
214
  await mkdir(dir, { recursive: true });
@@ -428,52 +270,6 @@ export async function runInitWizard() {
428
270
  console.log(chalk.green(' ✓ Created custom theme'));
429
271
  }
430
272
 
431
- // Generate package.json scripts
432
- const scripts = {
433
- 'dev': projectType === 'nextjs' ? 'next dev' : 'vite',
434
- 'build': projectType === 'nextjs' ? 'next build' : 'vite build',
435
- 'build:theme': 'atomix build-theme themes/custom',
436
- 'generate:component': 'atomix generate component',
437
- 'validate': 'atomix validate --tokens --theme'
438
- };
439
-
440
- if (features.includes('storybook')) {
441
- scripts['storybook'] = 'storybook dev -p 6006';
442
- scripts['build:storybook'] = 'storybook build';
443
- }
444
-
445
- if (features.includes('testing')) {
446
- scripts['test'] = 'vitest';
447
- scripts['test:watch'] = 'vitest --watch';
448
- scripts['test:coverage'] = 'vitest --coverage';
449
- }
450
-
451
- if (features.includes('linting')) {
452
- scripts['lint'] = 'eslint . --ext .ts,.tsx,.js,.jsx';
453
- scripts['lint:fix'] = 'eslint . --ext .ts,.tsx,.js,.jsx --fix';
454
- scripts['format'] = 'prettier --write "src/**/*.{ts,tsx,js,jsx,json,css,scss}"';
455
- }
456
-
457
- // Update package.json if it exists
458
- const packageJsonPath = join(process.cwd(), 'package.json');
459
- if (existsSync(packageJsonPath)) {
460
- const { addScripts } = await inquirer.prompt([
461
- {
462
- type: 'confirm',
463
- name: 'addScripts',
464
- message: 'Add Atomix scripts to package.json?',
465
- default: true
466
- }
467
- ]);
468
-
469
- if (addScripts) {
470
- const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8'));
471
- packageJson.scripts = { ...packageJson.scripts, ...scripts };
472
- await writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2), 'utf8');
473
- console.log(chalk.green(' ✓ Updated package.json scripts'));
474
- }
475
- }
476
-
477
273
  // Success message
478
274
  console.log(boxen(
479
275
  chalk.bold.green('✨ Setup Complete!\n\n') +
package/scripts/cli/mappings.js ADDED
@@ -0,0 +1,211 @@
1
+ /**
2
+ * Atomix CLI - Migration Mappings
3
+ * Stores mappings for migrating from other frameworks to Atomix
4
+ */
5
+
6
+ /**
7
+ * Tailwind to Atomix mapping
8
+ */
9
+ export const tailwindToAtomix = {
10
+ // Layout
11
+ 'flex': 'c-flex',
12
+ 'grid': 'c-grid',
13
+ 'container': 'c-container',
14
+ 'hidden': 'u-hidden',
15
+ 'block': 'u-block',
16
+ 'inline-block': 'u-inline-block',
17
+ 'inline': 'u-inline',
18
+ 'items-center': 'u-items-center',
19
+ 'justify-center': 'u-justify-center',
20
+ 'justify-between': 'u-justify-between',
21
+ 'gap-1': 'u-gap-1',
22
+ 'gap-2': 'u-gap-2',
23
+ 'gap-4': 'u-gap-4',
24
+ 'flex-row': 'u-flex-row',
25
+ 'flex-col': 'u-flex-column',
26
+ // Spacing
27
+ 'p-0': 'u-p-0',
28
+ 'p-1': 'u-p-1',
29
+ 'p-2': 'u-p-2',
30
+ 'p-3': 'u-p-3',
31
+ 'p-4': 'u-p-4',
32
+ 'p-5': 'u-p-5',
33
+ 'p-6': 'u-p-6',
34
+ 'p-8': 'u-p-8',
35
+ 'px-6': 'u-px-6',
36
+ 'my-8': 'u-my-8',
37
+ 'space-x-4': 'u-space-x-4',
38
+ 'm-0': 'u-m-0',
39
+ 'm-1': 'u-m-1',
40
+ 'm-2': 'u-m-2',
41
+ 'm-3': 'u-m-3',
42
+ 'm-4': 'u-m-4',
43
+ 'm-auto': 'u-m-auto',
44
+ // Colors
45
+ 'text-gray-900': 'u-text-primary',
46
+ 'bg-blue-500': 'u-bg-primary',
47
+ 'border-red-600': 'u-border-error',
48
+ 'text-green-600': 'u-text-success',
49
+ // Typography
50
+ 'text-xs': 'u-text-xs',
51
+ 'text-sm': 'u-text-sm',
52
+ 'text-base': 'u-text-base',
53
+ 'text-lg': 'u-text-lg',
54
+ 'text-xl': 'u-text-xl',
55
+ 'text-2xl': 'u-text-2xl',
56
+ 'font-bold': 'u-font-bold',
57
+ 'font-semibold': 'u-font-semibold',
58
+ 'font-normal': 'u-font-normal',
59
+ 'leading-tight': 'u-line-tight',
60
+ 'tracking-wide': 'u-letter-wide',
61
+ // Border
62
+ 'border': 'u-border',
63
+ 'border-2': 'u-border-2',
64
+ 'rounded': 'u-radius',
65
+ 'rounded-md': 'u-radius-md',
66
+ 'rounded-lg': 'u-radius-lg',
67
+ 'rounded-full': 'u-radius-full',
68
+ };
69
+
70
+ /**
71
+ * Bootstrap to Atomix mapping
72
+ */
73
+ export const bootstrapToAtomix = {
74
+ // Components
75
+ 'btn': 'c-button',
76
+ 'btn-primary': 'c-button c-button--primary',
77
+ 'btn-secondary': 'c-button c-button--secondary',
78
+ 'btn-success': 'c-button c-button--success',
79
+ 'btn-danger': 'c-button c-button--error',
80
+ 'btn-warning': 'c-button c-button--warning',
81
+ 'btn-info': 'c-button c-button--info',
82
+ 'btn-lg': 'c-button c-button--lg',
83
+ 'btn-sm': 'c-button c-button--sm',
84
+
85
+ 'card': 'c-card',
86
+ 'card-header': 'c-card__header',
87
+ 'card-body': 'c-card__body',
88
+ 'card-footer': 'c-card__footer',
89
+ 'card-title': 'c-card__title',
90
+ 'card-text': 'c-card__text',
91
+
92
+ 'alert': 'c-alert',
93
+ 'alert-primary': 'c-alert c-alert--primary',
94
+ 'alert-success': 'c-alert c-alert--success',
95
+ 'alert-danger': 'c-alert c-alert--error',
96
+ 'alert-warning': 'c-alert c-alert--warning',
97
+
98
+ 'badge': 'c-badge',
99
+ 'badge-primary': 'c-badge c-badge--primary',
100
+ 'badge-secondary': 'c-badge c-badge--secondary',
101
+
102
+ 'form-control': 'c-input',
103
+ 'form-select': 'c-select',
104
+ 'form-check': 'c-checkbox',
105
+ 'form-check-input': 'c-checkbox',
106
+ 'form-label': 'c-label',
107
+
108
+ 'modal': 'c-modal',
109
+ 'modal-dialog': 'c-modal__dialog',
110
+ 'modal-content': 'c-modal__content',
111
+ 'modal-header': 'c-modal__header',
112
+ 'modal-body': 'c-modal__body',
113
+ 'modal-footer': 'c-modal__footer',
114
+
115
+ // Grid
116
+ 'container': 'c-container',
117
+ 'container-fluid': 'c-container c-container--fluid',
118
+ 'row': 'c-grid',
119
+ 'col': 'c-grid__item',
120
+ 'col-sm': 'c-grid__item',
121
+ 'col-md': 'c-grid__item',
122
+ 'col-lg': 'c-grid__item',
123
+ 'col-xl': 'c-grid__item',
124
+
125
+ // Utilities
126
+ 'd-none': 'u-hidden',
127
+ 'd-block': 'u-block',
128
+ 'd-inline': 'u-inline',
129
+ 'd-inline-block': 'u-inline-block',
130
+ 'd-flex': 'c-flex',
131
+ 'd-grid': 'c-grid',
132
+
133
+ 'text-center': 'u-text-center',
134
+ 'text-left': 'u-text-left',
135
+ 'text-right': 'u-text-right',
136
+ 'text-justify': 'u-text-justify',
137
+
138
+ 'text-primary': 'u-text-primary',
139
+ 'text-success': 'u-text-success',
140
+ 'text-danger': 'u-text-error',
141
+ 'text-warning': 'u-text-warning',
142
+ 'text-muted': 'u-text-muted',
143
+
144
+ 'bg-primary': 'u-bg-primary',
145
+ 'bg-success': 'u-bg-success',
146
+ 'bg-danger': 'u-bg-error',
147
+ 'bg-warning': 'u-bg-warning',
148
+
149
+ 'p-0': 'u-p-0',
150
+ 'p-1': 'u-p-1',
151
+ 'p-2': 'u-p-2',
152
+ 'p-3': 'u-p-3',
153
+ 'p-4': 'u-p-4',
154
+ 'p-5': 'u-p-5',
155
+
156
+ 'm-0': 'u-m-0',
157
+ 'm-1': 'u-m-1',
158
+ 'm-2': 'u-m-2',
159
+ 'm-3': 'u-m-3',
160
+ 'm-4': 'u-m-4',
161
+ 'm-5': 'u-m-5',
162
+ 'm-auto': 'u-m-auto',
163
+
164
+ 'rounded': 'u-radius',
165
+ 'rounded-circle': 'u-radius-full',
166
+ 'border': 'u-border',
167
+
168
+ 'w-25': 'u-w-25',
169
+ 'w-50': 'u-w-50',
170
+ 'w-75': 'u-w-75',
171
+ 'w-100': 'u-w-100',
172
+ 'h-25': 'u-h-25',
173
+ 'h-50': 'u-h-50',
174
+ 'h-75': 'u-h-75',
175
+ 'h-100': 'u-h-100'
176
+ };
177
+
178
+ /**
179
+ * SCSS Variable Migration
180
+ */
181
+ export const scssVariableMigration = {
182
+ // Colors
183
+ '$primary': 'var(--atomix-color-primary)',
184
+ '$secondary': 'var(--atomix-color-secondary)',
185
+ '$success': 'var(--atomix-color-success)',
186
+ '$danger': 'var(--atomix-color-error)',
187
+ '$warning': 'var(--atomix-color-warning)',
188
+ '$info': 'var(--atomix-color-info)',
189
+ '$light': 'var(--atomix-color-light)',
190
+ '$dark': 'var(--atomix-color-dark)',
191
+
192
+ // Spacing
193
+ '$spacer': 'var(--atomix-space-4)',
194
+ '$spacing-xs': 'var(--atomix-space-1)',
195
+ '$spacing-sm': 'var(--atomix-space-2)',
196
+ '$spacing-md': 'var(--atomix-space-4)',
197
+ '$spacing-lg': 'var(--atomix-space-6)',
198
+ '$spacing-xl': 'var(--atomix-space-8)',
199
+
200
+ // Typography
201
+ '$font-family-base': 'var(--atomix-font-family-base)',
202
+ '$font-size-base': 'var(--atomix-font-size-base)',
203
+ '$font-weight-normal': 'var(--atomix-font-weight-normal)',
204
+ '$font-weight-bold': 'var(--atomix-font-weight-bold)',
205
+ '$line-height-base': 'var(--atomix-line-height-base)',
206
+
207
+ // Border
208
+ '$border-radius': 'var(--atomix-radius-md)',
209
+ '$border-width': 'var(--atomix-border-width)',
210
+ '$border-color': 'var(--atomix-color-border)'
211
+ };