[sparkle] - enh(input): add forwardeRef and maxLength (#7642)

* [sparkle] - refactor: updated Input and Searchbar components to use forwardRef - Refactored the Input component to utilize forwardRef for better ref handling - Introduced `maxLength` prop to Input component for restricting input length - Made the Searchbar component definition consistent with the updated Input component using forwardRef * [sparkle] - feature: bump package version to 0.2.249 - The @dust-tt/sparkle package has been updated from version 0.2.248 to 0.2.249 to introduce new features or bug fixes. * [sparkle] - refactor: add displayName to Input component - Assign displayName property to Input for better debugging in React dev tools --------- Co-authored-by: Jules <[email protected]>
dust-tt · Sep 24, 2024 · c636e67 · c636e67
1 parent e5560d6
commit c636e67
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 79 deletions.
diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
diff --git a/sparkle/package.json b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.248",
+  "version": "0.2.249",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

diff --git a/sparkle/src/components/Input.tsx b/sparkle/src/components/Input.tsx
@@ -1,7 +1,12 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import { classNames } from "@sparkle/lib/utils";
 
+const sizeInputClasses = {
+  sm: "s-text-base s-rounded-md s-py-1.5 s-pl-4 s-pr-8",
+  md: "s-text-lg s-rounded-lg s-py-2 s-pl-4 s-pr-10",
+};
+
 type InputProps = {
   placeholder: string;
   size?: "sm" | "md";
@@ -14,71 +19,77 @@ type InputProps = {
   disabled?: boolean;
   className?: string;
   label?: string;
+  maxLength?: number;
 };
 
-const sizeInputClasses = {
-  sm: "s-text-base s-rounded-md s-py-1.5 s-pl-4 s-pr-8",
-  md: "s-text-lg s-rounded-lg s-py-2 s-pl-4 s-pr-10",
-};
-
-export function Input({
-  placeholder,
-  value,
-  size = "sm",
-  onChange,
-  error,
-  showErrorLabel = false,
-  name,
-  isPassword = false,
-  disabled = false,
-  className = "",
-  label,
-}: InputProps) {
-  return (
-    <div className="s-flex s-flex-col s-gap-1 s-p-px">
-      {label && (
-        <label
-          htmlFor={name}
-          className="s-pb-1 s-text-sm s-font-medium s-text-element-700 dark:s-text-element-700-dark"
-        >
-          {label}
-        </label>
-      )}
-      <input
-        type={isPassword ? "password" : "text"}
-        name={name}
-        id={name}
-        className={classNames(
-          "s-w-full s-border-0 s-outline-none s-ring-1 focus:s-outline-none focus:s-ring-2",
-          "s-bg-structure-50 s-placeholder-element-700",
-          "dark:s-bg-structure-50-dark dark:s-placeholder-element-700-dark",
-          sizeInputClasses[size],
-          "s-transition-all s-duration-300 s-ease-out",
-          className ?? "",
-          !error
-            ? classNames(
-                "s-ring-structure-200 focus:s-ring-action-300",
-                "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark"
-              )
-            : classNames(
-                "s-ring-warning-200 focus:s-ring-warning-300",
-                "dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark"
-              ),
-          disabled
-            ? "s-text-element-500 hover:s-cursor-not-allowed"
-            : "s-text-element-900 dark:s-text-element-800-dark"
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      placeholder,
+      value,
+      size = "sm",
+      onChange,
+      error,
+      showErrorLabel = false,
+      name,
+      isPassword = false,
+      disabled = false,
+      className = "",
+      label,
+      maxLength,
+    },
+    ref
+  ) => {
+    return (
+      <div className="s-flex s-flex-col s-gap-1 s-p-px">
+        {label && (
+          <label
+            htmlFor={name}
+            className="s-pb-1 s-text-sm s-font-medium s-text-element-700 dark:s-text-element-700-dark"
+          >
+            {label}
+          </label>
         )}
-        placeholder={placeholder}
-        value={value ?? ""}
-        onChange={(e) => {
-          onChange?.(e.target.value);
-        }}
-        data-1p-ignore={!isPassword}
-        disabled={disabled}
-      />
-      <div className="s-ml-2 s-text-sm s-text-warning-500">
-        {showErrorLabel && error ? error : null}
+        <input
+          ref={ref}
+          type={isPassword ? "password" : "text"}
+          name={name}
+          id={name}
+          maxLength={maxLength}
+          className={classNames(
+            "s-w-full s-border-0 s-outline-none s-ring-1 focus:s-outline-none focus:s-ring-2",
+            "s-bg-structure-50 s-placeholder-element-700",
+            "dark:s-bg-structure-50-dark dark:s-placeholder-element-700-dark",
+            sizeInputClasses[size],
+            "s-transition-all s-duration-300 s-ease-out",
+            className ?? "",
+            !error
+              ? classNames(
+                  "s-ring-structure-200 focus:s-ring-action-300",
+                  "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark"
+                )
+              : classNames(
+                  "s-ring-warning-200 focus:s-ring-warning-300",
+                  "dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark"
+                ),
+            disabled
+              ? "s-text-element-500 hover:s-cursor-not-allowed"
+              : "s-text-element-900 dark:s-text-element-800-dark"
+          )}
+          placeholder={placeholder}
+          value={value ?? ""}
+          onChange={(e) => {
+            onChange?.(e.target.value);
+          }}
+          data-1p-ignore={!isPassword}
+          disabled={disabled}
+        />
+        <div className="s-ml-2 s-text-sm s-text-warning-500">
+          {showErrorLabel && error ? error : null}
+        </div>
       </div>
-    </div>
-  );
-}
+    );
+  }
+);
+
+Input.displayName = "Input"
diff --git a/sparkle/src/components/Searchbar.tsx b/sparkle/src/components/Searchbar.tsx
@@ -17,18 +17,19 @@ const iconClasses = {
   md: "s-pr-4",
 };
 
+type SearchbarProps = {
+  placeholder: string;
+  value: string | null;
+  onChange?: (value: string) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  name: string;
+  size?: "xs" | "sm" | "md";
+  disabled?: boolean;
+  className?: string;
+}
+
 export const Searchbar = forwardRef<
-  HTMLInputElement,
-  {
-    placeholder: string;
-    value: string | null;
-    onChange?: (value: string) => void;
-    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    name: string;
-    size?: "xs" | "sm" | "md";
-    disabled?: boolean;
-    className?: string;
-  }
+  HTMLInputElement, SearchbarProps
 >(
   (
     {