@clickhouse/click-ui 0.2.0-rc.5 → 0.2.0-rc.7

package/dist/esm/utils/localStorage.js

@@ -1,4 +1,6 @@
-const CUI_THEME_STORAGE_KEY = "cui-theme";
+import config from '../theme/theme.config.json.js';
+
+const CUI_THEME_STORAGE_KEY = config.storageKey;
 
 export { CUI_THEME_STORAGE_KEY };
 //# sourceMappingURL=localStorage.js.map

package/dist/esm/utils/localStorage.js.map

@@ -1 +1 @@
-{"version":3,"file":"localStorage.js","sources":["../../../src/utils/localStorage.ts"],"sourcesContent":["export const CUI_THEME_STORAGE_KEY = 'cui-theme';\n"],"names":["CUI_THEME_STORAGE_KEY"],"mappings":"AAAO,MAAMA,qBAAAA,GAAwB;;;;"}
+{"version":3,"file":"localStorage.js","sources":["../../../src/utils/localStorage.ts"],"sourcesContent":["// WARN: The storage key is shared with .scripts/js/generate-token\n// which is a nodejs script. At the moment opted for json instead\n// of adding support for `js` files, but json means importing the\n// whole file (the file shouldn't grow, so should be alright?)\nimport config from '@/theme/theme.config.json' with { type: 'json' };\n\nexport const CUI_THEME_STORAGE_KEY = config.storageKey;\n"],"names":["CUI_THEME_STORAGE_KEY","config","storageKey"],"mappings":";;AAMO,MAAMA,wBAAwBC,MAAAA,CAAOC;;;;"}

package/dist/types/components/Button/Button.d.ts

@@ -1,2 +1,25 @@
-import { ButtonProps } from './Button.types';
-export declare const Button: ({ type, iconLeft, iconRight, align, children, fillWidth, label, loading, disabled, ...delegated }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+import { IconName } from '../Icon';
+export type ButtonType = 'primary' | 'secondary' | 'empty' | 'danger';
+type Alignment = 'center' | 'left';
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /** The visual style variant of the button */
+    type?: ButtonType;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** The text label to display in the button */
+    label?: string;
+    /** Icon to display on the left side of the label */
+    iconLeft?: IconName;
+    /** Icon to display on the right side of the label */
+    iconRight?: IconName;
+    /** Alignment of the button content */
+    align?: Alignment;
+    /** Whether the button should fill the full width of its container */
+    fillWidth?: boolean;
+    /** Whether to show a loading state */
+    loading?: boolean;
+    /** Whether the button should be focused on mount */
+    autoFocus?: boolean;
+}
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/types/components/DatePicker/DatePicker.d.ts

@@ -1,2 +1,2 @@
 import { DatePickerProps } from './DatePicker.types';
-export declare const DatePicker: ({ date, disabled, futureDatesDisabled, onSelectDate, placeholder, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: ({ allowOnlyDatesList, date, disabled, futureDatesDisabled, onSelectDate, placeholder, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DatePicker/DatePicker.types.d.ts

@@ -1,4 +1,5 @@
 export interface DatePickerProps {
+    allowOnlyDatesList?: Array<Date>;
     date?: Date;
     disabled?: boolean;
     futureDatesDisabled?: boolean;

package/dist/types/components/DatePicker/DateTimeRangePicker.d.ts

@@ -1,8 +1,11 @@
 import { DateRangeListItem } from './utils';
 type OpenDirection = 'left' | 'right';
+export type Tab = 'startDate' | 'endDate';
 export interface DateTimeRangePickerProps {
-    endDate?: Date;
+    closeOnDateRangeSelected?: boolean;
+    defaultActiveTab?: Tab;
     disabled?: boolean;
+    endDate?: Date;
     futureDatesDisabled?: boolean;
     futureStartDatesDisabled?: boolean;
     onSelectDateRange: (selectedStartDate: Date, selectedEndDate: Date) => void;
@@ -13,5 +16,5 @@ export interface DateTimeRangePickerProps {
     shouldShowSeconds?: boolean;
     startDate?: Date;
 }
-export declare const DateTimeRangePicker: ({ endDate, startDate, disabled, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, onSelectDateRange, openDirection, placeholder, predefinedTimesList, shouldShowSeconds, }: DateTimeRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTimeRangePicker: ({ closeOnDateRangeSelected, defaultActiveTab, disabled, endDate, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, onSelectDateRange, openDirection, placeholder, predefinedTimesList, shouldShowSeconds, startDate, }: DateTimeRangePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/DatePicker/index.d.ts

@@ -3,4 +3,4 @@ export { DateRangePicker } from './DateRangePicker';
 export { DateTimeRangePicker } from './DateTimeRangePicker';
 export type { DatePickerProps } from './DatePicker.types';
 export type { DateRangePickerProps } from './DateRangePicker';
-export type { DateTimeRangePickerProps } from './DateTimeRangePicker';
+export type { DateTimeRangePickerProps, Tab } from './DateTimeRangePicker';

package/dist/types/components/DatePicker/utils.d.ts

@@ -20,5 +20,6 @@ export declare const timeFormatter: Intl.DateTimeFormat;
 export declare const headerDateFormatter: Intl.DateTimeFormat;
 export declare const getPredefinedMonthsForDateRangePicker: (numberOfMonths: number) => DateRange[];
 export declare const getPredefinedTimePeriodsForDateTimePicker: () => DateRangeListItem[];
+export declare const getNextNDatesForDatePickerAllowOnlyList: (numberOfDays: number) => Date[];
 export declare const datesAreWithinMaxRange: (startDate: Date, endDate: Date, maxRangeLength: number) => boolean;
 export declare const isDateRangeTheWholeMonth: ({ startDate, endDate }: DateRange) => boolean;

package/dist/types/lib/cva.d.ts

@@ -0,0 +1,3 @@
+import { ClassValue } from 'clsx';
+export { cva, type VariantProps } from 'class-variance-authority';
+export declare const cn: (...inputs: ClassValue[]) => string;

package/dist/types/theme/theme.config.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "storageKey": "cui-theme"
+}
+;
+
+export default _default;

package/dist/types/theme/theme.core.d.ts

@@ -1907,7 +1907,6 @@ export declare const themes: {
                             };
                             stroke: {
                                 default: string;
-                                focus: string;
                             };
                         };
                         format: {
@@ -1938,7 +1937,6 @@ export declare const themes: {
                             };
                             stroke: {
                                 default: string;
-                                focus: string;
                             };
                         };
                     };
@@ -5709,7 +5707,6 @@ export declare const themes: {
                             };
                             stroke: {
                                 default: string;
-                                focus: string;
                             };
                         };
                         format: {
@@ -5737,10 +5734,6 @@ export declare const themes: {
                                 active: string;
                                 disabled: string;
                             };
-                            stroke: {
-                                default: string;
-                                focus: string;
-                            };
                         };
                     };
                 };

package/dist/types/theme/tokens/variables.dark.d.ts

@@ -1904,7 +1904,6 @@ declare const theme: {
                         };
                         stroke: {
                             default: string;
-                            focus: string;
                         };
                     };
                     format: {
@@ -1935,7 +1934,6 @@ declare const theme: {
                         };
                         stroke: {
                             default: string;
-                            focus: string;
                         };
                     };
                 };

package/dist/types/theme/tokens/variables.light.d.ts

@@ -1889,7 +1889,6 @@ declare const theme: {
                         };
                         stroke: {
                             default: string;
-                            focus: string;
                         };
                     };
                     format: {
@@ -1917,10 +1916,6 @@ declare const theme: {
                             active: string;
                             disabled: string;
                         };
-                        stroke: {
-                            default: string;
-                            focus: string;
-                        };
                     };
                 };
             };

package/dist/types/utils/dom.d.ts

@@ -1,5 +1,5 @@
 import { ThemeName } from '../theme/theme.types';
-export declare const THEME_ATTRIBUTE = "data-cui-theme";
+export declare const THEME_ATTRIBUTE: string;
 export declare const getRootElement: () => HTMLElement | undefined;
 export declare const setRootThemeAttribute: (theme: ThemeName) => void;
 export declare const removeRootThemeAttribute: () => void;

package/dist/types/utils/localStorage.d.ts

@@ -1 +1 @@
-export declare const CUI_THEME_STORAGE_KEY = "cui-theme";
+export declare const CUI_THEME_STORAGE_KEY: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.2.0-rc.5",
+  "version": "v0.2.0-rc.7",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",
@@ -10,7 +10,9 @@
   "main": "./dist/cjs/index.cjs",
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
@@ -375,8 +377,12 @@
     "format:fix": ".scripts/bash/format --write",
     "generate:exports": ".scripts/js/generate-exports",
     "generate:tokens": "node ./.scripts/js/generate-tokens.js && yarn format:fix src/theme/tokens/**/*.ts",
-    "lint": "eslint src --report-unused-disable-directives",
-    "lint:fix": "eslint src --report-unused-disable-directives --fix",
+    "lint": "yarn lint:code && yarn lint:css",
+    "lint:fix": "yarn lint:code:fix && yarn lint:css:fix",
+    "lint:code": "eslint src --report-unused-disable-directives",
+    "lint:code:fix": "eslint src --report-unused-disable-directives --fix",
+    "lint:css": "stylelint \"src/**/*.css\"",
+    "lint:css:fix": "stylelint \"src/**/*.css\" --fix",
     "prepare": "husky",
     "prettify": "yarn format:fix",
     "preview": "vite preview",
@@ -385,10 +391,10 @@
     "storybook:serve": "yarn dlx http-server .storybook/out",
     "test": "vitest",
     "test:chromatic": "yarn dlx chromatic",
-    "test:visual": "playwright test",
-    "test:visual:report": "playwright show-report",
-    "test:visual:ui": "playwright test --ui",
-    "test:visual:update": "playwright test --update-snapshots",
+    "test:visual": ".scripts/bash/playwright-docker",
+    "test:visual:report": ".scripts/bash/playwright-docker report",
+    "test:visual:ui": ".scripts/bash/playwright-docker ui",
+    "test:visual:update": ".scripts/bash/playwright-docker update",
     "test:watch": "DEBUG_PRINT_LIMIT=100000 vitest --watch",
     "typecheck": "tsc --noEmit"
   },
@@ -410,6 +416,8 @@
     "@radix-ui/react-tabs": "1.1.1",
     "@radix-ui/react-toast": "1.2.2",
     "@radix-ui/react-tooltip": "1.1.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
     "lodash-es": "^4.17.23",
     "react-sortablejs": "^6.1.4",
@@ -433,6 +441,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@tokens-studio/sd-transforms": "^1.2.0",
     "@types/eslint-plugin-react-refresh": "^0.4.0",
+    "@types/fs-extra": "^11.0.4",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.10.1",
     "@types/react": "18.3.1",
@@ -451,9 +460,13 @@
     "eslint-plugin-react-hooks": "^5",
     "eslint-plugin-react-refresh": "0.4.7",
     "eslint-plugin-storybook": "^10.1.10",
+    "fs-extra": "^11.3.4",
+    "glob": "^13.0.6",
     "globals": "^16.5.0",
     "husky": "^9.1.7",
     "jsdom": "^24.0.0",
+    "postcss": "^8.5.8",
+    "postcss-modules": "^6.0.1",
     "prettier": "3.7.4",
     "prop-types": "^15.8.1",
     "react": "18.3.1",
@@ -463,6 +476,10 @@
     "storybook": "^10.1.10",
     "storybook-addon-pseudo-states": "^10.1.10",
     "style-dictionary": "^5.0.0",
+    "stylelint": "^17.5.0",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-no-unsupported-browser-features": "^8.1.1",
+    "stylelint-order": "^8.1.1",
     "stylis": "^4.3.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.5.3",