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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/README.md +26 -152
  2. package/bin/commands/init.js +78 -115
  3. package/dist/click-ui.bundled.es.js +3580 -3627
  4. package/dist/click-ui.bundled.umd.js +31 -31
  5. package/dist/click-ui.es.js +3580 -3627
  6. package/dist/click-ui.umd.js +31 -31
  7. package/dist/config/core.d.ts +49 -0
  8. package/dist/config/core.d.ts.map +1 -0
  9. package/dist/config/core.js +180 -0
  10. package/dist/config/core.js.map +1 -0
  11. package/dist/config/index.d.ts +51 -0
  12. package/dist/config/index.d.ts.map +1 -0
  13. package/dist/config/index.js +53 -0
  14. package/dist/config/index.js.map +1 -0
  15. package/dist/config/next.d.ts +8 -0
  16. package/dist/config/next.d.ts.map +1 -0
  17. package/dist/config/next.js +61 -0
  18. package/dist/config/next.js.map +1 -0
  19. package/dist/config/rollup.d.ts +8 -0
  20. package/dist/config/rollup.d.ts.map +1 -0
  21. package/dist/config/rollup.js +75 -0
  22. package/dist/config/rollup.js.map +1 -0
  23. package/dist/config/types.d.ts +34 -0
  24. package/dist/config/types.d.ts.map +1 -0
  25. package/dist/config/types.js +5 -0
  26. package/dist/config/types.js.map +1 -0
  27. package/dist/config/vite.d.ts +8 -0
  28. package/dist/config/vite.d.ts.map +1 -0
  29. package/dist/config/vite.js +69 -0
  30. package/dist/config/vite.js.map +1 -0
  31. package/dist/config/webpack.d.ts +8 -0
  32. package/dist/config/webpack.d.ts.map +1 -0
  33. package/dist/config/webpack.js +68 -0
  34. package/dist/config/webpack.js.map +1 -0
  35. package/dist/theme/ClickUIProvider/ServerClickUIProvider.d.ts +3 -4
  36. package/dist/theme/config.d.ts +1 -1
  37. package/dist/theme/index.d.ts +2 -2
  38. package/dist/theme/types.d.ts +13 -6
  39. package/dist/theme/utils.d.ts +7 -0
  40. package/package.json +30 -3
@@ -0,0 +1 @@
1
+ {"version":3,"file":"vite.js","sourceRoot":"","sources":["../../config/vite.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAG3C,MAAM,UAAU,aAAa,CAAC,UAAyB,EAAE;IACvD,MAAM,IAAI,GAAG,IAAI,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC5C,IAAI,YAAoB,CAAC;IACzB,IAAI,YAAY,GAAQ,IAAI,CAAC;IAC7B,IAAI,YAAY,GAAG,EAAE,CAAC;IAEtB,OAAO;QACL,IAAI,EAAE,iBAAiB;QAEvB,4CAA4C;QAC5C,KAAK,CAAC,MAAM,CAAC,MAAM;YACjB,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,IAAI,OAAO,CAAC,GAAG,EAAE,CAAC;YAC1C,YAAY,GAAG,IAAI,CAAC;YAEpB,IAAI,CAAC;gBACH,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;gBAC3C,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC;gBAC7B,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC;gBAEnC,mCAAmC;gBACnC,OAAO;oBACL,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC;iBACzC,CAAC;YACJ,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,yCAAyC,EAAE,KAAK,CAAC,CAAC;gBAChE,OAAO;oBACL,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC;iBAC/B,CAAC;YACJ,CAAC;QACH,CAAC;QAED,sCAAsC;QACtC,cAAc,CAAC,MAAsB;YACnC,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC;QAC7B,CAAC;QAED,qCAAqC;QACrC,cAAc;YACZ,IAAI,YAAY,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC5C,IAAI,CAAC,QAAQ,CAAC;oBACZ,IAAI,EAAE,OAAO;oBACb,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EAAE;oBACrC,MAAM,EAAE,YAAY;iBACrB,CAAC,CAAC;gBAEH,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC;oBACrB,OAAO,CAAC,GAAG,CAAC,eAAe,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;gBAC5D,CAAC;YACH,CAAC;QACH,CAAC;QAED,4CAA4C;QAC5C,KAAK,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;YACpC,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;YAErD,IAAI,UAAU,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;gBACtC,OAAO,CAAC,GAAG,CAAC,sCAAsC,CAAC,CAAC;gBACpD,IAAI,CAAC,UAAU,EAAE,CAAC;gBAElB,gCAAgC;gBAChC,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;gBACnD,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC;gBAC7B,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC;gBAEnC,sBAAsB;gBACtB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC;oBACb,IAAI,EAAE,aAAa;oBACnB,IAAI,EAAE,GAAG;iBACV,CAAC,CAAC;YACL,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC"}
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Webpack plugin for Click UI configuration
3
+ * Uses shared core for config discovery and CSS generation
4
+ */
5
+ import type { WebpackPluginInstance } from 'webpack';
6
+ import type { PluginOptions } from './types';
7
+ export declare function clickUIConfig(options?: PluginOptions): WebpackPluginInstance;
8
+ //# sourceMappingURL=webpack.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"webpack.d.ts","sourceRoot":"","sources":["../../config/webpack.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAY,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAE/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C,wBAAgB,aAAa,CAAC,OAAO,GAAE,aAAkB,GAAG,qBAAqB,CA+EhF"}
@@ -0,0 +1,68 @@
1
+ /**
2
+ * Webpack plugin for Click UI configuration
3
+ * Uses shared core for config discovery and CSS generation
4
+ */
5
+ import { ClickUIConfigCore } from './core';
6
+ import { Compilation, sources } from 'webpack';
7
+ export function clickUIConfig(options = {}) {
8
+ const core = new ClickUIConfigCore(options);
9
+ let loadedConfig = null;
10
+ let cssVariables = '';
11
+ return {
12
+ apply(compiler) {
13
+ const pluginName = 'ClickUIConfigPlugin';
14
+ // Initialize config at the start of compilation
15
+ compiler.hooks.beforeCompile.tapAsync(pluginName, async (params, callback) => {
16
+ try {
17
+ const root = compiler.context || process.cwd();
18
+ const result = await core.initialize(root);
19
+ loadedConfig = result.config;
20
+ cssVariables = result.cssVariables;
21
+ callback();
22
+ }
23
+ catch (error) {
24
+ console.error('❌ Failed to initialize Click UI config:', error);
25
+ callback();
26
+ }
27
+ });
28
+ // Add config as webpack DefinePlugin globals
29
+ compiler.hooks.compilation.tap(pluginName, (compilation) => {
30
+ const defines = core.createDefines(loadedConfig);
31
+ // Inject defines into compilation
32
+ Object.entries(defines).forEach(([key, value]) => {
33
+ compilation.hooks.processAssets.tap({
34
+ name: pluginName,
35
+ stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
36
+ }, () => {
37
+ // Make defines available globally
38
+ compilation.valueCacheVersions.set(key, value);
39
+ });
40
+ });
41
+ });
42
+ // Emit CSS file as asset
43
+ compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
44
+ compilation.hooks.processAssets.tap({
45
+ name: pluginName,
46
+ stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
47
+ }, () => {
48
+ if (cssVariables && cssVariables.length > 0) {
49
+ const filename = core.getCSSOutputFilename();
50
+ compilation.emitAsset(filename, new sources.RawSource(cssVariables));
51
+ if (core.isVerbose()) {
52
+ console.log(`✅ Generated ${filename}`);
53
+ }
54
+ }
55
+ });
56
+ });
57
+ // Watch config file for changes
58
+ compiler.hooks.afterCompile.tap(pluginName, (compilation) => {
59
+ const root = compiler.context || process.cwd();
60
+ const configFile = core.findConfigFile(root);
61
+ if (configFile) {
62
+ compilation.fileDependencies.add(configFile);
63
+ }
64
+ });
65
+ },
66
+ };
67
+ }
68
+ //# sourceMappingURL=webpack.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"webpack.js","sourceRoot":"","sources":["../../config/webpack.ts"],"names":[],"mappings":"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"}
@@ -1,15 +1,14 @@
1
1
  import { default as React } from 'react';
2
- import { BaseThemeName, ThemeConfig } from '../types';
2
+ import { ThemeConfig, ThemeName } from '../types';
3
3
  import { TooltipProviderProps } from '@radix-ui/react-tooltip';
4
4
  import { ToastProviderProps } from '../../components/Toast/Toast';
5
5
 
6
6
  interface ServerClickUIProviderProps {
7
7
  children: React.ReactNode;
8
- theme?: BaseThemeName;
8
+ theme?: ThemeName;
9
9
  config?: ThemeConfig;
10
- enableSystemMode?: boolean;
11
10
  tooltipConfig?: Omit<TooltipProviderProps, "children">;
12
11
  toastConfig?: Omit<ToastProviderProps, "children">;
13
12
  }
14
- export declare const ServerClickUIProvider: ({ children, theme, config, enableSystemMode, tooltipConfig, toastConfig, }: ServerClickUIProviderProps) => import("react/jsx-runtime").JSX.Element;
13
+ export declare const ServerClickUIProvider: ({ children, theme, config, tooltipConfig, toastConfig, }: ServerClickUIProviderProps) => import("react/jsx-runtime").JSX.Element;
15
14
  export {};
@@ -1,4 +1,4 @@
1
1
  declare global {
2
2
  const __CLICK_UI_CONFIG__: unknown;
3
3
  }
4
- export declare const getThemeConfig: () => unknown;
4
+ export declare const getThemeConfig: () => {} | null;
@@ -1,7 +1,7 @@
1
- export type { Theme, ThemeName, ThemeConfig, ThemeContextValue, BaseThemeName, ResolvedThemeName, DeepPartial, NestedJSONObject, ConfigThemeValues, } from './types';
1
+ export type { Theme, ThemeName, ThemeConfig, ThemeContextValue, BaseThemeName, ResolvedThemeName, DeepPartial, TypedTheme, NestedJSONObject, ConfigThemeValues, } from './types';
2
2
  export { ClickUIProvider, ServerClickUIProvider } from './ClickUIProvider';
3
3
  export { useCUITheme, useCUITheme as useClickUITheme, } from './ClickUIProvider';
4
- export { getBaseTheme, loadCustomConfig, deepMerge, } from './utils';
4
+ export { getBaseTheme, getThemeValue, loadCustomConfig, deepMerge, } from './utils';
5
5
  export { generateCSSVariables, injectThemeStyles } from './utils/css-generator';
6
6
  export { getThemeConfig } from './config';
7
7
  export type { ThemeName as ClickUIThemeName } from './types';
@@ -10,15 +10,22 @@ export type ConfigThemeValues = Theme | NestedJSONObject;
10
10
  export type DeepPartial<T> = {
11
11
  [P in keyof T]?: T[P] extends object ? T[P] extends (infer U)[] ? DeepPartial<U>[] : DeepPartial<T[P]> : T[P];
12
12
  };
13
- type FlexibleTheme = DeepPartial<Theme> & Record<string, string | number | NestedJSONObject>;
13
+ type FlexibleTheme = NestedJSONObject;
14
+ export type TypedTheme = DeepPartial<Theme>;
14
15
  export interface ThemeConfig {
15
16
  theme?: FlexibleTheme;
16
- systemModeOverrides?: {
17
- light?: FlexibleTheme;
18
- dark?: FlexibleTheme;
19
- };
17
+ dark?: FlexibleTheme;
20
18
  storageKey?: string;
21
- enableSystemMode?: boolean;
19
+ tooltipConfig?: {
20
+ delayDuration?: number;
21
+ skipDelayDuration?: number;
22
+ disableHoverableContent?: boolean;
23
+ };
24
+ toastConfig?: {
25
+ duration?: number;
26
+ swipeDirection?: "right" | "left" | "up" | "down";
27
+ swipeThreshold?: number;
28
+ };
22
29
  }
23
30
  export interface ThemeContextValue {
24
31
  themeName: ThemeName;
@@ -4,5 +4,12 @@ import { Theme, BaseThemeName, ThemeConfig } from './types';
4
4
  * Get base theme by name (synchronous with fallback)
5
5
  */
6
6
  export declare const getBaseTheme: (themeName: BaseThemeName) => Theme;
7
+ /**
8
+ * Helper to get a specific value from a theme by path
9
+ * @example
10
+ * getThemeValue(lightTheme, "click.button.primary.background.default")
11
+ * // Returns: "#007bff"
12
+ */
13
+ export declare const getThemeValue: (theme: Theme | Record<string, any>, path: string) => unknown;
7
14
  export declare const loadCustomConfig: () => Promise<ThemeConfig | null>;
8
15
  export declare const deepMerge: (target: any, source: any) => any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clickhouse/click-ui",
3
- "version": "0.0.234-sc-deprecation.8",
3
+ "version": "0.0.234-sc-deprecation.10",
4
4
  "description": "Official ClickHouse design system react library",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
@@ -31,6 +31,27 @@
31
31
  "./theme": {
32
32
  "types": "./dist/theme/index.d.ts"
33
33
  },
34
+ "./config": {
35
+ "types": "./dist/config/index.d.ts",
36
+ "import": "./dist/config/index.js",
37
+ "require": "./dist/config/index.js"
38
+ },
39
+ "./config/vite": {
40
+ "types": "./dist/config/vite.d.ts",
41
+ "import": "./dist/config/vite.js"
42
+ },
43
+ "./config/webpack": {
44
+ "types": "./dist/config/webpack.d.ts",
45
+ "import": "./dist/config/webpack.js"
46
+ },
47
+ "./config/rollup": {
48
+ "types": "./dist/config/rollup.d.ts",
49
+ "import": "./dist/config/rollup.js"
50
+ },
51
+ "./config/next": {
52
+ "types": "./dist/config/next.d.ts",
53
+ "import": "./dist/config/next.js"
54
+ },
34
55
  "./style.css": "./dist/style.css"
35
56
  },
36
57
  "main": "./dist/click-ui.umd.js",
@@ -47,8 +68,9 @@
47
68
  },
48
69
  "homepage": "https://clickhouse.com",
49
70
  "scripts": {
50
- "build": "tsc && vite build && npm run build:bundled",
71
+ "build": "tsc && npm run build:config && vite build && npm run build:bundled",
51
72
  "build:bundled": "vite build -- bundled",
73
+ "build:config": "tsc --project tsconfig.config.json",
52
74
  "build-storybook": "storybook build",
53
75
  "build:watch": "watch 'npm run build' ./src",
54
76
  "chromatic": "npx chromatic",
@@ -100,11 +122,13 @@
100
122
  "@testing-library/react": "^15.0.7",
101
123
  "@testing-library/user-event": "^14.5.2",
102
124
  "@tokens-studio/sd-transforms": "^0.10.3",
125
+ "@types/node": "^20.0.0",
103
126
  "@types/react": "^18.3.2",
104
127
  "@types/react-dom": "^18.3.0",
105
128
  "@types/react-syntax-highlighter": "^15.5.13",
106
129
  "@types/react-window": "^1.8.8",
107
130
  "@types/sortablejs": "^1.15.2",
131
+ "@types/webpack": "^5.28.0",
108
132
  "@typescript-eslint/eslint-plugin": "^7.16.1",
109
133
  "@typescript-eslint/parser": "^7.16.1",
110
134
  "@vitejs/plugin-react": "^4.2.1",
@@ -115,7 +139,9 @@
115
139
  "eslint-plugin-react-refresh": "^0.4.7",
116
140
  "eslint-plugin-storybook": "^9.0.18",
117
141
  "jsdom": "^24.0.0",
142
+ "next": "^15.5.5",
118
143
  "prettier": "^3.6.2",
144
+ "rollup": "^4.52.4",
119
145
  "sass-embedded": "^1.93.0",
120
146
  "storybook": "^9.0.18",
121
147
  "storybook-addon-pseudo-states": "^9.0.18",
@@ -124,7 +150,8 @@
124
150
  "vite": "^5.2.11",
125
151
  "vite-plugin-dts": "^3.9.1",
126
152
  "vitest": "^2.0.3",
127
- "watch": "^1.0.2"
153
+ "watch": "^1.0.2",
154
+ "webpack": "^5.102.1"
128
155
  },
129
156
  "peerDependencies": {
130
157
  "dayjs": "^1.11.18",