feat: add Input component

Author: tmaciej-neti

src/components/__snapshots__/input.spec.tsx.snap

@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Input component > renders correctly 1`] = `
+<div>
+  <input
+    class="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-dodger-blue focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+    placeholder="Email"
+  />
+</div>
+`;

src/components/input.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Input } from "./input";
+
+describe("Input component", () => {
+  it("renders correctly", () => {
+    const { container } = render(<Input placeholder="Email" />);
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/input.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Button } from "./button";
+import { Input } from "./input";
+
+const meta = {
+  title: "Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Email",
+  },
+};
+
+export const File: Story = {
+  args: {
+    type: "file",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "Email",
+    disabled: true,
+  },
+};
+
+export const WithButton: Story = {
+  render() {
+    return (
+      <div className="flex w-full max-w-sm items-center space-x-2">
+        <Input type="email" placeholder="Email" />
+        <Button type="submit">Subscribe</Button>
+      </div>
+    );
+  },
+};

src/components/input.tsx

@@ -0,0 +1,26 @@
+import type { InputHTMLAttributes } from "react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type InputProps = InputHTMLAttributes<HTMLInputElement>;
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <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-dodger-blue focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Input.displayName = "Input";
+
+export { Input };