chore: searchbar-migration

src/lib/form/searchbar.tsx

@@ -1,45 +1,62 @@
 import React from "react";
-import styled from "styled-components";
-import { borderBox } from "../../styles/common-style";
 import SearchIcon from "../../assets/svgs/form/search.svg";
-import Field from "./text-field";
-
-const Wrapper = styled.div`
-  ${borderBox}
-  position: relative;
-  width: 278px;
-`;
-
-const StyledField = styled(Field)`
-  height: 100%;
-  width: 100%;
-
-  input {
-    padding: 14px 16px 14px 40px;
-  }
-`;
-
-const StyledSearchIcon = styled(SearchIcon)`
-  position: absolute;
-  left: 16px;
-  top: 50%;
-  transform: translateY(-50%);
-
-  width: 16px;
-  height: 16px;
-  max-width: 16px;
-  max-height: 16px;
-
-  fill: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
-`;
-
-const Searchbar: React.FC<React.ComponentProps<typeof Field>> = ({
+import {
+  Group,
+  Input,
+  type InputProps,
+  Label,
+  SearchField,
+  type SearchFieldProps,
+} from "react-aria-components";
+import { cn } from "../../utils";
+import clsx from "clsx";
+
+interface SearchbarProps extends SearchFieldProps {
+  label?: string;
+  /** Props for the input element.
+   * [See InputProps](https://react-spectrum.adobe.com/react-aria/NumberField.html#input-1)
+   */
+  inputProps?: InputProps;
+}
+/** A search field allows a user to enter and clear a search query. */
+function Searchbar({
+  label,
+  inputProps,
+  className,
   ...props
-}) => (
-  <Wrapper>
-    <StyledField placeholder="Search" {...props} />
-    <StyledSearchIcon />
-  </Wrapper>
-);
+}: Readonly<SearchbarProps>) {
+  return (
+    <SearchField className={cn("flex w-69.5 flex-col", className)} {...props}>
+      {label && (
+        <Label className="text-klerosUIComponentsSecondaryText mb-1 text-sm">
+          {label}
+        </Label>
+      )}
+      <Group className="relative box-border h-[45px] w-full">
+        <Input
+          placeholder={"Search"}
+          {...inputProps}
+          className={cn(
+            "hover-medium-blue hover-short-transition bg-klerosUIComponentsWhiteBackground size-full",
+            "rounded-base border-klerosUIComponentsStroke text-klerosUIComponentsPrimaryText border",
+            "placeholder:text-klerosUIComponentsSecondaryText placeholder:opacity-50",
+            "focus:border-klerosUIComponentsPrimaryBlue focus:shadow-input focus:rounded-base focus:outline-none",
+            "focus:invalid:border-klerosUIComponentsError focus:invalid:shadow-klerosUIComponentsError",
+            "py-3.5 pr-4 pl-10",
+            "invalid:border-klerosUIComponentsError",
+            "[&::-webkit-search-cancel-button]:hidden",
+            inputProps?.className,
+          )}
+        />
+        <SearchIcon
+          className={clsx(
+            "absolute top-1/2 left-4 -translate-y-1/2",
+            "fill-klerosUIComponentsPrimaryText size-4 max-h-4 max-w-4",
+          )}
+        />
+      </Group>
+    </SearchField>
+  );
+}
 
 export default Searchbar;

src/stories/searchbar.stories.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { IPreviewArgs } from "./utils";
+
+import SearchbarComponent from "../lib/form/searchbar";
+import { Form } from "react-aria-components";
+import Button from "../lib/button";
+
+const meta = {
+  component: SearchbarComponent,
+  title: "Form/Searchbar",
+  tags: ["autodocs"],
+  argTypes: {
+    isRequired: {
+      control: "boolean",
+    },
+    isDisabled: {
+      control: "boolean",
+    },
+    label: {
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof SearchbarComponent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta> & IPreviewArgs;
+
+export const Default: Story = {
+  args: {
+    themeUI: "dark",
+    backgroundUI: "light",
+    className: "w-[500px]",
+  },
+};
+
+export const Labelled: Story = {
+  args: {
+    ...Default.args,
+    label: "Search registry",
+  },
+};
+
+export const Required: Story = {
+  args: {
+    ...Default.args,
+    isRequired: true,
+  },
+  render: (args) => (
+    <Form
+      onSubmit={(e) => {
+        e.preventDefault();
+      }}
+    >
+      <SearchbarComponent {...args} />
+      <Button
+        variant="primary"
+        type="submit"
+        aria-pressed="true"
+        text="Click me!"
+        small
+        className="mt-4"
+      />
+    </Form>
+  ),
+};