Merge branch 'release/3.2' into fix-hmr-issue-in-cra-kitchen-sink

storybookjs · Jul 22, 2017 · 52adbc3 · 52adbc3
2 parents 07ece8e + 958e5d8
commit 52adbc3
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 19 deletions.
diff --git a/app/vue/src/client/preview/ErrorDisplay.vue b/app/vue/src/client/preview/ErrorDisplay.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="main">
-    <div class="heading">{{ message }}</div>
-    <pre class="code">
+  <div class="errordisplay_main">
+    <div class="errordisplay_heading">{{ message }}</div>
+    <pre class="errordisplay_code">
       <code>
         {{ stack }}
       </code>
@@ -26,7 +26,7 @@
 </script>
 
 <style>
-  .main {
+  .errordisplay_main {
     position: fixed;
     top: 0;
     bottom: 0;
@@ -38,15 +38,15 @@
     webkit-font-smoothing: antialiased;
   }
 
-  .heading {
+  .errordisplay_heading {
     font-size: 20;
     font-weight: 600;
     letter-spacing: 0.2;
     margin: 10px 0;
     font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
   }
   
-  .code {
+  .errordisplay_code {
     font-size: 14;
     width: 100vw;
     overflow: auto;

diff --git a/app/vue/src/client/preview/NoPreview.vue b/app/vue/src/client/preview/NoPreview.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="nopreview_wrapper">
+    <div class="nopreview_main">
+      <h1 class="nopreview_heading">No Preview</h1>
+      <p>Sorry, but you either have no stories or none are selected somehow.</p>
+      <ul>
+        <li>Please check the storybook config.</li>
+        <li>Try reloading the page.</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'no-preview',
+  }
+</script>
+
+<style>
+  .nopreview_wrapper {
+    position: fixed;
+    display: flex;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20;
+    align-content: center;
+    justify-content: center;
+    font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
+    webkit-font-smoothing: antialiased;
+  }
+  .nopreview_main {
+    margin: auto;
+    padding: 30px;
+    border-radius: 10px;
+    background: rgba(0,0,0,0.03);
+  }
+
+  .nopreview_heading {
+    font-size: 20;
+    font-weight: 600;
+    letter-spacing: 0.2;
+    margin: 10px 0;
+    text-align: center;
+  }
+  
+</style>
diff --git a/app/vue/src/client/preview/render.js b/app/vue/src/client/preview/render.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import ErrorDisplay from './ErrorDisplay.vue';
+import NoPreview from './NoPreview.vue';
 
 import { window } from 'global';
 import { stripIndents } from 'common-tags';
@@ -40,13 +41,6 @@ export function renderException(error) {
   logger.error(error.stack);
 }
 
-const NoPreview = {
-  el: '#root',
-  render (h) {
-    return h('p', ['No Preview Available!'])
-  }
-};
-
 function renderRoot(options) {
   if (err) {
     renderErrorDisplay(null); // clear
@@ -64,11 +58,6 @@ export function renderMain(data, storyStore) {
   const { selectedKind, selectedStory } = data;
 
   const story = storyStore.getStory(selectedKind, selectedStory);
-  if (!story) {
-    renderRoot(NoPreview);
-    logger.log('no story');
-    return null;
-  }
 
   // Unmount the previous story only if selectedKind or selectedStory has changed.
   // renderMain() gets executed after each action. Actions will cause the whole
@@ -88,7 +77,7 @@ export function renderMain(data, storyStore) {
     story: selectedStory,
   };
 
-  const component = story(context);
+  const component = story ? story(context) : NoPreview;
 
   if (!component) {
     const error = {