@rovula/ui 0.0.54 → 0.0.56

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

@@ -10,6 +10,7 @@ type Tab = {
 };
 type TabsProps = {
     tabs: Tab[];
+    value?: number;
     initialTab?: number;
     tabBarSize?: number;
     tabMode?: "start" | "justify";

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

@@ -10,6 +10,7 @@ declare const meta: {
             disabled?: boolean | undefined;
             isLoading?: boolean | undefined;
         }[];
+        value?: number | undefined;
         initialTab?: number | undefined;
         tabBarSize?: number | undefined;
         tabMode?: "start" | "justify" | undefined;
@@ -44,6 +45,7 @@ declare const meta: {
             disabled?: boolean | undefined;
             isLoading?: boolean | undefined;
         }[];
+        value?: number | undefined;
         initialTab?: number | undefined;
         tabBarSize?: number | undefined;
         tabMode?: "start" | "justify" | undefined;
@@ -144,3 +146,15 @@ export declare const Disabled: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const Controller: {
+    args: {
+        initialTab: number;
+        value: number;
+        tabs: {
+            label: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+        enableAddTabButton: boolean;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

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

@@ -14,3 +14,4 @@ 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>;
+export declare const RadioMode: StoryObj<typeof Tree>;

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

@@ -29,6 +29,7 @@ export interface TreeItemProps extends TreeData {
     maxLevel?: number;
     checkIsExpanded: (id: string) => boolean;
     checkIsChecked: (id: string) => boolean;
+    checkAutoDisabled: (id: string) => boolean;
     checkIsLoading?: (id: string) => void;
     onExpandChange?: (id: string, expanded: boolean) => void;
     onCheckedChange?: (id: string, checked: boolean) => void;
@@ -90,4 +91,6 @@ export interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRig
     hierarchicalCheck?: boolean;
     checkable?: boolean;
     maxLevel?: number;
+    mode: "checkbox" | "radio";
+    autoDisabled?: boolean;
 }

package/dist/index.d.ts

@@ -115,6 +115,7 @@ type Tab = {
 };
 type TabsProps = {
     tabs: Tab[];
+    value?: number;
     initialTab?: number;
     tabBarSize?: number;
     tabMode?: "start" | "justify";
@@ -643,6 +644,7 @@ interface TreeItemProps extends TreeData {
     maxLevel?: number;
     checkIsExpanded: (id: string) => boolean;
     checkIsChecked: (id: string) => boolean;
+    checkAutoDisabled: (id: string) => boolean;
     checkIsLoading?: (id: string) => void;
     onExpandChange?: (id: string, expanded: boolean) => void;
     onCheckedChange?: (id: string, checked: boolean) => void;
@@ -704,6 +706,8 @@ interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRightSecti
     hierarchicalCheck?: boolean;
     checkable?: boolean;
     maxLevel?: number;
+    mode: "checkbox" | "radio";
+    autoDisabled?: boolean;
 }
 
 declare const Tree: FC<TreeProps>;

package/dist/src/theme/global.css

@@ -2501,9 +2501,14 @@ input[type=number] {
   height: 14px;
 }
 
-.size-\[16pt\] {
-  width: 16pt;
-  height: 16pt;
+.size-\[16px\] {
+  width: 16px;
+  height: 16px;
+}
+
+.size-\[18px\] {
+  width: 18px;
+  height: 18px;
 }
 
 .size-\[30px\] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

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

@@ -5,6 +5,7 @@ import { ChevronDownIcon, ArchiveBoxIcon } from "@heroicons/react/16/solid";
 import ActionButton from "../ActionButton/ActionButton";
 import Icon from "../Icon/Icon";
 import { useArgs } from "@storybook/preview-api";
+import { Button } from "@/index";
 
 const meta = {
   title: "Components/Tabs",
@@ -209,3 +210,50 @@ export const Disabled = {
     );
   },
 } satisfies StoryObj;
+
+export const Controller = {
+  args: {
+    initialTab: 1,
+    value: 0,
+    tabs,
+    enableAddTabButton: true,
+  },
+  render: (args) => {
+    const props: any = {
+      ...args,
+    };
+
+    const [, setArgs] = useArgs();
+    return (
+      <div className="flex flex-col gap-4  w-[500px]">
+        <div className="flex flex-row gap-2">
+          <Button onClick={() => setArgs({ ...props.tabs, value: 0 })}>
+            Set active tab 0
+          </Button>
+          <Button onClick={() => setArgs({ ...props.tabs, value: 1 })}>
+            Set active tab 1
+          </Button>
+          <Button onClick={() => setArgs({ ...props.tabs, value: 2 })}>
+            Set active tab 2
+          </Button>
+        </div>
+        <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;

package/src/components/Tabs/Tabs.tsx

@@ -16,6 +16,7 @@ type Tab = {
 
 type TabsProps = {
   tabs: Tab[];
+  value?: number;
   initialTab?: number;
   tabBarSize?: number;
   tabMode?: "start" | "justify";
@@ -40,6 +41,7 @@ type TabsProps = {
 
 const Tabs: React.FC<TabsProps> = ({
   tabs = [],
+  value,
   initialTab = 0,
   tabBarSize = 38,
   enableBorderLine = true,
@@ -69,6 +71,12 @@ const Tabs: React.FC<TabsProps> = ({
   const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
   const isInitialMount = useRef(true);
 
+  useEffect(() => {
+    if (value !== undefined) {
+      setActiveTab(value);
+    }
+  }, [value]);
+
   const updateSliderStyle = () => {
     const activeTabElement = tabRefs.current[activeTab];
     if (activeTabElement) {

package/src/components/Tree/Tree.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import Tree from "./Tree";
-import { ActionButton, Icon } from "@/index";
+import { ActionButton, Button, Icon } from "@/index";
 import {
   exampleData,
   exampleData2,
@@ -382,3 +382,31 @@ export const HideCheckboxMode: StoryObj<typeof Tree> = {
     );
   },
 };
+
+export const RadioMode: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData,
+    mode: "radio",
+    autoDisabled: true,
+  },
+  render: (args) => {
+    const [checkedId, onCheckedId] = useState<string[]>(["1"]);
+
+    return (
+      <div className="flex flex-col gap-4 w-full">
+        <div>
+          <Button variant="outline" onClick={() => onCheckedId([])}>
+            Clear
+          </Button>
+        </div>
+        <Tree
+          {...args}
+          checkedId={checkedId}
+          onCheckedChange={(state) => {
+            onCheckedId(Object.keys(state).filter((key) => state?.[key]));
+          }}
+        />
+      </div>
+    );
+  },
+};

package/src/components/Tree/Tree.tsx

@@ -30,6 +30,8 @@ const Tree: FC<TreeProps> = ({
   enableSeparatorLine = true,
   checkable = true,
   maxLevel,
+  mode,
+  autoDisabled = false,
 }) => {
   const [checkedState, setCheckedState] = useState<Record<string, boolean>>({});
   const [expandedState, setExpandedState] = useState<Record<string, boolean>>(
@@ -83,6 +85,14 @@ const Tree: FC<TreeProps> = ({
     }
   }, [data, defaultCheckedId, defaultCheckAll]);
 
+  useEffect(() => {
+    if (checkedId !== undefined) {
+      setCheckedState(
+        checkedId.reduce((prev, cur) => ({ ...prev, [cur]: true }), {})
+      );
+    }
+  }, [checkedId]);
+
   const handleExpandChange = useCallback(
     (id: string, expanded: boolean) => {
       onExpandChange?.(id, expanded);
@@ -93,6 +103,15 @@ const Tree: FC<TreeProps> = ({
 
   const handleCheckedChange = useCallback(
     (id: string, checked: boolean) => {
+      if (mode === "radio") {
+        let newState = { [id]: checked };
+
+        onCheckedItem?.(id, checked);
+        setCheckedState(newState);
+        onCheckedChange?.(newState);
+
+        return;
+      }
       onCheckedItem?.(id, checked);
       let newState = { ...checkedState, [id]: checked };
 
@@ -147,7 +166,15 @@ const Tree: FC<TreeProps> = ({
         onCheckedChange?.(newState);
       }
     },
-    [checkedState, data, onCheckedChange, hierarchicalCheck, onCheckedItem]
+    [
+      checkedState,
+      data,
+      onCheckedChange,
+      hierarchicalCheck,
+      onCheckedItem,
+      mode,
+      autoDisabled,
+    ]
   );
 
   const checkIsExpanded = useCallback(
@@ -174,6 +201,17 @@ const Tree: FC<TreeProps> = ({
     [loadingId]
   );
 
+  const checkAutoDisabled = useCallback(
+    (id: string) => {
+      if (autoDisabled && Object.values(checkedState).filter(Boolean).length) {
+        return (!checkedState?.[id] || disabled) ?? false;
+      }
+
+      return false;
+    },
+    [checkedState, disabled, autoDisabled]
+  );
+
   return (
     <div className={cn("w-full", classes?.container)}>
       {data.map((item, idx) => (
@@ -186,13 +224,14 @@ const Tree: FC<TreeProps> = ({
           checkIsChecked={checkIsChecked}
           onExpandChange={handleExpandChange}
           onCheckedChange={handleCheckedChange}
+          checkAutoDisabled={checkAutoDisabled}
           checkIsLoading={checkIsLoading}
           renderIcon={renderIcon}
           renderElement={renderElement}
           renderTitle={renderTitle}
           renderRightSection={renderRightSection}
           enableSeparatorLine={enableSeparatorLine}
-          disabled={disabled}
+          disabled={checkAutoDisabled(item.id)}
           showIcon={showIcon}
           lineSize={lineSize}
           horizontalLineWidth={horizontalLineWidth}

package/src/components/Tree/TreeItem.tsx

@@ -20,6 +20,7 @@ const TreeItem: FC<TreeItemProps> = ({
   checkable,
   checkIsExpanded,
   checkIsChecked,
+  checkAutoDisabled,
   checkIsLoading,
   onExpandChange,
   onCheckedChange,
@@ -109,7 +110,7 @@ const TreeItem: FC<TreeItemProps> = ({
   const defaultIcon = (
     <Icon
       name={isExpanded ? "folder-open" : "folder"}
-      className="fill-warning"
+      className="fill-warning size-[18px]"
     />
   );
 
@@ -213,7 +214,7 @@ const TreeItem: FC<TreeItemProps> = ({
             {shouldShowCheckbox ? (
               <Checkbox
                 id={id}
-                className={cn("size-[16pt]", classes?.checkbox)}
+                className={cn("size-[16px]", classes?.checkbox)}
                 checked={isChecked}
                 disabled={disabled}
                 onCheckedChange={(newChecked) =>
@@ -224,7 +225,7 @@ const TreeItem: FC<TreeItemProps> = ({
               <div
                 className={
                   isFirstLevel && checkable
-                    ? cn("size-[16pt]", classes?.checkbox)
+                    ? cn("size-[16px]", classes?.checkbox)
                     : ""
                 }
               />
@@ -280,13 +281,14 @@ const TreeItem: FC<TreeItemProps> = ({
                   isLastItem={idx === children.length - 1}
                   checkIsExpanded={checkIsExpanded}
                   checkIsChecked={checkIsChecked}
+                  checkAutoDisabled={checkAutoDisabled}
                   checkIsLoading={checkIsLoading}
                   onExpandChange={onExpandChange}
                   onCheckedChange={onCheckedChange}
                   renderIcon={renderIcon}
                   renderElement={renderElement}
                   renderTitle={renderTitle}
-                  disabled={disabled}
+                  disabled={checkAutoDisabled(child.id)}
                   showIcon={showIcon}
                   lineSize={lineSize}
                   horizontalLineWidth={horizontalLineWidth}

package/src/components/Tree/type.ts

@@ -31,6 +31,7 @@ export interface TreeItemProps extends TreeData {
   maxLevel?: number;
   checkIsExpanded: (id: string) => boolean;
   checkIsChecked: (id: string) => boolean;
+  checkAutoDisabled: (id: string) => boolean;
   checkIsLoading?: (id: string) => void;
   onExpandChange?: (id: string, expanded: boolean) => void;
   onCheckedChange?: (id: string, checked: boolean) => void;
@@ -108,4 +109,7 @@ export interface TreeProps
   hierarchicalCheck?: boolean;
   checkable?: boolean;
   maxLevel?: number;
+  mode: "checkbox" | "radio";
+  // Only radio mode
+  autoDisabled?: boolean;
 }