@clickhouse/click-ui 0.0.1 → 0.0.3

package/.eslintrc.cjs

@@ -19,6 +19,7 @@ module.exports = {
     "react-refresh/only-export-components": "warn",
     "no-multiple-empty-lines": "error",
     quotes: ["error", "double"],
+    "arrow-parens": ["error", "as-needed"],
     "prefer-arrow-functions/prefer-arrow-functions": [
       "warn",
       {

package/.prettierrc

@@ -0,0 +1,14 @@
+{
+  "jsxBracketSameLine": false,
+  "bracketSameLine": false,
+  "jsxSingleQuote": false,
+  "parser": "typescript",
+  "printWidth": 90,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "singleAttributePerLine": true,
+  "arrowParens": "avoid"
+}

package/.storybook/main.ts

@@ -14,5 +14,6 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
+  staticDirs: ["../public"],
 };
 export default config;

package/.storybook/manager.ts

@@ -0,0 +1,11 @@
+// .storybook/manager.js
+
+import { addons } from "@storybook/manager-api";
+import theme from "./theme";
+
+addons.setConfig({
+  theme,
+  sidebar: {
+    showRoots: true,
+  }
+});

package/.storybook/preview-head.html

@@ -1,4 +1,2 @@
-<link
-  href="https://fonts.googleapis.com/css?family=Inter:400;700;900&display=swap"
-  rel="stylesheet"
-/>
+<link rel="preconnect" href="https://rsms.me/">
+<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

package/.storybook/preview.tsx

@@ -4,15 +4,15 @@ import "../src/styles/variables.css";
 import { Decorator } from "@storybook/react";
 import { ThemeProvider } from "../src/theme";
 import styled from "styled-components";
+import { themes } from "@storybook/theming";
 
 const ThemeBlock = styled.div<{ left?: boolean; bfill?: boolean }>(
   ({ left, bfill: fill, theme }) => `
       position: absolute;
-      top: 0;
+      top: 0.5rem;
       left: ${left || fill ? 0 : "50vw"};
-      border-right: ${left ? "1px solid #202020" : "none"};
       right: ${left ? "50vw" : 0};
-      width: ${fill ? "100vw" : "50vw"};
+      width: 96vw;
       height: 100vh;
       bottom: 0;
       overflow: auto;
@@ -44,7 +44,7 @@ const withTheme: Decorator = (StoryFn, context) => {
   const theme = parameters?.theme || context.globals.theme;
   return (
     <ThemeProvider theme={theme}>
-      <ThemeBlock bfill>
+      <ThemeBlock left>
         <StoryFn />
       </ThemeBlock>
     </ThemeProvider>
@@ -53,6 +53,12 @@ const withTheme: Decorator = (StoryFn, context) => {
 
 const preview: Preview = {
   parameters: {
+    options: {
+      storySort: {
+        method: "alphabetical",
+        order: [],
+      },
+    },
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
@@ -60,6 +66,9 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    docs: {
+      theme: themes.light,
+    },
   },
 };
 

package/.storybook/theme.ts

@@ -0,0 +1,16 @@
+// .storybook/YourTheme.js
+
+import { create } from "@storybook/theming/create";
+
+export default create({
+  base: "light",
+  brandTitle: "ClickUI Storybook",
+  brandUrl: "/",
+  brandImage: "/logo.svg",
+  appBg: "white",
+  brandTarget: "_self",
+  fontBase:  `"Inter", "SF Pro Display", -apple-system,
+  BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+  "Open Sans", "Helvetica Neue", sans-serif;`,
+  fontCode: `"Inconsolata", "SFMono Regular", monospace;`,
+});

package/build-tokens.js

@@ -1,11 +1,11 @@
 import _ from "lodash";
-import {registerTransforms,transforms} from"@tokens-studio/sd-transforms";
+import { registerTransforms, transforms } from "@tokens-studio/sd-transforms";
 import StyleDictionary from "style-dictionary";
 
 registerTransforms(StyleDictionary);
 const themes = ["classic", "dark", "light"];
 
-function generateThemeFromDictionary (dictionary, valueFunc = (value) => value) {
+function generateThemeFromDictionary(dictionary, valueFunc = (value) => value) {
   const theme = {};
   dictionary.allTokens.forEach((token) => {
     _.setWith(theme, token.name, valueFunc(token.value), Object)
@@ -27,7 +27,7 @@ StyleDictionary.registerTransform({
 
 StyleDictionary.registerFormat({
   name: "ThemeFormat",
-  formatter: function({ dictionary, platform, options, file }) {
+  formatter: function ({ dictionary, platform, options, file }) {
     const theme = generateThemeFromDictionary(dictionary);
     return JSON.stringify(theme, null, 2);
   }
@@ -35,11 +35,11 @@ StyleDictionary.registerFormat({
 
 StyleDictionary.registerFormat({
   name: "TypescriptFormat",
-  formatter: function({ dictionary, platform, options, file }) {
+  formatter: function ({ dictionary, platform, options, file }) {
     const theme = generateThemeFromDictionary(dictionary, (value) => typeof value);
-    
+
     return `
-      export interface Theme ${JSON.stringify(theme, null, 2).replaceAll("\"string\"", "string")}
+      export interface Theme ${JSON.stringify(theme, null, 2).replaceAll("\"string\"", "string").replaceAll("\"number\"", "number")}
     `
   }
 });

package/dist/App.d.ts

@@ -0,0 +1,2 @@
+declare const App: () => import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/assets/RightArrow/RightArrow.d.ts

@@ -0,0 +1 @@
+export declare const RightArrow: () => import("react/jsx-runtime").JSX.Element;

package/dist/assets/S3Logo/S3Logo.d.ts

@@ -0,0 +1 @@
+export declare const S3Logo: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { IconName } from '../../components/Icon/types';
+type Size = "small" | "medium" | "large";
+export interface AccordionProps extends SizeProp {
+    title: string;
+    icon?: IconName;
+    iconSize?: Size;
+    children: React.ReactNode;
+}
+interface SizeProp {
+    size?: Size;
+}
+declare const SidebarAccordion: import("styled-components").IStyledComponent<"web", {
+    title: string;
+    icon?: IconName | undefined;
+    iconSize?: Size | undefined;
+    children: React.ReactNode;
+    size?: Size | undefined;
+}>;
+declare const AccordionToExport: import("styled-components").IStyledComponent<"web", {
+    title: string;
+    icon?: IconName | undefined;
+    iconSize?: Size | undefined;
+    children: React.ReactNode;
+    size?: Size | undefined;
+}>;
+export { AccordionToExport as Accordion, SidebarAccordion };

package/dist/components/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+declare const _default: {
+    component: import("styled-components").IStyledComponent<"web", {
+        title: string;
+        icon?: import("../Icon/types").IconName | undefined;
+        iconSize?: ("small" | "medium" | "large") | undefined;
+        children: import("react").ReactNode;
+        size?: ("small" | "medium" | "large") | undefined;
+    }>;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Playground: {
+    args: {
+        title: string;
+        theme: string;
+        size: string;
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/components/Accordion/Accordion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,16 @@
+type AlertSize = "small" | "medium";
+type AlertState = "neutral" | "success" | "warning" | "danger" | "info";
+export type AlertProps = {
+    state?: AlertState;
+    title?: string;
+    text: string;
+    size?: AlertSize;
+    showIcon?: boolean;
+    dismissible?: boolean;
+};
+declare const Alert: ({ text, title, size, state, showIcon, dismissible, ...delegated }: AlertProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const DangerAlert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;
+declare const InfoAlert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;
+declare const SuccessAlert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;
+declare const WarningAlert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export { Alert, DangerAlert, InfoAlert, SuccessAlert, WarningAlert };

package/dist/components/Alert/Alert.stories.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    component: ({ text, title, size, state, showIcon, dismissible, ...delegated }: import('../../components/Alert/Alert').AlertProps) => import("react/jsx-runtime").JSX.Element | null;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Playground: {
+    args: {
+        state: string;
+        text: string;
+    };
+};

package/dist/components/Alert/Alert.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,7 @@
+type TextSize = "md" | "sm";
+export type AvatarProps = {
+    text: string;
+    textSize?: TextSize;
+};
+declare const Avatar: ({ text, textSize, ...delegated }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export { Avatar };

package/dist/components/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    component: ({ text, textSize, ...delegated }: import("./Avatar").AvatarProps) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Playground: {
+    args: {
+        text: string;
+    };
+};

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,16 @@
+export type BadgeState = "default" | "success" | "neutral" | "danger" | "disabled" | "warning" | "info";
+export type BadgeSize = "sm" | "md";
+export interface BadgeProps {
+    text: string;
+    state?: BadgeState;
+    size?: BadgeSize;
+}
+export interface DismissibleBadge extends BadgeProps {
+    dismissible: true;
+    onClose: () => void;
+}
+export interface NonDismissibleBadge extends BadgeProps {
+    dismissible?: never;
+    onClose?: never;
+}
+export declare const Badge: ({ text, state, size, dismissible, onClose, }: NonDismissibleBadge | DismissibleBadge) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Badge/Badge.stories.d.ts

@@ -0,0 +1,34 @@
+declare const _default: {
+    component: ({ text, state, size, dismissible, onClose, }: import("./Badge").DismissibleBadge | import("./Badge").NonDismissibleBadge) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+    argTypes: {
+        size: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        state: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        dismissible: {
+            options: boolean[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Playground: {
+    args: {
+        text: string;
+        state: string;
+        size: string;
+        dismissible: boolean;
+    };
+};

package/dist/components/Badge/Badge.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/BigStat/BigStat.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export type bigStatState = "default";
+export type bigStatSize = "sm" | "lg";
+export interface BigStatProps {
+    label: React.ReactNode;
+    title: React.ReactNode;
+    state?: bigStatState;
+    size?: bigStatSize;
+}
+export declare const BigStat: ({ label, title, size, state, }: BigStatProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BigStat/BigStat.stories.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    component: ({ label, title, size, state, }: import("./BigStat").BigStatProps) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+    size: {
+        options: string[];
+        control: {
+            type: string;
+        };
+    };
+};
+export default _default;
+export declare const Playground: {
+    args: {
+        label: string;
+        title: string;
+        state: string;
+        size: string;
+    };
+};

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { IconName } from '../../components/Icon/types';
+type ButtonType = "primary" | "secondary" | "danger";
+type Alignment = "center" | "left";
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    type?: ButtonType;
+    disabled?: boolean;
+    label?: string;
+    iconLeft?: IconName;
+    iconRight?: IconName;
+    align?: Alignment;
+    width?: string;
+    height?: string;
+}
+export interface StyledButtonProps {
+    styleType: ButtonType;
+    disabled?: boolean;
+    align?: Alignment;
+    width?: string;
+    height?: string;
+}
+export declare const Button: ({ type, iconLeft, iconRight, label, align, children, ...delegated }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,28 @@
+declare const _default: {
+    title: string;
+    component: ({ type, iconLeft, iconRight, label, align, children, ...delegated }: import("./Button").ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    argTypes: {
+        type: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        align: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Playground: {
+    args: {
+        type: string;
+        disabled: boolean;
+        label: string;
+        align: string;
+    };
+};

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

@@ -0,0 +1 @@
+export {};

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,6 @@
+export interface ButtonGroupProps {
+    labels: string[];
+    activeIndex?: number;
+    onClick?: (index: number) => void;
+}
+export declare const ButtonGroup: ({ labels, activeIndex, onClick, }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ButtonGroup/ButtonGroup.stories.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    component: ({ labels, activeIndex, onClick, }: import("./ButtonGroup").ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Playground: {
+    args: {
+        labels: string[];
+        activeIndex: number;
+    };
+};

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,10 @@
+export type CardState = "active" | "disabled";
+export interface CardProps {
+    title: string;
+    badgeText: string;
+    description: string;
+    infoUrl: string;
+    infoText: string;
+    state?: CardState;
+}
+export declare const Card: ({ title, badgeText, description, infoUrl, infoText, state, }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/Card.stories.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {
+    component: ({ title, badgeText, description, infoUrl, infoText, state, }: import("./Card").CardProps) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Playground: {
+    args: {
+        title: string;
+        badgeText: string;
+        description: string;
+        infoUrl: string;
+        infoText: string;
+        state: string;
+    };
+};

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,5 @@
+import * as RadixCheckbox from "@radix-ui/react-checkbox";
+export interface CheckboxProps extends RadixCheckbox.CheckboxProps {
+    label?: string;
+}
+export declare const Checkbox: ({ id, label, ...delegated }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,29 @@
+declare const _default: {
+    component: ({ checked, ...props }: {
+        checked: "checked" | "default" | "unchecked";
+        disabled: boolean;
+        label?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+    argTypes: {
+        checked: {
+            control: string;
+            options: string[];
+        };
+        disabled: {
+            control: string;
+        };
+        label: {
+            control: string;
+        };
+    };
+};
+export default _default;
+export declare const Playground: {
+    args: {
+        label: string;
+        disabled: boolean;
+        checked: string;
+    };
+};

package/dist/components/Checkbox/Checkbox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,38 @@
+import * as RightMenu from "@radix-ui/react-context-menu";
+export declare const ContextMenu: {
+    (props: RightMenu.ContextMenuProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: {
+        (props: RightMenu.ContextMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    SubTrigger: {
+        ({ children, ...props }: RightMenu.ContextMenuSubTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ sub, children, showArrow, ...props }: ContextMenuContentProps | ContextMenuSubContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Group: {
+        (props: RightMenu.ContextMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Sub: {
+        ({ ...props }: RightMenu.ContextMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ ...props }: RightMenu.ContextMenuItemProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type ArrowProps = {
+    showArrow?: boolean;
+};
+type ContextMenuContentProps = RightMenu.MenuContentProps & {
+    sub?: true;
+} & ArrowProps;
+type ContextMenuSubContentProps = RightMenu.MenuSubContentProps & {
+    sub?: never;
+} & ArrowProps;
+export default ContextMenu;

package/dist/components/ContextMenu/ContextMenu.stories.d.ts

@@ -0,0 +1,30 @@
+import { ContextMenuProps } from "@radix-ui/react-context-menu";
+interface Props extends ContextMenuProps {
+    disabled?: boolean;
+    showArrow?: boolean;
+    side: "top" | "right" | "left" | "bottom";
+}
+declare const _default: {
+    component: ({ showArrow, disabled, side, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+    argTypes: {
+        disabled: {
+            control: string;
+        };
+        showArrow: {
+            control: string;
+        };
+        side: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default _default;
+export declare const Playground: {
+    args: {
+        showArrow: boolean;
+        side: string;
+    };
+};

package/dist/components/ContextMenu/ContextMenu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,38 @@
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+export declare const Dropdown: {
+    (props: DropdownMenu.DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: {
+        ({ sub, ...props }: DropdownSubTriggerProps | DropdownTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ sub, children, showArrow, ...props }: DropdownContentProps | DropdownSubContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Group: {
+        (props: DropdownMenu.DropdownMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Sub: {
+        ({ ...props }: DropdownMenu.DropdownMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ ...props }: DropdownMenu.DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+interface SubDropdownProps {
+    sub?: true;
+}
+interface MainDropdownProps {
+    sub?: never;
+}
+type DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps & SubDropdownProps;
+type DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & MainDropdownProps;
+export type ArrowProps = {
+    showArrow?: boolean;
+};
+type DropdownContentProps = DropdownMenu.MenuContentProps & SubDropdownProps & ArrowProps;
+type DropdownSubContentProps = DropdownMenu.MenuSubContentProps & MainDropdownProps & ArrowProps;
+export default Dropdown;