@rovula/ui 0.0.46 → 0.0.48

package/src/components/Switch/Switch.tsx

@@ -2,19 +2,44 @@
 
 import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-
 import { cn } from "@/utils/cn";
 
+const switchBaseClasses =
+  "group inline-flex h-3 w-[32px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors";
+
+const switchStateClasses = {
+  unchecked:
+    "data-[state=unchecked]:bg-[var(--switch-default-color)] hover:data-[state=unchecked]:bg-[var(--switch-hover-color)]",
+  checked:
+    "data-[state=checked]:bg-[var(--switch-active-color)] hover:data-[state=checked]:bg-[var(--switch-active-hover-color)]",
+  disabled:
+    "data-[disabled]:cursor-not-allowed data-[disabled]:!bg-[var(--switch-disabled-color)] data-[disabled]:pointer-events-none",
+};
+
+const thumbBaseClasses =
+  "block size-4 rounded-full shadow-lg transition-transform";
+const thumbStateClasses = {
+  unchecked:
+    "data-[state=unchecked]:bg-[var(--switch-thumb-default-color)] data-[state=unchecked]:-translate-x-[2px]",
+  checked:
+    "data-[state=checked]:bg-[var(--switch-thumb-active-color)] data-[state=checked]:translate-x-4",
+  hover:
+    "group-hover:ring group-hover:data-[state=checked]:ring-[var(--switch-thumb-active-hover-ring)] group-hover:data-[state=unchecked]:ring-[var(--switch-thumb-hover-ring)]",
+  hoverColor:
+    "group-hover:data-[state=checked]:bg-[var(--switch-thumb-active-hover-color)] group-hover:data-[state=unchecked]:bg-[var(--switch-thumb-hover-color)]",
+  disabled: "group-disabled:!bg-[--switch-thumb-disabled-color]",
+};
+
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "group inline-flex h-3 w-[32px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
-      "data-[state=checked]:bg-secondary-active/[0.32] data-[state=unchecked]:bg-tertiary-active/[0.32]",
-      "hover:data-[state=checked]:bg-secondary-active/[0.48] hover:data-[state=unchecked]:bg-tertiary-active/[0.48]",
-      "data-[disabled]:cursor-not-allowed data-[disabled]:bg-state-disable-solid/[0.32] data-[disabled]:pointer-events-none ",
+      switchBaseClasses,
+      switchStateClasses.unchecked,
+      switchStateClasses.checked,
+      switchStateClasses.disabled,
       className
     )}
     {...props}
@@ -22,14 +47,17 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        " block size-4 rounded-full bg-secondary-active shadow-lg transition-transform",
-        "data-[state=checked]:translate-x-4 data-[state=unchecked]:-translate-x-[2px] data-[state=unchecked]:bg-tertiary-active",
-        "group-hover:ring group-hover:data-[state=checked]:ring-secondary-hover-bg group-hover:data-[state=unchecked]:ring-tertiary-hover-bg",
-        "group-disabled:bg-state-disable-solid"
+        thumbBaseClasses,
+        thumbStateClasses.unchecked,
+        thumbStateClasses.checked,
+        thumbStateClasses.hover,
+        thumbStateClasses.hoverColor,
+        thumbStateClasses.disabled
       )}
     />
   </SwitchPrimitives.Root>
 ));
+
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 export { Switch };

package/src/components/Table/Table.tsx

@@ -5,10 +5,14 @@ import { cn } from "@/utils/cn";
 const Table = React.forwardRef<
   HTMLTableElement,
   {
+    rootClassName?: string;
     rootRef?: React.LegacyRef<HTMLDivElement>;
   } & React.HTMLAttributes<HTMLTableElement>
->(({ className, rootRef, ...props }, ref) => (
-  <div className="relative h-full w-full overflow-auto" ref={rootRef}>
+>(({ rootClassName, className, rootRef, ...props }, ref) => (
+  <div
+    className={cn("relative h-full w-full overflow-auto", rootClassName)}
+    ref={rootRef}
+  >
     <table
       ref={ref}
       className={cn("w-full caption-bottom text-sm border-collapse", className)}
@@ -16,6 +20,7 @@ const Table = React.forwardRef<
     />
   </div>
 ));
+
 Table.displayName = "Table";
 
 const TableHeader = React.forwardRef<

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

@@ -0,0 +1,66 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tree } from "./Tree";
+
+// Example data for testing the Tree component (as plain objects)
+const exampleData = [
+  {
+    id: "1",
+    title: "Parent Folder 1",
+    children: [
+      {
+        id: "1.1",
+        title: "Child Folder 1.1",
+        children: [
+          { id: "1.1.1", title: "Sub Folder 1.1.1" },
+          { id: "1.1.2", title: "Sub Folder 1.1.2" },
+        ],
+      },
+      { id: "1.2", title: "Child Folder 1.2" },
+    ],
+  },
+  {
+    id: "2",
+    title: "Parent Folder 2",
+    children: [{ id: "2.1", title: "Child Folder 2.1" }],
+  },
+  { id: "3", title: "Parent Folder 3" },
+];
+
+// Storybook metadata
+const meta: Meta<typeof Tree> = {
+  title: "Components/Tree",
+  component: Tree,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full bg-base-bg">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+// Default story
+export const Default: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData,
+    defaultExpandedId: ["1", "1.1"],
+    defaultCheckedId: ["1.1"],
+    defaultExpandAll: true,
+    defaultCheckAll: true,
+    hierarchicalCheck: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tree {...args} />
+      </div>
+    );
+  },
+};

package/src/components/Tree/Tree.tsx

@@ -0,0 +1,331 @@
+import { ActionButton, Checkbox, Icon, Loading, cn } from "@/index";
+import React, {
+  FC,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+  useEffect,
+} 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;
+}
+
+const TreeItem: FC<TreeItemProps> = ({
+  id,
+  title,
+  children,
+  isFirstLevel = false,
+  isLastItem,
+  checkIsExpanded,
+  checkIsChecked,
+  onExpandChange,
+  onCheckedChange,
+}) => {
+  const isChecked = useMemo(() => checkIsChecked(id), [checkIsChecked, id]);
+  const isExpanded = useMemo(() => checkIsExpanded(id), [checkIsExpanded, id]);
+  const hasChildren = useMemo(() => !!children?.length, [children]);
+
+  const handleExpandToggle = useCallback(() => {
+    onExpandChange?.(id, !isExpanded);
+  }, [id, isExpanded, onExpandChange]);
+
+  // TODO move to props
+  const lineSize = 2;
+  const horizontalLineWidth = 4;
+  const expandButtonSize = 30;
+  const spacing = 2;
+
+  const styles = {
+    branch: {
+      height: isLastItem
+        ? `calc(50% + ${lineSize}px)`
+        : `calc(100% + ${lineSize}px)`,
+      width: lineSize,
+      marginTop: -lineSize,
+      borderBottomLeftRadius: lineSize / 2,
+    },
+    horizontalLine: {
+      height: lineSize,
+      width:
+        lineSize +
+        horizontalLineWidth +
+        (hasChildren ? 0 : expandButtonSize + spacing),
+      marginLeft: -lineSize + 0.1,
+      borderBottomLeftRadius: lineSize / 2,
+    },
+    expandButton: {
+      width: expandButtonSize,
+      height: expandButtonSize,
+    },
+    childPadding: {
+      paddingLeft: isFirstLevel
+        ? expandButtonSize / 2 - lineSize / 2
+        : expandButtonSize / 2 + horizontalLineWidth - lineSize / 2,
+    },
+  };
+
+  return (
+    <div className="flex flex-row w-full">
+      <div
+        className={cn("bg-grey-150", { "h-1/2": isLastItem })}
+        style={styles.branch}
+      />
+      <div className="flex flex-col w-full">
+        <div className="flex items-center py-2 min-h-10">
+          {!isFirstLevel && (
+            <div className="bg-grey-150" style={styles.horizontalLine} />
+          )}
+
+          {isFirstLevel && !hasChildren && (
+            <div className="flex mr-[2px]" style={styles.expandButton} />
+          )}
+
+          {hasChildren && (
+            <div className="flex mr-[2px]" style={styles.expandButton}>
+              <ActionButton
+                variant="icon"
+                size="sm"
+                onClick={handleExpandToggle}
+              >
+                <Icon name={isExpanded ? "chevron-down" : "chevron-right"} />
+              </ActionButton>
+            </div>
+          )}
+          <Checkbox
+            id={id}
+            className="size-[16pt]"
+            checked={isChecked}
+            onCheckedChange={(newChecked) =>
+              onCheckedChange?.(id, newChecked as boolean)
+            }
+          />
+          <div className="ml-2 gap-1 flex items-center text-foreground">
+            <Icon
+              name={isExpanded ? "folder-open" : "folder"}
+              className="fill-warning"
+            />
+            <label
+              htmlFor={id}
+              className="flex-1 cursor-pointer text-subtitle5 text-ellipsis"
+            >
+              {title}
+            </label>
+          </div>
+        </div>
+        {isExpanded && hasChildren && (
+          <div className="flex flex-col" style={styles.childPadding}>
+            {children?.map((child, idx) => (
+              <TreeItem
+                key={child.id}
+                {...child}
+                isLastItem={idx === children.length - 1}
+                checkIsExpanded={checkIsExpanded}
+                checkIsChecked={checkIsChecked}
+                onExpandChange={onExpandChange}
+                onCheckedChange={onCheckedChange}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+export type TreeProps = {
+  data: TreeData[];
+  defaultExpandedId?: string[];
+  defaultCheckedId?: string[];
+  checkedId?: string[];
+  onCheckedChange?: (checkedId: string[]) => void;
+  defaultExpandAll?: boolean;
+  defaultCheckAll?: boolean;
+  hierarchicalCheck?: boolean;
+};
+
+export const Tree: FC<TreeProps> = ({
+  data,
+  defaultExpandedId = [],
+  defaultCheckedId = [],
+  checkedId,
+  onCheckedChange,
+  defaultExpandAll = false,
+  defaultCheckAll = false,
+  hierarchicalCheck = false,
+}) => {
+  const [checkedState, setCheckedState] = useState<Record<string, boolean>>({});
+  const [expandedState, setExpandedState] = useState<Record<string, boolean>>(
+    {}
+  );
+
+  const traverseTree = (
+    nodes: TreeData[],
+    callback: (node: TreeData) => void
+  ) => {
+    nodes.forEach((node) => {
+      callback(node);
+      if (node.children) {
+        traverseTree(node.children, callback);
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (defaultExpandAll) {
+      const allExpanded: Record<string, boolean> = {};
+      traverseTree(data, (node) => {
+        allExpanded[node.id] = true;
+      });
+      setExpandedState(allExpanded);
+    } else {
+      const initialExpandedState = defaultExpandedId.reduce((acc, id) => {
+        acc[id] = true;
+        return acc;
+      }, {} as Record<string, boolean>);
+      setExpandedState(initialExpandedState);
+    }
+  }, [data, defaultExpandedId, defaultExpandAll]);
+
+  useEffect(() => {
+    if (defaultCheckAll) {
+      const allChecked: Record<string, boolean> = {};
+      traverseTree(data, (node) => {
+        allChecked[node.id] = true;
+      });
+      setCheckedState(allChecked);
+    } else if (!checkedId) {
+      const initialCheckedState = defaultCheckedId.reduce((acc, id) => {
+        acc[id] = true;
+        return acc;
+      }, {} as Record<string, boolean>);
+      setCheckedState(initialCheckedState);
+    }
+  }, [data, defaultCheckedId, checkedId, defaultCheckAll]);
+
+  const handleExpandChange = useCallback((id: string, expanded: boolean) => {
+    setExpandedState((prev) => ({ ...prev, [id]: expanded }));
+  }, []);
+
+  const handleCheckedChange = useCallback(
+    (id: string, checked: boolean) => {
+      let newState = { ...checkedState, [id]: checked };
+
+      if (hierarchicalCheck) {
+        const updateCheckedState = (
+          nodeId: string,
+          isChecked: boolean,
+          state: Record<string, boolean>
+        ) => {
+          state[nodeId] = isChecked;
+
+          // Update children recursively
+          const updateChildren = (parentId: string, isChecked: boolean) => {
+            traverseTree(data, (node) => {
+              if (node.id === parentId && node.children) {
+                node.children.forEach((child) => {
+                  state[child.id] = isChecked;
+                  updateChildren(child.id, isChecked);
+                });
+              }
+            });
+          };
+
+          // Update parents recursively
+          const updateParents = (
+            childId: string,
+            state: Record<string, boolean>
+          ) => {
+            traverseTree(data, (node) => {
+              if (node.children?.some((child) => child.id === childId)) {
+                const allChildrenChecked = node.children.every(
+                  (child) => state[child.id]
+                );
+                state[node.id] = allChildrenChecked;
+                updateParents(node.id, state);
+              }
+            });
+          };
+
+          updateChildren(nodeId, isChecked);
+          updateParents(nodeId, state);
+
+          return state;
+        };
+
+        newState = updateCheckedState(id, checked, newState);
+      }
+
+      setCheckedState(newState);
+
+      if (onCheckedChange) {
+        const checkedIds = Object.keys(newState).filter((key) => newState[key]);
+        onCheckedChange(checkedIds);
+      }
+    },
+    [checkedState, data, onCheckedChange, hierarchicalCheck]
+  );
+
+  const checkIsExpanded = useCallback(
+    (id: string) => !!expandedState[id],
+    [expandedState]
+  );
+
+  const checkIsChecked = useCallback(
+    (id: string) => {
+      if (checkedId) {
+        return checkedId.includes(id);
+      }
+      return !!checkedState[id];
+    },
+    [checkedId, checkedState]
+  );
+
+  return (
+    <div className="w-full">
+      {data.map((item, idx) => (
+        <TreeItem
+          key={item.id}
+          {...item}
+          isFirstLevel
+          isLastItem={idx === data.length - 1}
+          checkIsExpanded={checkIsExpanded}
+          checkIsChecked={checkIsChecked}
+          onExpandChange={handleExpandChange}
+          onCheckedChange={handleCheckedChange}
+        />
+      ))}
+    </div>
+  );
+};
+/**
+ * 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
+ */

package/src/theme/global.css

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

package/src/theme/themes/SKL/baseline.css

@@ -0,0 +1,12 @@
+@import url(palette.css);
+@import url(state.css);
+@import url(color.css);
+@import url(transparent.css);
+@import url(variables.css);
+@import url(typography.css);
+@import url(components/button.css);
+@import url(components/action-button.css);
+@import url(components/loading.css);
+@import url(components/navbar.css);
+@import url(components/dropdown-menu.css);
+@import url(components/switch.css);

package/src/theme/themes/SKL/color.css

@@ -0,0 +1,78 @@
+
+:root[data-theme="SKL"] {
+  /* Base from design */
+  --input-color-default-text: #9e9e9e;
+  --input-color-default-stroke: #cfcfcf;
+  --input-color-filled-text: #4f4f4f;
+  --input-color-active-stroke: #9e9e9e;
+  --input-color-disable-text: #919eab;
+  --input-color-disable-stroke: #e7ebed;
+  --input-color-disable-bg: #f2f5f5;
+  --input-color-label-bg: #ffffff;/* #2d2e30; */
+  --input-color-error: #ed2f15;
+
+  /* Function button */
+  --function-default-solid: var(--state-color-primary-default);
+  --function-default-hover: var(--state-color-primary-hover);
+  --function-default-hover-bg: var(--state-color-primary-hover-bg);
+  --function-default-stroke: var(--state-color-primary-stroke);
+  --function-default-icon: #ffffff;
+  --function-default-outline-icon: var(--state-color-primary-default);
+  --function-active-solid: var(--state-color-secondary-default);
+  --function-active-hover: var(--state-color-secondary-hover);
+  --function-active-hover-bg: var(--state-color-secondary-hover-bg);
+  --function-active-stroke:  var(--state-color-secondary-stroke);
+  --function-active-icon: #ffffff;
+
+  --text-black: #000000;
+  --text-dark: #18283a;
+  --text-medium: #4b5b6d;
+  --text-light: #8e98a4;
+  --text-grey-dark: #4f4f4f;
+  --text-grey-medium: #7e7e7e;
+  --text-grey-light: #9e9e9e;
+  --text-white: #ffffff;
+
+  --base-color-bg: #f5f5f5;
+  --base-color-bg2: #f5f5f5;
+  --base-color-bg3: #d8d8d8;
+  --base-color-workspace-stroke: #e2e2e2;
+  --base-color-guideline-stroke: #c5c5c5;
+  --base-color-popup: #ffffff;
+  --base-color-popup-hightlight: #343638;
+  --base-color-popup-curtain: rgba(0 0 0 / 0.6);
+  --common-white: #ffffff;
+  --common-black: #000000;
+
+  /* ------- Addon base ---------- */
+  --background: var(--base-color-bg);
+  --foreground: var(--common-black);
+
+  --primary: var(--primary-ramps-primary-100);
+  --primary: var(--secondary-ramps-secondary-100);
+  --tertiary: var(--tertiary-ramps-tertiary-100);
+  --info: var(--info-info-100);
+  --success: var(--success-success-100);
+  --warning: var(--warning-warning-100);
+  --error: var(--error-error-100);
+  --grey: var(--grey-grey-100);
+  --grey2: var(--grey2-grey2-100);
+
+  --primary-foreground: var(--state-color-primary-text-solid);
+  --secondary-foreground:  var(--state-color-secondary-text-solid);
+  --tertiary-foreground: var(--state-color-tertiary-text-solid);
+  --info-foreground: var(--state-color-info-text-solid);
+  --success-foreground:  var(--state-color-success-text-solid);
+  --warning-foreground:  var(--state-color-warning-text-solid);
+  --error-foreground:  var(--state-color-error-text-solid);
+  --grey-foreground: var(--common-black);
+  --grey2-foreground: var(--common-black);
+
+  --surface: var(--base-color-bg);
+  --surface-foreground: var(--common-black);
+
+  --primary-foreground: var(--common-white);
+  --secondary-foreground: var(--common-white);
+  
+  --base-color-popup-foreground: var(--text-dark);
+}