c65091b36a
feat(SW-3644): Storybook v10 * Auto update to Storybook v10 * Add scandic theme and logo * Update yarn.lock * Update formatting of package.json * Update vitest config and playwright plugin * Remove vitest 4 update * Re-added comment * Update the Typography component to explicitly return React.ReactNode * Add an explicit type assertion to the export * Add an explicit type assertion to the export for Checkbox * Explicit return type assertion * Add an explicit type assertion to the export * Update @types/react and fix ts warnings * Updated typings Approved-by: Linus Flood Approved-by: Matilda Landström
91 lines
2.4 KiB
TypeScript
91 lines
2.4 KiB
TypeScript
import { withThemeByClassName } from '@storybook/addon-themes'
|
|
import type { Preview, ReactRenderer } from '@storybook/nextjs-vite'
|
|
import { IntlProvider } from 'react-intl'
|
|
import { reactIntl } from './reactIntl'
|
|
|
|
import '../lib/design-system-new-deprecated.css'
|
|
import '../lib/fonts.css'
|
|
import '../lib/normalize.css'
|
|
import '../lib/style.css'
|
|
|
|
export const themes = {
|
|
themes: {
|
|
Scandic: 'scandic',
|
|
'Scandic Go': 'scandic-go',
|
|
'Downtown Camper': 'downtown-camper',
|
|
'Grand Hotel': 'grand-hotel',
|
|
Haymarket: 'haymarket',
|
|
'Hotel Norge': 'hotel-norge',
|
|
Marski: 'marski',
|
|
'The Dock': 'the-dock',
|
|
},
|
|
defaultTheme: 'Scandic',
|
|
}
|
|
|
|
const preview: Preview = {
|
|
decorators: [
|
|
// Theme decorator
|
|
withThemeByClassName<ReactRenderer>(themes),
|
|
(Story) => (
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
<IntlProvider locale="en" {...(reactIntl as any)}>
|
|
<Story />
|
|
</IntlProvider>
|
|
),
|
|
],
|
|
initialGlobals: {
|
|
locale: reactIntl.defaultLocale,
|
|
locales: {
|
|
en: { icon: '🇬🇧', title: 'English', right: 'EN' },
|
|
sv: { icon: '🇸🇪', title: 'Svenska', right: 'SV' },
|
|
da: { icon: '🇩🇰', title: 'Dansk', right: 'DA' },
|
|
no: { icon: '🇳🇴', title: 'Norsk', right: 'NO' },
|
|
fi: { icon: '🇫🇮', title: 'Suomi', right: 'FI' },
|
|
de: { icon: '🇩🇪', title: 'Deutsch', right: 'DE' },
|
|
},
|
|
backgrounds: { value: 'scandicSubtle' },
|
|
},
|
|
parameters: {
|
|
reactIntl,
|
|
|
|
nextjs: {
|
|
appDirectory: true,
|
|
},
|
|
|
|
docs: {
|
|
toc: true,
|
|
},
|
|
|
|
controls: { matchers: { color: /(background|color)$/i, date: /Date$/i } },
|
|
|
|
options: {
|
|
storySort: {
|
|
order: ['Introduction', 'Global', 'Components', 'Compositions', '*'],
|
|
},
|
|
},
|
|
|
|
backgrounds: {
|
|
options: {
|
|
// 👇 Scandic
|
|
scandicPrimary: { name: 'Scandic Primary', value: '#FAF6F2' },
|
|
scandicSubtle: { name: 'Scandic Subtle', value: '#F2ECE6' },
|
|
scandicPrimaryDark: { name: 'Scandic Primary Dark', value: '#4D001B' },
|
|
// 👇 Default values
|
|
storybookDark: { name: 'Storybook Dark', value: '#333' },
|
|
storybookLight: { name: 'Storybook Light', value: '#F7F9F2' },
|
|
},
|
|
},
|
|
|
|
a11y: {
|
|
// 'todo' - show a11y violations in the test UI only
|
|
// 'error' - fail CI on a11y violations
|
|
// 'off' - skip a11y checks entirely
|
|
test: 'todo',
|
|
},
|
|
},
|
|
|
|
tags: ['autodocs'],
|
|
}
|
|
|
|
export default preview
|