feat add input

src/components/forms/Input.tsx

@@ -0,0 +1,36 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+import { useFieldsContext } from './context/FieldsContext';
+
+const styles = {
+  input: css`
+    box-sizing: border-box;
+    margin: 0px;
+    padding: 4px 11px;
+    color: rgba(0, 0, 0, 0.88);
+    font-size: 14px;
+    line-height: 1.5714285714285714;
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    min-width: 0px;
+    background-color: #fff;
+    border-radius: 6px;
+    transition: all 0.2s;
+    border: 1px solid #d9d9d9;
+  `,
+};
+
+export function Input(props: React.InputHTMLAttributes<HTMLInputElement>) {
+  const fieldsContext = useFieldsContext();
+
+  return (
+    <input
+      id={fieldsContext}
+      name={fieldsContext}
+      css={styles.input}
+      {...props}
+    />
+  );
+}

src/components/forms/context/FieldsContext.tsx

@@ -0,0 +1,51 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { createContext, ReactNode, useContext } from 'react';
+
+interface FieldsProps {
+  children: ReactNode;
+}
+
+interface FieldProps extends FieldsProps {
+  name: string;
+  label: string;
+}
+
+const context = createContext<string | null>(null);
+
+const styles = {
+  root: css`
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    align-items: center;
+  `,
+};
+
+export function useFieldsContext() {
+  const ctx = useContext(context);
+
+  if (!ctx) {
+    return undefined;
+  }
+
+  return ctx;
+}
+
+export function Fields(props: FieldsProps) {
+  const { children } = props;
+  return <>{children}</>;
+}
+
+export function Field(props: FieldProps) {
+  const { label, name, children } = props;
+
+  return (
+    <context.Provider value={name}>
+      <div css={styles.root}>
+        <label htmlFor={name}>{label}: </label>
+        {children}
+      </div>
+    </context.Provider>
+  );
+}

src/components/forms/index.ts

@@ -0,0 +1 @@
+export * from './Input';

stories/components/input.stories.tsx

@@ -0,0 +1,39 @@
+import { ChangeEvent, useState } from 'react';
+
+import { Input } from '../../src/components/forms/Input';
+import {
+  Field,
+  Fields,
+} from '../../src/components/forms/context/FieldsContext';
+
+export default {
+  title: 'Forms / Input',
+};
+
+export function BasicExample() {
+  const [state, setState] = useState('Hello, World!');
+
+  function onChange(event: ChangeEvent<HTMLInputElement>) {
+    setState(event.target.value);
+  }
+
+  return (
+    <Input placeholder="Basic example" value={state} onChange={onChange} />
+  );
+}
+
+export function LabelExample() {
+  const [state, setState] = useState('Hello, World!');
+
+  function onChange(event: ChangeEvent<HTMLInputElement>) {
+    setState(event.target.value);
+  }
+
+  return (
+    <Fields>
+      <Field name="inputLabel" label="Label">
+        <Input placeholder="Label example" value={state} onChange={onChange} />
+      </Field>
+    </Fields>
+  );
+}