From 2cd9a60fae051746095f00e58658e76c38bb4b74 Mon Sep 17 00:00:00 2001
From: Jules Belveze <32683010+JulesBelveze@users.noreply.github.com>
Date: Sat, 23 Nov 2024 14:27:45 +0100
Subject: [PATCH] [sparkle] - chore: `SearchBar` -> `SearchInput` (#8857)

* [sparkle] - refactor: adjust CSS class order in RadioGroupItem div

 - CSS class order corrected for consistency in `RadioGroupItem` component without altering styling behavior.

* [sparkle] - feature: implement SearchInput component

 - Create a new SearchInput component to allow for text search functionality
 - Add SearchInput component export to the component's index file for accessibility
 - Set up Storybook stories for demonstrating SearchInput component usage and props

* [sparkle] - refactor: remove Searchbar component and its references

- Deleted the `Searchbar.tsx` component as it is no longer needed
- Removed the export of `SearchbarProps` and `Searchbar` from the component index
- Deleted `Searchbar.stories.tsx` as the component no longer exists

* [sparkle] - feature: bump package version to 0.2.324

 - Increment package version for @dust-tt/sparkle in both package.json and package-lock.json files

* [sparkle] - refactor: update dropdown component to use SearchInput

 - Replace Searchbar component with SearchInput in Dropdown.tsx
 - Remove 'size' prop usage following SearchInput props requirements
 - Refactor DropdownMenuSearchbarProps to extend SearchInputProps instead of obsolete SearchbarProps

* [sparkle] - fix: make onChange callback mandatory for SearchInput

 - Removed optional chaining for onChange callback to enforce its presence
 - Clear input field now directly calls onChange callback without optional check
---
 sparkle/package-lock.json                   |   4 +-
 sparkle/package.json                        |   2 +-
 sparkle/src/components/Dropdown.tsx         |   8 +-
 sparkle/src/components/RadioGroup.tsx       |   2 +-
 sparkle/src/components/SearchInput.tsx      |  76 ++++++++++++++
 sparkle/src/components/Searchbar.tsx        | 104 -------------------
 sparkle/src/components/index.ts             |   3 +-
 sparkle/src/stories/SearchInput.stories.tsx |  69 +++++++++++++
 sparkle/src/stories/Searchbar.stories.tsx   | 109 --------------------
 9 files changed, 153 insertions(+), 224 deletions(-)
 create mode 100644 sparkle/src/components/SearchInput.tsx
 delete mode 100644 sparkle/src/components/Searchbar.tsx
 create mode 100644 sparkle/src/stories/SearchInput.stories.tsx
 delete mode 100644 sparkle/src/stories/Searchbar.stories.tsx

diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
index c5da1237c351..2ae3be4999fe 100644
--- a/sparkle/package-lock.json
+++ b/sparkle/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.323",
+  "version": "0.2.324",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@dust-tt/sparkle",
-      "version": "0.2.323",
+      "version": "0.2.324",
       "license": "ISC",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
diff --git a/sparkle/package.json b/sparkle/package.json
index ca9347f599f0..c2d5b16f2b10 100644
--- a/sparkle/package.json
+++ b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.323",
+  "version": "0.2.324",
   "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/Dropdown.tsx b/sparkle/src/components/Dropdown.tsx
index 4d968686cb28..b57c5091e3e6 100644
--- a/sparkle/src/components/Dropdown.tsx
+++ b/sparkle/src/components/Dropdown.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 
 import { Icon } from "@sparkle/components/Icon";
 import { LinkWrapper, LinkWrapperProps } from "@sparkle/components/LinkWrapper";
-import { Searchbar, SearchbarProps } from "@sparkle/components/Searchbar";
+import { SearchInput, SearchInputProps } from "@sparkle/components/SearchInput";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "@sparkle/icons";
 import { cn } from "@sparkle/lib/utils";
 
@@ -338,7 +338,7 @@ const DropdownMenuShortcut = ({
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
-interface DropdownMenuSearchbarProps extends SearchbarProps {}
+interface DropdownMenuSearchbarProps extends SearchInputProps {}
 
 const DropdownMenuSearchbar = React.forwardRef<
   HTMLInputElement,
@@ -352,7 +352,6 @@ const DropdownMenuSearchbar = React.forwardRef<
       onKeyDown,
       name,
       className,
-      size = "xs",
       disabled = false,
     },
     ref
@@ -364,14 +363,13 @@ const DropdownMenuSearchbar = React.forwardRef<
 
     return (
       <div className={cn("s-px-1 s-py-1", className)}>
-        <Searchbar
+        <SearchInput
           ref={ref}
           placeholder={placeholder}
           name={name}
           value={value}
           onChange={onChange}
           onKeyDown={handleKeyDown}
-          size={size}
           disabled={disabled}
         />
       </div>
diff --git a/sparkle/src/components/RadioGroup.tsx b/sparkle/src/components/RadioGroup.tsx
index 23edb9702fd4..0e119b825b16 100644
--- a/sparkle/src/components/RadioGroup.tsx
+++ b/sparkle/src/components/RadioGroup.tsx
@@ -105,7 +105,7 @@ const RadioGroupItem = React.forwardRef<
       </div>
     );
 
-    return <div className="s-w-full s-group">{wrappedItem}</div>;
+    return <div className="s-group s-w-full">{wrappedItem}</div>;
   }
 );
 
diff --git a/sparkle/src/components/SearchInput.tsx b/sparkle/src/components/SearchInput.tsx
new file mode 100644
index 000000000000..aea142ef2ab6
--- /dev/null
+++ b/sparkle/src/components/SearchInput.tsx
@@ -0,0 +1,76 @@
+import React, { forwardRef } from "react";
+
+import { Button, Icon, Input } from "@sparkle/components";
+import { MagnifyingGlassIcon, XMarkIcon } from "@sparkle/icons";
+import { cn } from "@sparkle/lib/utils";
+
+export interface SearchInputProps {
+  placeholder?: string;
+  value: string | null;
+  onChange: (value: string) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  name: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+  (
+    {
+      placeholder = "Search",
+      value,
+      onChange,
+      onKeyDown,
+      name,
+      disabled = false,
+      className,
+    },
+    ref
+  ) => {
+    const clearInputField = () => {
+      onChange("");
+    };
+
+    return (
+      <div className={cn("s-relative s-m-px s-flex-grow", className)}>
+        <Input
+          type="text"
+          name={name}
+          placeholder={placeholder}
+          value={value}
+          onChange={(e) => {
+            onChange(e.target.value);
+          }}
+          onKeyDown={onKeyDown}
+          disabled={disabled}
+          ref={ref}
+        />
+        <div className="s-absolute s-inset-y-0 s-right-0 s-flex s-items-center s-pr-1">
+          {value ? (
+            <Button
+              icon={XMarkIcon}
+              variant="ghost"
+              size="xs"
+              onClick={clearInputField}
+            />
+          ) : (
+            <div
+              className={cn(
+                "s-px-2",
+                disabled ? "s-text-element-600" : "s-text-element-900"
+              )}
+            >
+              <Icon
+                visual={MagnifyingGlassIcon}
+                size="xs"
+                className="s-text-muted-foreground"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+SearchInput.displayName = "SearchInput";
diff --git a/sparkle/src/components/Searchbar.tsx b/sparkle/src/components/Searchbar.tsx
deleted file mode 100644
index 0036d7d6c3fe..000000000000
--- a/sparkle/src/components/Searchbar.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import React, { forwardRef } from "react";
-
-import { Icon } from "@sparkle/components/Icon";
-import { MagnifyingGlassStrokeIcon, XMarkIcon } from "@sparkle/icons";
-import { classNames } from "@sparkle/lib/utils";
-
-import { IconButton } from "./IconButton";
-
-const sizeClasses = {
-  xs: "s-text-xs s-h-[26px] s-pl-3 s-pr-6 s-pt-1.5 s-rounded-lg",
-  sm: "s-text-sm s-h-[34px] s-pl-4 s-pr-8 s-pt-1.5 s-rounded-xl",
-  md: "s-text-base s-h-[46px] s-pl-6 s-pr-10 s-pt-1.5 s-rounded-2xl",
-};
-const iconClasses = {
-  xs: "s-pr-2",
-  sm: "s-pr-3",
-  md: "s-pr-4",
-};
-
-export 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, SearchbarProps>(
-  (
-    {
-      placeholder,
-      value,
-      onChange,
-      onKeyDown,
-      name,
-      size = "sm",
-      disabled = false,
-      className = "",
-    },
-    ref
-  ) => {
-    const clearInputField = () => {
-      onChange?.("");
-    };
-
-    return (
-      <div className="s-relative s-m-px s-flex-grow">
-        <input
-          type="text"
-          name={name}
-          id={name}
-          ref={ref}
-          className={classNames(
-            "s-border-0 s-outline-none s-ring-1 s-ring-structure-200 focus:s-outline-none focus:s-ring-2",
-            "s-w-full s-bg-structure-50 s-font-normal s-placeholder-element-600",
-            "s-ring-structure-200 focus:s-ring-action-300",
-            "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark",
-            "s-transition-all s-duration-300 s-ease-out",
-            sizeClasses[size],
-            className ?? "",
-            disabled
-              ? "s-cursor-default s-text-element-600"
-              : "s-text-element-900"
-          )}
-          placeholder={placeholder}
-          value={value ?? ""}
-          onChange={(e) => {
-            onChange?.(e.target.value);
-          }}
-          onKeyDown={onKeyDown}
-          disabled={disabled}
-        />
-        <div
-          className={classNames(
-            "s-absolute s-inset-y-0 s-right-0 s-flex s-items-center s-pr-3",
-            iconClasses[size]
-          )}
-        >
-          {value && onChange ? (
-            <IconButton
-              icon={XMarkIcon}
-              variant="outline"
-              size={size}
-              onClick={clearInputField}
-            />
-          ) : (
-            <div
-              className={classNames(
-                disabled ? "s-text-element-600" : "s-text-element-900"
-              )}
-            >
-              <Icon visual={MagnifyingGlassStrokeIcon} size={size} />
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-);
-
-Searchbar.displayName = "Searchbar";
diff --git a/sparkle/src/components/index.ts b/sparkle/src/components/index.ts
index 9ff4cc86c03d..f2c5b5f982e5 100644
--- a/sparkle/src/components/index.ts
+++ b/sparkle/src/components/index.ts
@@ -91,8 +91,7 @@ export { PriceTable } from "./PriceTable";
 export { RadioGroup, RadioGroupChoice, RadioGroupItem } from "./RadioGroup";
 export { RainbowEffect } from "./RainbowEffect";
 export { ScrollArea, ScrollBar } from "./ScrollArea";
-export type { SearchbarProps } from "./Searchbar";
-export { Searchbar } from "./Searchbar";
+export { SearchInput } from "./SearchInput";
 export { Separator } from "./Separator";
 export { SliderToggle } from "./SliderToggle";
 export { default as Spinner } from "./Spinner";
diff --git a/sparkle/src/stories/SearchInput.stories.tsx b/sparkle/src/stories/SearchInput.stories.tsx
new file mode 100644
index 000000000000..45d71170712a
--- /dev/null
+++ b/sparkle/src/stories/SearchInput.stories.tsx
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { SearchInput } from "../index_with_tw_base";
+
+const meta = {
+  title: "Components/SearchInput",
+  component: SearchInput,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    placeholder: {
+      description: "Placeholder text for the search input",
+      control: "text",
+      defaultValue: "Search",
+    },
+    disabled: {
+      description: "Whether the input is disabled",
+      control: "boolean",
+    },
+    value: {
+      description: "Current value of the input",
+      control: "text",
+    },
+    name: {
+      description: "Name attribute for the input",
+      control: "text",
+    },
+    className: {
+      description: "Additional CSS classes",
+      control: "text",
+    },
+    onChange: {
+      description: "Callback when input value changes",
+      action: "changed",
+    },
+    onKeyDown: {
+      description: "Callback when key is pressed",
+      action: "keydown",
+    },
+  },
+} satisfies Meta<React.ComponentProps<typeof SearchInput>>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ExampleSearchInput: Story = {
+  args: {
+    name: "search",
+    placeholder: "Search...",
+    value: "",
+    disabled: false,
+  },
+  render: (args) => {
+    const [value, setValue] = React.useState(args.value);
+
+    return (
+      <SearchInput
+        {...args}
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+          args.onChange?.(newValue);
+        }}
+      />
+    );
+  },
+};
diff --git a/sparkle/src/stories/Searchbar.stories.tsx b/sparkle/src/stories/Searchbar.stories.tsx
deleted file mode 100644
index 1aabe059c6a4..000000000000
--- a/sparkle/src/stories/Searchbar.stories.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import type { Meta } from "@storybook/react";
-import React, { useState } from "react";
-
-import { Button, Searchbar } from "../index_with_tw_base";
-
-const meta = {
-  title: "Components/Searchbar",
-  component: Searchbar,
-} satisfies Meta<typeof Searchbar>;
-
-export default meta;
-
-export const SearchbarExample = () => {
-  const [inputValue, setInputValue] = useState("");
-  const [inputValue3, setInputValue3] = useState("value");
-
-  const handleChange = (value: string) => {
-    setInputValue(value);
-  };
-  const handleChange3 = (value: string) => {
-    setInputValue3(value);
-  };
-
-  return (
-    <div className="s-flex s-flex-col s-gap-12">
-      <div className="s-grid s-grid-cols-3 s-gap-4">
-        <div className="s-flex s-gap-2">
-          <Searchbar
-            placeholder="Placeholder"
-            name="input"
-            value={inputValue}
-            onChange={handleChange}
-            size="md"
-          />
-          <div>
-            <Button variant="outline" size="md" label="Hello" />
-          </div>
-        </div>
-        <Searchbar
-          placeholder="Placeholder"
-          name="input"
-          value={inputValue3}
-          onChange={handleChange3}
-          size="md"
-        />
-        <Searchbar
-          placeholder="Placeholder"
-          name="input"
-          value={"disabled"}
-          size="md"
-          disabled
-        />
-      </div>
-      <div className="s-grid s-grid-cols-3 s-gap-4">
-        <div className="s-flex s-gap-2">
-          <Searchbar
-            placeholder="Placeholder"
-            name="input"
-            value={inputValue}
-            onChange={handleChange}
-          />
-          <div>
-            <Button variant="outline" size="sm" label="Hello" />
-          </div>
-        </div>
-        <Searchbar
-          placeholder="Placeholder"
-          name="input"
-          value={inputValue3}
-          onChange={handleChange3}
-        />
-        <Searchbar
-          placeholder="Placeholder"
-          name="input"
-          value={"disabled"}
-          disabled
-        />
-      </div>
-      <div className="s-grid s-grid-cols-3 s-gap-4">
-        <div className="s-flex s-gap-2">
-          <Searchbar
-            placeholder="Placeholder"
-            name="input"
-            value={inputValue}
-            onChange={handleChange}
-            size="xs"
-          />
-          <div>
-            <Button variant="outline" size="xs" label="Hello" />
-          </div>
-        </div>
-        <Searchbar
-          placeholder="Placeholder"
-          name="input"
-          value={inputValue3}
-          onChange={handleChange3}
-          size="xs"
-        />
-        <Searchbar
-          placeholder="Placeholder"
-          name="input"
-          value={"disabled"}
-          size="xs"
-          disabled
-        />
-      </div>
-    </div>
-  );
-};