@shohojdhara/atomix 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (144) hide show
  1. package/CHANGELOG.md +0 -1
  2. package/README.md +3 -5
  3. package/dist/atomix.css +753 -643
  4. package/dist/atomix.min.css +3 -5
  5. package/dist/index.d.ts +3075 -247
  6. package/dist/index.esm.js +20412 -16601
  7. package/dist/index.esm.js.map +1 -1
  8. package/dist/index.js +20379 -16605
  9. package/dist/index.js.map +1 -1
  10. package/dist/index.min.js +1 -1
  11. package/dist/index.min.js.map +1 -1
  12. package/package.json +1 -11
  13. package/src/components/AtomixGlass/AtomixGlass.test.tsx +21 -32
  14. package/src/components/AtomixGlass/AtomixGlass.tsx +55 -42
  15. package/src/components/AtomixGlass/AtomixGlassContainer.tsx +205 -57
  16. package/src/components/AtomixGlass/GlassFilter.tsx +22 -8
  17. package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap +221 -0
  18. package/src/components/AtomixGlass/atomixGLass.old.tsx +0 -3
  19. package/src/components/AtomixGlass/shader-utils.ts +8 -0
  20. package/src/components/AtomixGlass/stories/AtomixGlass.stories.tsx +319 -100
  21. package/src/components/AtomixGlass/stories/Examples.stories.tsx +601 -105
  22. package/src/components/AtomixGlass/stories/Modes.stories.tsx +30 -12
  23. package/src/components/AtomixGlass/stories/Playground.stories.tsx +173 -38
  24. package/src/components/AtomixGlass/stories/ShaderVariants.stories.tsx +18 -18
  25. package/src/components/AtomixGlass/stories/shared-components.tsx +27 -5
  26. package/src/components/Button/Button.tsx +62 -17
  27. package/src/components/Callout/Callout.test.tsx +8 -14
  28. package/src/components/Card/Card.tsx +103 -1
  29. package/src/components/Card/index.ts +3 -2
  30. package/src/components/Icon/index.ts +1 -1
  31. package/src/components/Modal/Modal.stories.tsx +29 -38
  32. package/src/components/Modal/Modal.tsx +4 -4
  33. package/src/components/Navigation/SideMenu/SideMenu.tsx +49 -41
  34. package/src/components/Navigation/SideMenu/SideMenuItem.tsx +63 -24
  35. package/src/components/Popover/Popover.tsx +1 -1
  36. package/src/components/VideoPlayer/VideoPlayer.stories.tsx +977 -400
  37. package/src/components/VideoPlayer/VideoPlayer.tsx +1 -6
  38. package/src/lib/composables/shared-mouse-tracker.ts +133 -0
  39. package/src/lib/composables/useAtomixGlass.ts +333 -145
  40. package/src/lib/index.ts +1 -4
  41. package/src/lib/theme/composeTheme.ts +375 -0
  42. package/src/lib/theme/config/index.ts +21 -0
  43. package/src/lib/theme/config/loader.ts +276 -0
  44. package/src/lib/theme/config/types.ts +98 -0
  45. package/src/lib/theme/config/validator.ts +326 -0
  46. package/src/lib/theme/constants.ts +183 -0
  47. package/src/lib/theme/core/ThemeCache.ts +283 -0
  48. package/src/lib/theme/core/ThemeEngine.test.ts +146 -0
  49. package/src/lib/theme/core/ThemeEngine.ts +657 -0
  50. package/src/lib/theme/core/ThemeRegistry.ts +284 -0
  51. package/src/lib/theme/core/ThemeValidator.ts +530 -0
  52. package/src/lib/theme/core/index.ts +24 -0
  53. package/src/lib/theme/createTheme.ts +521 -0
  54. package/src/lib/theme/devtools/CLI.ts +279 -0
  55. package/src/lib/theme/devtools/Inspector.tsx +594 -0
  56. package/src/lib/theme/devtools/Preview.tsx +392 -0
  57. package/src/lib/theme/devtools/index.ts +21 -0
  58. package/src/lib/theme/errors.test.ts +207 -0
  59. package/src/lib/theme/errors.ts +233 -0
  60. package/src/lib/theme/generateCSSVariables.ts +797 -0
  61. package/src/lib/theme/generators/CSSGenerator.ts +311 -0
  62. package/src/lib/theme/generators/ConfigGenerator.ts +287 -0
  63. package/src/lib/theme/generators/TypeGenerator.ts +228 -0
  64. package/src/lib/theme/generators/index.ts +21 -0
  65. package/src/lib/theme/i18n/index.ts +9 -0
  66. package/src/lib/theme/i18n/rtl.ts +325 -0
  67. package/src/lib/theme/index.ts +221 -10
  68. package/src/lib/theme/monitoring/ThemeAnalytics.ts +409 -0
  69. package/src/lib/theme/monitoring/index.ts +17 -0
  70. package/src/lib/theme/overrides/ComponentOverrides.ts +243 -0
  71. package/src/lib/theme/overrides/index.ts +15 -0
  72. package/src/lib/theme/runtime/ThemeErrorBoundary.tsx +233 -0
  73. package/src/lib/theme/runtime/ThemeManager.test.ts +176 -0
  74. package/src/lib/theme/runtime/ThemeManager.ts +442 -0
  75. package/src/lib/theme/runtime/ThemeProvider.tsx +318 -0
  76. package/src/lib/theme/runtime/index.ts +17 -0
  77. package/src/lib/theme/runtime/useTheme.ts +52 -0
  78. package/src/lib/theme/studio/ThemeStudio.tsx +312 -0
  79. package/src/lib/theme/studio/index.ts +8 -0
  80. package/src/lib/theme/themeUtils.ts +333 -0
  81. package/src/lib/theme/types.ts +340 -9
  82. package/src/lib/theme/utils.ts +23 -22
  83. package/src/lib/theme/whitelabel/WhiteLabelManager.ts +364 -0
  84. package/src/lib/theme/whitelabel/index.ts +13 -0
  85. package/src/lib/types/components.ts +148 -59
  86. package/src/styles/01-settings/_index.scss +2 -2
  87. package/src/styles/01-settings/_settings.badge.scss +3 -3
  88. package/src/styles/01-settings/_settings.border-radius.scss +1 -1
  89. package/src/styles/01-settings/_settings.callout.scss +1 -1
  90. package/src/styles/01-settings/_settings.card.scss +1 -1
  91. package/src/styles/01-settings/{_settings.maps.scss → _settings.design-tokens.scss} +163 -49
  92. package/src/styles/01-settings/_settings.input.scss +1 -1
  93. package/src/styles/01-settings/_settings.modal.scss +1 -1
  94. package/src/styles/01-settings/_settings.navbar.scss +1 -1
  95. package/src/styles/01-settings/_settings.spacing.scss +14 -13
  96. package/src/styles/01-settings/_settings.upload.scss +1 -1
  97. package/src/styles/03-generic/_generic.root.scss +131 -50
  98. package/src/styles/05-objects/_objects.block.scss +1 -1
  99. package/src/styles/06-components/_components.atomix-glass.scss +20 -22
  100. package/src/styles/06-components/_components.badge.scss +2 -2
  101. package/src/styles/06-components/_components.button.scss +1 -1
  102. package/src/styles/06-components/_components.callout.scss +1 -1
  103. package/src/styles/06-components/_components.card.scss +74 -2
  104. package/src/styles/06-components/_components.chart.scss +3 -3
  105. package/src/styles/06-components/_components.dropdown.scss +6 -0
  106. package/src/styles/06-components/_components.footer.scss +1 -1
  107. package/src/styles/06-components/_components.list-group.scss +1 -1
  108. package/src/styles/06-components/_components.list.scss +1 -1
  109. package/src/styles/06-components/_components.menu.scss +1 -1
  110. package/src/styles/06-components/_components.messages.scss +1 -1
  111. package/src/styles/06-components/_components.modal.scss +7 -2
  112. package/src/styles/06-components/_components.navbar.scss +1 -1
  113. package/src/styles/06-components/_components.popover.scss +10 -0
  114. package/src/styles/06-components/_components.product-review.scss +1 -1
  115. package/src/styles/06-components/_components.progress.scss +1 -1
  116. package/src/styles/06-components/_components.rating.scss +1 -1
  117. package/src/styles/06-components/_components.spinner.scss +1 -1
  118. package/src/styles/99-utilities/_utilities.background.scss +1 -1
  119. package/src/styles/99-utilities/_utilities.border.scss +28 -59
  120. package/src/styles/99-utilities/_utilities.gradient.scss +12 -0
  121. package/src/styles/99-utilities/_utilities.link.scss +1 -1
  122. package/src/styles/99-utilities/_utilities.position.scss +8 -15
  123. package/src/styles/99-utilities/_utilities.scss +2 -0
  124. package/src/styles/99-utilities/_utilities.spacing.scss +76 -121
  125. package/src/styles/99-utilities/_utilities.text.scss +31 -50
  126. package/dist/themes/applemix.css +0 -15411
  127. package/dist/themes/applemix.min.css +0 -72
  128. package/dist/themes/boomdevs.css +0 -15001
  129. package/dist/themes/boomdevs.min.css +0 -405
  130. package/dist/themes/esrar.css +0 -17195
  131. package/dist/themes/esrar.min.css +0 -189
  132. package/dist/themes/flashtrade.css +0 -16408
  133. package/dist/themes/flashtrade.min.css +0 -192
  134. package/dist/themes/mashroom.css +0 -29900
  135. package/dist/themes/mashroom.min.css +0 -403
  136. package/dist/themes/shaj-default.css +0 -16024
  137. package/dist/themes/shaj-default.min.css +0 -500
  138. package/src/lib/theme/ThemeManager.stories.tsx +0 -472
  139. package/src/lib/theme/ThemeManager.test.ts +0 -186
  140. package/src/lib/theme/ThemeManager.ts +0 -501
  141. package/src/lib/theme/ThemeProvider.tsx +0 -227
  142. package/src/lib/theme/useTheme.test.tsx +0 -66
  143. package/src/lib/theme/useTheme.ts +0 -80
  144. package/src/lib/theme/utils.test.ts +0 -140
@@ -0,0 +1,279 @@
1
+ /**
2
+ * Theme CLI
3
+ *
4
+ * Command-line interface for theme management
5
+ */
6
+
7
+ import { generateConfigTemplate } from '../generators/ConfigGenerator';
8
+ import { generateCSS } from '../generators/CSSGenerator';
9
+ import { generateTypes } from '../generators/TypeGenerator';
10
+ import { loadThemeConfig } from '../config/loader';
11
+ import { validateConfig } from '../config/validator';
12
+
13
+ /**
14
+ * CLI command interface
15
+ */
16
+ export interface CLICommand {
17
+ name: string;
18
+ description: string;
19
+ options?: Record<string, string>;
20
+ handler: (args: string[], options: Record<string, any>) => Promise<void> | void;
21
+ }
22
+
23
+ /**
24
+ * Theme CLI
25
+ *
26
+ * Command-line interface for theme operations
27
+ */
28
+ export class ThemeCLI {
29
+ private commands: Map<string, CLICommand> = new Map();
30
+
31
+ constructor() {
32
+ this.registerDefaultCommands();
33
+ }
34
+
35
+ /**
36
+ * Register default commands
37
+ */
38
+ private registerDefaultCommands(): void {
39
+ this.register({
40
+ name: 'init',
41
+ description: 'Initialize theme configuration',
42
+ options: {
43
+ '--format': 'Output format (typescript, javascript, json)',
44
+ '--examples': 'Include example themes',
45
+ },
46
+ handler: this.handleInit.bind(this),
47
+ });
48
+
49
+ this.register({
50
+ name: 'validate',
51
+ description: 'Validate theme configuration',
52
+ handler: this.handleValidate.bind(this),
53
+ });
54
+
55
+ this.register({
56
+ name: 'build',
57
+ description: 'Build theme CSS files',
58
+ options: {
59
+ '--output': 'Output directory',
60
+ '--minify': 'Minify output',
61
+ },
62
+ handler: this.handleBuild.bind(this),
63
+ });
64
+
65
+ this.register({
66
+ name: 'types',
67
+ description: 'Generate TypeScript types',
68
+ options: {
69
+ '--output': 'Output file',
70
+ '--module': 'Module name',
71
+ },
72
+ handler: this.handleTypes.bind(this),
73
+ });
74
+
75
+ this.register({
76
+ name: 'help',
77
+ description: 'Show help information',
78
+ handler: this.handleHelp.bind(this),
79
+ });
80
+ }
81
+
82
+ /**
83
+ * Register a command
84
+ */
85
+ register(command: CLICommand): void {
86
+ this.commands.set(command.name, command);
87
+ }
88
+
89
+ /**
90
+ * Run CLI with arguments
91
+ */
92
+ async run(args: string[]): Promise<void> {
93
+ const [commandName, ...commandArgs] = args;
94
+
95
+ if (!commandName) {
96
+ this.handleHelp([], {});
97
+ return;
98
+ }
99
+
100
+ const command = this.commands.get(commandName);
101
+ if (!command) {
102
+ console.error(`Unknown command: ${commandName}`);
103
+ console.error('Run "atomix-theme help" for available commands');
104
+ process.exit(1);
105
+ }
106
+
107
+ try {
108
+ const { args: parsedArgs, options } = this.parseArgs(commandArgs);
109
+ await command.handler(parsedArgs, options);
110
+ } catch (error) {
111
+ console.error(`Error running command "${commandName}":`, error);
112
+ process.exit(1);
113
+ }
114
+ }
115
+
116
+ /**
117
+ * Parse command arguments
118
+ */
119
+ private parseArgs(args: string[]): { args: string[]; options: Record<string, any> } {
120
+ const parsedArgs: string[] = [];
121
+ const options: Record<string, any> = {};
122
+
123
+ for (let i = 0; i < args.length; i++) {
124
+ const arg = args[i];
125
+ if (arg?.startsWith('--')) {
126
+ const key = arg.slice(2);
127
+ const nextArg = args[i + 1];
128
+ if (nextArg && !nextArg.startsWith('--')) {
129
+ options[key] = nextArg;
130
+ i++; // Skip next argument
131
+ } else {
132
+ options[key] = true;
133
+ }
134
+ } else if (arg) {
135
+ parsedArgs.push(arg);
136
+ }
137
+ }
138
+
139
+ return { args: parsedArgs, options };
140
+ }
141
+
142
+ /**
143
+ * Handle init command
144
+ */
145
+ private handleInit(args: string[], options: Record<string, any>): void {
146
+ const format = options.format || 'typescript';
147
+ const includeExamples = options.examples !== false;
148
+
149
+ const config = generateConfigTemplate({
150
+ format: format as any,
151
+ includeExamples,
152
+ includeComments: true,
153
+ });
154
+
155
+ const filename = format === 'json' ? 'theme.config.json' :
156
+ format === 'javascript' ? 'theme.config.js' :
157
+ 'theme.config.ts';
158
+
159
+ console.log(`Generating ${filename}...`);
160
+ console.log(config);
161
+ console.log(`\\nTheme configuration template generated!`);
162
+ console.log(`Save this content to ${filename} in your project root.`);
163
+ }
164
+
165
+ /**
166
+ * Handle validate command
167
+ */
168
+ private handleValidate(args: string[], options: Record<string, any>): void {
169
+ try {
170
+ const config = loadThemeConfig();
171
+ const result = validateConfig(config);
172
+
173
+ if (result.valid) {
174
+ console.log('✅ Theme configuration is valid');
175
+ if (result.warnings.length > 0) {
176
+ console.log('\\n⚠️ Warnings:');
177
+ result.warnings.forEach(warning => console.log(` - ${warning}`));
178
+ }
179
+ } else {
180
+ console.log('❌ Theme configuration is invalid');
181
+ console.log('\\nErrors:');
182
+ result.errors.forEach(error => console.log(` - ${error}`));
183
+
184
+ if (result.warnings.length > 0) {
185
+ console.log('\\nWarnings:');
186
+ result.warnings.forEach(warning => console.log(` - ${warning}`));
187
+ }
188
+ process.exit(1);
189
+ }
190
+ } catch (error) {
191
+ console.error('Failed to load theme configuration:', error);
192
+ process.exit(1);
193
+ }
194
+ }
195
+
196
+ /**
197
+ * Handle build command
198
+ */
199
+ private handleBuild(args: string[], options: Record<string, any>): void {
200
+ console.log('Building themes...');
201
+ console.log('Note: This is a placeholder. Implement actual build logic based on your needs.');
202
+
203
+ try {
204
+ const config = loadThemeConfig();
205
+ console.log(`Found ${Object.keys(config.themes).length} themes to build`);
206
+
207
+ // This would typically:
208
+ // 1. Load each theme
209
+ // 2. Generate CSS for CSS themes
210
+ // 3. Execute createTheme for JS themes and generate CSS
211
+ // 4. Write files to output directory
212
+
213
+ console.log('✅ Build completed');
214
+ } catch (error) {
215
+ console.error('Build failed:', error);
216
+ process.exit(1);
217
+ }
218
+ }
219
+
220
+ /**
221
+ * Handle types command
222
+ */
223
+ private handleTypes(args: string[], options: Record<string, any>): void {
224
+ console.log('Generating TypeScript types...');
225
+ console.log('Note: This is a placeholder. Implement actual type generation logic.');
226
+
227
+ try {
228
+ const config = loadThemeConfig();
229
+ const moduleName = options.module || 'CustomTheme';
230
+
231
+ // This would typically:
232
+ // 1. Load themes
233
+ // 2. Generate TypeScript definitions
234
+ // 3. Write to output file
235
+
236
+ console.log(`Generated types for module: ${moduleName}`);
237
+ console.log('✅ Type generation completed');
238
+ } catch (error) {
239
+ console.error('Type generation failed:', error);
240
+ process.exit(1);
241
+ }
242
+ }
243
+
244
+ /**
245
+ * Handle help command
246
+ */
247
+ private handleHelp(args: string[], options: Record<string, any>): void {
248
+ console.log('Atomix Theme CLI\\n');
249
+ console.log('Usage: atomix-theme <command> [options]\\n');
250
+ console.log('Commands:');
251
+
252
+ for (const [name, command] of this.commands.entries()) {
253
+ console.log(` ${name.padEnd(12)} ${command.description}`);
254
+
255
+ if (command.options) {
256
+ for (const [option, description] of Object.entries(command.options)) {
257
+ console.log(` ${option.padEnd(16)} ${description}`);
258
+ }
259
+ }
260
+ console.log();
261
+ }
262
+ }
263
+ }
264
+
265
+ /**
266
+ * Create CLI instance
267
+ */
268
+ export function createCLI(): ThemeCLI {
269
+ return new ThemeCLI();
270
+ }
271
+
272
+ /**
273
+ * Run CLI with process arguments
274
+ */
275
+ export function runCLI(): void {
276
+ const cli = createCLI();
277
+ const args = process.argv.slice(2);
278
+ cli.run(args);
279
+ }