✨(react) add Input component

Finally the first form component of the design system. It wraps and enhance
the native input element.

packages/react/src/components/Forms/Input/index.stories.tsx

@@ -1,17 +1,208 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
-import { Input } from "components/Forms/Input/index";
+import React, { useRef } from "react";
+import { Input, InputRefType } from "components/Forms/Input/index";
+import { Button } from "components/Button";
 
 export default {
-  title: "Components/Forms (WIP)/Input",
+  title: "Components/Forms/Input",
   component: Input,
 } as ComponentMeta<typeof Input>;
 
-const Template: ComponentStory<typeof Input> = (args) => (
-  <Input {...args} aria-label="Input" />
-);
+const Template: ComponentStory<typeof Input> = (args) => <Input {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
   defaultValue: "Hello world",
+  label: "Your name",
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  defaultValue: "Hello world",
+  label: "Your name",
+  state: "success",
+  icon: <span className="material-icons">person</span>,
+  text: "This is an optional success message",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  defaultValue: "Hello world",
+  label: "Your name",
+  state: "error",
+  icon: <span className="material-icons">person</span>,
+  text: "This is an optional error message",
+};
+
+export const DisabledEmpty = Template.bind({});
+DisabledEmpty.args = {
+  label: "Your name",
+  icon: <span className="material-icons">person</span>,
+  disabled: true,
+};
+
+export const DisabledFilled = Template.bind({});
+DisabledFilled.args = {
+  label: "Your name",
+  defaultValue: "John Doe",
+  icon: <span className="material-icons">person</span>,
+  disabled: true,
+};
+
+export const Empty = Template.bind({});
+Empty.args = {
+  label: "Your email",
+};
+
+export const Icon = Template.bind({});
+Icon.args = {
+  label: "Account balance",
+  icon: <span className="material-icons">attach_money</span>,
+  defaultValue: "1000",
+};
+
+export const IconRight = Template.bind({});
+IconRight.args = {
+  label: "Account balance",
+  rightIcon: <span className="material-icons">attach_money</span>,
+  defaultValue: "1000",
+};
+
+export const IconBoth = Template.bind({});
+IconBoth.args = {
+  label: "Not a recommended use",
+  icon: <span className="material-icons">attach_money</span>,
+  rightIcon: <span className="material-icons">attach_money</span>,
+  defaultValue: "Is isn't recommended to use both icons",
+};
+
+export const OverflowingText = Template.bind({});
+OverflowingText.args = {
+  label: "Your name",
+  icon: <span className="material-icons">attach_money</span>,
+  defaultValue: "John Dave Mike Smith Doe Junior Senior Yoda Skywalker",
+};
+
+export const WithText = Template.bind({});
+WithText.args = {
+  defaultValue: "Hello world",
+  label: "Your name",
+  text: "This is a text, you can display anything you want here like warnings, informations or errors.",
+};
+
+export const WithTextRight = Template.bind({});
+WithTextRight.args = {
+  defaultValue: "Hello world",
+  label: "Your name",
+  rightText: "0/300",
+};
+
+export const WithBothTexts = Template.bind({});
+WithBothTexts.args = {
+  defaultValue: "Hello world",
+  label: "Your name",
+  text: "This is a text, you can display anything you want here like warnings, informations or errors.",
+  rightText: "0/300",
+};
+
+export const FullWidth = Template.bind({});
+FullWidth.args = {
+  defaultValue: "Hello world",
+  label: "Your name",
+  fullWidth: true,
+  text: "This is a text, you can display anything you want here like warnings, informations or errors.",
+  rightText: "0/300",
+};
+
+export const CharCounter = Template.bind({});
+CharCounter.args = {
+  defaultValue: "CEO",
+  label: "Job title",
+  text: "This is a text, you can display anything you want here like warnings, informations or errors.",
+  charCounter: true,
+  charCounterMax: 30,
+};
+
+export const Controlled = () => {
+  const [value, setValue] = React.useState("I am controlled");
+  return (
+    <div>
+      <div>
+        Value: <span>{value}</span>
+      </div>
+      <Input
+        label="Your identity"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+      <Button onClick={() => setValue("")}>Reset</Button>
+    </div>
+  );
+};
+
+export const NonControlled = () => {
+  return <Input defaultValue="john.doe@example.com" label="Your email" />;
+};
+
+export const WithRef = () => {
+  const ref = useRef<InputRefType>(null);
+  return (
+    <div>
+      <Input label="Your identity" ref={ref} />
+      <Button onClick={() => ref.current?.input?.focus()}>Focus</Button>
+    </div>
+  );
+};
+
+export const FormExample = () => {
+  return (
+    <div>
+      <form>
+        <div>
+          <Input label="First name" defaultValue="John" />
+        </div>
+        <div className="mt-s">
+          <Input label="Last name" defaultValue="Smith" />
+        </div>
+        <div className="mt-s">
+          <Input
+            label="Job Title"
+            defaultValue="Project Manager"
+            text="Your position in the company"
+            charCounter={true}
+            charCounterMax={30}
+          />
+        </div>
+        <div className="mt-s">
+          <Input label="Code" defaultValue="XIJZ81" disabled={true} />
+        </div>
+        <div className="mt-s">
+          <Input
+            label="Address"
+            defaultValue="1 Infinite Loop"
+            state="error"
+            text="Address not found"
+            icon={<span className="material-icons">apartment</span>}
+          />
+        </div>
+        <div className="mt-s">
+          <Input
+            label="Zip"
+            defaultValue="96020"
+            text="Five numbers format"
+            state="success"
+            icon={<span className="material-icons">location_on</span>}
+          />
+        </div>
+        <div className="mt-s">
+          <Input
+            label="City"
+            defaultValue="Palo Alto"
+            state="success"
+            icon={<span className="material-icons">map</span>}
+          />
+        </div>
+      </form>
+    </div>
+  );
 };