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, 51 insertions, 0 deletions

diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx
new file mode 100644
index 0000000..5d14836
--- /dev/null
+++ b/src/components/organisms/modals/settings-modal.tsx
@@ -0,0 +1,51 @@
+import Spinner from '@components/atoms/loaders/spinner';
+import Modal, { type ModalProps } from '@components/molecules/modals/modal';
+import dynamic from 'next/dynamic';
+import { FC } from 'react';
+import { useIntl } from 'react-intl';
+import { type SettingsFormProps } from '../forms/settings-form';
+import styles from './settings-modal.module.scss';
+
+const DynamicSettingsForm = dynamic(
+  () => import('@components/organisms/forms/settings-form'),
+  {
+    loading: () => <Spinner />,
+    ssr: false,
+  }
+);
+
+export type SettingsModalProps = Pick<ModalProps, 'className'> &
+  Pick<
+    SettingsFormProps,
+    'ackeeStorageKey' | 'motionStorageKey' | 'tooltipClassName'
+  >;
+
+/**
+ * SettingsModal component
+ *
+ * Render a modal with settings options.
+ */
+const SettingsModal: FC<SettingsModalProps> = ({
+  className = '',
+  ...props
+}) => {
+  const intl = useIntl();
+  const title = intl.formatMessage({
+    defaultMessage: 'Settings',
+    description: 'SettingsModal: title',
+    id: 'gPfT/K',
+  });
+
+  return (
+    <Modal
+      title={title}
+      icon="cogs"
+      className={`${styles.wrapper} ${className}`}
+      headingClassName={styles.heading}
+    >
+      <DynamicSettingsForm {...props} />
+    </Modal>
+  );
+};
+
+export default SettingsModal;