5c8ee7f906
* wip on storybook as a replacement for using UI components in docusaurus, since it causes too many problems * fix: storybook webpack config * feat: add more stories * feat: add more stories * feat: add more stories * feat: fix logo and babel runtime error * feat: move to mdx docs for ui * feat: enhanced mdx for header and styles * feat: Add button usecases * feat: Add buttonGroup docs * feat: Add docs and use case to cine and contex menu * feat: fix decorators * feat: add header and dropdown docs * feat: add Icon and input docs * feat: add more docs * feat: add more stories * fix: feedback section * feat: Add doc page * feat: Add typography and color stories * yarn lock * add analytics to v3-ui * new banner image * new viewport component * update review comments
85 lines
1.8 KiB
JavaScript
85 lines
1.8 KiB
JavaScript
import { parameters } from '@storybook/addon-docs/dist/esm/frameworks/react/config';
|
|
import { addParameters } from '@storybook/react';
|
|
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
|
|
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
|
|
addParameters({
|
|
docs: {
|
|
...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 = [];
|