grafana/packages/grafana-ui/.storybook/preview.ts
Alex Khomenko df8250ff48
Card: Remove mdx file and render docs from the story (#82565)
* Card: Generate docs from the story

* Update sort

* Update betterer to check for the "autodocs" tag
2024-02-16 13:13:50 +02:00

72 lines
2.2 KiB
TypeScript

import { Preview } from '@storybook/react';
import 'jquery';
import '../../../public/vendor/flot/jquery.flot.js';
import '../../../public/vendor/flot/jquery.flot.selection';
import '../../../public/vendor/flot/jquery.flot.time';
import '../../../public/vendor/flot/jquery.flot.stack';
import '../../../public/vendor/flot/jquery.flot.stackpercent';
import '../../../public/vendor/flot/jquery.flot.fillbelow';
import '../../../public/vendor/flot/jquery.flot.crosshair';
import '../../../public/vendor/flot/jquery.flot.dashes';
import '../../../public/vendor/flot/jquery.flot.gauge';
import { withTheme } from '../src/utils/storybook/withTheme';
import { ThemedDocsContainer } from '../src/utils/storybook/ThemedDocsContainer';
// @ts-ignore
import lightTheme from './grafana.light.scss';
// @ts-ignore
import darkTheme from './grafana.dark.scss';
import { GrafanaLight, GrafanaDark } from './storybookTheme';
const handleThemeChange = (theme: any) => {
if (theme !== 'light') {
lightTheme.unuse();
darkTheme.use();
} else {
darkTheme.unuse();
lightTheme.use();
}
};
const preview: Preview = {
decorators: [withTheme(handleThemeChange)],
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
darkMode: {
dark: GrafanaDark,
light: GrafanaLight,
},
docs: {
container: ThemedDocsContainer,
},
knobs: {
disable: true,
},
layout: 'fullscreen',
options: {
// Sort stories first by Docs Overview, then alphabetically
// We should be able to use the builtin alphabetical sort, but is broken in SB 7.0
// https://github.com/storybookjs/storybook/issues/22470
storySort: (a, b) => {
// Skip sorting for stories with nosort tag
if (a.tags.includes('nosort') || b.tags.includes('nosort')) {
return 0;
}
if (a.title.startsWith('Docs Overview')) {
if (b.title.startsWith('Docs Overview')) {
return 0;
}
return -1;
} else if (b.title.startsWith('Docs Overview')) {
return 1;
}
return a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true });
},
},
},
};
export default preview;