@rovula/ui 0.0.51 → 0.0.53

package/dist/theme/global.css

@@ -1,7 +1,6 @@
 
 @import "./tokens/baseline.css";
 @import "./themes/xspector/baseline.css";
-@import "./themes/SKL/baseline.css";
 
 @tailwind base;
 @tailwind components;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.51",
+  "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;

package/src/components/Tabs/Tabs.tsx

@@ -1,11 +1,17 @@
 import React, { useState, useRef, useEffect } from "react";
 import { cn } from "@/utils/cn";
+import "./Tabs.css";
+import ActionButton from "../ActionButton/ActionButton";
+import Icon from "../Icon/Icon";
+import { Loading } from "@/index";
 
 type Tab = {
   label: string;
   startTabContent?: React.ReactElement;
   endTabContent?: React.ReactElement;
   content: React.ReactNode;
+  disabled?: boolean;
+  isLoading?: boolean;
 };
 
 type TabsProps = {
@@ -14,12 +20,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;
 };
 
 const Tabs: React.FC<TabsProps> = ({
@@ -27,13 +43,23 @@ const Tabs: React.FC<TabsProps> = ({
   initialTab = 0,
   tabBarSize = 38,
   enableBorderLine = true,
+  enableAddTabButton = false,
+  keepIconSpace = true,
+  disabled = false,
   tabMode = "start",
   className,
   tabBarClassName,
+  tabBarContainerClassName,
+  tabBarWrapperClassName,
   tabButtonClassName,
   tabButtonActiveClassName,
   tabContentClassName,
-  borderSliderClassname,
+  addTabButtonWrapperClassName,
+  borderSliderClassName,
+  leftAction,
+  rightAction,
+  onAddTab,
+  onTabChange,
 }) => {
   const [activeTab, setActiveTab] = useState(initialTab);
   const [sliderStyle, setSliderStyle] = useState({
@@ -76,66 +102,124 @@ const Tabs: React.FC<TabsProps> = ({
       updateSliderStyle();
     }
 
-    // const handleResize = () => {
-    //   updateSliderStyle();
-    // };
+    const handleResize = () => {
+      updateSliderStyle();
+    };
 
-    // window.addEventListener("resize", handleResize);
-    // return () => window.removeEventListener("resize", handleResize);
-  }, [activeTab, tabs, tabMode]);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [activeTab, tabs, tabMode, keepIconSpace]);
 
   return (
     <div className={cn("w-full", className)}>
       <div
-        className={cn(
-          `relative flex gap-6 h-[${tabBarSize}px] box-border`,
-          {
-            [`border-b-[1px] border-base-stroke`]: enableBorderLine,
-            "gap-0": tabMode === "justify",
-          },
-          tabBarClassName
-        )}
-        style={{
-          justifyContent: tabMode === "justify" ? "stretch" : tabMode,
-        }}
-        role="tablist"
+        className={cn(" relative flex flex-row w-full", {
+          [`border-b-[1px] border-base-stroke`]: enableBorderLine,
+          "border-state-disable-outline": disabled,
+          "flex-1": tabMode === "justify",
+          tabBarContainerClassName,
+        })}
       >
-        {tabs.map((tab, index) => (
-          <button
-            key={index}
-            ref={(el) => (tabRefs.current[index] = el)}
-            role="tab"
-            aria-selected={index === activeTab}
-            aria-controls={`tab-content-${index}`}
-            id={`tab-${index}`}
+        {leftAction}
+        <div
+          className={cn(
+            "relative flex flex-row  overflow-x-auto",
+            {
+              "flex-1": tabMode === "justify",
+            },
+            tabBarWrapperClassName
+          )}
+        >
+          <div
             className={cn(
-              "flex justify-center flex-row items-center py-4 px-1 cursor-pointer transition-colors duration-300 box-border gap-3",
+              "tabs-scrollbar overflow-x-auto w-full",
+              `relative flex gap-3 h-[${tabBarSize}px] box-border`,
               {
-                "typography-small3 text-text-dark": index === activeTab,
-                "typography-small1 text-text-grey-light hover:text-text-grey-dark active:text-text-dark":
-                  index !== activeTab,
-                [tabButtonClassName ?? ""]: true,
-                [tabButtonActiveClassName ?? ""]: index === activeTab,
-                "flex-1": tabMode === "justify",
-              }
+                "gap-0": tabMode === "justify",
+              },
+              tabBarClassName
             )}
-            onClick={() => setActiveTab(index)}
+            style={{
+              justifyContent: tabMode === "justify" ? "stretch" : tabMode,
+            }}
+            role="tablist"
           >
-            {tab.startTabContent}
-            {tab.label}
-            {tab.endTabContent}
-          </button>
-        ))}
-        <div
-          className={cn(
-            `absolute -bottom-[1px] h-[1px] bg-primary transition-all duration-300 ease-in-out`,
-            borderSliderClassname
-          )}
-          style={sliderStyle}
-        />
+            {tabs.map((tab, index) => (
+              <button
+                key={index}
+                ref={(el) => (tabRefs.current[index] = el)}
+                role="tab"
+                aria-selected={index === activeTab}
+                aria-controls={`tab-content-${index}`}
+                disabled={disabled || tab.disabled}
+                id={`tab-${index}`}
+                className={cn(
+                  "flex justify-center flex-row items-center py-3 cursor-pointer transition-colors duration-300 box-border gap-1 flex-shrink-0  typography-subtitile6",
+                  {
+                    "text-foreground": index === activeTab,
+                    "text-text-grey-medium hover:text-text-grey-dark active:text-text-dark":
+                      index !== activeTab,
+                    "text-state-disable-solid pointer-events-none":
+                      disabled || tab.disabled,
+                    "text-state-disable-outline":
+                      (index === activeTab && disabled) || tab.disabled,
+                    [tabButtonClassName ?? ""]: true,
+                    [tabButtonActiveClassName ?? ""]: index === activeTab,
+                    "flex-1": tabMode === "justify",
+                  }
+                )}
+                onClick={() => {
+                  setActiveTab(index);
+                  onTabChange?.(index);
+                }}
+              >
+                {(keepIconSpace || tab.startTabContent) && (
+                  <div className="h-full w-3 flex items-center justify-center">
+                    {tab.isLoading ? <Loading /> : tab.startTabContent}
+                  </div>
+                )}
+                {tab.label}
+                {(keepIconSpace || tab.endTabContent) && (
+                  <div className="h-full w-3 flex items-center justify-center">
+                    {tab.endTabContent}
+                  </div>
+                )}
+              </button>
+            ))}
+            <div
+              className={cn(
+                `absolute left-0 bottom-0 h-[2px]  rounded-full bg-foreground transition-all duration-300 ease-in-out`,
+                {
+                  "bg-state-disable-solid": disabled,
+                },
+                borderSliderClassName
+              )}
+              style={sliderStyle}
+            />
+          </div>
+        </div>
+        {enableAddTabButton && (
+          <div
+            className={cn(
+              "sticky right-0 flex content-center items-center mx-4",
+              addTabButtonWrapperClassName
+            )}
+          >
+            <ActionButton
+              variant="outline"
+              size="sm"
+              onClick={() => onAddTab?.()}
+              disabled={disabled}
+            >
+              <Icon name="plus" />
+            </ActionButton>
+          </div>
+        )}
+        {rightAction}
       </div>
+
       <div
-        className={cn("mt-4", tabContentClassName)}
+        className={cn("mt-4 text-foreground", tabContentClassName)}
         role="tabpanel"
         id={`tab-content-${activeTab}`}
         aria-labelledby={`tab-${activeTab}`}