0f6a8dfa72
With the latest version of storybook, our documentation were broken as we were trying to access to a property from an object that does not exist anymore. In fact, in the preview context, a property `globals` has been renamed `userGlobals`.
76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
import '../src/icons.scss';
|
|
import '../src/index.scss';
|
|
import '../src/fonts.scss';
|
|
import { Preview } from '@storybook/react';
|
|
import { DocsContainer } from '@storybook/blocks';
|
|
|
|
import { CunninghamProvider } from ':/components/Provider';
|
|
import {BACKGROUND_COLOR_TO_THEME, getThemeFromGlobals, Themes, themes} from './themes';
|
|
|
|
export const DocsWithTheme = (props, context) => {
|
|
const theme = getThemeFromGlobals(props.context.store.userGlobals.globals);
|
|
return <CunninghamProvider theme={theme}>
|
|
<DocsContainer {...props} theme={themes[theme]} />
|
|
</CunninghamProvider>;
|
|
};
|
|
|
|
const preview: Preview = {
|
|
decorators: [
|
|
(Story, context) => (
|
|
<CunninghamProvider theme={getThemeFromGlobals(context.globals)}>
|
|
<Story />
|
|
</CunninghamProvider>
|
|
),
|
|
],
|
|
parameters: {
|
|
backgrounds: {
|
|
default: null,
|
|
values: Object.entries(BACKGROUND_COLOR_TO_THEME).map(value => ({
|
|
name: value[1],
|
|
value: value[0],
|
|
})),
|
|
},
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/,
|
|
},
|
|
},
|
|
docs: {
|
|
container: DocsWithTheme,
|
|
},
|
|
options: {
|
|
storySort: (a, b) => {
|
|
const roots = ['Getting Started', 'Components', 'Migrating'];
|
|
const gettingStartedOrder = [
|
|
'Installation',
|
|
'First steps',
|
|
'Customization',
|
|
'Theming',
|
|
'Colors',
|
|
'Spacings',
|
|
'Typography',
|
|
];
|
|
|
|
const aParts = a.title.split('/');
|
|
const bParts = b.title.split('/');
|
|
if (aParts[0] !== bParts[0]) {
|
|
return roots.indexOf(aParts[0]) - roots.indexOf(bParts[0]);
|
|
}
|
|
if (aParts[1] !== bParts[1]) {
|
|
if (aParts[0] === 'Getting Started') {
|
|
return (
|
|
gettingStartedOrder.indexOf(aParts[1]) -
|
|
gettingStartedOrder.indexOf(bParts[1])
|
|
);
|
|
}
|
|
return aParts[1].localeCompare(bParts[1]);
|
|
}
|
|
return 0;
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
export default preview;
|