1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-29 23:58:06 +01:00
metamask-extension/.storybook/preview.js
Mark Stacey 429847a686
Update to @storybook/*@6 (#9956)
Our Storybook dependencies have been updated to v6.1.9, from v5. This
was done to address a security vulnerability in a transitive dependency
of these packages (`highlight.js`).

The primary changes required by this Storybook update were the change
in import path for the `withKnobs` hook, the change in background
config format, and the webpack configuration. Storybook seems to work
correctly.

The migration was guided by the Storybook changelog[1] and the
Storybook v6 migration guide[2].

There is one Storybook error remaining; it fails to load the Euclid
font. This is a pre-existing error though, so we can fix it in a later
PR.

The `yarn.lock` file was deduplicated in this PR as well, as it was
required to fix various install warnings that were introduced with this
update.

[1]: https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md
[2]: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md
2020-11-30 16:40:46 -03:30

50 lines
1.1 KiB
JavaScript

import React from 'react'
import { addDecorator, addParameters } from '@storybook/react'
import { withKnobs } from '@storybook/addon-knobs'
import { I18nProvider, LegacyI18nProvider } from '../ui/app/contexts/i18n'
import { Provider } from 'react-redux'
import configureStore from '../ui/app/store/store'
import '../ui/app/css/index.scss'
import en from '../app/_locales/en/messages'
addParameters({
backgrounds: {
default: 'light',
values: [
{ name: 'light', value: '#FFFFFF'},
{ name: 'dark', value: '#333333' },
],
}
})
const styles = {
height: '100vh',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}
const store = configureStore({
metamask: { metamask: { currentLocale: 'en' } },
localeMessages: {
current: en,
en: en,
},
})
const metamaskDecorator = story => (
<Provider store={store}>
<I18nProvider>
<LegacyI18nProvider>
<div style={styles}>
{ story() }
</div>
</LegacyI18nProvider>
</I18nProvider>
</Provider>
)
addDecorator(withKnobs)
addDecorator(metamaskDecorator)