2020-09-02 20:30:47 +03:00
|
|
|
import React from 'react';
|
|
|
|
import { Container } from '../src';
|
|
|
|
import { listSchemes, listThemes } from '../src/utils/theme';
|
|
|
|
|
|
|
|
export const parameters = {
|
|
|
|
actions: { argTypesRegex: '^on[A-Z].*' },
|
|
|
|
};
|
|
|
|
|
|
|
|
export const globalTypes = {
|
|
|
|
theme: {
|
|
|
|
name: 'Theme',
|
|
|
|
description: 'Global theme for components',
|
|
|
|
defaultValue: 'default',
|
|
|
|
toolbar: {
|
|
|
|
items: listThemes(),
|
2021-11-06 20:28:35 +03:00
|
|
|
showName: true,
|
2020-09-02 20:30:47 +03:00
|
|
|
},
|
|
|
|
},
|
|
|
|
scheme: {
|
|
|
|
name: 'Color Scheme',
|
|
|
|
description: 'Global color scheme for components',
|
|
|
|
defaultValue: 'default',
|
|
|
|
toolbar: {
|
|
|
|
items: listSchemes(),
|
2021-11-06 20:28:35 +03:00
|
|
|
showName: true,
|
2020-09-02 20:30:47 +03:00
|
|
|
},
|
|
|
|
},
|
|
|
|
color: {
|
|
|
|
name: 'Color',
|
|
|
|
description: 'Global color for components',
|
|
|
|
defaultValue: 'light',
|
|
|
|
toolbar: {
|
2021-11-06 20:28:35 +03:00
|
|
|
items: ['auto', 'light', 'dark'],
|
|
|
|
showName: true,
|
2020-09-02 20:30:47 +03:00
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
const withThemeProvider = (Story, context) => (
|
|
|
|
<Container
|
|
|
|
themeData={{
|
|
|
|
theme: context.globals.theme,
|
|
|
|
scheme: context.globals.scheme,
|
2021-11-06 20:28:35 +03:00
|
|
|
colorPreference: context.globals.color,
|
2020-09-02 20:30:47 +03:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Story {...context} />
|
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
export const decorators = [withThemeProvider];
|