refactor(hooks,provider): move reduce motion setter

Since the local storage key is not meant to change between the
components, it should be set directly inside the app file. So
both the local storage and the data attribute should be handle
in a provider.
I also added a custom document because we need a script to
retrieve the stored value in local storage earlier to avoid
flashing on hydration.

4 files changed, 9 insertions, 69 deletions

diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.ts b/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.ts
deleted file mode 100644
index f13658a..0000000
--- a/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const storageKey = 'reduced-motion';
diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx
index 811830b..7adef1b 100644
--- a/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx
+++ b/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx
@@ -1,6 +1,5 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { MotionToggle } from './motion-toggle';
-import { storageKey } from './motion-toggle.fixture';
 
 /**
  * MotionToggle - Storybook Meta
@@ -8,29 +7,7 @@ import { storageKey } from './motion-toggle.fixture';
 export default {
   title: 'Organisms/Forms/Toggle',
   component: MotionToggle,
-  argTypes: {
-    defaultValue: {
-      control: {
-        type: 'select',
-      },
-      description: 'Set the default value.',
-      options: ['on', 'off'],
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    storageKey: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set local storage key.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
+  argTypes: {},
 } as ComponentMeta<typeof MotionToggle>;
 
 const Template: ComponentStory<typeof MotionToggle> = (args) => (
@@ -41,7 +18,4 @@ const Template: ComponentStory<typeof MotionToggle> = (args) => (
  * Toggle Stories - Motion
  */
 export const Motion = Template.bind({});
-Motion.args = {
-  defaultValue: 'on',
-  storageKey,
-};
+Motion.args = {};
diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx
index 6952f46..d20057e 100644
--- a/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx
+++ b/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx
@@ -1,12 +1,11 @@
 import { describe, expect, it } from '@jest/globals';
 import { render, screen as rtlScreen } from '../../../../../tests/utils';
 import { MotionToggle } from './motion-toggle';
-import { storageKey } from './motion-toggle.fixture';
 
 describe('MotionToggle', () => {
   // toHaveValue received undefined. Maybe because of localStorage hook...
   it('renders a toggle component', () => {
-    render(<MotionToggle storageKey={storageKey} defaultValue="on" />);
+    render(<MotionToggle />);
     expect(
       rtlScreen.getByRole('radiogroup', {
         name: /Animations:/i,
diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.tsx
index 2545c20..33527c3 100644
--- a/src/components/organisms/forms/motion-toggle/motion-toggle.tsx
+++ b/src/components/organisms/forms/motion-toggle/motion-toggle.tsx
@@ -1,6 +1,6 @@
-import { useCallback, type FC } from 'react';
+import type { FC } from 'react';
 import { useIntl } from 'react-intl';
-import { useAttributes, useLocalStorage } from '../../../../utils/hooks';
+import { useReducedMotion } from '../../../../utils/hooks';
 import { Legend } from '../../../atoms';
 import {
   Switch,
@@ -8,47 +8,19 @@ import {
   type SwitchProps,
 } from '../../../molecules';
 
-export type MotionToggleValue = 'on' | 'off';
-
-const validator = (value: unknown): value is boolean =>
-  typeof value === 'boolean';
-
 export type MotionToggleProps = Omit<
   SwitchProps,
   'isInline' | 'items' | 'name' | 'onSwitch' | 'value'
-> & {
-  /**
-   * True if motion should be reduced by default.
-   */
-  defaultValue: MotionToggleValue;
-  /**
-   * The local storage key to save preference.
-   */
-  storageKey: string;
-};
+>;
 
 /**
  * MotionToggle component
  *
  * Render a Toggle component to set reduce motion.
  */
-export const MotionToggle: FC<MotionToggleProps> = ({
-  defaultValue,
-  storageKey,
-  ...props
-}) => {
+export const MotionToggle: FC<MotionToggleProps> = ({ ...props }) => {
   const intl = useIntl();
-  const [isReduced, setIsReduced] = useLocalStorage(
-    storageKey,
-    defaultValue !== 'on',
-    validator
-  );
-  useAttributes({
-    element:
-      typeof window === 'undefined' ? undefined : document.documentElement,
-    attribute: 'reduced-motion',
-    value: `${isReduced}`,
-  });
+  const { isReduced, toggleReducedMotion } = useReducedMotion();
 
   const reduceMotionLabel = intl.formatMessage({
     defaultMessage: 'Animations:',
@@ -79,10 +51,6 @@ export const MotionToggle: FC<MotionToggleProps> = ({
     },
   ];
 
-  const updateSetting = useCallback(() => {
-    setIsReduced((prev) => !prev);
-  }, [setIsReduced]);
-
   return (
     <Switch
       {...props}
@@ -90,7 +58,7 @@ export const MotionToggle: FC<MotionToggleProps> = ({
       items={options}
       legend={<Legend>{reduceMotionLabel}</Legend>}
       name="reduced-motion"
-      onSwitch={updateSetting}
+      onSwitch={toggleReducedMotion}
       value={isReduced ? 'off' : 'on'}
     />
   );