diff options
36 files changed, 487 insertions, 142 deletions
diff --git a/src/components/molecules/forms/ackee-select.stories.tsx b/src/components/molecules/forms/ackee-select.stories.tsx index 4e6adf1..6b42b71 100644 --- a/src/components/molecules/forms/ackee-select.stories.tsx +++ b/src/components/molecules/forms/ackee-select.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import AckeeSelect from './ackee-select'; /** @@ -33,6 +32,16 @@ export default { required: false, }, }, + storageKey: { + control: { + type: 'text', + }, + description: 'Set Ackee settings local storage key.', + type: { + name: 'string', + required: true, + }, + }, tooltipClassName: { control: { type: 'text', @@ -47,13 +56,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof AckeeSelect>; const Template: ComponentStory<typeof AckeeSelect> = (args) => ( diff --git a/src/components/molecules/forms/ackee-select.test.tsx b/src/components/molecules/forms/ackee-select.test.tsx index ec27922..0089c06 100644 --- a/src/components/molecules/forms/ackee-select.test.tsx +++ b/src/components/molecules/forms/ackee-select.test.tsx @@ -4,13 +4,13 @@ import AckeeSelect from './ackee-select'; describe('Select', () => { it('should correctly set default option', () => { - render(<AckeeSelect initialValue="full" />); + render(<AckeeSelect storageKey="ackee-tracking" initialValue="full" />); expect(screen.getByRole('combobox')).toHaveValue('full'); expect(screen.queryByRole('combobox')).not.toHaveValue('partial'); }); it('should correctly change value when user choose another option', async () => { - render(<AckeeSelect initialValue="full" />); + render(<AckeeSelect storageKey="ackee-tracking" initialValue="full" />); await act(async () => { await user.selectOptions( diff --git a/src/components/molecules/forms/ackee-select.tsx b/src/components/molecules/forms/ackee-select.tsx index 101e5b5..34850fb 100644 --- a/src/components/molecules/forms/ackee-select.tsx +++ b/src/components/molecules/forms/ackee-select.tsx @@ -1,12 +1,14 @@ -import { SelectOptions } from '@components/atoms/forms/select'; -import { Dispatch, FC, SetStateAction, useState } from 'react'; +import { type SelectOptions } from '@components/atoms/forms/select'; +import useLocalStorage from '@utils/hooks/use-local-storage'; +import useUpdateAckeeOptions, { + type AckeeOptions, +} from '@utils/hooks/use-update-ackee-options'; +import { Dispatch, FC, SetStateAction } from 'react'; import { useIntl } from 'react-intl'; import SelectWithTooltip, { type SelectWithTooltipProps, } from './select-with-tooltip'; -export type AckeeOptions = 'full' | 'partial'; - export type AckeeSelectProps = Pick< SelectWithTooltipProps, 'labelClassName' | 'tooltipClassName' @@ -15,6 +17,10 @@ export type AckeeSelectProps = Pick< * A default value for Ackee settings. */ initialValue: AckeeOptions; + /** + * The local storage key to save preference. + */ + storageKey: string; }; /** @@ -22,9 +28,17 @@ export type AckeeSelectProps = Pick< * * Render a select to set Ackee settings. */ -const AckeeSelect: FC<AckeeSelectProps> = ({ initialValue, ...props }) => { +const AckeeSelect: FC<AckeeSelectProps> = ({ + initialValue, + storageKey, + ...props +}) => { const intl = useIntl(); - const [value, setValue] = useState<AckeeOptions>(initialValue); + const { value, setValue } = useLocalStorage<AckeeOptions>( + storageKey, + initialValue + ); + useUpdateAckeeOptions(value); const ackeeLabel = intl.formatMessage({ defaultMessage: 'Tracking:', diff --git a/src/components/molecules/forms/motion-toggle.stories.tsx b/src/components/molecules/forms/motion-toggle.stories.tsx index dcfc68d..60430d5 100644 --- a/src/components/molecules/forms/motion-toggle.stories.tsx +++ b/src/components/molecules/forms/motion-toggle.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import MotionToggleComponent from './motion-toggle'; /** @@ -22,6 +21,16 @@ export default { required: false, }, }, + storageKey: { + control: { + type: 'text', + }, + description: 'Set local storage key.', + type: { + name: 'string', + required: true, + }, + }, value: { control: { type: null, @@ -33,13 +42,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof MotionToggleComponent>; const Template: ComponentStory<typeof MotionToggleComponent> = (args) => ( diff --git a/src/components/molecules/forms/motion-toggle.test.tsx b/src/components/molecules/forms/motion-toggle.test.tsx index 77bc17c..4fd6b31 100644 --- a/src/components/molecules/forms/motion-toggle.test.tsx +++ b/src/components/molecules/forms/motion-toggle.test.tsx @@ -3,7 +3,7 @@ import MotionToggle from './motion-toggle'; describe('MotionToggle', () => { it('renders a checked toggle (deactivate animations choice)', () => { - render(<MotionToggle value={true} />); + render(<MotionToggle storageKey="reduced-motion" value={true} />); expect( screen.getByRole('checkbox', { name: `Animations: On Off`, diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx index 24b54ae..e3bb11a 100644 --- a/src/components/molecules/forms/motion-toggle.tsx +++ b/src/components/molecules/forms/motion-toggle.tsx @@ -2,19 +2,41 @@ import Toggle, { type ToggleChoices, type ToggleProps, } from '@components/molecules/forms/toggle'; -import { FC, useState } from 'react'; +import useAttributes from '@utils/hooks/use-attributes'; +import useLocalStorage from '@utils/hooks/use-local-storage'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; -export type MotionToggleProps = Pick<ToggleProps, 'labelClassName' | 'value'>; +export type MotionToggleProps = Pick< + ToggleProps, + 'labelClassName' | 'value' +> & { + /** + * The local storage key to save preference. + */ + storageKey: string; +}; /** * MotionToggle component * * Render a Toggle component to set reduce motion. */ -const MotionToggle: FC<MotionToggleProps> = ({ value, ...props }) => { +const MotionToggle: FC<MotionToggleProps> = ({ + storageKey, + value, + ...props +}) => { const intl = useIntl(); - const [isDeactivated, setIsDeactivated] = useState<boolean>(value); + const { value: isReduced, setValue: setIsReduced } = useLocalStorage<boolean>( + storageKey, + value + ); + useAttributes({ + attribute: 'reducedMotion', + value: `${isReduced}`, + }); + const reduceMotionLabel = intl.formatMessage({ defaultMessage: 'Animations:', description: 'MotionToggle: reduce motion label', @@ -42,8 +64,8 @@ const MotionToggle: FC<MotionToggleProps> = ({ value, ...props }) => { label={reduceMotionLabel} labelSize="medium" choices={reduceMotionChoices} - value={isDeactivated} - setValue={setIsDeactivated} + value={isReduced} + setValue={setIsReduced} {...props} /> ); diff --git a/src/components/molecules/forms/prism-theme-toggle.stories.tsx b/src/components/molecules/forms/prism-theme-toggle.stories.tsx index 513ebfc..ef4ed6e 100644 --- a/src/components/molecules/forms/prism-theme-toggle.stories.tsx +++ b/src/components/molecules/forms/prism-theme-toggle.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import PrismThemeToggle from './prism-theme-toggle'; /** @@ -22,24 +21,7 @@ export default { required: false, }, }, - value: { - control: { - type: null, - }, - description: 'The prism theme value.', - type: { - name: 'boolean', - required: true, - }, - }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof PrismThemeToggle>; const Template: ComponentStory<typeof PrismThemeToggle> = (args) => ( @@ -50,6 +32,3 @@ const Template: ComponentStory<typeof PrismThemeToggle> = (args) => ( * Toggle Stories - Prism theme */ export const PrismTheme = Template.bind({}); -PrismTheme.args = { - value: false, -}; diff --git a/src/components/molecules/forms/prism-theme-toggle.test.tsx b/src/components/molecules/forms/prism-theme-toggle.test.tsx index 0dceb92..d831b82 100644 --- a/src/components/molecules/forms/prism-theme-toggle.test.tsx +++ b/src/components/molecules/forms/prism-theme-toggle.test.tsx @@ -3,7 +3,7 @@ import PrismThemeToggle from './prism-theme-toggle'; describe('PrismThemeToggle', () => { it('renders a checked toggle (dark theme choice)', () => { - render(<PrismThemeToggle value={true} />); + render(<PrismThemeToggle />); expect( screen.getByRole('checkbox', { name: `Code blocks: Light theme Dark theme`, diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx index 0b9c447..3320722 100644 --- a/src/components/molecules/forms/prism-theme-toggle.tsx +++ b/src/components/molecules/forms/prism-theme-toggle.tsx @@ -4,22 +4,38 @@ import Toggle, { type ToggleChoices, type ToggleProps, } from '@components/molecules/forms/toggle'; -import { FC, useState } from 'react'; +import { usePrismTheme } from '@utils/providers/prism-theme'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; -export type PrismThemeToggleProps = Pick< - ToggleProps, - 'labelClassName' | 'value' ->; +export type PrismThemeToggleProps = Pick<ToggleProps, 'labelClassName'>; /** * PrismThemeToggle component * * Render a Toggle component to set code blocks theme. */ -const PrismThemeToggle: FC<PrismThemeToggleProps> = ({ value, ...props }) => { +const PrismThemeToggle: FC<PrismThemeToggleProps> = ({ ...props }) => { const intl = useIntl(); - const [isDarkTheme, setIsDarkTheme] = useState<boolean>(value); + const { theme, setTheme, resolvedTheme } = usePrismTheme(); + + /** + * Check if the resolved or chosen theme is dark theme. + * + * @returns {boolean} True if it is dark theme. + */ + const isDarkTheme = (): boolean => { + if (theme === 'system') return resolvedTheme === 'dark'; + return theme === 'dark'; + }; + + /** + * Update the theme. + */ + const updateTheme = () => { + setTheme(isDarkTheme() ? 'light' : 'dark'); + }; + const themeLabel = intl.formatMessage({ defaultMessage: 'Code blocks:', description: 'PrismThemeToggle: theme label', @@ -47,8 +63,8 @@ const PrismThemeToggle: FC<PrismThemeToggleProps> = ({ value, ...props }) => { label={themeLabel} labelSize="medium" choices={themeChoices} - value={isDarkTheme} - setValue={setIsDarkTheme} + value={isDarkTheme()} + setValue={updateTheme} {...props} /> ); diff --git a/src/components/molecules/forms/theme-toggle.stories.tsx b/src/components/molecules/forms/theme-toggle.stories.tsx index 05d94b9..5ebf5a2 100644 --- a/src/components/molecules/forms/theme-toggle.stories.tsx +++ b/src/components/molecules/forms/theme-toggle.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import ThemeToggle from './theme-toggle'; /** @@ -22,24 +21,7 @@ export default { required: false, }, }, - value: { - control: { - type: null, - }, - description: 'The theme value.', - type: { - name: 'boolean', - required: true, - }, - }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof ThemeToggle>; const Template: ComponentStory<typeof ThemeToggle> = (args) => ( @@ -50,6 +32,3 @@ const Template: ComponentStory<typeof ThemeToggle> = (args) => ( * Toggle Stories - Theme */ export const Theme = Template.bind({}); -Theme.args = { - value: false, -}; diff --git a/src/components/molecules/forms/theme-toggle.test.tsx b/src/components/molecules/forms/theme-toggle.test.tsx index 5cd3209..89b4f6f 100644 --- a/src/components/molecules/forms/theme-toggle.test.tsx +++ b/src/components/molecules/forms/theme-toggle.test.tsx @@ -3,7 +3,7 @@ import ThemeToggle from './theme-toggle'; describe('ThemeToggle', () => { it('renders a checked toggle (dark theme choice)', () => { - render(<ThemeToggle value={true} />); + render(<ThemeToggle />); expect( screen.getByRole('checkbox', { name: `Theme: Light theme Dark theme`, diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx index 10c6c47..61ee4c6 100644 --- a/src/components/molecules/forms/theme-toggle.tsx +++ b/src/components/molecules/forms/theme-toggle.tsx @@ -4,19 +4,29 @@ import Toggle, { type ToggleChoices, type ToggleProps, } from '@components/molecules/forms/toggle'; -import { FC, useState } from 'react'; +import { useTheme } from 'next-themes'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; -export type ThemeToggleProps = Pick<ToggleProps, 'labelClassName' | 'value'>; +export type ThemeToggleProps = Pick<ToggleProps, 'labelClassName'>; /** * ThemeToggle component * * Render a Toggle component to set theme. */ -const ThemeToggle: FC<ThemeToggleProps> = ({ value, ...props }) => { +const ThemeToggle: FC<ThemeToggleProps> = ({ ...props }) => { const intl = useIntl(); - const [isDarkTheme, setIsDarkTheme] = useState<boolean>(value); + const { resolvedTheme, setTheme } = useTheme(); + const isDarkTheme = resolvedTheme === 'dark'; + + /** + * Update the theme. + */ + const updateTheme = () => { + setTheme(isDarkTheme ? 'light' : 'dark'); + }; + const themeLabel = intl.formatMessage({ defaultMessage: 'Theme:', description: 'ThemeToggle: theme label', @@ -45,7 +55,7 @@ const ThemeToggle: FC<ThemeToggleProps> = ({ value, ...props }) => { labelSize="medium" choices={themeChoices} value={isDarkTheme} - setValue={setIsDarkTheme} + setValue={updateTheme} {...props} /> ); diff --git a/src/components/organisms/forms/settings-form.test.tsx b/src/components/organisms/forms/settings-form.test.tsx index beb65ec..43d546e 100644 --- a/src/components/organisms/forms/settings-form.test.tsx +++ b/src/components/organisms/forms/settings-form.test.tsx @@ -1,37 +1,65 @@ import { render, screen } from '@test-utils'; import SettingsForm from './settings-form'; +const ackeeStorageKey = 'ackee-tracking'; +const motionStorageKey = 'reduce-motion'; + describe('SettingsForm', () => { it('renders a form', () => { - render(<SettingsForm />); + render( + <SettingsForm + ackeeStorageKey={ackeeStorageKey} + motionStorageKey={motionStorageKey} + /> + ); expect( screen.getByRole('form', { name: /^Settings form/i }) ).toBeInTheDocument(); }); it('renders a theme toggle setting', () => { - render(<SettingsForm />); + render( + <SettingsForm + ackeeStorageKey={ackeeStorageKey} + motionStorageKey={motionStorageKey} + /> + ); expect( screen.getByRole('checkbox', { name: /^Theme:/i }) ).toBeInTheDocument(); }); it('renders a code blocks toggle setting', () => { - render(<SettingsForm />); + render( + <SettingsForm + ackeeStorageKey={ackeeStorageKey} + motionStorageKey={motionStorageKey} + /> + ); expect( screen.getByRole('checkbox', { name: /^Code blocks:/i }) ).toBeInTheDocument(); }); it('renders a motion setting', () => { - render(<SettingsForm />); + render( + <SettingsForm + ackeeStorageKey={ackeeStorageKey} + motionStorageKey={motionStorageKey} + /> + ); expect( screen.getByRole('checkbox', { name: /^Animations:/i }) ).toBeInTheDocument(); }); it('renders a Ackee setting', () => { - render(<SettingsForm />); + render( + <SettingsForm + ackeeStorageKey={ackeeStorageKey} + motionStorageKey={motionStorageKey} + /> + ); expect( screen.getByRole('combobox', { name: /^Tracking:/i }) ).toBeInTheDocument(); diff --git a/src/components/organisms/forms/settings-form.tsx b/src/components/organisms/forms/settings-form.tsx index 0a34601..c897fa5 100644 --- a/src/components/organisms/forms/settings-form.tsx +++ b/src/components/organisms/forms/settings-form.tsx @@ -2,16 +2,31 @@ import Form from '@components/atoms/forms/form'; import AckeeSelect, { type AckeeSelectProps, } from '@components/molecules/forms/ackee-select'; -import MotionToggle from '@components/molecules/forms/motion-toggle'; +import MotionToggle, { + MotionToggleProps, +} from '@components/molecules/forms/motion-toggle'; import PrismThemeToggle from '@components/molecules/forms/prism-theme-toggle'; import ThemeToggle from '@components/molecules/forms/theme-toggle'; import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './settings-form.module.scss'; -export type SettingsFormProps = Pick<AckeeSelectProps, 'tooltipClassName'>; +export type SettingsFormProps = Pick<AckeeSelectProps, 'tooltipClassName'> & { + /** + * The local storage key for Ackee settings. + */ + ackeeStorageKey: AckeeSelectProps['storageKey']; + /** + * The local storage key for Reduce motion settings. + */ + motionStorageKey: MotionToggleProps['storageKey']; +}; -const SettingsForm: FC<SettingsFormProps> = ({ tooltipClassName }) => { +const SettingsForm: FC<SettingsFormProps> = ({ + ackeeStorageKey, + motionStorageKey, + tooltipClassName, +}) => { const intl = useIntl(); const ariaLabel = intl.formatMessage({ defaultMessage: 'Settings form', @@ -21,13 +36,18 @@ const SettingsForm: FC<SettingsFormProps> = ({ tooltipClassName }) => { return ( <Form aria-label={ariaLabel} onSubmit={() => null}> - <ThemeToggle labelClassName={styles.label} value={false} /> - <PrismThemeToggle labelClassName={styles.label} value={false} /> - <MotionToggle labelClassName={styles.label} value={false} /> + <ThemeToggle labelClassName={styles.label} /> + <PrismThemeToggle labelClassName={styles.label} /> + <MotionToggle + labelClassName={styles.label} + storageKey={motionStorageKey} + value={false} + /> <AckeeSelect initialValue="full" labelClassName={styles.label} tooltipClassName={tooltipClassName} + storageKey={ackeeStorageKey} /> </Form> ); diff --git a/src/components/organisms/layout/header.stories.tsx b/src/components/organisms/layout/header.stories.tsx index 98d6377..3ceb337 100644 --- a/src/components/organisms/layout/header.stories.tsx +++ b/src/components/organisms/layout/header.stories.tsx @@ -8,11 +8,23 @@ export default { title: 'Organisms/Layout', component: HeaderComponent, args: { + ackeeStorageKey: 'ackee-tracking', isHome: false, + motionStorageKey: 'reduced-motion', searchPage: '#', withLink: false, }, argTypes: { + ackeeStorageKey: { + control: { + type: 'text', + }, + description: 'Set Ackee settings local storage key.', + type: { + name: 'string', + required: true, + }, + }, baseline: { control: { type: 'text', @@ -52,6 +64,16 @@ export default { required: false, }, }, + motionStorageKey: { + control: { + type: 'text', + }, + description: 'Set Reduced motion settings local storage key.', + type: { + name: 'string', + required: true, + }, + }, nav: { description: 'The main navigation items.', type: { diff --git a/src/components/organisms/layout/header.test.tsx b/src/components/organisms/layout/header.test.tsx index a9896f8..414d96f 100644 --- a/src/components/organisms/layout/header.test.tsx +++ b/src/components/organisms/layout/header.test.tsx @@ -16,11 +16,13 @@ describe('Header', () => { it('renders the website title', () => { render( <Header + ackeeStorageKey="ackee-tracking" + isHome={true} + motionStorageKey="reduced-motion" + nav={nav} + photo={photo} searchPage="#" title={title} - photo={photo} - nav={nav} - isHome={true} /> ); expect( @@ -29,7 +31,16 @@ describe('Header', () => { }); it('renders the main nav', () => { - render(<Header searchPage="#" title={title} photo={photo} nav={nav} />); + render( + <Header + ackeeStorageKey="ackee-tracking" + motionStorageKey="reduced-motion" + nav={nav} + photo={photo} + searchPage="#" + title={title} + /> + ); expect(screen.getByRole('navigation')).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/layout/header.tsx b/src/components/organisms/layout/header.tsx index 18ebb31..f6212c3 100644 --- a/src/components/organisms/layout/header.tsx +++ b/src/components/organisms/layout/header.tsx @@ -6,7 +6,10 @@ import Toolbar, { type ToolbarProps } from '../toolbar/toolbar'; import styles from './header.module.scss'; export type HeaderProps = BrandingProps & - Pick<ToolbarProps, 'nav' | 'searchPage'> & { + Pick< + ToolbarProps, + 'ackeeStorageKey' | 'motionStorageKey' | 'nav' | 'searchPage' + > & { /** * Set additional classnames to the header element. */ @@ -18,12 +21,25 @@ export type HeaderProps = BrandingProps & * * Render the website header. */ -const Header: FC<HeaderProps> = ({ className, nav, searchPage, ...props }) => { +const Header: FC<HeaderProps> = ({ + ackeeStorageKey, + className, + motionStorageKey, + nav, + searchPage, + ...props +}) => { return ( <header className={`${styles.wrapper} ${className}`}> <div className={styles.body}> <Branding {...props} /> - <Toolbar nav={nav} searchPage={searchPage} className={styles.toolbar} /> + <Toolbar + ackeeStorageKey={ackeeStorageKey} + className={styles.toolbar} + motionStorageKey={motionStorageKey} + nav={nav} + searchPage={searchPage} + /> </div> </header> ); diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx index e92bf1b..c731048 100644 --- a/src/components/organisms/modals/search-modal.tsx +++ b/src/components/organisms/modals/search-modal.tsx @@ -10,6 +10,7 @@ const DynamicSearchForm = dynamic( () => import('@components/organisms/forms/search-form'), { loading: () => <Spinner />, + ssr: false, } ); diff --git a/src/components/organisms/modals/settings-modal.test.tsx b/src/components/organisms/modals/settings-modal.test.tsx index acbf7d1..d6ed989 100644 --- a/src/components/organisms/modals/settings-modal.test.tsx +++ b/src/components/organisms/modals/settings-modal.test.tsx @@ -3,7 +3,12 @@ import SettingsModal from './settings-modal'; describe('SettingsModal', () => { it('renders a fake heading', () => { - render(<SettingsModal />); + render( + <SettingsModal + ackeeStorageKey="ackee-tracking" + motionStorageKey="reduce-motion" + /> + ); expect(screen.getByText(/Settings/i)).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx index e724076..5d14836 100644 --- a/src/components/organisms/modals/settings-modal.tsx +++ b/src/components/organisms/modals/settings-modal.tsx @@ -10,11 +10,15 @@ const DynamicSettingsForm = dynamic( () => import('@components/organisms/forms/settings-form'), { loading: () => <Spinner />, + ssr: false, } ); export type SettingsModalProps = Pick<ModalProps, 'className'> & - Pick<SettingsFormProps, 'tooltipClassName'>; + Pick< + SettingsFormProps, + 'ackeeStorageKey' | 'motionStorageKey' | 'tooltipClassName' + >; /** * SettingsModal component diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx index aab4b9e..9d04932 100644 --- a/src/components/organisms/toolbar/settings.stories.tsx +++ b/src/components/organisms/toolbar/settings.stories.tsx @@ -8,7 +8,21 @@ import Settings from './settings'; 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', @@ -32,6 +46,16 @@ export default { required: true, }, }, + motionStorageKey: { + control: { + type: 'text', + }, + description: 'Set Reduced motion settings local storage key.', + type: { + name: 'string', + required: true, + }, + }, setIsActive: { control: { type: null, diff --git a/src/components/organisms/toolbar/settings.test.tsx b/src/components/organisms/toolbar/settings.test.tsx index 96a32c9..7ccb234 100644 --- a/src/components/organisms/toolbar/settings.test.tsx +++ b/src/components/organisms/toolbar/settings.test.tsx @@ -3,14 +3,28 @@ import Settings from './settings'; describe('Settings', () => { it('renders a button to open settings modal', () => { - render(<Settings isActive={false} setIsActive={() => null} />); + render( + <Settings + ackeeStorageKey="ackee-tracking" + motionStorageKey="reduced-motion" + isActive={false} + setIsActive={() => null} + /> + ); expect( screen.getByRole('checkbox', { name: 'Open settings' }) ).toBeInTheDocument(); }); it('renders a button to close settings modal', () => { - render(<Settings isActive={true} setIsActive={() => null} />); + render( + <Settings + ackeeStorageKey="ackee-tracking" + motionStorageKey="reduced-motion" + isActive={true} + setIsActive={() => null} + /> + ); expect( screen.getByRole('checkbox', { name: 'Close settings' }) ).toBeInTheDocument(); diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx index 43d3190..9985ba0 100644 --- a/src/components/organisms/toolbar/settings.tsx +++ b/src/components/organisms/toolbar/settings.tsx @@ -1,7 +1,7 @@ import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox'; import Label from '@components/atoms/forms/label'; import Cog from '@components/atoms/icons/cog'; -import { FC, forwardRef, ForwardRefRenderFunction } from 'react'; +import { forwardRef, ForwardRefRenderFunction } from 'react'; import { useIntl } from 'react-intl'; import SettingsModal, { type SettingsModalProps, @@ -9,7 +9,10 @@ import SettingsModal, { import settingsStyles from './settings.module.scss'; import sharedStyles from './toolbar-items.module.scss'; -export type SettingsProps = { +export type SettingsProps = Pick< + SettingsModalProps, + 'ackeeStorageKey' | 'motionStorageKey' | 'tooltipClassName' +> & { /** * Set additional classnames to the modal wrapper. */ @@ -22,14 +25,17 @@ export type SettingsProps = { * A callback function to handle button state. */ setIsActive: CheckboxProps['setValue']; - /** - * Set additional classnames to the tooltip wrapper. - */ - tooltipClassName?: SettingsModalProps['tooltipClassName']; }; const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = ( - { className = '', isActive, setIsActive, tooltipClassName = '' }, + { + ackeeStorageKey, + className = '', + isActive, + motionStorageKey, + setIsActive, + tooltipClassName = '', + }, ref ) => { const intl = useIntl(); @@ -62,7 +68,9 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = ( <Cog /> </Label> <SettingsModal + ackeeStorageKey={ackeeStorageKey} className={`${sharedStyles.modal} ${settingsStyles.modal} ${className}`} + motionStorageKey={motionStorageKey} tooltipClassName={tooltipClassName} /> </div> diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss index c970b71..20abe01 100644 --- a/src/components/organisms/toolbar/toolbar-items.module.scss +++ b/src/components/organisms/toolbar/toolbar-items.module.scss @@ -22,7 +22,7 @@ .modal { position: absolute; top: var(--toolbar-size, calc(var(--btn-size) + var(--spacing-2xs))); - transition: all 0.8s ease-in-out 0s; + transition: all 0.8s ease-in-out 0s, background 0s; @include mix.media("screen") { @include mix.dimensions(null, "sm") { diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx index 477cb55..1f07e79 100644 --- a/src/components/organisms/toolbar/toolbar.stories.tsx +++ b/src/components/organisms/toolbar/toolbar.stories.tsx @@ -8,9 +8,21 @@ 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', @@ -24,6 +36,16 @@ export default { required: false, }, }, + motionStorageKey: { + control: { + type: 'text', + }, + description: 'Set Reduced motion settings local storage key.', + type: { + name: 'string', + required: true, + }, + }, nav: { description: 'The main nav items.', type: { diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx index 05e84ff..72965e8 100644 --- a/src/components/organisms/toolbar/toolbar.test.tsx +++ b/src/components/organisms/toolbar/toolbar.test.tsx @@ -10,7 +10,14 @@ const nav = [ describe('Toolbar', () => { it('renders a navigation menu', () => { - render(<Toolbar nav={nav} searchPage="#" />); + render( + <Toolbar + ackeeStorageKey="ackee-tracking" + motionStorageKey="reduced-motion" + nav={nav} + searchPage="#" + /> + ); expect(screen.getByRole('navigation')).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx index e4188fe..e196c09 100644 --- a/src/components/organisms/toolbar/toolbar.tsx +++ b/src/components/organisms/toolbar/toolbar.tsx @@ -2,26 +2,33 @@ import useClickOutside from '@utils/hooks/use-click-outside'; import { FC, useRef, useState } from 'react'; import MainNav, { type MainNavProps } from '../toolbar/main-nav'; import Search, { type SearchProps } from '../toolbar/search'; -import Settings from '../toolbar/settings'; +import Settings, { SettingsProps } from '../toolbar/settings'; import styles from './toolbar.module.scss'; -export type ToolbarProps = Pick<SearchProps, 'searchPage'> & { - /** - * Set additional classnames to the toolbar wrapper. - */ - className?: string; - /** - * The main nav items. - */ - nav: MainNavProps['items']; -}; +export type ToolbarProps = Pick<SearchProps, 'searchPage'> & + Pick<SettingsProps, 'ackeeStorageKey' | 'motionStorageKey'> & { + /** + * Set additional classnames to the toolbar wrapper. + */ + className?: string; + /** + * The main nav items. + */ + nav: MainNavProps['items']; + }; /** * Toolbar component * * Render the website toolbar. */ -const Toolbar: FC<ToolbarProps> = ({ className = '', nav, searchPage }) => { +const Toolbar: FC<ToolbarProps> = ({ + ackeeStorageKey, + className = '', + motionStorageKey, + nav, + searchPage, +}) => { const [isNavOpened, setIsNavOpened] = useState<boolean>(false); const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false); const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false); @@ -53,11 +60,13 @@ const Toolbar: FC<ToolbarProps> = ({ className = '', nav, searchPage }) => { ref={searchRef} /> <Settings + ackeeStorageKey={ackeeStorageKey} + className={`${styles.modal} ${styles['modal--settings']}`} isActive={isSettingsOpened} + motionStorageKey={motionStorageKey} + ref={settingsRef} setIsActive={setIsSettingsOpened} - className={`${styles.modal} ${styles['modal--settings']}`} tooltipClassName={styles.tooltip} - ref={settingsRef} /> </div> ); diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx index 559eaed..8f0d4e7 100644 --- a/src/components/templates/layout/layout.tsx +++ b/src/components/templates/layout/layout.tsx @@ -193,14 +193,16 @@ const Layout: FC<LayoutProps> = ({ {skipToContent} </ButtonLink> <Header - title={name} + ackeeStorageKey="ackee-tracking" baseline={baseline} - photo={picture} + className={styles.header} + isHome={isHome} + motionStorageKey="reduced-motion" nav={mainNav} + photo={picture} searchPage="/recherche" - isHome={isHome} + title={name} withLink={true} - className={styles.header} /> <Main id="main" className={styles.main}> <article diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx index d171944..54b8d6e 100644 --- a/src/components/templates/page/page-layout.tsx +++ b/src/components/templates/page/page-layout.tsx @@ -20,6 +20,7 @@ import CommentsList, { import TableOfContents from '@components/organisms/widgets/table-of-contents'; import { type SendCommentVars } from '@services/graphql/api'; import { sendComment } from '@services/graphql/comments'; +import useCodeBlocksTheme from '@utils/hooks/use-code-blocks-theme'; import useIsMounted from '@utils/hooks/use-is-mounted'; import Script from 'next/script'; import { FC, HTMLAttributes, ReactNode, useRef, useState } from 'react'; @@ -183,6 +184,8 @@ const PageLayout: FC<PageLayoutProps> = ({ return Object.values(meta).every((value) => value === null); }; + useCodeBlocksTheme(bodyRef); + return ( <> <Script diff --git a/src/services/local-storage/index.ts b/src/services/local-storage/index.ts index 8ed9ebf..65235a7 100644 --- a/src/services/local-storage/index.ts +++ b/src/services/local-storage/index.ts @@ -1,15 +1,15 @@ export const LocalStorage = { - get(key: string): string | null | undefined { + get<T>(key: string): T | undefined { try { const serialItem = localStorage.getItem(key); if (!serialItem) return undefined; - return JSON.parse(serialItem); + return JSON.parse(serialItem) as T; } catch (e) { console.log(e); return undefined; } }, - set(key: string, value: string) { + set<T>(key: string, value: T) { try { const serialItem = JSON.stringify(value); localStorage.setItem(key, serialItem); diff --git a/src/utils/hooks/use-attributes.tsx b/src/utils/hooks/use-attributes.tsx new file mode 100644 index 0000000..97a7b43 --- /dev/null +++ b/src/utils/hooks/use-attributes.tsx @@ -0,0 +1,33 @@ +import { useEffect } from 'react'; + +export type useAttributesProps = { + /** + * An HTML element. + */ + element?: HTMLElement; + /** + * The attribute name. + */ + attribute: string; + /** + * The attribute value. + */ + value: string; +}; + +/** + * Set HTML attributes to the given element or to the HTML document. + * + * @param props - An object with element, attribute name and value. + */ +const useAttributes = ({ element, attribute, value }: useAttributesProps) => { + useEffect(() => { + if (element) { + element.dataset[attribute] = value; + } else { + document.documentElement.dataset[attribute] = value; + } + }, [attribute, element, value]); +}; + +export default useAttributes; diff --git a/src/utils/hooks/use-code-blocks-theme.tsx b/src/utils/hooks/use-code-blocks-theme.tsx new file mode 100644 index 0000000..beb7b29 --- /dev/null +++ b/src/utils/hooks/use-code-blocks-theme.tsx @@ -0,0 +1,22 @@ +import { usePrismTheme } from '@utils/providers/prism-theme'; +import { useRouter } from 'next/router'; +import { RefObject, useEffect, useState } from 'react'; +import useIsMounted from './use-is-mounted'; + +const useCodeBlocksTheme = (el: RefObject<HTMLDivElement>) => { + const [preElements, setPreElements] = useState<NodeListOf<HTMLPreElement>>(); + const isMounted = useIsMounted(el); + const { setCodeBlocks } = usePrismTheme(); + const { asPath } = useRouter(); + + useEffect(() => { + const result = document.querySelectorAll<HTMLPreElement>('pre'); + setPreElements(result); + }, [asPath]); + + useEffect(() => { + isMounted && preElements && setCodeBlocks(preElements); + }, [isMounted, preElements, setCodeBlocks]); +}; + +export default useCodeBlocksTheme; diff --git a/src/utils/hooks/use-local-storage.tsx b/src/utils/hooks/use-local-storage.tsx new file mode 100644 index 0000000..da0292b --- /dev/null +++ b/src/utils/hooks/use-local-storage.tsx @@ -0,0 +1,35 @@ +import { LocalStorage } from '@services/local-storage'; +import { Dispatch, SetStateAction, useEffect, useState } from 'react'; + +export type UseLocalStorageReturn<T> = { + value: T; + setValue: Dispatch<SetStateAction<T>>; +}; + +/** + * Use the local storage. + * + * @param {string} key - The storage local key. + * @param {T} [fallbackValue] - A fallback value if local storage is empty. + * @returns {UseLocalStorageReturn<T>} An object with value and setValue. + */ +const useLocalStorage = <T extends unknown>( + key: string, + fallbackValue: T +): UseLocalStorageReturn<T> => { + const getInitialValue = () => { + if (typeof window === 'undefined') return fallbackValue; + const storedValue = LocalStorage.get<T>(key); + return storedValue || fallbackValue; + }; + + const [value, setValue] = useState<T>(getInitialValue); + + useEffect(() => { + LocalStorage.set(key, value); + }, [key, value]); + + return { value, setValue }; +}; + +export default useLocalStorage; diff --git a/src/utils/hooks/use-query-selector-all.tsx b/src/utils/hooks/use-query-selector-all.tsx new file mode 100644 index 0000000..dbeec90 --- /dev/null +++ b/src/utils/hooks/use-query-selector-all.tsx @@ -0,0 +1,16 @@ +import { useEffect, useState } from 'react'; + +const useQuerySelectorAll = <T extends keyof HTMLElementTagNameMap>( + query: string +) => { + const [elements, setElements] = + useState<NodeListOf<HTMLElementTagNameMap[T]>>(); + + useEffect(() => { + setElements(document.querySelectorAll(query)); + }, [query]); + + return elements; +}; + +export default useQuerySelectorAll; diff --git a/src/utils/hooks/use-update-ackee-options.tsx b/src/utils/hooks/use-update-ackee-options.tsx new file mode 100644 index 0000000..7c1d98a --- /dev/null +++ b/src/utils/hooks/use-update-ackee-options.tsx @@ -0,0 +1,19 @@ +import { useAckeeTracker } from '@utils/providers/ackee'; +import { useEffect } from 'react'; + +export type AckeeOptions = 'full' | 'partial'; + +/** + * Update Ackee settings with the given choice. + * + * @param {AckeeOptions} value - Either `full` or `partial`. + */ +const useUpdateAckeeOptions = (value: AckeeOptions) => { + const { setDetailed } = useAckeeTracker(); + + useEffect(() => { + setDetailed(value === 'full'); + }, [value, setDetailed]); +}; + +export default useUpdateAckeeOptions; diff --git a/src/utils/providers/prism-theme.tsx b/src/utils/providers/prism-theme.tsx index 62bcf56..23a2a36 100644 --- a/src/utils/providers/prism-theme.tsx +++ b/src/utils/providers/prism-theme.tsx @@ -55,7 +55,7 @@ const isValidTheme = (theme: string): boolean => { const getTheme = (key: string): PrismTheme | undefined => { if (typeof window === 'undefined') return undefined; - const storageValue = LocalStorage.get(key); + const storageValue = LocalStorage.get<string>(key); return storageValue && isValidTheme(storageValue) ? (storageValue as PrismTheme) |