feat: Input (#86)

src/components/Input/index.stories.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import styled from "styled-components";
+/* eslint-disable import/no-unresolved */
+import { Meta } from "@storybook/react/types-6-0";
+import Heading from "../Heading";
+import Input from "./index";
+import { scales } from "./types";
+
+const Row = styled.div`
+  display: flex;
+  margin-bottom: 32px;
+
+  & > input + input {
+    margin-left: 16px;
+  }
+`;
+
+export default {
+  title: "Input",
+  component: Input,
+  argTypes: {},
+} as Meta;
+
+export const Default: React.FC = () => {
+  return (
+    <div>
+      {Object.keys(scales).map((key) => (
+        <>
+          <Heading mb="16px">{key}</Heading>
+          <Row>
+            <Input type="text" scale={scales[key]} value="Value" />
+            <Input type="text" scale={scales[key]} placeholder="Placeholder..." />
+            <Input type="text" scale={scales[key]} value="Disabled" disabled />
+            <Input type="text" scale={scales[key]} value="Success" isSuccess />
+            <Input type="text" scale={scales[key]} value="Warning" isWarning />
+          </Row>
+        </>
+      ))}
+    </div>
+  );
+};

src/components/Input/index.tsx

@@ -0,0 +1,70 @@
+import styled, { DefaultTheme } from "styled-components";
+import { InputProps, scales } from "./types";
+
+interface StyledInputProps extends InputProps {
+  theme: DefaultTheme;
+}
+
+/**
+ * Priority: Warning --> Success
+ */
+const getBoxShadow = ({ isSuccess = false, isWarning = false, theme }: StyledInputProps) => {
+  if (isWarning) {
+    return theme.shadows.warning;
+  }
+
+  if (isSuccess) {
+    return theme.shadows.success;
+  }
+
+  return theme.shadows.inset;
+};
+
+const getHeight = ({ scale = scales.MD }: StyledInputProps) => {
+  switch (scale) {
+    case scales.SM:
+      return "32px";
+    case scales.LG:
+      return "48px";
+    case scales.MD:
+    default:
+      return "40px";
+  }
+};
+
+const Input = styled.input<InputProps>`
+  background-color: ${({ theme }) => theme.colors.input};
+  border: 0;
+  border-radius: 16px;
+  box-shadow: ${getBoxShadow};
+  color: ${({ theme }) => theme.colors.text};
+  display: block;
+  font-size: 16px;
+  height: ${getHeight};
+  outline: 0;
+  padding: 0 16px;
+  width: 100%;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.textSubtle};
+  }
+
+  &:disabled {
+    background-color: ${({ theme }) => theme.colors.backgroundDisabled};
+    box-shadow: none;
+    color: ${({ theme }) => theme.colors.textDisabled};
+    cursor: not-allowed;
+  }
+
+  &:focus:not(:disabled) {
+    box-shadow: ${({ theme }) => theme.shadows.focus};
+  }
+`;
+
+Input.defaultProps = {
+  scale: scales.MD,
+  isSuccess: false,
+  isWarning: false,
+};
+
+export default Input;

src/components/Input/types.ts

@@ -0,0 +1,15 @@
+import { SpaceProps } from "styled-system";
+
+export const scales = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+} as const;
+
+export type Scales = typeof scales[keyof typeof scales];
+
+export interface InputProps extends SpaceProps {
+  scale?: Scales;
+  isSuccess?: boolean;
+  isWarning?: boolean;
+}

src/index.ts

@@ -6,6 +6,7 @@ export { default as ColorBox } from "./components/ColorBox";
 export { default as Flex } from "./components/Flex";
 export { default as Dropdown } from "./components/Dropdown";
 export { default as Heading } from "./components/Heading";
+export { default as Input } from "./components/Input";
 export * from "./components/Card";
 export * from "./components/Layouts";
 export * from "./components/Svg";