CHANGE loading uiOptions staticly from config

storybookjs · Oct 24, 2017 · fb1336e · fb1336e
1 parent c09d12b
commit fb1336e
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 46 deletions.
diff --git a/app/react/src/server/config/webpack.config.js b/app/react/src/server/config/webpack.config.js
@@ -50,7 +50,10 @@ export default function() {
         },
         template: require.resolve('../iframe.html.ejs'),
       }),
-      new webpack.DefinePlugin(loadEnv()),
+      new webpack.DefinePlugin({
+        ...loadEnv(),
+        STORYBOOK_CONFIG_PATH: JSON.stringify(path.resolve(getConfigDir())),
+      }),
       new webpack.HotModuleReplacementPlugin(),
       new CaseSensitivePathsPlugin(),
       new WatchMissingNodeModulesPlugin(nodeModulesPaths),
@@ -74,6 +77,9 @@ export default function() {
       // Add support to NODE_PATH. With this we could avoid relative path imports.
       // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
       modules: ['node_modules'].concat(nodePaths),
+      alias: {
+        '@storybook/config': path.resolve(getConfigDir()),
+      },
     },
     performance: {
       hints: false,

diff --git a/examples/cra-kitchen-sink/.storybook/.storybook.js b/examples/cra-kitchen-sink/.storybook/.storybook.js
@@ -0,0 +1,31 @@
+export const uiOptions = {
+  name: 'CRA Kitchen Sink',
+  url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink',
+  layout: {
+    direction: 'row',
+    items: [
+      {
+        size: 300,
+        resize: 'fixed',
+        component: 'addonTabs',
+        props: {
+          selected: 'action',
+        },
+      },
+      {
+        size: 800,
+        minSize: 400,
+        resize: 'stretch',
+        component: 'preview',
+        props: {
+          primary: true,
+        },
+      },
+      {
+        size: 300,
+        resize: 'dynamic',
+        component: 'explorer',
+      },
+    ],
+  },
+};
diff --git a/examples/cra-kitchen-sink/.storybook/config.js b/examples/cra-kitchen-sink/.storybook/config.js
@@ -2,50 +2,46 @@ import { configure, setAddon } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
 import infoAddon from '@storybook/addon-info';
 
-setOptions({
-  name: 'CRA Kitchen Sink',
-  url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink',
-  goFullScreen: false,
-  // showStoriesPanel: true,
-  // showAddonsPanel: true,
-  // showSearchBox: false,
-  // addonsPanelInRight: true,
-  sortStoriesByKind: false,
-  hierarchySeparator: /\/|\./,
-  layout: {
-    direction: 'row',
-    items: [
-      {
-        size: 300,
-        resize: 'fixed',
-        component: 'addonTabs',
-        props: {
-          selected: 'action',
-        },
-      },
-      {
-        size: 800,
-        minSize: 400,
-        resize: 'stretch',
-        component: 'preview',
-        props: {
-          primary: true,
-        },
-      },
-      {
-        size: 100,
-        minSize: 100,
-        resize: 'stretch',
-        component: 'preview',
-      },
-      {
-        size: 300,
-        resize: 'dynamic',
-        component: 'explorer',
-      },
-    ],
-  },
-});
+// setOptions({
+//   name: 'CRA Kitchen Sink',
+//   url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink',
+//   goFullScreen: false,
+//   sortStoriesByKind: false,
+//   hierarchySeparator: /\/|\./,
+//   layout: {
+//     direction: 'row',
+//     items: [
+//       {
+//         size: 300,
+//         resize: 'fixed',
+//         component: 'addonTabs',
+//         props: {
+//           selected: 'action',
+//         },
+//       },
+//       {
+//         size: 800,
+//         minSize: 400,
+//         resize: 'stretch',
+//         component: 'preview',
+//         props: {
+//           primary: true,
+//         },
+//       },
+//       {
+//         size: 100,
+//         minSize: 100,
+//         resize: 'stretch',
+//         component: 'preview',
+//       },
+//       {
+//         size: 300,
+//         resize: 'dynamic',
+//         component: 'explorer',
+//       },
+//     ],
+//   },
+// });
 
 setAddon(infoAddon);
 

diff --git a/lib/ui/src/modules/api/index.js b/lib/ui/src/modules/api/index.js
@@ -1,3 +1,7 @@
+// This resolves to a webpack alias to the storybook config folder
+// eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies
+import { uiOptions } from '@storybook/config/.storybook';
+
 import actions from './actions';
 import initApi from './configs/init_api';
 
@@ -39,6 +43,7 @@ export default {
           },
         ],
       },
+      ...uiOptions,
     },
   },
   load({ clientStore, provider }, _actions) {

diff --git a/lib/ui/src/modules/ui/routes.js b/lib/ui/src/modules/ui/routes.js
@@ -10,7 +10,7 @@ export default function(injectDeps, { clientStore, provider, domNode }) {
   // generate preview
   const Preview = () => {
     const state = clientStore.getAll();
-    debugger; // eslint-disable-line
+    // debugger; // eslint-disable-line
     const preview = provider.renderPreview(state.selectedKind, state.selectedStory);
     return preview;
   };