From 757201fdc5c04a3f15504f74bf8ab85bb6018c2b Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 27 Oct 2023 11:09:38 +0200 Subject: 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. --- .../forms/motion-toggle/motion-toggle.fixture.ts | 1 - .../forms/motion-toggle/motion-toggle.stories.tsx | 30 +-------------- .../forms/motion-toggle/motion-toggle.test.tsx | 3 +- .../forms/motion-toggle/motion-toggle.tsx | 44 +++------------------- 4 files changed, 9 insertions(+), 69 deletions(-) delete mode 100644 src/components/organisms/forms/motion-toggle/motion-toggle.fixture.ts (limited to 'src/components/organisms/forms') 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; const Template: ComponentStory = (args) => ( @@ -41,7 +18,4 @@ const Template: ComponentStory = (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(); + render(); 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 = ({ - defaultValue, - storageKey, - ...props -}) => { +export const MotionToggle: FC = ({ ...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 = ({ }, ]; - const updateSetting = useCallback(() => { - setIsReduced((prev) => !prev); - }, [setIsReduced]); - return ( = ({ items={options} legend={{reduceMotionLabel}} name="reduced-motion" - onSwitch={updateSetting} + onSwitch={toggleReducedMotion} value={isReduced ? 'off' : 'on'} /> ); -- cgit v1.2.3