@clickhouse/click-ui 0.0.234-sc-deprecation.9 → 0.0.234-sc-deprecation.10

package/bin/commands/init.js

@@ -1,106 +1,84 @@
 #!/usr/bin/env node
 
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
+import fs from "fs";
+import path from "path";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+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 = {
-  cssPrefix: '--click',
-  storageKey: 'click-ui-theme',
-
-  // Light mode theme (default)
-  theme: {
-    global: {
-      color: {
-        brand: '#FFCC00',
-        background: {
-          default: '#FFFFFF'
-        }
-      }
-    },
-    button: {
-      space: {
-        x: '1rem',
-        y: '0.5rem'
-      },
-      radii: {
-        all: '0.375rem'
-      }
-    }
-  },
-
-  // Dark mode overrides - if not defined, theme values are used for dark mode too
-  dark: {
-    global: {
-      color: {
-        background: {
-          default: '#0D1117'
-        },
-        text: {
-          default: '#F0F6FC'
-        }
-      }
-    }
-  }
+${CONFIG_BODY}
 };
 
 export default config;
 `,
   js: `/** @type {import('@clickhouse/click-ui/theme').ThemeConfig} */
 const config = {
-  cssPrefix: '--click',
-  storageKey: 'click-ui-theme',
-
-  // Light mode theme (default)
-  theme: {
-    global: {
-      color: {
-        brand: '#FFCC00',
-        background: {
-          default: '#FFFFFF'
-        }
-      }
-    },
-    button: {
-      space: {
-        x: '1rem',
-        y: '0.5rem'
-      },
-      radii: {
-        all: '0.375rem'
-      }
-    }
-  },
-
-  // Dark mode overrides - if not defined, theme values are used for dark mode too
-  dark: {
-    global: {
-      color: {
-        background: {
-          default: '#0D1117'
-        },
-        text: {
-          default: '#F0F6FC'
-        }
-      }
-    }
-  }
+${CONFIG_BODY}
 };
 
 export default config;
 `
 };
 
-export const initCommand = (options) => {
-  const format = options.format === 'js' ? 'js' : 'ts';
+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) {
@@ -110,22 +88,25 @@ export const initCommand = (options) => {
 
   // Write config file
   try {
-    fs.writeFileSync(targetPath, CONFIG_TEMPLATES[format], 'utf-8');
-    console.log(`✅ Created ${filename}`);
-    console.log(`\n📝 Next steps:`);
-    console.log(`   1. Customize your theme in ${filename}`);
-    console.log(`   2. Add Vite alias to make config discoverable (vite.config.ts):`);
-    console.log(`\n      resolve: {`);
-    console.log(`        alias: {`);
-    console.log(`          'click-ui-config': path.resolve(__dirname, './${filename}'),`);
-    console.log(`        },`);
-    console.log(`      },`);
-    console.log(`\n   3. Use ClickUIProvider (config loads automatically):`);
-    console.log(`\n      import { ClickUIProvider } from '@clickhouse/click-ui';`);
-    console.log(`\n      <ClickUIProvider>`);
-    console.log(`        {/* Your app */}`);
-    console.log(`      </ClickUIProvider>`);
-    console.log(`\n   The config will be automatically discovered and applied! 🎨`);
+    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. Add plugin to your bundler config:\n");
+    console.log(`      // vite.config.${configExt}`);
+    console.log("      import { clickUIConfig } from '@clickhouse/click-ui/config';\n");
+    console.log("      export default defineConfig({");
+    console.log("        plugins: [");
+    console.log("          react(),");
+    console.log(`          clickUIConfig(), // Loads ${filename}`);
+    console.log("        ],");
+    console.log("      });\n");
+    console.log("   3. 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);