diff options
Diffstat (limited to 'src/components')
14 files changed, 45 insertions, 163 deletions
diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.ts b/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.ts deleted file mode 100644 index 04602f2..0000000 --- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.ts +++ /dev/null @@ -1 +0,0 @@ -export const storageKey = 'ackee'; diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx index 4122ed2..1b7b87b 100644 --- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx +++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx @@ -1,6 +1,5 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { AckeeToggle } from './ackee-toggle'; -import { storageKey } from './ackee-toggle.fixture'; /** * AckeeToggle - Storybook Meta @@ -41,7 +40,4 @@ const Template: ComponentStory<typeof AckeeToggle> = (args) => ( * Toggle Stories - Ackee */ export const Ackee = Template.bind({}); -Ackee.args = { - defaultValue: 'full', - storageKey, -}; +Ackee.args = {}; diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx index f7f5edf..68f8d19 100644 --- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx +++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx @@ -1,12 +1,11 @@ import { describe, expect, it } from '@jest/globals'; import { render, screen as rtlScreen } from '../../../../../tests/utils'; import { AckeeToggle } from './ackee-toggle'; -import { storageKey } from './ackee-toggle.fixture'; describe('AckeeToggle', () => { // toHaveValue received undefined. Maybe because of localStorage hook... it('renders a toggle component', () => { - render(<AckeeToggle storageKey={storageKey} defaultValue="full" />); + render(<AckeeToggle />); expect( rtlScreen.getByRole('radiogroup', { name: /Tracking:/i, diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx index a9c172b..9493095 100644 --- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx +++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx @@ -1,11 +1,7 @@ /* eslint-disable max-statements */ -import { type ChangeEvent, type FC, useState, useCallback } from 'react'; +import { type FC, useState, useCallback } from 'react'; import { useIntl } from 'react-intl'; -import { - type AckeeOptions, - useLocalStorage, - useUpdateAckeeOptions, -} from '../../../../utils/hooks'; +import { useAckee } from '../../../../utils/hooks'; import { Legend, List, ListItem } from '../../../atoms'; import { Switch, @@ -15,49 +11,22 @@ import { type TooltipProps, } from '../../../molecules'; -const validator = (value: unknown): value is AckeeOptions => - value === 'full' || value === 'partial'; - export type AckeeToggleProps = Omit< SwitchProps, - 'isInline' | 'items' | 'name' | 'onSwitch' | 'value' + 'defaultValue' | 'isInline' | 'items' | 'name' | 'onSwitch' | 'value' > & - Pick<TooltipProps, 'direction'> & { - /** - * Set additional classnames to the toggle wrapper. - */ - className?: string; - /** - * True if motion should be reduced by default. - */ - defaultValue: AckeeOptions; - /** - * The local storage key to save preference. - */ - storageKey: string; - }; + Pick<TooltipProps, 'direction'>; /** * AckeeToggle component * * Render a Toggle component to set reduce motion. */ -export const AckeeToggle: FC<AckeeToggleProps> = ({ - defaultValue, - direction, - storageKey, - ...props -}) => { +export const AckeeToggle: FC<AckeeToggleProps> = ({ direction, ...props }) => { const intl = useIntl(); - const [value, setValue] = useLocalStorage( - storageKey, - defaultValue, - validator - ); + const [tracking, toggleTracking] = useAckee(); const [isTooltipOpened, setIsTooltipOpened] = useState(false); - useUpdateAckeeOptions(value); - const ackeeLabel = intl.formatMessage({ defaultMessage: 'Tracking:', description: 'AckeeToggle: select label', @@ -95,13 +64,6 @@ export const AckeeToggle: FC<AckeeToggleProps> = ({ { id: 'ackee-partial' as const, label: partialLabel, value: 'partial' }, ] satisfies [SwitchOption, SwitchOption]; - const updateSetting = useCallback( - (e: ChangeEvent<HTMLInputElement>) => { - setValue(e.target.value === 'full' ? 'full' : 'partial'); - }, - [setValue] - ); - const closeTooltip = useCallback(() => { setIsTooltipOpened(false); }, []); @@ -116,7 +78,7 @@ export const AckeeToggle: FC<AckeeToggleProps> = ({ items={options} legend={<Legend>{ackeeLabel}</Legend>} name="ackee" - onSwitch={updateSetting} + onSwitch={toggleTracking} tooltip={ <Tooltip direction={direction} @@ -134,7 +96,7 @@ export const AckeeToggle: FC<AckeeToggleProps> = ({ </List> </Tooltip> } - value={value} + value={tracking} /> ); }; diff --git a/src/components/organisms/modals/settings-modal.stories.tsx b/src/components/organisms/modals/settings-modal.stories.tsx index 7af0d60..57ce00f 100644 --- a/src/components/organisms/modals/settings-modal.stories.tsx +++ b/src/components/organisms/modals/settings-modal.stories.tsx @@ -1,6 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { storageKey as ackeeStorageKey } from '../../organisms/forms/ackee-toggle/ackee-toggle.fixture'; -import { storageKey as motionStorageKey } from '../../organisms/forms/motion-toggle/motion-toggle.fixture'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { storageKey as motionStorageKey } from '../forms/motion-toggle/motion-toggle.fixture'; import { SettingsModal } from './settings-modal'; /** @@ -10,16 +9,6 @@ export default { title: 'Organisms/Modals', component: SettingsModal, argTypes: { - ackeeStorageKey: { - control: { - type: 'text', - }, - description: 'A local storage key for Ackee.', - type: { - name: 'string', - required: true, - }, - }, className: { control: { type: 'text', @@ -71,6 +60,5 @@ const Template: ComponentStory<typeof SettingsModal> = (args) => ( */ export const Settings = Template.bind({}); Settings.args = { - ackeeStorageKey, motionStorageKey, }; diff --git a/src/components/organisms/modals/settings-modal.test.tsx b/src/components/organisms/modals/settings-modal.test.tsx index bb0cdf2..26d046a 100644 --- a/src/components/organisms/modals/settings-modal.test.tsx +++ b/src/components/organisms/modals/settings-modal.test.tsx @@ -1,41 +1,30 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; -import { storageKey as ackeeStorageKey } from '../../organisms/forms/ackee-toggle/ackee-toggle.fixture'; -import { storageKey as motionStorageKey } from '../../organisms/forms/motion-toggle/motion-toggle.fixture'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; +import { storageKey as motionStorageKey } from '../forms/motion-toggle/motion-toggle.fixture'; import { SettingsModal } from './settings-modal'; describe('SettingsModal', () => { it('renders the modal heading', () => { - render( - <SettingsModal - ackeeStorageKey={ackeeStorageKey} - motionStorageKey={motionStorageKey} - /> - ); - expect(screen.getByText(/Settings/i)).toBeInTheDocument(); + render(<SettingsModal motionStorageKey={motionStorageKey} />); + expect(rtlScreen.getByText(/Settings/i)).toBeInTheDocument(); }); it('renders a settings form', () => { - render( - <SettingsModal - ackeeStorageKey={ackeeStorageKey} - motionStorageKey={motionStorageKey} - /> - ); + render(<SettingsModal motionStorageKey={motionStorageKey} />); expect( - screen.getByRole('form', { name: /^Settings form/i }) + rtlScreen.getByRole('form', { name: /^Settings form/i }) ).toBeInTheDocument(); expect( - screen.getByRole('radiogroup', { name: /^Theme:/i }) + rtlScreen.getByRole('radiogroup', { name: /^Theme:/i }) ).toBeInTheDocument(); expect( - screen.getByRole('radiogroup', { name: /^Code blocks:/i }) + rtlScreen.getByRole('radiogroup', { name: /^Code blocks:/i }) ).toBeInTheDocument(); expect( - screen.getByRole('radiogroup', { name: /^Animations:/i }) + rtlScreen.getByRole('radiogroup', { name: /^Animations:/i }) ).toBeInTheDocument(); expect( - screen.getByRole('radiogroup', { name: /^Tracking:/i }) + rtlScreen.getByRole('radiogroup', { name: /^Tracking:/i }) ).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx index 5a53bbd..f62312b 100644 --- a/src/components/organisms/modals/settings-modal.tsx +++ b/src/components/organisms/modals/settings-modal.tsx @@ -3,7 +3,6 @@ import { useIntl } from 'react-intl'; import { Form, Heading, Icon, Modal, type ModalProps } from '../../atoms'; import { AckeeToggle, - type AckeeToggleProps, MotionToggle, type MotionToggleProps, PrismThemeToggle, @@ -13,10 +12,6 @@ import styles from './settings-modal.module.scss'; export type SettingsModalProps = Pick<ModalProps, 'className'> & { /** - * The local storage key for Ackee settings. - */ - ackeeStorageKey: AckeeToggleProps['storageKey']; - /** * The local storage key for Reduce motion settings. */ motionStorageKey: MotionToggleProps['storageKey']; @@ -29,7 +24,6 @@ export type SettingsModalProps = Pick<ModalProps, 'className'> & { */ export const SettingsModal: FC<SettingsModalProps> = ({ className = '', - ackeeStorageKey, motionStorageKey, }) => { const intl = useIntl(); @@ -70,12 +64,7 @@ export const SettingsModal: FC<SettingsModalProps> = ({ defaultValue="on" storageKey={motionStorageKey} /> - <AckeeToggle - className={styles.item} - direction="upwards" - defaultValue="full" - storageKey={ackeeStorageKey} - /> + <AckeeToggle className={styles.item} direction="upwards" /> </Form> </Modal> ); diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx index bea0d9e..66b4e0f 100644 --- a/src/components/organisms/toolbar/settings.stories.tsx +++ b/src/components/organisms/toolbar/settings.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useState } from 'react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useCallback, useState } from 'react'; import { Settings } from './settings'; /** @@ -9,20 +9,9 @@ export default { title: 'Organisms/Toolbar/Settings', component: Settings, args: { - ackeeStorageKey: 'ackee-tracking', motionStorageKey: 'reduced-motion', }, argTypes: { - ackeeStorageKey: { - control: { - type: 'text', - }, - description: 'Set Ackee settings local storage key.', - type: { - name: 'string', - required: true, - }, - }, className: { control: { type: 'text', @@ -92,15 +81,11 @@ const Template: ComponentStory<typeof Settings> = ({ }) => { const [isOpen, setIsOpen] = useState<boolean>(isActive); - return ( - <Settings - isActive={isOpen} - setIsActive={() => { - setIsOpen(!isOpen); - }} - {...args} - /> - ); + const toggle = useCallback(() => { + setIsOpen((prevState) => !prevState); + }, []); + + return <Settings isActive={isOpen} setIsActive={toggle} {...args} />; }; /** diff --git a/src/components/organisms/toolbar/settings.test.tsx b/src/components/organisms/toolbar/settings.test.tsx index 9dab407..66fa6a6 100644 --- a/src/components/organisms/toolbar/settings.test.tsx +++ b/src/components/organisms/toolbar/settings.test.tsx @@ -1,33 +1,35 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; import { Settings } from './settings'; +const doNothing = () => { + // do nothing +}; + describe('Settings', () => { it('renders a button to open settings modal', () => { render( <Settings - ackeeStorageKey="ackee-tracking" motionStorageKey="reduced-motion" isActive={false} - setIsActive={() => null} + setIsActive={doNothing} /> ); expect( - screen.getByRole('checkbox', { name: 'Open settings' }) + rtlScreen.getByRole('checkbox', { name: 'Open settings' }) ).toBeInTheDocument(); }); it('renders a button to close settings modal', () => { render( <Settings - ackeeStorageKey="ackee-tracking" motionStorageKey="reduced-motion" isActive={true} - setIsActive={() => null} + setIsActive={doNothing} /> ); expect( - screen.getByRole('checkbox', { name: 'Close settings' }) + rtlScreen.getByRole('checkbox', { name: 'Close settings' }) ).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx index b7625aa..124dd42 100644 --- a/src/components/organisms/toolbar/settings.tsx +++ b/src/components/organisms/toolbar/settings.tsx @@ -20,13 +20,7 @@ const SettingsWithRef: ForwardRefRenderFunction< HTMLDivElement, SettingsProps > = ( - { - ackeeStorageKey, - className = '', - isActive = false, - motionStorageKey, - setIsActive, - }, + { className = '', isActive = false, motionStorageKey, setIsActive }, ref ) => { const intl = useIntl(); @@ -61,7 +55,6 @@ const SettingsWithRef: ForwardRefRenderFunction< label={label} /> <SettingsModal - ackeeStorageKey={ackeeStorageKey} className={`${styles.modal} ${className}`} motionStorageKey={motionStorageKey} /> diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx index 7bf545b..22bead9 100644 --- a/src/components/organisms/toolbar/toolbar.stories.tsx +++ b/src/components/organisms/toolbar/toolbar.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { Toolbar as ToolbarComponent } from './toolbar'; /** @@ -8,21 +8,10 @@ export default { title: 'Organisms/Toolbar', component: ToolbarComponent, args: { - ackeeStorageKey: 'ackee-tracking', motionStorageKey: 'reduced-motion', searchPage: '#', }, argTypes: { - ackeeStorageKey: { - control: { - type: 'text', - }, - description: 'Set Ackee settings local storage key.', - type: { - name: 'string', - required: true, - }, - }, className: { control: { type: 'text', diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx index 8fb06b0..e6b1022 100644 --- a/src/components/organisms/toolbar/toolbar.test.tsx +++ b/src/components/organisms/toolbar/toolbar.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 { Toolbar } from './toolbar'; const nav = [ @@ -12,13 +12,8 @@ const nav = [ describe('Toolbar', () => { it('renders a navigation menu', () => { render( - <Toolbar - ackeeStorageKey="ackee-tracking" - motionStorageKey="reduced-motion" - nav={nav} - searchPage="#" - /> + <Toolbar motionStorageKey="reduced-motion" nav={nav} searchPage="#" /> ); - expect(screen.getByRole('navigation')).toBeInTheDocument(); + expect(rtlScreen.getByRole('navigation')).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx index 999a29a..be46636 100644 --- a/src/components/organisms/toolbar/toolbar.tsx +++ b/src/components/organisms/toolbar/toolbar.tsx @@ -7,7 +7,7 @@ import { Settings, type SettingsProps } from './settings'; import styles from './toolbar.module.scss'; export type ToolbarProps = Pick<SearchProps, 'searchPage'> & - Pick<SettingsProps, 'ackeeStorageKey' | 'motionStorageKey'> & { + Pick<SettingsProps, 'motionStorageKey'> & { /** * Set additional classnames to the toolbar wrapper. */ @@ -24,7 +24,6 @@ export type ToolbarProps = Pick<SearchProps, 'searchPage'> & * Render the website toolbar. */ export const Toolbar: FC<ToolbarProps> = ({ - ackeeStorageKey, className = '', motionStorageKey, nav, @@ -76,7 +75,6 @@ export const Toolbar: FC<ToolbarProps> = ({ setIsActive={toggleSearch} /> <Settings - ackeeStorageKey={ackeeStorageKey} className={`${styles.modal} ${styles['modal--settings']}`} isActive={isSettingsOpened} motionStorageKey={motionStorageKey} diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx index bf9629c..fd3a928 100644 --- a/src/components/templates/layout/layout.tsx +++ b/src/components/templates/layout/layout.tsx @@ -312,8 +312,6 @@ export const Layout: FC<LayoutProps> = ({ url="/" /> <Toolbar - // eslint-disable-next-line react/jsx-no-literals -- Storage key allowed - ackeeStorageKey="ackee-tracking" className={styles.toolbar} // eslint-disable-next-line react/jsx-no-literals -- Storage key allowed motionStorageKey="reduced-motion" |