@clickhouse/click-ui 0.0.235 → 0.0.237-sc-deprecation.1

package/bin/commands/init.js

@@ -0,0 +1,110 @@
+#!/usr/bin/env node
+
+import fs from "fs";
+import path from "path";
+
+const CONFIG_BODY = `  // Optional: Customize the storage key for theme persistence
+  // storageKey: 'click-ui-theme',
+
+  // Optional: Customize light mode theme
+  // theme: {
+  //   global: {
+  //     color: {
+  //       brand: '#FFCC00',
+  //       background: {
+  //         default: '#FFFFFF'
+  //       }
+  //     }
+  //   },
+  //   button: {
+  //     space: {
+  //       x: '1rem',
+  //       y: '0.5rem'
+  //     },
+  //     radii: {
+  //       all: '0.375rem'
+  //     }
+  //   }
+  // },
+
+  // Optional: Dark mode overrides
+  // If not defined, theme values are used for dark mode too
+  // dark: {
+  //   global: {
+  //     color: {
+  //       background: {
+  //         default: '#0D1117'
+  //       },
+  //       text: {
+  //         default: '#F0F6FC'
+  //       }
+  //     }
+  //   }
+  // },
+
+  // Optional: Tooltip configuration
+  // tooltipConfig: {
+  //   delayDuration: 100,
+  //   skipDelayDuration: 300,
+  //   disableHoverableContent: false,
+  // },
+
+  // Optional: Toast configuration
+  // toastConfig: {
+  //   duration: 4000,
+  //   swipeDirection: 'right',
+  //   swipeThreshold: 50,
+  // },`;
+
+const CONFIG_TEMPLATES = {
+  ts: `import type { ThemeConfig } from '@clickhouse/click-ui/theme';
+
+const config: ThemeConfig = {
+${CONFIG_BODY}
+};
+
+export default config;
+`,
+  js: `/** @type {import('@clickhouse/click-ui/theme').ThemeConfig} */
+const config = {
+${CONFIG_BODY}
+};
+
+export default config;
+`
+};
+
+export const initCommand = options => {
+  const format = options.format === "js" ? "js" : "ts";
+  const filename = `click-ui.config.${format}`;
+  const targetPath = path.join(process.cwd(), filename);
+  const configExt = format === "ts" ? "ts" : "js";
+
+  // Check if config already exists
+  if (fs.existsSync(targetPath) && !options.force) {
+    console.error(`❌ ${filename} already exists. Use --force to overwrite.`);
+    process.exit(1);
+  }
+
+  // Write config file
+  try {
+    fs.writeFileSync(targetPath, CONFIG_TEMPLATES[format], "utf-8");
+    console.log(`✅ Created ${filename}\n`);
+    console.log("📝 Next steps:\n");
+    console.log(`   1. Customize your theme in ${filename}\n`);
+    console.log("   2. Generate your custom theme CSS:\n");
+    console.log("      npx click-ui generate\n");
+    console.log("   3. Import the generated CSS in your app:\n");
+    console.log("      import '@clickhouse/click-ui/style.css';");
+    console.log("      import './public/cui-custom-theme.css'; // Your custom theme\n");
+    console.log("   4. Use ClickUIProvider in your app:\n");
+    console.log("      import { ClickUIProvider } from '@clickhouse/click-ui';\n");
+    console.log("      <ClickUIProvider>");
+    console.log("        {/* Your app */}");
+    console.log("      </ClickUIProvider>\n");
+    console.log("   🎨 Your custom theme will be applied!");
+  } catch (error) {
+    console.error(`❌ Failed to create config file: ${error.message}`);
+    process.exit(1);
+  }
+};

package/bin/utils/config-loader.ts

@@ -0,0 +1,61 @@
+import { pathToFileURL } from 'url';
+
+/**
+ * Load Click UI configuration file
+ * Handles TypeScript, JavaScript, ESM, and CommonJS formats
+ *
+ * @param configFile - Full path to config file
+ * @returns Loaded configuration object
+ * @throws Error if config cannot be loaded or TypeScript file without tsx
+ *
+ * @example
+ * ```typescript
+ * const config = await loadConfig('/path/to/click-ui.config.js');
+ * console.log('Theme:', config.theme);
+ * ```
+ */
+export async function loadConfig(configFile: string): Promise<any> {
+  try {
+    // For ES modules (.js, .mjs, .ts)
+    if (configFile.endsWith('.js') || configFile.endsWith('.mjs') || configFile.endsWith('.ts')) {
+      // TypeScript files require tsx or ts-node
+      if (configFile.endsWith('.ts')) {
+        console.log('⚠️  TypeScript config files require tsx or ts-node to be installed');
+        console.log('   Run: npx tsx node_modules/@clickhouse/click-ui/bin/commands/generate.js');
+        console.log('   Or convert your config to .js format');
+        process.exit(1);
+      }
+
+      // Convert to file URL for proper ESM import
+      const fileUrl = pathToFileURL(configFile).href;
+      const module = await import(fileUrl);
+      return module.default || module;
+    }
+
+    // For CommonJS (.cjs)
+    if (configFile.endsWith('.cjs')) {
+      return require(configFile);
+    }
+
+    throw new Error(`Unsupported config file extension: ${configFile}`);
+  } catch (error: any) {
+    throw new Error(`Failed to load config from ${configFile}: ${error.message}`);
+  }
+}
+
+/**
+ * Validate that config has required theme properties
+ *
+ * @param config - Configuration object to validate
+ * @returns true if config has theme or dark properties
+ *
+ * @example
+ * ```typescript
+ * if (!validateConfig(config)) {
+ *   console.error('Config missing theme configuration');
+ * }
+ * ```
+ */
+export function validateConfig(config: any): boolean {
+  return !!(config && (config.theme || config.dark));
+}

package/bin/utils/css-generator.js

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+/**
+ * CSS Generation for CLI
+ * Used by CLI generate and build-default-theme commands
+ */
+
+import { generateLightDarkVariables, generateThemeOverrides } from '../../src/theme/utils/css-generator.js';
+import { buildCSSOutput } from '../../src/theme/utils/css-builder.js';
+
+/**
+ * Generate CSS from theme config
+ * Used by CLI generate command
+ */
+export function generateThemeCSS(config) {
+  if (!config || (!config.theme && !config.dark)) {
+    return '';
+  }
+
+  // Get light and dark themes
+  const lightTheme = config.theme || {};
+  const darkTheme = { ...config.theme, ...config.dark };
+
+  // Generate variables using light-dark() for colors
+  const lightDarkVars = generateLightDarkVariables(lightTheme, darkTheme);
+  const themeOverrides = generateThemeOverrides(lightTheme, darkTheme);
+
+  // Build CSS using shared builder
+  return buildCSSOutput(lightDarkVars, themeOverrides, {
+    headerComment: '/* Click UI Custom Theme */\n/* Generated by click-ui generate command */\n/* Uses light-dark() CSS function for automatic theme switching */\n'
+  });
+}