@shohojdhara/atomix 0.3.4 → 0.3.6

package/scripts/build-themes.js

@@ -1,208 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Build script for Atomix themes
- * 
- * This script compiles all theme SCSS files to CSS
- * and generates both expanded and minified versions.
- */
-
-import { readdir, mkdir, access } from 'fs/promises';
-import { join, basename } from 'path';
-import * as sass from 'sass';
-import postcss from 'postcss';
-import autoprefixer from 'autoprefixer';
-import cssnano from 'cssnano';
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-// Configuration
-const THEMES_DIR = join(__dirname, '../src/themes');
-const OUTPUT_DIR = join(__dirname, '../dist/themes');
-const EXCLUDE_FILES = ['README.md', 'THEME_CHECKLIST.md', 'themes.config.js'];
-
-/**
- * Ensure output directory exists
- */
-async function ensureOutputDir() {
-  try {
-    await access(OUTPUT_DIR);
-  } catch {
-    await mkdir(OUTPUT_DIR, { recursive: true });
-    console.log(`✅ Created output directory: ${OUTPUT_DIR}`);
-  }
-}
-
-/**
- * Get list of themes to build
- */
-async function getThemes() {
-  const entries = await readdir(THEMES_DIR, { withFileTypes: true });
-  const themes = entries
-    .filter(entry => entry.isDirectory())
-    .map(entry => entry.name);
-  
-  console.log(`📦 Found ${themes.length} themes: ${themes.join(', ')}`);
-  return themes;
-}
-
-/**
- * Check if theme has an index.scss file
- */
-async function hasIndexScss(themeName) {
-  try {
-    await access(join(THEMES_DIR, themeName, 'index.scss'));
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Build a single theme
- */
-async function buildTheme(themeName) {
-  const indexPath = join(THEMES_DIR, themeName, 'index.scss');
-  
-  // Check if index.scss exists
-  if (!(await hasIndexScss(themeName))) {
-    console.log(`⚠️  Skipping ${themeName}: No index.scss found`);
-    return;
-  }
-
-  console.log(`🔨 Building theme: ${themeName}`);
-
-  try {
-    // Compile SCSS
-    const result = sass.compile(indexPath, {
-      loadPaths: [
-        join(__dirname, '../src'),
-        join(__dirname, '../src/styles'),
-        join(__dirname, '../node_modules'),
-      ],
-      sourceMap: true,
-      style: 'expanded',
-    });
-
-    // Process with PostCSS (autoprefixer)
-    const processed = await postcss([
-      autoprefixer({
-        overrideBrowserslist: ['> 1%', 'last 2 versions', 'not dead'],
-      }),
-    ]).process(result.css, {
-      from: indexPath,
-      to: join(OUTPUT_DIR, `${themeName}.css`),
-      map: { inline: false },
-    });
-
-    // Write expanded CSS
-    const { writeFile } = await import('fs/promises');
-    await writeFile(
-      join(OUTPUT_DIR, `${themeName}.css`),
-      processed.css,
-      'utf8'
-    );
-    
-    // Write source map if available
-    if (processed.map) {
-      await writeFile(
-        join(OUTPUT_DIR, `${themeName}.css.map`),
-        processed.map.toString(),
-        'utf8'
-      );
-    }
-
-    console.log(`  ✅ Generated ${themeName}.css`);
-
-    // Create minified version
-    const minified = await postcss([
-      autoprefixer({
-        overrideBrowserslist: ['> 1%', 'last 2 versions', 'not dead'],
-      }),
-      cssnano({
-        preset: 'default',
-      }),
-    ]).process(result.css, {
-      from: indexPath,
-      to: join(OUTPUT_DIR, `${themeName}.min.css`),
-    });
-
-    await writeFile(
-      join(OUTPUT_DIR, `${themeName}.min.css`),
-      minified.css,
-      'utf8'
-    );
-
-    console.log(`  ✅ Generated ${themeName}.min.css`);
-
-    return {
-      theme: themeName,
-      success: true,
-      files: [
-        `${themeName}.css`,
-        `${themeName}.min.css`,
-      ],
-    };
-  } catch (error) {
-    console.error(`  ❌ Failed to build ${themeName}:`, error.message);
-    return {
-      theme: themeName,
-      success: false,
-      error: error.message,
-    };
-  }
-}
-
-/**
- * Build all themes
- */
-async function buildAllThemes() {
-  console.log('🚀 Starting theme build process...\n');
-
-  // Ensure output directory exists
-  await ensureOutputDir();
-
-  // Get list of themes
-  const themes = await getThemes();
-
-  // Build each theme
-  const results = [];
-  for (const theme of themes) {
-    const result = await buildTheme(theme);
-    results.push(result);
-    console.log(''); // Add spacing between themes
-  }
-
-  // Summary
-  console.log('📊 Build Summary:');
-  const successful = results.filter(r => r?.success).length;
-  const failed = results.filter(r => r && !r.success).length;
-  const skipped = results.filter(r => !r).length;
-
-  console.log(`  ✅ Successful: ${successful}`);
-  if (failed > 0) {
-    console.log(`  ❌ Failed: ${failed}`);
-    results.filter(r => r && !r.success).forEach(r => {
-      console.log(`    - ${r.theme}: ${r.error}`);
-    });
-  }
-  if (skipped > 0) {
-    console.log(`  ⚠️  Skipped: ${skipped}`);
-  }
-
-  console.log('\n✨ Theme build complete!');
-
-  // Exit with error code if any builds failed
-  if (failed > 0) {
-    process.exit(1);
-  }
-}
-
-// Run the build
-buildAllThemes().catch(error => {
-  console.error('💥 Build failed:', error);
-  process.exit(1);
-});

package/scripts/sync-theme-config.js

@@ -1,309 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Sync Theme Configuration
- * 
- * This script generates src/themes/themes.config.js from theme.config.ts
- * to maintain a single source of truth for theme configuration.
- */
-
-import { readFile, writeFile } from 'fs/promises';
-import { join, dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-// File paths
-const THEME_CONFIG_TS = join(__dirname, '../theme.config.ts');
-const THEMES_CONFIG_JS = join(__dirname, '../src/themes/themes.config.js');
-
-/**
- * Parse theme.config.ts to extract configuration
- * Note: This is a simplified parser that works with the current structure
- */
-async function parseThemeConfigTS() {
-  try {
-    const content = await readFile(THEME_CONFIG_TS, 'utf8');
-
-    // Extract themes object
-    const themesMatch = content.match(/themes:\s*{([^}]+(?:{[^}]*}[^}]*)*[^}]+)}/s);
-    if (!themesMatch) {
-      throw new Error('Could not find themes configuration');
-    }
-
-    // Extract individual theme configurations
-    const themes = {};
-    const themeRegex = /['"]([^'"]+)['"]\s*:\s*{([^}]+(?:{[^}]*}[^}]*)*[^}]+)}/gs;
-    let match;
-
-    while ((match = themeRegex.exec(themesMatch[1])) !== null) {
-      const [, themeName, themeConfig] = match;
-
-      // Parse theme properties
-      const theme = {
-        name: extractValue(themeConfig, 'name'),
-        description: extractValue(themeConfig, 'description'),
-        author: extractValue(themeConfig, 'author'),
-        version: extractValue(themeConfig, 'version'),
-        tags: extractArray(themeConfig, 'tags'),
-        supportsDarkMode: extractBoolean(themeConfig, 'supportsDarkMode'),
-        status: extractValue(themeConfig, 'status'),
-        color: extractValue(themeConfig, 'color'),
-      };
-
-      // Parse features if present
-      const featuresMatch = themeConfig.match(/features:\s*\[([^\]]*)\]/s);
-      if (featuresMatch) {
-        theme.features = featuresMatch[1]
-          .split(',')
-          .map(f => f.trim().replace(/['"]/g, ''))
-          .filter(f => f.length > 0);
-      }
-
-      // Parse a11y if present
-      const a11yMatch = themeConfig.match(/a11y:\s*{([^}]*)}/);
-      if (a11yMatch) {
-        theme.a11y = {
-          contrastTarget: extractNumber(a11yMatch[1], 'contrastTarget'),
-          modes: extractArray(a11yMatch[1], 'modes'),
-        };
-      }
-
-      themes[themeName] = theme;
-    }
-
-    // Extract build configuration
-    const buildMatch = content.match(/build:\s*(defaultBuildConfig|{[^}]+})/);
-    const build = buildMatch && buildMatch[1] === 'defaultBuildConfig'
-      ? getDefaultBuildConfig()
-      : parseBuildConfig(buildMatch?.[1]);
-
-    // Extract runtime configuration  
-    const runtimeMatch = content.match(/runtime:\s*(defaultRuntimeConfig|{[^}]+})/);
-    const runtime = runtimeMatch && runtimeMatch[1] === 'defaultRuntimeConfig'
-      ? getDefaultRuntimeConfig()
-      : parseRuntimeConfig(runtimeMatch?.[1]);
-
-    // Extract integration configuration
-    const integrationMatch = content.match(/integration:\s*(defaultIntegrationConfig|{[^}]+})/);
-    const integration = integrationMatch && integrationMatch[1] === 'defaultIntegrationConfig'
-      ? getDefaultIntegrationConfig()
-      : parseIntegrationConfig(integrationMatch?.[1]);
-
-    return {
-      themes,
-      build,
-      runtime,
-      integration,
-      dependencies: {},
-    };
-  } catch (error) {
-    console.error('❌ Failed to parse theme.config.ts:', error.message);
-    throw error;
-  }
-}
-
-/**
- * Helper function to extract string values
- */
-function extractValue(text, key) {
-  const regex = new RegExp(`${key}:\\s*['"]([^'"]+)['"]`);
-  const match = text.match(regex);
-  return match ? match[1] : undefined;
-}
-
-/**
- * Helper function to extract number values
- */
-function extractNumber(text, key) {
-  const regex = new RegExp(`${key}:\\s*(\\d+(?:\\.\\d+)?)`);
-  const match = text.match(regex);
-  return match ? parseFloat(match[1]) : undefined;
-}
-
-/**
- * Helper function to extract boolean values
- */
-function extractBoolean(text, key) {
-  const regex = new RegExp(`${key}:\\s*(true|false)`);
-  const match = text.match(regex);
-  return match ? match[1] === 'true' : undefined;
-}
-
-/**
- * Helper function to extract array values
- */
-function extractArray(text, key) {
-  const regex = new RegExp(`${key}:\\s*\\[([^\\]]*)\\]`);
-  const match = text.match(regex);
-  if (!match) return undefined;
-
-  return match[1]
-    .split(',')
-    .map(item => item.trim().replace(/['"]/g, ''))
-    .filter(item => item.length > 0);
-}
-
-/**
- * Get default build configuration
- */
-function getDefaultBuildConfig() {
-  return {
-    output: {
-      directory: 'themes',
-      formats: {
-        expanded: '.css',
-        compressed: '.min.css',
-      },
-    },
-    sass: {
-      style: 'expanded',
-      sourceMap: true,
-      loadPaths: ['src'],
-    },
-  };
-}
-
-/**
- * Get default runtime configuration
- */
-function getDefaultRuntimeConfig() {
-  return {
-    basePath: '/themes',
-    cdnPath: null,
-    preload: [],
-    lazy: true,
-    defaultTheme: '',
-    storageKey: 'atomix-theme',
-    useMinified: "process.env.NODE_ENV === 'production'",
-  };
-}
-
-/**
- * Get default integration configuration
- */
-function getDefaultIntegrationConfig() {
-  return {
-    cssVariables: {
-      colorMode: '--storybook-color-mode',
-    },
-    classNames: {
-      theme: 'data-theme',
-      colorMode: 'data-atomix-color-mode',
-    },
-  };
-}
-
-/**
- * Parse build configuration
- */
-function parseBuildConfig(configText) {
-  if (!configText) return getDefaultBuildConfig();
-  // For now, return default config
-  // A more sophisticated parser would be needed for complex objects
-  return getDefaultBuildConfig();
-}
-
-/**
- * Parse runtime configuration
- */
-function parseRuntimeConfig(configText) {
-  if (!configText) return getDefaultRuntimeConfig();
-  // For now, return default config
-  // A more sophisticated parser would be needed for complex objects
-  return getDefaultRuntimeConfig();
-}
-
-/**
- * Parse integration configuration
- */
-function parseIntegrationConfig(configText) {
-  if (!configText) return getDefaultIntegrationConfig();
-  // For now, return default config
-  // A more sophisticated parser would be needed for complex objects
-  return getDefaultIntegrationConfig();
-}
-
-/**
- * Generate themes.config.js content
- */
-function generateThemesConfigJS(config) {
-  const { themes, build, runtime, integration, dependencies } = config;
-
-  // Convert themes to metadata format
-  const metadata = {};
-  for (const [key, theme] of Object.entries(themes)) {
-    metadata[key] = { ...theme };
-    // Remove undefined values
-    Object.keys(metadata[key]).forEach(k => {
-      if (metadata[key][k] === undefined) {
-        delete metadata[key][k];
-      }
-    });
-  }
-
-  return `/**
- * Theme Configuration
- *
- * This file is auto-generated from theme.config.ts
- * DO NOT EDIT MANUALLY - Edit theme.config.ts instead
- * 
- * Generated on: ${new Date().toISOString()}
- */
-
-export const themesConfig = {
-  // Theme metadata
-  metadata: ${JSON.stringify(metadata, null, 4).replace(/"([^"]+)":/g, '$1:')},
-
-  // Build configuration
-  build: ${JSON.stringify(build, null, 4).replace(/"([^"]+)":/g, '$1:')},
-
-  // Export configuration for package.json
-  exports: {
-    './themes/*': './dist/themes/*.css',
-    './themes/*.min': './dist/themes/*.min.css',
-  },
-
-  // Theme integration settings
-  integration: ${JSON.stringify(integration, null, 4).replace(/"([^"]+)":/g, '$1:')},
-
-  // Runtime theme loading configuration
-  runtime: ${JSON.stringify(runtime, null, 4).replace(/"([^"]+)":/g, '$1:').replace(/"process\.env\.NODE_ENV === 'production'"/g, "process.env.NODE_ENV === 'production'")},
-
-  // Theme dependencies (if a theme requires another theme to be loaded)
-  dependencies: ${JSON.stringify(dependencies, null, 4).replace(/"([^"]+)":/g, '$1:')},
-};`;
-}
-
-/**
- * Main function
- */
-async function main() {
-  console.log('🔄 Syncing theme configuration...\n');
-
-  try {
-    // Parse theme.config.ts
-    console.log('📖 Reading theme.config.ts...');
-    const config = await parseThemeConfigTS();
-    console.log(`  ✅ Found ${Object.keys(config.themes).length} themes`);
-
-    // Generate themes.config.js
-    console.log('\n📝 Generating themes.config.js...');
-    const jsContent = generateThemesConfigJS(config);
-
-    // Write to file
-    await writeFile(THEMES_CONFIG_JS, jsContent, 'utf8');
-    console.log('  ✅ Written to src/themes/themes.config.js');
-
-    console.log('\n✨ Configuration sync complete!');
-    console.log('   themes.config.js has been updated from theme.config.ts');
-
-  } catch (error) {
-    console.error('\n💥 Sync failed:', error.message);
-    process.exit(1);
-  }
-}
-
-// Run the sync
-main();