@rovula/ui 0.0.48 → 0.0.49

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

@@ -1,45 +1,4 @@
-import { FC, ReactNode } from "react";
-export type TreeData = {
-    id: string;
-    title: string;
-    icon?: ReactNode;
-    children?: TreeData[];
-};
-export interface TreeItemProps extends TreeData {
-    isFirstLevel?: boolean;
-    isLastItem: boolean;
-    checkIsExpanded: (id: string) => boolean;
-    checkIsChecked: (id: string) => boolean;
-    onExpandChange?: (id: string, expanded: boolean) => void;
-    onCheckedChange?: (id: string, checked: boolean) => void;
-}
-export type TreeProps = {
-    data: TreeData[];
-    defaultExpandedId?: string[];
-    defaultCheckedId?: string[];
-    checkedId?: string[];
-    onCheckedChange?: (checkedId: string[]) => void;
-    defaultExpandAll?: boolean;
-    defaultCheckAll?: boolean;
-    hierarchicalCheck?: boolean;
-};
-export declare const Tree: FC<TreeProps>;
-/**
- * TODO
- * -----
- * - Custom style
- * - Custom icon, elm and render props -> callback with selected*expanded
- * - OnClick item
- * - OnClick expandButton
- * - disabled props
- * - right section icon
- * - props for show icon, line
- * - props for render item
- * - OnLoad mode
- * -----
- *  - props onLoad item
- *  - props for hasChildren * for check to trigger on load
- *  - animate expand
- *  - check duplicate reversive on updateChildren
- *  - write storybook
- */
+import { FC } from "react";
+import { TreeProps } from "./type";
+declare const Tree: FC<TreeProps>;
+export default Tree;

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

@@ -1,5 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Tree } from "./Tree";
+import Tree from "./Tree";
 declare const meta: Meta<typeof Tree>;
 export default meta;
 export declare const Default: StoryObj<typeof Tree>;
+export declare const onClick: StoryObj<typeof Tree>;
+export declare const CustomIcon: StoryObj<typeof Tree>;
+export declare const renderRightSection: StoryObj<typeof Tree>;
+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>;

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

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { TreeItemProps } from "./type";
+declare const TreeItem: FC<TreeItemProps>;
+export default TreeItem;

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

@@ -0,0 +1,4 @@
+import Tree from "./Tree";
+import TreeItem from "./TreeItem";
+export * from "./type";
+export { Tree, TreeItem };

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

@@ -0,0 +1,76 @@
+import { CSSProperties, ReactNode } from "react";
+export type TreeData = {
+    id: string;
+    title: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    onClickItem?: (id: string) => void;
+    children?: TreeData[];
+    renderIcon?: (params: {
+        id: string;
+        expanded: boolean;
+        selected: boolean;
+    }) => ReactNode;
+};
+export interface TreeItemProps extends TreeData {
+    isFirstLevel?: boolean;
+    isLastItem: boolean;
+    disabled?: boolean;
+    showIcon?: boolean;
+    showExpandButton?: boolean;
+    enableSeparatorLine?: boolean;
+    checkIsExpanded: (id: string) => boolean;
+    checkIsChecked: (id: string) => boolean;
+    checkIsLoading?: (id: string) => void;
+    onExpandChange?: (id: string, expanded: boolean) => void;
+    onCheckedChange?: (id: string, checked: boolean) => void;
+    renderRightSection?: (params: {
+        id: string;
+        expanded: boolean;
+        selected: boolean;
+    }) => ReactNode;
+    renderElement?: (params: {
+        id: string;
+        expanded: boolean;
+        selected: boolean;
+        children: ReactNode;
+        styles: {
+            branch: CSSProperties;
+            horizontalLine: CSSProperties;
+            expandButton: CSSProperties;
+            childPadding: CSSProperties;
+        };
+        onClick?: TreeItemProps["onClickItem"];
+    }) => ReactNode;
+    renderTitle?: (params: {
+        id: string;
+        title: string;
+        expanded: boolean;
+        selected: boolean;
+    }) => ReactNode;
+    classes?: Partial<{
+        elementWrapper: string;
+        branch: string;
+        itemWrapper: string;
+        itemContainer: string;
+        horizontalLine: string;
+        expandButton: string;
+        separatorLine: string;
+        checkbox: string;
+        item: string;
+        title: string;
+        childrenWrapper: string;
+    }>;
+}
+export interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRightSection" | "renderElement" | "renderTitle" | "showIcon" | "disabled" | "enableSeparatorLine" | "classes"> {
+    data: TreeData[];
+    defaultExpandedId?: string[];
+    defaultCheckedId?: string[];
+    checkedId?: string[];
+    loadingId?: string[];
+    onExpandChange?: (id: string, expanded: boolean) => void;
+    onCheckedChange?: (checkedId: string[]) => void;
+    defaultExpandAll?: boolean;
+    defaultCheckAll?: boolean;
+    hierarchicalCheck?: boolean;
+}

package/dist/esm/types/index.d.ts

@@ -32,6 +32,7 @@ export * from "./components/Tooltip/TooltipSimple";
 export * from "./components/Toast/Toast";
 export * from "./components/Toast/Toaster";
 export * from "./components/Toast/useToast";
+export * from "./components/Tree";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ReactElement, ReactNode, FC, ComponentPropsWithoutRef } from 'react';
+import React__default, { ReactElement, ReactNode, FC, ComponentPropsWithoutRef, CSSProperties } from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -601,6 +601,86 @@ declare function useToast(options?: ToastOptions): {
     position?: ToasterPosition;
 };
 
+type TreeData = {
+    id: string;
+    title: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    onClickItem?: (id: string) => void;
+    children?: TreeData[];
+    renderIcon?: (params: {
+        id: string;
+        expanded: boolean;
+        selected: boolean;
+    }) => ReactNode;
+};
+interface TreeItemProps extends TreeData {
+    isFirstLevel?: boolean;
+    isLastItem: boolean;
+    disabled?: boolean;
+    showIcon?: boolean;
+    showExpandButton?: boolean;
+    enableSeparatorLine?: boolean;
+    checkIsExpanded: (id: string) => boolean;
+    checkIsChecked: (id: string) => boolean;
+    checkIsLoading?: (id: string) => void;
+    onExpandChange?: (id: string, expanded: boolean) => void;
+    onCheckedChange?: (id: string, checked: boolean) => void;
+    renderRightSection?: (params: {
+        id: string;
+        expanded: boolean;
+        selected: boolean;
+    }) => ReactNode;
+    renderElement?: (params: {
+        id: string;
+        expanded: boolean;
+        selected: boolean;
+        children: ReactNode;
+        styles: {
+            branch: CSSProperties;
+            horizontalLine: CSSProperties;
+            expandButton: CSSProperties;
+            childPadding: CSSProperties;
+        };
+        onClick?: TreeItemProps["onClickItem"];
+    }) => ReactNode;
+    renderTitle?: (params: {
+        id: string;
+        title: string;
+        expanded: boolean;
+        selected: boolean;
+    }) => ReactNode;
+    classes?: Partial<{
+        elementWrapper: string;
+        branch: string;
+        itemWrapper: string;
+        itemContainer: string;
+        horizontalLine: string;
+        expandButton: string;
+        separatorLine: string;
+        checkbox: string;
+        item: string;
+        title: string;
+        childrenWrapper: string;
+    }>;
+}
+interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRightSection" | "renderElement" | "renderTitle" | "showIcon" | "disabled" | "enableSeparatorLine" | "classes"> {
+    data: TreeData[];
+    defaultExpandedId?: string[];
+    defaultCheckedId?: string[];
+    checkedId?: string[];
+    loadingId?: string[];
+    onExpandChange?: (id: string, expanded: boolean) => void;
+    onCheckedChange?: (checkedId: string[]) => void;
+    defaultExpandAll?: boolean;
+    defaultCheckAll?: boolean;
+    hierarchicalCheck?: boolean;
+}
+
+declare const Tree: FC<TreeProps>;
+
+declare const TreeItem: FC<TreeItemProps>;
+
 declare const resloveTimestamp: (timestamp: number) => number;
 declare const getStartDateOfDay: (date: Date) => Date;
 declare const getEndDateOfDay: (date: Date) => Date;
@@ -612,4 +692,4 @@ declare const getTimestampUTC: (date: Date) => number;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, useToast };
+export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, useToast };

package/dist/index.js

@@ -34,6 +34,7 @@ export * from "./components/Tooltip/TooltipSimple";
 export * from "./components/Toast/Toast";
 export * from "./components/Toast/Toaster";
 export * from "./components/Toast/useToast";
+export * from "./components/Tree";
 // UTILS
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
 export { cn } from "./utils/cn";

package/dist/src/theme/global.css

@@ -3711,6 +3711,10 @@ input[type=number] {
   height: 24px;
 }
 
+.h-\[2px\] {
+  height: 2px;
+}
+
 .h-\[32px\] {
   height: 32px;
 }
@@ -6104,6 +6108,10 @@ input[type=number] {
   fill: color-mix(in srgb, var(--state-color-error-default) calc(100% * 1), transparent);
 }
 
+.fill-info {
+  fill: color-mix(in srgb, var(--state-color-info-default) calc(100% * 1), transparent);
+}
+
 .fill-inherit {
   fill: inherit;
 }
@@ -6128,6 +6136,10 @@ input[type=number] {
   fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
 
+.fill-secondary {
+  fill: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * 1), transparent);
+}
+
 .fill-warning {
   fill: color-mix(in srgb, var(--state-color-warning-default) calc(100% * 1), transparent);
 }

package/package.json

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

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

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Tree } from "./Tree";
+import Tree from "./Tree";
+import { ActionButton, Icon } from "@/index";
 
-// Example data for testing the Tree component (as plain objects)
 const exampleData = [
   {
     id: "1",
@@ -27,6 +27,16 @@ const exampleData = [
   { id: "3", title: "Parent Folder 3" },
 ];
 
+const commonProps = {
+  defaultExpandedId: ["1", "1.1"],
+  defaultCheckedId: ["1.1"],
+  defaultExpandAll: true,
+  defaultCheckAll: true,
+  hierarchicalCheck: true,
+  disabled: false,
+  showIcon: true,
+};
+
 // Storybook metadata
 const meta: Meta<typeof Tree> = {
   title: "Components/Tree",
@@ -50,11 +60,25 @@ export default meta;
 export const Default: StoryObj<typeof Tree> = {
   args: {
     data: exampleData,
-    defaultExpandedId: ["1", "1.1"],
-    defaultCheckedId: ["1.1"],
-    defaultExpandAll: true,
-    defaultCheckAll: true,
-    hierarchicalCheck: true,
+    ...commonProps,
+    showIcon: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tree {...args} />
+      </div>
+    );
+  },
+};
+
+export const onClick: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData.map((item) => ({
+      ...item,
+      onClickItem: (id: string) => alert("Click item " + id),
+    })),
+    ...commonProps,
   },
   render: (args) => {
     return (
@@ -64,3 +88,201 @@ export const Default: StoryObj<typeof Tree> = {
     );
   },
 };
+
+export const CustomIcon: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData.map((item, idx) => ({
+      ...item,
+      ...(idx === 0 && {
+        icon: <Icon name="home" />,
+      }),
+      ...(idx === 1 && {
+        renderIcon: ({ expanded, selected }) => (
+          <Icon
+            name={expanded ? "home" : "home-modern"}
+            className={selected ? "fill-info" : "fill-error"}
+          />
+        ),
+      }),
+    })),
+    ...commonProps,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tree
+          {...args}
+          renderIcon={({ expanded, selected }) => (
+            <Icon
+              name={expanded ? "bell" : "bell-slash"}
+              className={selected ? "fill-primary" : "fill-secondary"}
+            />
+          )}
+        />
+      </div>
+    );
+  },
+};
+
+export const renderRightSection: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData,
+    ...commonProps,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tree
+          {...args}
+          renderRightSection={() => (
+            <ActionButton variant="icon" onClick={() => alert("Say hi!")}>
+              <Icon name="ellipsis-vertical" />
+            </ActionButton>
+          )}
+        />
+      </div>
+    );
+  },
+};
+
+export const ControlShowExpandButton: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData.map((item) => ({
+      ...item,
+      showExpandButton: true,
+    })),
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tree {...args} />
+      </div>
+    );
+  },
+};
+
+export const Diabled: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData,
+    ...commonProps,
+    disabled: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tree
+          {...args}
+          renderRightSection={() => (
+            <ActionButton variant="icon" onClick={() => alert("Say hi!")}>
+              <Icon name="ellipsis-vertical" />
+            </ActionButton>
+          )}
+        />
+      </div>
+    );
+  },
+};
+
+export const DiabledEachItem: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData.map((item, i) => ({ ...item, disabled: i === 0 })),
+    ...commonProps,
+    disabled: undefined,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tree
+          {...args}
+          renderRightSection={() => (
+            <ActionButton variant="icon" onClick={() => alert("Say hi!")}>
+              <Icon name="ellipsis-vertical" />
+            </ActionButton>
+          )}
+        />
+      </div>
+    );
+  },
+};
+
+export const ExpandLoadData: StoryObj<typeof Tree> = {
+  args: {},
+  render: (args) => {
+    const [data, setData] = useState([
+      {
+        id: "1",
+        title: "Parent Folder 1",
+        showExpandButton: true,
+        children: [],
+      },
+      {
+        id: "2",
+        title: "Parent Folder 2",
+        showExpandButton: true,
+        children: [],
+      },
+      {
+        id: "3",
+        title: "Parent Folder 3",
+        showExpandButton: true,
+        children: [],
+      },
+    ]);
+    const [loadingId, setLoadingId] = useState<string[]>([]);
+    const [loadedId, setLoadedId] = useState<string[]>([]);
+
+    const updateNode = (nodes: any[], id: string, newChildren: any[]): any[] =>
+      nodes.map((node) => {
+        if (node.id === id) {
+          return { ...node, children: newChildren };
+        }
+        if (node.children?.length) {
+          return {
+            ...node,
+            children: updateNode(node.children, id, newChildren),
+          };
+        }
+        return node;
+      });
+
+    const handleOnExpandChange = (id: string, isExpand: boolean) => {
+      // *Note can you other way for improve should load if need with other way without loadedId
+
+      if (isExpand && !loadingId.includes(id) && !loadedId.includes(id)) {
+        setLoadingId((prev) => [...prev, id]);
+        setTimeout(() => {
+          // Mock child data
+          const newChildren = [
+            {
+              id: Date.now() + "1",
+              title: `Child of ${id} - 1`,
+              children: [],
+              showExpandButton: true,
+            },
+            {
+              id: Date.now() + "2",
+              title: `Child of ${id} - 2`,
+              children: [],
+              showExpandButton: true,
+            },
+          ];
+
+          setData((prevData) => updateNode(prevData, id, newChildren));
+          setLoadingId((prev) => prev.filter((val) => val !== id));
+          setLoadedId((prev) => [...prev, id]);
+        }, 1500);
+      }
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tree
+          {...args}
+          data={data}
+          loadingId={loadingId}
+          onExpandChange={handleOnExpandChange}
+        />
+      </div>
+    );
+  },
+};