Merge pull request #5843 from storybooks/tech/improve-theme-creating

FIX base theme initialization and theme bootup

addons/knobs/src/components/__tests__/Panel.js

@@ -3,7 +3,7 @@ import { shallow, mount } from 'enzyme';
 import { STORY_CHANGED } from '@storybook/core-events';
 import { TabsState } from '@storybook/components';
 
-import { ThemeProvider, themes } from '@storybook/theming';
+import { ThemeProvider, themes, convert } from '@storybook/theming';
 import Panel from '../Panel';
 import { CHANGE, SET } from '../../shared';
 import PropForm from '../PropForm';
@@ -191,7 +191,7 @@ describe('Panel', () => {
       // We have to do a full mount.
 
       const root = mount(
-        <ThemeProvider theme={themes.light}>
+        <ThemeProvider theme={convert(themes.light)}>
           <Panel channel={testChannel} api={testApi} active />
         </ThemeProvider>
       );
@@ -225,7 +225,7 @@ describe('Panel', () => {
 
     it('should have one tab per groupId and an empty ALL tab when all are defined', () => {
       const root = mount(
-        <ThemeProvider theme={themes.light}>
+        <ThemeProvider theme={convert(themes.light)}>
           <Panel channel={testChannel} api={testApi} active />
         </ThemeProvider>
       );
@@ -265,7 +265,7 @@ describe('Panel', () => {
 
     it('the ALL tab should have its own additional content when there are knobs both with and without a groupId', () => {
       const root = mount(
-        <ThemeProvider theme={themes.light}>
+        <ThemeProvider theme={convert(themes.light)}>
           <Panel channel={testChannel} api={testApi} active />
         </ThemeProvider>
       );

examples/official-storybook/config.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf, configure, addDecorator, addParameters } from '@storybook/react';
-import { Global, ThemeProvider, themes, createGlobal } from '@storybook/theming';
+import { Global, ThemeProvider, themes, createReset, create, convert } from '@storybook/theming';
 
 import { withCssResources } from '@storybook/addon-cssresources';
 import { withA11y } from '@storybook/addon-a11y';
@@ -32,8 +32,8 @@ addDecorator(withA11y);
 addDecorator(withNotes);
 
 addDecorator(storyFn => (
-  <ThemeProvider theme={themes.normal}>
-    <Global styles={createGlobal} />
+  <ThemeProvider theme={convert(themes.light)}>
+    <Global styles={createReset} />
     {storyFn()}
   </ThemeProvider>
 ));
@@ -49,9 +49,10 @@ addParameters({
   options: {
     hierarchySeparator: /\/|\./,
     hierarchyRootSeparator: '|',
+    theme: create({ colorPrimary: 'hotpink', colorSecondary: 'orangered' }),
   },
   backgrounds: [
-    { name: 'storybook app', value: themes.normal.background.app, default: true },
+    { name: 'storybook app', value: themes.light.appBg, default: true },
     { name: 'light', value: '#eeeeee' },
     { name: 'dark', value: '#222222' },
   ],

lib/theming/src/base.ts

@@ -94,6 +94,42 @@ export const typography = {
   },
 };
 
+export interface ThemeVars {
+  base: 'light' | 'dark';
+
+  colorPrimary?: string;
+  colorSecondary?: string;
+
+  // UI
+  appBg?: string;
+  appContentBg?: string;
+  appBorderColor?: string;
+  appBorderRadius?: number;
+
+  // Typography
+  fontBase?: string;
+  fontCode?: string;
+
+  // Text colors
+  textColor?: string;
+  textInverseColor?: string;
+
+  // Toolbar default and active colors
+  barTextColor?: string;
+  barSelectedColor?: string;
+  barBg?: string;
+
+  // Form colors
+  inputBg?: string;
+  inputBorder?: string;
+  inputTextColor?: string;
+  inputBorderRadius?: number;
+
+  brandTitle?: string;
+  brandUrl?: string;
+  brandImage?: string;
+}
+
 export type Color = typeof color;
 export type Background = typeof background;
 export type Typography = typeof typography;

lib/theming/src/create.ts

@@ -1,52 +1,21 @@
 // This generates theme variables in the correct shape for the UI
-
-import { Theme, Brand, color, Color, background, typography } from './base';
-import { easing, animation } from './animation';
-import { create as createSyntax } from './modules/syntax';
 import { chromeLight, chromeDark } from 'react-inspector';
 import { opacify } from 'polished';
 
+import lightThemeVars from './themes/light';
+import darkThemeVars from './themes/dark';
+
+import { Theme, color, Color, background, typography, ThemeVars } from './base';
+import { easing, animation } from './animation';
+import { create as createSyntax } from './modules/syntax';
+
+const themes: { light: ThemeVars; dark: ThemeVars } = { light: lightThemeVars, dark: darkThemeVars };
+
 interface Rest {
   [key: string]: any;
 }
 
-interface ThemeVar {
-  base?: 'light' | 'dark';
-
-  colorPrimary?: string;
-  colorSecondary?: string;
-
-  // UI
-  appBg?: string;
-  appContentBg?: string;
-  appBorderColor?: string;
-  appBorderRadius?: number;
-
-  // Typography
-  fontBase?: string;
-  fontCode?: string;
-
-  // Text colors
-  textColor?: string;
-  textInverseColor?: string;
-
-  // Toolbar default and active colors
-  barTextColor?: string;
-  barSelectedColor?: string;
-  barBg?: string;
-
-  // Form colors
-  inputBg?: string;
-  inputBorder?: string;
-  inputTextColor?: string;
-  inputBorderRadius?: number;
-
-  brandTitle?: string;
-  brandUrl?: string;
-  brandImage?: string;
-}
-
-const createColors = (vars: ThemeVar): Color => ({
+const createColors = (vars: ThemeVars): Color => ({
   // Changeable colors
   primary: vars.colorPrimary,
   secondary: vars.colorSecondary,
@@ -110,76 +79,117 @@ const darkSyntaxColors = {
   blue2: '#00009f',
 };
 
-export const create = (vars: ThemeVar, rest?: Rest): Theme => ({
-  base: vars.base,
-  color: createColors(vars),
-  background: {
-    app: vars.appBg || background.app,
-    content: vars.appContentBg || color.lightest,
-    hoverable: vars.base === 'light' ? 'rgba(0,0,0,.05)' : 'rgba(250,250,252,.1)' || background.hoverable,
+export const create = (vars: ThemeVars = { base: 'light' }, rest?: Rest): ThemeVars => {
+  const inherit: ThemeVars = {
+    ...themes.light,
+    ...(themes[vars.base] || {}),
+    ...vars,
+    ...{ base: themes[vars.base] ? vars.base : 'light' },
+  };
+  return {
+    ...rest,
+    ...inherit,
+    ...{ barSelectedColor: vars.barSelectedColor || inherit.colorSecondary },
+  };
+};
 
-    positive: background.positive,
-    negative: background.negative,
-    warning: background.warning,
-  },
-  typography: {
-    fonts: {
-      base: vars.fontBase || typography.fonts.base,
-      mono: vars.fontCode || typography.fonts.mono,
+export const convert = (inherit: ThemeVars = lightThemeVars): Theme => {
+  const {
+    base,
+    colorPrimary,
+    colorSecondary,
+    appBg,
+    appContentBg,
+    appBorderColor,
+    appBorderRadius,
+    fontBase,
+    fontCode,
+    textColor,
+    textInverseColor,
+    barTextColor,
+    barSelectedColor,
+    barBg,
+    inputBg,
+    inputBorder,
+    inputTextColor,
+    inputBorderRadius,
+    brandTitle,
+    brandUrl,
+    brandImage,
+    ...rest
+  } = inherit;
+
+  return {
+    ...(rest || {}),
+
+    base,
+    color: createColors(inherit),
+    background: {
+      app: appBg,
+      content: appContentBg,
+      hoverable: base === 'light' ? 'rgba(0,0,0,.05)' : 'rgba(250,250,252,.1)' || background.hoverable,
+
+      positive: background.positive,
+      negative: background.negative,
+      warning: background.warning,
     },
-    weight: typography.weight,
-    size: typography.size,
-  },
-  animation,
-  easing,
+    typography: {
+      fonts: {
+        base: fontBase,
+        mono: fontCode,
+      },
+      weight: typography.weight,
+      size: typography.size,
+    },
+    animation,
+    easing,
 
-  input: {
-    border: vars.inputBorder || color.border,
-    background: vars.inputBg || color.lightest,
-    color: vars.inputTextColor || color.defaultText,
-    borderRadius: vars.inputBorderRadius || vars.appBorderRadius || 4,
-  },
+    input: {
+      border: inputBorder,
+      background: inputBg,
+      color: inputTextColor,
+      borderRadius: inputBorderRadius,
+    },
 
-  // UI
-  layoutMargin: 10,
-  appBorderColor: vars.appBorderColor || color.border,
-  appBorderRadius: vars.appBorderRadius || 4,
+    // UI
+    layoutMargin: 10,
+    appBorderColor,
+    appBorderRadius,
 
-  // Toolbar default/active colors
-  barTextColor: vars.barTextColor || color.mediumdark,
-  barSelectedColor: vars.barSelectedColor || color.secondary,
-  barBg: vars.barBg || color.lightest,
+    // Toolbar default/active colors
+    barTextColor,
+    barSelectedColor: barSelectedColor || colorSecondary,
+    barBg,
 
-  // Brand logo/text
-  brand: {
-    title: vars.brandTitle,
-    url: vars.brandUrl,
-    image: vars.brandImage,
-  },
+    // Brand logo/text
+    brand: {
+      title: brandTitle,
+      url: brandUrl,
+      image: brandImage,
+    },
 
-  code: createSyntax({
-    colors: vars.base === 'light' ? lightSyntaxColors : darkSyntaxColors,
-    mono: vars.fontCode || typography.fonts.mono,
-  }),
+    code: createSyntax({
+      colors: base === 'light' ? lightSyntaxColors : darkSyntaxColors,
+      mono: fontCode,
+    }),
 
-  // Addon actions theme
-  // API example https://github.com/xyc/react-inspector/blob/master/src/styles/themes/chromeLight.js
-  addonActionsTheme: {
-    ...(vars.base === 'light' ? chromeLight : chromeDark),
+    // Addon actions theme
+    // API example https://github.com/xyc/react-inspector/blob/master/src/styles/themes/chromeLight.js
+    addonActionsTheme: {
+      ...(base === 'light' ? chromeLight : chromeDark),
 
-    BASE_FONT_FAMILY: vars.fontCode || typography.fonts.mono,
-    BASE_FONT_SIZE: typography.size.s2 - 1,
-    BASE_LINE_HEIGHT: '18px',
-    BASE_BACKGROUND_COLOR: 'transparent',
-    BASE_COLOR: vars.textColor || color.darkest,
-    ARROW_COLOR: opacify(0.2, vars.appBorderColor || color.border),
-    ARROW_MARGIN_RIGHT: 4,
-    ARROW_FONT_SIZE: 8,
-    TREENODE_FONT_FAMILY: vars.fontCode || typography.fonts.mono,
-    TREENODE_FONT_SIZE: typography.size.s2 - 1,
-    TREENODE_LINE_HEIGHT: '18px',
-    TREENODE_PADDING_LEFT: 12,
-  },
-
-  ...(rest || {}),
-});
+      BASE_FONT_FAMILY: fontCode,
+      BASE_FONT_SIZE: typography.size.s2 - 1,
+      BASE_LINE_HEIGHT: '18px',
+      BASE_BACKGROUND_COLOR: 'transparent',
+      BASE_COLOR: textColor,
+      ARROW_COLOR: opacify(0.2, appBorderColor),
+      ARROW_MARGIN_RIGHT: 4,
+      ARROW_FONT_SIZE: 8,
+      TREENODE_FONT_FAMILY: fontCode,
+      TREENODE_FONT_SIZE: typography.size.s2 - 1,
+      TREENODE_LINE_HEIGHT: '18px',
+      TREENODE_PADDING_LEFT: 12,
+    },
+  };
+};

lib/theming/src/ensure.ts

@@ -3,42 +3,15 @@ import { logger } from '@storybook/client-logger';
 import { deletedDiff } from 'deep-object-diff';
 import { stripIndent } from 'common-tags';
 
-import mergeWith from 'lodash.mergewith';
-import isEqual from 'lodash.isequal';
-
 import light from './themes/light';
-import { Theme } from './base';
+import { Theme, ThemeVars } from './base';
+import { convert } from './create';
 
-const base = {
-  ...light,
-  animation: {},
-  brand: {},
-};
-
-// merge with concatenating arrays, but no duplicates
-const merge = (a: any, b: any) =>
-  mergeWith({}, a, b, (objValue: any, srcValue: any) => {
-    if (Array.isArray(srcValue) && Array.isArray(objValue)) {
-      srcValue.forEach(s => {
-        const existing = objValue.find(o => o === s || isEqual(o, s));
-        if (!existing) {
-          objValue.push(s);
-        }
-      });
-
-      return objValue;
-    }
-    if (Array.isArray(objValue)) {
-      return objValue;
-    }
-    return undefined;
-  });
-
-export const ensure = (input: any): Theme => {
+export const ensure = (input: ThemeVars): Theme => {
   if (!input) {
-    return light;
+    return convert(light);
   } else {
-    const missing = deletedDiff(base, input);
+    const missing = deletedDiff(light, input);
     if (Object.keys(missing).length) {
       logger.warn(
         stripIndent`
@@ -50,6 +23,6 @@ export const ensure = (input: any): Theme => {
       );
     }
 
-    return merge(light, input);
+    return convert(input);
   }
 };

lib/theming/src/tests/create.test.js

@@ -0,0 +1,145 @@
+import { create, convert } from '../create';
+import darkThemeVars from '../themes/dark';
+import lightThemeVars from '../themes/light';
+
+describe('create base', () => {
+  it('should create a theme with minimal viable theme', () => {
+    const result = create({ base: 'light' });
+
+    expect(result).toBeDefined();
+  });
+  it('should pick `light` when `base` is missing', () => {
+    const result = create({ base: undefined });
+
+    expect(result.base).toBe('light');
+  });
+  it('should pick `light` when nothing is given', () => {
+    const result = create();
+
+    expect(result.base).toBe('light');
+  });
+  it('should pick `dark` when base is dark', () => {
+    const result = create({ base: 'dark' });
+
+    expect(result.base).toBe('dark');
+  });
+  it('should pick `light` when base is a unknown value', () => {
+    const result = create({ base: 'foobar' });
+
+    expect(result.base).toBe('light');
+  });
+});
+
+describe('create merge', () => {
+  it('should merge colorPrimary', () => {
+    const result = create({ base: 'light', colorPrimary: 'orange' });
+
+    expect(result).toHaveProperty('colorPrimary', 'orange');
+  });
+  it('should merge colorSecondary', () => {
+    const result = create({ base: 'light', colorSecondary: 'orange' });
+
+    expect(result).toHaveProperty('colorSecondary', 'orange');
+  });
+  it('should merge appBg', () => {
+    const result = create({ base: 'light', appBg: 'orange' });
+
+    expect(result).toHaveProperty('appBg', 'orange');
+  });
+});
+
+describe('create brand', () => {
+  it('should have default', () => {
+    const result = create({ base: 'light' });
+
+    expect(result.brandImage).not.toBeDefined();
+    expect(result.brandTitle).not.toBeDefined();
+    expect(result.brandUrl).not.toBeDefined();
+  });
+  it('should accept null', () => {
+    const result = create({ base: 'light', brandTitle: null, brandUrl: null, brandImage: null });
+
+    expect(result).toMatchObject({
+      brandImage: null,
+      brandTitle: null,
+      brandUrl: null,
+    });
+  });
+  it('should accept values', () => {
+    const result = create({
+      base: 'light',
+      brandImage: 'https://placehold.it/350x150',
+      brandTitle: 'my custom storybook',
+      brandUrl: 'https://example.com',
+    });
+
+    expect(result).toMatchObject({
+      brandImage: 'https://placehold.it/350x150',
+      brandTitle: 'my custom storybook',
+      brandUrl: 'https://example.com',
+    });
+  });
+});
+
+describe('create extend', () => {
+  it('should allow custom props', () => {
+    const result = create(
+      {
+        base: 'light',
+      },
+      {
+        myCustomProperty: 42,
+      }
+    );
+
+    expect(result.myCustomProperty).toEqual(42);
+  });
+  it('should not allow overriding known properties with custom props', () => {
+    const result = create(
+      {
+        base: 'light',
+      },
+      {
+        base: 42,
+      }
+    );
+
+    expect(result.base).toEqual('light');
+  });
+});
+
+describe('convert', () => {
+  it('should return the default theme when no params', () => {
+    const result = convert();
+
+    expect(result.base).toEqual('light');
+  });
+  it('should return a valid dark theme', () => {
+    const result = convert(darkThemeVars);
+
+    expect(result.base).toEqual('dark');
+    expect(result).toMatchObject({
+      color: expect.objectContaining({
+        primary: '#FF4785',
+        secondary: '#1EA7FD',
+      }),
+      background: expect.objectContaining({
+        app: '#2f2f2f',
+      }),
+    });
+  });
+  it('should return a valid light theme', () => {
+    const result = convert(lightThemeVars);
+
+    expect(result.base).toEqual('light');
+    expect(result).toMatchObject({
+      color: expect.objectContaining({
+        primary: '#FF4785',
+        secondary: '#1EA7FD',
+      }),
+      background: expect.objectContaining({
+        app: '#F6F9FC',
+      }),
+    });
+  });
+});

lib/theming/src/themes/dark.ts

@@ -1,8 +1,6 @@
-import { create } from '../create';
-import { color, typography } from '../base';
+import { color, typography, ThemeVars } from '../base';
 
-export default create({
-  // Is this a light theme or a dark theme?
+const theme: ThemeVars = {
   base: 'dark',
 
   // Storybook-specific color palette
@@ -33,4 +31,6 @@ export default create({
   inputBorder: 'rgba(0,0,0,.3)',
   inputTextColor: color.lightest,
   inputBorderRadius: 4,
-});
+};
+
+export default theme;

lib/theming/src/themes/light.ts

@@ -1,8 +1,6 @@
-import { create } from '../create';
-import { color, typography, background } from '../base';
+import { color, typography, background, ThemeVars } from '../base';
 
-export default create({
-  // Is this a light theme or a dark theme?
+const theme: ThemeVars = {
   base: 'light',
 
   // Storybook-specific color palette
@@ -33,4 +31,6 @@ export default create({
   inputBorder: color.border,
   inputTextColor: color.darkest,
   inputBorderRadius: 4,
-});
+};
+
+export default theme;

lib/ui/package.json

@@ -27,9 +27,7 @@
     "@storybook/core-events": "5.0.0-rc.10",
     "@storybook/router": "5.0.0-rc.10",
     "@storybook/theming": "5.0.0-rc.10",
-    "eventemitter3": "^3.1.0",
     "fast-deep-equal": "^2.0.1",
-    "fuse.js": "^3.3.1",
     "fuzzy-search": "^3.0.1",
     "global": "^4.3.2",
     "history": "^4.7.2",

lib/ui/src/components/sidebar/SidebarHeading.stories.js

@@ -1,10 +1,11 @@
 import React from 'react';
-import { themes, ThemeProvider } from '@storybook/theming';
+import { themes, ThemeProvider, convert } from '@storybook/theming';
 import { action } from '@storybook/addon-actions';
 
 import SidebarHeading from './SidebarHeading';
 
-const { light: theme } = themes;
+const { light } = themes;
+const theme = convert(light);
 
 export default {
   component: SidebarHeading,

lib/ui/src/core/layout.js

@@ -1,14 +1,16 @@
 import pick from 'lodash.pick';
 
 import deprecate from 'util-deprecate';
+import deepEqual from 'fast-deep-equal';
 
-import { create, themes } from '@storybook/theming';
+import { themes } from '@storybook/theming';
 import merge from '../libs/merge';
 
 const deprecatedThemeOptions = {
   name: 'brandTitle',
   url: 'brandUrl',
 };
+
 const deprecatedLayoutOptions = {
   goFullScreen: 'isFullscreen',
   showStoriesPanel: 'showNav',
@@ -21,15 +23,14 @@ const deprecationMessage = (optionsMap, prefix) =>
     prefix ? `${prefix}'s` : ''
   } { ${Object.values(optionsMap).join(', ')} } instead.`;
 
-const applyDeprecatedThemeOptions = deprecate(({ name, url, theme }) => {
-  const vars = {
+const applyDeprecatedThemeOptions = deprecate(
+  ({ name, url }) => ({
     brandTitle: name,
     brandUrl: url,
     brandImage: null,
-  };
-
-  return { theme: create(vars, theme) };
-}, deprecationMessage(deprecatedThemeOptions));
+  }),
+  deprecationMessage(deprecatedThemeOptions)
+);
 
 const applyDeprecatedLayoutOptions = deprecate(options => {
   const layoutUpdate = {};
@@ -59,6 +60,23 @@ const checkDeprecatedLayoutOptions = options => {
   return {};
 };
 
+const initial = {
+  ui: {
+    enableShortcuts: true,
+    sortStoriesByKind: false,
+    sidebarAnimations: true,
+  },
+  layout: {
+    isToolshown: true,
+    isFullscreen: false,
+    showPanel: true,
+    showNav: true,
+    panelPosition: 'bottom',
+  },
+  theme: themes.light,
+};
+
+let hasSetOptions = false;
 export default function({ store }) {
   const api = {
     toggleFullscreen(toggled) {
@@ -132,7 +150,13 @@ export default function({ store }) {
     },
 
     setOptions: options => {
-      const { layout, ui, selectedPanel } = store.getState();
+      // The very first time the user sets their options, we don't consider what is in the store.
+      // At this point in time, what is in the store is what we *persisted*. We did that in order
+      // to avoid a FOUC (e.g. initial rendering the wrong theme while we waited for the stories to load)
+      // However, we don't want to have a memory about these things, otherwise we see bugs like the
+      // user setting a name for their storybook, persisting it, then never being able to unset it
+      // without clearing localstorage. See https://github.com/storybooks/storybook/issues/5857
+      const { layout, ui, selectedPanel, theme } = hasSetOptions ? store.getState() : initial;
 
       if (options) {
         const updatedLayout = {
@@ -144,40 +168,40 @@ export default function({ store }) {
         const updatedUi = {
           ...ui,
           ...pick(options, Object.keys(ui)),
+        };
+
+        const updatedTheme = {
+          ...theme,
+          ...options.theme,
           ...checkDeprecatedThemeOptions(options),
         };
 
-        store.setState(
-          {
-            layout: updatedLayout,
-            ui: updatedUi,
-            selectedPanel: options.panel || options.selectedPanel || selectedPanel,
-          },
-          { persistence: 'permanent' }
-        );
+        const modification = {};
+
+        if (!deepEqual(ui, updatedUi)) {
+          modification.ui = updatedUi;
+        }
+        if (!deepEqual(layout, updatedLayout)) {
+          modification.layout = updatedLayout;
+        }
+        if (!deepEqual(theme, updatedTheme)) {
+          modification.theme = updatedTheme;
+        }
+        if (!deepEqual(selectedPanel, options.selectedPanel)) {
+          modification.selectedPanel = options.selectedPanel;
+        }
+
+        if (Object.keys(modification).length) {
+          store.setState(modification, { persistence: 'permanent' });
+        }
+
+        hasSetOptions = true;
       }
     },
   };
 
-  const fromState = pick(store.getState(), 'layout', 'ui', 'selectedPanel');
-
-  const initial = {
-    ui: {
-      enableShortcuts: true,
-      sortStoriesByKind: false,
-      sidebarAnimations: true,
-      theme: themes.normal,
-    },
-    layout: {
-      isToolshown: true,
-      isFullscreen: false,
-      showPanel: true,
-      showNav: true,
-      panelPosition: 'bottom',
-    },
-  };
-
-  const state = merge(fromState, initial);
+  const persisted = pick(store.getState(), 'layout', 'ui', 'selectedPanel', 'theme');
+  const state = merge(initial, persisted);
 
   return { api, state };
 }

lib/ui/src/index.js

@@ -24,7 +24,7 @@ const Root = ({ provider }) => (
           {locationData => (
             <ManagerProvider key="manager" provider={provider} {...locationData}>
               {({ state }) => (
-                <ThemeProvider key="theme.provider" theme={ensureTheme(state.ui.theme)}>
+                <ThemeProvider key="theme.provider" theme={ensureTheme(state.theme)}>
                   <App key="app" viewMode={state.viewMode} layout={state.layout} />
                 </ThemeProvider>
               )}

lib/ui/src/settings/shortcuts.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { render } from 'react-testing-library';
 
-import { ThemeProvider, themes } from '@storybook/theming';
+import { ThemeProvider, themes, convert } from '@storybook/theming';
 import ShortcutsScreen from './shortcuts';
 
 // A limited set of keys we use in this test file
@@ -26,7 +26,7 @@ const makeActions = () => ({
 describe('ShortcutsScreen', () => {
   it('renders correctly', () => {
     const comp = shallow(
-      <ThemeProvider theme={themes.light}>
+      <ThemeProvider theme={convert(themes.light)}>
         <ShortcutsScreen shortcutKeys={shortcutKeys} {...makeActions()} />
       </ThemeProvider>
     );
@@ -35,7 +35,7 @@ describe('ShortcutsScreen', () => {
 
   it('handles a full mount', () => {
     const comp = render(
-      <ThemeProvider theme={themes.light}>
+      <ThemeProvider theme={convert(themes.light)}>
         <ShortcutsScreen shortcutKeys={shortcutKeys} {...makeActions()} />
       </ThemeProvider>
     );

scripts/compile-js.js

@@ -34,7 +34,9 @@ function babelify(options = {}) {
   const { watch = false, silent = true, errorCallback } = options;
 
   if (!fs.existsSync('src')) {
-    if (!silent) console.log('No src dir');
+    if (!silent) {
+      console.log('No src dir');
+    }
     return;
   }
 

yarn.lock

@@ -9556,11 +9556,6 @@ functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
 
-fuse.js@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.3.1.tgz#6e4762b1e1219f41bac8b7b723204d2b1d4cb8cf"
-  integrity sha512-Ranlb3nqh4Scw1ev5HvMoBUNHnhLceTGImSVf7ug87exLI75CfjhpCV5lFr1vHrAEn7fS80KZFaHCOznlGAG4A==
-
 fuzzy-search@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/fuzzy-search/-/fuzzy-search-3.0.1.tgz#14a4964508a9607d6e9a88818e7ff634108260b6"