design-system/storybook/config/preview.tsx at develop · Amsterdam/design-system · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import type { PageProps } from '@amsterdam/design-system-react'
import type { StoryContext, StoryFn } from '@storybook/react-vite'
import type { ComponentProps } from 'react'

import { Page } from '@amsterdam/design-system-react'
import { DocsContainer } from '@storybook/addon-docs/blocks'
import { withThemeByClassName } from '@storybook/addon-themes'
import { clsx } from 'clsx'

import { viewports } from './viewports'

import '@amsterdam/design-system-tokens/dist/index.css'
import '@amsterdam/design-system-tokens/dist/compact.theme.css'
import '@amsterdam/design-system-assets/font/index.css'
import '@amsterdam/design-system-css/dist/index.css'
import '../src/_styles/docs.css'
import '../src/_styles/overrides.css'
import '../src/_styles/tests.css'

export const argTypes = {
  children: {
    table: { disable: true },
  },
  className: {
    table: { disable: true },
  },
  defaultValue: {
    control: false,
    table: { disable: true },
  },
  onChange: {
    control: false,
    table: { disable: true },
  },
  onSubmit: {
    control: false,
    table: { disable: true },
  },
  style: {
    table: { disable: true },
  },
}

// Wrap in Page, set language to Dutch for Canvas and Stories
export const decorators = [
  (Story: StoryFn, context: StoryContext) => {
    const { component, args } = context
    if (component?.displayName === 'Page') {
      return <Story />
    }

    const withMenu: PageProps['withMenu'] = context.title.startsWith('Pages/Internal')

    return (
      <Page
        className={clsx({
          '_ams-page-background--dark': args['color'] === 'inverse',
          '_ams-page-background--light': args['color'] === 'contrast',
        })}
        lang="nl"
        withMenu={withMenu}
      >
        <Story />
      </Page>
    )
  },
  withThemeByClassName({
    defaultTheme: 'Spacious',
    themes: {
      Compact: 'ams-body ams-theme--compact',
      Spacious: 'ams-body',
    },
  }),
]

// Append the City’s three crosses as a centered footer beneath every docs page.
const DocsContainerWithFooter = ({ children, ...props }: ComponentProps<typeof DocsContainer>) => (
  <DocsContainer {...props}>
    {children}
    <div aria-hidden="true" className="_ams-docs-footer">
      ×××
    </div>
  </DocsContainer>
)

export const parameters = {
  backgrounds: { disable: true },
  controls: {
    sort: 'alpha', // Sorts controls in the Controls addon
  },
  docs: {
    codePanel: true,
    container: DocsContainerWithFooter,
    controls: {
      sort: 'alpha', // Sorts controls in the Controls doc block – https://github.com/storybookjs/storybook/issues/25386#issuecomment-1905468177
    },
    toc: {
      headingSelector: 'h2, h3',
    },
  },
  html: {
    root: '.ams-page',
  },
  options: {
    storySort: {
      order: [
        'Docs',
        ['Introduction', ['Getting Started']],
        'Brand',
        'Components',
        ['Buttons', 'Containers', 'Feedback', 'Forms', 'Layout', 'Media', 'Navigation', 'Text'],
        'Utilities',
        'Pages',
        ['Introduction', 'Public', ['Introduction', 'Home Page'], 'Internal', ['Introduction', 'Home Page']],
      ],
    },
  },
  pseudo: {
    hover: ['.hover'],
  },
  viewMode: 'docs',
  viewport: {
    options: viewports,
  },
}

export const tags = ['autodocs']