hypnagaga/.storybook/preview.js
2022-08-11 15:43:38 +01:00

58 lines
1.6 KiB
JavaScript

import '../src/scss/main.scss';
import './preview.scss';
import Article from '../src/components/Article/Article.svelte';
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
import svelte from './svelte-highlighting.js';
SyntaxHighlighter.registerLanguage('scss', scss);
SyntaxHighlighter.registerLanguage('svelte', svelte);
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
viewMode: 'docs',
previewTabs: { 'storybook/docs/panel': { index: -1 } },
controls: {
expanded: true,
sort: 'requiredFirst',
matchers: {
color: /(background|colour|Colour)$/i,
date: /Date$/,
},
},
layout: 'fullscreen',
options: {
// https://storybook.js.org/docs/svelte/writing-stories/naming-components-and-hierarchy#sorting-stories
storySort: {
includeNames: true,
order: [
'Intro',
'Guides',
[
'Using these docs',
'Using with the Graphics Kit',
'Using with Google docs',
'Customising components with SCSS',
'*',
],
'*',
'Actions',
['*'],
'Utilities',
['*'],
'Contributing',
[
'Quickstart', 'Component Basics', '*', 'Writing Stories',
'Recipes: Basic story',
'Recipes: Story with custom docs',
'Recipes: Story with custom controls',
'Recipes: Story with media',
'Recipes: Story for a component with slots'
],
],
},
}
};
export const decorators = [() => ({ Component: Article })];