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

diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx
new file mode 100644
index 0000000..cbe38fe
--- /dev/null
+++ b/src/components/molecules/forms/motion-toggle.tsx
@@ -0,0 +1,75 @@
+import Toggle, {
+  type ToggleChoices,
+  type ToggleProps,
+} from '@components/molecules/forms/toggle';
+import useAttributes from '@utils/hooks/use-attributes';
+import useLocalStorage from '@utils/hooks/use-local-storage';
+import { FC } from 'react';
+import { useIntl } from 'react-intl';
+
+export type MotionToggleProps = Pick<
+  ToggleProps,
+  'labelClassName' | 'value'
+> & {
+  /**
+   * The local storage key to save preference.
+   */
+  storageKey: string;
+};
+
+/**
+ * MotionToggle component
+ *
+ * Render a Toggle component to set reduce motion.
+ */
+const MotionToggle: FC<MotionToggleProps> = ({
+  storageKey,
+  value,
+  ...props
+}) => {
+  const intl = useIntl();
+  const { value: isReduced, setValue: setIsReduced } = useLocalStorage<boolean>(
+    storageKey,
+    value
+  );
+  useAttributes({
+    element: document.documentElement || undefined,
+    attribute: 'reduced-motion',
+    value: `${isReduced}`,
+  });
+
+  const reduceMotionLabel = intl.formatMessage({
+    defaultMessage: 'Animations:',
+    description: 'MotionToggle: reduce motion label',
+    id: '/q5csZ',
+  });
+  const onLabel = intl.formatMessage({
+    defaultMessage: 'On',
+    description: 'MotionToggle: activate reduce motion label',
+    id: 'va65iw',
+  });
+  const offLabel = intl.formatMessage({
+    defaultMessage: 'Off',
+    description: 'MotionToggle: deactivate reduce motion label',
+    id: 'pWKyyR',
+  });
+  const reduceMotionChoices: ToggleChoices = {
+    left: onLabel,
+    right: offLabel,
+  };
+
+  return (
+    <Toggle
+      id="reduce-motion-settings"
+      name="reduce-motion-settings"
+      label={reduceMotionLabel}
+      labelSize="medium"
+      choices={reduceMotionChoices}
+      value={isReduced}
+      setValue={setIsReduced}
+      {...props}
+    />
+  );
+};
+
+export default MotionToggle;