From aff2a9638e2e20e6a7ca871af2ed421bb6657e70 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 4 Mar 2019 12:12:08 +0100 Subject: [PATCH 01/20] ADD parameters to compile-js to no longer copy .ts files into dist --- scripts/compile-js.js | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/compile-js.js b/scripts/compile-js.js index 1ebba2962c7..b9446eb67dc 100644 --- a/scripts/compile-js.js +++ b/scripts/compile-js.js @@ -10,6 +10,7 @@ function getCommand(watch) { '--ignore **/__mocks__/,**/tests/*,**/__tests__/,**/**.test.js,**/stories/,**/**.story.js,**/**.stories.js,**/__snapshots__', './src --out-dir ./dist', '--copy-files', + '--ignore *.ts', `--config-file ${path.resolve(__dirname, '../.babelrc.js')}`, ]; From 661481a05801c77992ed0f27e0cc3d0b0ce25b1d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 5 Mar 2019 10:02:50 +0100 Subject: [PATCH 02/20] FIX an issue when re-rendering lit-html elements after rendering a non-lit-html element It seems the mountNode becomes stateful after a render has occurred in lit-html. Since storybook is changing the dom beyond lit-html, it gets "confused" and throws an error because it's unable to remove some nodes. I guess it's trying to do reconciliation or cleanup, and it's missing state or it's state is inconsistent with the actual dom. By adding a extra inner root node that gets reset when switching stories we make lit-html mount correctly --- app/polymer/src/client/preview/render.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app/polymer/src/client/preview/render.js b/app/polymer/src/client/preview/render.js index c290eb4dc37..872d8eb7a9f 100644 --- a/app/polymer/src/client/preview/render.js +++ b/app/polymer/src/client/preview/render.js @@ -1,6 +1,6 @@ import { document } from 'global'; import { stripIndents } from 'common-tags'; -import { html, render, TemplateResult } from 'lit-html'; +import { render, TemplateResult } from 'lit-html'; const rootElement = document.getElementById('root'); @@ -33,9 +33,13 @@ export default function renderMain({ // Since we reuse `rootElement` for all stories, remove the stored instance first. // But forceRender means that it's the same story, so we want too keep the state in that case. if (!forceRender) { - render(html``, rootElement); + rootElement.innerHTML = '
'; + } else if (!rootElement.querySelector('[id="root-inner"]')) { + rootElement.innerHTML = '
'; } - render(element, rootElement); + const renderTo = rootElement.querySelector('[id="root-inner"]'); + + render(element, renderTo); } else { rootElement.innerHTML = ''; rootElement.appendChild(element); From 3eb19cac4a66eef54678fb7a736dc1d6a2c1e264 Mon Sep 17 00:00:00 2001 From: Vasily Malykhin Date: Sat, 9 Mar 2019 13:07:03 +0300 Subject: [PATCH 03/20] Fix #5785 - welcome component in dark theme --- .../storyshot.enzyme.test.js.snap | 4 +- ...t.snapshotWithOptionsFunction.test.js.snap | 4 +- .../__snapshots__/Welcome.stories.foo | 4 +- .../__snapshots__/Welcome.stories.storyshot | 4 +- app/angular/src/demo/welcome.component.ts | 4 +- app/react/src/demo/Welcome.js | 4 +- .../stories/__snapshots__/welcome.storyshot | 2 +- examples/ember-cli/app/styles/app.css | 4 +- .../html-kitchen-sink/stories/welcome.css | 4 +- examples/mithril-kitchen-sink/src/Welcome.js | 4 +- .../other-demo.stories.storyshot | 2 +- examples/preact-kitchen-sink/src/Welcome.js | 4 +- .../__snapshots__/index.stories.storyshot | 4 +- .../riot-kitchen-sink/src/stories/Welcome.tag | 4 +- .../src/stories/__snapshots__/index.storyshot | 16 +- .../src/stories/views/WelcomeView.svelte | 4 +- .../vue-kitchen-sink/src/stories/Welcome.vue | 4 +- .../MITHRIL/template/stories/Welcome.js | 4 +- .../PREACT/template/stories/Welcome.js | 4 +- .../RIOT/template/stories/Welcome.tag | 186 +++++++++--------- .../SFC_VUE/template/src/stories/Welcome.vue | 4 +- .../VUE/template/stories/Welcome.js | 4 +- .../stories/Welcome.js | 4 +- 23 files changed, 141 insertions(+), 141 deletions(-) diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap index 47f926ed977..cae5deca185 100644 --- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap +++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap @@ -120,10 +120,10 @@ exports[`Storyshots Welcome to Storybook 1`] = `
diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap index 4fdce3e5718..dd98d76c66d 100644 --- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap +++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap @@ -100,10 +100,10 @@ exports[`Storyshots Welcome to Storybook 1`] = `
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo index de427853143..1fda01fe66a 100644 --- a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo +++ b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo @@ -4,10 +4,10 @@ exports[`Storyshots Welcome to Storybook 1`] = `
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot index de427853143..1fda01fe66a 100644 --- a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot +++ b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot @@ -4,10 +4,10 @@ exports[`Storyshots Welcome to Storybook 1`] = `
diff --git a/app/angular/src/demo/welcome.component.ts b/app/angular/src/demo/welcome.component.ts index c8348edbcec..3697700f54b 100644 --- a/app/angular/src/demo/welcome.component.ts +++ b/app/angular/src/demo/welcome.component.ts @@ -46,10 +46,10 @@ import { Component, Output, EventEmitter } from '@angular/core'; styles: [ ` main { - margin: 15px; - max-width: 600; + padding: 15px; line-height: 1.4; fontfamily: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif; + background-color: #ffffff; } .note { diff --git a/app/react/src/demo/Welcome.js b/app/react/src/demo/Welcome.js index 687796bc5df..0c5a4cafaf5 100644 --- a/app/react/src/demo/Welcome.js +++ b/app/react/src/demo/Welcome.js @@ -5,10 +5,10 @@ const Main = props => (
); diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/welcome.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/welcome.storyshot index 2f536812779..2408d8cf68a 100644 --- a/examples/cra-kitchen-sink/src/stories/__snapshots__/welcome.storyshot +++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/welcome.storyshot @@ -2,7 +2,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `

Welcome to storybook diff --git a/examples/ember-cli/app/styles/app.css b/examples/ember-cli/app/styles/app.css index 82171a5b4ec..30fa0b480d1 100644 --- a/examples/ember-cli/app/styles/app.css +++ b/examples/ember-cli/app/styles/app.css @@ -30,10 +30,10 @@ a { } .main { - margin: 15px; - max-width: 600; + padding: 15px; line-height: 1.4; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; + background-color: #ffffff; } .logo { diff --git a/examples/html-kitchen-sink/stories/welcome.css b/examples/html-kitchen-sink/stories/welcome.css index ea42a498315..10b74ed6f9c 100644 --- a/examples/html-kitchen-sink/stories/welcome.css +++ b/examples/html-kitchen-sink/stories/welcome.css @@ -1,8 +1,8 @@ .main { - margin: 15px; - max-width: 600px; + padding: 15px; line-height: 1.4; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; + background-color: #ffffff; } .logo { diff --git a/examples/mithril-kitchen-sink/src/Welcome.js b/examples/mithril-kitchen-sink/src/Welcome.js index e85d5493797..1363fa0cbe6 100644 --- a/examples/mithril-kitchen-sink/src/Welcome.js +++ b/examples/mithril-kitchen-sink/src/Welcome.js @@ -6,10 +6,10 @@ const Main = { view: vnode => (
{vnode.children} diff --git a/examples/official-storybook/stories/__snapshots__/other-demo.stories.storyshot b/examples/official-storybook/stories/__snapshots__/other-demo.stories.storyshot index 730eefa2fba..49f1a87f0fc 100644 --- a/examples/official-storybook/stories/__snapshots__/other-demo.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/other-demo.stories.storyshot @@ -25,7 +25,7 @@ exports[`Storyshots Other|Demo/Button with text 1`] = ` exports[`Storyshots Other|Demo/Welcome to Storybook 1`] = `

Welcome to storybook diff --git a/examples/preact-kitchen-sink/src/Welcome.js b/examples/preact-kitchen-sink/src/Welcome.js index b83a12e2c40..53ec35fc114 100644 --- a/examples/preact-kitchen-sink/src/Welcome.js +++ b/examples/preact-kitchen-sink/src/Welcome.js @@ -6,10 +6,10 @@ const Main = props => (
); diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot index 660d4bdf571..9e0d000a05e 100644 --- a/examples/preact-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot +++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot @@ -27,10 +27,10 @@ exports[`Storyshots Welcome to Storybook 1`] = `
diff --git a/examples/riot-kitchen-sink/src/stories/Welcome.tag b/examples/riot-kitchen-sink/src/stories/Welcome.tag index a3965f4ff44..ace441a1086 100644 --- a/examples/riot-kitchen-sink/src/stories/Welcome.tag +++ b/examples/riot-kitchen-sink/src/stories/Welcome.tag @@ -58,10 +58,10 @@ - - - - + +
+

Welcome to STORYBOOK

+

+ This is a UI component dev environment for your app. +

+

+ We've added some basic stories inside the +
+ src/stories +
directory. +
A story is a single state of one or more UI components. You can have as many stories as you want. +
(Basically a story is like a visual test case.) +

+

+ See these sample +
+ stories +
for a component called +
+ Button . +

+

+ Just like that, you can add your own components as stories. +
You can also edit those components and see changes right away. +
(Try editing the + Button component located at + src/stories/Button.js.) +

+

+ This is just one thing you can do with Storybook. +
Have a look at the +
+ + Storybook + +
repo for more information. +

+

+ NOTE: +
Have a look at the +
+ .storybook/webpack.config.js +
to add webpack loaders and plugins you are using in this project. +

+
+ + + + + + diff --git a/lib/cli/generators/SFC_VUE/template/src/stories/Welcome.vue b/lib/cli/generators/SFC_VUE/template/src/stories/Welcome.vue index afdf3b3a26a..d87d5f04650 100644 --- a/lib/cli/generators/SFC_VUE/template/src/stories/Welcome.vue +++ b/lib/cli/generators/SFC_VUE/template/src/stories/Welcome.vue @@ -87,10 +87,10 @@