ADD sections to state && REMOVE Preview from state

lib/components/src/nav/nav.js

@@ -115,7 +115,7 @@ const Nav = ({ title, url, notifications = [], sections = [] }) => (
         </Heading>
         {sections.length ? (
           <Bar>
-            {sections.map(({ id, name, active, path }) => (
+            {sections.map(({ id, name, path }) => (
               <Match key={id} path={path}>
                 {({ match }) => (
                   <BarItem key={id} active={match} path={path}>
@@ -128,7 +128,7 @@ const Nav = ({ title, url, notifications = [], sections = [] }) => (
         ) : null}
       </Head>
       <Main>
-        {sections.map(({ id, path, render }) => (
+        {sections.map(({ id, path, nav: render }) => (
           <Match key={id} path={path}>
             {({ match }) => (match ? render() : null)}
           </Match>

lib/components/src/preview/preview.js

@@ -32,7 +32,7 @@ class IFrame extends Component {
   }
 }
 
-const Frame = styled(IFrame)(
+const Frame = styled('div')(
   {
     position: 'absolute',
     top: 0,
@@ -43,7 +43,16 @@ const Frame = styled(IFrame)(
     transformOrigin: 'top left',
   },
   ({ grid = defaults.grid }) => grid,
-  ({ background = defaults.background }) => background
+  ({ background = defaults.background }) => background,
+  {
+    '& > iframe': {
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+    },
+  }
 );
 
 const FrameWrap = styled('div')(({ offset, full }) => ({
@@ -72,6 +81,8 @@ class Preview extends Component {
       url = 'https://example.com',
     } = this.props;
 
+    console.log(this.props, this.state);
+
     const { zoom } = this.state;
 
     const toolbarHeight = toolbar ? 40 : 0;
@@ -81,20 +92,23 @@ class Preview extends Component {
         <PointerBlock shown={isDragging} />
         <FrameWrap offset={toolbarHeight} full={full} id="storybook-preview-background">
           <Frame
-            id="storybook-preview-iframe"
-            title={id || 'preview'}
-            src={url}
-            allowFullScreen
             style={{
               width: `${100 * zoom}%`,
               height: `${100 * zoom}%`,
               transform: `scale(${1 / zoom})`,
             }}
-          />
+          >
+            <IFrame
+              id="storybook-preview-iframe"
+              title={id || 'preview'}
+              src={url}
+              allowFullScreen
+            />
+          </Frame>
         </FrameWrap>
         {toolbar && !full ? (
           <Toolbar
-            left={[<Address key="address" value={url} readonly />]}
+            left={[<Address key="address" value={url} readOnly />]}
             right={[
               <Zoom key="zoom" current={zoom} set={v => this.setState({ zoom: zoom * v })} />,
             ]}

lib/components/src/root/root.js

@@ -26,12 +26,15 @@ const Root = ({
   Nav,
   Preview,
   Panel,
+  sections,
   options = {
     active: 0,
     full: false,
     nav: true,
     panel: 'bottom',
   },
+  selectedKind,
+  selectedStory,
 }) => (
   <Reset>
     <ResizeDetector handleWidth>
@@ -43,7 +46,7 @@ const Root = ({
           case width < 500: {
             return <Mobile {...{ Nav, Preview, Panel, options }} />;
           }
-          case width > 500: {
+          case width >= 500: {
             return <Desktop {...{ Nav, Preview, Panel, options }} />;
           }
           default: {

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

@@ -1,11 +1,7 @@
-import { location } from 'global';
-import qs from 'qs';
-import React from 'react';
 import { Provider } from '@storybook/ui';
 import addons from '@storybook/addons';
 import createChannel from '@storybook/channel-postmessage';
 import Events from '@storybook/core-events';
-import Preview from './preview';
 
 export default class ReactProvider extends Provider {
   constructor() {
@@ -20,21 +16,21 @@ export default class ReactProvider extends Provider {
     return addons.getPanels();
   }
 
-  renderPreview(selectedKind, selectedStory) {
+  // renderPreview(selectedKind, selectedStory, props) {
-    const queryParams = {
+  //   const queryParams = {
-      selectedKind,
+  //     selectedKind,
-      selectedStory,
+  //     selectedStory,
-    };
+  //   };
 
-    // Add the react-perf query string to the iframe if that present.
+  //   // Add the react-perf query string to the iframe if that present.
-    if (/react_perf/.test(location.search)) {
+  //   if (/react_perf/.test(location.search)) {
-      queryParams.react_perf = '1';
+  //     queryParams.react_perf = '1';
-    }
+  //   }
 
-    const queryString = qs.stringify(queryParams);
+  //   const queryString = qs.stringify(queryParams);
-    const url = `iframe.html?${queryString}`;
+  //   const url = `iframe.html?${queryString}`;
-    return <Preview url={url} />;
+  //   return <Preview url={url} {...props} />;
-  }
+  // }
 
   handleAPI(api) {
     api.onStory((kind, story) => {

lib/ui/src/app.js

@@ -1,10 +1,10 @@
 import React from 'react';
 
 import Root from './containers/root';
-import Nav from './containers/nav';
 
-import Preview from './containers/preview_panel';
+import Nav from './containers/nav';
-import Panel from './containers/addon_panel';
+import Preview from './containers/preview';
+import Panel from './containers/panel';
 
 const App = () => <Root Preview={Preview} Nav={Nav} Panel={Panel} />;
 

lib/ui/src/containers/nav.js

@@ -3,37 +3,38 @@ import { inject } from 'mobx-react';
 
 import { Nav, Explorer } from '@storybook/components';
 
-import * as filters from '../libs/filters';
+// import * as filters from '../libs/filters';
-import {
+// import {
-  prepareStoriesForHierarchy,
+//   prepareStoriesForHierarchy,
-  resolveStoryHierarchy,
+//   resolveStoryHierarchy,
-  resolveStoryHierarchyRoots,
+//   resolveStoryHierarchyRoots,
-  createHierarchies,
+//   createHierarchies,
-} from '../libs/hierarchy';
+// } from '../libs/hierarchy';
 
-import { toNested } from '../libs/nav/nav';
+// import { toNested } from '../libs/nav/nav';
 
 export const mapper = store => {
   const {
-    stories: data,
+    sections,
-    selectedKind,
+    // stories: data,
-    selectedStory,
+    // selectedKind,
+    // selectedStory,
     uiOptions: {
       name,
       url,
 
-      sortStoriesByKind,
+      // sortStoriesByKind,
-      hierarchySeparator,
+      // hierarchySeparator,
-      hierarchyRootSeparator,
+      // hierarchyRootSeparator,
-      sidebarAnimations,
+      // sidebarAnimations,
     },
-    storyFilter,
+    // storyFilter,
   } = store;
 
-  const stories = toNested(data, {
+  // const stories = toNested(data, {
-    rootSeperator: hierarchyRootSeparator,
+  //   rootSeperator: hierarchyRootSeparator,
-    groupSeperator: hierarchySeparator,
+  //   groupSeperator: hierarchySeparator,
-  });
+  // });
 
   //
   // const preparedStories = prepareStoriesForHierarchy(
@@ -58,37 +59,36 @@ export const mapper = store => {
   return {
     title: name,
     url,
-    sections: [
+    sections,
-      {
+    // sections: [
-        id: 'components',
+    //   {
-        name: 'components',
+    //     id: 'components',
-        path: '/components',
+    //     name: 'components',
-        render: () => (
+    //     path: '/components',
-          <Explorer
+    //     render: () => (
-            stories={stories}
+    //       <Explorer
-            storyFilter={storyFilter}
+    //         stories={stories}
-            onStoryFilter={filter => store.setStoryFilter(filter)}
+    //         storyFilter={storyFilter}
-            selectedKind={selectedKind}
+    //         onStoryFilter={filter => store.setStoryFilter(filter)}
-            selectedStory={selectedStory}
+    //         selectedKind={selectedKind}
-          />
+    //         selectedStory={selectedStory}
-        ),
+    //       />
-        active: true,
+    //     ),
-      },
+    //   },
-      {
+    //   {
-        id: 'settings',
+    //     id: 'settings',
-        name: 'settings',
+    //     name: 'settings',
-        path: '/settings',
+    //     path: '/settings',
-        render: () => <div>Settings NAV</div>,
+    //     render: () => <div>Settings NAV</div>,
-        active: false,
+    //   },
-      },
+    // ],
-    ],
     notification: [],
 
-    selectedKind,
+    // selectedKind,
-    selectedStory,
+    // selectedStory,
     onSelectStory: (kind, story) => store.selectStory(kind, story),
-    storyFilter,
+    // storyFilter,
-    onStoryFilter: filter => store.setStoryFilter(filter),
+    // onStoryFilter: filter => store.setStoryFilter(filter),
   };
 };
 

lib/ui/src/containers/panel.js

@@ -9,4 +9,4 @@ export function mapper(store) {
   };
 }
 
-export default inject(({ store }, props) => mapper(store, props))(AddonPanel);
+export default inject(({ store }) => mapper(store))(AddonPanel);

lib/ui/src/containers/panel.test.js

@@ -1,6 +1,6 @@
-import { mapper } from './addon_panel';
+import { mapper } from './panel';
 
-describe('manager.ui.containers.addon_panel', () => {
+describe('manager.ui.containers.panel', () => {
   describe('mapper', () => {
     test('should give correct data', () => {
       const state = {

lib/ui/src/containers/preview.js

@@ -0,0 +1,20 @@
+import { inject } from 'mobx-react';
+import qs from 'qs';
+import { Preview } from '@storybook/components';
+
+export function mapper(store) {
+  const { selectedKind, selectedStory } = store;
+  const queryString = qs.stringify({
+    selectedKind,
+    selectedStory,
+  });
+  const url = `iframe.html?${queryString}`;
+
+  return {
+    url,
+  };
+}
+
+const P = inject(({ store }) => mapper(store))(Preview);
+
+export default P;

lib/ui/src/containers/preview_panel.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { inject } from 'mobx-react';
-// import { AddonPanel } from '@storybook/components';
-
-export function mapper(store) {
-  return {
-    Preview: store.Preview,
-  };
-}
-
-export default inject(({ store }, props) => mapper(store, props))(({ Preview }) => <Preview />);

lib/ui/src/containers/root.js

@@ -9,6 +9,7 @@ export default inject(stores => {
   const currentOptions = pick(shortcutOptions, 'panel', 'full', 'nav');
 
   return {
+    sections: state.sections,
     options: {
       ...currentOptions,
       ...uiOptions,

lib/ui/src/store.js

@@ -1,8 +1,10 @@
+import React from 'react';
 import { observable, action, set } from 'mobx';
 import pick from 'lodash.pick';
-import { themes } from '@storybook/components';
+import { themes, Explorer } from '@storybook/components';
 
 import { features } from './libs/key_events';
+import { toNested } from './libs/nav/nav';
 
 function ensureKind(stories, selectedKind) {
   if (stories.length === 0) return selectedKind;
@@ -64,8 +66,34 @@ const createStore = ({ provider }) => {
       },
       customQueryParams: {},
 
-      get Preview() {
+      get sections() {
-        return () => provider.renderPreview(this.selectedKind, this.selectedStory);
+        const {
+          stories: data,
+          uiOptions: { hierarchyRootSeparator, hierarchySeparator },
+        } = this;
+        return [
+          {
+            id: 'components',
+            name: 'components',
+            path: '/components',
+            nav: () => (
+              <Explorer
+                stories={toNested(data, {
+                  rootSeperator: hierarchyRootSeparator,
+                  groupSeperator: hierarchySeparator,
+                })}
+              />
+            ),
+            main: () => 'WHOOHOOO',
+          },
+          {
+            id: 'settings',
+            name: 'settings',
+            path: '/settings',
+            nav: () => <div>Settings NAV</div>,
+            main: () => <div>Settings MAIN</div>,
+          },
+        ];
       },
 
       selectedPanelValue: null,