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

diff --git a/src/components/Settings/ReduceMotion/ReduceMotion.tsx b/src/components/Settings/ReduceMotion/ReduceMotion.tsx
deleted file mode 100644
index 00562cd..0000000
--- a/src/components/Settings/ReduceMotion/ReduceMotion.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Toggle } from '@components/FormElements';
-import { LocalStorage } from '@services/local-storage';
-import { useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
-
-const ReduceMotion = () => {
-  const intl = useIntl();
-  const [isDeactivated, setIsDeactivated] = useState<boolean>(false);
-
-  useEffect(() => {
-    const initialState = LocalStorage.get('reduced-motion');
-    if (initialState) setIsDeactivated(initialState === 'true' ? true : false);
-  }, []);
-
-  useEffect(() => {
-    document.documentElement.dataset.reducedMotion = `${isDeactivated}`;
-    LocalStorage.set('reduced-motion', `${isDeactivated}`);
-  }, [isDeactivated]);
-
-  const updateState = () => {
-    setIsDeactivated(!isDeactivated);
-  };
-
-  return (
-    <Toggle
-      id="reduced-motion"
-      label={intl.formatMessage({
-        defaultMessage: 'Animations:',
-        description: 'ReduceMotion: toggle label',
-        id: 'X3PDXO',
-      })}
-      leftChoice={intl.formatMessage({
-        defaultMessage: 'On',
-        description: 'ReduceMotion: toggle on label',
-        id: 'qPU/Qn',
-      })}
-      rightChoice={intl.formatMessage({
-        defaultMessage: 'Off',
-        description: 'ReduceMotion: toggle off label',
-        id: 'w1nIrj',
-      })}
-      value={isDeactivated}
-      changeHandler={updateState}
-    />
-  );
-};
-
-export default ReduceMotion;