@rovula/ui 0.0.52 → 0.0.53

package/dist/esm/types/components/Tabs/Tabs.d.ts

@@ -1,9 +1,12 @@
 import React from "react";
+import "./Tabs.css";
 type Tab = {
     label: string;
     startTabContent?: React.ReactElement;
     endTabContent?: React.ReactElement;
     content: React.ReactNode;
+    disabled?: boolean;
+    isLoading?: boolean;
 };
 type TabsProps = {
     tabs: Tab[];
@@ -11,12 +14,22 @@ type TabsProps = {
     tabBarSize?: number;
     tabMode?: "start" | "justify";
     enableBorderLine?: boolean;
+    enableAddTabButton?: boolean;
+    keepIconSpace?: boolean;
     className?: string;
     tabBarClassName?: string;
+    tabBarContainerClassName?: string;
+    tabBarWrapperClassName?: string;
     tabButtonClassName?: string;
     tabButtonActiveClassName?: string;
     tabContentClassName?: string;
-    borderSliderClassname?: string;
+    addTabButtonWrapperClassName?: string;
+    borderSliderClassName?: string;
+    leftAction?: React.ReactNode;
+    rightAction?: React.ReactNode;
+    disabled?: boolean;
+    onAddTab?: () => void;
+    onTabChange?: (tabIndex: number) => void;
 };
 declare const Tabs: React.FC<TabsProps>;
 export default Tabs;

package/dist/esm/types/components/Tabs/Tabs.stories.d.ts

@@ -7,17 +7,29 @@ declare const meta: {
             startTabContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
             endTabContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
             content: React.ReactNode;
+            disabled?: boolean | undefined;
+            isLoading?: boolean | undefined;
         }[];
         initialTab?: number | undefined;
         tabBarSize?: number | undefined;
         tabMode?: "start" | "justify" | undefined;
         enableBorderLine?: boolean | undefined;
+        enableAddTabButton?: boolean | undefined;
+        keepIconSpace?: boolean | undefined;
         className?: string | undefined;
         tabBarClassName?: string | undefined;
+        tabBarContainerClassName?: string | undefined;
+        tabBarWrapperClassName?: string | undefined;
         tabButtonClassName?: string | undefined;
         tabButtonActiveClassName?: string | undefined;
         tabContentClassName?: string | undefined;
-        borderSliderClassname?: string | undefined;
+        addTabButtonWrapperClassName?: string | undefined;
+        borderSliderClassName?: string | undefined;
+        leftAction?: React.ReactNode;
+        rightAction?: React.ReactNode;
+        disabled?: boolean | undefined;
+        onAddTab?: (() => void) | undefined;
+        onTabChange?: ((tabIndex: number) => void) | undefined;
     }>;
     tags: string[];
     parameters: {
@@ -29,17 +41,29 @@ declare const meta: {
             startTabContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
             endTabContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
             content: React.ReactNode;
+            disabled?: boolean | undefined;
+            isLoading?: boolean | undefined;
         }[];
         initialTab?: number | undefined;
         tabBarSize?: number | undefined;
         tabMode?: "start" | "justify" | undefined;
         enableBorderLine?: boolean | undefined;
+        enableAddTabButton?: boolean | undefined;
+        keepIconSpace?: boolean | undefined;
         className?: string | undefined;
         tabBarClassName?: string | undefined;
+        tabBarContainerClassName?: string | undefined;
+        tabBarWrapperClassName?: string | undefined;
         tabButtonClassName?: string | undefined;
         tabButtonActiveClassName?: string | undefined;
         tabContentClassName?: string | undefined;
-        borderSliderClassname?: string | undefined;
+        addTabButtonWrapperClassName?: string | undefined;
+        borderSliderClassName?: string | undefined;
+        leftAction?: React.ReactNode;
+        rightAction?: React.ReactNode;
+        disabled?: boolean | undefined;
+        onAddTab?: (() => void) | undefined;
+        onTabChange?: ((tabIndex: number) => void) | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;
@@ -65,3 +89,58 @@ export declare const CustomTab: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const TabWithLeftRightAction: {
+    args: {
+        initialTab: number;
+        tabs: {
+            label: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const AddTabWithScrolling: {
+    args: {
+        initialTab: number;
+        tabs: {
+            label: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+        enableAddTabButton: boolean;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const KeepIconSpacing: {
+    args: {
+        initialTab: number;
+        tabs: {
+            label: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+        keepIconSpace: boolean;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Loading: {
+    args: {
+        initialTab: number;
+        tabs: {
+            isLoading: boolean;
+            startTabContent: import("react/jsx-runtime").JSX.Element;
+            label: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Disabled: {
+    args: {
+        initialTab: number;
+        tabs: {
+            disabled: boolean;
+            label: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/types/components/Tree/Tree.stories.d.ts

@@ -11,3 +11,6 @@ export declare const ControlShowExpandButton: StoryObj<typeof Tree>;
 export declare const Diabled: StoryObj<typeof Tree>;
 export declare const DiabledEachItem: StoryObj<typeof Tree>;
 export declare const ExpandLoadData: StoryObj<typeof Tree>;
+export declare const MaximumLevel: StoryObj<typeof Tree>;
+export declare const Leaf: StoryObj<typeof Tree>;
+export declare const HideCheckboxMode: StoryObj<typeof Tree>;

package/dist/esm/types/components/Tree/example-data.d.ts

@@ -0,0 +1,5 @@
+import { TreeData } from "./type";
+export declare const exampleData: TreeData[];
+export declare const exampleLeafData: TreeData[];
+export declare const exampleData2: TreeData[];
+export declare const sections: TreeData<any>[];

package/dist/esm/types/components/Tree/type.d.ts

@@ -1,18 +1,20 @@
 import { CSSProperties, ReactNode } from "react";
-export type TreeData = {
+export type TreeData<T = {}> = {
     id: string;
     title: string;
     icon?: ReactNode;
     disabled?: boolean;
+    isLeaf?: boolean;
     onClickItem?: (id: string) => void;
-    children?: TreeData[];
+    children?: TreeData<T>[];
     renderIcon?: (params: {
         id: string;
         expanded: boolean;
         selected: boolean;
     }) => ReactNode;
-};
+} & T;
 export interface TreeItemProps extends TreeData {
+    checkable?: boolean;
     isFirstLevel?: boolean;
     isLastItem: boolean;
     disabled?: boolean;
@@ -23,11 +25,14 @@ export interface TreeItemProps extends TreeData {
     horizontalLineWidth?: number;
     expandButtonSize?: number;
     spacing?: number;
+    currentLevel: number;
+    maxLevel?: number;
     checkIsExpanded: (id: string) => boolean;
     checkIsChecked: (id: string) => boolean;
     checkIsLoading?: (id: string) => void;
     onExpandChange?: (id: string, expanded: boolean) => void;
     onCheckedChange?: (id: string, checked: boolean) => void;
+    notifyClickItem?: (id: string) => void;
     renderRightSection?: (params: {
         id: string;
         expanded: boolean;
@@ -77,8 +82,12 @@ export interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRig
     checkedId?: string[];
     loadingId?: string[];
     onExpandChange?: (id: string, expanded: boolean) => void;
-    onCheckedChange?: (checkedId: string[]) => void;
+    onCheckedChange?: (checkedId: string[], uncheckedId: string[], checkedState: Record<string, boolean>) => void;
+    onClickItem?: (id: string) => void;
+    onCheckedItem?: (id: string, checked: boolean) => void;
     defaultExpandAll?: boolean;
     defaultCheckAll?: boolean;
     hierarchicalCheck?: boolean;
+    checkable?: boolean;
+    maxLevel?: number;
 }

package/dist/index.d.ts

@@ -110,6 +110,8 @@ type Tab = {
     startTabContent?: React__default.ReactElement;
     endTabContent?: React__default.ReactElement;
     content: React__default.ReactNode;
+    disabled?: boolean;
+    isLoading?: boolean;
 };
 type TabsProps = {
     tabs: Tab[];
@@ -117,12 +119,22 @@ type TabsProps = {
     tabBarSize?: number;
     tabMode?: "start" | "justify";
     enableBorderLine?: boolean;
+    enableAddTabButton?: boolean;
+    keepIconSpace?: boolean;
     className?: string;
     tabBarClassName?: string;
+    tabBarContainerClassName?: string;
+    tabBarWrapperClassName?: string;
     tabButtonClassName?: string;
     tabButtonActiveClassName?: string;
     tabContentClassName?: string;
-    borderSliderClassname?: string;
+    addTabButtonWrapperClassName?: string;
+    borderSliderClassName?: string;
+    leftAction?: React__default.ReactNode;
+    rightAction?: React__default.ReactNode;
+    disabled?: boolean;
+    onAddTab?: () => void;
+    onTabChange?: (tabIndex: number) => void;
 };
 declare const Tabs: React__default.FC<TabsProps>;
 
@@ -601,20 +613,22 @@ declare function useToast(options?: ToastOptions): {
     position?: ToasterPosition;
 };
 
-type TreeData = {
+type TreeData<T = {}> = {
     id: string;
     title: string;
     icon?: ReactNode;
     disabled?: boolean;
+    isLeaf?: boolean;
     onClickItem?: (id: string) => void;
-    children?: TreeData[];
+    children?: TreeData<T>[];
     renderIcon?: (params: {
         id: string;
         expanded: boolean;
         selected: boolean;
     }) => ReactNode;
-};
+} & T;
 interface TreeItemProps extends TreeData {
+    checkable?: boolean;
     isFirstLevel?: boolean;
     isLastItem: boolean;
     disabled?: boolean;
@@ -625,11 +639,14 @@ interface TreeItemProps extends TreeData {
     horizontalLineWidth?: number;
     expandButtonSize?: number;
     spacing?: number;
+    currentLevel: number;
+    maxLevel?: number;
     checkIsExpanded: (id: string) => boolean;
     checkIsChecked: (id: string) => boolean;
     checkIsLoading?: (id: string) => void;
     onExpandChange?: (id: string, expanded: boolean) => void;
     onCheckedChange?: (id: string, checked: boolean) => void;
+    notifyClickItem?: (id: string) => void;
     renderRightSection?: (params: {
         id: string;
         expanded: boolean;
@@ -679,10 +696,14 @@ interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRightSecti
     checkedId?: string[];
     loadingId?: string[];
     onExpandChange?: (id: string, expanded: boolean) => void;
-    onCheckedChange?: (checkedId: string[]) => void;
+    onCheckedChange?: (checkedId: string[], uncheckedId: string[], checkedState: Record<string, boolean>) => void;
+    onClickItem?: (id: string) => void;
+    onCheckedItem?: (id: string, checked: boolean) => void;
     defaultExpandAll?: boolean;
     defaultCheckAll?: boolean;
     hierarchicalCheck?: boolean;
+    checkable?: boolean;
+    maxLevel?: number;
 }
 
 declare const Tree: FC<TreeProps>;

package/dist/src/theme/global.css

@@ -2244,10 +2244,6 @@ input[type=number] {
   bottom: 0px;
 }
 
-.-bottom-\[1px\] {
-  bottom: -1px;
-}
-
 .-top-1 {
   top: -0.25rem;
 }
@@ -2256,6 +2252,10 @@ input[type=number] {
   top: -0.375rem;
 }
 
+.bottom-0 {
+  bottom: 0px;
+}
+
 .bottom-\[40px\] {
   bottom: 40px;
 }
@@ -2341,6 +2341,11 @@ input[type=number] {
   margin-right: -0.5rem;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -2552,10 +2557,6 @@ input[type=number] {
   height: 15rem;
 }
 
-.h-\[1px\] {
-  height: 1px;
-}
-
 .h-\[24px\] {
   height: 24px;
 }
@@ -2633,6 +2634,10 @@ input[type=number] {
   width: 0.5rem;
 }
 
+.w-3 {
+  width: 0.75rem;
+}
+
 .w-4 {
   width: 1rem;
 }
@@ -2685,6 +2690,10 @@ input[type=number] {
   width: 48px;
 }
 
+.w-\[500px\] {
+  width: 500px;
+}
+
 .w-\[64px\] {
   width: 64px;
 }
@@ -2967,6 +2976,10 @@ input[type=number] {
   overflow: hidden;
 }
 
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -3276,6 +3289,11 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
+.border-state-disable-outline {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--state-color-disable-outline) calc(100% * var(--tw-border-opacity)), transparent);
+}
+
 .border-success-stroke {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--state-color-success-stroke) calc(100% * var(--tw-border-opacity)), transparent);
@@ -5045,11 +5063,6 @@ input[type=number] {
   padding: 2rem;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -5759,6 +5772,16 @@ input[type=number] {
   color: color-mix(in srgb, var(--secondary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
+.text-state-disable-outline {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--state-color-disable-outline) calc(100% * var(--tw-text-opacity)), transparent);
+}
+
+.text-state-disable-solid {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-text-opacity)), transparent);
+}
+
 .text-success {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--state-color-success-default) calc(100% * var(--tw-text-opacity)), transparent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -15,6 +15,7 @@
     "public": "npm run build:package && npm publish --access=public",
     "storybook:serve-css": "npx tailwindcss -i ./src/theme/global.css -o ./dist/src/theme/global.css",
     "storybook": "storybook dev -p 6006",
+    "storybook:docker": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token=chpt_cee098dd3b9b3ee",
     "deploy-storybook": "npx wrangler pages deploy storybook-static --project-name=rovula-ui --branch=main"
@@ -105,6 +106,10 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
+  "overrides": {
+    "rimraf": "^4.4.1",
+    "glob": "^9.3.5"
+  },
   "repository": {
     "type": "git",
     "url": ""

package/src/components/Tabs/Tabs.css

@@ -0,0 +1,21 @@
+/* Scroll bar */
+.tabs-scrollbar::-webkit-scrollbar {
+	height: 4px;
+	width: 4px;
+	background: rgba(0, 0, 0, 0.08);
+}
+
+.tabs-scrollbar::-webkit-scrollbar-thumb {
+	border-radius: 4px;
+	background: rgba(121, 141, 150, 0.48);
+	width: 4px;
+}
+
+.tabs-scrollbar::-webkit-scrollbar-thumb:hover {
+	background: rgba(251, 252, 253, 0.48);
+  cursor: pointer
+}
+
+.tabs-scrollbar::-webkit-scrollbar-corner {
+	display: none;
+}

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,7 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import Tabs from "./Tabs";
 import { ChevronDownIcon, ArchiveBoxIcon } from "@heroicons/react/16/solid";
+import ActionButton from "../ActionButton/ActionButton";
+import Icon from "../Icon/Icon";
+import { useArgs } from "@storybook/preview-api";
 
 const meta = {
   title: "Components/Tabs",
@@ -12,7 +15,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full">
+      <div className="p-5 flex w-full bg-base-bg2">
         <Story />
       </div>
     ),
@@ -58,8 +61,8 @@ export const CustomTab = {
     initialTab: 0,
     tabs: tabs.map((tab) => ({
       ...tab,
-      startTabContent: <ArchiveBoxIcon className="size-3 " />,
-      endTabContent: <ChevronDownIcon className="size-3" />,
+      startTabContent: <ArchiveBoxIcon />,
+      endTabContent: <ChevronDownIcon />,
     })),
   },
   render: (args) => {
@@ -73,3 +76,136 @@ export const CustomTab = {
     );
   },
 } satisfies StoryObj;
+
+//  variant="scrollable"
+export const TabWithLeftRightAction = {
+  args: {
+    initialTab: 0,
+    tabs: tabs.map((tab) => ({
+      ...tab,
+    })),
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tabs
+          tabs={tabs}
+          {...props}
+          tabMode="start"
+          leftAction={
+            <ActionButton onClick={() => alert("left action")} className="mr-4">
+              <Icon name="academic-cap" />
+            </ActionButton>
+          }
+          rightAction={
+            <ActionButton
+              onClick={() => alert("right action")}
+              className="ml-4"
+            >
+              <Icon name="arrow-down-tray" />
+            </ActionButton>
+          }
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const AddTabWithScrolling = {
+  args: {
+    initialTab: 0,
+    tabs,
+    enableAddTabButton: true,
+  },
+  render: (args) => {
+    const props: any = {
+      ...args,
+    };
+
+    const [, setArgs] = useArgs();
+    return (
+      <div className="flex flex-row gap-4  w-[500px]">
+        <Tabs
+          tabs={tabs}
+          {...props}
+          tabMode="start"
+          onAddTab={() => {
+            setArgs({
+              tabs: [
+                ...props.tabs,
+                {
+                  label: "Tab" + (props.tabs.length + 1),
+                  content: <p>Tab {props.tabs.length + 1} content</p>,
+                },
+              ],
+            });
+          }}
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const KeepIconSpacing = {
+  args: {
+    initialTab: 0,
+    tabs,
+    keepIconSpace: true,
+  },
+  render: (args) => {
+    const props: any = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4  w-[500px]">
+        <Tabs tabs={tabs} {...props} tabMode="start" />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Loading = {
+  args: {
+    initialTab: 0,
+    tabs: tabs.map((tab, i) => ({
+      ...tab,
+      isLoading: i !== 0,
+      startTabContent: <Icon name="rocket-launch" />,
+    })),
+  },
+  render: (args) => {
+    const props: any = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4  w-[500px]">
+        <Tabs tabs={tabs} {...props} tabMode="start" />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Disabled = {
+  args: {
+    initialTab: 0,
+    tabs: tabs.map((tab, i) => ({
+      ...tab,
+      disabled: i !== 0,
+    })),
+  },
+  render: (args) => {
+    const props: any = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4">
+        <Tabs tabs={tabs} {...props} />
+        <Tabs tabs={tabs} {...props} disabled />
+      </div>
+    );
+  },
+} satisfies StoryObj;