@rovula/ui 0.0.60 → 0.0.62

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

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

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

@@ -94,4 +94,5 @@ export interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRig
     maxLevel?: number;
     mode?: "checkbox" | "radio";
     autoDisabled?: boolean;
+    checkedAll?: boolean;
 }

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

@@ -0,0 +1 @@
+export { default as usePrevious } from "./usePrevious";

package/dist/esm/types/hooks/usePrevious.d.ts

@@ -0,0 +1,2 @@
+declare function usePrevious<T>(value: T): T | undefined;
+export default usePrevious;

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

@@ -40,4 +40,5 @@ export type { NavbarProps } from "./components/Navbar/Navbar";
 export type { AvatarProps } from "./components/Avatar/Avatar";
 export type { AvatarGroupProps } from "./components/Avatar/AvatarGroup";
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
+export * from "./hooks";
 export { cn } from "./utils/cn";

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export { default as usePrevious } from "./usePrevious";

package/dist/hooks/usePrevious.js

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+function usePrevious(value) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+}
+export default usePrevious;

package/dist/index.d.ts

@@ -710,6 +710,7 @@ interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRightSecti
     maxLevel?: number;
     mode?: "checkbox" | "radio";
     autoDisabled?: boolean;
+    checkedAll?: boolean;
 }
 
 declare const Tree: FC<TreeProps>;
@@ -725,6 +726,8 @@ declare const getStartEndTimestampOfDay: () => {
 };
 declare const getTimestampUTC: (date: Date) => number;
 
+declare function usePrevious<T>(value: T): T | undefined;
+
 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, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, 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, usePrevious, useToast };

package/dist/index.js

@@ -37,6 +37,8 @@ export * from "./components/Toast/useToast";
 export * from "./components/Tree";
 // UTILS
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
+// Hooks
+export * from "./hooks";
 export { cn } from "./utils/cn";
 // const mainPreset = require("./theme/main-preset");
 // export { mainPreset };

package/package.json

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

package/src/components/DatePicker/DatePicker.tsx

@@ -8,6 +8,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover";
 import { Modifiers } from "react-day-picker";
 import { InputProps, TextInput } from "../TextInput/TextInput";
 import { format } from "date-fns/format";
+import { cn } from "@/utils/cn";
 
 type DatePickerProps = {
   date: Date | undefined;
@@ -37,7 +38,7 @@ const DatePicker: FC<DatePickerProps> = ({
           <div className="flex">
             <TextInput
               fullwidth
-              id="2" // TODO
+              id="date-picker"
               readOnly
               label="Date"
               size="md"
@@ -47,6 +48,10 @@ const DatePicker: FC<DatePickerProps> = ({
                 <CalendarIcon fill="inherit" className="cursor-pointer" />
               }
               {...textInputProps}
+              labelClassName={cn(
+                "pointer-events-none",
+                textInputProps?.labelClassName
+              )}
             />
           </div>
         </PopoverTrigger>

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

@@ -411,3 +411,38 @@ export const RadioMode: StoryObj<typeof Tree> = {
     );
   },
 };
+
+export const CheckAll: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData,
+  },
+  render: (args) => {
+    const [isCheckedAll, setIsCheckedAll] = useState(false);
+    const [checkedId, onCheckedId] = useState<string[]>([]);
+
+    return (
+      <div className="flex flex-col gap-4 w-full">
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            onClick={() => setIsCheckedAll(!isCheckedAll)}
+          >
+            {isCheckedAll ? "Unchecked" : "Checked"} All
+          </Button>
+          <Button variant="outline" onClick={() => onCheckedId([])}>
+            Clear
+          </Button>
+        </div>
+        <Tree
+          {...args}
+          hierarchicalCheck
+          checkedAll={isCheckedAll}
+          checkedId={checkedId}
+          onCheckedChange={(state) => {
+            onCheckedId(Object.keys(state).filter((key) => state?.[key]));
+          }}
+        />
+      </div>
+    );
+  },
+};

package/src/components/Tree/Tree.tsx

@@ -2,6 +2,7 @@ import React, { FC, useCallback, useEffect, useState } from "react";
 import TreeItem from "./TreeItem";
 import { TreeData, TreeProps } from "./type";
 import { cn } from "@/utils/cn";
+import { usePrevious } from "@/hooks";
 
 const Tree: FC<TreeProps> = ({
   classes,
@@ -32,6 +33,7 @@ const Tree: FC<TreeProps> = ({
   maxLevel,
   mode = "checkbox",
   autoDisabled = false,
+  checkedAll = false,
 }) => {
   const [checkedState, setCheckedState] = useState<Record<string, boolean>>({});
   const [expandedState, setExpandedState] = useState<Record<string, boolean>>(
@@ -93,6 +95,7 @@ const Tree: FC<TreeProps> = ({
     }
   }, [checkedId]);
 
+  // For usecase loaded data a children coming after.
   useEffect(() => {
     if (!hierarchicalCheck) {
       return;
@@ -124,6 +127,36 @@ const Tree: FC<TreeProps> = ({
     });
   }, [data, hierarchicalCheck]);
 
+  const prevCheckedAll = usePrevious(checkedAll);
+  useEffect(() => {
+    if (prevCheckedAll === undefined || prevCheckedAll === checkedAll) return;
+    if (checkedAll) {
+      const newState: Record<string, boolean> = {};
+
+      traverseTree(data, (node) => {
+        if (node.id) {
+          newState[node.id] = true;
+        }
+      });
+      setCheckedState(newState);
+      onCheckedChange?.(newState, undefined, null);
+    } else {
+      let newState: Record<string, boolean> = {};
+
+      setCheckedState((prev) => {
+        newState = Object.keys(prev).reduce(
+          (p, key) => ({
+            ...p,
+            [key]: false,
+          }),
+          {}
+        );
+        return newState;
+      });
+      onCheckedChange?.(newState, undefined, null);
+    }
+  }, [data, checkedAll, prevCheckedAll]);
+
   const handleExpandChange = useCallback(
     (id: string, expanded: boolean, itemData: any) => {
       onExpandChange?.(id, expanded, itemData);

package/src/components/Tree/type.ts

@@ -117,4 +117,5 @@ export interface TreeProps
   mode?: "checkbox" | "radio";
   // Only radio mode
   autoDisabled?: boolean;
+  checkedAll?: boolean;
 }

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { default as usePrevious } from "./usePrevious";

package/src/hooks/usePrevious.ts

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from "react";
+
+function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = value;
+  });
+
+  return ref.current;
+}
+
+export default usePrevious;

package/src/index.ts

@@ -58,6 +58,9 @@ export {
   getTimestampUTC,
 } from "./utils/datetime";
 
+// Hooks
+export * from "./hooks";
+
 export { cn } from "./utils/cn";
 
 // const mainPreset = require("./theme/main-preset");