dd3944a87c
* feat(storybook): Refactor Storybook to use Typescript This commit updates the Storybook configuration to use Typescript, including renaming `main.js` to `main.ts`, updating `core.builder` and `framework.name` to use `@storybook/builder-webpack5` and `@storybook/react-webpack5`, respectively. The code also adds options to `addon-docs` to enable adding GFM support to the generated docs. Additionally, the commit modifies `staticDir`, removes outdated addons, and makes various devDependencies and PostCSS updates to align with Storybook 7.x.x. Finally, the commit removes some unused code and relocates `Button` and `AboutModal` story files. * apply review comments * update yarn lock
84 lines
1.7 KiB
TypeScript
84 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { DocsPage, DocsContainer } from '@storybook/addon-docs';
|
|
import {
|
|
Heading,
|
|
SectionName,
|
|
Footer,
|
|
AnchorListItem,
|
|
LinkComponent,
|
|
} from '../src/storybook/components';
|
|
|
|
import '../src/tailwind.css';
|
|
import './custom.css';
|
|
|
|
// https://github.com/mondaycom/monday-ui-react-core/tree/master/.storybook
|
|
|
|
export const parameters = {
|
|
docs: {
|
|
inlineStories: true,
|
|
container: ({ children, context }) => (
|
|
<DocsContainer context={context}>{children}</DocsContainer>
|
|
),
|
|
page: DocsPage,
|
|
components: {
|
|
Heading,
|
|
Footer,
|
|
h2: SectionName,
|
|
h3: ({ children }) => (
|
|
<h3 className="my-2 text-xl to-blue-900">{children}</h3>
|
|
),
|
|
li: AnchorListItem,
|
|
a: LinkComponent,
|
|
p: ({ children }) => (
|
|
<p className="my-2 text-gray-800 font-inter">{children}</p>
|
|
),
|
|
// todo: add pre and code
|
|
},
|
|
},
|
|
viewMode: 'docs',
|
|
previewTabs: {
|
|
'storybook/docs/panel': {
|
|
index: -1,
|
|
},
|
|
canvas: { title: 'Sandbox' },
|
|
},
|
|
actions: { argTypesRegex: '^on[A-Z].*' },
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/,
|
|
},
|
|
},
|
|
viewport: {
|
|
disable: true,
|
|
},
|
|
backgrounds: {
|
|
default: 'OHIF-v3',
|
|
values: [
|
|
{
|
|
name: 'White',
|
|
value: '#FFFFFF',
|
|
},
|
|
{
|
|
name: 'OHIF-v3',
|
|
value: '#090C29',
|
|
},
|
|
{
|
|
name: 'Light',
|
|
value: '#F8F8F8',
|
|
},
|
|
{
|
|
name: 'Dark',
|
|
value: '#333333',
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
storySort: {
|
|
order: ['Welcome', 'Contribute', 'Foundations', 'Modals', '*'],
|
|
},
|
|
},
|
|
};
|
|
|
|
export const decorators = [];
|