You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
3.2 KiB
117 lines
3.2 KiB
import React, { useEffect, useState } from 'react';
|
|
import { addDecorator, addParameters } from '@storybook/react';
|
|
import { action } from '@storybook/addon-actions';
|
|
import { Provider } from 'react-redux';
|
|
import configureStore from '../ui/store/store';
|
|
import '../ui/css/index.scss';
|
|
import localeList from '../app/_locales/index.json';
|
|
import * as allLocales from './locales';
|
|
import { I18nProvider, LegacyI18nProvider } from './i18n';
|
|
import MetaMetricsProviderStorybook from './metametrics';
|
|
import testData from './test-data.js';
|
|
import { Router } from 'react-router-dom';
|
|
import { createBrowserHistory } from 'history';
|
|
import { _setBackgroundConnection } from '../ui/store/actions';
|
|
import MetaMaskStorybookTheme from './metamask-storybook-theme';
|
|
import addons from '@storybook/addons';
|
|
|
|
addParameters({
|
|
backgrounds: {
|
|
default: 'default',
|
|
values: [
|
|
{ name: 'default', value: 'var(--color-background-default)' },
|
|
{ name: 'alternative', value: 'var(--color-background-alternative)' },
|
|
],
|
|
},
|
|
docs: {
|
|
theme: MetaMaskStorybookTheme,
|
|
},
|
|
options: {
|
|
storySort: {
|
|
order: [
|
|
'Getting Started',
|
|
'Foundations',
|
|
['Color', 'Shadow', 'Breakpoints'],
|
|
'Components',
|
|
['UI', 'App', 'Component Library'],
|
|
'Pages',
|
|
],
|
|
},
|
|
},
|
|
});
|
|
|
|
export const globalTypes = {
|
|
locale: {
|
|
name: 'Locale',
|
|
description: 'internationalization locale',
|
|
defaultValue: 'en',
|
|
toolbar: {
|
|
icon: 'globe',
|
|
items: localeList.map(({ code, name }) => {
|
|
return { value: code, right: code, title: name };
|
|
}),
|
|
},
|
|
},
|
|
};
|
|
|
|
export const getNewState = (state, props) => {
|
|
return Object.assign(state, props);
|
|
};
|
|
|
|
export const store = configureStore(testData);
|
|
const history = createBrowserHistory();
|
|
const proxiedBackground = new Proxy(
|
|
{},
|
|
{
|
|
get(_, method) {
|
|
return function () {
|
|
action(`Background call: ${method}`)();
|
|
return new Promise(() => {});
|
|
};
|
|
},
|
|
},
|
|
);
|
|
_setBackgroundConnection(proxiedBackground);
|
|
|
|
const metamaskDecorator = (story, context) => {
|
|
const [isDark, setDark] = useState(false);
|
|
const channel = addons.getChannel();
|
|
const currentLocale = context.globals.locale;
|
|
const current = allLocales[currentLocale];
|
|
|
|
useEffect(() => {
|
|
channel.on('DARK_MODE', setDark);
|
|
return () => channel.off('DARK_MODE', setDark);
|
|
}, [channel, setDark]);
|
|
|
|
useEffect(() => {
|
|
const currentTheme = document.documentElement.getAttribute('data-theme');
|
|
|
|
if (!currentTheme)
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
|
|
|
if (currentTheme === 'light' && isDark) {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
} else if (currentTheme === 'dark' && !isDark) {
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
|
}
|
|
}, [isDark]);
|
|
|
|
return (
|
|
<Provider store={store}>
|
|
<Router history={history}>
|
|
<MetaMetricsProviderStorybook>
|
|
<I18nProvider
|
|
currentLocale={currentLocale}
|
|
current={current}
|
|
en={allLocales.en}
|
|
>
|
|
<LegacyI18nProvider>{story()}</LegacyI18nProvider>
|
|
</I18nProvider>
|
|
</MetaMetricsProviderStorybook>
|
|
</Router>
|
|
</Provider>
|
|
);
|
|
};
|
|
|
|
addDecorator(metamaskDecorator);
|
|
|