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.

1 files changed, 78 insertions, 0 deletions

diff --git a/src/components/molecules/forms/toggle.tsx b/src/components/molecules/forms/toggle.tsx
new file mode 100644
index 0000000..288062d
--- /dev/null
+++ b/src/components/molecules/forms/toggle.tsx
@@ -0,0 +1,78 @@
+import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
+import Label, { type LabelProps } from '@components/atoms/forms/label';
+import { FC, ReactNode } from 'react';
+import styles from './toggle.module.scss';
+
+export type ToggleChoices = {
+  /**
+   * The left part of the toggle field (unchecked).
+   */
+  left: ReactNode;
+  /**
+   * The right part of the toggle field (checked).
+   */
+  right: ReactNode;
+};
+
+export type ToggleProps = Pick<CheckboxProps, 'id' | 'name'> & {
+  /**
+   * The toggle choices.
+   */
+  choices: ToggleChoices;
+  /**
+   * The toggle label.
+   */
+  label: string;
+  /**
+   * Set additional classnames to the label.
+   */
+  labelClassName?: LabelProps['className'];
+  /**
+   * The label size.
+   */
+  labelSize?: LabelProps['size'];
+  /**
+   * The toggle value. True if checked.
+   */
+  value: boolean;
+  /**
+   * A callback function to update the toggle value.
+   */
+  setValue: (value: boolean) => void;
+};
+
+/**
+ * Toggle component
+ *
+ * Render a toggle with a label and two choices.
+ */
+const Toggle: FC<ToggleProps> = ({
+  choices,
+  id,
+  label,
+  labelClassName = '',
+  labelSize,
+  name,
+  setValue,
+  value,
+}) => {
+  return (
+    <>
+      <Checkbox
+        name={name}
+        id={id}
+        value={value}
+        setValue={() => setValue(!value)}
+        className={styles.checkbox}
+      />
+      <Label size={labelSize} htmlFor={id} className={styles.label}>
+        <span className={`${styles.title} ${labelClassName}`}>{label}</span>
+        {choices.left}
+        <span className={styles.toggle}></span>
+        {choices.right}
+      </Label>
+    </>
+  );
+};
+
+export default Toggle;