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

package/dist/theme/theme.d.ts

@@ -0,0 +1,7 @@
+import { ThemeName } from '.';
+
+declare const ThemeProvider: ({ theme: name, children, }: {
+    theme: ThemeName;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export { ThemeProvider };

package/dist/utils/test-utils.d.ts

@@ -1,4 +1,6 @@
-declare const renderCUI: (children: React.ReactNode) => {
+import { ThemeName } from '../theme';
+
+declare const renderCUI: (children: React.ReactNode, theme?: ThemeName) => {
     rerender: (rerenderChildren: React.ReactNode) => void;
     container: HTMLElement;
     baseElement: HTMLElement;

package/package.json

@@ -1,24 +1,12 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.237-sc-deprecation.1",
+  "version": "0.0.238",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",
-  "sideEffects": [
-    "**/*.css",
-    "**/*.scss",
-    "./dist/cui.css",
-    "./dist/cui-components.css",
-    "./dist/cui-default-theme.css",
-    "./src/theme/global.scss"
-  ],
   "files": [
-    "dist",
-    "bin"
+    "dist"
   ],
-  "bin": {
-    "click-ui": "./bin/click-ui.js"
-  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -29,14 +17,7 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/click-ui.bundled.es.js",
       "require": "./dist/click-ui.bundled.umd.js"
-    },
-    "./theme": {
-      "types": "./dist/theme/index.d.ts"
-    },
-    "./cui.css": "./dist/cui.css",
-    "./cui-components.css": "./dist/cui-components.css",
-    "./cui-default-theme.css": "./dist/cui-default-theme.css",
-    "./style.css": "./dist/cui-components.css"
+    }
   },
   "main": "./dist/click-ui.umd.js",
   "module": "./dist/click-ui.es.js",
@@ -52,16 +33,12 @@
   },
   "homepage": "https://clickhouse.com",
   "scripts": {
-    "build": "npm run generate-theme-css && tsc && vite build && npm run build:bundled && npm run copy-css-files",
+    "build": "tsc && vite build && yarn build:bundled",
     "build:bundled": "vite build -- bundled",
-    "copy-css-files": "npm run rename-css && cp src/styles/cui-default-theme.css dist/ && npm run build-combined-css",
-    "rename-css": "mv dist/style.css dist/cui-components.css",
-    "build-combined-css": "echo '/* Click UI - Combined CSS */\n@import \"./cui-default-theme.css\";\n@import \"./cui-components.css\";' > dist/cui.css",
     "build-storybook": "storybook build",
     "build:watch": "watch 'npm run build' ./src",
     "chromatic": "npx chromatic",
     "dev": "vite",
-    "generate-theme-css": "npx tsx bin/commands/build-default-theme.ts",
     "generate-tokens": "node build-tokens.js",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "prettify": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\" --config .prettierrc",
@@ -86,11 +63,12 @@
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-popper": "^1.1.3",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-switch": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "clsx": "^2.1.1",
+    "lodash": "^4.17.21",
     "react-sortablejs": "^6.1.4",
     "react-syntax-highlighter": "^15.5.0",
     "react-virtualized-auto-sizer": "^1.0.20",
@@ -107,15 +85,17 @@
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "@tokens-studio/sd-transforms": "^0.10.3",
-    "@types/node": "^20.0.0",
+    "@types/lodash-es": "^4.17.7",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/react-window": "^1.8.8",
     "@types/sortablejs": "^1.15.2",
+    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",
     "@vitejs/plugin-react": "^4.2.1",
+    "babel-plugin-styled-components": "^2.1.4",
     "chromatic": "^13.3.3",
     "eslint": "^8.57.0",
     "eslint-plugin-prefer-arrow-functions": "^3.3.2",
@@ -124,9 +104,7 @@
     "eslint-plugin-storybook": "^10.0.7",
     "jsdom": "^24.0.0",
     "prettier": "^3.6.2",
-    "recharts": "^3.4.1",
-    "rollup": "^4.52.4",
-    "sass-embedded": "^1.93.0",
+    "prop-types": "^15.8.1",
     "storybook": "^10.0.7",
     "storybook-addon-pseudo-states": "^10.0.7",
     "styled-components": "^6.1.11",
@@ -139,13 +117,9 @@
     "watch": "^1.0.2"
   },
   "peerDependencies": {
-    "dayjs": "^1.11.18",
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
-  },
-  "peerDependenciesMeta": {
-    "dayjs": {
-      "optional": true
-    }
+    "dayjs": "^1.11.13",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": ">= 5"
   }
 }

package/bin/README.md

@@ -1,178 +0,0 @@
-# Click UI CLI
-
-This directory contains the Click UI command-line interface for theme customization.
-
-## Quick Start
-
-```bash
-# Initialize a config file
-npx click-ui init
-
-# Generate custom theme CSS
-npx click-ui generate
-
-# Get help
-npx click-ui --help
-```
-
-## Commands
-
-### `click-ui init`
-
-Creates a `click-ui.config.ts` file in your project root with default configuration.
-
-**Options:**
-- `-f, --format <format>` - Config format: `js` or `ts` (default: `ts`)
-- `--force` - Overwrite existing config file
-- `-h, --help` - Display help
-
-**Example:**
-```bash
-npx click-ui init
-npx click-ui init --format js
-npx click-ui init --force
-```
-
-### `click-ui generate`
-
-Generates custom theme CSS from your `click-ui.config.ts` file.
-
-**Options:**
-- `-o, --output <path>` - Output file path (default: `public/cui-custom-theme.css`)
-- `-v, --verbose` - Show detailed output
-- `-w, --watch` - Watch for config changes and regenerate
-- `-h, --help` - Display help
-
-**Example:**
-```bash
-npx click-ui generate
-npx click-ui generate --output src/theme.css
-npx click-ui generate --watch
-```
-
-## Configuration
-
-See [click-ui.config.example.ts](./click-ui.config.example.ts) for a complete example configuration.
-
-### Basic Structure
-
-```typescript
-import type { ThemeConfig } from '@clickhouse/click-ui/theme';
-
-const config: ThemeConfig = {
-  // Light mode theme
-  theme: {
-    global: {
-      color: {
-        brand: '#FF6B6B',
-      }
-    }
-  },
-
-  // Dark mode overrides
-  dark: {
-    global: {
-      color: {
-        brand: '#FF8A80',
-      }
-    }
-  },
-
-  // Runtime configuration
-  storageKey: 'my-app-theme',
-};
-
-export default config;
-```
-
-## Workflow
-
-1. **Create config:**
-   ```bash
-   npx click-ui init
-   ```
-
-2. **Customize theme** in `click-ui.config.ts`:
-   ```typescript
-   theme: {
-     button: {
-       primary: {
-         background: { default: '#FF6B6B' }
-       }
-     }
-   }
-   ```
-
-3. **Generate CSS:**
-   ```bash
-   npx click-ui generate
-   ```
-
-4. **Import in your app:**
-   ```typescript
-   import '@clickhouse/click-ui/cui.css';
-   import './public/cui-custom-theme.css'; // Your custom theme
-   import { ClickUIProvider } from '@clickhouse/click-ui';
-   // OR for simple setup without custom theme:
-   // import '@clickhouse/click-ui/cui.css';
-
-   function App() {
-     return (
-       <ClickUIProvider>
-         {/* Your app */}
-       </ClickUIProvider>
-     );
-   }
-   ```
-
-## File Structure
-
-```
-bin/
-├── click-ui.js                    # CLI entry point
-├── click-ui.config.example.ts     # Example configuration
-├── commands/
-│   ├── init.js                    # Creates config file
-│   ├── generate.js                # Generates theme CSS
-│   └── build-default-theme.ts     # Internal: builds library's default theme
-└── utils/
-    └── css-generator.js           # CSS generation utilities
-```
-
-## TypeScript Support
-
-Full TypeScript support with autocomplete for theme configuration:
-
-```typescript
-import type { ThemeConfig } from '@clickhouse/click-ui/theme';
-
-const config: ThemeConfig = {
-  theme: {
-    // TypeScript autocomplete works here! ✨
-  }
-};
-```
-
-## CSS Output
-
-The CLI generates CSS using `light-dark()` functions for automatic theme switching:
-
-```css
-:root {
-  color-scheme: light dark;
-  --click-button-color-primary-background-default: light-dark(#FF6B6B, #FF8A80);
-}
-```
-
-This allows the browser to automatically switch between light and dark values based on the user's system preference or your theme setting.
-
-## Documentation
-
-For more information:
-- [Main README](../README.md) - Getting started
-- [Theme Documentation](../src/theme/index.md) - Theme configuration guide
-- [GitHub Repository](https://github.com/ClickHouse/click-ui)
-
-## License
-
-Apache-2.0

package/bin/click-ui.config.example.ts

@@ -1,70 +0,0 @@
-import type { ThemeConfig } from "@clickhouse/click-ui/theme";
-
-const config: ThemeConfig = {
-  storageKey: "click-ui-theme",
-
-  // Light mode theme (default)
-  theme: {
-    global: {
-      color: {
-        brand: "#FF6B6B",
-        background: {
-          default: "#FFFFFF",
-        },
-      },
-    },
-    button: {
-      space: {
-        x: "1.5rem",
-        y: "0.75rem",
-      },
-      radii: {
-        all: "0.5rem",
-      },
-      primary: {
-        background: {
-          default: "#FF6B6B",
-          hover: "#FF5252",
-        },
-      },
-    },
-  },
-
-  // Dark mode overrides - if not defined, theme values are used for dark mode too
-  dark: {
-    global: {
-      color: {
-        background: {
-          default: "#0D1117",
-        },
-        text: {
-          default: "#F0F6FC",
-        },
-      },
-    },
-    button: {
-      primary: {
-        background: {
-          default: "#FF8A80",
-          hover: "#FF7043",
-        },
-      },
-    },
-  },
-
-  // Tooltip configuration (optional)
-  // tooltipConfig: {
-  //   delayDuration: 100,
-  //   skipDelayDuration: 300,
-  //   disableHoverableContent: false,
-  // },
-
-  // Toast configuration (optional)
-  // toastConfig: {
-  //   duration: 4000,
-  //   swipeDirection: "right",
-  //   swipeThreshold: 50,
-  // },
-};
-
-export default config;

package/bin/click-ui.js

@@ -1,97 +0,0 @@
-#!/usr/bin/env node
-
-import { initCommand } from './commands/init.js';
-import { generateCommand } from './commands/generate.js';
-
-const args = process.argv.slice(2);
-const command = args[0];
-
-if (command === 'init') {
-  const options = {
-    format: 'ts',
-    force: false
-  };
-
-  // Parse options
-  for (let i = 1; i < args.length; i++) {
-    if (args[i] === '-f' || args[i] === '--format') {
-      options.format = args[i + 1];
-      i++;
-    } else if (args[i] === '--force') {
-      options.force = true;
-    } else if (args[i] === '-h' || args[i] === '--help') {
-      console.log(`
-Usage: @clickhouse/click-ui init [options]
-
-Initialize Click UI configuration file
-
-Options:
-  -f, --format <format>  Config format (js or ts) (default: "ts")
-  --force                Overwrite existing config file
-  -h, --help             Display help for command
-      `);
-      process.exit(0);
-    }
-  }
-
-  initCommand(options);
-} else if (command === 'generate') {
-  const options = {
-    output: null,
-    verbose: false,
-    watch: false
-  };
-
-  // Parse options
-  for (let i = 1; i < args.length; i++) {
-    if (args[i] === '-o' || args[i] === '--output') {
-      options.output = args[i + 1];
-      i++;
-    } else if (args[i] === '-v' || args[i] === '--verbose') {
-      options.verbose = true;
-    } else if (args[i] === '-w' || args[i] === '--watch') {
-      options.watch = true;
-    } else if (args[i] === '-h' || args[i] === '--help') {
-      console.log(`
-Usage: @clickhouse/click-ui generate [options]
-
-Generate custom theme CSS from click-ui.config.ts/js
-
-Options:
-  -o, --output <path>  Output file path (default: "public/cui-custom-theme.css")
-  -v, --verbose        Show detailed output
-  -w, --watch          Watch for config changes and regenerate
-  -h, --help           Display help for command
-
-Example:
-  click-ui generate
-  click-ui generate --output src/theme.css
-  click-ui generate --watch
-      `);
-      process.exit(0);
-    }
-  }
-
-  generateCommand(options);
-} else if (command === '--version' || command === '-V') {
-  console.log('0.0.234');
-} else if (command === '--help' || command === '-h' || !command) {
-  console.log(`
-Usage: @clickhouse/click-ui [options] [command]
-
-CLI for ClickHouse Click UI
-
-Options:
-  -V, --version   Output the version number
-  -h, --help      Display help for command
-
-Commands:
-  init [options]      Initialize Click UI configuration file
-  generate [options]  Generate custom theme CSS from config
-  help [command]      Display help for command
-  `);
-} else {
-  console.error(`Unknown command: ${command}`);
-  console.log('Run "@clickhouse/click-ui --help" for usage information.');
-  process.exit(1);
-}

package/bin/commands/build-default-theme.ts

@@ -1,48 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Generate theme-default.css with light-dark() functions
- * This runs during library build to create pre-compiled CSS
- */
-
-import * as fs from "fs";
-import * as path from "path";
-import { getBaseTheme } from "../../src/theme/utils";
-import { generateLightDarkVariables, generateThemeOverrides } from "../../src/theme/utils/css-generator";
-import { buildCSSOutput } from "../../src/theme/utils/css-builder";
-
-// Load light and dark base themes from tokens
-const lightTheme = getBaseTheme("light");
-const darkTheme = getBaseTheme("dark");
-
-// Debug: Check if themes loaded correctly
-console.log("\n🔍 Debug Info:");
-console.log(`Light theme loaded: ${Object.keys(lightTheme).length} keys`);
-console.log(`Dark theme loaded: ${Object.keys(darkTheme).length} keys`);
-console.log(`Light accordion color: ${lightTheme?.click?.accordion?.color?.default?.label?.default}`);
-console.log(`Dark accordion color: ${darkTheme?.click?.accordion?.color?.default?.label?.default}`);
-
-// Generate CSS using the same logic as injectThemeStyles()
-const lightDarkVars = generateLightDarkVariables(lightTheme, darkTheme);
-const themeOverrides = generateThemeOverrides(lightTheme, darkTheme);
-
-// Build CSS using shared builder
-const css = buildCSSOutput(lightDarkVars, themeOverrides, {
-  headerComment: '/* Click UI Default Theme */\n/* Generated during library build - DO NOT EDIT MANUALLY */\n/* Uses light-dark() CSS function for automatic theme switching */\n'
-});
-
-// Ensure output directory exists
-const outputDir = path.join(process.cwd(), "src", "styles");
-if (!fs.existsSync(outputDir)) {
-  fs.mkdirSync(outputDir, { recursive: true });
-}
-
-// Write the CSS file
-const outputPath = path.join(outputDir, "cui-default-theme.css");
-fs.writeFileSync(outputPath, css, "utf-8");
-
-console.log(`✅ Generated cui-default-theme.css (${css.length} bytes)`);
-console.log(`   Location: ${outputPath}`);
-console.log(`   Light vars: ${Object.keys(lightDarkVars).length}`);
-console.log(`   Light overrides: ${Object.keys(themeOverrides.light).length}`);
-console.log(`   Dark overrides: ${Object.keys(themeOverrides.dark).length}`);

package/bin/commands/generate.js

@@ -1,117 +0,0 @@
-#!/usr/bin/env node
-
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { pathToFileURL } from 'url';
-import { findConfigFile } from '../../src/theme/utils/find-config.js';
-import { loadConfig, validateConfig } from '../utils/config-loader.js';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-/**
- * Generate custom theme CSS from click-ui.config.ts/js
- */
-export async function generateCommand(options = {}) {
-  const cwd = process.cwd();
-  const outputPath = options.output || path.join(cwd, 'public', 'cui-custom-theme.css');
-  const verbose = options.verbose || false;
-
-  console.log('🎨 Click UI Theme Generator\n');
-
-  try {
-    // Find config file
-    const configFile = findConfigFile(cwd);
-
-    if (!configFile) {
-      console.log('ℹ️  No click-ui.config.ts/js found');
-      console.log('   Run "click-ui init" to create a config file');
-      process.exit(0);
-    }
-
-    if (verbose) {
-      console.log(`📄 Found config: ${path.relative(cwd, configFile)}`);
-    }
-
-    // Load config
-    const config = await loadConfig(configFile);
-
-    if (!validateConfig(config)) {
-      console.log('⚠️  Config file exists but has no theme configuration');
-      console.log('   Add "theme" or "dark" properties to customize your theme');
-      process.exit(0);
-    }
-
-    // Generate CSS
-    const css = await generateCSS(config);
-
-    // Ensure output directory exists
-    const outputDir = path.dirname(outputPath);
-    if (!fs.existsSync(outputDir)) {
-      fs.mkdirSync(outputDir, { recursive: true });
-      if (verbose) {
-        console.log(`📁 Created directory: ${path.relative(cwd, outputDir)}`);
-      }
-    }
-
-    // Write CSS file
-    fs.writeFileSync(outputPath, css, 'utf-8');
-
-    console.log('✅ Generated custom theme CSS');
-    console.log(`   Location: ${path.relative(cwd, outputPath)}`);
-    console.log(`   Size: ${(css.length / 1024).toFixed(2)} KB\n`);
-
-    console.log('📝 Next steps:');
-    console.log('   1. Import the CSS in your app:');
-    console.log(`      import '${path.relative(cwd, outputPath).replace(/\\/g, '/')}';`);
-    console.log('   2. Or add to your HTML:');
-    console.log(`      <link rel="stylesheet" href="/${path.basename(outputPath)}">`);
-
-  } catch (error) {
-    console.error('❌ Failed to generate theme CSS:', error.message);
-    if (verbose) {
-      console.error(error.stack);
-    }
-    process.exit(1);
-  }
-}
-
-/**
- * Generate CSS from config
- */
-async function generateCSS(config) {
-  // Import the CSS generation function from bin/utils
-  const cssGeneratorPath = path.join(__dirname, '../utils/css-generator.js');
-
-  if (!fs.existsSync(cssGeneratorPath)) {
-    throw new Error('CSS generator module not found at ' + cssGeneratorPath);
-  }
-
-  const { generateThemeCSS } = await import(pathToFileURL(cssGeneratorPath).href);
-
-  // Get full config and generate CSS
-  const fullConfig = config.default || config;
-  const css = generateThemeCSS(fullConfig);
-
-  if (!css || css.length === 0) {
-    throw new Error('No CSS generated. Please check your theme configuration.');
-  }
-
-  return css;
-}
-
-/**
- * Split config into build-time and runtime
- */
-function splitConfig(fullConfig) {
-  const { theme, dark, ...runtimeConfig } = fullConfig;
-
-  return {
-    buildTimeConfig: {
-      ...(theme && { theme }),
-      ...(dark && { dark }),
-    },
-    runtimeConfig,
-  };
-}