From fb860884857da73ee5b5e897745301cdf1d770a2 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 5 Oct 2023 18:58:30 +0200 Subject: refactor(components): make form components compliant with Eslint rules --- .../organisms/forms/motion-toggle/motion-toggle.fixture.ts | 1 + .../forms/motion-toggle/motion-toggle.fixture.tsx | 1 - .../forms/motion-toggle/motion-toggle.stories.tsx | 2 +- .../organisms/forms/motion-toggle/motion-toggle.test.tsx | 4 ++-- .../organisms/forms/motion-toggle/motion-toggle.tsx | 14 +++++++++----- 5 files changed, 13 insertions(+), 9 deletions(-) create mode 100644 src/components/organisms/forms/motion-toggle/motion-toggle.fixture.ts delete mode 100644 src/components/organisms/forms/motion-toggle/motion-toggle.fixture.tsx (limited to 'src/components/organisms/forms/motion-toggle') diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.ts b/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.ts new file mode 100644 index 0000000..f13658a --- /dev/null +++ b/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.ts @@ -0,0 +1 @@ +export const storageKey = 'reduced-motion'; diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.tsx deleted file mode 100644 index f13658a..0000000 --- a/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.tsx +++ /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 7e541db..811830b 100644 --- a/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx +++ b/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { MotionToggle } from './motion-toggle'; import { storageKey } from './motion-toggle.fixture'; 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 abae299..6952f46 100644 --- a/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx +++ b/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../../tests/utils'; import { MotionToggle } from './motion-toggle'; import { storageKey } from './motion-toggle.fixture'; @@ -8,7 +8,7 @@ describe('MotionToggle', () => { it('renders a toggle component', () => { render(); expect( - screen.getByRole('radiogroup', { + rtlScreen.getByRole('radiogroup', { name: /Animations:/i, }) ).toBeInTheDocument(); diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.tsx index a8ca7ce..c141bf0 100644 --- a/src/components/organisms/forms/motion-toggle/motion-toggle.tsx +++ b/src/components/organisms/forms/motion-toggle/motion-toggle.tsx @@ -1,8 +1,12 @@ -import { ChangeEvent, FC } from 'react'; +import { useCallback, type FC } from 'react'; import { useIntl } from 'react-intl'; import { useAttributes, useLocalStorage } from '../../../../utils/hooks'; import { Legend } from '../../../atoms'; -import { Switch, SwitchOption, SwitchProps } from '../../../molecules'; +import { + Switch, + type SwitchOption, + type SwitchProps, +} from '../../../molecules'; export type MotionToggleValue = 'on' | 'off'; @@ -37,7 +41,7 @@ export const MotionToggle: FC = ({ ); useAttributes({ element: - typeof window !== 'undefined' ? document.documentElement : undefined, + typeof window === 'undefined' ? undefined : document.documentElement, attribute: 'reduced-motion', value: `${isReduced}`, }); @@ -71,9 +75,9 @@ export const MotionToggle: FC = ({ }, ]; - const updateSetting = (e: ChangeEvent) => { + const updateSetting = useCallback(() => { setIsReduced((prev) => !prev); - }; + }, [setIsReduced]); return (