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.

1 files changed, 6 insertions, 38 deletions

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'}
     />
   );