@shohojdhara/atomix 0.3.1 → 0.3.3

package/src/lib/theme/generators/ConfigGenerator.ts

@@ -0,0 +1,287 @@
+/**
+ * Configuration Generator
+ * 
+ * Generates theme configuration templates and scaffolding
+ */
+
+import type { ThemeConfig, ThemeDefinition } from '../config/types';
+
+/**
+ * Config generation options
+ */
+export interface ConfigGeneratorOptions {
+  /** Include example themes */
+  includeExamples?: boolean;
+  /** Include comments and documentation */
+  includeComments?: boolean;
+  /** Output format */
+  format?: 'typescript' | 'javascript' | 'json';
+  /** Include build configuration */
+  includeBuild?: boolean;
+  /** Include runtime configuration */
+  includeRuntime?: boolean;
+}
+
+/**
+ * Configuration Generator
+ * 
+ * Generates theme configuration files and templates
+ */
+export class ConfigGenerator {
+  private options: Required<ConfigGeneratorOptions>;
+
+  constructor(options: ConfigGeneratorOptions = {}) {
+    this.options = {
+      includeExamples: options.includeExamples ?? true,
+      includeComments: options.includeComments ?? true,
+      format: options.format || 'typescript',
+      includeBuild: options.includeBuild ?? true,
+      includeRuntime: options.includeRuntime ?? true,
+    };
+  }
+
+  /**
+   * Generate configuration template
+   */
+  generate(): string {
+    let output = '';
+
+    if (this.options.includeComments) {
+      output += this.generateHeader();
+    }
+
+    if (this.options.format === 'typescript') {
+      output += this.generateTypeScriptImports();
+    }
+
+    output += this.generateConfigObject();
+
+    if (this.options.format === 'typescript') {
+      output += this.generateTypeScriptExport();
+    }
+
+    return output;
+  }
+
+  /**
+   * Generate file header
+   */
+  private generateHeader(): string {
+    const comment = this.options.format === 'json' ? '' : '//';
+    return `${this.options.format === 'json' ? '' : '/**\n * Atomix Theme Configuration\n * \n * Configure themes, build settings, and runtime behavior\n */\n\n'}`;
+  }
+
+  /**
+   * Generate TypeScript imports
+   */
+  private generateTypeScriptImports(): string {
+    return `import type { ThemeConfig } from '@shohojdhara/atomix/theme/config';
+import { createTheme } from '@shohojdhara/atomix/theme';
+
+`;
+  }
+
+  /**
+   * Generate configuration object
+   */
+  private generateConfigObject(): string {
+    const isTS = this.options.format === 'typescript';
+    const isJSON = this.options.format === 'json';
+    
+    let output = '';
+    
+    if (isTS) {
+      output += 'const config: ThemeConfig = {\n';
+    } else if (!isJSON) {
+      output += 'const config = {\n';
+    } else {
+      output += '{\n';
+    }
+
+    // Themes
+    output += '  themes: {\n';
+    
+    if (this.options.includeExamples) {
+      output += this.generateExampleThemes();
+    } else {
+      if (this.options.includeComments && !isJSON) {
+        output += '    // Add your themes here\n';
+      }
+    }
+    
+    output += '  },\n\n';
+
+    // Build configuration
+    if (this.options.includeBuild) {
+      output += this.generateBuildConfig();
+    }
+
+    // Runtime configuration
+    if (this.options.includeRuntime) {
+      output += this.generateRuntimeConfig();
+    }
+
+    // Integration configuration
+    output += this.generateIntegrationConfig();
+
+    output += '};\n\n';
+
+    return output;
+  }
+
+  /**
+   * Generate example themes
+   */
+  private generateExampleThemes(): string {
+    const isJSON = this.options.format === 'json';
+    let output = '';
+
+    if (this.options.includeComments && !isJSON) {
+      output += '    // CSS Theme Example\n';
+    }
+
+    output += `    'my-theme': {
+      type: 'css',
+      name: 'My Theme',
+      description: 'A custom theme for my application',
+      author: 'Your Name',
+      version: '1.0.0',
+      tags: ['custom', 'light'],
+      supportsDarkMode: true,
+      status: 'stable',
+      color: '#7AFFD7',
+    },\n\n`;
+
+    if (this.options.includeComments && !isJSON) {
+      output += '    // JS Theme Example\n';
+    }
+
+    if (this.options.format === 'typescript') {
+      output += `    'my-js-theme': {
+      type: 'js',
+      name: 'My JS Theme',
+      description: 'A programmatically created theme',
+      author: 'Your Name',
+      version: '1.0.0',
+      tags: ['custom', 'js'],
+      status: 'experimental',
+      createTheme: () => createTheme({
+        name: 'My JS Theme',
+        palette: {
+          primary: { main: '#7AFFD7' },
+          secondary: { main: '#FF5733' },
+        },
+        typography: {
+          fontFamily: 'Inter, sans-serif',
+        },
+      }),
+    },\n\n`;
+    }
+
+    return output;
+  }
+
+  /**
+   * Generate build configuration
+   */
+  private generateBuildConfig(): string {
+    const isJSON = this.options.format === 'json';
+    let output = '';
+
+    if (this.options.includeComments && !isJSON) {
+      output += '  // Build configuration\n';
+    }
+
+    output += `  build: {
+    output: {
+      directory: 'themes',
+      formats: {
+        expanded: '.css',
+        compressed: '.min.css',
+      },
+    },
+    sass: {
+      style: 'expanded',
+      sourceMap: true,
+      loadPaths: ['src'],
+    },
+  },
+
+`;
+
+    return output;
+  }
+
+  /**
+   * Generate runtime configuration
+   */
+  private generateRuntimeConfig(): string {
+    const isJSON = this.options.format === 'json';
+    let output = '';
+
+    if (this.options.includeComments && !isJSON) {
+      output += '  // Runtime configuration\n';
+    }
+
+    output += `  runtime: {
+    basePath: '/themes',
+    cdnPath: null,
+    preload: ['my-theme'],
+    lazy: true,
+    defaultTheme: 'my-theme',
+    storageKey: 'atomix-theme',
+    dataAttribute: 'data-theme',
+    enablePersistence: true,
+    useMinified: process.env.NODE_ENV === 'production',
+  },
+
+`;
+
+    return output;
+  }
+
+  /**
+   * Generate integration configuration
+   */
+  private generateIntegrationConfig(): string {
+    const isJSON = this.options.format === 'json';
+    let output = '';
+
+    if (this.options.includeComments && !isJSON) {
+      output += '  // Integration configuration\n';
+    }
+
+    output += `  integration: {
+    cssVariables: {
+      colorMode: '--color-mode',
+    },
+    classNames: {
+      theme: 'data-theme',
+      colorMode: 'data-color-mode',
+    },
+  },
+
+`;
+
+    return output;
+  }
+
+  /**
+   * Generate TypeScript export
+   */
+  private generateTypeScriptExport(): string {
+    return `export default config;
+`;
+  }
+}
+
+/**
+ * Generate configuration template
+ * 
+ * @param options - Generation options
+ * @returns Configuration template string
+ */
+export function generateConfigTemplate(options: ConfigGeneratorOptions = {}): string {
+  const generator = new ConfigGenerator(options);
+  return generator.generate();
+}

package/src/lib/theme/generators/TypeGenerator.ts

@@ -0,0 +1,228 @@
+/**
+ * TypeScript Type Generator
+ * 
+ * Generates TypeScript type definitions from theme objects
+ */
+
+import type { Theme } from '../types';
+
+/**
+ * Type generation options
+ */
+export interface TypeGeneratorOptions {
+  /** Module name for generated types */
+  moduleName?: string;
+  /** Include JSDoc comments */
+  includeComments?: boolean;
+  /** Export style */
+  exportStyle?: 'named' | 'default' | 'both';
+  /** Include theme interface augmentation */
+  includeAugmentation?: boolean;
+}
+
+/**
+ * TypeScript Type Generator
+ * 
+ * Generates TypeScript definitions for theme objects
+ */
+export class TypeGenerator {
+  private options: Required<TypeGeneratorOptions>;
+
+  constructor(options: TypeGeneratorOptions = {}) {
+    this.options = {
+      moduleName: options.moduleName || 'Theme',
+      includeComments: options.includeComments ?? true,
+      exportStyle: options.exportStyle || 'named',
+      includeAugmentation: options.includeAugmentation ?? false,
+    };
+  }
+
+  /**
+   * Generate TypeScript definitions from theme
+   */
+  generate(theme: Theme): string {
+    let output = '';
+
+    if (this.options.includeComments) {
+      output += this.generateHeader();
+    }
+
+    output += this.generateImports();
+    output += this.generateThemeInterface(theme);
+
+    if (this.options.includeAugmentation) {
+      output += this.generateAugmentation();
+    }
+
+    return output;
+  }
+
+  /**
+   * Generate file header
+   */
+  private generateHeader(): string {
+    return `/**
+ * Generated Theme Types
+ * 
+ * Auto-generated TypeScript definitions for ${this.options.moduleName}
+ * Do not edit this file directly.
+ */
+
+`;
+  }
+
+  /**
+   * Generate imports
+   */
+  private generateImports(): string {
+    return `import type { Theme as BaseTheme } from '@shohojdhara/atomix/theme';
+
+`;
+  }
+
+  /**
+   * Generate theme interface
+   */
+  private generateThemeInterface(theme: Theme): string {
+    let output = '';
+
+    if (this.options.includeComments) {
+      output += `/**
+ * ${theme.name || 'Custom'} Theme Interface
+ */
+`;
+    }
+
+    output += `export interface ${this.options.moduleName} extends BaseTheme {\n`;
+    output += `  name: '${theme.name}';\n`;
+    
+    if (theme.class) {
+      output += `  class: '${theme.class}';\n`;
+    }
+
+    // Generate palette types
+    output += this.generatePaletteTypes(theme.palette);
+
+    // Generate typography types
+    output += this.generateTypographyTypes(theme.typography);
+
+    // Generate custom properties if any
+    if (Object.keys(theme.custom).length > 0) {
+      output += this.generateCustomTypes(theme.custom);
+    }
+
+    output += '}\n\n';
+
+    // Generate exports
+    if (this.options.exportStyle === 'default' || this.options.exportStyle === 'both') {
+      output += `declare const theme: ${this.options.moduleName};\n`;
+      output += `export default theme;\n\n`;
+    }
+
+    if (this.options.exportStyle === 'named' || this.options.exportStyle === 'both') {
+      output += `export type { ${this.options.moduleName} };\n`;
+    }
+
+    return output;
+  }
+
+  /**
+   * Generate palette types
+   */
+  private generatePaletteTypes(palette: Theme['palette']): string {
+    let output = '  palette: {\n';
+
+    const colors = ['primary', 'secondary', 'error', 'warning', 'info', 'success'] as const;
+    for (const color of colors) {
+      const colorObj = palette[color];
+      if (colorObj) {
+        output += `    ${color}: {\n`;
+        output += `      main: '${colorObj.main}';\n`;
+        if (colorObj.light) output += `      light: '${colorObj.light}';\n`;
+        if (colorObj.dark) output += `      dark: '${colorObj.dark}';\n`;
+        if (colorObj.contrastText) output += `      contrastText: '${colorObj.contrastText}';\n`;
+        output += '    };\n';
+      }
+    }
+
+    // Background
+    if (palette.background) {
+      output += '    background: {\n';
+      output += `      default: '${palette.background.default}';\n`;
+      output += `      paper: '${palette.background.paper}';\n`;
+      output += `      subtle: '${palette.background.subtle}';\n`;
+      output += '    };\n';
+    }
+
+    // Text
+    if (palette.text) {
+      output += '    text: {\n';
+      output += `      primary: '${palette.text.primary}';\n`;
+      output += `      secondary: '${palette.text.secondary}';\n`;
+      output += `      disabled: '${palette.text.disabled}';\n`;
+      output += '    };\n';
+    }
+
+    output += '  };\n';
+    return output;
+  }
+
+  /**
+   * Generate typography types
+   */
+  private generateTypographyTypes(typography: Theme['typography']): string {
+    let output = '  typography: {\n';
+    output += `    fontFamily: '${typography.fontFamily}';\n`;
+    output += `    fontSize: ${typography.fontSize};\n`;
+
+    // Font weights
+    if (typography.fontWeightLight) output += `    fontWeightLight: ${typography.fontWeightLight};\n`;
+    if (typography.fontWeightRegular) output += `    fontWeightRegular: ${typography.fontWeightRegular};\n`;
+    if (typography.fontWeightMedium) output += `    fontWeightMedium: ${typography.fontWeightMedium};\n`;
+    if (typography.fontWeightSemiBold) output += `    fontWeightSemiBold: ${typography.fontWeightSemiBold};\n`;
+    if (typography.fontWeightBold) output += `    fontWeightBold: ${typography.fontWeightBold};\n`;
+
+    output += '  };\n';
+    return output;
+  }
+
+  /**
+   * Generate custom property types
+   */
+  private generateCustomTypes(custom: Theme['custom']): string {
+    let output = '  custom: {\n';
+
+    for (const [key, value] of Object.entries(custom)) {
+      const type = typeof value === 'string' ? `'${value}'` : typeof value;
+      output += `    ${key}: ${type};\n`;
+    }
+
+    output += '  };\n';
+    return output;
+  }
+
+  /**
+   * Generate module augmentation
+   */
+  private generateAugmentation(): string {
+    return `
+declare module '@shohojdhara/atomix/theme' {
+  interface ThemeCustomProperties {
+    ${this.options.moduleName}: ${this.options.moduleName};
+  }
+}
+`;
+  }
+}
+
+/**
+ * Generate TypeScript types from theme
+ * 
+ * @param theme - Theme object
+ * @param options - Generation options
+ * @returns TypeScript definition string
+ */
+export function generateTypes(theme: Theme, options: TypeGeneratorOptions = {}): string {
+  const generator = new TypeGenerator(options);
+  return generator.generate(theme);
+}

package/src/lib/theme/generators/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Theme Generators Module
+ * 
+ * Code generation utilities for themes
+ */
+
+export { CSSGenerator, generateCSS } from './CSSGenerator';
+export { TypeGenerator, generateTypes } from './TypeGenerator';
+export { ConfigGenerator, generateConfigTemplate } from './ConfigGenerator';
+
+export type {
+  CSSGeneratorOptions,
+} from './CSSGenerator';
+
+export type {
+  TypeGeneratorOptions,
+} from './TypeGenerator';
+
+export type {
+  ConfigGeneratorOptions,
+} from './ConfigGenerator';

package/src/lib/theme/i18n/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Internationalization (i18n) Module
+ * 
+ * Provides internationalization utilities for the theme system
+ */
+
+export * from './rtl';
+export { RTLManager, createRTLManager, isRTLLocale, getDirectionFromLocale, rtlCSS } from './rtl';
+export type { RTLConfig } from './rtl';