applications/storybook/.storybook/preview.js

   1 import { BrowserRouter as Router } from 'react-router-dom';
   2
   3 import {
   4     ModalsChildren,
   5     ModalsProvider,
   6     NotificationsChildren,
   7     NotificationsProvider,
   8     ThemeProvider,
   9 } from '@proton/components';
  10 import InlineIcons from '@proton/icons/InlineIcons';
  11 import { APPS } from '@proton/shared/lib/constants';
  12 import { PROTON_DEFAULT_THEME, PROTON_THEMES_MAP, getThemes } from '@proton/shared/lib/themes/themes';
  13
  14 import './prismjs.js';
  15 import storybookTheme from './theme';
  16
  17 import '../src/app/index.scss';
  18
  19 const colorSchemes = ['default', 'ui-alias', 'ui-note', 'ui-password', 'ui-login'];
  20 const themes = getThemes(true);
  21
  22 export const globalTypes = {
  23     theme: {
  24         name: 'Theme',
  25         description: 'Proton theme, globally applied to stories',
  26         defaultValue: PROTON_THEMES_MAP[PROTON_DEFAULT_THEME].label,
  27         toolbar: {
  28             icon: 'paintbrush',
  29             items: themes.map(({ label }) => label),
  30             showName: true,
  31             title: 'Theme',
  32             dynamicTitle: true,
  33         },
  34     },
  35     scheme: {
  36         name: 'Color Scheme',
  37         description: 'Pass specific color schemes',
  38         defaultValue: 'default',
  39         toolbar: {
  40             icon: 'paintbrush',
  41             items: colorSchemes.map((label) => label),
  42             showName: true,
  43             title: 'Scheme',
  44             dynamicTitle: true,
  45         },
  46     },
  47 };
  48
  49 export const decorators = [
  50     (Story, context) => {
  51         const { theme: themeGlobal } = context.globals;
  52
  53         const identifier = themes.find((theme) => theme.label === themeGlobal)?.identifier;
  54
  55         const initialTheme = identifier || PROTON_DEFAULT_THEME;
  56
  57         return (
  58             <Router>
  59                 <ThemeProvider initial={initialTheme} appName={APPS.PROTONMAIL}>
  60                     <InlineIcons />
  61                     <NotificationsProvider>
  62                         <ModalsProvider>
  63                             <NotificationsChildren />
  64                             <ModalsChildren />
  65                             <Story />
  66                         </ModalsProvider>
  67                     </NotificationsProvider>
  68                 </ThemeProvider>
  69             </Router>
  70         );
  71     },
  72     (Story, context) => {
  73         return (
  74             <div className={context.globals.scheme}>
  75                 <Story />
  76             </div>
  77         );
  78     },
  79 ];
  80
  81 const order = [
  82     'introduction-',
  83     'changelog-',
  84     'core-concepts-',
  85     '-theming-explanations-',
  86     '-theming-usage-',
  87     '-theming-taxonomy-',
  88     'components-',
  89     'css-utilities-',
  90 ];
  91
  92 export const parameters = {
  93     viewMode: 'docs',
  94     actions: { argTypesRegex: '^on[A-Z].*' },
  95     controls: { expanded: true },
  96     docs: { theme: storybookTheme },
  97     previewTabs: {
  98         canvas: { hidden: true },
  99     },
 100     options: {
 101         storySort: (a, b) => {
 102             const aName = a[0];
 103             const bName = b[0];
 104
 105             if (order.some((name) => aName.includes(name) || bName.includes(name))) {
 106                 const aIdx = order.findIndex((i) => aName.indexOf(i) > -1);
 107                 const bIdx = order.findIndex((i) => bName.indexOf(i) > -1);
 108                 return aIdx - bIdx;
 109             }
 110
 111             return a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true });
 112         },
 113     },
 114 };