[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.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",

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>

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>;
   }
 );
 

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";

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";

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);
+        }}
+      />
+    );
+  },
+};