@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.
- package/CHANGELOG.md +0 -1
- package/README.md +3 -5
- package/dist/atomix.css +753 -643
- package/dist/atomix.min.css +3 -5
- package/dist/index.d.ts +3075 -247
- package/dist/index.esm.js +20412 -16601
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +20379 -16605
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -11
- package/src/components/AtomixGlass/AtomixGlass.test.tsx +21 -32
- package/src/components/AtomixGlass/AtomixGlass.tsx +55 -42
- package/src/components/AtomixGlass/AtomixGlassContainer.tsx +205 -57
- package/src/components/AtomixGlass/GlassFilter.tsx +22 -8
- package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap +221 -0
- package/src/components/AtomixGlass/atomixGLass.old.tsx +0 -3
- package/src/components/AtomixGlass/shader-utils.ts +8 -0
- package/src/components/AtomixGlass/stories/AtomixGlass.stories.tsx +319 -100
- package/src/components/AtomixGlass/stories/Examples.stories.tsx +601 -105
- package/src/components/AtomixGlass/stories/Modes.stories.tsx +30 -12
- package/src/components/AtomixGlass/stories/Playground.stories.tsx +173 -38
- package/src/components/AtomixGlass/stories/ShaderVariants.stories.tsx +18 -18
- package/src/components/AtomixGlass/stories/shared-components.tsx +27 -5
- package/src/components/Button/Button.tsx +62 -17
- package/src/components/Callout/Callout.test.tsx +8 -14
- package/src/components/Card/Card.tsx +103 -1
- package/src/components/Card/index.ts +3 -2
- package/src/components/Icon/index.ts +1 -1
- package/src/components/Modal/Modal.stories.tsx +29 -38
- package/src/components/Modal/Modal.tsx +4 -4
- package/src/components/Navigation/SideMenu/SideMenu.tsx +49 -41
- package/src/components/Navigation/SideMenu/SideMenuItem.tsx +63 -24
- package/src/components/Popover/Popover.tsx +1 -1
- package/src/components/VideoPlayer/VideoPlayer.stories.tsx +977 -400
- package/src/components/VideoPlayer/VideoPlayer.tsx +1 -6
- package/src/lib/composables/shared-mouse-tracker.ts +133 -0
- package/src/lib/composables/useAtomixGlass.ts +333 -145
- package/src/lib/index.ts +1 -4
- package/src/lib/theme/composeTheme.ts +375 -0
- package/src/lib/theme/config/index.ts +21 -0
- package/src/lib/theme/config/loader.ts +276 -0
- package/src/lib/theme/config/types.ts +98 -0
- package/src/lib/theme/config/validator.ts +326 -0
- package/src/lib/theme/constants.ts +183 -0
- package/src/lib/theme/core/ThemeCache.ts +283 -0
- package/src/lib/theme/core/ThemeEngine.test.ts +146 -0
- package/src/lib/theme/core/ThemeEngine.ts +657 -0
- package/src/lib/theme/core/ThemeRegistry.ts +284 -0
- package/src/lib/theme/core/ThemeValidator.ts +530 -0
- package/src/lib/theme/core/index.ts +24 -0
- package/src/lib/theme/createTheme.ts +521 -0
- package/src/lib/theme/devtools/CLI.ts +279 -0
- package/src/lib/theme/devtools/Inspector.tsx +594 -0
- package/src/lib/theme/devtools/Preview.tsx +392 -0
- package/src/lib/theme/devtools/index.ts +21 -0
- package/src/lib/theme/errors.test.ts +207 -0
- package/src/lib/theme/errors.ts +233 -0
- package/src/lib/theme/generateCSSVariables.ts +797 -0
- package/src/lib/theme/generators/CSSGenerator.ts +311 -0
- package/src/lib/theme/generators/ConfigGenerator.ts +287 -0
- package/src/lib/theme/generators/TypeGenerator.ts +228 -0
- package/src/lib/theme/generators/index.ts +21 -0
- package/src/lib/theme/i18n/index.ts +9 -0
- package/src/lib/theme/i18n/rtl.ts +325 -0
- package/src/lib/theme/index.ts +221 -10
- package/src/lib/theme/monitoring/ThemeAnalytics.ts +409 -0
- package/src/lib/theme/monitoring/index.ts +17 -0
- package/src/lib/theme/overrides/ComponentOverrides.ts +243 -0
- package/src/lib/theme/overrides/index.ts +15 -0
- package/src/lib/theme/runtime/ThemeErrorBoundary.tsx +233 -0
- package/src/lib/theme/runtime/ThemeManager.test.ts +176 -0
- package/src/lib/theme/runtime/ThemeManager.ts +442 -0
- package/src/lib/theme/runtime/ThemeProvider.tsx +318 -0
- package/src/lib/theme/runtime/index.ts +17 -0
- package/src/lib/theme/runtime/useTheme.ts +52 -0
- package/src/lib/theme/studio/ThemeStudio.tsx +312 -0
- package/src/lib/theme/studio/index.ts +8 -0
- package/src/lib/theme/themeUtils.ts +333 -0
- package/src/lib/theme/types.ts +340 -9
- package/src/lib/theme/utils.ts +23 -22
- package/src/lib/theme/whitelabel/WhiteLabelManager.ts +364 -0
- package/src/lib/theme/whitelabel/index.ts +13 -0
- package/src/lib/types/components.ts +148 -59
- package/src/styles/01-settings/_index.scss +2 -2
- package/src/styles/01-settings/_settings.badge.scss +3 -3
- package/src/styles/01-settings/_settings.border-radius.scss +1 -1
- package/src/styles/01-settings/_settings.callout.scss +1 -1
- package/src/styles/01-settings/_settings.card.scss +1 -1
- package/src/styles/01-settings/{_settings.maps.scss → _settings.design-tokens.scss} +163 -49
- package/src/styles/01-settings/_settings.input.scss +1 -1
- package/src/styles/01-settings/_settings.modal.scss +1 -1
- package/src/styles/01-settings/_settings.navbar.scss +1 -1
- package/src/styles/01-settings/_settings.spacing.scss +14 -13
- package/src/styles/01-settings/_settings.upload.scss +1 -1
- package/src/styles/03-generic/_generic.root.scss +131 -50
- package/src/styles/05-objects/_objects.block.scss +1 -1
- package/src/styles/06-components/_components.atomix-glass.scss +20 -22
- package/src/styles/06-components/_components.badge.scss +2 -2
- package/src/styles/06-components/_components.button.scss +1 -1
- package/src/styles/06-components/_components.callout.scss +1 -1
- package/src/styles/06-components/_components.card.scss +74 -2
- package/src/styles/06-components/_components.chart.scss +3 -3
- package/src/styles/06-components/_components.dropdown.scss +6 -0
- package/src/styles/06-components/_components.footer.scss +1 -1
- package/src/styles/06-components/_components.list-group.scss +1 -1
- package/src/styles/06-components/_components.list.scss +1 -1
- package/src/styles/06-components/_components.menu.scss +1 -1
- package/src/styles/06-components/_components.messages.scss +1 -1
- package/src/styles/06-components/_components.modal.scss +7 -2
- package/src/styles/06-components/_components.navbar.scss +1 -1
- package/src/styles/06-components/_components.popover.scss +10 -0
- package/src/styles/06-components/_components.product-review.scss +1 -1
- package/src/styles/06-components/_components.progress.scss +1 -1
- package/src/styles/06-components/_components.rating.scss +1 -1
- package/src/styles/06-components/_components.spinner.scss +1 -1
- package/src/styles/99-utilities/_utilities.background.scss +1 -1
- package/src/styles/99-utilities/_utilities.border.scss +28 -59
- package/src/styles/99-utilities/_utilities.gradient.scss +12 -0
- package/src/styles/99-utilities/_utilities.link.scss +1 -1
- package/src/styles/99-utilities/_utilities.position.scss +8 -15
- package/src/styles/99-utilities/_utilities.scss +2 -0
- package/src/styles/99-utilities/_utilities.spacing.scss +76 -121
- package/src/styles/99-utilities/_utilities.text.scss +31 -50
- package/dist/themes/applemix.css +0 -15411
- package/dist/themes/applemix.min.css +0 -72
- package/dist/themes/boomdevs.css +0 -15001
- package/dist/themes/boomdevs.min.css +0 -405
- package/dist/themes/esrar.css +0 -17195
- package/dist/themes/esrar.min.css +0 -189
- package/dist/themes/flashtrade.css +0 -16408
- package/dist/themes/flashtrade.min.css +0 -192
- package/dist/themes/mashroom.css +0 -29900
- package/dist/themes/mashroom.min.css +0 -403
- package/dist/themes/shaj-default.css +0 -16024
- package/dist/themes/shaj-default.min.css +0 -500
- package/src/lib/theme/ThemeManager.stories.tsx +0 -472
- package/src/lib/theme/ThemeManager.test.ts +0 -186
- package/src/lib/theme/ThemeManager.ts +0 -501
- package/src/lib/theme/ThemeProvider.tsx +0 -227
- package/src/lib/theme/useTheme.test.tsx +0 -66
- package/src/lib/theme/useTheme.ts +0 -80
- 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
|
+
}
|