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.

7 files changed, 0 insertions, 288 deletions

diff --git a/src/components/Settings/AckeeSelect/AckeeSelect.module.scss b/src/components/Settings/AckeeSelect/AckeeSelect.module.scss
deleted file mode 100644
index b145761..0000000
--- a/src/components/Settings/AckeeSelect/AckeeSelect.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.wrapper {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  gap: var(--spacing-xs);
-}
diff --git a/src/components/Settings/AckeeSelect/AckeeSelect.tsx b/src/components/Settings/AckeeSelect/AckeeSelect.tsx
deleted file mode 100644
index f711fe2..0000000
--- a/src/components/Settings/AckeeSelect/AckeeSelect.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Field, Label } from '@components/FormElements';
-import Tooltip from '@components/Tooltip/Tooltip';
-import { LocalStorage } from '@services/local-storage';
-import { useAckeeTracker } from '@utils/providers/ackee';
-import { useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './AckeeSelect.module.scss';
-
-const AckeeSelect = () => {
-  const intl = useIntl();
-  const options = [
-    {
-      id: 'partial',
-      name: intl.formatMessage({
-        defaultMessage: 'Partial',
-        description: 'AckeeSelect: partial option name',
-        id: 'e/8Kyj',
-      }),
-      value: 'partial',
-    },
-    {
-      id: 'full',
-      name: intl.formatMessage({
-        defaultMessage: 'Full',
-        description: 'AckeeSelect: full option name',
-        id: 'PzRpPw',
-      }),
-      value: 'full',
-    },
-  ];
-  const [value, setValue] = useState<string>('full');
-  const { setDetailed } = useAckeeTracker();
-
-  useEffect(() => {
-    setDetailed(value === 'full');
-  }, [setDetailed, value]);
-
-  useEffect(() => {
-    const initialState = LocalStorage.get('ackee-tracking');
-    if (initialState) setValue(initialState);
-  }, []);
-
-  useEffect(() => {
-    LocalStorage.set('ackee-tracking', `${value}`);
-  }, [value]);
-
-  const label = (
-    <Label
-      body={intl.formatMessage({
-        defaultMessage: 'Tracking:',
-        description: 'AckeeSelect: select label',
-        id: '2pmylc',
-      })}
-      htmlFor="ackee-settings"
-      kind="settings"
-    />
-  );
-
-  const message = [
-    intl.formatMessage({
-      defaultMessage: 'Partial includes only page url, views and duration.',
-      description: 'AckeeSelect: tooltip message',
-      id: 'skb4W5',
-    }),
-    intl.formatMessage({
-      defaultMessage:
-        'Full includes all information from partial as well as information about referrer, operating system, device, browser, screen size and language.',
-      description: 'AckeeSelect: tooltip message',
-      id: 'Ogccx6',
-    }),
-  ];
-
-  return (
-    <div className={styles.wrapper}>
-      <Field
-        id="ackee-settings"
-        name="ackee-settings"
-        kind="select"
-        label={label}
-        options={options}
-        value={value}
-        setValue={setValue}
-      />
-      <Tooltip
-        message={message}
-        title={intl.formatMessage({
-          defaultMessage: 'Ackee tracking (analytics)',
-          description: 'AckeeSelect: tooltip title',
-          id: 'F1EQX3',
-        })}
-      />
-    </div>
-  );
-};
-
-export default AckeeSelect;
diff --git a/src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx b/src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx
deleted file mode 100644
index 20ad267..0000000
--- a/src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Toggle } from '@components/FormElements';
-import { MoonIcon, SunIcon } from '@components/Icons';
-import Spinner from '@components/Spinner/Spinner';
-import { usePrismTheme } from '@utils/providers/prism-theme';
-import { useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
-
-const PrismThemeToggle = () => {
-  const intl = useIntl();
-  const [isMounted, setIsMounted] = useState<boolean>(false);
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  const { theme, setTheme, resolvedTheme } = usePrismTheme();
-  const [isDarkTheme, setIsDarkTheme] = useState<boolean>(theme === 'dark');
-
-  useEffect(() => {
-    if (theme === 'system') {
-      setIsDarkTheme(resolvedTheme === 'dark');
-    } else {
-      setIsDarkTheme(theme === 'dark');
-    }
-  }, [theme, resolvedTheme]);
-
-  const updateTheme = () => {
-    isDarkTheme ? setTheme('light') : setTheme('dark');
-    setIsDarkTheme(!isDarkTheme);
-  };
-
-  if (!isMounted) return <Spinner />;
-
-  return (
-    <Toggle
-      id="prism-theme"
-      label={intl.formatMessage({
-        defaultMessage: 'Code blocks:',
-        description: 'PrismThemeToggle: toggle label',
-        id: 'w0UfY0',
-      })}
-      leftChoice={<SunIcon />}
-      rightChoice={<MoonIcon />}
-      value={isDarkTheme}
-      changeHandler={updateTheme}
-    />
-  );
-};
-
-export default PrismThemeToggle;
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;
diff --git a/src/components/Settings/Settings.module.scss b/src/components/Settings/Settings.module.scss
deleted file mode 100644
index fe6b17b..0000000
--- a/src/components/Settings/Settings.module.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.title {
-  --icon-size: #{fun.convert-px(30)};
-
-  display: flex;
-  flex-flow: row nowrap;
-  gap: var(--spacing-2xs);
-  margin-bottom: var(--spacing-md);
-  color: var(--color-primary-dark);
-  font-size: var(--font-size-lg);
-  font-weight: 600;
-
-  svg {
-    margin: 0;
-  }
-}
diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
deleted file mode 100644
index fec4c45..0000000
--- a/src/components/Settings/Settings.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { CogIcon } from '@components/Icons';
-import ThemeToggle from '@components/Settings/ThemeToggle/ThemeToggle';
-import { useIntl } from 'react-intl';
-import AckeeSelect from './AckeeSelect/AckeeSelect';
-import PrismThemeToggle from './PrismThemeToggle/PrismThemeToggle';
-import ReduceMotion from './ReduceMotion/ReduceMotion';
-import styles from './Settings.module.scss';
-
-const Settings = () => {
-  const intl = useIntl();
-
-  return (
-    <>
-      <div className={styles.title}>
-        <CogIcon />{' '}
-        {intl.formatMessage({
-          defaultMessage: 'Settings',
-          description: 'Settings: modal title',
-          id: 'bHEmkY',
-        })}
-      </div>
-      <ThemeToggle />
-      <ReduceMotion />
-      <PrismThemeToggle />
-      <AckeeSelect />
-    </>
-  );
-};
-
-export default Settings;
diff --git a/src/components/Settings/ThemeToggle/ThemeToggle.tsx b/src/components/Settings/ThemeToggle/ThemeToggle.tsx
deleted file mode 100644
index ec2cee1..0000000
--- a/src/components/Settings/ThemeToggle/ThemeToggle.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Toggle } from '@components/FormElements';
-import { MoonIcon, SunIcon } from '@components/Icons';
-import Spinner from '@components/Spinner/Spinner';
-import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
-
-const ThemeToggle = () => {
-  const intl = useIntl();
-  const [isMounted, setIsMounted] = useState<boolean>(false);
-  const { resolvedTheme, setTheme } = useTheme();
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  if (!isMounted) return <Spinner />;
-
-  const isDarkTheme = resolvedTheme === 'dark';
-
-  const updateTheme = () => {
-    setTheme(isDarkTheme ? 'light' : 'dark');
-  };
-
-  return (
-    <Toggle
-      id="dark-theme"
-      label={intl.formatMessage({
-        defaultMessage: 'Theme:',
-        description: 'ThemeToggle: toggle label',
-        id: 'O9XLDc',
-      })}
-      leftChoice={<SunIcon />}
-      rightChoice={<MoonIcon />}
-      value={isDarkTheme}
-      changeHandler={updateTheme}
-    />
-  );
-};
-
-export default ThemeToggle;