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

package/README.md

@@ -47,171 +47,45 @@ Click UI has been tested in NextJS, Gatsby, and Vite. If you run into problems u
 
 ### Customizing Your Theme
 
-To customize the theme with your own colors, spacing, and styles:
+For detailed theming and configuration options, see:
+- **[Theme System Documentation](src/theme/index.md)** - Complete theme system overview
+- **[Build-Time Configuration](BUILD_TIME_CONFIG_CLICK_UI.md)** - Build-time optimization guide
+- **[Bundler Plugins](config/README.md)** - Vite, Webpack, Rollup, and Next.js plugins
 
-1. **Initialize configuration**
-   ```bash
-   npx @clickhouse/click-ui init
-   ```
-
-   This creates a `click-ui.config.ts` file in your project root.
-
-2. **Setup Vite alias** to enable auto-discovery
-
-   In your `vite.config.ts`:
-   ```ts
-   import { defineConfig } from 'vite';
-   import path from 'path';
-
-   export default defineConfig({
-     resolve: {
-       alias: {
-         'click-ui-config': path.resolve(__dirname, './click-ui.config.ts'),
-       },
-     },
-   });
-   ```
-
-3. **Customize the generated config file**
-
-   ```typescript
-   import type { ThemeConfig } from '@clickhouse/click-ui/theme';
-
-   const config: ThemeConfig = {
-     theme: {
-       global: {
-         color: {
-           brand: '#FFCC00',
-           background: {
-             default: '#FFFFFF'
-           }
-         }
-       },
-       button: {
-         primary: {
-           background: {
-             default: '#FFCC00',
-             hover: '#FFD700'
-           }
-         }
-       }
-     }
-   };
-
-   export default config;
-   ```
-
-4. **That's it!** Your custom theme will be automatically loaded by ClickUIProvider.
-
-#### CLI Options
-
-```bash
-# Create TypeScript config (default)
-npx @clickhouse/click-ui init
-
-# Create JavaScript config
-npx @clickhouse/click-ui init -f js
-
-# Overwrite existing config
-npx @clickhouse/click-ui init --force
-```
-
-### Advanced Configuration Options
-
-The generated config file supports extensive customization:
-
-#### System Mode Overrides
-
-Define different styles for light and dark modes:
+**Quick example:**
 
 ```typescript
-const config: ThemeConfig = {
-  systemModeOverrides: {
-    light: {
-      global: {
-        color: {
-          background: { default: '#FFFFFF' }
-        }
-      }
-    },
-    dark: {
-      global: {
-        color: {
-          background: { default: '#0D1117' },
-          text: { default: '#F0F6FC' }
-        }
-      }
-    }
-  }
-};
-```
-
-#### Component-Specific Styling
+import type { ThemeConfig } from '@clickhouse/click-ui/theme';
 
-Customize individual components:
-
-```typescript
 const config: ThemeConfig = {
   theme: {
-    button: {
-      space: { x: '1rem', y: '0.5rem' },
-      radii: { all: '0.375rem' },
-      primary: {
-        background: {
-          default: '#FFCC00',
-          hover: '#FFD700'
-        }
+    global: {
+      color: {
+        brand: '#FFCC00',
+        background: { default: '#FFFFFF' }
+      }
+    }
+  },
+  // Dark mode overrides
+  dark: {
+    global: {
+      color: {
+        background: { default: '#0D1117' },
+        text: { default: '#F0F6FC' }
       }
     }
   }
 };
-```
-
-### Manual Theme Control
-
-You can manually control the theme at runtime:
 
-```typescript
-import { ClickUIProvider, useCUITheme, Switch } from '@clickhouse/click-ui'
-
-function ThemeToggle() {
-  const { themeName, toggleTheme } = useCUITheme();
-
-  return (
-    <Switch
-      checked={themeName === 'dark'}
-      onClick={toggleTheme}
-    />
-  );
-}
-
-function App() {
-  return (
-    <ClickUIProvider theme="dark">
-      <ThemeToggle />
-      <Title type='h1'>Click UI Example</Title>
-    </ClickUIProvider>
-  )
-}
+export default config;
 ```
 
-### How It Works
-
-1. **Config File**: Create `click-ui.config.ts` in your project root
-2. **Vite Alias**: The alias makes the config discoverable via `'click-ui-config'` import
-3. **Auto-Load**: `ClickUIProvider` automatically imports and applies your config
-4. **Runtime Override**: Props passed to `ClickUIProvider` can override the config
-
-### Troubleshooting
-
-**Config not loading?**
-- Verify the Vite alias is correctly set up in `vite.config.ts`
-- Ensure `click-ui.config.ts` is in your project root
-- Restart your dev server after adding the alias
-
-**TypeScript errors?**
-- Import types from: `import type { ThemeConfig } from '@clickhouse/click-ui/theme';`
-- Your IDE will provide autocomplete for all config options
+See the full documentation for advanced features including:
+- CLI tools for config generation
+- Multiple bundler support
+- SSR/RSC compatibility
+- Theme switching and persistence
+- Performance optimization
 
 ## To develop this library locally 🚀
 

package/bin/commands/init.js

@@ -1,124 +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',
-
-  theme: {
-    global: {
-      color: {
-        brand: '#FFCC00',
-        background: {
-          default: '#FFFFFF'
-        }
-      }
-    },
-    button: {
-      space: {
-        x: '1rem',
-        y: '0.5rem'
-      },
-      radii: {
-        all: '0.375rem'
-      }
-    }
-  },
-
-  systemModeOverrides: {
-    light: {
-      global: {
-        color: {
-          background: {
-            default: '#FFFFFF'
-          }
-        }
-      }
-    },
-    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',
-
-  theme: {
-    global: {
-      color: {
-        brand: '#FFCC00',
-        background: {
-          default: '#FFFFFF'
-        }
-      }
-    },
-    button: {
-      space: {
-        x: '1rem',
-        y: '0.5rem'
-      },
-      radii: {
-        all: '0.375rem'
-      }
-    }
-  },
-
-  systemModeOverrides: {
-    light: {
-      global: {
-        color: {
-          background: {
-            default: '#FFFFFF'
-          }
-        }
-      }
-    },
-    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) {
@@ -128,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);