@rovula/ui 0.0.73 → 0.0.75

package/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,150 @@
+import React, { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
+import { cn } from "@/utils/cn";
+import {
+  textareaVariant,
+  labelVariant as textareaLabelVariant,
+  helperTextVariant as textareaHelperTextVariant,
+  clearIconWrapperVariant,
+  clearIconVariant,
+} from "./TextArea.styles";
+import { XCircleIcon } from "@heroicons/react/16/solid";
+
+export type TextAreaProps = {
+  id?: string;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  rounded?: "none" | "normal" | "full";
+  variant?: "flat" | "outline" | "underline";
+  helperText?: string;
+  errorMessage?: string;
+  fullwidth?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  required?: boolean;
+  isFloatingLabel?: boolean;
+  keepCloseIconOnValue?: boolean;
+  hasClearIcon?: boolean;
+  labelClassName?: string;
+  className?: string;
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">;
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (
+    {
+      id,
+      label,
+      size = "md",
+      rounded = "normal",
+      variant = "outline",
+      helperText,
+      errorMessage,
+      fullwidth = true,
+      disabled = false,
+      error = false,
+      required = true,
+      isFloatingLabel = true,
+      keepCloseIconOnValue = false,
+      hasClearIcon = true,
+      labelClassName,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const _id = id || `textarea-${label ?? ""}`;
+
+    useImperativeHandle(ref, () => textareaRef?.current as HTMLTextAreaElement);
+
+    // Reuse TextInput visual language via utility classes to stay consistent
+    const containerClassName = useMemo(
+      () => `inline-flex flex-col ${fullwidth ? "w-full" : ""}`,
+      [fullwidth]
+    );
+
+    const textareaClassName = textareaVariant({
+      size,
+      rounded,
+      variant,
+      fullwidth,
+      disabled,
+      error,
+      hasClearIcon,
+      isFloatingLabel,
+    } as any);
+
+    return (
+      <div className={containerClassName}>
+        <div className="relative">
+          <textarea
+            {...props}
+            id={_id}
+            ref={textareaRef}
+            disabled={disabled}
+            placeholder={isFloatingLabel ? " " : props.placeholder}
+            className={cn(textareaClassName, className)}
+          />
+          {hasClearIcon && (
+            <div
+              className={clearIconWrapperVariant({ size })}
+              style={{
+                display:
+                  keepCloseIconOnValue && props.value ? "flex" : undefined,
+              }}
+            >
+              <XCircleIcon
+                type="button"
+                className={clearIconVariant({ size })}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  if (textareaRef.current) {
+                    const prev = textareaRef.current.value;
+                    textareaRef.current.value = "";
+                    if (props.onChange && prev !== "") {
+                      props.onChange({ target: { value: "" } } as any);
+                    }
+                    textareaRef.current.focus();
+                  }
+                }}
+              />
+            </div>
+          )}
+          {label && (
+            <label
+              htmlFor={_id}
+              className={cn(
+                textareaLabelVariant({
+                  size,
+                  disabled,
+                  error,
+                  isFloatingLabel,
+                }),
+                labelClassName
+              )}
+            >
+              {label}{" "}
+              {required && (
+                <span
+                  className={cn("text-error", {
+                    "text-input-disable-text": disabled,
+                  })}
+                >
+                  *
+                </span>
+              )}
+            </label>
+          )}
+        </div>
+        {(errorMessage || helperText) && (
+          <span
+            className={textareaHelperTextVariant({ size, disabled, error })}
+          >
+            {errorMessage || helperText}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+export default TextArea;

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

@@ -446,3 +446,103 @@ export const CheckAll: StoryObj<typeof Tree> = {
     );
   },
 };
+
+export const LongText: StoryObj<typeof Tree> = {
+  args: {
+    data: [
+      {
+        id: "2699d80b-6772-4878-9639-75e370786e79",
+        title:
+          "Level1 RUNLINE_LV_2_00000000000000000000000000000000000000000000000000000000",
+        children: [
+          {
+            id: "9b4511f4-ad9a-42e0-8376-60d5edbeffb3",
+            title:
+              "Level1 RUNLINE_LV_3_0000000000000000000000000000000000000000000000000000",
+            children: [
+              {
+                id: "c8d5dfb5-6c61-482b-88fe-186eb7685479",
+                title: "2025-07-27_05-25-53",
+                children: [],
+              },
+              {
+                id: "81ff1dd0-b283-4f60-864e-5d814e99d903",
+                title: "2025-07-27_06-05-53",
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: "ad79c17b-2861-431a-af0e-3f1c73164508",
+        title: "RUNLINE_LV_2",
+        children: [
+          {
+            id: "46ee87c4-4ea7-48f8-9ed9-14833e4dacc2",
+            title: "2025-07-27_06-25-53",
+            children: [],
+          },
+          {
+            id: "1379b081-9f7f-4d82-8470-8321d9b7de0c",
+            title: "RUNLINE_LV_3",
+            children: [
+              {
+                id: "cf9145d4-ad06-4433-8384-4c10d266a6aa",
+                title: "2025-07-26_19-01-31",
+                children: [],
+              },
+              {
+                id: "f247313c-01cb-4363-a390-a72b889c72d3",
+                title: "2025-07-26_19-11-31",
+                children: [],
+              },
+              {
+                id: "0b7c650a-0d78-4e6e-8399-5dbaeb510751",
+                title: "Lv4",
+                children: [
+                  {
+                    id: "88d89572-462d-46c9-b4d0-4df736117799",
+                    title: "Lv 5",
+                    children: [],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  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>
+        <div className="w-full max-w-[300px]">
+          <Tree
+            {...args}
+            hierarchicalCheck
+            checkedAll={isCheckedAll}
+            checkedId={checkedId}
+            onCheckedChange={(state) => {
+              onCheckedId(Object.keys(state).filter((key) => state?.[key]));
+            }}
+          />
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/Tree/TreeItem.tsx

@@ -241,7 +241,7 @@ const TreeItem: FC<TreeItemProps> = ({
               {showIcon ? customIcon || defaultIcon : null}
               <div
                 className={cn(
-                  "flex flex-1 cursor-pointer text-subtitle5 text-ellipsis",
+                  "flex flex-1 cursor-pointer text-subtitle5 text-ellipsis overflow-hidden break-all text-left",
                   classes?.title
                 )}
               >

package/src/index.ts

@@ -5,6 +5,7 @@ import "./icons/iconConfig";
 
 export { default as Button } from "./components/Button/Button";
 export { default as TextInput } from "./components/TextInput/TextInput";
+export { default as TextArea } from "./components/TextArea/TextArea";
 export { default as Text } from "./components/Text/Text";
 export { default as Tabs } from "./components/Tabs/Tabs";
 export { default as Dropdown } from "./components/Dropdown/Dropdown";
@@ -46,6 +47,7 @@ export * from "./components/RadioGroup/RadioGroup";
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
+export type { TextAreaProps } from "./components/TextArea/TextArea";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
 export type { NavbarProps } from "./components/Navbar/Navbar";
 export type { AvatarProps } from "./components/Avatar/Avatar";

package/src/theme/global.css

@@ -28,3 +28,29 @@
     -moz-appearance: textfield;
   }
 }
+
+@layer utilities {
+
+  .ui-scrollbar::-webkit-scrollbar {
+    height: 6px;
+    width: 6px;
+    background: rgba(0, 0, 0, 0.08);
+  }
+  
+  .ui-scrollbar::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background: rgba(121, 141, 150, 0.48);
+    width: 6px;
+  }
+  
+  .ui-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(251, 252, 253, 0.48);
+    cursor: pointer;
+  }
+
+  .ui-scrollbar::-webkit-scrollbar-corner {
+    display: none;
+    /* background: transparent; */
+  }
+
+}