@rovula/ui 0.0.67 → 0.0.69

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/components/Toast/Toast.tsx

@@ -93,7 +93,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn("typography-subtitile5 text-input-default-tex", className)}
+    className={cn("typography-subtitile5 text-input-default-text", className)}
     {...props}
   />
 ));

package/src/components/Toast/Toaster.tsx

@@ -43,6 +43,8 @@ export function Toaster({
         description,
         action,
         contentMode = "horizontal",
+        iconProps,
+        renderIcon,
         ...props
       }) {
         return (
@@ -53,7 +55,16 @@ export function Toaster({
                 iconWrapperClassName
               )}
             >
-              <Icon type="heroicons" name="check-circle" className="size-6" />
+              {renderIcon ? (
+                renderIcon?.()
+              ) : (
+                <Icon
+                  type="heroicons"
+                  name="check-circle"
+                  className="size-6"
+                  {...iconProps}
+                />
+              )}
             </div>
             <div
               className={cn(

package/src/components/Toast/useToast.ts

@@ -3,6 +3,7 @@
 // Inspired by react-hot-toast library
 import * as React from "react";
 import { ToastActionElement, ToastProps } from "./Toast";
+import { IconProps } from "../Icon/Icon";
 
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 3000;
@@ -14,6 +15,8 @@ type ToasterToast = ToastProps & {
   action?: ToastActionElement;
   contentMode?: "vertical" | "horizontal";
   onClose?: () => void;
+  iconProps?: IconProps;
+  renderIcon?: () => React.ReactElement;
 };
 
 type ToasterPosition =