@rovula/ui 0.0.68 → 0.0.70

package/src/components/TextInput/TextInput.stories.tsx

@@ -2,6 +2,7 @@ import React, { useRef } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import TextInput from "./TextInput";
 import { CalendarIcon } from "@heroicons/react/16/solid";
+import Icon from "../Icon/Icon";
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
@@ -124,3 +125,85 @@ export const FuctionInput = {
     );
   },
 } satisfies StoryObj;
+
+export const CustomIcon = {
+  args: {
+    label: "Placeholder Text",
+    // value: "",
+    disabled: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-col gap-4 w-full">
+        <div>
+          <h4>Icon mode: solid:</h4>
+        </div>
+        <div className="flex flex-row gap-4 w-full">
+          <TextInput
+            id="1"
+            size="lg"
+            {...args}
+            startIcon={<CalendarIcon className="size-full" fill="inherit" />}
+            endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+          />
+          <TextInput
+            id="2"
+            size="md"
+            {...args}
+            startIcon={<CalendarIcon className="size-full" fill="inherit" />}
+            endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+          />
+          <TextInput
+            id="3"
+            size="sm"
+            {...args}
+            startIcon={<CalendarIcon className="size-full" fill="inherit" />}
+            endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+          />
+        </div>
+        <div>
+          <h4>Icon mode: flat:</h4>
+        </div>
+        <div className="flex flex-row gap-4 w-full">
+          <TextInput
+            id="1"
+            size="lg"
+            {...args}
+            iconMode="flat"
+            startIcon={<CalendarIcon className="size-full" fill="inherit" />}
+            endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+          />
+          <TextInput
+            id="2"
+            size="md"
+            {...args}
+            iconMode="flat"
+            startIcon={<CalendarIcon className="size-full" fill="inherit" />}
+            endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+          />
+          <TextInput
+            id="3"
+            size="sm"
+            {...args}
+            iconMode="flat"
+            startIcon={<CalendarIcon className="size-full" fill="inherit" />}
+            endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+          />
+        </div>
+        <TextInput
+          id="1"
+          size="lg"
+          {...args}
+          iconMode="flat"
+          startIcon={<Icon name="magnifying-glass" fill="inherit" />}
+          // <MagnifyingGlassIcon className="size-full" fill="inherit" />
+          hasClearIcon
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/TextInput/TextInput.styles.ts

@@ -156,6 +156,9 @@ export const labelVariant = cva(
       hasSearchIcon: {
         false: "",
       },
+      hasLeftSectionIcon: {
+        false: "",
+      },
       isFloatingLabel: {
         false: "hidden peer-placeholder-shown:block peer-focus:bg-transparent",
       },
@@ -268,12 +271,70 @@ export const labelVariant = cva(
           "left-11 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
         ],
       },
+
+      // -------- hasLeftSectionIcon ------
+      {
+        isFloatingLabel: true,
+        hasLeftSectionIcon: true,
+        size: "sm",
+        className: [
+          "left-[38px] -top-1.5 typography-label2 bg-input-label-bg",
+          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1 peer-placeholder-shown:bg-transparent",
+          "peer-focus:-top-1.5 peer-focus:typography-label2",
+        ],
+      },
+      {
+        isFloatingLabel: true,
+        hasLeftSectionIcon: true,
+        size: "md",
+        className: [
+          "left-[46px] -top-1.5 typography-label1 bg-input-label-bg",
+          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
+          "peer-focus:-top-1.5 peer-focus:typography-label1",
+        ],
+      },
+      {
+        isFloatingLabel: true,
+        hasLeftSectionIcon: true,
+        size: "lg",
+        className: [
+          "left-[72px] -top-1.5 typography-label1 bg-input-label-bg",
+          "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
+          "peer-focus:-top-1.5 peer-focus:typography-label1",
+        ],
+      },
+      // floating = false and has search icon
+      {
+        isFloatingLabel: false,
+        hasLeftSectionIcon: true,
+        size: "sm",
+        className: [
+          "left-[38px] peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1",
+        ],
+      },
+      {
+        isFloatingLabel: false,
+        hasLeftSectionIcon: true,
+        size: "md",
+        className: [
+          "left-[46px] peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+        ],
+      },
+      {
+        isFloatingLabel: false,
+        hasLeftSectionIcon: true,
+        size: "lg",
+        className: [
+          "left-[72px] peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+        ],
+      },
     ],
     defaultVariants: {
       size: "md",
       disabled: false,
       error: false,
       hasSearchIcon: false,
+      hasLeftSectionIcon: false,
       isFloatingLabel: true,
     },
   }
@@ -360,7 +421,6 @@ export const sectionIconWrapperVariant = cva(
   [
     "cursor-pointer",
     "absolute items-center justify-center flex",
-    "border-l border-l-input-default-stroke peer-hover:border-l-input-active-stroke peer-focus:border-l-input-active-stroke peer-disabled:border-l-input-disable-stroke",
     "fill-input-default-text peer-hover:fill-input-filled-text peer-focus:fill-input-filled-text peer-disabled:fill-input-disable-stroke",
   ],
   {
@@ -371,18 +431,68 @@ export const sectionIconWrapperVariant = cva(
         lg: "p-3 size-14",
       },
       rounded: {
-        none: "rounded-r-none",
-        normal: "rounded-r-xl",
-        full: "rounded-r-full",
+        none: "",
+        normal: "",
+        full: "",
       },
       error: {
-        true: "border-l-input-error",
+        false: "",
       },
       position: {
-        start: "inset-y-0 left-0 ",
-        end: "inset-y-0 right-0 ",
+        start: [
+          "inset-y-0 left-0 ",
+          "border-r border-r-input-default-stroke peer-hover:border-r-input-active-stroke peer-focus:border-r-input-active-stroke peer-disabled:border-r-input-disable-stroke",
+        ],
+        end: [
+          "inset-y-0 right-0 ",
+          "border-l border-l-input-default-stroke peer-hover:border-l-input-active-stroke peer-focus:border-l-input-active-stroke peer-disabled:border-l-input-disable-stroke",
+        ],
       },
     },
+    compoundVariants: [
+      // --- start rounded ---
+      {
+        position: "start",
+        rounded: "none",
+        className: "rounded-l-none",
+      },
+      {
+        position: "start",
+        rounded: "normal",
+        className: "rounded-l-xl",
+      },
+      {
+        position: "start",
+        rounded: "full",
+        className: "rounded-l-full",
+      },
+      {
+        position: "end",
+        rounded: "none",
+        className: "rounded-r-none",
+      },
+      {
+        position: "end",
+        rounded: "normal",
+        className: "rounded-r-xl",
+      },
+      {
+        position: "end",
+        rounded: "full",
+        className: "rounded-r-full",
+      },
+      // --- Error start ---
+      {
+        position: "start",
+        error: true,
+        className: "border-r-input-error",
+      },
+      {
+        position: "end",
+        error: true,
+        className: "border-l-input-error",
+      },
+    ],
     defaultVariants: {
       size: "md",
       rounded: "normal",

package/src/components/TextInput/TextInput.tsx

@@ -4,6 +4,7 @@ import React, {
   forwardRef,
   useCallback,
   useImperativeHandle,
+  useMemo,
   useRef,
 } from "react";
 import {
@@ -28,6 +29,7 @@ export type InputProps = {
   size?: "sm" | "md" | "lg";
   rounded?: "none" | "normal" | "full";
   variant?: "flat" | "outline" | "underline";
+  iconMode?: "flat" | "solid";
   type?: React.HTMLInputTypeAttribute;
   helperText?: string;
   errorMessage?: string;
@@ -45,6 +47,7 @@ export type InputProps = {
   labelClassName?: string;
   onClickStartIcon?: () => void;
   onClickEndIcon?: () => void;
+  renderStartIcon?: () => ReactNode;
   renderEndIcon?: () => ReactNode;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
 
@@ -57,6 +60,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       rounded = "normal",
       variant = "outline",
       type = "text",
+      iconMode = "solid",
       helperText,
       errorMessage,
       fullwidth = true,
@@ -70,7 +74,9 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       startIcon,
       endIcon,
       labelClassName,
+      onClickStartIcon,
       onClickEndIcon,
+      renderStartIcon,
       renderEndIcon,
       ...props
     },
@@ -78,8 +84,9 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
   ) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const _id = id || `${type}-${label}-input`;
-    const hasLeftSectionIcon = !!startIcon;
-    const hasRightSectionIcon = !!endIcon;
+    const hasLeftSectionIcon = !!startIcon || !!renderStartIcon;
+    const hasRightSectionIcon = !!endIcon || !!renderEndIcon;
+
     const inputClassname = inputVariant({
       size,
       rounded,
@@ -87,27 +94,40 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       fullwidth,
       disabled,
       error,
-      hasSearchIcon,
-      hasClearIcon: hasRightSectionIcon ? false : hasClearIcon,
-      leftSectionIcon: hasLeftSectionIcon,
-      rightSectionIcon: hasRightSectionIcon,
+      hasSearchIcon:
+        (iconMode === "flat" && hasLeftSectionIcon) || hasSearchIcon,
+      hasClearIcon:
+        (iconMode === "flat" && hasRightSectionIcon) || hasClearIcon,
+      leftSectionIcon: iconMode === "solid" ? hasLeftSectionIcon : false,
+      rightSectionIcon: iconMode === "solid" ? hasRightSectionIcon : false,
     });
     const labelClassname = labelVariant({
       size,
       disabled,
       error,
-      hasSearchIcon,
+      hasSearchIcon:
+        (iconMode === "flat" && hasLeftSectionIcon) || hasSearchIcon,
+      hasLeftSectionIcon: iconMode === "solid" ? hasLeftSectionIcon : false,
       isFloatingLabel,
     });
     const helperTextClassname = helperTextVariant({ size, error, disabled });
     const iconWrapperClassname = iconWrapperVariant({ size });
     const iconSearchWrapperClassname = iconSearchWrapperVariant({ size });
     const iconClassname = iconVariant({ size });
-    // TODO startIcon
+
+    // TODO wait for clearify aboutm start,end, search and clearIcon with iconMode
+
+    const startIconWrapperClassname = sectionIconWrapperVariant({
+      size,
+      rounded,
+      error,
+      position: "start",
+    });
     const endIconWrapperClassname = sectionIconWrapperVariant({
       size,
       rounded,
       error,
+      position: "end",
     });
 
     useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
@@ -123,7 +143,15 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       }
     }, [props.onChange]);
 
-    // TODO startIcon
+    const handleOnClickLeftSectionIcon = useCallback(() => {
+      if (disabled) return;
+
+      onClickStartIcon?.();
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, [disabled, onClickStartIcon]);
+
     const handleOnClickRightSectionIcon = useCallback(() => {
       if (disabled) return;
 
@@ -133,10 +161,84 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       }
     }, [disabled, onClickEndIcon]);
 
+    const startIconElement = useMemo(() => {
+      if (!hasLeftSectionIcon) return;
+
+      if (renderStartIcon) return renderStartIcon();
+
+      if (iconMode === "flat") {
+        return (
+          <div className={iconSearchWrapperClassname}>
+            <div
+              className={iconClassname}
+              onClick={handleOnClickLeftSectionIcon}
+            >
+              {startIcon}
+            </div>
+          </div>
+        );
+      }
+
+      return (
+        <div
+          className={startIconWrapperClassname}
+          onClick={handleOnClickLeftSectionIcon}
+        >
+          {startIcon}
+        </div>
+      );
+    }, [
+      hasLeftSectionIcon,
+      startIcon,
+      iconMode,
+      iconSearchWrapperClassname,
+      startIconWrapperClassname,
+      iconClassname,
+      renderStartIcon,
+      handleOnClickLeftSectionIcon,
+    ]);
+
+    const endIconElement = useMemo(() => {
+      if (!hasRightSectionIcon) return;
+
+      if (renderEndIcon) return renderEndIcon();
+
+      if (iconMode === "flat") {
+        return (
+          <div className={cn(iconWrapperClassname, "flex")}>
+            <div
+              className={iconClassname}
+              onClick={handleOnClickRightSectionIcon}
+            >
+              {endIcon}
+            </div>
+          </div>
+        );
+      }
+
+      return (
+        <div
+          className={endIconWrapperClassname}
+          onClick={handleOnClickRightSectionIcon}
+        >
+          {endIcon}
+        </div>
+      );
+    }, [
+      hasRightSectionIcon,
+      endIcon,
+      iconMode,
+      iconSearchWrapperClassname,
+      endIconWrapperClassname,
+      iconClassname,
+      renderEndIcon,
+      handleOnClickRightSectionIcon,
+    ]);
+
     return (
       <div className={`inline-flex flex-col ${fullwidth ? "w-full" : ""}`}>
         <div className="relative">
-          {hasSearchIcon && (
+          {hasSearchIcon && !hasLeftSectionIcon && (
             <div className={iconSearchWrapperClassname}>
               <MagnifyingGlassIcon className={iconClassname} />
             </div>
@@ -150,6 +252,8 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             disabled={disabled}
             className={cn(inputClassname, props.className)}
           />
+          {startIconElement}
+
           {hasClearIcon && !hasRightSectionIcon && (
             <div
               className={iconWrapperClassname}
@@ -165,17 +269,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
               />
             </div>
           )}
-          {hasRightSectionIcon &&
-            (renderEndIcon ? (
-              renderEndIcon()
-            ) : (
-              <div
-                className={endIconWrapperClassname}
-                onClick={handleOnClickRightSectionIcon}
-              >
-                {endIcon}
-              </div>
-            ))}
+          {endIconElement}
 
           <label htmlFor={_id} className={cn(labelClassname, labelClassName)}>
             {label}{" "}

package/src/index.ts

@@ -40,6 +40,7 @@ export * from "./components/Toast/Toast";
 export * from "./components/Toast/Toaster";
 export * from "./components/Toast/useToast";
 export * from "./components/Tree";
+export * from "./components/FocusedScrollView/FocusedScrollView";
 
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";