@rovula/ui 0.0.47 → 0.0.48

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/themes/SKL/color.css

@@ -12,16 +12,16 @@
   --input-color-error: #ed2f15;
 
   /* Function button */
-  --function-default-solid: #1e3249;
-  --function-default-hover: #35475b;
-  --function-default-hover-bg: rgba(30 50 73 / 0.08);
-  --function-default-stroke: rgba(30 50 73 / 0.48);
+  --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: #1e3249;
-  --function-active-solid: #9b8f00;
-  --function-active-hover: #b1a400;
-  --function-active-hover-bg: rgba(221 205 0 / 0.08);
-  --function-active-stroke: rgba(177 164 0 / 0.48);
+  --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;
@@ -49,7 +49,7 @@
   --foreground: var(--common-black);
 
   --primary: var(--primary-ramps-primary-100);
-  --secondary: var(--secondary-ramps-secondary-100);
+  --primary: var(--secondary-ramps-secondary-100);
   --tertiary: var(--tertiary-ramps-tertiary-100);
   --info: var(--info-info-100);
   --success: var(--success-success-100);

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

@@ -6,3 +6,4 @@
 @import url(components/action-button.css);
 @import url(components/loading.css);
 @import url(components/dropdown-menu.css);
+@import url(components/switch.css);

package/src/theme/themes/xspector/components/switch.css

@@ -0,0 +1,30 @@
+:root[data-theme="xspector"] {
+  /* ------------------------------------------------------------------ */
+  /* Switch Component Tokens                                           */
+  /* ------------------------------------------------------------------ */
+  /* Naming Convention: --[component]-[element]-[state]-[property]              */
+  /* Element: [progress, track]                                         */
+  /* ------------------------------------------------------------------ */
+
+  /* Default State */
+  --switch-default-color: rgb(from var(--state-color-secondary-active) r g b / 0.32);
+  --switch-thumb-default-color: var(--state-color-secondary-active);
+
+  /* Hover State */
+  --switch-hover-color: rgb(from var(--state-color-secondary-active) r g b / 0.48);
+  --switch-thumb-hover-color: var(--switch-thumb-default-color);
+  --switch-thumb-hover-ring: var(--state-color-secondary-hover-bg);
+
+  /* Active State */
+  --switch-active-color: rgb(from var(--state-color-primary-active) r g b / 0.32);
+  --switch-thumb-active-color: var(--state-color-primary-active);
+
+  /* Active Hover State */
+  --switch-active-hover-color: rgb(from var(--state-color-primary-active) r g b / 0.48);
+  --switch-thumb-active-hover-color: var(--switch-thumb-active-color);
+  --switch-thumb-active-hover-ring: var(--state-color-primary-hover-bg);
+
+  /* Disabled State */
+  --switch-disabled-color: rgb(from var(--state-color-disable-solid) r g b / 0.32);
+  --switch-thumb-disabled-color: var(--state-color-disable-solid)
+}