From e8e37ac7ad87836c509ded3f41175d931330ebe5 Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Sun, 5 Jul 2020 11:03:01 +0200 Subject: [PATCH 01/16] CLI: add common welcome and cleanup --- cypress/generated/basic.spec.ts | 8 +- cypress/support/commands.js | 17 +- cypress/support/index.d.ts | 4 + .../frameworks/angular/0-Welcome.stories.ts | 13 -- .../frameworks/angular/welcome.component.ts | 81 -------- .../frameworks/aurelia/0-Welcome.stories.ts | 13 -- lib/cli/src/frameworks/aurelia/welcome.ts | 79 ------- .../common/0.Introduction.stories.mdx | 194 ++++++++++++++++++ .../common/assets/code-brackets.svg | 8 + .../src/frameworks/common/assets/colors.svg | 13 ++ .../src/frameworks/common/assets/comments.svg | 9 + .../frameworks/common/assets/direction.svg | 8 + lib/cli/src/frameworks/common/assets/flow.svg | 8 + .../src/frameworks/common/assets/plugin.svg | 8 + lib/cli/src/frameworks/common/assets/repo.svg | 9 + .../src/frameworks/common/assets/stackalt.svg | 10 + .../src/frameworks/ember/0-Welcome.stories.js | 20 -- .../src/frameworks/html/0-Welcome.stories.js | 46 ----- .../src/frameworks/marko/0-Welcome.stories.js | 8 - lib/cli/src/frameworks/marko/welcome.marko | 37 ---- .../frameworks/mithril/0-Welcome.stories.js | 14 -- lib/cli/src/frameworks/mithril/Welcome.js | 179 ---------------- .../frameworks/preact/0-Welcome.stories.js | 14 -- lib/cli/src/frameworks/preact/Welcome.js | 125 ----------- .../src/frameworks/rax/0-Welcome.stories.js | 13 -- lib/cli/src/frameworks/rax/Welcome.js | 118 ----------- .../frameworks/react/js/0-Welcome.stories.js | 12 -- lib/cli/src/frameworks/react/js/Welcome.jsx | 126 ------------ .../frameworks/react/ts/0-Welcome.stories.tsx | 12 -- lib/cli/src/frameworks/react/ts/Welcome.tsx | 159 -------------- .../src/frameworks/riot/0-Welcome.stories.js | 12 -- lib/cli/src/frameworks/riot/Welcome.tag | 93 --------- .../frameworks/svelte/0-welcome.stories.js | 13 -- lib/cli/src/frameworks/svelte/welcome.svelte | 37 ---- .../src/frameworks/vue/0-Welcome.stories.js | 16 -- lib/cli/src/frameworks/vue/Welcome.vue | 119 ----------- .../web-components/0-Welcome.stories.js | 47 ----- .../src/stories/0-Welcome.stories.mdx | 17 -- .../src/stories/0-Welcome.stories.mdx | 17 -- .../stories/0-Welcome.stories.mdx | 15 -- .../stories/0-Welcome.stories.mdx | 15 -- .../stories/0-Welcome.stories.mdx | 23 --- .../stories/0-Welcome.stories.mdx | 23 --- .../stories/0-Welcome.stories.mdx | 15 -- lib/cli/src/helpers.test.ts | 15 +- lib/cli/src/helpers.ts | 1 + 46 files changed, 306 insertions(+), 1537 deletions(-) delete mode 100644 lib/cli/src/frameworks/angular/0-Welcome.stories.ts delete mode 100644 lib/cli/src/frameworks/angular/welcome.component.ts delete mode 100644 lib/cli/src/frameworks/aurelia/0-Welcome.stories.ts delete mode 100644 lib/cli/src/frameworks/aurelia/welcome.ts create mode 100644 lib/cli/src/frameworks/common/0.Introduction.stories.mdx create mode 100644 lib/cli/src/frameworks/common/assets/code-brackets.svg create mode 100644 lib/cli/src/frameworks/common/assets/colors.svg create mode 100644 lib/cli/src/frameworks/common/assets/comments.svg create mode 100644 lib/cli/src/frameworks/common/assets/direction.svg create mode 100644 lib/cli/src/frameworks/common/assets/flow.svg create mode 100644 lib/cli/src/frameworks/common/assets/plugin.svg create mode 100644 lib/cli/src/frameworks/common/assets/repo.svg create mode 100644 lib/cli/src/frameworks/common/assets/stackalt.svg delete mode 100644 lib/cli/src/frameworks/ember/0-Welcome.stories.js delete mode 100644 lib/cli/src/frameworks/html/0-Welcome.stories.js delete mode 100644 lib/cli/src/frameworks/marko/0-Welcome.stories.js delete mode 100644 lib/cli/src/frameworks/marko/welcome.marko delete mode 100644 lib/cli/src/frameworks/mithril/0-Welcome.stories.js delete mode 100644 lib/cli/src/frameworks/mithril/Welcome.js delete mode 100644 lib/cli/src/frameworks/preact/0-Welcome.stories.js delete mode 100644 lib/cli/src/frameworks/preact/Welcome.js delete mode 100644 lib/cli/src/frameworks/rax/0-Welcome.stories.js delete mode 100644 lib/cli/src/frameworks/rax/Welcome.js delete mode 100644 lib/cli/src/frameworks/react/js/0-Welcome.stories.js delete mode 100644 lib/cli/src/frameworks/react/js/Welcome.jsx delete mode 100644 lib/cli/src/frameworks/react/ts/0-Welcome.stories.tsx delete mode 100644 lib/cli/src/frameworks/react/ts/Welcome.tsx delete mode 100644 lib/cli/src/frameworks/riot/0-Welcome.stories.js delete mode 100644 lib/cli/src/frameworks/riot/Welcome.tag delete mode 100644 lib/cli/src/frameworks/svelte/0-welcome.stories.js delete mode 100644 lib/cli/src/frameworks/svelte/welcome.svelte delete mode 100644 lib/cli/src/frameworks/vue/0-Welcome.stories.js delete mode 100644 lib/cli/src/frameworks/vue/Welcome.vue delete mode 100644 lib/cli/src/frameworks/web-components/0-Welcome.stories.js delete mode 100644 lib/cli/src/generators/ANGULAR/template-mdx/src/stories/0-Welcome.stories.mdx delete mode 100644 lib/cli/src/generators/AURELIA/template-mdx/src/stories/0-Welcome.stories.mdx delete mode 100644 lib/cli/src/generators/REACT/template-mdx/stories/0-Welcome.stories.mdx delete mode 100644 lib/cli/src/generators/REACT_SCRIPTS/template-mdx/stories/0-Welcome.stories.mdx delete mode 100644 lib/cli/src/generators/SFC_VUE/template-mdx/stories/0-Welcome.stories.mdx delete mode 100644 lib/cli/src/generators/VUE/template-mdx/stories/0-Welcome.stories.mdx delete mode 100644 lib/cli/src/generators/WEBPACK_REACT/template-mdx/stories/0-Welcome.stories.mdx diff --git a/cypress/generated/basic.spec.ts b/cypress/generated/basic.spec.ts index 3fc0bf6e48eb..098209980ee6 100644 --- a/cypress/generated/basic.spec.ts +++ b/cypress/generated/basic.spec.ts @@ -6,13 +6,15 @@ describe('Basic Flow', () => { }); it('should load welcome flow', () => { + cy.navigateToStory('example-introduction', 'page'); + // assert url changes - cy.url().should('include', 'path=/story/welcome--to-storybook'); + cy.url().should('include', 'path=/story/example-introduction--page'); // check for selected element - cy.get('#welcome--to-storybook').should('have.class', 'selected'); + cy.get('#example-introduction--page').should('have.class', 'selected'); // check for content - cy.getStoryElement().should('contain.text', 'Welcome to storybook'); + cy.getDocsElement().should('contain.text', 'Welcome to Storybook'); }); }); diff --git a/cypress/support/commands.js b/cypress/support/commands.js index f9c1c242b7da..e67afd9572f7 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -48,13 +48,28 @@ Cypress.Commands.add('getStoryElement', {}, () => { .then((storyRoot) => cy.wrap(storyRoot, { log: false })); }); +Cypress.Commands.add('getDocsElement', {}, () => { + cy.log('getDocsElement'); + return cy + .get(`#storybook-preview-iframe`, { log: false }) + .its('0.contentDocument.body', { log: false }) + .should('not.be.empty') + .then((body) => cy.wrap(body, { log: false })) + .find('#docs-root', { log: false }) + .should('not.be.empty') + .then((storyRoot) => cy.wrap(storyRoot, { log: false })); +}); + Cypress.Commands.add('navigateToStory', (kind, name) => { const kindId = kind.replace(' ', '-').toLowerCase(); const storyId = name.replace(' ', '-').toLowerCase(); const storyLinkId = `#${kindId}--${storyId}`; cy.log('navigateToStory'); - cy.get(`#${kindId}`, { log: false }).click(); + + if (name !== 'page') { + cy.get(`#${kindId}`, { log: false }).click(); + } cy.get(storyLinkId, { log: false }).click(); // assert url changes diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts index ef0333bbb248..9f4273ed7f65 100644 --- a/cypress/support/index.d.ts +++ b/cypress/support/index.d.ts @@ -8,6 +8,10 @@ declare namespace Cypress { * Custom command to select the DOM element of a story in the canvas tab. */ getStoryElement(): Chainable; + /** + * Custom command to select the DOM element of a docs story in the canvas tab. + */ + getDocsElement(): Chainable; /** * Navigate to a story. diff --git a/lib/cli/src/frameworks/angular/0-Welcome.stories.ts b/lib/cli/src/frameworks/angular/0-Welcome.stories.ts deleted file mode 100644 index 38786fa32607..000000000000 --- a/lib/cli/src/frameworks/angular/0-Welcome.stories.ts +++ /dev/null @@ -1,13 +0,0 @@ -import Welcome from './welcome.component'; - -export default { - title: 'Welcome', - component: Welcome, -}; - -export const ToStorybook = () => ({ - component: Welcome, - props: {}, -}); - -ToStorybook.storyName = 'to Storybook'; diff --git a/lib/cli/src/frameworks/angular/welcome.component.ts b/lib/cli/src/frameworks/angular/welcome.component.ts deleted file mode 100644 index ab8309c1a581..000000000000 --- a/lib/cli/src/frameworks/angular/welcome.component.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { Component, Output, EventEmitter } from '@angular/core'; - -@Component({ - selector: 'storybook-welcome-component', - template: ` -
-

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 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. -

-
- `, - styles: [ - ` - main { - padding: 15px; - line-height: 1.4; - font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif; - background-color: #ffffff; - } - - .note { - opacity: 0.5; - } - - .inline-code { - font-size: 15px; - font-weight: 600; - padding: 2px 5px; - border: 1px solid #eae9e9; - border-radius: 4px; - background-color: #f3f2f2; - color: #3a3a3a; - } - - a { - color: #1474f3; - text-decoration: none; - border-bottom: 1px solid #1474f3; - padding-bottom: 2px; - } - `, - ], -}) -export default class WelcomeComponent { - @Output() - showApp = new EventEmitter(); -} diff --git a/lib/cli/src/frameworks/aurelia/0-Welcome.stories.ts b/lib/cli/src/frameworks/aurelia/0-Welcome.stories.ts deleted file mode 100644 index acefc457a070..000000000000 --- a/lib/cli/src/frameworks/aurelia/0-Welcome.stories.ts +++ /dev/null @@ -1,13 +0,0 @@ -import Welcome from './welcome'; - -export default { - title: 'Welcome', - component: Welcome, -}; - -export const ToStorybook = () => ({ - component: Welcome, - props: {}, -}); - -ToStorybook.storyName = 'to Storybook'; diff --git a/lib/cli/src/frameworks/aurelia/welcome.ts b/lib/cli/src/frameworks/aurelia/welcome.ts deleted file mode 100644 index 109911b7de2e..000000000000 --- a/lib/cli/src/frameworks/aurelia/welcome.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { bindable, customElement } from 'aurelia'; - -@customElement({ - name: 'storybook-welcome-component', - template: ` -
-

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 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. -

-
- - `, -}) -export default class Welcome { - @bindable() - showApp: MouseEvent; -} diff --git a/lib/cli/src/frameworks/common/0.Introduction.stories.mdx b/lib/cli/src/frameworks/common/0.Introduction.stories.mdx new file mode 100644 index 000000000000..2e5141d4bdc8 --- /dev/null +++ b/lib/cli/src/frameworks/common/0.Introduction.stories.mdx @@ -0,0 +1,194 @@ +import { Meta } from '@storybook/addon-docs/blocks'; +import Code from './assets/code-brackets.svg'; +import Colors from './assets/colors.svg'; +import Comments from './assets/comments.svg'; +import Direction from './assets/direction.svg'; +import Flow from './assets/flow.svg'; +import Plugin from './assets/plugin.svg'; +import Repo from './assets/repo.svg'; +import StackAlt from './assets/stackalt.svg'; + + + + + +# Welcome to Storybook + +Storybook helps you build UI components in isolation from your app's business logic, data, and context. +That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. + +Browse example stories now by navigating to them in the sidebar. +View their code in the `src/storybook-examples` directory to learn how they work. +We recommend building UIs with a [**component-driven**](https://blog.hichroma.com/component-driven-development-ce1109d56c8e) process starting with atomic components and ending with pages. + +
Configure
+ +
+ + plugin + + Presets for popular tools + Easy setup for TypeScript, SCSS and more. + + + + Build + + Build configuration + How to customize webpack and Babel + + + + colors + + Styling + How to load and configure CSS libraries + + + + flow + + Data + Providers and mocking for data libraries + + +
+ +
Learn
+ +
+ + repo + + Storybook documentation + Configure, customize, and extend + + + + direction + + In-depth guides + Best practices from leading teams + + + + code + + GitHub project + View the source and add issues + + + + comments + + Discord chat + Chat with maintainers and the community + + +
+ +
+ TipEdit the Markdown in src/storybook-examples/welcome.mdx +
diff --git a/lib/cli/src/frameworks/common/assets/code-brackets.svg b/lib/cli/src/frameworks/common/assets/code-brackets.svg new file mode 100644 index 000000000000..04346fe58dfc --- /dev/null +++ b/lib/cli/src/frameworks/common/assets/code-brackets.svg @@ -0,0 +1,8 @@ + + + illustration/code-brackets + + + + + \ No newline at end of file diff --git a/lib/cli/src/frameworks/common/assets/colors.svg b/lib/cli/src/frameworks/common/assets/colors.svg new file mode 100644 index 000000000000..3db9506284ed --- /dev/null +++ b/lib/cli/src/frameworks/common/assets/colors.svg @@ -0,0 +1,13 @@ + + + illustration/colors + + + + + + + + + + \ No newline at end of file diff --git a/lib/cli/src/frameworks/common/assets/comments.svg b/lib/cli/src/frameworks/common/assets/comments.svg new file mode 100644 index 000000000000..6cc591e3d01b --- /dev/null +++ b/lib/cli/src/frameworks/common/assets/comments.svg @@ -0,0 +1,9 @@ + + + illustration/comments + + + + + + \ No newline at end of file diff --git a/lib/cli/src/frameworks/common/assets/direction.svg b/lib/cli/src/frameworks/common/assets/direction.svg new file mode 100644 index 000000000000..12030873e10a --- /dev/null +++ b/lib/cli/src/frameworks/common/assets/direction.svg @@ -0,0 +1,8 @@ + + + illustration/direction + + + + + \ No newline at end of file diff --git a/lib/cli/src/frameworks/common/assets/flow.svg b/lib/cli/src/frameworks/common/assets/flow.svg new file mode 100644 index 000000000000..2f5e99d56458 --- /dev/null +++ b/lib/cli/src/frameworks/common/assets/flow.svg @@ -0,0 +1,8 @@ + + + illustration/flow + + + + + \ No newline at end of file diff --git a/lib/cli/src/frameworks/common/assets/plugin.svg b/lib/cli/src/frameworks/common/assets/plugin.svg new file mode 100644 index 000000000000..93f897f3b2f7 --- /dev/null +++ b/lib/cli/src/frameworks/common/assets/plugin.svg @@ -0,0 +1,8 @@ + + + illustration/plugin + + + + + \ No newline at end of file diff --git a/lib/cli/src/frameworks/common/assets/repo.svg b/lib/cli/src/frameworks/common/assets/repo.svg new file mode 100644 index 000000000000..33ea3de2310e --- /dev/null +++ b/lib/cli/src/frameworks/common/assets/repo.svg @@ -0,0 +1,9 @@ + + + illustration/repo + + + + + + \ No newline at end of file diff --git a/lib/cli/src/frameworks/common/assets/stackalt.svg b/lib/cli/src/frameworks/common/assets/stackalt.svg new file mode 100644 index 000000000000..51467045fe34 --- /dev/null +++ b/lib/cli/src/frameworks/common/assets/stackalt.svg @@ -0,0 +1,10 @@ + + + illustration/stackalt + + + + + + + \ No newline at end of file diff --git a/lib/cli/src/frameworks/ember/0-Welcome.stories.js b/lib/cli/src/frameworks/ember/0-Welcome.stories.js deleted file mode 100644 index 2b6a7d76243e..000000000000 --- a/lib/cli/src/frameworks/ember/0-Welcome.stories.js +++ /dev/null @@ -1,20 +0,0 @@ -import { hbs } from 'ember-cli-htmlbars'; -import { linkTo } from '@storybook/addon-links'; - -export default { - title: 'Welcome', -}; - -export const ToStorybook = () => ({ - template: hbs` -
-

Welcome to storybook

- -
- `, - context: { - onClick: linkTo('Button'), - }, -}); - -ToStorybook.storyName = 'to Storybook'; diff --git a/lib/cli/src/frameworks/html/0-Welcome.stories.js b/lib/cli/src/frameworks/html/0-Welcome.stories.js deleted file mode 100644 index 8c44b0266d1f..000000000000 --- a/lib/cli/src/frameworks/html/0-Welcome.stories.js +++ /dev/null @@ -1,46 +0,0 @@ -export default { - title: 'Welcome', -}; - -export const ToStorybook = () => ` -
-

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 stories located at - src/stories/1-Button.stories.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. -

-
`; - -ToStorybook.storyName = 'to Storybook'; diff --git a/lib/cli/src/frameworks/marko/0-Welcome.stories.js b/lib/cli/src/frameworks/marko/0-Welcome.stories.js deleted file mode 100644 index a0cba3b6d1b0..000000000000 --- a/lib/cli/src/frameworks/marko/0-Welcome.stories.js +++ /dev/null @@ -1,8 +0,0 @@ -import Welcome from './welcome.marko'; - -export default { - title: 'Welcome', - component: Welcome, -}; - -export const welcome = () => ({ component: Welcome }); diff --git a/lib/cli/src/frameworks/marko/welcome.marko b/lib/cli/src/frameworks/marko/welcome.marko deleted file mode 100644 index 828d359bcc42..000000000000 --- a/lib/cli/src/frameworks/marko/welcome.marko +++ /dev/null @@ -1,37 +0,0 @@ - -class { - onCreate() {} -} - -style { - #app { - font-family: 'Avenir', Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-align: center; - color: #2c3e50; - margin-top: 60px; - } - - h1, h2 { - font-weight: normal; - } - - ul { - list-style-type: none; - padding: 0; - } - - li { - display: inline-block; - margin: 0 10px; - } - - a { - color: #42b983; - } -} - - -

Welcome to storybook

- diff --git a/lib/cli/src/frameworks/mithril/0-Welcome.stories.js b/lib/cli/src/frameworks/mithril/0-Welcome.stories.js deleted file mode 100644 index 13a71f805c32..000000000000 --- a/lib/cli/src/frameworks/mithril/0-Welcome.stories.js +++ /dev/null @@ -1,14 +0,0 @@ -import m from 'mithril'; -import { linkTo } from '@storybook/addon-links'; -import Welcome from './Welcome'; - -export default { - title: 'Welcome', - component: Welcome, -}; - -export const ToStorybook = () => ({ - view: () => m(Welcome, { showApp: linkTo('Button') }), -}); - -ToStorybook.storyName = 'to Storybook'; diff --git a/lib/cli/src/frameworks/mithril/Welcome.js b/lib/cli/src/frameworks/mithril/Welcome.js deleted file mode 100644 index 6e34daae2774..000000000000 --- a/lib/cli/src/frameworks/mithril/Welcome.js +++ /dev/null @@ -1,179 +0,0 @@ -/** @jsx m */ - -import m from 'mithril'; -import { linkTo, hrefTo } from '@storybook/addon-links'; - -const Main = { - view: (vnode) => ( -
- {vnode.children} -
- ), -}; - -const Title = { - view: (vnode) =>

{vnode.children}

, -}; - -const Note = { - view: (vnode) => ( -

- {vnode.children} -

- ), -}; - -const InlineCode = { - view: (vnode) => ( - - {vnode.children} - - ), -}; - -const Link = { - view: (vnode) => ( - - {vnode.children} - - ), -}; - -const NavButton = { - view: (vnode) => ( - - ), -}; - -const StoryLink = { - oninit: (vnode) => { - // eslint-disable-next-line no-param-reassign - vnode.state.href = '/'; - // eslint-disable-next-line no-param-reassign - vnode.state.onclick = () => { - linkTo(vnode.attrs.kind, vnode.attrs.story)(); - return false; - }; - StoryLink.updateHref(vnode); - }, - updateHref: async (vnode) => { - const href = await hrefTo(vnode.attrs.kind, vnode.attrs.story); - // eslint-disable-next-line no-param-reassign - vnode.state.href = href; - m.redraw(); - }, - view: (vnode) => ( - - {vnode.children} - - ), -}; - -const Welcome = { - view: (vnode) => ( -
- 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  - {vnode.attrs.showApp ? ( - stories - ) : ( - - 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 stories located at  - src/stories/1-Button.stories.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. - -
- ), -}; - -export default Welcome; diff --git a/lib/cli/src/frameworks/preact/0-Welcome.stories.js b/lib/cli/src/frameworks/preact/0-Welcome.stories.js deleted file mode 100644 index 1c647ee97411..000000000000 --- a/lib/cli/src/frameworks/preact/0-Welcome.stories.js +++ /dev/null @@ -1,14 +0,0 @@ -/** @jsx h */ -import { h } from 'preact'; -import { linkTo } from '@storybook/addon-links'; - -import Welcome from './Welcome'; - -export default { - title: 'Welcome', - component: Welcome, -}; - -export const ToStorybook = () => ; - -ToStorybook.storyName = 'to Storybook'; diff --git a/lib/cli/src/frameworks/preact/Welcome.js b/lib/cli/src/frameworks/preact/Welcome.js deleted file mode 100644 index 7a47695cf121..000000000000 --- a/lib/cli/src/frameworks/preact/Welcome.js +++ /dev/null @@ -1,125 +0,0 @@ -/** @jsx h */ -import { h } from 'preact'; - -const Main = (props) => ( -
-); - -const Title = ({ children, ...props }) =>

{children}

; - -const Note = (props) => ( -

-); - -const InlineCode = (props) => ( - -); - -const Link = ({ children, href, ...props }) => ( - - {children} - -); - -const NavButton = ({ children, ...props }) => ( - -); - -const Welcome = ({ showApp }) => ( -

- 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 stories located at  - src/stories/1-Button.stories.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. - -
-); - -export { Welcome as default }; diff --git a/lib/cli/src/frameworks/rax/0-Welcome.stories.js b/lib/cli/src/frameworks/rax/0-Welcome.stories.js deleted file mode 100644 index 8dbdb2d533d3..000000000000 --- a/lib/cli/src/frameworks/rax/0-Welcome.stories.js +++ /dev/null @@ -1,13 +0,0 @@ -import { createElement } from 'rax'; -import { linkTo } from '@storybook/addon-links'; - -import Welcome from './Welcome'; - -export default { - title: 'Welcome', - component: Welcome, -}; - -export const ToStorybook = () => ; - -ToStorybook.storyName = 'to Storybook'; diff --git a/lib/cli/src/frameworks/rax/Welcome.js b/lib/cli/src/frameworks/rax/Welcome.js deleted file mode 100644 index 6995d7de5947..000000000000 --- a/lib/cli/src/frameworks/rax/Welcome.js +++ /dev/null @@ -1,118 +0,0 @@ -import { createElement } from 'rax'; -import View from 'rax-view'; -import Text from 'rax-text'; -import Image from 'rax-image'; -import Link from 'rax-link'; - -const Main = ({ children, ...props }) => ( - - {children} - -); - -const P = ({ children, ...props }) => ( - - {children} - -); - -const Title = ({ children, ...props }) => ( - - {children} - -); - -const Note = ({ children, ...props }) => ( - - {children} - -); - -const InlineCode = ({ children, ...props }) => ( - - {children} - -); - -const Welcome = ({ showApp }) => ( -
- Welcome to storybook for Rax - - -

This is a UI component dev environment for your Rax 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 stories located - at src/stories/1-Button.stories.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. -

- -
-); - -export default Welcome; diff --git a/lib/cli/src/frameworks/react/js/0-Welcome.stories.js b/lib/cli/src/frameworks/react/js/0-Welcome.stories.js deleted file mode 100644 index 4c2d95bdb227..000000000000 --- a/lib/cli/src/frameworks/react/js/0-Welcome.stories.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { linkTo } from '@storybook/addon-links'; -import { Welcome } from './Welcome'; - -export default { - title: 'Welcome', - component: Welcome, -}; - -export const ToStorybook = () => ; - -ToStorybook.storyName = 'to Storybook'; diff --git a/lib/cli/src/frameworks/react/js/Welcome.jsx b/lib/cli/src/frameworks/react/js/Welcome.jsx deleted file mode 100644 index 45d25f6ebafd..000000000000 --- a/lib/cli/src/frameworks/react/js/Welcome.jsx +++ /dev/null @@ -1,126 +0,0 @@ -import React from 'react'; - -const Main = (props) => ( -
-); - -const Title = ({ children, ...props }) =>

{children}

; - -const Note = (props) => ( -

-); - -const InlineCode = (props) => ( - -); - -const Link = ({ children, href, target, rel, ...props }) => ( - - {children} - -); - -const NavButton = ({ children, onClick, ...props }) => ( - -); - -export const Welcome = ({ showApp }) => ( -

- 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 stories located at  - src/stories/1-Button.stories.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/lib/cli/src/frameworks/react/ts/0-Welcome.stories.tsx b/lib/cli/src/frameworks/react/ts/0-Welcome.stories.tsx deleted file mode 100644 index 4c2d95bdb227..000000000000 --- a/lib/cli/src/frameworks/react/ts/0-Welcome.stories.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { linkTo } from '@storybook/addon-links'; -import { Welcome } from './Welcome'; - -export default { - title: 'Welcome', - component: Welcome, -}; - -export const ToStorybook = () => ; - -ToStorybook.storyName = 'to Storybook'; diff --git a/lib/cli/src/frameworks/react/ts/Welcome.tsx b/lib/cli/src/frameworks/react/ts/Welcome.tsx deleted file mode 100644 index 3d0885f6bbdc..000000000000 --- a/lib/cli/src/frameworks/react/ts/Welcome.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import React, { - AnchorHTMLAttributes, - ButtonHTMLAttributes, - DetailedHTMLProps, - FunctionComponent, - HTMLAttributes, -} from 'react'; - -type MainProps = Omit, HTMLElement>, 'style'>; -const Main: FunctionComponent = (props) => ( -
-); - -type TitleProps = DetailedHTMLProps, HTMLHeadingElement>; -const Title: FunctionComponent = ({ children, ...props }) => ( -

{children}

-); - -type NoteProps = Omit< - DetailedHTMLProps, HTMLParagraphElement>, - 'style' ->; -const Note: FunctionComponent = (props) => ( -

-); - -type InlineCodeProps = Omit, HTMLElement>, 'style'>; -const InlineCode: FunctionComponent = (props) => ( - -); - -type LinkProps = Omit< - DetailedHTMLProps, HTMLAnchorElement>, - 'style' -> & { - href: string; - target: string; - rel: string; -}; -const Link: FunctionComponent = ({ children, href, target, rel, ...props }) => ( - - {children} - -); - -type NavButtonProps = Omit< - DetailedHTMLProps, HTMLButtonElement>, - 'style' | 'type' -> & {}; -const NavButton: FunctionComponent = ({ children, onClick, ...props }) => ( - -); - -export interface WelcomeProps { - showApp: () => void; -} -export const Welcome: FunctionComponent = ({ showApp }: WelcomeProps) => ( -

- 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 stories located at  - src/stories/1-Button.stories.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. - -
-); -Welcome.displayName = 'Welcome'; - -export { Welcome as default }; diff --git a/lib/cli/src/frameworks/riot/0-Welcome.stories.js b/lib/cli/src/frameworks/riot/0-Welcome.stories.js deleted file mode 100644 index 7ba50551fccd..000000000000 --- a/lib/cli/src/frameworks/riot/0-Welcome.stories.js +++ /dev/null @@ -1,12 +0,0 @@ -import { mount } from '@storybook/riot'; -import { linkTo } from '@storybook/addon-links'; - -import './Welcome.tag'; - -export default { - title: 'Welcome', -}; - -export const ToStorybook = () => mount('welcome', { showApp: () => linkTo('Button') }); - -ToStorybook.storyName = 'to Storybook'; diff --git a/lib/cli/src/frameworks/riot/Welcome.tag b/lib/cli/src/frameworks/riot/Welcome.tag deleted file mode 100644 index 614223b14db5..000000000000 --- a/lib/cli/src/frameworks/riot/Welcome.tag +++ /dev/null @@ -1,93 +0,0 @@ - -
-

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/src/frameworks/svelte/0-welcome.stories.js b/lib/cli/src/frameworks/svelte/0-welcome.stories.js deleted file mode 100644 index 35008941746a..000000000000 --- a/lib/cli/src/frameworks/svelte/0-welcome.stories.js +++ /dev/null @@ -1,13 +0,0 @@ -import Welcome from './welcome.svelte'; - -export default { - title: 'Welcome', - component: Welcome, -}; - -export const ToStorybook = () => ({ - Component: Welcome, - props: {}, -}); - -ToStorybook.storyName = 'to Storybook'; diff --git a/lib/cli/src/frameworks/svelte/welcome.svelte b/lib/cli/src/frameworks/svelte/welcome.svelte deleted file mode 100644 index a79caf3f03f5..000000000000 --- a/lib/cli/src/frameworks/svelte/welcome.svelte +++ /dev/null @@ -1,37 +0,0 @@ - - - - -
-

Welcome to storybook

-

This is a UI component dev environment for your app.

-

- We've added some basic stories inside the - 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.) -

-
diff --git a/lib/cli/src/frameworks/vue/0-Welcome.stories.js b/lib/cli/src/frameworks/vue/0-Welcome.stories.js deleted file mode 100644 index 6496e9b1864d..000000000000 --- a/lib/cli/src/frameworks/vue/0-Welcome.stories.js +++ /dev/null @@ -1,16 +0,0 @@ -import { linkTo } from '@storybook/addon-links'; - -import Welcome from './Welcome.vue'; - -export default { - title: 'Welcome', - component: Welcome, -}; - -export const ToStorybook = () => ({ - components: { Welcome }, - template: '', - methods: { action: linkTo('Button') }, -}); - -ToStorybook.storyName = 'to Storybook'; diff --git a/lib/cli/src/frameworks/vue/Welcome.vue b/lib/cli/src/frameworks/vue/Welcome.vue deleted file mode 100644 index bfb932da3d2a..000000000000 --- a/lib/cli/src/frameworks/vue/Welcome.vue +++ /dev/null @@ -1,119 +0,0 @@ - - - - - diff --git a/lib/cli/src/frameworks/web-components/0-Welcome.stories.js b/lib/cli/src/frameworks/web-components/0-Welcome.stories.js deleted file mode 100644 index 95a394760d52..000000000000 --- a/lib/cli/src/frameworks/web-components/0-Welcome.stories.js +++ /dev/null @@ -1,47 +0,0 @@ -import { html } from 'lit-html'; - -export default { - title: 'Welcome', -}; - -export const ToStorybook = () => html`
-

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 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. -

-
`; - -ToStorybook.storyName = 'to Storybook'; diff --git a/lib/cli/src/generators/ANGULAR/template-mdx/src/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/ANGULAR/template-mdx/src/stories/0-Welcome.stories.mdx deleted file mode 100644 index 1abbfd8a65ed..000000000000 --- a/lib/cli/src/generators/ANGULAR/template-mdx/src/stories/0-Welcome.stories.mdx +++ /dev/null @@ -1,17 +0,0 @@ -import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; -import Welcome from './welcome.component'; - - - -# Welcome - -This is a test document written in MDX that defines a `Welcome` story wrapped in a `Preview` doc block: - - - - {{ - component: Welcome, - props: {}, - }} - - diff --git a/lib/cli/src/generators/AURELIA/template-mdx/src/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/AURELIA/template-mdx/src/stories/0-Welcome.stories.mdx deleted file mode 100644 index 531a441afb63..000000000000 --- a/lib/cli/src/generators/AURELIA/template-mdx/src/stories/0-Welcome.stories.mdx +++ /dev/null @@ -1,17 +0,0 @@ -import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; -import Welcome from './welcome'; - - - -# Welcome - -This is a test document written in MDX that defines a `Welcome` story wrapped in a `Preview` doc block: - - - - {{ - component: Welcome, - props: {}, - }} - - diff --git a/lib/cli/src/generators/REACT/template-mdx/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/REACT/template-mdx/stories/0-Welcome.stories.mdx deleted file mode 100644 index 705382f9fa56..000000000000 --- a/lib/cli/src/generators/REACT/template-mdx/stories/0-Welcome.stories.mdx +++ /dev/null @@ -1,15 +0,0 @@ -import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; -import { linkTo } from '@storybook/addon-links'; -import Welcome from './Welcome'; - - - -# Welcome - -This is a test document written in MDX that defines a `Welcome` story wrapped in a `Preview` doc block: - - - - - - diff --git a/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/stories/0-Welcome.stories.mdx deleted file mode 100644 index 705382f9fa56..000000000000 --- a/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/stories/0-Welcome.stories.mdx +++ /dev/null @@ -1,15 +0,0 @@ -import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; -import { linkTo } from '@storybook/addon-links'; -import Welcome from './Welcome'; - - - -# Welcome - -This is a test document written in MDX that defines a `Welcome` story wrapped in a `Preview` doc block: - - - - - - diff --git a/lib/cli/src/generators/SFC_VUE/template-mdx/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/SFC_VUE/template-mdx/stories/0-Welcome.stories.mdx deleted file mode 100644 index bcf64d1f659d..000000000000 --- a/lib/cli/src/generators/SFC_VUE/template-mdx/stories/0-Welcome.stories.mdx +++ /dev/null @@ -1,23 +0,0 @@ -import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; -import { linkTo } from '@storybook/addon-links'; -import Welcome from './Welcome.vue'; - - - -# Welcome - -This is a test document written in MDX that defines a `Welcome` story wrapped in a `Preview` doc block: - - - - {{ - components: { - Welcome, - }, - template: '', - methods: { - action: linkTo('Button'), - }, - }} - - diff --git a/lib/cli/src/generators/VUE/template-mdx/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/VUE/template-mdx/stories/0-Welcome.stories.mdx deleted file mode 100644 index 5614c5ccc556..000000000000 --- a/lib/cli/src/generators/VUE/template-mdx/stories/0-Welcome.stories.mdx +++ /dev/null @@ -1,23 +0,0 @@ -import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; -import { linkTo } from '@storybook/addon-links'; -import Welcome from './Welcome'; - - - -# Welcome - -This is a test document written in MDX that defines a `Welcome` story wrapped in a `Preview` doc block: - - - - {{ - components: { - Welcome, - }, - template: '', - methods: { - action: linkTo('Button'), - }, - }} - - diff --git a/lib/cli/src/generators/WEBPACK_REACT/template-mdx/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/WEBPACK_REACT/template-mdx/stories/0-Welcome.stories.mdx deleted file mode 100644 index 705382f9fa56..000000000000 --- a/lib/cli/src/generators/WEBPACK_REACT/template-mdx/stories/0-Welcome.stories.mdx +++ /dev/null @@ -1,15 +0,0 @@ -import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; -import { linkTo } from '@storybook/addon-links'; -import Welcome from './Welcome'; - - - -# Welcome - -This is a test document written in MDX that defines a `Welcome` story wrapped in a `Preview` doc block: - - - - - - diff --git a/lib/cli/src/helpers.test.ts b/lib/cli/src/helpers.test.ts index 1a7d32cfaf56..070c41052dc1 100644 --- a/lib/cli/src/helpers.test.ts +++ b/lib/cli/src/helpers.test.ts @@ -20,6 +20,10 @@ jest.mock('path', () => ({ })); describe('Helpers', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + describe('copyTemplate', () => { it(`should fall back to ${StoryFormat.CSF} in case ${StoryFormat.CSF_TYPESCRIPT} is not available`, () => { @@ -71,9 +75,16 @@ describe('Helpers', () => { helpers.copyComponents('react', language); const copySyncSpy = jest.spyOn(fse, 'copySync'); - expect(copySyncSpy).toHaveBeenCalledWith( + expect(copySyncSpy).toHaveBeenNthCalledWith( + 1, expectedDirectory, - expect.anything(), + './src/stories', + expect.anything() + ); + expect(copySyncSpy).toHaveBeenNthCalledWith( + 2, + 'frameworks/common', + './src/stories', expect.anything() ); } diff --git a/lib/cli/src/helpers.ts b/lib/cli/src/helpers.ts index ad32fc1816f9..d58a4ba6e145 100644 --- a/lib/cli/src/helpers.ts +++ b/lib/cli/src/helpers.ts @@ -215,4 +215,5 @@ export function copyComponents(framework: SupportedFrameworks, language: Support const destinationPath = targetPath(); fse.copySync(componentsPath(), destinationPath, { overwrite: true }); + fse.copySync(path.resolve(__dirname, 'frameworks/common'), destinationPath, { overwrite: true }); } From 86e487a395bcdcd9fefcc883c00436368b36bc1f Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Sun, 5 Jul 2020 11:11:55 +0200 Subject: [PATCH 02/16] Update CLI for angular --- lib/cli/src/generators/ANGULAR/index.ts | 14 +++++++++- lib/cli/src/generators/baseGenerator.ts | 4 +-- lib/cli/src/generators/configure.ts | 28 +++++++++++++------ .../js-package-manager/JsPackageManager.ts | 22 +++++++++++---- lib/cli/src/js-package-manager/NPMProxy.ts | 4 +++ lib/cli/src/js-package-manager/Yarn1Proxy.ts | 4 +++ lib/cli/src/js-package-manager/Yarn2Proxy.ts | 4 +++ 7 files changed, 63 insertions(+), 17 deletions(-) diff --git a/lib/cli/src/generators/ANGULAR/index.ts b/lib/cli/src/generators/ANGULAR/index.ts index 11a6491e01af..c15219d0e2b8 100644 --- a/lib/cli/src/generators/ANGULAR/index.ts +++ b/lib/cli/src/generators/ANGULAR/index.ts @@ -30,11 +30,23 @@ const generator: Generator = async (packageManager, npmOptions, options) => { 'Could not find a default project in your Angular workspace.\nSet a defaultProject in your angular.json and re-run the installation.' ); } - baseGenerator(packageManager, npmOptions, options, 'angular'); + baseGenerator(packageManager, npmOptions, options, 'angular', { + extraPackages: ['@compodoc/compodoc'], + addScripts: false, + }); copyTemplate(__dirname, options.storyFormat); editAngularAppTsConfig(); editStorybookTsConfig(path.resolve('./.storybook/tsconfig.json')); + + // edit scripts to generate docs + packageManager.addScripts({ + 'docs:json': 'compodoc -p ./tsconfig.json -e json -d .', + }); + packageManager.addStorybookCommandInScripts({ + port: 6006, + preCommand: 'docs:json', + }); }; export default generator; diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts index bf786d5e2be2..15ef30d8d81b 100644 --- a/lib/cli/src/generators/baseGenerator.ts +++ b/lib/cli/src/generators/baseGenerator.ts @@ -49,7 +49,7 @@ export async function baseGenerator( // If angular skip `docs` because docs is buggy for now (https://github.com/storybookjs/storybook/issues/9103) // for others framework add `essentials` i.e. `actions`, `backgrounds`, `docs`, `viewport` // API of essentials needs to be clarified whether we need to add dependencies or not - framework !== 'angular' && '@storybook/addon-essentials', + '@storybook/addon-essentials', ].filter(Boolean); // ⚠️ Some addons have peer deps that must be added too, like '@storybook/addon-docs' => 'react-is' @@ -68,7 +68,7 @@ export async function baseGenerator( ].filter(Boolean); const versionedPackages = await packageManager.getVersionedPackages(...packages); - configure([...addons, ...extraAddons]); + configure(framework, [...addons, ...extraAddons]); if (addComponents) { copyComponents(framework, language); } diff --git a/lib/cli/src/generators/configure.ts b/lib/cli/src/generators/configure.ts index 67d20d7d2767..44dcdff9bc83 100644 --- a/lib/cli/src/generators/configure.ts +++ b/lib/cli/src/generators/configure.ts @@ -1,4 +1,5 @@ import fse from 'fs-extra'; +import { SupportedFrameworks } from '../project_types'; function configureMain(addons: string[], custom?: any) { const hasSrc = fse.existsSync('./src'); @@ -16,18 +17,27 @@ function configureMain(addons: string[], custom?: any) { fse.writeFileSync('./.storybook/main.js', stringified, { encoding: 'utf8' }); } -function configurePreview() { - fse.writeFileSync( - './.storybook/preview.js', - `export const parameters = { +function configurePreview(framework: SupportedFrameworks) { + const parameters = ` +export const parameters = { actions: { argTypesRegex: "^on.*" }, -}`, - { encoding: 'utf8' } - ); +}`; + + const preview = + framework === 'angular' + ? ` +import { setCompodocJson } from "@storybook/addon-docs/angular"; +import docJson from "../documentation.json"; +setCompodocJson(docJson); + +${parameters}` + : parameters; + + fse.writeFileSync('./.storybook/preview.js', preview, { encoding: 'utf8' }); } -export function configure(addons: string[], custom?: any) { +export function configure(framework: SupportedFrameworks, addons: string[], custom?: any) { fse.ensureDirSync('./.storybook'); configureMain(addons, custom); - configurePreview(); + configurePreview(framework); } diff --git a/lib/cli/src/js-package-manager/JsPackageManager.ts b/lib/cli/src/js-package-manager/JsPackageManager.ts index eeb52bfa4be7..d70cee1d37aa 100644 --- a/lib/cli/src/js-package-manager/JsPackageManager.ts +++ b/lib/cli/src/js-package-manager/JsPackageManager.ts @@ -14,6 +14,8 @@ export abstract class JsPackageManager { public abstract getRunStorybookCommand(): string; + public abstract getRunCommand(command: string): string; + /** * Install dependencies listed in `package.json` */ @@ -178,9 +180,11 @@ export abstract class JsPackageManager { return versions.reverse().find((version) => satisfies(version, constraint)); } - public addStorybookCommandInScripts(options?: { port: number; staticFolder?: string }) { - const packageJson = this.retrievePackageJson(); - + public addStorybookCommandInScripts(options?: { + port: number; + staticFolder?: string; + preCommand?: string; + }) { const sbPort = options?.port ?? 6006; const storybookCmd = options?.staticFolder ? `start-storybook -p ${sbPort} -s ${options.staticFolder}` @@ -190,12 +194,20 @@ export abstract class JsPackageManager { ? `build-storybook -s ${options.staticFolder}` : 'build-storybook'; + const preCommand = options.preCommand ? this.getRunCommand(options.preCommand) : undefined; + this.addScripts({ + storybook: [preCommand, storybookCmd].filter(Boolean).join(' && '), + 'build-storybook': [preCommand, buildStorybookCmd].filter(Boolean).join(' && '), + }); + } + + public addScripts(scripts: Record) { + const packageJson = this.retrievePackageJson(); writePackageJson({ ...packageJson, scripts: { ...packageJson.scripts, - storybook: storybookCmd, - 'build-storybook': buildStorybookCmd, + ...scripts, }, }); } diff --git a/lib/cli/src/js-package-manager/NPMProxy.ts b/lib/cli/src/js-package-manager/NPMProxy.ts index a8e4765954ee..4ce57a202bb2 100644 --- a/lib/cli/src/js-package-manager/NPMProxy.ts +++ b/lib/cli/src/js-package-manager/NPMProxy.ts @@ -9,6 +9,10 @@ export class NPMProxy extends JsPackageManager { return 'npm run storybook'; } + getRunCommand(command: string): string { + return `npm run ${command}`; + } + protected runInstall(): void { this.executeCommand('npm', ['install'], 'inherit'); } diff --git a/lib/cli/src/js-package-manager/Yarn1Proxy.ts b/lib/cli/src/js-package-manager/Yarn1Proxy.ts index af09bf197214..24b20351108c 100644 --- a/lib/cli/src/js-package-manager/Yarn1Proxy.ts +++ b/lib/cli/src/js-package-manager/Yarn1Proxy.ts @@ -9,6 +9,10 @@ export class Yarn1Proxy extends JsPackageManager { return 'yarn storybook'; } + getRunCommand(command: string): string { + return `yarn ${command}`; + } + protected runInstall(): void { this.executeCommand('yarn', [], 'inherit'); } diff --git a/lib/cli/src/js-package-manager/Yarn2Proxy.ts b/lib/cli/src/js-package-manager/Yarn2Proxy.ts index 2b7783bb58be..f450b312f605 100644 --- a/lib/cli/src/js-package-manager/Yarn2Proxy.ts +++ b/lib/cli/src/js-package-manager/Yarn2Proxy.ts @@ -9,6 +9,10 @@ export class Yarn2Proxy extends JsPackageManager { return 'yarn storybook'; } + getRunCommand(command: string): string { + return `yarn ${command}`; + } + protected runInstall(): void { this.executeCommand('yarn', [], 'inherit'); } From fb7718db3cb655f17bf5f23340daca7d2c400a2c Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Sun, 5 Jul 2020 11:15:14 +0200 Subject: [PATCH 03/16] cleanup comments --- lib/cli/src/generators/baseGenerator.ts | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts index 15ef30d8d81b..69a457916e0c 100644 --- a/lib/cli/src/generators/baseGenerator.ts +++ b/lib/cli/src/generators/baseGenerator.ts @@ -46,25 +46,16 @@ export async function baseGenerator( const addons = [ '@storybook/addon-links', '@storybook/addon-actions', - // If angular skip `docs` because docs is buggy for now (https://github.com/storybookjs/storybook/issues/9103) - // for others framework add `essentials` i.e. `actions`, `backgrounds`, `docs`, `viewport` - // API of essentials needs to be clarified whether we need to add dependencies or not '@storybook/addon-essentials', ].filter(Boolean); - // ⚠️ Some addons have peer deps that must be added too, like '@storybook/addon-docs' => 'react-is' - const addonsPeerDeps = addons.some( - (addon) => addon === '@storybook/addon-essentials' || addon === '@storybook/addon-docs' - ) - ? ['react-is'] - : []; - const packages = [ `@storybook/${framework}`, ...addons, ...extraPackages, ...extraAddons, - ...addonsPeerDeps, + // ⚠️ Some addons have peer deps that must be added too, like '@storybook/addon-docs' => 'react-is' + 'react-is', ].filter(Boolean); const versionedPackages = await packageManager.getVersionedPackages(...packages); From 4bc7cc1a15b115efd617fda3e0ab1faac6222499 Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Sun, 5 Jul 2020 13:20:15 +0200 Subject: [PATCH 04/16] Add something back for Marko --- .../src/frameworks/marko/1-Button.stories.js | 20 +++++++++++++++++++ lib/cli/src/frameworks/marko/Button.marko | 13 ++++++++++++ 2 files changed, 33 insertions(+) create mode 100644 lib/cli/src/frameworks/marko/1-Button.stories.js create mode 100644 lib/cli/src/frameworks/marko/Button.marko diff --git a/lib/cli/src/frameworks/marko/1-Button.stories.js b/lib/cli/src/frameworks/marko/1-Button.stories.js new file mode 100644 index 000000000000..e82bebc4555a --- /dev/null +++ b/lib/cli/src/frameworks/marko/1-Button.stories.js @@ -0,0 +1,20 @@ +import { action } from '@storybook/addon-actions'; +import Button from './Button.marko'; + +export default { + title: 'Button', + argTypes: { + children: { control: 'text' }, + }, +}; + +const ButtonStory = (args) => ({ + component: Button, + input: args, +}); + +export const Text = ButtonStory.bind({}); +Text.args = { + children: 'Button', + onClick: action('onClick'), +}; diff --git a/lib/cli/src/frameworks/marko/Button.marko b/lib/cli/src/frameworks/marko/Button.marko new file mode 100644 index 000000000000..01f96c2475bc --- /dev/null +++ b/lib/cli/src/frameworks/marko/Button.marko @@ -0,0 +1,13 @@ +class { + onCreate(input) { + this.onClick = input.onClick; + } + + handleClick() { + this.input.onClick(); + } +} + +
+ +
From 019a7f7ed981b2a6a2667c9d87ed28a0c39f0f07 Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Sun, 5 Jul 2020 14:25:41 +0200 Subject: [PATCH 05/16] fix linkto e2e --- lib/cli/src/frameworks/angular/1-Button.stories.ts | 2 +- lib/cli/src/frameworks/aurelia/1-Button.stories.ts | 2 +- lib/cli/src/frameworks/ember/1-Button.stories.js | 2 +- lib/cli/src/frameworks/html/1-Button.stories.js | 2 +- lib/cli/src/frameworks/mithril/1-Button.stories.js | 2 +- lib/cli/src/frameworks/preact/1-Button.stories.js | 2 +- lib/cli/src/frameworks/rax/1-Button.stories.js | 2 +- lib/cli/src/frameworks/react/js/1-Button.stories.js | 2 +- lib/cli/src/frameworks/react/ts/1-Button.stories.tsx | 2 +- lib/cli/src/frameworks/riot/1-Button.stories.js | 2 +- lib/cli/src/frameworks/svelte/1-button.stories.js | 2 +- lib/cli/src/frameworks/vue/1-Button.stories.js | 2 +- lib/cli/src/frameworks/web-components/1-Button.stories.js | 4 +++- .../ANGULAR/template-mdx/src/stories/1-Button.stories.mdx | 2 +- .../AURELIA/template-mdx/src/stories/1-Button.stories.mdx | 2 +- 15 files changed, 17 insertions(+), 15 deletions(-) diff --git a/lib/cli/src/frameworks/angular/1-Button.stories.ts b/lib/cli/src/frameworks/angular/1-Button.stories.ts index b1eca68265e0..b0447ca5ea8f 100644 --- a/lib/cli/src/frameworks/angular/1-Button.stories.ts +++ b/lib/cli/src/frameworks/angular/1-Button.stories.ts @@ -41,7 +41,7 @@ export const ButtonWithLinkToAnotherStory = () => ({ component: Button, props: { text: 'Go to Welcome Story', - onClick: linkTo('Welcome'), + onClick: linkTo('example-introduction--page'), }, }); diff --git a/lib/cli/src/frameworks/aurelia/1-Button.stories.ts b/lib/cli/src/frameworks/aurelia/1-Button.stories.ts index 31d1b5b24da4..e6a5f771e3ab 100644 --- a/lib/cli/src/frameworks/aurelia/1-Button.stories.ts +++ b/lib/cli/src/frameworks/aurelia/1-Button.stories.ts @@ -42,7 +42,7 @@ export const ButtonWithLinkToAnotherStory = () => ({ component: Button, props: { text: 'Go to Welcome Story', - onClick: linkTo('Welcome'), + onClick: linkTo('example-introduction--page'), }, }); diff --git a/lib/cli/src/frameworks/ember/1-Button.stories.js b/lib/cli/src/frameworks/ember/1-Button.stories.js index a253da3b1e5f..213c425527d3 100644 --- a/lib/cli/src/frameworks/ember/1-Button.stories.js +++ b/lib/cli/src/frameworks/ember/1-Button.stories.js @@ -46,7 +46,7 @@ export const ButtonWithLinkToAnotherStory = () => ({ `, context: { - onClick: linkTo('Welcome'), + onClick: linkTo('example-introduction--page'), }, }); diff --git a/lib/cli/src/frameworks/html/1-Button.stories.js b/lib/cli/src/frameworks/html/1-Button.stories.js index 7244dca963d2..131b9fe0e93b 100644 --- a/lib/cli/src/frameworks/html/1-Button.stories.js +++ b/lib/cli/src/frameworks/html/1-Button.stories.js @@ -42,7 +42,7 @@ export const ButtonWithLinkToAnotherStory = () => { const btn = document.createElement('button'); btn.type = 'button'; btn.innerText = 'Go to Welcome Story'; - btn.addEventListener('click', linkTo('Welcome')); + btn.addEventListener('click', linkTo('example-introduction--page')); return btn; }; diff --git a/lib/cli/src/frameworks/mithril/1-Button.stories.js b/lib/cli/src/frameworks/mithril/1-Button.stories.js index 34a20a3230ca..545967df0c54 100644 --- a/lib/cli/src/frameworks/mithril/1-Button.stories.js +++ b/lib/cli/src/frameworks/mithril/1-Button.stories.js @@ -34,7 +34,7 @@ TextWithAction.storyName = 'With an action'; TextWithAction.parameters = { notes: 'My notes on a button with emojis' }; export const ButtonWithLinkToAnotherStory = () => ({ - view: () => m(Button, { onclick: linkTo('Welcome') }, 'Go to Welcome Story'), + view: () => m(Button, { onclick: linkTo('example-introduction--page') }, 'Go to Welcome Story'), }); ButtonWithLinkToAnotherStory.storyName = 'button with link to another story'; diff --git a/lib/cli/src/frameworks/preact/1-Button.stories.js b/lib/cli/src/frameworks/preact/1-Button.stories.js index b5c376d2a9ee..de530af75e26 100644 --- a/lib/cli/src/frameworks/preact/1-Button.stories.js +++ b/lib/cli/src/frameworks/preact/1-Button.stories.js @@ -34,7 +34,7 @@ TextWithAction.storyName = 'With an action'; TextWithAction.parameters = { notes: 'My notes on a button with emojis' }; export const ButtonWithLinkToAnotherStory = () => ( - + ); ButtonWithLinkToAnotherStory.storyName = 'button with link to another story'; diff --git a/lib/cli/src/frameworks/rax/1-Button.stories.js b/lib/cli/src/frameworks/rax/1-Button.stories.js index ebf850f6b006..9cd6d61e9ef5 100644 --- a/lib/cli/src/frameworks/rax/1-Button.stories.js +++ b/lib/cli/src/frameworks/rax/1-Button.stories.js @@ -38,7 +38,7 @@ TextWithAction.storyName = 'With an action'; TextWithAction.parameters = { notes: 'My notes on a button with emojis' }; export const ButtonWithLinkToAnotherStory = () => ( - ); diff --git a/lib/cli/src/frameworks/react/js/1-Button.stories.js b/lib/cli/src/frameworks/react/js/1-Button.stories.js index aee11b94a2d8..d9efd163102b 100644 --- a/lib/cli/src/frameworks/react/js/1-Button.stories.js +++ b/lib/cli/src/frameworks/react/js/1-Button.stories.js @@ -30,6 +30,6 @@ Emoji.args = { Emoji.parameters = { notes: 'My notes on a button with emojis' }; export const ButtonWithLinkToAnotherStory = () => ( - + ); ButtonWithLinkToAnotherStory.storyName = 'button with link to another story'; diff --git a/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx b/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx index 90e1a2726171..1733d28e2f91 100644 --- a/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx +++ b/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx @@ -25,6 +25,6 @@ Emoji.args = { Emoji.parameters = { notes: 'My notes on a button with emojis' }; export const ButtonWithLinkToAnotherStory = () => ( - + ); ButtonWithLinkToAnotherStory.storyName = 'button with link to another story'; diff --git a/lib/cli/src/frameworks/riot/1-Button.stories.js b/lib/cli/src/frameworks/riot/1-Button.stories.js index f2041831af42..5edd1df92669 100644 --- a/lib/cli/src/frameworks/riot/1-Button.stories.js +++ b/lib/cli/src/frameworks/riot/1-Button.stories.js @@ -42,7 +42,7 @@ TextWithAction.storyName = 'With an action'; export const ButtonWithLinkToAnotherStory = () => mount('my-button', { content: 'Go to Welcome Story', - onClick: linkTo('Welcome'), + onClick: linkTo('example-introduction--page'), }); ButtonWithLinkToAnotherStory.storyName = 'button with link to another story'; diff --git a/lib/cli/src/frameworks/svelte/1-button.stories.js b/lib/cli/src/frameworks/svelte/1-button.stories.js index b45cd63c8081..1783599f30cd 100644 --- a/lib/cli/src/frameworks/svelte/1-button.stories.js +++ b/lib/cli/src/frameworks/svelte/1-button.stories.js @@ -49,7 +49,7 @@ export const ButtonWithLinkToAnotherStory = () => ({ text: 'Go to Welcome Story', }, on: { - click: linkTo('Welcome'), + click: linkTo('example-introduction--page'), }, }); diff --git a/lib/cli/src/frameworks/vue/1-Button.stories.js b/lib/cli/src/frameworks/vue/1-Button.stories.js index 27d7cab8ad7e..56903769f2f3 100644 --- a/lib/cli/src/frameworks/vue/1-Button.stories.js +++ b/lib/cli/src/frameworks/vue/1-Button.stories.js @@ -37,7 +37,7 @@ TextWithAction.parameters = { notes: 'My notes on a button with emojis' }; export const ButtonWithLinkToAnotherStory = () => ({ components: { MyButton }, template: 'Go to Welcome Story', - methods: { action: linkTo('Welcome') }, + methods: { action: linkTo('example-introduction--page') }, }); ButtonWithLinkToAnotherStory.storyName = 'button with link to another story'; diff --git a/lib/cli/src/frameworks/web-components/1-Button.stories.js b/lib/cli/src/frameworks/web-components/1-Button.stories.js index 01fccf85448b..1fb744ed2ba2 100644 --- a/lib/cli/src/frameworks/web-components/1-Button.stories.js +++ b/lib/cli/src/frameworks/web-components/1-Button.stories.js @@ -35,7 +35,9 @@ export const TextWithAction = () => html` TextWithAction.storyName = 'With an action'; TextWithAction.parameters = { notes: 'My notes on a button with emojis' }; -export const ButtonWithLinkToAnotherStory = () => html``; diff --git a/lib/cli/src/generators/ANGULAR/template-mdx/src/stories/1-Button.stories.mdx b/lib/cli/src/generators/ANGULAR/template-mdx/src/stories/1-Button.stories.mdx index 13c38a6621fa..2e666b3382f1 100644 --- a/lib/cli/src/generators/ANGULAR/template-mdx/src/stories/1-Button.stories.mdx +++ b/lib/cli/src/generators/ANGULAR/template-mdx/src/stories/1-Button.stories.mdx @@ -43,7 +43,7 @@ This `Button` document defines a few stories: component: Button, props: { text: 'Go to Welcome Story', - onClick: linkTo('Welcome'), + onClick: linkTo('example-introduction--page'), }, }} diff --git a/lib/cli/src/generators/AURELIA/template-mdx/src/stories/1-Button.stories.mdx b/lib/cli/src/generators/AURELIA/template-mdx/src/stories/1-Button.stories.mdx index a488b7b8fd72..94b8a5358cb3 100644 --- a/lib/cli/src/generators/AURELIA/template-mdx/src/stories/1-Button.stories.mdx +++ b/lib/cli/src/generators/AURELIA/template-mdx/src/stories/1-Button.stories.mdx @@ -43,7 +43,7 @@ This `Button` document defines a few stories: component: Button, props: { text: 'Go to Welcome Story', - onClick: linkTo('Welcome'), + onClick: linkTo('example-introduction--page'), }, }} From b5ff9acdb85c27ee845da31daf6575dac7583767 Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Sun, 5 Jul 2020 14:44:52 +0200 Subject: [PATCH 06/16] change how visit is done --- cypress/generated/addon-action.spec.ts | 4 +--- cypress/generated/addon-link.spec.ts | 6 ++---- cypress/generated/basic.spec.ts | 4 +--- cypress/support/commands.js | 10 ++++++++++ cypress/support/index.d.ts | 5 +++++ 5 files changed, 19 insertions(+), 10 deletions(-) diff --git a/cypress/generated/addon-action.spec.ts b/cypress/generated/addon-action.spec.ts index cda3884cf613..fd458921a614 100644 --- a/cypress/generated/addon-action.spec.ts +++ b/cypress/generated/addon-action.spec.ts @@ -1,8 +1,6 @@ -import { visit } from '../helper'; - describe('addon-action', () => { before(() => { - visit(); + cy.visitStorybook(); }); it('should trigger an action', () => { diff --git a/cypress/generated/addon-link.spec.ts b/cypress/generated/addon-link.spec.ts index d94420c496c6..e30bc4d94e19 100644 --- a/cypress/generated/addon-link.spec.ts +++ b/cypress/generated/addon-link.spec.ts @@ -1,8 +1,6 @@ -import { visit, clickAddon } from '../helper'; - describe('addon-link', () => { before(() => { - visit(); + cy.visitStorybook(); cy.get('#button').click(); }); @@ -20,6 +18,6 @@ describe('addon-link', () => { cy.getStoryElement().contains('Go to Welcome Story').click(); // assert url changes - cy.url().should('include', 'path=/story/welcome--to-storybook'); + cy.url().should('include', 'path=/story/example-introduction--page'); }); }); diff --git a/cypress/generated/basic.spec.ts b/cypress/generated/basic.spec.ts index 098209980ee6..9e26856b19e1 100644 --- a/cypress/generated/basic.spec.ts +++ b/cypress/generated/basic.spec.ts @@ -1,8 +1,6 @@ -import { visit } from '../helper'; - describe('Basic Flow', () => { before(() => { - visit(); + cy.visitStorybook(); }); it('should load welcome flow', () => { diff --git a/cypress/support/commands.js b/cypress/support/commands.js index e67afd9572f7..29a77afc4024 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -36,6 +36,16 @@ Cypress.Commands.add( } ); +Cypress.Commands.add('visitStorybook', (route = '') => { + cy.log('visitStorybook'); + const host = Cypress.env('location') || 'http://localhost:8001'; + return cy + .clearLocalStorage() + .visit(`${host}/${route}`) + .get(`#storybook-preview-iframe`) + .should('not.be.empty'); +}); + Cypress.Commands.add('getStoryElement', {}, () => { cy.log('getStoryElement'); return cy diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts index 9f4273ed7f65..f086d739f616 100644 --- a/cypress/support/index.d.ts +++ b/cypress/support/index.d.ts @@ -4,6 +4,11 @@ type LoggerMethod = 'log' | 'info' | 'debug'; declare namespace Cypress { interface Chainable { + /** + * Visit given page + */ + visitStorybook(route?: string): Chainable; + /** * Custom command to select the DOM element of a story in the canvas tab. */ From c870c4bb004c73d43e99bac42d59bfd2a4f37d01 Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Sun, 5 Jul 2020 15:00:43 +0200 Subject: [PATCH 07/16] fix unit test --- lib/cli/src/helpers.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/cli/src/helpers.test.ts b/lib/cli/src/helpers.test.ts index 070c41052dc1..7f9a768fd532 100644 --- a/lib/cli/src/helpers.test.ts +++ b/lib/cli/src/helpers.test.ts @@ -78,13 +78,13 @@ describe('Helpers', () => { expect(copySyncSpy).toHaveBeenNthCalledWith( 1, expectedDirectory, - './src/stories', + './stories', expect.anything() ); expect(copySyncSpy).toHaveBeenNthCalledWith( 2, 'frameworks/common', - './src/stories', + './stories', expect.anything() ); } From 872f4b0645e40f32ef1562d0558d0812a4036d40 Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Sun, 5 Jul 2020 15:02:07 +0200 Subject: [PATCH 08/16] fix yarn 2 --- lib/cli/src/generators/baseGenerator.ts | 14 +++++++++++++- lib/cli/src/js-package-manager/JsPackageManager.ts | 2 ++ lib/cli/src/js-package-manager/NPMProxy.ts | 2 ++ lib/cli/src/js-package-manager/Yarn1Proxy.ts | 2 ++ lib/cli/src/js-package-manager/Yarn2Proxy.ts | 2 ++ 5 files changed, 21 insertions(+), 1 deletion(-) diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts index 69a457916e0c..0fa77203f709 100644 --- a/lib/cli/src/generators/baseGenerator.ts +++ b/lib/cli/src/generators/baseGenerator.ts @@ -43,11 +43,22 @@ export async function baseGenerator( ...options, }; + const yarn2Dependencies = + packageManager.type === 'yarn2' + ? [ + '@storybook/addon-actions', + '@storybook/addon-backgrounds', + '@storybook/addon-controls', + '@storybook/addon-docs', + '@storybook/addon-viewport', + ] + : []; + const addons = [ '@storybook/addon-links', '@storybook/addon-actions', '@storybook/addon-essentials', - ].filter(Boolean); + ]; const packages = [ `@storybook/${framework}`, @@ -56,6 +67,7 @@ export async function baseGenerator( ...extraAddons, // ⚠️ Some addons have peer deps that must be added too, like '@storybook/addon-docs' => 'react-is' 'react-is', + ...yarn2Dependencies, ].filter(Boolean); const versionedPackages = await packageManager.getVersionedPackages(...packages); diff --git a/lib/cli/src/js-package-manager/JsPackageManager.ts b/lib/cli/src/js-package-manager/JsPackageManager.ts index d70cee1d37aa..25043912d88e 100644 --- a/lib/cli/src/js-package-manager/JsPackageManager.ts +++ b/lib/cli/src/js-package-manager/JsPackageManager.ts @@ -10,6 +10,8 @@ const logger = console; const { storybookCLIVersion, devDependencies } = require('../../package.json'); export abstract class JsPackageManager { + public abstract type: 'npm' | 'yarn' | 'yarn2'; + public abstract initPackageJson(): void; public abstract getRunStorybookCommand(): string; diff --git a/lib/cli/src/js-package-manager/NPMProxy.ts b/lib/cli/src/js-package-manager/NPMProxy.ts index 4ce57a202bb2..ae74509acf03 100644 --- a/lib/cli/src/js-package-manager/NPMProxy.ts +++ b/lib/cli/src/js-package-manager/NPMProxy.ts @@ -1,6 +1,8 @@ import { JsPackageManager } from './JsPackageManager'; export class NPMProxy extends JsPackageManager { + type: 'npm'; + initPackageJson() { return this.executeCommand('npm', ['init', '-y']); } diff --git a/lib/cli/src/js-package-manager/Yarn1Proxy.ts b/lib/cli/src/js-package-manager/Yarn1Proxy.ts index 24b20351108c..ed40c199e11b 100644 --- a/lib/cli/src/js-package-manager/Yarn1Proxy.ts +++ b/lib/cli/src/js-package-manager/Yarn1Proxy.ts @@ -1,6 +1,8 @@ import { JsPackageManager } from './JsPackageManager'; export class Yarn1Proxy extends JsPackageManager { + type: 'yarn'; + initPackageJson() { return this.executeCommand('yarn', ['init', '-y']); } diff --git a/lib/cli/src/js-package-manager/Yarn2Proxy.ts b/lib/cli/src/js-package-manager/Yarn2Proxy.ts index f450b312f605..5d8d8fe2b7b2 100644 --- a/lib/cli/src/js-package-manager/Yarn2Proxy.ts +++ b/lib/cli/src/js-package-manager/Yarn2Proxy.ts @@ -1,6 +1,8 @@ import { JsPackageManager } from './JsPackageManager'; export class Yarn2Proxy extends JsPackageManager { + type: 'yarn2'; + initPackageJson() { return this.executeCommand('yarn', ['init']); } From e8fc2f49ded0b2bfd435e92ccb7321001d0fd292 Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Sun, 5 Jul 2020 17:23:31 +0200 Subject: [PATCH 09/16] fix duplicate babel plugin --- addons/docs/src/frameworks/common/preset.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/addons/docs/src/frameworks/common/preset.ts b/addons/docs/src/frameworks/common/preset.ts index deb078f6d0e4..29f618337843 100644 --- a/addons/docs/src/frameworks/common/preset.ts +++ b/addons/docs/src/frameworks/common/preset.ts @@ -42,12 +42,14 @@ export const webpackDlls = (dlls: string[], options: any) => { export function webpack(webpackConfig: any = {}, options: any = {}) { const { module = {} } = webpackConfig; + + const configuredFrameworks = ['react', 'preact', 'mithril']; // it will reuse babel options that are already in use in storybook // also, these babel options are chained with other presets. const { babelOptions, mdxBabelOptions, - configureJSX = options.framework !== 'react', // if not user-specified + configureJSX = !configuredFrameworks.includes(options.framework), // if not user-specified sourceLoaderOptions = options.framework === 'react' ? null : {}, transcludeMarkdown = false, } = options; From bd779f0e6cce27f62b39b2e878523b450d5b55b8 Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Sun, 5 Jul 2020 18:50:20 +0200 Subject: [PATCH 10/16] small change cypress --- cypress/generated/addon-link.spec.ts | 4 +--- cypress/support/commands.js | 4 +++- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/cypress/generated/addon-link.spec.ts b/cypress/generated/addon-link.spec.ts index e30bc4d94e19..fae9f1e389ef 100644 --- a/cypress/generated/addon-link.spec.ts +++ b/cypress/generated/addon-link.spec.ts @@ -1,12 +1,10 @@ describe('addon-link', () => { before(() => { cy.visitStorybook(); - cy.get('#button').click(); }); it('should redirect to another story', () => { - // click on the button - cy.get('#button--button-with-link-to-another-story').click(); + cy.navigateToStory('button', 'button-with-link-to-another-story'); // assert url changes cy.url().should('include', 'path=/story/button--button-with-link-to-another-story'); diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 29a77afc4024..0efada386e3b 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -43,7 +43,9 @@ Cypress.Commands.add('visitStorybook', (route = '') => { .clearLocalStorage() .visit(`${host}/${route}`) .get(`#storybook-preview-iframe`) - .should('not.be.empty'); + .then({ timeout: 15000 }, (iframe) => { + return cy.wrap(iframe, { timeout: 10000 }).should('not.be.empty'); + }); }); Cypress.Commands.add('getStoryElement', {}, () => { From 1f5448e8d26b8bbcbe7401ba49a0c6ef7fa1dd9d Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Sun, 5 Jul 2020 21:11:07 +0200 Subject: [PATCH 11/16] stab e2e --- cypress/generated/addon-link.spec.ts | 8 +------- cypress/support/commands.js | 25 ++++++++++++++----------- cypress/support/index.d.ts | 4 ++-- 3 files changed, 17 insertions(+), 20 deletions(-) diff --git a/cypress/generated/addon-link.spec.ts b/cypress/generated/addon-link.spec.ts index fae9f1e389ef..ae2ff9daba4d 100644 --- a/cypress/generated/addon-link.spec.ts +++ b/cypress/generated/addon-link.spec.ts @@ -4,13 +4,7 @@ describe('addon-link', () => { }); it('should redirect to another story', () => { - cy.navigateToStory('button', 'button-with-link-to-another-story'); - - // assert url changes - cy.url().should('include', 'path=/story/button--button-with-link-to-another-story'); - - // check for selected element - cy.get('#button--button-with-link-to-another-story').should('have.class', 'selected'); + cy.navigateToStory('button', 'button with link to another story'); // check for content cy.getStoryElement().contains('Go to Welcome Story').click(); diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 0efada386e3b..38ae46e7a797 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -36,16 +36,18 @@ Cypress.Commands.add( } ); -Cypress.Commands.add('visitStorybook', (route = '') => { +Cypress.Commands.add('visitStorybook', () => { cy.log('visitStorybook'); const host = Cypress.env('location') || 'http://localhost:8001'; return cy .clearLocalStorage() - .visit(`${host}/${route}`) - .get(`#storybook-preview-iframe`) - .then({ timeout: 15000 }, (iframe) => { - return cy.wrap(iframe, { timeout: 10000 }).should('not.be.empty'); - }); + .visit(`${host}/?path=/story/example-introduction--page`) + .get(`#storybook-preview-iframe`, { log: false }) + .its('0.contentDocument.body', { log: false }) + .should('not.be.empty') + .then((body) => cy.wrap(body, { log: false })) + .find('#docs-root', { log: false }) + .should('not.be.empty'); }); Cypress.Commands.add('getStoryElement', {}, () => { @@ -73,16 +75,17 @@ Cypress.Commands.add('getDocsElement', {}, () => { }); Cypress.Commands.add('navigateToStory', (kind, name) => { - const kindId = kind.replace(' ', '-').toLowerCase(); - const storyId = name.replace(' ', '-').toLowerCase(); + const kindId = kind.replace(/ /g, '-').toLowerCase(); + const storyId = name.replace(/ /g, '-').toLowerCase(); const storyLinkId = `#${kindId}--${storyId}`; - cy.log('navigateToStory'); + cy.log(`navigateToStory ${kind} ${name}`); if (name !== 'page') { - cy.get(`#${kindId}`, { log: false }).click(); + // Section can be collapsed, click twice ensure expansion + cy.get(`#${kindId}`).click(); } - cy.get(storyLinkId, { log: false }).click(); + cy.get(storyLinkId).click(); // assert url changes cy.url().should('include', `path=/story/${kindId}--${storyId}`); diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts index f086d739f616..2c303f0eb2ac 100644 --- a/cypress/support/index.d.ts +++ b/cypress/support/index.d.ts @@ -5,9 +5,9 @@ type LoggerMethod = 'log' | 'info' | 'debug'; declare namespace Cypress { interface Chainable { /** - * Visit given page + * Visit storybook's introduction page */ - visitStorybook(route?: string): Chainable; + visitStorybook(): Chainable; /** * Custom command to select the DOM element of a story in the canvas tab. From 74adc63282a223180425715241d1f1680d842e80 Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Sun, 5 Jul 2020 22:03:18 +0200 Subject: [PATCH 12/16] increase timeout --- cypress/support/commands.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 38ae46e7a797..31be4fbe7054 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -42,11 +42,11 @@ Cypress.Commands.add('visitStorybook', () => { return cy .clearLocalStorage() .visit(`${host}/?path=/story/example-introduction--page`) - .get(`#storybook-preview-iframe`, { log: false }) + .get(`#storybook-preview-iframe`, { log: false, timeout: 15000 }) .its('0.contentDocument.body', { log: false }) .should('not.be.empty') .then((body) => cy.wrap(body, { log: false })) - .find('#docs-root', { log: false }) + .find('#docs-root', { log: false, timeout: 15000 }) .should('not.be.empty'); }); From 44239668fdb2355375e6618812d9fcd145fd8303 Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Sun, 5 Jul 2020 22:33:06 +0200 Subject: [PATCH 13/16] change timeout --- cypress/support/commands.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 31be4fbe7054..5d109d14952f 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -42,7 +42,8 @@ Cypress.Commands.add('visitStorybook', () => { return cy .clearLocalStorage() .visit(`${host}/?path=/story/example-introduction--page`) - .get(`#storybook-preview-iframe`, { log: false, timeout: 15000 }) + .get(`#storybook-preview-iframe`, { log: false }) + .then({ timeout: 15000 }, (iframe) => cy.wrap(iframe)) .its('0.contentDocument.body', { log: false }) .should('not.be.empty') .then((body) => cy.wrap(body, { log: false })) From c7afe6beee3ed797b349c935460ac061926338b7 Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Mon, 6 Jul 2020 22:01:21 +0200 Subject: [PATCH 14/16] Attempt to set babel core --- cypress/support/commands.js | 3 +-- scripts/run-e2e-config.ts | 4 +++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 5d109d14952f..38ae46e7a797 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -43,11 +43,10 @@ Cypress.Commands.add('visitStorybook', () => { .clearLocalStorage() .visit(`${host}/?path=/story/example-introduction--page`) .get(`#storybook-preview-iframe`, { log: false }) - .then({ timeout: 15000 }, (iframe) => cy.wrap(iframe)) .its('0.contentDocument.body', { log: false }) .should('not.be.empty') .then((body) => cy.wrap(body, { log: false })) - .find('#docs-root', { log: false, timeout: 15000 }) + .find('#docs-root', { log: false }) .should('not.be.empty'); }); diff --git a/scripts/run-e2e-config.ts b/scripts/run-e2e-config.ts index 7bd98044930d..58e7dfa265c8 100644 --- a/scripts/run-e2e-config.ts +++ b/scripts/run-e2e-config.ts @@ -134,6 +134,8 @@ export const cra: Parameters = { name: 'cra', version: 'latest', generator: 'npx create-react-app@{{version}} {{name}}-v{{version}}', + // Issues with 7.10.4. To remove later ? + additionalDeps: ['@babel/core@7.10.2'], }; // TODO: there is a compatibility issue with riot@4 @@ -161,7 +163,7 @@ export const vue: Parameters = { name: 'vue', version: 'latest', generator: `npx @vue/cli@{{version}} create {{name}}-v{{version}} --default --packageManager=yarn --no-git --force`, - additionalDeps: ['react', 'react-dom'], + additionalDeps: ['react', 'react-dom', '@babel/core@7.10.2'], }; export const web_components: Parameters = { From 7b45f7f7ab25ecc61858582fbd3592fa8b2b8b27 Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Tue, 7 Jul 2020 21:06:58 +0200 Subject: [PATCH 15/16] cleanup --- addons/docs/src/frameworks/common/preset.ts | 2 -- lib/cli/src/generators/baseGenerator.ts | 12 ------------ scripts/run-e2e-config.ts | 4 +--- 3 files changed, 1 insertion(+), 17 deletions(-) diff --git a/addons/docs/src/frameworks/common/preset.ts b/addons/docs/src/frameworks/common/preset.ts index 67c426356935..475da29d7926 100644 --- a/addons/docs/src/frameworks/common/preset.ts +++ b/addons/docs/src/frameworks/common/preset.ts @@ -43,8 +43,6 @@ export const webpackDlls = (dlls: string[], options: any) => { export function webpack(webpackConfig: any = {}, options: any = {}) { const { module = {} } = webpackConfig; - - const configuredFrameworks = ['react', 'preact', 'mithril']; // it will reuse babel options that are already in use in storybook // also, these babel options are chained with other presets. const { diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts index 0fa77203f709..9c6295d44999 100644 --- a/lib/cli/src/generators/baseGenerator.ts +++ b/lib/cli/src/generators/baseGenerator.ts @@ -43,17 +43,6 @@ export async function baseGenerator( ...options, }; - const yarn2Dependencies = - packageManager.type === 'yarn2' - ? [ - '@storybook/addon-actions', - '@storybook/addon-backgrounds', - '@storybook/addon-controls', - '@storybook/addon-docs', - '@storybook/addon-viewport', - ] - : []; - const addons = [ '@storybook/addon-links', '@storybook/addon-actions', @@ -67,7 +56,6 @@ export async function baseGenerator( ...extraAddons, // ⚠️ Some addons have peer deps that must be added too, like '@storybook/addon-docs' => 'react-is' 'react-is', - ...yarn2Dependencies, ].filter(Boolean); const versionedPackages = await packageManager.getVersionedPackages(...packages); diff --git a/scripts/run-e2e-config.ts b/scripts/run-e2e-config.ts index 58e7dfa265c8..7bd98044930d 100644 --- a/scripts/run-e2e-config.ts +++ b/scripts/run-e2e-config.ts @@ -134,8 +134,6 @@ export const cra: Parameters = { name: 'cra', version: 'latest', generator: 'npx create-react-app@{{version}} {{name}}-v{{version}}', - // Issues with 7.10.4. To remove later ? - additionalDeps: ['@babel/core@7.10.2'], }; // TODO: there is a compatibility issue with riot@4 @@ -163,7 +161,7 @@ export const vue: Parameters = { name: 'vue', version: 'latest', generator: `npx @vue/cli@{{version}} create {{name}}-v{{version}} --default --packageManager=yarn --no-git --force`, - additionalDeps: ['react', 'react-dom', '@babel/core@7.10.2'], + additionalDeps: ['react', 'react-dom'], }; export const web_components: Parameters = { From ca6076ad5d5a854dbdbb26e3f045382cf78f8191 Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Wed, 8 Jul 2020 22:20:10 +0200 Subject: [PATCH 16/16] name presets --- app/mithril/src/server/framework-preset-mithril.ts | 5 ++++- app/preact/src/server/framework-preset-preact.ts | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/app/mithril/src/server/framework-preset-mithril.ts b/app/mithril/src/server/framework-preset-mithril.ts index c54576fb127a..f42bf4c74778 100644 --- a/app/mithril/src/server/framework-preset-mithril.ts +++ b/app/mithril/src/server/framework-preset-mithril.ts @@ -3,6 +3,9 @@ import { TransformOptions } from '@babel/core'; export function babelDefault(config: TransformOptions) { return { ...config, - plugins: [...config.plugins, require.resolve('@babel/plugin-transform-react-jsx')], + plugins: [ + ...config.plugins, + [require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset'], + ], }; } diff --git a/app/preact/src/server/framework-preset-preact.ts b/app/preact/src/server/framework-preset-preact.ts index 6153a8b25b95..b3eaabddeffc 100644 --- a/app/preact/src/server/framework-preset-preact.ts +++ b/app/preact/src/server/framework-preset-preact.ts @@ -5,7 +5,7 @@ export function babelDefault(config: TransformOptions) { ...config, plugins: [ ...config.plugins, - [require.resolve('@babel/plugin-transform-react-jsx'), { pragma: 'h' }], + [require.resolve('@babel/plugin-transform-react-jsx'), { pragma: 'h' }, 'preset'], ], }; }