0.14.3 - Added icon and rightButton props to Input component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schemavaults/ui",
-  "version": "0.14.2",
+  "version": "0.14.3",
   "private": false,
   "license": "UNLICENSED",
   "description": "React.js UI components for SchemaVaults frontend applications",

src/components/ui/input/Input.stories.tsx

@@ -1,18 +1,18 @@
+import { useState, type ReactElement } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import Input from "./input";
 import { fn } from "@storybook/test";
+import { Dices, KeyRound } from "lucide-react";
+
+import Input from "./input";
+import { Button } from "@/components/ui/button";
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
   title: "Components/Input",
   component: Input,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: "centered",
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
     placeholder: {
       type: "string",
@@ -26,7 +26,6 @@ const meta = {
       },
     },
   },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
   args: {
     onChange: (): void => {
       fn();
@@ -37,7 +36,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const DefaultTextInput: Story = {
   args: {},
 };
@@ -62,3 +60,29 @@ export const WithPlaceholder: Story = {
     placeholder: "This text input has placeholder text!",
   },
 };
+
+function UUIDWithRandomizeRenderer(): ReactElement {
+  const [value, setValue] = useState<string>(crypto.randomUUID());
+  return (
+    <Input
+      icon={KeyRound}
+      value={value}
+      onChange={(e): void => setValue(e.target.value)}
+      rightButton={
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 mr-1"
+          onClick={(): void => setValue(crypto.randomUUID())}
+        >
+          <Dices className="h-4 w-4" />
+        </Button>
+      }
+    />
+  );
+}
+
+export const UUIDWithRandomize: Story = {
+  render: (): ReactElement => <UUIDWithRandomizeRenderer />,
+};

src/components/ui/input/input.tsx

@@ -1,22 +1,49 @@
 "use client";
 
-import type { InputHTMLAttributes, ReactElement } from "react";
+import type { InputHTMLAttributes, ReactElement, ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  icon?: LucideIcon;
+  rightButton?: ReactNode;
+}
 
-const Input = ({ className, type, ...props }: InputProps): ReactElement => {
-  return (
+const Input = ({
+  className,
+  type,
+  icon: Icon,
+  rightButton,
+  ...props
+}: InputProps): ReactElement => {
+  const hasAdornments = Icon || rightButton;
+
+  const inputElement = (
     <input
       type={type}
       className={cn(
-        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm 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",
+        "flex h-10 w-full text-sm bg-transparent placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        hasAdornments
+          ? cn(Icon ? "pl-9" : "pl-3", rightButton ? "pr-0" : "pr-3", "py-2")
+          : "rounded-md border border-input bg-background px-3 py-2 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         className,
       )}
       {...props}
     />
   );
+
+  if (!hasAdornments) return inputElement;
+
+  return (
+    <div className="relative flex items-center rounded-md border border-input bg-background ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
+      {Icon && (
+        <Icon className="absolute left-3 h-4 w-4 text-muted-foreground pointer-events-none" />
+      )}
+      {inputElement}
+      {rightButton}
+    </div>
+  );
 };
 Input.displayName = "Input";