refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

2 files changed, 0 insertions, 159 deletions

diff --git a/src/components/FormElements/Field/Field.module.scss b/src/components/FormElements/Field/Field.module.scss
deleted file mode 100644
index 9100495..0000000
--- a/src/components/FormElements/Field/Field.module.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.field {
-  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;
-
-  &:not(.select) {
-    width: 100%;
-    padding: var(--spacing-2xs) var(--spacing-xs);
-  }
-
-  &: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);
-    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;
-  }
-}
-
-.select {
-  padding: var(--spacing-2xs) var(--spacing-xs);
-  cursor: pointer;
-
-  @include mix.pointer("fine") {
-    padding: fun.convert-px(3) var(--spacing-xs);
-  }
-
-  &: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 {
-    box-shadow: 0 0 0 0 var(--color-shadow);
-    transform: translate(#{fun.convert-px(3)}, #{fun.convert-px(3)});
-  }
-}
-
-.textarea {
-  min-height: fun.convert-px(200);
-}
diff --git a/src/components/FormElements/Field/Field.tsx b/src/components/FormElements/Field/Field.tsx
deleted file mode 100644
index c8df0f9..0000000
--- a/src/components/FormElements/Field/Field.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import {
-  ChangeEvent,
-  ForwardedRef,
-  forwardRef,
-  ReactElement,
-  SetStateAction,
-} from 'react';
-import styles from './Field.module.scss';
-
-type FieldType = 'email' | 'number' | 'search' | 'select' | 'text' | 'textarea';
-type SelectOptions = {
-  id: string;
-  name: string;
-  value: string;
-};
-
-const Field = (
-  {
-    id,
-    name,
-    value,
-    setValue,
-    required = false,
-    kind = 'text',
-    label,
-    options,
-  }: {
-    id: string;
-    name: string;
-    value: string;
-    setValue: (value: SetStateAction<string>) => void;
-    required?: boolean;
-    kind?: FieldType;
-    label?: ReactElement;
-    options?: SelectOptions[];
-  },
-  ref: ForwardedRef<HTMLInputElement | HTMLTextAreaElement>
-) => {
-  const updateValue = (
-    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
-  ) => {
-    setValue(e.target.value);
-  };
-
-  const getOptions = () => {
-    return options
-      ? options.map((option) => (
-          <option key={option.id} value={option.value}>
-            {option.name}
-          </option>
-        ))
-      : '';
-  };
-
-  const getField = () => {
-    switch (kind) {
-      case 'select':
-        return (
-          <select
-            name={name}
-            id={id}
-            value={value}
-            onChange={updateValue}
-            required={required}
-            className={`${styles.field} ${styles.select}`}
-          >
-            {getOptions()}
-          </select>
-        );
-      case 'textarea':
-        return (
-          <textarea
-            ref={ref as ForwardedRef<HTMLTextAreaElement>}
-            id={id}
-            name={name}
-            value={value}
-            required={required}
-            onChange={updateValue}
-            className={`${styles.field} ${styles.textarea}`}
-          />
-        );
-      default:
-        return (
-          <input
-            ref={ref as ForwardedRef<HTMLInputElement>}
-            type={kind}
-            id={id}
-            name={name}
-            value={value}
-            required={required}
-            onChange={updateValue}
-            className={styles.field}
-          />
-        );
-    }
-  };
-
-  return (
-    <>
-      {label}
-      {getField()}
-    </>
-  );
-};
-
-export default forwardRef(Field);