56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
import type { Preview } from '@storybook/react'
|
|
import { customisation } from '@status-im/colors'
|
|
import './reset.css'
|
|
|
|
const preview: Preview = {
|
|
globalTypes: {
|
|
customisation: {
|
|
toolbar: {
|
|
title: 'Customisation',
|
|
// icon: 'paintbrush',
|
|
defaultValue: 'blue',
|
|
items: Object.keys(customisation),
|
|
dynamicTitle: true,
|
|
defaultItem: 'army',
|
|
},
|
|
},
|
|
},
|
|
|
|
parameters: {
|
|
// layout: 'centered',
|
|
customisation: {
|
|
default: 'blue',
|
|
values: [
|
|
{ name: 'blue', value: '#0000ff' },
|
|
{ name: 'red', value: '#ff0000' },
|
|
],
|
|
},
|
|
backgrounds: {
|
|
default: 'light',
|
|
values: [
|
|
{ name: 'light', value: '#fff' },
|
|
{ name: 'dark', value: '#0D1625' },
|
|
],
|
|
},
|
|
},
|
|
|
|
decorators: [
|
|
(Story, context) => {
|
|
document.body.setAttribute(
|
|
'data-theme',
|
|
context.parameters.backgrounds?.default === 'dark' ? 'dark' : 'light',
|
|
)
|
|
|
|
document.body.setAttribute(
|
|
'data-customisation',
|
|
context.globals.customisation ?? 'blue',
|
|
)
|
|
|
|
return <Story />
|
|
},
|
|
],
|
|
}
|
|
|
|
export default preview
|