diff options
Diffstat (limited to 'src/components/molecules/forms')
12 files changed, 113 insertions, 89 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} /> ); |