@rovula/ui 0.0.50 → 0.0.52

package/dist/theme/global.css

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

package/package.json

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

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

@@ -6,7 +6,8 @@ import { ActionButton, Icon } from "@/index";
 const exampleData = [
   {
     id: "1",
-    title: "Parent Folder 1",
+    title:
+      "Parent Folder 1 Parent Folder 1 Parent Folder 1 Parent Folder 1 Parent Folder 1 Parent Folder 1 Parent Folder 1 Parent Folder 1",
     children: [
       {
         id: "1.1",

package/src/components/Tree/Tree.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useCallback, useEffect, useState } from "react";
 import TreeItem from "./TreeItem";
 import { TreeData, TreeProps } from "./type";
+import { cn } from "@/utils/cn";
 
 const Tree: FC<TreeProps> = ({
   classes,
@@ -9,6 +10,10 @@ const Tree: FC<TreeProps> = ({
   defaultCheckedId,
   checkedId,
   loadingId,
+  lineSize,
+  horizontalLineWidth,
+  expandButtonSize,
+  spacing,
   renderIcon,
   renderRightSection,
   renderElement,
@@ -166,7 +171,7 @@ const Tree: FC<TreeProps> = ({
   );
 
   return (
-    <div className="w-full">
+    <div className={cn("w-full", classes?.container)}>
       {data.map((item, idx) => (
         <TreeItem
           key={item.id}
@@ -185,6 +190,10 @@ const Tree: FC<TreeProps> = ({
           enableSeparatorLine={enableSeparatorLine}
           disabled={disabled}
           showIcon={showIcon}
+          lineSize={lineSize}
+          horizontalLineWidth={horizontalLineWidth}
+          expandButtonSize={expandButtonSize}
+          spacing={spacing}
           {...item}
         />
       ))}

package/src/components/Tree/TreeItem.tsx

@@ -26,6 +26,10 @@ const TreeItem: FC<TreeItemProps> = ({
   renderElement,
   renderTitle,
   renderRightSection,
+  lineSize = 2,
+  horizontalLineWidth = 4,
+  expandButtonSize = 30,
+  spacing = 2,
 }) => {
   const isLoading = useMemo(() => checkIsLoading?.(id), [checkIsLoading, id]);
   const isChecked = useMemo(() => checkIsChecked(id), [checkIsChecked, id]);
@@ -40,41 +44,41 @@ const TreeItem: FC<TreeItemProps> = ({
     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 && !(isExpanded && hasChildren)
-          ? `calc(50% + ${lineSize}px)`
-          : `calc(100% + ${lineSize}px)`,
-      width: lineSize,
-      marginTop: -lineSize,
-      borderBottomLeftRadius: lineSize / 2,
-    },
-    horizontalLine: {
-      height: lineSize,
-      width:
-        lineSize +
-        horizontalLineWidth +
-        (shouldExpandButton ? 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,
-    },
-  };
+  const styles = useMemo(
+    () => ({
+      branch: {
+        width: lineSize,
+        borderBottomLeftRadius: isLastItem ? lineSize / 2 : 0,
+      },
+      horizontalLine: {
+        height: lineSize,
+        width:
+          lineSize +
+          horizontalLineWidth +
+          (shouldExpandButton ? 0 : expandButtonSize + spacing),
+        marginLeft: -lineSize,
+        borderBottomLeftRadius: lineSize / 2,
+      },
+      expandButton: {
+        width: expandButtonSize,
+        height: expandButtonSize,
+      },
+      childPadding: {
+        paddingLeft: isFirstLevel
+          ? expandButtonSize / 2 - lineSize / 2
+          : expandButtonSize / 2 + horizontalLineWidth - lineSize / 2,
+      },
+    }),
+    [
+      lineSize,
+      horizontalLineWidth,
+      expandButtonSize,
+      spacing,
+      isFirstLevel,
+      isLastItem,
+      shouldExpandButton,
+    ]
+  );
 
   useEffect(() => {
     if (isExpanded && !isLoading && !hasChildren) {
@@ -124,96 +128,148 @@ const TreeItem: FC<TreeItemProps> = ({
       : content;
 
   return elementWrapper(
-    <div className={cn("flex flex-row w-full ", classes?.elementWrapper)}>
-      <div
-        className={cn("bg-grey-150", classes?.branch)}
-        style={styles.branch}
-      />
+    <div className={cn("flex flex-row w-full", classes?.elementWrapper)}>
       <div className={cn("flex flex-col w-full", classes?.itemWrapper)}>
-        <div
-          className={cn(
-            "flex items-center py-2 min-h-10",
-            classes?.itemContainer
-          )}
-        >
-          {!isFirstLevel && (
-            <div
-              className={cn("bg-grey-150", classes?.horizontalLine)}
-              style={styles.horizontalLine}
-            />
-          )}
-          {isFirstLevel && !shouldExpandButton && (
-            <div
-              className={cn("flex mr-[2px]", classes?.expandButton)}
-              style={styles.expandButton}
-            />
-          )}
-          {shouldExpandButton && (
-            <div
-              className={cn("flex mr-[2px]", classes?.expandButton)}
-              style={styles.expandButton}
-              onClick={!isLoading && handleExpandToggle}
-            >
-              <ActionButton variant="icon" size="sm">
-                {isLoading ? (
-                  <Loading />
-                ) : (
-                  <Icon name={isExpanded ? "chevron-down" : "chevron-right"} />
+        <div className={cn("flex flex-row flex-1", classes?.rowWrapperClasses)}>
+          <div
+            className={cn(
+              "flex flex-col h-full",
+              classes?.columnWrapperClasses
+            )}
+          >
+            {!isFirstLevel && (
+              <div
+                className={cn(
+                  "flex w-[2px] h-1/2 bg-grey-150",
+                  classes?.branch
                 )}
-              </ActionButton>
-            </div>
-          )}
-          <Checkbox
-            id={id}
-            className={cn("size-[16pt]", classes?.checkbox)}
-            checked={isChecked}
-            disabled={disabled}
-            onCheckedChange={(newChecked) =>
-              onCheckedChange?.(id, newChecked as boolean)
-            }
-          />
+                style={styles.branch}
+              />
+            )}
+            {!isFirstLevel &&
+              !isLastItem &&
+              ((isExpanded && (hasChildren || isLoading)) || !isExpanded) && (
+                <div
+                  className={cn(
+                    "flex w-[2px] h-1/2 bg-grey-150",
+                    classes?.branch
+                  )}
+                  style={styles.branch}
+                />
+              )}
+          </div>
+
           <div
             className={cn(
-              "ml-2 gap-1 flex flex-1 items-center text-foreground",
-              classes?.item
+              "flex flex-1 items-center py-2 min-h-10",
+              classes?.itemContainer
             )}
-            onClick={handleOnClickItem}
           >
-            {showIcon ? customIcon || defaultIcon : null}
+            {!isFirstLevel && (
+              <div
+                className={cn("bg-grey-150", classes?.horizontalLine)}
+                style={styles.horizontalLine}
+              />
+            )}
+            {isFirstLevel && !shouldExpandButton && (
+              <div
+                className={cn("flex mr-[2px]", classes?.expandButton)}
+                style={styles.expandButton}
+              />
+            )}
+            {shouldExpandButton && (
+              <div
+                className={cn("flex mr-[2px]", classes?.expandButton)}
+                style={styles.expandButton}
+                onClick={!isLoading && handleExpandToggle}
+              >
+                <ActionButton variant="icon" size="sm">
+                  {isLoading ? (
+                    <Loading />
+                  ) : (
+                    <Icon
+                      name={isExpanded ? "chevron-down" : "chevron-right"}
+                    />
+                  )}
+                </ActionButton>
+              </div>
+            )}
+            <Checkbox
+              id={id}
+              className={cn("size-[16pt]", classes?.checkbox)}
+              checked={isChecked}
+              disabled={disabled}
+              onCheckedChange={(newChecked) =>
+                onCheckedChange?.(id, newChecked as boolean)
+              }
+            />
             <div
               className={cn(
-                "flex flex-1 cursor-pointer text-subtitle5 text-ellipsis",
-                classes?.title
+                "ml-2 gap-1 flex flex-1 items-center text-foreground",
+                classes?.item
               )}
+              onClick={handleOnClickItem}
             >
-              {titleContent}
+              {showIcon ? customIcon || defaultIcon : null}
+              <div
+                className={cn(
+                  "flex flex-1 cursor-pointer text-subtitle5 text-ellipsis",
+                  classes?.title
+                )}
+              >
+                {titleContent}
+              </div>
             </div>
+            {rightIcon}
           </div>
-          {rightIcon}
         </div>
+
         {isExpanded && hasChildren && (
           <div
-            className={cn("flex flex-col", classes?.childrenWrapper)}
-            style={styles.childPadding}
+            className={cn(
+              "flex flex-row overflow-hidden max-h-screen",
+              classes?.expandedChildrenWrapper
+            )}
           >
-            {children?.map((child, idx) => (
-              <TreeItem
-                key={child.id}
-                classes={classes}
-                isLastItem={idx === children.length - 1}
-                checkIsExpanded={checkIsExpanded}
-                checkIsChecked={checkIsChecked}
-                checkIsLoading={checkIsLoading}
-                onExpandChange={onExpandChange}
-                onCheckedChange={onCheckedChange}
-                renderIcon={renderIcon}
-                renderElement={renderElement}
-                renderTitle={renderTitle}
-                disabled={disabled}
-                showIcon={showIcon}
-                {...child}
+            {!isFirstLevel && !isLastItem && (
+              <div
+                className={cn(
+                  "flex w-[2px] h-full bg-grey-150",
+                  classes?.branch
+                )}
+                style={styles.branch}
               />
-            ))}
+            )}
+            <div
+              className={cn(
+                "flex flex-col overflow-hidden max-h-screen",
+                classes?.expandedChildrenWrapperInner
+              )}
+              style={styles.childPadding}
+            >
+              {children?.map((child, idx) => (
+                <TreeItem
+                  key={child.id}
+                  classes={classes}
+                  isLastItem={idx === children.length - 1}
+                  checkIsExpanded={checkIsExpanded}
+                  checkIsChecked={checkIsChecked}
+                  checkIsLoading={checkIsLoading}
+                  onExpandChange={onExpandChange}
+                  onCheckedChange={onCheckedChange}
+                  renderIcon={renderIcon}
+                  renderElement={renderElement}
+                  renderTitle={renderTitle}
+                  disabled={disabled}
+                  showIcon={showIcon}
+                  lineSize={lineSize}
+                  horizontalLineWidth={horizontalLineWidth}
+                  expandButtonSize={expandButtonSize}
+                  spacing={spacing}
+                  {...child}
+                />
+              ))}
+            </div>
           </div>
         )}
         {enableSeparatorLine && isFirstLevel && !isLastItem && (

package/src/components/Tree/type.ts

@@ -21,6 +21,10 @@ export interface TreeItemProps extends TreeData {
   showIcon?: boolean;
   showExpandButton?: boolean;
   enableSeparatorLine?: boolean;
+  lineSize?: number;
+  horizontalLineWidth?: number;
+  expandButtonSize?: number;
+  spacing?: number;
   checkIsExpanded: (id: string) => boolean;
   checkIsChecked: (id: string) => boolean;
   checkIsLoading?: (id: string) => void;
@@ -51,17 +55,21 @@ export interface TreeItemProps extends TreeData {
     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;
+    container?: string;
+    elementWrapper?: string;
+    branch?: string;
+    itemWrapper?: string;
+    itemContainer?: string;
+    horizontalLine?: string;
+    expandButton?: string;
+    separatorLine?: string;
+    checkbox?: string;
+    item?: string;
+    title?: string;
+    expandedChildrenWrapper?: string;
+    expandedChildrenWrapperInner?: string;
+    rowWrapperClasses?: string;
+    columnWrapperClasses?: string;
   }>;
 }
 
@@ -76,6 +84,10 @@ export interface TreeProps
     | "disabled"
     | "enableSeparatorLine"
     | "classes"
+    | "lineSize"
+    | "horizontalLineWidth"
+    | "expandButtonSize"
+    | "spacing"
   > {
   data: TreeData[];
   defaultExpandedId?: string[];

package/src/theme/global.css

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

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

@@ -1,12 +0,0 @@
-@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/dist/theme/themes/SKL/color.css

@@ -1,78 +0,0 @@
-
-: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);
-}

package/dist/theme/themes/SKL/components/action-button.css

@@ -1,127 +0,0 @@
-:root[data-theme="SKL"] {
-  /* --------------------------------------------------------------------------------- */
-  /* Action Button Component Tokens                                                    */
-  /* --------------------------------------------------------------------------------- */
-  /* Naming Convention: --[component]-[mode]-[state]-[property]                        */
-  /* Mone:   [solid, outline, icon]                                                    */
-  /* States: [default, hover, pressed, active, active-pressed active-hover disabled]   */
-  /* --------------------------------------------------------------------------------- */
-
-  /* ------------------------------------------------------------------ */
-  /* Solid Mode Tokens                                                  */
-  /* ------------------------------------------------------------------ */
-
-  /* Default State */
-  --action-button-solid-default-bg: var(--function-default-solid);
-  --action-button-solid-default-border: var(--function-default-solid);
-  --action-button-solid-default-text: var(--function-default-icon);
-
-  /* Hover State */
-  --action-button-solid-hover-bg: var(--function-default-hover);
-  --action-button-solid-hover-border: var(--function-default-hover);
-  --action-button-solid-hover-text: var(--function-default-icon);
-
-  /* Pressed State */
-  --action-button-solid-pressed-bg: var(--function-default-solid);
-  --action-button-solid-pressed-border: var(--function-default-solid);
-  --action-button-solid-pressed-text: var(--function-default-icon);
-
-  /* Active State */
-  --action-button-solid-active-bg: var(--function-active-solid);
-  --action-button-solid-active-border: var(--function-active-solid);
-  --action-button-solid-active-text: var(--function-active-icon);
-
-  /* Active Hover State */
-  --action-button-solid-active-hover-bg: var(--function-active-hover);
-  --action-button-solid-active-hover-border: var(--function-active-hover);
-  --action-button-solid-active-hover-text: var(--function-active-icon);
-
-  /* Active Pressed State */
-  --action-button-solid-active-pressed-bg: var(--function-active-solid);
-  --action-button-solid-active-pressed-border: var(--function-active-solid);
-  --action-button-solid-active-pressed-text: var(--function-active-icon);
-
-  /* Disabled State */
-  --action-button-solid-disabled-bg: var(--state-color-disable-solid);
-  --action-button-solid-disabled-border: var(--state-color-disable-solid);
-  --action-button-solid-disabled-text: var(--state-color-disable-outline);
-
-
-  /* ------------------------------------------------------------------ */
-  /* Outline Mode Tokens                                                */
-  /* ------------------------------------------------------------------ */
-
-  /* Default State */
-  --action-button-outline-default-bg: transparent;
-  --action-button-outline-default-border: var(--function-default-stroke);
-  --action-button-outline-default-text: var(--function-default-outline-icon);
-
-  /* Hover State */
-  --action-button-outline-hover-bg: var(--function-default-hover-bg);
-  --action-button-outline-hover-border: var(--function-default-hover);
-  --action-button-outline-hover-text: var(--function-default-hover);
-
-  /* Pressed State */
-  --action-button-outline-pressed-bg: var(--function-default-hover-bg);
-  --action-button-outline-pressed-border: var(--function-default-stroke);
-  --action-button-outline-pressed-text: var(--function-default-outline-icon);
-
-  /* Active State */
-  --action-button-outline-active-bg: transparent;
-  --action-button-outline-active-border: var(--function-active-stroke);
-  --action-button-outline-active-text: var(--function-active-solid);
-
-  /* Active Hover State */
-  --action-button-outline-active-hover-bg:  var(--function-active-hover-bg);;
-  --action-button-outline-active-hover-border: var(--function-active-hover);
-  --action-button-outline-active-hover-text: var(--function-active-hover);
-
-  /* Active Pressed State */
-  --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);;
-  --action-button-outline-active-pressed-border: var(--function-active-stroke);
-  --action-button-outline-active-pressed-text: var(--function-active-solid);
-
-  /* Disabled State */
-  --action-button-outline-disabled-bg: transparent;
-  --action-button-outline-disabled-border: var(--state-color-disable-outline);
-  --action-button-outline-disabled-text: var(--state-color-disable-outline);
-
-  /* ------------------------------------------------------------------ */
-  /* Icon Mode Tokens                                                  */
-  /* ------------------------------------------------------------------ */
-
-  /* Default State */
-  --action-button-icon-default-bg: transparent;
-  --action-button-icon-default-border: transparent;
-  --action-button-icon-default-text: var(--function-default-outline-icon);
-
-  /* Hover State */
-  --action-button-icon-hover-bg: var(--function-default-hover-bg);
-  --action-button-icon-hover-border: transparent;
-  --action-button-icon-hover-text: var(--function-default-hover);
-
-  /* Pressed State */
-  --action-button-icon-pressed-bg: transparent;
-  --action-button-icon-pressed-border: transparent;
-  --action-button-icon-pressed-text: var(--function-default-outline-icon);
-
-  /* Active State */
-  --action-button-icon-active-bg: transparent;
-  --action-button-icon-active-border: transparent;
-  --action-button-icon-active-text: var(--function-active-solid);
-
-  /* Active Hover State */
-  --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
-  --action-button-icon-active-hover-border: transparent;
-  --action-button-icon-active-hover-text: var(--function-active-hover);
-
-  /* Active Pressed State */
-  --action-button-icon-active-pressed-bg: transparent;
-  --action-button-icon-active-pressed-border: transparent;
-  --action-button-icon-active-pressed-text: var(--function-active-solid);
-
-  /* Disabled State */
-  --action-button-icon-disabled-bg: transparent;
-  --action-button-icon-disabled-border: transparent;
-  --action-button-icon-disabled-text: var(--state-color-disable-outline);
-}