Support isLoading and onClear prop in input

cartridge-gg · Dec 23, 2024 · b14757a · b14757a
1 parent 1ade215
commit b14757a
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 15 deletions.
diff --git a/packages/ui-next/src/components/primitives/input.tsx b/packages/ui-next/src/components/primitives/input.tsx
@@ -1,21 +1,42 @@
 import * as React from "react";
 
 import { cn } from "@/utils";
+import { TimesCircleIcon } from "../icons";
+import { Button } from "./button";
+import { Spinner } from "../spinner";
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  isLoading?: boolean;
+  onClear?: () => void;
+};
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+  ({ isLoading, onClear, className, type, ...props }, ref) => {
     return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-12 w-full rounded-md border border-input bg-quaternary px-4 py-3.5 text-md ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className,
+      <>
+        <input
+          type={type}
+          className={cn(
+            "flex h-12 w-full rounded-md border border-input bg-quaternary px-4 py-3.5 text-md ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            className,
+          )}
+          ref={ref}
+          {...props}
+        />
+        {isLoading && (
+          <Spinner size="lg" className="absolute top-[18px] right-4" />
         )}
-        ref={ref}
-        {...props}
-      />
+        {!isLoading && onClear && (
+          <Button
+            variant="icon"
+            size="icon"
+            className="absolute top-3.5 right-3 bg-transparent hover:bg-transparent text-muted-foreground"
+            onClick={onClear}
+          >
+            <TimesCircleIcon />
+          </Button>
+        )}
+      </>
     );
   },
 );

diff --git a/packages/ui-next/src/stories/input.stories.tsx b/packages/ui-next/src/stories/input.stories.tsx
@@ -1,4 +1,4 @@
-import { Input as UIInput } from "@/components/primitives/input";
+import { Input } from "@/components/primitives/input";
 import { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof Input> = {
@@ -11,8 +11,25 @@ export default meta;
 
 type Story = StoryObj<typeof Input>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    type: "email",
+    placeholder: "Email",
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    value: "Some text value",
+    isLoading: true,
+  },
+};
 
-function Input() {
-  return <UIInput type="email" placeholder="Email" />;
-}
+export const Clear: Story = {
+  args: {
+    value: "Some text value",
+    onClear: () => {
+      console.log("cleared!");
+    },
+  },
+};