mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-11-06 05:05:01 +03:00
MHSanaei
72fb4d9358
The SPA initialised i18next with nesting on, though no locale uses
$t(...), so its nesting regex, exponential on an unclosed "$t(", ran
over every missing key and interpolated value, including the status and
name a node reports for its sub-nodes. One crafted status froze the
Nodes page.
Nesting is switched off for every i18next instance the project creates,
an unknown status renders as Unknown instead of being used as a key,
and a sub-node is never named as the parent it is reached through.
73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import { useLayoutEffect } from 'react';
|
|
import type { Decorator, Preview } from '@storybook/react-vite';
|
|
import { ConfigProvider } from 'antd';
|
|
import i18next from 'i18next';
|
|
import { initReactI18next } from 'react-i18next';
|
|
|
|
import { buildAntdThemeConfig } from '@/hooks/useTheme';
|
|
import { INTERPOLATION } from '@/i18n/react';
|
|
import enUS from '../../internal/web/translation/en-US.json';
|
|
|
|
if (!i18next.isInitialized) {
|
|
void i18next.use(initReactI18next).init({
|
|
lng: 'en-US',
|
|
fallbackLng: 'en-US',
|
|
resources: { 'en-US': { translation: enUS } },
|
|
interpolation: INTERPOLATION,
|
|
returnNull: false,
|
|
});
|
|
}
|
|
|
|
export const withTheme: Decorator = (Story, context) => {
|
|
const dark = context.globals.theme === 'dark';
|
|
useLayoutEffect(() => {
|
|
document.body.classList.remove('dark', 'light');
|
|
document.body.classList.add(dark ? 'dark' : 'light');
|
|
document.documentElement.style.colorScheme = dark ? 'dark' : 'light';
|
|
document.documentElement.removeAttribute('data-theme');
|
|
}, [dark]);
|
|
return (
|
|
// The click wave outlives its story and re-renders from a ResizeObserver
|
|
// inside the next story's act(), tripping React's act-environment warning.
|
|
<ConfigProvider theme={buildAntdThemeConfig(dark, false)} wave={{ disabled: true }}>
|
|
<div style={{ padding: 24, minWidth: 320 }}>
|
|
<Story />
|
|
</div>
|
|
</ConfigProvider>
|
|
);
|
|
};
|
|
|
|
const preview: Preview = {
|
|
decorators: [withTheme],
|
|
globalTypes: {
|
|
theme: {
|
|
description: 'Ant Design theme',
|
|
defaultValue: 'light',
|
|
toolbar: {
|
|
title: 'Theme',
|
|
icon: 'circlehollow',
|
|
items: [
|
|
{ value: 'light', title: 'Light' },
|
|
{ value: 'dark', title: 'Dark' },
|
|
],
|
|
dynamicTitle: true,
|
|
},
|
|
},
|
|
},
|
|
parameters: {
|
|
controls: {
|
|
expanded: true,
|
|
sort: 'requiredFirst',
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/i,
|
|
},
|
|
},
|
|
a11y: {
|
|
test: 'error',
|
|
},
|
|
},
|
|
};
|
|
|
|
export default preview;
|