@rovula/ui 0.0.51 → 0.0.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/dist/cjs/bundle.css +50 -11
  2. package/dist/cjs/bundle.js +2 -2
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/Tabs/Tabs.d.ts +14 -1
  5. package/dist/cjs/types/components/Tabs/Tabs.stories.d.ts +81 -2
  6. package/dist/cjs/types/components/Tree/Tree.stories.d.ts +3 -0
  7. package/dist/cjs/types/components/Tree/example-data.d.ts +5 -0
  8. package/dist/cjs/types/components/Tree/type.d.ts +14 -4
  9. package/dist/components/Tabs/Tabs.js +35 -18
  10. package/dist/components/Tabs/Tabs.stories.js +70 -3
  11. package/dist/components/Tree/Tree.js +7 -4
  12. package/dist/components/Tree/Tree.stories.js +34 -2090
  13. package/dist/components/Tree/TreeItem.js +16 -8
  14. package/dist/components/Tree/example-data.js +2125 -0
  15. package/dist/esm/bundle.css +50 -11
  16. package/dist/esm/bundle.js +2 -2
  17. package/dist/esm/bundle.js.map +1 -1
  18. package/dist/esm/types/components/Tabs/Tabs.d.ts +14 -1
  19. package/dist/esm/types/components/Tabs/Tabs.stories.d.ts +81 -2
  20. package/dist/esm/types/components/Tree/Tree.stories.d.ts +3 -0
  21. package/dist/esm/types/components/Tree/example-data.d.ts +5 -0
  22. package/dist/esm/types/components/Tree/type.d.ts +14 -4
  23. package/dist/index.d.ts +27 -5
  24. package/dist/src/theme/global.css +36 -1164
  25. package/dist/theme/global.css +0 -1
  26. package/package.json +6 -1
  27. package/src/components/Tabs/Tabs.css +21 -0
  28. package/src/components/Tabs/Tabs.stories.tsx +140 -4
  29. package/src/components/Tabs/Tabs.tsx +134 -50
  30. package/src/components/Tree/Tree.stories.tsx +58 -2124
  31. package/src/components/Tree/Tree.tsx +17 -3
  32. package/src/components/Tree/TreeItem.tsx +47 -17
  33. package/src/components/Tree/example-data.ts +2162 -0
  34. package/src/components/Tree/type.ts +18 -4
  35. package/src/theme/global.css +0 -1
  36. package/dist/theme/themes/SKL/baseline.css +0 -12
  37. package/dist/theme/themes/SKL/color.css +0 -78
  38. package/dist/theme/themes/SKL/components/action-button.css +0 -127
  39. package/dist/theme/themes/SKL/components/button.css +0 -512
  40. package/dist/theme/themes/SKL/components/dropdown-menu.css +0 -27
  41. package/dist/theme/themes/SKL/components/loading.css +0 -11
  42. package/dist/theme/themes/SKL/components/navbar.css +0 -8
  43. package/dist/theme/themes/SKL/components/progress-bar.css +0 -8
  44. package/dist/theme/themes/SKL/components/switch.css +0 -30
  45. package/dist/theme/themes/SKL/palette.css +0 -145
  46. package/dist/theme/themes/SKL/state.css +0 -86
  47. package/dist/theme/themes/SKL/transparent.css +0 -68
  48. package/dist/theme/themes/SKL/typography.css +0 -199
  49. package/dist/theme/themes/SKL/variables.css +0 -28
  50. package/src/theme/themes/SKL/baseline.css +0 -12
  51. package/src/theme/themes/SKL/color.css +0 -78
  52. package/src/theme/themes/SKL/components/action-button.css +0 -127
  53. package/src/theme/themes/SKL/components/button.css +0 -512
  54. package/src/theme/themes/SKL/components/dropdown-menu.css +0 -27
  55. package/src/theme/themes/SKL/components/loading.css +0 -11
  56. package/src/theme/themes/SKL/components/navbar.css +0 -8
  57. package/src/theme/themes/SKL/components/progress-bar.css +0 -8
  58. package/src/theme/themes/SKL/components/switch.css +0 -30
  59. package/src/theme/themes/SKL/palette.css +0 -145
  60. package/src/theme/themes/SKL/state.css +0 -86
  61. package/src/theme/themes/SKL/transparent.css +0 -68
  62. package/src/theme/themes/SKL/typography.css +0 -199
  63. package/src/theme/themes/SKL/variables.css +0 -28
package/dist/components/Tree/TreeItem.js CHANGED
@@ -3,15 +3,15 @@ import { ActionButton, Checkbox, Loading } from "@/index";
3
3
  import { cn } from "@/utils/cn";
4
4
  import { useCallback, useEffect, useMemo } from "react";
5
5
  import Icon from "../Icon/Icon";
6
- const TreeItem = ({ id, title, classes, children, isFirstLevel = false, disabled, icon, showIcon, showExpandButton, enableSeparatorLine = true, isLastItem, checkIsExpanded, checkIsChecked, checkIsLoading, onExpandChange, onCheckedChange, onClickItem, renderIcon, renderElement, renderTitle, renderRightSection, lineSize = 2, horizontalLineWidth = 4, expandButtonSize = 30, spacing = 2, }) => {
6
+ const TreeItem = ({ id, title, classes, children, isFirstLevel = false, isLeaf = false, disabled, icon, showIcon, showExpandButton, enableSeparatorLine = true, isLastItem, checkable, checkIsExpanded, checkIsChecked, checkIsLoading, onExpandChange, onCheckedChange, onClickItem, renderIcon, renderElement, renderTitle, renderRightSection, lineSize = 2, horizontalLineWidth = 4, expandButtonSize = 30, spacing = 2, currentLevel = 1, maxLevel = 10, notifyClickItem, }) => {
7
7
  const isLoading = useMemo(() => checkIsLoading === null || checkIsLoading === void 0 ? void 0 : checkIsLoading(id), [checkIsLoading, id]);
8
8
  const isChecked = useMemo(() => checkIsChecked(id), [checkIsChecked, id]);
9
9
  const isExpanded = useMemo(() => checkIsExpanded(id), [checkIsExpanded, id]);
10
10
  const hasChildren = useMemo(() => !!(children === null || children === void 0 ? void 0 : children.length), [children]);
11
- const shouldExpandButton = useMemo(() => (showExpandButton !== undefined ? showExpandButton : hasChildren), [hasChildren, showExpandButton]);
12
- const handleExpandToggle = useCallback(() => {
13
- onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(id, !isExpanded);
14
- }, [id, isExpanded, onExpandChange]);
11
+ const shouldExpandButton = useMemo(() => (showExpandButton !== undefined ? showExpandButton : hasChildren) &&
12
+ currentLevel < (maxLevel || Infinity), [hasChildren, showExpandButton, maxLevel, currentLevel]);
13
+ const shouldShowCheckbox = useMemo(() => (!checkable ? false : !isLeaf), [checkable, isLeaf]);
14
+ const checkboxSpace = isLeaf ? 21.328 : 0;
15
15
  const styles = useMemo(() => ({
16
16
  branch: {
17
17
  width: lineSize,
@@ -21,7 +21,8 @@ const TreeItem = ({ id, title, classes, children, isFirstLevel = false, disabled
21
21
  height: lineSize,
22
22
  width: lineSize +
23
23
  horizontalLineWidth +
24
- (shouldExpandButton ? 0 : expandButtonSize + spacing),
24
+ (shouldExpandButton ? 0 : expandButtonSize + spacing) +
25
+ checkboxSpace,
25
26
  marginLeft: -lineSize,
26
27
  borderBottomLeftRadius: lineSize / 2,
27
28
  },
@@ -42,7 +43,11 @@ const TreeItem = ({ id, title, classes, children, isFirstLevel = false, disabled
42
43
  isFirstLevel,
43
44
  isLastItem,
44
45
  shouldExpandButton,
46
+ checkboxSpace,
45
47
  ]);
48
+ const handleExpandToggle = useCallback(() => {
49
+ onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(id, !isExpanded);
50
+ }, [id, isExpanded, onExpandChange]);
46
51
  useEffect(() => {
47
52
  if (isExpanded && !isLoading && !hasChildren) {
48
53
  handleExpandToggle();
@@ -50,7 +55,8 @@ const TreeItem = ({ id, title, classes, children, isFirstLevel = false, disabled
50
55
  }, [isLoading, handleExpandToggle]);
51
56
  const handleOnClickItem = useCallback(() => {
52
57
  onClickItem === null || onClickItem === void 0 ? void 0 : onClickItem(id);
53
- }, [onClickItem, id]);
58
+ notifyClickItem === null || notifyClickItem === void 0 ? void 0 : notifyClickItem(id);
59
+ }, [onClickItem, notifyClickItem, id]);
54
60
  const defaultIcon = (_jsx(Icon, { name: isExpanded ? "folder-open" : "folder", className: "fill-warning" }));
55
61
  const customIcon = icon !== null && icon !== void 0 ? icon : renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon({
56
62
  id,
@@ -77,6 +83,8 @@ const TreeItem = ({ id, title, classes, children, isFirstLevel = false, disabled
77
83
  : content;
78
84
  return elementWrapper(_jsx("div", { className: cn("flex flex-row w-full", classes === null || classes === void 0 ? void 0 : classes.elementWrapper), children: _jsxs("div", { className: cn("flex flex-col w-full", classes === null || classes === void 0 ? void 0 : classes.itemWrapper), children: [_jsxs("div", { className: cn("flex flex-row flex-1", classes === null || classes === void 0 ? void 0 : classes.rowWrapperClasses), children: [_jsxs("div", { className: cn("flex flex-col h-full", classes === null || classes === void 0 ? void 0 : classes.columnWrapperClasses), children: [!isFirstLevel && (_jsx("div", { className: cn("flex w-[2px] h-1/2 bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.branch), style: styles.branch })), !isFirstLevel &&
79
85
  !isLastItem &&
80
- ((isExpanded && (hasChildren || isLoading)) || !isExpanded) && (_jsx("div", { className: cn("flex w-[2px] h-1/2 bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.branch), style: styles.branch }))] }), _jsxs("div", { className: cn("flex flex-1 items-center py-2 min-h-10", classes === null || classes === void 0 ? void 0 : classes.itemContainer), children: [!isFirstLevel && (_jsx("div", { className: cn("bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.horizontalLine), style: styles.horizontalLine })), isFirstLevel && !shouldExpandButton && (_jsx("div", { className: cn("flex mr-[2px]", classes === null || classes === void 0 ? void 0 : classes.expandButton), style: styles.expandButton })), shouldExpandButton && (_jsx("div", { className: cn("flex mr-[2px]", classes === null || classes === void 0 ? void 0 : classes.expandButton), style: styles.expandButton, onClick: !isLoading && handleExpandToggle, children: _jsx(ActionButton, { variant: "icon", size: "sm", children: isLoading ? (_jsx(Loading, {})) : (_jsx(Icon, { name: isExpanded ? "chevron-down" : "chevron-right" })) }) })), _jsx(Checkbox, { id: id, className: cn("size-[16pt]", classes === null || classes === void 0 ? void 0 : classes.checkbox), checked: isChecked, disabled: disabled, onCheckedChange: (newChecked) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(id, newChecked) }), _jsxs("div", { className: cn("ml-2 gap-1 flex flex-1 items-center text-foreground", classes === null || classes === void 0 ? void 0 : classes.item), onClick: handleOnClickItem, children: [showIcon ? customIcon || defaultIcon : null, _jsx("div", { className: cn("flex flex-1 cursor-pointer text-subtitle5 text-ellipsis", classes === null || classes === void 0 ? void 0 : classes.title), children: titleContent })] }), rightIcon] })] }), isExpanded && hasChildren && (_jsxs("div", { className: cn("flex flex-row overflow-hidden max-h-screen", classes === null || classes === void 0 ? void 0 : classes.expandedChildrenWrapper), children: [!isFirstLevel && !isLastItem && (_jsx("div", { className: cn("flex w-[2px] h-full bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.branch), style: styles.branch })), _jsx("div", { className: cn("flex flex-col overflow-hidden max-h-screen", classes === null || classes === void 0 ? void 0 : classes.expandedChildrenWrapperInner), style: styles.childPadding, children: children === null || children === void 0 ? void 0 : children.map((child, idx) => (_jsx(TreeItem, Object.assign({ 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), child.id))) })] })), enableSeparatorLine && isFirstLevel && !isLastItem && (_jsx("div", { className: cn("bg-grey-150 w-full h-[2px] rounded", classes === null || classes === void 0 ? void 0 : classes.separatorLine) }))] }) }));
86
+ ((isExpanded && (hasChildren || isLoading)) || !isExpanded) && (_jsx("div", { className: cn("flex w-[2px] h-1/2 bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.branch), style: styles.branch }))] }), _jsxs("div", { className: cn("flex flex-1 items-center py-2 min-h-10", classes === null || classes === void 0 ? void 0 : classes.itemContainer), children: [!isFirstLevel && (_jsx("div", { className: cn("bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.horizontalLine), style: styles.horizontalLine })), isFirstLevel && !shouldExpandButton && (_jsx("div", { className: cn("flex mr-[2px]", classes === null || classes === void 0 ? void 0 : classes.expandButton), style: styles.expandButton })), shouldExpandButton && (_jsx("div", { className: cn("flex mr-[2px]", classes === null || classes === void 0 ? void 0 : classes.expandButton), style: styles.expandButton, onClick: !isLoading && handleExpandToggle, children: _jsx(ActionButton, { variant: "icon", size: "sm", children: isLoading ? (_jsx(Loading, {})) : (_jsx(Icon, { name: isExpanded ? "chevron-down" : "chevron-right" })) }) })), shouldShowCheckbox ? (_jsx(Checkbox, { id: id, className: cn("size-[16pt]", classes === null || classes === void 0 ? void 0 : classes.checkbox), checked: isChecked, disabled: disabled, onCheckedChange: (newChecked) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(id, newChecked) })) : (_jsx("div", { className: isFirstLevel && checkable
87
+ ? cn("size-[16pt]", classes === null || classes === void 0 ? void 0 : classes.checkbox)
88
+ : "" })), _jsxs("div", { className: cn("ml-2 gap-1 flex flex-1 items-center text-foreground", classes === null || classes === void 0 ? void 0 : classes.item), onClick: handleOnClickItem, children: [showIcon ? customIcon || defaultIcon : null, _jsx("div", { className: cn("flex flex-1 cursor-pointer text-subtitle5 text-ellipsis", classes === null || classes === void 0 ? void 0 : classes.title), children: titleContent })] }), rightIcon] })] }), isExpanded && hasChildren && currentLevel < (maxLevel || Infinity) && (_jsxs("div", { className: cn("flex flex-row overflow-hidden max-h-screen", classes === null || classes === void 0 ? void 0 : classes.expandedChildrenWrapper), children: [!isFirstLevel && !isLastItem && (_jsx("div", { className: cn("flex w-[2px] h-full bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.branch), style: styles.branch })), _jsx("div", { className: cn("flex flex-col overflow-hidden max-h-screen", classes === null || classes === void 0 ? void 0 : classes.expandedChildrenWrapperInner), style: styles.childPadding, children: children === null || children === void 0 ? void 0 : children.map((child, idx) => (_jsx(TreeItem, Object.assign({ 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, notifyClickItem: notifyClickItem, maxLevel: maxLevel, currentLevel: currentLevel + 1, checkable: checkable }, child), child.id))) })] })), enableSeparatorLine && isFirstLevel && !isLastItem && (_jsx("div", { className: cn("bg-grey-150 w-full h-[2px] rounded", classes === null || classes === void 0 ? void 0 : classes.separatorLine) }))] }) }));
81
89
  };
82
90
  export default TreeItem;