Merge pull request #6 from zimmerman-team/feat/add-input-component

feat: add Input component

src/components/buttons/button.tsx

@@ -17,7 +17,7 @@ type ButtonProps = {
   radius: "rounded" | "sharp" | "circle";
 };
 
-export default function MyButton(props: ButtonProps) {
+export default function MyButton(props: Readonly<ButtonProps>) {
   const { filled, backgroundColor, size, label, onClick, icon, color, radius } =
     props;
   const radiusSize = {

src/components/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from "./input";

src/components/input/input.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn, userEvent, within, expect } from "@storybook/test";
+import Input from "./input";
+
+const meta = {
+  title: "Example/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    backgroundColor: { control: "color" },
+  },
+  args: { backgroundColor: "yellow" },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    backgroundColor: "yellow",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    expect(canvas.getByRole("textbox")).toBeInTheDocument();
+    await user.type(canvas.getByRole("textbox"), "Hello, World!");
+  },
+};

src/components/input/input.tsx

@@ -0,0 +1,30 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import React from "react";
+
+export default function Input({
+  backgroundColor,
+}: {
+  backgroundColor: string;
+}) {
+  return (
+    <div>
+      <input
+        type="text"
+        css={css`
+          display: flex;
+          width: 236px;
+          height: 32px;
+          padding: 4px 8px;
+          align-items: center;
+          align-content: center;
+          gap: 8px;
+          flex-wrap: wrap;
+          border-radius: 5px;
+          background: ${backgroundColor ?? "#ebebeb"};
+          border: none;
+        `}
+      />
+    </div>
+  );
+}

src/index.ts

@@ -1 +1,2 @@
 export * from "./components/buttons";
+export * from "./components/input";