@rovula/ui 0.1.8 → 0.1.10

package/src/components/TextArea/TextArea.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, FocusEvent, ChangeEvent } from "react";
 import { cn } from "@/utils/cn";
 import {
   textareaVariant,
@@ -26,6 +26,10 @@ export type TextAreaProps = {
   hasClearIcon?: boolean;
   labelClassName?: string;
   className?: string;
+  normalize?: (value: string) => string;
+  format?: (value: string) => string;
+  trimOnCommit?: boolean;
+  normalizeOnCommit?: (value: string) => string;
 } & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">;
 
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
@@ -47,6 +51,10 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       hasClearIcon = true,
       labelClassName,
       className,
+      normalize,
+      format,
+      trimOnCommit,
+      normalizeOnCommit,
       ...props
     },
     ref
@@ -56,6 +64,46 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 
     useImperativeHandle(ref, () => textareaRef?.current as HTMLTextAreaElement);
 
+    const handleChange = useCallback(
+      (e: ChangeEvent<HTMLTextAreaElement>) => {
+        if (normalize) {
+          e.target.value = normalize(e.target.value);
+        }
+        props.onChange?.(e);
+      },
+      [normalize, props.onChange]
+    );
+
+    const commitValue = useCallback(
+      (e: FocusEvent<HTMLTextAreaElement>) => {
+        const textarea = e.currentTarget;
+        let committed = textarea.value;
+        if (trimOnCommit) committed = committed.trim();
+        if (normalizeOnCommit) committed = normalizeOnCommit(committed);
+        if (committed !== textarea.value) {
+          textarea.value = committed;
+          props.onChange?.({
+            ...e,
+            target: textarea,
+          } as unknown as ChangeEvent<HTMLTextAreaElement>);
+        }
+      },
+      [trimOnCommit, normalizeOnCommit, props.onChange]
+    );
+
+    const handleBlur = useCallback(
+      (e: FocusEvent<HTMLTextAreaElement>) => {
+        if (trimOnCommit || normalizeOnCommit) commitValue(e);
+        props.onBlur?.(e);
+      },
+      [trimOnCommit, normalizeOnCommit, commitValue, props.onBlur]
+    );
+
+    const displayValue =
+      format && typeof props.value === "string"
+        ? format(props.value)
+        : props.value;
+
     // Reuse TextInput visual language via utility classes to stay consistent
     const containerClassName = useMemo(
       () => `inline-flex flex-col ${fullwidth ? "w-full" : ""}`,
@@ -83,6 +131,9 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
             disabled={disabled}
             placeholder={isFloatingLabel ? " " : props.placeholder}
             className={cn(textareaClassName, className)}
+            value={displayValue}
+            onChange={normalize ? handleChange : props.onChange}
+            onBlur={trimOnCommit || normalizeOnCommit ? handleBlur : props.onBlur}
           />
           {hasClearIcon && (
             <div

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

@@ -237,7 +237,9 @@ const KeepFooterSpaceDemo = () => {
               keepFooterSpace
               size="lg"
               error={hasError}
-              errorMessage={hasError ? "Please enter a valid email address" : undefined}
+              errorMessage={
+                hasError ? "Please enter a valid email address" : undefined
+              }
             />
           </div>
           <div>
@@ -249,7 +251,9 @@ const KeepFooterSpaceDemo = () => {
               label="Email"
               size="lg"
               error={hasError}
-              errorMessage={hasError ? "Please enter a valid email address" : undefined}
+              errorMessage={
+                hasError ? "Please enter a valid email address" : undefined
+              }
             />
           </div>
           <div></div>
@@ -315,7 +319,9 @@ const FeedbackApiDemo = () => {
             error={legacyError}
             errorMessage={legacyError ? "Invalid email format." : undefined}
             warning={legacyWarning}
-            warningMessage={legacyWarning ? "Please verify this email." : undefined}
+            warningMessage={
+              legacyWarning ? "Please verify this email." : undefined
+            }
           />
         </div>
 
@@ -336,8 +342,8 @@ const FeedbackApiDemo = () => {
               useStatusOverride
                 ? "Status explicitly sets warning."
                 : legacyWarning
-                  ? "Please verify this email."
-                  : undefined
+                ? "Please verify this email."
+                : undefined
             }
           />
         </div>
@@ -349,3 +355,112 @@ const FeedbackApiDemo = () => {
 export const FeedbackApiCompatibility = {
   render: () => <FeedbackApiDemo />,
 } satisfies StoryObj;
+
+const NormalizeDemo = () => {
+  const [value, setValue] = useState("");
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <p className="text-sm text-text-g-contrast-low">
+        <code>normalize</code> strips disallowed characters on every keystroke.
+        This example removes backslash and special path characters in real-time.
+      </p>
+      <TextInput
+        id="normalize-demo"
+        label="Device Name"
+        size="lg"
+        keepFooterSpace
+        helperText={`Stored value: "${value}"`}
+        value={value}
+        normalize={(v) => v.trimStart().replace(/[\\/:*?"'<>|]/g, "")}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export const Normalize = {
+  render: () => <NormalizeDemo />,
+} satisfies StoryObj;
+
+const FormatDemo = () => {
+  const [value, setValue] = useState("1000000");
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <p className="text-sm text-text-g-contrast-low">
+        <code>format</code> transforms the displayed value without changing the
+        stored value. This example displays numbers with comma separators.
+      </p>
+      <TextInput
+        id="format-demo"
+        label="Amount"
+        size="lg"
+        keepFooterSpace
+        helperText={`Stored value: "${value}"`}
+        value={value}
+        format={(v) => Number(v.replace(/,/g, "") || 0).toLocaleString()}
+        normalize={(v) => v.replace(/[^0-9]/g, "")}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export const Format = {
+  render: () => <FormatDemo />,
+} satisfies StoryObj;
+
+const TrimOnCommitDemo = () => {
+  const [value, setValue] = useState("");
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <p className="text-sm text-text-g-contrast-low">
+        <code>trimOnCommit</code> trims leading and trailing whitespace when the
+        user blurs the input or presses Enter. Try typing{" "}
+        <code>"hello   "</code> then click outside or press Enter.
+      </p>
+      <TextInput
+        id="trim-commit-demo"
+        label="Name"
+        size="lg"
+        keepFooterSpace
+        helperText={`Stored value: "${value}"`}
+        value={value}
+        trimOnCommit
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export const TrimOnCommit = {
+  render: () => <TrimOnCommitDemo />,
+} satisfies StoryObj;
+
+const NormalizeOnCommitDemo = () => {
+  const [value, setValue] = useState("");
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <p className="text-sm text-text-g-contrast-low">
+        <code>normalizeOnCommit</code> applies a custom transform when the user
+        blurs or presses Enter. Use with <code>trimOnCommit</code> to compose —
+        trim runs first, then <code>normalizeOnCommit</code>. This example trims
+        and uppercases on commit.
+      </p>
+      <TextInput
+        id="normalize-on-commit-demo"
+        label="Code"
+        size="lg"
+        keepFooterSpace
+        helperText={`Stored value: "${value}"`}
+        value={value}
+        trimOnCommit
+        normalizeOnCommit={(v) => v.toUpperCase()}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export const NormalizeOnCommit = {
+  render: () => <NormalizeOnCommitDemo />,
+} satisfies StoryObj;

package/src/components/TextInput/TextInput.tsx

@@ -5,6 +5,9 @@ import React, {
   useImperativeHandle,
   useMemo,
   useRef,
+  FocusEvent,
+  KeyboardEvent,
+  ChangeEvent,
 } from "react";
 import {
   helperTextVariant,
@@ -60,6 +63,10 @@ export type InputProps = {
   onClickEndIcon?: () => void;
   renderStartIcon?: () => ReactNode;
   renderEndIcon?: () => ReactNode;
+  normalize?: (value: string) => string;
+  format?: (value: string) => string;
+  trimOnCommit?: boolean;
+  normalizeOnCommit?: (value: string) => string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
 
 export const TextInput = forwardRef<HTMLInputElement, InputProps>(
@@ -94,6 +101,10 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       renderStartIcon,
       renderEndIcon,
       classes,
+      normalize,
+      format,
+      trimOnCommit,
+      normalizeOnCommit,
       ...props
     },
     ref
@@ -174,6 +185,56 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
 
     useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
 
+    const handleChange = useCallback(
+      (e: ChangeEvent<HTMLInputElement>) => {
+        if (normalize) {
+          e.target.value = normalize(e.target.value);
+        }
+        props.onChange?.(e);
+      },
+      [normalize, props.onChange]
+    );
+
+    const commitValue = useCallback(
+      (e: FocusEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>) => {
+        const input = e.currentTarget;
+        let committed = input.value;
+        if (trimOnCommit) committed = committed.trim();
+        if (normalizeOnCommit) committed = normalizeOnCommit(committed);
+        if (committed !== input.value) {
+          input.value = committed;
+          props.onChange?.({
+            ...e,
+            target: input,
+          } as unknown as ChangeEvent<HTMLInputElement>);
+        }
+      },
+      [trimOnCommit, normalizeOnCommit, props.onChange]
+    );
+
+    const handleBlur = useCallback(
+      (e: FocusEvent<HTMLInputElement>) => {
+        if (trimOnCommit || normalizeOnCommit) commitValue(e);
+        props.onBlur?.(e);
+      },
+      [trimOnCommit, normalizeOnCommit, commitValue, props.onBlur]
+    );
+
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent<HTMLInputElement>) => {
+        if ((trimOnCommit || normalizeOnCommit) && e.key === "Enter") {
+          commitValue(e);
+        }
+        props.onKeyDown?.(e);
+      },
+      [trimOnCommit, normalizeOnCommit, commitValue, props.onKeyDown]
+    );
+
+    const displayValue =
+      format && typeof props.value === "string"
+        ? format(props.value)
+        : props.value;
+
     const handleClearInput = useCallback(() => {
       if (inputRef.current) {
         inputRef.current.value = "";
@@ -325,7 +386,11 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             type={type}
             id={_id}
             disabled={disabled}
+            value={displayValue}
             className={cn(inputClassname, props.className)}
+            onChange={normalize ? handleChange : props.onChange}
+            onBlur={trimOnCommit || normalizeOnCommit ? handleBlur : props.onBlur}
+            onKeyDown={trimOnCommit || normalizeOnCommit ? handleKeyDown : props.onKeyDown}
           />
           {hasSearchIcon && !hasLeftSectionIcon && (
             <div