From 1bc96a809db7e7f50435ccee54f78c479f00da4b Mon Sep 17 00:00:00 2001 From: "egorov.as" Date: Wed, 17 Jul 2024 13:58:31 +0500 Subject: [PATCH 1/6] docs(LocaleDecorator): add locale decarator in storybook --- .../decorators/Locale/LocaleDecorator.tsx | 21 +++++++++++++++++++ packages/react-ui/.storybook/preview.tsx | 17 +++++++++++++-- 2 files changed, 36 insertions(+), 2 deletions(-) create mode 100644 packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx diff --git a/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx b/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx new file mode 100644 index 00000000000..acc65038fcc --- /dev/null +++ b/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx @@ -0,0 +1,21 @@ +import {Decorator} from '@storybook/react'; +import React from "react"; +import {LangCodes, LocaleContext} from '../../../lib/locale'; +import {defaultLangCode} from "../../../lib/locale/constants"; + +export const toolbarItems: { [key: string]: LangCodes } = { + ru: LangCodes.ru_RU, + en: LangCodes.en_GB, +}; + +export const LocaleDecorator: Decorator = (Story, context) => { + console.log(context, context.globals) + const { locale } = context.globals; + const storybookLocale = toolbarItems[locale] || defaultLangCode; + + return ( + + + + ); +} diff --git a/packages/react-ui/.storybook/preview.tsx b/packages/react-ui/.storybook/preview.tsx index 9ed0aae157c..3ab43474b9a 100644 --- a/packages/react-ui/.storybook/preview.tsx +++ b/packages/react-ui/.storybook/preview.tsx @@ -14,6 +14,7 @@ import { FLAT_THEME_8PX_OLD } from '../lib/theming/themes/FlatTheme8pxOld'; import { THEME_2022 } from '../lib/theming/themes/Theme2022'; import { THEME_2022_DARK } from '../lib/theming/themes/Theme2022Dark'; import { ThemeFactory } from '../lib/theming/ThemeFactory'; +import {LocaleDecorator, toolbarItems} from "./decorators/Locale/LocaleDecorator"; // import { addons } from '@storybook/addons'; // import { LIVE_EXAMPLES_ADDON_ID } from 'storybook-addon-live-examples'; // import { Button } from '../components/Button'; @@ -57,7 +58,7 @@ const themes = { FLAT_THEME_8PX_OLD, DEFAULT_THEME_MOBILE, THEME_2022, - THEME_2022_DARK, + THEME_2022_DARK }; setFilter((fiber) => { @@ -80,7 +81,7 @@ const preview: Preview = { toc: { title: 'Содержание', headingSelector: 'h1, h2, h3', // может еще что-то включить - } + }, }, }, }; @@ -137,6 +138,7 @@ export const decorators: Meta['decorators'] = [ ); }, + LocaleDecorator, ]; export const parameters: Meta['parameters'] = { @@ -170,6 +172,17 @@ export const globalTypes = { showName: true, }, }, + locale: { + name: 'Locale', + description: 'React UI Locale', + defaultValue: 'ru', + toolbar: { + icon: 'globe', + items: Object.keys(toolbarItems), + showName: true, + // dynamicTitle: true, + }, + }, }; if (isTestEnv) { From b3ba4da28e9fb6a984657ea320abac5810365732 Mon Sep 17 00:00:00 2001 From: "egorov.as" Date: Thu, 18 Jul 2024 12:41:04 +0500 Subject: [PATCH 2/6] docs(LocaleDecorator): add hideLocaleBtnInUnsupportedControls --- .../.storybook/decorators/Locale/LocaleDecorator.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx b/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx index acc65038fcc..7071a484cb8 100644 --- a/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx +++ b/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx @@ -8,10 +8,20 @@ export const toolbarItems: { [key: string]: LangCodes } = { en: LangCodes.en_GB, }; +const supportedLocaleControls = ['Loader', 'Spinner', 'Calendar', 'DateInput', 'DatePicker','Autocomplete', 'Paging', 'FileUploader']; +const hideLocaleBtnInUnsupportedControls = (activeControl: string) => { + const localeBtn = window.parent.document.querySelector('button[title="React UI Locale"]'); + const localeBtnWrapper = localeBtn?.closest('div'); + if (localeBtnWrapper) { + localeBtnWrapper.style.display = supportedLocaleControls.includes(activeControl) ? 'inline-block' : 'none'; + } +} + export const LocaleDecorator: Decorator = (Story, context) => { - console.log(context, context.globals) const { locale } = context.globals; + const activeControl = context.title.split('/')[1]; const storybookLocale = toolbarItems[locale] || defaultLangCode; + hideLocaleBtnInUnsupportedControls(activeControl); return ( From fea442c0be4f0e65496eb422039aa91f5b057902 Mon Sep 17 00:00:00 2001 From: "egorov.as" Date: Mon, 22 Jul 2024 14:21:37 +0500 Subject: [PATCH 3/6] docs(LocaleDecorator): add dynamic text with icon, prettier --- .../decorators/Locale/LocaleDecorator.tsx | 33 ++++++++++++------- packages/react-ui/.storybook/preview.tsx | 6 ++-- 2 files changed, 24 insertions(+), 15 deletions(-) diff --git a/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx b/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx index 7071a484cb8..04d3ddd2f3c 100644 --- a/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx +++ b/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx @@ -1,21 +1,30 @@ -import {Decorator} from '@storybook/react'; -import React from "react"; -import {LangCodes, LocaleContext} from '../../../lib/locale'; -import {defaultLangCode} from "../../../lib/locale/constants"; +import { Decorator } from '@storybook/react'; +import React from 'react'; +import { LangCodes, LocaleContext } from '../../../lib/locale'; +import { defaultLangCode } from '../../../lib/locale/constants'; export const toolbarItems: { [key: string]: LangCodes } = { ru: LangCodes.ru_RU, en: LangCodes.en_GB, }; -const supportedLocaleControls = ['Loader', 'Spinner', 'Calendar', 'DateInput', 'DatePicker','Autocomplete', 'Paging', 'FileUploader']; +const supportedLocaleControls = [ + 'Loader', + 'Spinner', + 'Calendar', + 'DateInput', + 'DatePicker', + 'Autocomplete', + 'Paging', + 'FileUploader', +]; const hideLocaleBtnInUnsupportedControls = (activeControl: string) => { const localeBtn = window.parent.document.querySelector('button[title="React UI Locale"]'); const localeBtnWrapper = localeBtn?.closest('div'); if (localeBtnWrapper) { localeBtnWrapper.style.display = supportedLocaleControls.includes(activeControl) ? 'inline-block' : 'none'; } -} +}; export const LocaleDecorator: Decorator = (Story, context) => { const { locale } = context.globals; @@ -23,9 +32,9 @@ export const LocaleDecorator: Decorator = (Story, context) => { const storybookLocale = toolbarItems[locale] || defaultLangCode; hideLocaleBtnInUnsupportedControls(activeControl); - return ( - - - - ); -} + return ( + + + + ); +}; diff --git a/packages/react-ui/.storybook/preview.tsx b/packages/react-ui/.storybook/preview.tsx index 3ab43474b9a..83bde94c7c1 100644 --- a/packages/react-ui/.storybook/preview.tsx +++ b/packages/react-ui/.storybook/preview.tsx @@ -14,7 +14,7 @@ import { FLAT_THEME_8PX_OLD } from '../lib/theming/themes/FlatTheme8pxOld'; import { THEME_2022 } from '../lib/theming/themes/Theme2022'; import { THEME_2022_DARK } from '../lib/theming/themes/Theme2022Dark'; import { ThemeFactory } from '../lib/theming/ThemeFactory'; -import {LocaleDecorator, toolbarItems} from "./decorators/Locale/LocaleDecorator"; +import { LocaleDecorator, toolbarItems } from './decorators/Locale/LocaleDecorator'; // import { addons } from '@storybook/addons'; // import { LIVE_EXAMPLES_ADDON_ID } from 'storybook-addon-live-examples'; // import { Button } from '../components/Button'; @@ -58,7 +58,7 @@ const themes = { FLAT_THEME_8PX_OLD, DEFAULT_THEME_MOBILE, THEME_2022, - THEME_2022_DARK + THEME_2022_DARK, }; setFilter((fiber) => { @@ -180,7 +180,7 @@ export const globalTypes = { icon: 'globe', items: Object.keys(toolbarItems), showName: true, - // dynamicTitle: true, + dynamicTitle: true, }, }, }; From 5315b84e91b426a820cafaa9f3b75359fccf372d Mon Sep 17 00:00:00 2001 From: SchwJ Date: Tue, 30 Jul 2024 16:52:53 +0500 Subject: [PATCH 4/6] chore(): fix merge error --- packages/react-ui/.storybook/preview.tsx | 46 ++---------------------- 1 file changed, 2 insertions(+), 44 deletions(-) diff --git a/packages/react-ui/.storybook/preview.tsx b/packages/react-ui/.storybook/preview.tsx index d7f0b6e9e7b..f391a07af77 100644 --- a/packages/react-ui/.storybook/preview.tsx +++ b/packages/react-ui/.storybook/preview.tsx @@ -95,7 +95,6 @@ const preview: Preview = { } else { document.body.classList.remove('dark'); } - if (storybookTheme !== DEFAULT_THEME) { return ( @@ -109,7 +108,6 @@ const preview: Preview = { ); } - return ; }, (Story) => ( @@ -136,51 +134,11 @@ const preview: Preview = { }} ); - } - - return ; - }, - (Story) => ( -
- -
- ), - (Story) => { - return ( - - {(theme) => { - return ( - - - - ); - }} - - ); - }, - LocaleDecorator, -]; - -export const parameters: Meta['parameters'] = { - creevey: { - captureElement: '#test-element', - skip: { - 'not flat stories in flat browsers': { - in: ['chromeFlat8px', 'firefoxFlat8px', 'ie11Flat8px'], - kinds: /^(?!\bButton\b|\bCheckbox\b|\bInput\b|\bRadio\b|\bTextarea\b|\bToggle\b|\bSwitcher\b|\bTokenInput\b)/, - }, - 'not mobile stories in mobile browser': { in: MOBILE_REGEXP, stories: /^((?!Mobile).)*$/i }, - 'mobile stories in not mobile browsers': { stories: MOBILE_REGEXP, in: /^((?!Mobile).)*$/i }, }, + LocaleDecorator, ], }; + export default preview; export const globalTypes = { From ddcceed58b59164d87276bce470ba41f5322e74e Mon Sep 17 00:00:00 2001 From: SchwJ Date: Wed, 31 Jul 2024 09:47:06 +0500 Subject: [PATCH 5/6] chore(): fix lint errors --- .../react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx | 3 ++- packages/react-ui/.storybook/preview.tsx | 1 + .../components/DatePicker/__tests__/DatePicker-test.tsx | 1 - packages/react-ui/components/Tooltip/Tooltip.tsx | 2 +- 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx b/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx index 04d3ddd2f3c..b26e2b89a24 100644 --- a/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx +++ b/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx @@ -1,5 +1,6 @@ -import { Decorator } from '@storybook/react'; import React from 'react'; +import { Decorator } from '@storybook/react'; + import { LangCodes, LocaleContext } from '../../../lib/locale'; import { defaultLangCode } from '../../../lib/locale/constants'; diff --git a/packages/react-ui/.storybook/preview.tsx b/packages/react-ui/.storybook/preview.tsx index f391a07af77..f42a3be5c4d 100644 --- a/packages/react-ui/.storybook/preview.tsx +++ b/packages/react-ui/.storybook/preview.tsx @@ -14,6 +14,7 @@ import { FLAT_THEME_8PX_OLD } from '../lib/theming/themes/FlatTheme8pxOld'; import { THEME_2022 } from '../lib/theming/themes/Theme2022'; import { THEME_2022_DARK } from '../lib/theming/themes/Theme2022Dark'; import { ThemeFactory } from '../lib/theming/ThemeFactory'; + import { LocaleDecorator, toolbarItems } from './decorators/Locale/LocaleDecorator'; const customViewports = { diff --git a/packages/react-ui/components/DatePicker/__tests__/DatePicker-test.tsx b/packages/react-ui/components/DatePicker/__tests__/DatePicker-test.tsx index 52d0137dacc..53c3fdb343a 100644 --- a/packages/react-ui/components/DatePicker/__tests__/DatePicker-test.tsx +++ b/packages/react-ui/components/DatePicker/__tests__/DatePicker-test.tsx @@ -460,7 +460,6 @@ describe('DatePicker', () => { expect( within(monthRoot.getByTestId(CalendarDataTids.headerYear)).getByTestId(DateSelectDataTids.caption), ).toHaveTextContent(theYear.toString()); - /* eslint-enable testing-library/no-wait-for-multiple-assertions */ return currentMonth; }, // Note: можно ли это сделать быстрее, если поиграться с таймингом в анимациях? diff --git a/packages/react-ui/components/Tooltip/Tooltip.tsx b/packages/react-ui/components/Tooltip/Tooltip.tsx index a242731dbd2..14c6d2db7be 100644 --- a/packages/react-ui/components/Tooltip/Tooltip.tsx +++ b/packages/react-ui/components/Tooltip/Tooltip.tsx @@ -221,7 +221,7 @@ export class Tooltip extends React.PureComponent imp return this.props.allowedPositions ? this.props.allowedPositions : OldPositions; } - public componentDidUpdate(prevProps: TooltipProps) { + public componentDidUpdate() { const { trigger } = this.getProps(); if (trigger === 'closed' && this.state.opened) { this.close(); From a3193dec1bf2a58ec0cf84c8461fee06ef84b4ea Mon Sep 17 00:00:00 2001 From: "egorov.as" Date: Thu, 8 Aug 2024 11:08:53 +0500 Subject: [PATCH 6/6] docs(LocaleDecorator): update LocaleDecorator --- .../decorators/Locale/LocaleDecorator.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx b/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx index b26e2b89a24..e45d25732f5 100644 --- a/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx +++ b/packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx @@ -10,14 +10,19 @@ export const toolbarItems: { [key: string]: LangCodes } = { }; const supportedLocaleControls = [ - 'Loader', - 'Spinner', + 'Autocomplete', 'Calendar', 'DateInput', 'DatePicker', - 'Autocomplete', - 'Paging', 'FileUploader', + 'Modal', + 'Paging', + 'PasswordInput', + 'Select', + 'SidePage', + 'Toast', + 'Token', + 'TokenInput', ]; const hideLocaleBtnInUnsupportedControls = (activeControl: string) => { const localeBtn = window.parent.document.querySelector('button[title="React UI Locale"]');