GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 21:01:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added improved "NoPreview" and "ErrorPreview"

Browse Source
This commit is contained in:
tvs 2017-11-03 13:56:28 +01:00
parent e2c8b6efd9
commit b9d7bfa78c
3 changed files with 92 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/polymer/src/client/preview/errorpreview.js Normal file
View File

@ -0,0 +1,37 @@
export const errorpreview = (message, stack) => `
<style>
.errordisplay_main {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 20;
background-color: rgb(187, 49, 49);
color: #FFF;
webkit-font-smoothing: antialiased;
}
.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;
}
.errordisplay_code {
font-size: 14;
width: 100vw;
overflow: auto;
}
</style>
<div class="errordisplay_main">
<div class="errordisplay_heading">${message}</div>
<pre class="errordisplay_code">
<code>
${stack}
</code>
</pre>
</div>
`;

42
app/polymer/src/client/preview/nopreview.js Normal file
View File

@ -0,0 +1,42 @@
export const nopreview = `
<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>
<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>
`;

18
app/polymer/src/client/preview/render.js
View File

@ -1,4 +1,7 @@
import { document } from 'global';
import { stripIndents } from 'common-tags';
import { nopreview } from './nopreview';
import { errorpreview } from './errorpreview';
let previousKind = '';
let previousStory = '';
@ -6,7 +9,7 @@ let previousStory = '';
const rootElement = document.getElementById('root');
export function renderError(error) {
rootElement.innerHTML = error;
rootElement.innerHTML = errorpreview(error.message, error.stack);
}
export function renderException(error) {
@ -29,11 +32,16 @@ export function renderMain(data, storyStore) {
kind: selectedKind,
story: selectedStory,
};
const component = story
? story(context)
: "<h1>“I'd far rather be happy than right any day.” ~ Douglas Adams (also no component) </h1>";
const component = story ? story(context) : nopreview;
if (!component) {
renderError(`No component found for ${selectedStory}`);
renderError({
message: `Expecting a Polymer component from the story: "${selectedStory}" of "${selectedKind}".`,
stack: stripIndents`
Did you forget to return the Polymer component from the story?
Use "() => '&lt;your-component-name&gt;&lt;/your-component-name\&gt;'" when defining the story.
`,
});
return;
}
rootElement.innerHTML = component;
}