From ede115cac264465d4e1b041271ac2f53fc8dd2d0 Mon Sep 17 00:00:00 2001 From: Aaron Pool Date: Thu, 29 Aug 2019 23:17:59 -0400 Subject: [PATCH 001/208] Addon-docs: support vue inline rendering --- addons/docs/package.json | 1 + addons/docs/src/blocks/Story.tsx | 13 +- addons/docs/src/frameworks/vue/config.js | 7 + .../__snapshots__/htmlshots.test.js.snap | 213 ++++++++ .../__snapshots__/preactshots.test.js.snap | 361 ++++++++++++++ .../__snapshots__/riotshots.test.js.snap | 302 +++++++++++ .../__snapshots__/svelteshots.test.js.snap | 337 +++++++++++++ .../vue-kitchen-sink/.storybook/config.js | 3 - .../__snapshots__/vueshots.test.js.snap | 470 +++++++++++++++++- .../vue-kitchen-sink/src/stories/Button.vue | 3 +- .../src/stories/addon-docs.stories.mdx | 12 +- .../src/stories/components/button.stories.js | 6 +- .../src/stories/custom-decorators.stories.js | 2 +- yarn.lock | 5 + 14 files changed, 1717 insertions(+), 18 deletions(-) diff --git a/addons/docs/package.json b/addons/docs/package.json index 6fc346a58c55..829329bb19de 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -26,6 +26,7 @@ "@babel/generator": "^7.4.0", "@babel/parser": "^7.4.2", "@babel/plugin-transform-react-jsx": "^7.3.0", + "@egoist/vue-to-react": "^1.1.0", "@mdx-js/loader": "^1.1.0", "@mdx-js/mdx": "^1.1.0", "@mdx-js/react": "^1.0.27", diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx index b098222c3e76..9c35eacfe1c4 100644 --- a/addons/docs/src/blocks/Story.tsx +++ b/addons/docs/src/blocks/Story.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Story, StoryProps as PureStoryProps } from '@storybook/components'; +import { StoryFn } from '@storybook/addons'; import { CURRENT_SELECTION } from './shared'; import { DocsContext, DocsContextProps } from './DocsContext'; @@ -24,6 +25,8 @@ const inferInlineStories = (framework: string): boolean => { switch (framework) { case 'react': return true; + case 'vue': + return true; default: return false; } @@ -43,12 +46,16 @@ export const getStoryProps = ( const { framework = null } = parameters || {}; // prefer props, then global options, then framework-inferred values - const { inlineStories = inferInlineStories(framework), iframeHeight = undefined } = - (parameters && parameters.docs) || {}; + const { + inlineStories = inferInlineStories(framework), + iframeHeight = undefined, + prepareForInline = (storyFn: StoryFn) => storyFn(), + } = (parameters && parameters.docs) || {}; + return { inline: typeof inline === 'boolean' ? inline : inlineStories, id: previewId, - storyFn: data && data.storyFn, + storyFn: prepareForInline ? () => prepareForInline(data && data.storyFn) : data && data.storyFn, height: height || iframeHeight, title: data && data.name, }; diff --git a/addons/docs/src/frameworks/vue/config.js b/addons/docs/src/frameworks/vue/config.js index 76f22f9cb6e7..bab4d2855eda 100644 --- a/addons/docs/src/frameworks/vue/config.js +++ b/addons/docs/src/frameworks/vue/config.js @@ -1,4 +1,7 @@ /* eslint-disable import/no-extraneous-dependencies */ +import React from 'react'; +import { render } from 'react-dom'; +import toReact from '@egoist/vue-to-react'; import { addParameters } from '@storybook/vue'; import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'; @@ -6,5 +9,9 @@ addParameters({ docs: { container: DocsContainer, page: DocsPage, + prepareForInline: storyFn => { + const Story = toReact(storyFn()); + return ; + }, }, }); diff --git a/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap b/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap index b5409d3afc18..1038dec14be0 100644 --- a/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap +++ b/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap @@ -1,5 +1,66 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Storyshots Addons|Actions Decorated actions + config 1`] = ` + +`; + +exports[`Storyshots Addons|Actions Decorated actions 1`] = ` + +`; + +exports[`Storyshots Addons|Actions Hello World 1`] = ` + +`; + +exports[`Storyshots Addons|Actions Multiple actions + config 1`] = ` + +`; + +exports[`Storyshots Addons|Actions Multiple actions 1`] = ` + +`; + +exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = ` + +`; + +exports[`Storyshots Addons|Actions Multiple actions, object 1`] = ` + +`; + +exports[`Storyshots Addons|Actions Multiple actions, selector 1`] = ` + + +`; + exports[`Storyshots Addons|Actions Story 1 1`] = ` + + +`; + exports[`Storyshots Addons|Events Logger 1`] = ` @@ -100,6 +193,63 @@ exports[`Storyshots Addons|Events Logger 1`] = ` exports[`Storyshots Addons|Jest With Tests 1`] = `This story shows test results`; +exports[`Storyshots Addons|Jest withTests 1`] = `This story shows test results`; + +exports[`Storyshots Addons|Knobs All knobs 1`] = ` +
+ + +

+ My name is Jane, +

+ + +

+ today is January 20, 2017 +

+ + +

+ I have a stock of 20 apples, costing $2.25 each. +

+ + +

+ Also, I have: +

+ + +
    +
  • + Laptop +
  • +
  • + Book +
  • +
  • + Whiskey +
  • +
+ + +

+ Nice to meet you! +

+ + +
+`; + +exports[`Storyshots Addons|Knobs CSS transitions 1`] = ` +

+ John Doe +

+`; + exports[`Storyshots Addons|Knobs DOM 1`] = `

John Doe @@ -169,6 +319,22 @@ exports[`Storyshots Addons|Knobs Story 4 1`] = ` exports[`Storyshots Addons|Knobs Story 5 1`] = `<img src=x onerror="alert('XSS Attack')" >`; +exports[`Storyshots Addons|Knobs XSS safety 1`] = `<img src=x onerror="alert('XSS Attack')" >`; + +exports[`Storyshots Addons|Notes Simple note 1`] = ` +

+ + + + + This is a fragment of HTML + + + + +

+`; + exports[`Storyshots Addons|Notes Story 1 1`] = `

@@ -185,6 +351,8 @@ exports[`Storyshots Addons|Notes Story 1 1`] = ` exports[`Storyshots Addons|a11y Default 1`] = ` +`; + exports[`Storyshots Addons|a11y Label 1`] = ` +`; + +exports[`Storyshots Demo effect 1`] = ` + +`; + +exports[`Storyshots Demo heading 1`] = ` +

+ Hello World +

+`; + +exports[`Storyshots Demo headings 1`] = ` +
+

+ Hello World +

+

+ Hello World +

+

+ Hello World +

+

+ Hello World +

+
+`; + exports[`Storyshots Welcome Welcome 1`] = `
`; +exports[`Storyshots Addons|Actions Action and method 1`] = ` + +`; + +exports[`Storyshots Addons|Actions Action only 1`] = ` + +`; + exports[`Storyshots Addons|Actions Multiple Actions 1`] = ` +`; + +exports[`Storyshots Addons|Actions Multiple actions, object 1`] = ` + +`; + exports[`Storyshots Addons|Backgrounds Example 1 1`] = ` +
+ +`; + exports[`Storyshots Addons|Centered Button 1`] = `
`; +exports[`Storyshots Addons|Contexts Simple CSS Theming 1`] = ` +
+
+ I'm a children of the injected 'div' (where provides a theming context). +
+
+`; + exports[`Storyshots Addons|Contexts Simple Css Theming 1`] = `
`; +exports[`Storyshots Addons|Knobs All knobs 1`] = ` +
+

+ My name is Jane, +

+

+ today is January 20, 2017 +

+

+ I have a stock of 20 apples, costing $2.25 each. +

+

+ Also, I have: +

+
    +
  • + Laptop +
  • +
  • + Book +
  • +
  • + Whiskey +
  • +
+

+ Nice to meet you! +

+
+`; + exports[`Storyshots Addons|Knobs Simple 1`] = `
I am John Doe and I'm 44 years old. @@ -151,6 +271,15 @@ exports[`Storyshots Addons|Links Go To Welcome 1`] = ` `; +exports[`Storyshots Addons|Links Go to welcome 1`] = ` + +`; + exports[`Storyshots Addons|Notes Note With Html 1`] = `

@@ -167,6 +296,22 @@ exports[`Storyshots Addons|Notes Note With Html 1`] = `

`; +exports[`Storyshots Addons|Notes Note with HTML 1`] = ` +

+ + 🤔😳😯😮 + +
+ + 😄😩😓😱 + +
+ + 🤓😑😶😊 + +

+`; + exports[`Storyshots Addons|Notes Simple Note 1`] = `

@@ -175,6 +320,14 @@ exports[`Storyshots Addons|Notes Simple Note 1`] = `

`; +exports[`Storyshots Addons|Notes Simple note 1`] = ` +

+ + Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna. + +

+`; + exports[`Storyshots Button With Some Emoji 1`] = ` +`; + +exports[`Storyshots Button with text 1`] = ` + +`; + exports[`Storyshots Welcome To Storybook 1`] = `
`; + +exports[`Storyshots Welcome to Storybook 1`] = ` +
+

+ Welcome to storybook for Preact +

+ Preact logo +

+ This is a UI component dev environment for your Preact 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 + + 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 + + stories located at + + src/stories/index.js + + .) +

+

+ Usually we create stories with smaller UI components in the app. +
+ Have a look at the + + Writing Stories + + section in our documentation. +

+

+ + 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/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap b/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap index 3fb6742a95e7..ecb17e7f6741 100644 --- a/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap +++ b/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap @@ -14,6 +14,20 @@ exports[`Storyshots Addon|Actions Action Only 1`] = `
`; +exports[`Storyshots Addon|Actions Action only 1`] = ` +
+ +
+`; + exports[`Storyshots Addon|Actions Multiple Actions 1`] = `
`; +exports[`Storyshots Addon|Actions Multiple actions 1`] = ` +
+ +
+`; + exports[`Storyshots Addon|Backgrounds Story 1 1`] = `
`; +exports[`Storyshots Addon|Backgrounds story 1 1`] = ` +
+ + + +
+`; + +exports[`Storyshots Addon|Backgrounds story 2 1`] = ` +
+ + + +
+`; + exports[`Storyshots Addon|Knobs All Knobs 1`] = `
`; +exports[`Storyshots Addon|Knobs All knobs 1`] = ` +
+ +
+ +

+ My name is Jane, +

+ +

+ today is January 20, 2017 +

+ +

+ I have a stock of 20 apples, costing $2.25 each. +

+ +

+ Also, I have: +

+ +
    + +
  • + Laptop +
  • +
  • + Book +
  • +
  • + Whiskey +
  • + +
+ +

+ Nice to meet you! +

+ +
+
+
+`; + exports[`Storyshots Addon|Knobs Simple 1`] = `
`; +exports[`Storyshots Addon|Knobs XSS safety 1`] = ` +
+
+ <img src=x onerror="alert('XSS Attack')" > +
+
+`; + exports[`Storyshots Addon|Knobs Xss Safety 1`] = `
`; +exports[`Storyshots Addon|Links Go to welcome 1`] = ` +
+ +
+`; + exports[`Storyshots Addon|Notes Note With Html 1`] = `
`; +exports[`Storyshots Addon|Notes Note with HTML 1`] = ` +
+
+

+ 🤔😳😯😮 +
+ 😄😩😓😱 +
+ 🤓😑😶😊 +

+
+
+`; + exports[`Storyshots Addon|Notes Simple Note 1`] = `
`; +exports[`Storyshots Addon|Notes Simple note 1`] = ` +
+

+ + Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna. + +

+
+`; + exports[`Storyshots Core|Parameters Passed To Story 1`] = `
`; +exports[`Storyshots Core|Parameters passed to story 1`] = ` +
+
+ Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","storyParameter":"storyParameter","id":"root","dataIs":"parameters"} +
+
+`; + exports[`Storyshots Story|How to create a story Built As String 1`] = `
`; +exports[`Storyshots Story|How to create a story built as string 1`] = ` +
+ +
+ simple test +
+
+
+`; + +exports[`Storyshots Story|How to create a story built from raw import 1`] = ` +
+
+ simple test (without parameter). Oh, by the way (... well, nothing) +
+
+`; + +exports[`Storyshots Story|How to create a story built from tags and template 1`] = ` +
+ +
+ simple test (with a parameter). Oh, by the way (value is mapped to riotValue) +
+
+
+`; + +exports[`Storyshots Story|How to create a story built from the precompilation 1`] = ` +
+
+ yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates) +
+
+`; + +exports[`Storyshots Story|How to create a story built with tag 1`] = ` +
+
+ simple test (with a parameter) +
+
+`; + +exports[`Storyshots Story|How to create a story tags, template and tagConstructor at once 1`] = ` +
+ +
+ HACKED : true ; simple test (with a parameter). Oh, by the way (value is mapped to riotValue) +
+
+
+`; + +exports[`Storyshots Story|How to create a story the mount instruction is not necessary 1`] = ` +
+
+ yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates) +
+
+`; + +exports[`Storyshots Story|How to create a story the opts value is not necessary 1`] = ` +
+
+ yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates) +
+
+`; + exports[`Storyshots Story|Nest tags Matriochka 1`] = `
`; + +exports[`Storyshots Story|Nest tags Three tags 1`] = ` +
+ + +

+ Simple title +

+
+ +
+ Simple Content +
+
+
+
+`; diff --git a/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap b/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap index 1e1b083a99ca..486ec03f974b 100644 --- a/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap +++ b/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap @@ -38,6 +38,67 @@ exports[`Storyshots Addon|Actions Action On View Method 1`] = ` + You clicked + : + 0 + + +

+ A little text to show this is a view. +

+ +

+ If we need to test components in a Svelte environment, for instance to test slot behaviour, +

+ +

+ then wrapping the component up in a view +

+ +

+ made just for the story is the simplest way to achieve this. +

+ +`; + +exports[`Storyshots Addon|Actions Action on component method 1`] = ` +
+ +
+`; + +exports[`Storyshots Addon|Actions Action on view method 1`] = ` +
+

+ Button view +

+ + + +

+ A little text to show this is a view. +

+ +

+ If we need to test components in a Svelte environment, for instance to test slot behaviour, +

+ +

+ then wrapping the component up in a view +

+ +

+ made just for the story is the simplest way to achieve this. +

+
+`; + +exports[`Storyshots Addon|Backgrounds story 1 1`] = ` +
+

+ Button view +

+ + +
+`; + +exports[`Storyshots Addon|Centered rounded 1`] = ` +
+ +
+`; + +exports[`Storyshots Addon|Centered with action 1`] = ` +
+
`; @@ -183,6 +324,34 @@ exports[`Storyshots Addon|Links Go To Welcome View 1`] = ` `; +exports[`Storyshots Addon|Links Go to welcome view 1`] = ` +
+
+

+ Link Action +

+ + +
+
+`; + exports[`Storyshots Addon|Notes Note With Html 1`] = `
+ +

+ A little text to show this is a view. +

+ +

+ If we need to test components in a Svelte environment, for instance to test slot behaviour, +

+ +

+ then wrapping the component up in a view +

+ +

+ made just for the story is the simplest way to achieve this. +

+
+`; + +exports[`Storyshots Addon|Notes Note with HTML 1`] = ` +
+

+ Button view +

+ + + +

+ A little text to show this is a view. +

+ +

+ If we need to test components in a Svelte environment, for instance to test slot behaviour, +

+ +

+ then wrapping the component up in a view +

+ +

+ made just for the story is the simplest way to achieve this. +

+
+`; + +exports[`Storyshots Addon|Notes Simple note 1`] = ` +
+

+ Button view +

+ + + +

+ A little text to show this is a view. +

+ +

+ If we need to test components in a Svelte environment, for instance to test slot behaviour, +

+ +

+ then wrapping the component up in a view +

+ +

+ made just for the story is the simplest way to achieve this. +

+
+`; + +exports[`Storyshots Button rounded 1`] = ` +
+

+ Button view +

+ + + +

+ A little text to show this is a view. +

+ +

+ If we need to test components in a Svelte environment, for instance to test slot behaviour, +

+ +

+ then wrapping the component up in a view +

+ +

+ made just for the story is the simplest way to achieve this. +

+
+`; + +exports[`Storyshots Button square 1`] = ` +
+

+ Button view +

+ + `; +exports[`Storyshots Addon|Actions Action and method 1`] = ` + +`; + +exports[`Storyshots Addon|Actions Action only 1`] = ` + +`; + exports[`Storyshots Addon|Actions Multiple Actions 1`] = ` +`; + +exports[`Storyshots Addon|Actions Multiple actions, object 1`] = ` + +`; + exports[`Storyshots Addon|Backgrounds Story 1 1`] = ` `; +exports[`Storyshots Addon|Backgrounds story 1 1`] = ` + +`; + +exports[`Storyshots Addon|Backgrounds story 2 1`] = ` + +`; + exports[`Storyshots Addon|Centered Rounded 1`] = `
`; +exports[`Storyshots Addon|Centered rounded 1`] = ` +
+
+ +
+
+`; + exports[`Storyshots Addon|Contexts Languages 1`] = `
`; +exports[`Storyshots Addon|Contexts Simple CSS Theming 1`] = ` +
+ + I'm a children of the injected 'div' (where provides a theming context). + +
+`; + exports[`Storyshots Addon|Contexts Simple Css Theming 1`] = `
`; +exports[`Storyshots Addon|Knobs All knobs 1`] = ` +
+

+ My name is Jane, +

+ +

+ today is January 20, 2017 +

+ +

+ I have a stock of 20 apples, costing $2.25 each. +

+ +

+ Also, I have: +

+ +
    +
  • + Laptop +
  • +
  • + Book +
  • +
  • + Whiskey +
  • +
+ +

+ Nice to meet you! +

+
+`; + exports[`Storyshots Addon|Knobs Simple 1`] = `
I am John Doe and I'm 40 years old.
`; +exports[`Storyshots Addon|Knobs XSS safety 1`] = ` +
+ <img src=x onerror="alert('XSS Attack')" > +
+`; + exports[`Storyshots Addon|Knobs Xss Safety 1`] = `
<img src=x onerror="alert('XSS Attack')" > @@ -146,6 +265,15 @@ exports[`Storyshots Addon|Links Go To Welcome 1`] = ` `; +exports[`Storyshots Addon|Links Go to welcome 1`] = ` + +`; + exports[`Storyshots Addon|Notes Note With Html 1`] = `

🤔😳😯😮 @@ -156,6 +284,16 @@ exports[`Storyshots Addon|Notes Note With Html 1`] = `

`; +exports[`Storyshots Addon|Notes Note with HTML 1`] = ` +

+ 🤔😳😯😮 +
+ 😄😩😓😱 +
+ 🤓😑😶😊 +

+`; + exports[`Storyshots Addon|Notes Simple Note 1`] = `

@@ -164,6 +302,14 @@ exports[`Storyshots Addon|Notes Simple Note 1`] = `

`; +exports[`Storyshots Addon|Notes Simple note 1`] = ` +

+ + Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna. + +

+`; + exports[`Storyshots App App 1`] = `
`; +exports[`Storyshots Button rounded 1`] = ` + +`; + +exports[`Storyshots Button square 1`] = ` + +`; + exports[`Storyshots Core|Parameters Passed To Story 1`] = `
- Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{"iframeHeight":"60px"},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter","displayName":"passed to story"} + Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter","displayName":"passed to story"} +
+`; + +exports[`Storyshots Core|Parameters passed to story 1`] = ` +
+ Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
`; @@ -293,6 +463,15 @@ exports[`Storyshots Core|Template String Only 1`] = ` `; +exports[`Storyshots Core|Template string only 1`] = ` + +`; + exports[`Storyshots Custom|Decorator for Vue Render 1`] = `
+
+
+`; + +exports[`Storyshots Custom|Decorator for Vue render 1`] = ` +
+
+ +
+
+`; + +exports[`Storyshots Custom|Decorator for Vue template 1`] = ` +
+
+ +
+
+`; + +exports[`Storyshots Custom|Decorator for Vue withData 1`] = ` +
+
+
+      {
+  "id": "custom-decorator-for-vue--withdata",
+  "kind": "Custom|Decorator for Vue",
+  "name": "withData",
+  "story": "withData",
+  "customContext": 52,
+  "parameters": {
+    "options": {
+      "hierarchyRootSeparator": {},
+      "hierarchySeparator": {}
     },
     "globalParameter": "globalParameter",
     "framework": "vue",
@@ -454,6 +693,92 @@ exports[`Storyshots Custom|Method for rendering Vue Whatever You Want 1`] = `
 
 `;
 
+exports[`Storyshots Custom|Method for rendering Vue pre-registered component 1`] = `
+

+ + This component was pre-registered in .storybook/config.js + +
+ + +

+`; + +exports[`Storyshots Custom|Method for rendering Vue render + component 1`] = ` + +`; + +exports[`Storyshots Custom|Method for rendering Vue render 1`] = ` +
+ renders a div with some text in it.. +
+`; + +exports[`Storyshots Custom|Method for rendering Vue template + component 1`] = ` + +`; + +exports[`Storyshots Custom|Method for rendering Vue template + methods 1`] = ` +

+ + Clicking the button will navigate to another story using the 'addon-links' + +
+ + +

+`; + +exports[`Storyshots Custom|Method for rendering Vue template 1`] = ` +
+

+ A template +

+ +

+ rendered in vue in storybook +

+
+`; + +exports[`Storyshots Custom|Method for rendering Vue vuex + actions 1`] = ` + +`; + +exports[`Storyshots Custom|Method for rendering Vue whatever you want 1`] = ` + +`; + exports[`Storyshots Welcome Welcome 1`] = `
`; + +exports[`Storyshots Welcome welcome 1`] = ` +
+

+ Welcome to Storybook for Vue +

+ +

+ + This is a UI component dev environment for your vue 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 + + .) + +

+ +

+ + Usually we create stories with smaller UI components in the app. +
+ + Have a look at the + + + + Writing Stories + + + + section in our documentation. + +

+ +

+ + 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/examples/vue-kitchen-sink/src/stories/Button.vue b/examples/vue-kitchen-sink/src/stories/Button.vue index 511599e57c73..940ce7b11004 100644 --- a/examples/vue-kitchen-sink/src/stories/Button.vue +++ b/examples/vue-kitchen-sink/src/stories/Button.vue @@ -1,9 +1,10 @@ diff --git a/lib/core/src/server/templates/base-preview-head.html b/lib/core/src/server/templates/base-preview-head.html index d671b0f1c31b..362e41eeb4d3 100644 --- a/lib/core/src/server/templates/base-preview-head.html +++ b/lib/core/src/server/templates/base-preview-head.html @@ -67,12 +67,13 @@ /* globals window */ /* eslint-disable no-underscore-dangle */ try { - if (window.parent !== window) { - window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__; - window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__; + if (window.top !== window) { + window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__; + window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__; + window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document; } } catch (e) { // eslint-disable-next-line no-console - console.warn('unable to connect to parent frame for connecting dev tools'); + console.warn('unable to connect to top frame for connecting dev tools'); } From 59fa1589e4f77bd066a56790bb55e441753586e7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 3 Oct 2019 15:29:08 +0200 Subject: [PATCH 085/208] FIX removed spaced --- addons/info/src/components/types/PropertyLabel.js | 2 +- addons/jest/src/components/Panel.tsx | 2 +- addons/knobs/src/components/Panel.tsx | 2 +- addons/notes/src/Panel.tsx | 2 +- .../__snapshots__/storyshot.enzyme.test.js.snap | 8 ++++---- .../__snapshots__/storyshot.shallow.test.js.snap | 8 ++++---- .../storyshot.shallowWithOptions.test.js.snap | 8 ++++---- ...toryshot.snapshotWithOptionsFunction.test.js.snap | 8 ++++---- .../__snapshots__/Welcome.stories.foo | 8 ++++---- .../__snapshots__/Welcome.stories.storyshot | 8 ++++---- .../src/client/manager/components/PreviewHelp.js | 2 +- app/react/src/demo/Welcome.tsx | 8 ++++---- docs/src/components/Homepage/Platforms/index.js | 3 +-- .../cra-kitchen-sink/src/stories/button.stories.js | 2 +- examples/mithril-kitchen-sink/src/Welcome.js | 6 +++--- .../__snapshots__/preactshots.test.js.snap | 8 ++++---- examples/preact-kitchen-sink/src/Welcome.js | 8 ++++---- .../src/stories/addon-a11y.stories.js | 2 ++ .../generators/MITHRIL/template/stories/Welcome.js | 12 ++++++------ .../generators/PREACT/template/stories/Welcome.js | 8 ++++---- lib/cli/generators/RAX/template/stories/Welcome.js | 8 ++++---- .../src/placeholder/placeholder.stories.tsx | 2 +- .../src/typography/DocumentWrapper.stories.tsx | 2 +- lib/core/src/client/preview/NoDocs.js | 2 +- lib/ui/src/components/sidebar/SidebarStories.tsx | 2 +- 25 files changed, 66 insertions(+), 65 deletions(-) diff --git a/addons/info/src/components/types/PropertyLabel.js b/addons/info/src/components/types/PropertyLabel.js index 6ef2c3b4c33e..d5ad3d896fab 100644 --- a/addons/info/src/components/types/PropertyLabel.js +++ b/addons/info/src/components/types/PropertyLabel.js @@ -13,7 +13,7 @@ const PropertyLabel = ({ property, required }) => { return ( {property} - {required ? '' : '?'}: + {required ? '' : '?'}:  ); }; diff --git a/addons/jest/src/components/Panel.tsx b/addons/jest/src/components/Panel.tsx index 0161c3197fa2..de8f6fe60718 100644 --- a/addons/jest/src/components/Panel.tsx +++ b/addons/jest/src/components/Panel.tsx @@ -272,7 +272,7 @@ const Panel = ({ tests }: PanelProps) => ( No tests found - Learn how to + Learn how to  { No knobs found - Learn how to + Learn how to  { No notes yet - Learn how to + Learn how to  - for a component called + for a component called  - stories located at + stories located at  Usually we create stories with smaller UI components in the app.
- Have a look at the + Have a look at the  - section in our documentation. +  section in our documentation.

stories - for a component called + for a component called  Button @@ -137,7 +137,7 @@ exports[`Storyshots Welcome to Storybook 1`] = ` Button - stories located at + stories located at  src/stories/index.js @@ -146,7 +146,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `

Usually we create stories with smaller UI components in the app.
- Have a look at the + Have a look at the  Writing Stories - section in our documentation. +  section in our documentation.

diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap index 1a8d84f8421e..d7295c96a2eb 100644 --- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap +++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap @@ -122,7 +122,7 @@ exports[`Storyshots Welcome to Storybook 1`] = ` > stories - for a component called + for a component called  Button @@ -137,7 +137,7 @@ exports[`Storyshots Welcome to Storybook 1`] = ` Button - stories located at + stories located at  src/stories/index.js @@ -146,7 +146,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `

Usually we create stories with smaller UI components in the app.
- Have a look at the + Have a look at the  Writing Stories - section in our documentation. +  section in our documentation.

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 6d979e733d16..4f59d0d077d4 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 @@ -159,7 +159,7 @@ exports[`Storyshots Welcome to Storybook 1`] = ` > stories - for a component called + for a component called  Button - stories located at + stories located at  Usually we create stories with smaller UI components in the app.
- Have a look at the + Have a look at the  Writing Stories - section in our documentation. +  section in our documentation.

stories - for a component called + for a component called  Button - stories located at + stories located at  Usually we create stories with smaller UI components in the app.
- Have a look at the + Have a look at the  Writing Stories - section in our documentation. +  section in our documentation.

stories - for a component called + for a component called  Button - stories located at + stories located at  Usually we create stories with smaller UI components in the app.
- Have a look at the + Have a look at the  Writing Stories - section in our documentation. +  section in our documentation.

( stories as you want. Basically a story is like a visual test case.

- To see your Storybook stories on the device, you should start your mobile app for the + To see your Storybook stories on the device, you should start your mobile app for the  <platform> of your choice (typically ios or android). (Note that due to an implementation detail, your stories will only show up in the left-pane after your device has connected to this storybook server.) diff --git a/app/react/src/demo/Welcome.tsx b/app/react/src/demo/Welcome.tsx index 204ab8fbd748..42ed1d0a9b4d 100644 --- a/app/react/src/demo/Welcome.tsx +++ b/app/react/src/demo/Welcome.tsx @@ -142,7 +142,7 @@ const Welcome = ({ showApp }: { showApp: () => void }) => ( (Basically a story is like a visual test case.)

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

@@ -150,14 +150,14 @@ const Welcome = ({ showApp }: { showApp: () => void }) => (
You can also edit those components and see changes right away.
- (Try editing the Button stories located at + (Try editing the Button stories located at  src/stories/index.js .)

Usually we create stories with smaller UI components in the app.
- Have a look at the + Have a look at the  void }) => ( > Writing Stories - section in our documentation. +  section in our documentation.

NOTE: diff --git a/docs/src/components/Homepage/Platforms/index.js b/docs/src/components/Homepage/Platforms/index.js index 5d6e7efac6ec..8f825622266f 100644 --- a/docs/src/components/Homepage/Platforms/index.js +++ b/docs/src/components/Homepage/Platforms/index.js @@ -13,7 +13,7 @@ const Platform = () => ( > React - & +  &  ( React Native

-
diff --git a/examples/cra-kitchen-sink/src/stories/button.stories.js b/examples/cra-kitchen-sink/src/stories/button.stories.js index fd1abd502698..b0ec9efecd6b 100644 --- a/examples/cra-kitchen-sink/src/stories/button.stories.js +++ b/examples/cra-kitchen-sink/src/stories/button.stories.js @@ -19,7 +19,7 @@ const InfoButton = () => ( borderRadius: '0px 0px 0px 5px', }} > - Show Info +  Show Info  ); diff --git a/examples/mithril-kitchen-sink/src/Welcome.js b/examples/mithril-kitchen-sink/src/Welcome.js index 63946379bcf2..86e832016559 100644 --- a/examples/mithril-kitchen-sink/src/Welcome.js +++ b/examples/mithril-kitchen-sink/src/Welcome.js @@ -108,14 +108,14 @@ const Welcome = {
You can also edit those components and see changes right away.
- (Try editing the Button stories located at + (Try editing the Button stories located at  src/stories/index.js .)

Usually we create stories with smaller UI components in the app.
- Have a look at the + Have a look at the  Writing Stories - section in our documentation. +  section in our documentation.

NOTE: diff --git a/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap b/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap index ce3bee5fd0e4..6424cb79bb71 100644 --- a/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap +++ b/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap @@ -294,7 +294,7 @@ exports[`Storyshots Welcome To Storybook 1`] = ` > stories - for a component called + for a component called  Button - stories located at + stories located at  Usually we create stories with smaller UI components in the app.
- Have a look at the + Have a look at the  Writing Stories - section in our documentation. +  section in our documentation.

( (Basically a story is like a visual test case.)

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

@@ -111,14 +111,14 @@ const Welcome = ({ showApp }) => (
You can also edit those components and see changes right away.
- (Try editing the Button stories located at + (Try editing the Button stories located at  src/stories/index.js .)

Usually we create stories with smaller UI components in the app.
- Have a look at the + Have a look at the  ( > Writing Stories - section in our documentation. +  section in our documentation.

NOTE: diff --git a/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js b/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js index ff4bbf0537dc..f07cb65b3666 100644 --- a/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js +++ b/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js @@ -26,10 +26,12 @@ withStyle.story = { export const withMarkdown = () => ( ); diff --git a/lib/cli/generators/MITHRIL/template/stories/Welcome.js b/lib/cli/generators/MITHRIL/template/stories/Welcome.js index 22409790ceac..d7dd3eca7ff1 100644 --- a/lib/cli/generators/MITHRIL/template/stories/Welcome.js +++ b/lib/cli/generators/MITHRIL/template/stories/Welcome.js @@ -134,29 +134,29 @@ const Welcome = { (Basically a story is like a visual test case.)

- See these sample + See these sample  {vnode.attrs.showApp ? ( stories ) : ( stories - )}{' '} - for a component called Button. + )} +  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 stories located at + (Try editing the Button stories located at  src/stories/index.js .)

Usually we create stories with smaller UI components in the app.
- Have a look at the + Have a look at the  Writing Stories - section in our documentation. +  section in our documentation.

NOTE: diff --git a/lib/cli/generators/PREACT/template/stories/Welcome.js b/lib/cli/generators/PREACT/template/stories/Welcome.js index 6f0e9a781a15..3a8e289817f4 100644 --- a/lib/cli/generators/PREACT/template/stories/Welcome.js +++ b/lib/cli/generators/PREACT/template/stories/Welcome.js @@ -92,7 +92,7 @@ const Welcome = ({ showApp }) => ( (Basically a story is like a visual test case.)

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

@@ -100,14 +100,14 @@ const Welcome = ({ showApp }) => (
You can also edit those components and see changes right away.
- (Try editing the Button stories located at + (Try editing the Button stories located at  src/stories/index.js .)

Usually we create stories with smaller UI components in the app.
- Have a look at the + Have a look at the  ( > Writing Stories - section in our documentation. +  section in our documentation.

NOTE: diff --git a/lib/cli/generators/RAX/template/stories/Welcome.js b/lib/cli/generators/RAX/template/stories/Welcome.js index db3bab6c08dc..2c590d205b9a 100644 --- a/lib/cli/generators/RAX/template/stories/Welcome.js +++ b/lib/cli/generators/RAX/template/stories/Welcome.js @@ -83,11 +83,11 @@ const Welcome = ({ showApp }) => ( want. (Basically a story is like a visual test case.)

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

Just like that, you can add your own components as stories. You can also edit those components @@ -96,7 +96,7 @@ const Welcome = ({ showApp }) => ( .)

- Usually we create stories with smaller UI components in the app. Have a look at the + Usually we create stories with smaller UI components in the app. Have a look at the  ( > Writing Stories - section in our documentation. +  section in our documentation.

NOTE:

diff --git a/lib/components/src/placeholder/placeholder.stories.tsx b/lib/components/src/placeholder/placeholder.stories.tsx index 6296717e1497..005a5c0b83bf 100644 --- a/lib/components/src/placeholder/placeholder.stories.tsx +++ b/lib/components/src/placeholder/placeholder.stories.tsx @@ -15,7 +15,7 @@ export const twoChildren = () => ( This has two children, the first bold - The second normal weight. Here's a + The second normal weight. Here's a  link diff --git a/lib/components/src/typography/DocumentWrapper.stories.tsx b/lib/components/src/typography/DocumentWrapper.stories.tsx index fae299366b39..5b770e5ccf69 100644 --- a/lib/components/src/typography/DocumentWrapper.stories.tsx +++ b/lib/components/src/typography/DocumentWrapper.stories.tsx @@ -175,7 +175,7 @@ export const withDOM = () => (

Autoconverted link https://github.com/nodeca/pica - (enable linkify to see) +  (enable linkify to see)

Images

diff --git a/lib/core/src/client/preview/NoDocs.js b/lib/core/src/client/preview/NoDocs.js index aff9d7e57601..a27287c17a91 100644 --- a/lib/core/src/client/preview/NoDocs.js +++ b/lib/core/src/client/preview/NoDocs.js @@ -23,7 +23,7 @@ export const NoDocs = () => (

No Docs

- Sorry, but there are no docs for the selected story. To add them, set the story's + Sorry, but there are no docs for the selected story. To add them, set the story's  docs parameter. If you think this is an error: