From e26d821f738525477472e631d170d9ed218c1603 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 25 Feb 2022 19:17:09 +0100
Subject: chore: combine input/textarea/select in a single component

---
 src/components/Form/Form.module.scss          | 70 -------------------------
 src/components/Form/Form.tsx                  | 25 ---------
 src/components/Form/FormItem/FormItem.tsx     |  7 ---
 src/components/Form/Input/Input.tsx           | 50 ------------------
 src/components/Form/Label/Label.module.scss   | 22 --------
 src/components/Form/Label/Label.tsx           | 24 ---------
 src/components/Form/Select/Select.module.scss | 23 --------
 src/components/Form/Select/Select.tsx         | 56 --------------------
 src/components/Form/TextArea/TextArea.tsx     | 35 -------------
 src/components/Form/Toggle/Toggle.module.scss | 75 ---------------------------
 src/components/Form/Toggle/Toggle.tsx         | 46 ----------------
 src/components/Form/index.tsx                 |  9 ----
 12 files changed, 442 deletions(-)
 delete mode 100644 src/components/Form/Form.module.scss
 delete mode 100644 src/components/Form/Form.tsx
 delete mode 100644 src/components/Form/FormItem/FormItem.tsx
 delete mode 100644 src/components/Form/Input/Input.tsx
 delete mode 100644 src/components/Form/Label/Label.module.scss
 delete mode 100644 src/components/Form/Label/Label.tsx
 delete mode 100644 src/components/Form/Select/Select.module.scss
 delete mode 100644 src/components/Form/Select/Select.tsx
 delete mode 100644 src/components/Form/TextArea/TextArea.tsx
 delete mode 100644 src/components/Form/Toggle/Toggle.module.scss
 delete mode 100644 src/components/Form/Toggle/Toggle.tsx
 delete mode 100644 src/components/Form/index.tsx

(limited to 'src/components/Form')

diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss
deleted file mode 100644
index 6ccdb11..0000000
--- a/src/components/Form/Form.module.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.wrapper {
-  width: 100%;
-
-  &--search,
-  &--toggle {
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-  }
-
-  &--toggle {
-    position: relative;
-    margin: var(--spacing-sm) 0;
-  }
-
-  &--centered {
-    max-width: 45ch;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.item {
-  margin: var(--spacing-xs) 0;
-  max-width: 45ch;
-}
-
-.field {
-  width: 100%;
-  padding: var(--spacing-2xs) var(--spacing-xs);
-  background: var(--color-bg-tertiary);
-  border: fun.convert-px(2) solid var(--color-border);
-  box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow);
-  transition: all 0.25s linear 0s;
-
-  &:hover {
-    box-shadow: fun.convert-px(5) fun.convert-px(5) 0 fun.convert-px(1)
-      var(--color-shadow);
-    transform: translate(#{fun.convert-px(-3)}, #{fun.convert-px(-3)});
-  }
-
-  &:focus {
-    background: var(--color-bg);
-    border-color: var(--color-primary-darker);
-    box-shadow: 0 0 0 0 var(--color-shadow);
-    transform: translate(#{fun.convert-px(3)}, #{fun.convert-px(3)});
-    outline: none;
-    transition: all 0.2s ease-in-out 0s, transform 0.3s ease-out 0s;
-  }
-}
-
-.textarea {
-  min-height: fun.convert-px(200);
-}
-
-.wrapper--search {
-  > input {
-    padding-right: calc(var(--btn-size) + var(--spacing-2xs));
-
-    &:hover ~ button {
-      transform: translate(fun.convert-px(-3), fun.convert-px(-3));
-    }
-
-    &:focus ~ button {
-      transform: translate(fun.convert-px(3), fun.convert-px(3));
-    }
-  }
-}
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
deleted file mode 100644
index 44763c4..0000000
--- a/src/components/Form/Form.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ReactNode } from 'react';
-import styles from './Form.module.scss';
-
-const Form = ({
-  children,
-  submitHandler,
-  modifier = '',
-  id,
-}: {
-  children: ReactNode;
-  submitHandler: any;
-  modifier?: string;
-  id?: string;
-}) => {
-  const withModifier = modifier ? styles[`wrapper--${modifier}`] : '';
-  const classes = `${styles.wrapper} ${withModifier}`;
-
-  return (
-    <form onSubmit={submitHandler} className={classes} id={id}>
-      {children}
-    </form>
-  );
-};
-
-export default Form;
diff --git a/src/components/Form/FormItem/FormItem.tsx b/src/components/Form/FormItem/FormItem.tsx
deleted file mode 100644
index 0f12e64..0000000
--- a/src/components/Form/FormItem/FormItem.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import styles from '../Form.module.scss';
-
-const FormItem: React.FunctionComponent = ({ children }) => {
-  return <div className={styles.item}>{children}</div>;
-};
-
-export default FormItem;
diff --git a/src/components/Form/Input/Input.tsx b/src/components/Form/Input/Input.tsx
deleted file mode 100644
index 07f0410..0000000
--- a/src/components/Form/Input/Input.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import {
-  ChangeEvent,
-  ForwardedRef,
-  forwardRef,
-  ReactElement,
-  SetStateAction,
-} from 'react';
-import styles from '../Form.module.scss';
-
-type InputType = 'text' | 'email' | 'number' | 'search';
-
-const Input = (
-  {
-    id,
-    name,
-    value,
-    setValue,
-    type = 'text',
-    label,
-  }: {
-    id: string;
-    name: string;
-    value: string;
-    setValue: (value: SetStateAction<string>) => void;
-    type?: InputType;
-    label?: ReactElement;
-  },
-  ref: ForwardedRef<HTMLInputElement>
-) => {
-  const updateValue = (e: ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-  };
-
-  return (
-    <>
-      {label}
-      <input
-        ref={ref}
-        type={type}
-        id={id}
-        name={name}
-        value={value}
-        onChange={updateValue}
-        className={styles.field}
-      />
-    </>
-  );
-};
-
-export default forwardRef(Input);
diff --git a/src/components/Form/Label/Label.module.scss b/src/components/Form/Label/Label.module.scss
deleted file mode 100644
index c527b16..0000000
--- a/src/components/Form/Label/Label.module.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.regular {
-  display: block;
-  color: var(--color-primary-darker);
-  font-size: var(--font-size-sm);
-  font-variant: small-caps;
-  font-weight: 600;
-}
-
-.settings {
-  --icon-size: #{fun.convert-px(25)};
-  --toggle-width: #{fun.convert-px(45)};
-  --toggle-height: calc(var(--toggle-width) / 2);
-
-  display: inline-flex;
-  align-items: center;
-}
-
-.required {
-  color: var(--color-secondary);
-}
diff --git a/src/components/Form/Label/Label.tsx b/src/components/Form/Label/Label.tsx
deleted file mode 100644
index baedff0..0000000
--- a/src/components/Form/Label/Label.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import styles from './Label.module.scss';
-
-type LabelKind = 'regular' | 'settings';
-
-const Label = ({
-  body,
-  htmlFor,
-  required = false,
-  kind = 'regular',
-}: {
-  body: string;
-  htmlFor: string;
-  required?: boolean;
-  kind?: LabelKind;
-}) => {
-  return (
-    <label htmlFor={htmlFor} className={styles[kind]}>
-      {body}
-      {required && <span className={styles.required}> *</span>}
-    </label>
-  );
-};
-
-export default Label;
diff --git a/src/components/Form/Select/Select.module.scss b/src/components/Form/Select/Select.module.scss
deleted file mode 100644
index d4a40eb..0000000
--- a/src/components/Form/Select/Select.module.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.wrapper {
-  padding: fun.convert-px(3) var(--spacing-xs);
-  background: var(--color-bg-tertiary);
-  border: fun.convert-px(2) solid var(--color-border);
-  box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow);
-  cursor: pointer;
-  transition: all 0.3s ease-in-out 0s;
-
-  &:hover {
-    box-shadow: fun.convert-px(4) fun.convert-px(4) 0 fun.convert-px(1)
-      var(--color-shadow);
-    transform: translate(#{fun.convert-px(-2)}, #{fun.convert-px(-2)});
-  }
-
-  &:focus {
-    background: var(--color-bg);
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 0 var(--color-shadow);
-    transform: translate(#{fun.convert-px(3)}, #{fun.convert-px(3)});
-  }
-}
diff --git a/src/components/Form/Select/Select.tsx b/src/components/Form/Select/Select.tsx
deleted file mode 100644
index feab991..0000000
--- a/src/components/Form/Select/Select.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { ChangeEvent, ReactElement, SetStateAction } from 'react';
-import styles from './Select.module.scss';
-
-type SelectOptions = {
-  id: string;
-  name: string;
-  value: string;
-};
-
-const Select = ({
-  options,
-  id,
-  name,
-  value,
-  setValue,
-  required = false,
-  label,
-}: {
-  options: SelectOptions[];
-  id: string;
-  name: string;
-  value: string;
-  setValue: (value: SetStateAction<string>) => void;
-  required?: boolean;
-  label?: ReactElement;
-}) => {
-  const getOptions = () => {
-    return options.map((option) => (
-      <option key={option.id} value={option.value}>
-        {option.name}
-      </option>
-    ));
-  };
-
-  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <>
-      {label}
-      <select
-        name={name}
-        id={id}
-        value={value}
-        onChange={handleChange}
-        required={required}
-        className={styles.wrapper}
-      >
-        {getOptions()}
-      </select>
-    </>
-  );
-};
-
-export default Select;
diff --git a/src/components/Form/TextArea/TextArea.tsx b/src/components/Form/TextArea/TextArea.tsx
deleted file mode 100644
index b8894ab..0000000
--- a/src/components/Form/TextArea/TextArea.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ChangeEvent, ReactElement, SetStateAction } from 'react';
-import styles from '../Form.module.scss';
-
-const TextArea = ({
-  id,
-  name,
-  value,
-  setValue,
-  label,
-}: {
-  id: string;
-  name: string;
-  value: string;
-  setValue: (value: SetStateAction<string>) => void;
-  label?: ReactElement;
-}) => {
-  const updateValue = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(e.target.value);
-  };
-
-  return (
-    <>
-      {label}
-      <textarea
-        id={id}
-        name={name}
-        value={value}
-        onChange={updateValue}
-        className={`${styles.field} ${styles.textarea}`}
-      />
-    </>
-  );
-};
-
-export default TextArea;
diff --git a/src/components/Form/Toggle/Toggle.module.scss b/src/components/Form/Toggle/Toggle.module.scss
deleted file mode 100644
index 48c88f6..0000000
--- a/src/components/Form/Toggle/Toggle.module.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.label {
-  --icon-size: #{fun.convert-px(25)};
-  --toggle-width: #{fun.convert-px(45)};
-  --toggle-height: calc(var(--toggle-width) / 2);
-
-  display: inline-flex;
-  align-items: center;
-}
-
-.title {
-  margin-right: var(--spacing-xs);
-}
-
-.toggle {
-  display: inline-flex;
-  align-items: center;
-  width: var(--toggle-width);
-  height: var(--toggle-height);
-  background: var(--color-shadow-light);
-  border: fun.convert-px(1) solid var(--color-primary);
-  border-radius: fun.convert-px(32);
-  box-shadow: inset 0 0 fun.convert-px(3) 0 var(--color-shadow-dark);
-  margin: 0 var(--spacing-2xs);
-  position: relative;
-
-  &::after {
-    content: "";
-    display: block;
-    width: calc(var(--toggle-width) / 2);
-    height: calc(var(--toggle-width) / 2);
-    background: var(--color-primary-light);
-    border: fun.convert-px(1) solid var(--color-primary);
-    border-radius: 50%;
-    box-shadow: inset 0 0 fun.convert-px(1) fun.convert-px(1)
-        var(--color-shadow),
-      0 0 fun.convert-px(2) fun.convert-px(1) var(--color-shadow-light);
-    position: absolute;
-    left: fun.convert-px(-2);
-    transition: all 0.3s ease-in-out 0s;
-  }
-}
-
-.checkbox {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-
-  &:checked ~ .label {
-    .toggle::after {
-      position: absolute;
-      left: calc(100% - (var(--toggle-width) / 2) + #{fun.convert-px(2)});
-    }
-  }
-
-  &:hover,
-  &:focus {
-    ~ .label {
-      .toggle::after {
-        background: var(--color-primary-lighter);
-      }
-    }
-  }
-
-  &:focus ~ .label {
-    .title {
-      text-decoration: underline solid var(--color-primary) fun.convert-px(2);
-    }
-
-    .toggle {
-      outline: var(--color-border) solid fun.convert-px(5);
-    }
-  }
-}
diff --git a/src/components/Form/Toggle/Toggle.tsx b/src/components/Form/Toggle/Toggle.tsx
deleted file mode 100644
index 36636e4..0000000
--- a/src/components/Form/Toggle/Toggle.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { FormEvent, ReactElement } from 'react';
-import { Form } from '..';
-import styles from './Toggle.module.scss';
-
-const Toggle = ({
-  id,
-  label,
-  value,
-  changeHandler,
-  leftChoice,
-  rightChoice,
-  name,
-}: {
-  id: string;
-  label: string;
-  value: boolean;
-  changeHandler: (value: boolean) => void;
-  leftChoice: ReactElement | string;
-  rightChoice: ReactElement | string;
-  name?: string;
-}) => {
-  const onSubmit = (e: FormEvent) => {
-    e.preventDefault();
-  };
-
-  return (
-    <Form modifier="toggle" submitHandler={onSubmit}>
-      <input
-        className={styles.checkbox}
-        type="checkbox"
-        id={id}
-        name={name ? name : id}
-        checked={value}
-        onChange={() => changeHandler(!value)}
-      />
-      <label htmlFor={id} className={styles.label}>
-        <span className={styles.title}>{label}</span>
-        {leftChoice}
-        <span className={styles.toggle}></span>
-        {rightChoice}
-      </label>
-    </Form>
-  );
-};
-
-export default Toggle;
diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx
deleted file mode 100644
index cbe1ec4..0000000
--- a/src/components/Form/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import Form from './Form';
-import FormItem from './FormItem/FormItem';
-import Input from './Input/Input';
-import Label from './Label/Label';
-import Select from './Select/Select';
-import TextArea from './TextArea/TextArea';
-import Toggle from './Toggle/Toggle';
-
-export { Form, FormItem, Input, Label, Select, TextArea, Toggle };
-- 
cgit v1.2.3