toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-25 23:13:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add storybook i18n decorator (#2538)

Browse Source 
Co-authored-by: Himself65 <himself65@outlook.com>
This commit is contained in:
Whitewater 2023-05-25 23:28:11 -07:00 committed by GitHub
parent 7dcbe64d4e
commit 36534f1915
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/component/.storybook/preview.tsx
View File

@ -1,7 +1,8 @@
import { useEffect, ComponentType } from 'react';
import { ThemeProvider, useTheme } from 'next-themes';
import '@affine/component/theme/global.css';
import '@affine/component/theme/theme.css';
import { LOCALES, createI18n } from '@affine/i18n';
import { ThemeProvider, useTheme } from 'next-themes';
import { ComponentType, useEffect } from 'react';
import { useDarkMode } from 'storybook-dark-mode';
export const parameters = {
@ -15,6 +16,34 @@ export const parameters = {
},
};
export const globalTypes = {
locale: {
name: 'Locale',
description: 'Internationalization locale',
defaultValue: 'en',
toolbar: {
icon: 'globe',
items: LOCALES.map(locale => ({
title: locale.originalName,
value: locale.tag,
right: locale.flagEmoji,
})),
},
},
};
const createI18nDecorator = ({ options } = { options: {} }) => {
const i18n = createI18n(options);
const withI18n = (Story, context) => {
const locale = context.globals.locale;
useEffect(() => {
i18n.changeLanguage(locale);
}, [locale]);
return <Story {...context} />;
};
return withI18n;
};
const Component = () => {
const isDark = useDarkMode();
const theme = useTheme();
@ -33,4 +62,5 @@ export const decorators = [
</ThemeProvider>
);
},
createI18nDecorator(),
];