Merge pull request #8232 from storybookjs/core/setConfig-method

ADD method to set config for manager

app/react-native-server/src/client/manager/provider.js

@@ -46,6 +46,10 @@ export default class ReactProvider extends Provider {
     return addons.getElements(type);
   }
 
+  getConfig() {
+    return this.addons.getConfig();
+  }
+
   renderPreview() {
     return (
       <Consumer filter={mapper} pure>

examples/dev-kits/addons.js

@@ -1,2 +1,9 @@
 import '@storybook/addon-roundtrip/register';
 import '@storybook/addon-parameter/register';
+
+import { addons } from '@storybook/addons';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+  theme: themes.dark,
+});

lib/addons/src/index.ts

@@ -39,6 +39,10 @@ interface Elements {
   [key: string]: Collection;
 }
 
+interface Config {
+  [key: string]: any;
+}
+
 export class AddonStore {
   constructor() {
     this.promise = new Promise(res => {
@@ -50,6 +54,8 @@ export class AddonStore {
 
   private elements: Elements = {};
 
+  private config: Config = {};
+
   private channel: Channel | undefined;
 
   private promise: any;
@@ -96,6 +102,12 @@ export class AddonStore {
     collection[name] = { id: name, ...addon };
   };
 
+  setConfig = (value: Config) => {
+    Object.assign(this.config, value);
+  };
+
+  getConfig = () => this.config;
+
   register = (name: string, registerCallback: (api: API) => void): void => {
     if (this.loaders[name]) {
       logger.warn(`${name} was loaded twice, this could have bad side-effects`);

lib/api/src/modules/layout.ts

@@ -8,6 +8,7 @@ import { themes, ThemeVars } from '@storybook/theming';
 import merge from '../lib/merge';
 import { State } from '../index';
 import Store from '../store';
+import { Provider } from '../init-provider-api';
 
 export type PanelPositions = 'bottom' | 'right';
 
@@ -153,7 +154,7 @@ export const focusableUIElements = {
 };
 
 let hasSetOptions = false;
-export default function({ store }: { store: Store }) {
+export default function({ store, provider }: { store: Store; provider: Provider }) {
   const api = {
     toggleFullscreen(toggled?: boolean) {
       return store.setState((state: State) => {
@@ -248,14 +249,25 @@ export default function({ store }: { store: Store }) {
       }
     },
 
+    getInitialOptions() {
+      const { theme } = provider.getConfig();
+
+      return {
+        ...initial,
+        theme: theme || initial.theme,
+      };
+    },
+
     setOptions: (options: any) => {
       // 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/storybookjs/storybook/issues/5857
-      const { layout, ui, selectedPanel, theme } = hasSetOptions ? store.getState() : initial;
+      const { layout, ui, selectedPanel, theme } = hasSetOptions
+        ? store.getState()
+        : api.getInitialOptions();
 
       if (options) {
         const updatedLayout = {
@@ -301,5 +313,5 @@ export default function({ store }: { store: Store }) {
 
   const persisted = pick(store.getState(), 'layout', 'ui', 'selectedPanel', 'theme');
 
-  return { api, state: merge(initial, persisted) };
+  return { api, state: merge(api.getInitialOptions(), persisted) };
 }

lib/api/src/tests/layout.test.js

@@ -33,7 +33,7 @@ describe('layout API', () => {
         getState: () => currentState,
         setState: jest.fn(),
       };
-      layoutApi = initLayout({ store }).api;
+      layoutApi = initLayout({ store, provider: { getConfig: jest.fn(() => ({})) } }).api;
     });
 
     it('should not change selectedPanel if it is undefined in the options', () => {

lib/core/src/client/manager/provider.js

@@ -20,6 +20,10 @@ export default class ReactProvider extends Provider {
     return this.addons.getElements(type);
   }
 
+  getConfig() {
+    return this.addons.getConfig();
+  }
+
   handleAPI(api) {
     this.addons.loadAddons(api);
   }

lib/ui/src/app.stories.js

@@ -28,6 +28,10 @@ class FakeProvider extends Provider {
   handleAPI(api) {
     addons.loadAddons(api);
   }
+
+  getConfig() {
+    return {};
+  }
 }
 
 storiesOf('UI|Layout/App', module)

lib/ui/src/provider.js

@@ -6,4 +6,8 @@ export default class Provider {
   handleAPI() {
     throw new Error('Provider.handleAPI() is not implemented!');
   }
+
+  getConfig() {
+    throw new Error('Provider.getConfig() is not implemented!');
+  }
 }