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

package/bin/commands/init.js

@@ -1,110 +0,0 @@
-#!/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

@@ -1,61 +0,0 @@
-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

@@ -1,32 +0,0 @@
-#!/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'
-  });
-}

package/dist/components/Link/linkStyles.d.ts

@@ -1,134 +0,0 @@
-/**
- * Link styles for styled-components compatibility
- *
- * This file provides backward compatibility for consumers using styled-components
- * to wrap the Link component.
- *
- * @example Function-based approach (current)
- * ```typescript
- * import styled from 'styled-components';
- * import { Link, linkStyles, StyledLinkProps } from '@clickhouse/click-ui';
- *
- * const CuiStyledLink = styled(Link)<StyledLinkProps>`
- *   ${props => linkStyles(props)}
- * `;
- *
- * <CuiStyledLink $size="md" $weight="semibold">My Link</CuiStyledLink>
- * ```
- *
- * @example CSS classes approach (recommended for new code)
- * ```typescript
- * import { Link, linkClasses } from '@clickhouse/click-ui';
- *
- * <Link className={linkClasses({ size: 'md', weight: 'semibold' })}>My Link</Link>
- * ```
- */
-export type TextSize = "xs" | "sm" | "md" | "lg" | "xl";
-export type TextWeight = "normal" | "medium" | "semibold" | "bold";
-/**
- * Props for styled-components wrapper
- * @deprecated Use LinkStyleProps with linkClasses instead
- */
-export interface StyledLinkProps {
-    $size?: TextSize;
-    $weight?: TextWeight;
-}
-/**
- * Props for CSS classes approach
- */
-export interface LinkStyleProps {
-    size?: TextSize;
-    weight?: TextWeight;
-    className?: string;
-}
-/**
- * Function-based link styles for styled-components
- *
- * Returns a CSS string with the appropriate CSS variables based on size and weight.
- *
- * @param props - Style props with $size and $weight
- * @returns CSS string with Click UI link styles
- *
- * @deprecated This function-based approach is maintained for backward compatibility.
- * For new code, use `linkClasses()` instead which doesn't require styled-components.
- *
- * @example
- * ```typescript
- * const StyledLink = styled(Link)<StyledLinkProps>`
- *   ${props => linkStyles(props)}
- * `;
- * ```
- */
-export declare const linkStyles: (props?: StyledLinkProps) => string;
-/**
- * CSS class names helper for Link component styling
- *
- * Use these classes to apply Click UI link styles to custom components without
- * requiring styled-components.
- *
- * @param options - Size, weight, and additional className
- * @returns Combined class name string
- *
- * @example With React Router
- * ```typescript
- * import { Link as RouterLink } from 'react-router-dom';
- * import { linkClasses } from '@clickhouse/click-ui';
- *
- * <RouterLink
- *   to="/dashboard"
- *   className={linkClasses({ size: 'md', weight: 'semibold' })}
- * >
- *   Go to Dashboard
- * </RouterLink>
- * ```
- *
- * @example With Next.js Link
- * ```typescript
- * import Link from 'next/link';
- * import { linkClasses } from '@clickhouse/click-ui';
- *
- * <Link href="/about" className={linkClasses({ size: 'lg', weight: 'bold' })}>
- *   About
- * </Link>
- * ```
- */
-export declare const linkClasses: ({ size, weight, className }?: LinkStyleProps) => string;
-/**
- * CSS class name constants for granular control
- *
- * Use these constants when you need more control over which classes to apply.
- *
- * @example
- * ```typescript
- * import { LINK_CLASSES } from '@clickhouse/click-ui';
- * import clsx from 'clsx';
- *
- * <a
- *   href="/home"
- *   className={clsx(
- *     LINK_CLASSES.base,
- *     LINK_CLASSES.size.lg,
- *     LINK_CLASSES.weight.bold,
- *     'my-custom-class'
- *   )}
- * >
- *   Home
- * </a>
- * ```
- */
-export declare const LINK_CLASSES: {
-    readonly base: "cui-link";
-    readonly size: {
-        readonly xs: "cui-link-xs";
-        readonly sm: "cui-link-sm";
-        readonly md: "cui-link-md";
-        readonly lg: "cui-link-lg";
-        readonly xl: "cui-link-xl";
-    };
-    readonly weight: {
-        readonly normal: "";
-        readonly medium: "cui-link-weight-medium";
-        readonly semibold: "cui-link-weight-semibold";
-        readonly bold: "cui-link-weight-bold";
-    };
-};

package/dist/components/ThemeToggle/ThemeToggle.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-
-export declare const ThemeToggle: React.FC;
-export default ThemeToggle;