From 1a562f8aadb628720585485db91f895608c96cf0 Mon Sep 17 00:00:00 2001
From: Henry Fontanier <h.fontanier@gmail.com>
Date: Thu, 7 Sep 2023 15:49:14 +0200
Subject: [PATCH] sparkle very basic input

---
 sparkle/src/_index.ts                 |  3 +++
 sparkle/src/components/Input.tsx      | 38 +++++++++++++++++++++++++++
 sparkle/src/stories/Input.stories.tsx | 29 ++++++++++++++++++++
 3 files changed, 70 insertions(+)
 create mode 100644 sparkle/src/components/Input.tsx
 create mode 100644 sparkle/src/stories/Input.stories.tsx

diff --git a/sparkle/src/_index.ts b/sparkle/src/_index.ts
index 3711ef1916e18..3a7dd65f2f929 100644
--- a/sparkle/src/_index.ts
+++ b/sparkle/src/_index.ts
@@ -46,6 +46,9 @@ export { Avatar };
 import Spinner from "./components/Spinner";
 export { Spinner };
 
+import Input from "./components/Input";
+export { Input };
+
 import {
   LogoHorizontalColor as LogoHorizontalColorLogo,
   LogoHorizontalDark as LogoHorizontalDarkLogo,
diff --git a/sparkle/src/components/Input.tsx b/sparkle/src/components/Input.tsx
new file mode 100644
index 0000000000000..08ed00598f835
--- /dev/null
+++ b/sparkle/src/components/Input.tsx
@@ -0,0 +1,38 @@
+import React, { HTMLInputTypeAttribute, InputHTMLAttributes } from "react";
+
+export interface InputProps {
+  disabled?: boolean;
+  type: HTMLInputTypeAttribute;
+  name?: string;
+  id?: string;
+  className?: string;
+  value?: InputHTMLAttributes<HTMLInputElement>["value"];
+  placeholder?: string;
+  onChange?: InputHTMLAttributes<HTMLInputElement>["onChange"];
+}
+
+const Input: React.FC<InputProps> = ({
+  disabled,
+  type,
+  name,
+  id,
+  className,
+  value,
+  placeholder,
+  onChange,
+}) => {
+  return (
+    <input
+      disabled={disabled}
+      type={type}
+      name={name}
+      id={id}
+      className={className}
+      value={value}
+      placeholder={placeholder}
+      onChange={onChange}
+    />
+  );
+};
+
+export default Input;
diff --git a/sparkle/src/stories/Input.stories.tsx b/sparkle/src/stories/Input.stories.tsx
new file mode 100644
index 0000000000000..f84970382a502
--- /dev/null
+++ b/sparkle/src/stories/Input.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { Input } from "../index_with_tw_base";
+
+const meta = {
+  title: "Atoms/Input",
+  component: Input,
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const InputExample = () => (
+  <div>
+    <Input
+      type="text"
+      placeholder="Enter your name"
+      className="border border-gray-300 rounded-md p-2"
+    />
+  </div>
+);
+
+export const ItemDefault: Story = {
+  args: {
+    type: "text",
+    placeholder: "Enter your name",
+  },
+};