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'], ], }; } 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..ae2ff9daba4d 100644 --- a/cypress/generated/addon-link.spec.ts +++ b/cypress/generated/addon-link.spec.ts @@ -1,25 +1,15 @@ -import { visit, clickAddon } from '../helper'; - describe('addon-link', () => { before(() => { - visit(); - cy.get('#button').click(); + cy.visitStorybook(); }); it('should redirect to another story', () => { - // click on the button - cy.get('#button--button-with-link-to-another-story').click(); - - // 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(); // 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 3fc0bf6e48eb..9e26856b19e1 100644 --- a/cypress/generated/basic.spec.ts +++ b/cypress/generated/basic.spec.ts @@ -1,18 +1,18 @@ -import { visit } from '../helper'; - describe('Basic Flow', () => { before(() => { - visit(); + cy.visitStorybook(); }); 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..38ae46e7a797 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -36,6 +36,20 @@ Cypress.Commands.add( } ); +Cypress.Commands.add('visitStorybook', () => { + cy.log('visitStorybook'); + const host = Cypress.env('location') || 'http://localhost:8001'; + return cy + .clearLocalStorage() + .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', {}, () => { cy.log('getStoryElement'); return cy @@ -48,14 +62,30 @@ 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 kindId = kind.replace(/ /g, '-').toLowerCase(); + const storyId = name.replace(/ /g, '-').toLowerCase(); const storyLinkId = `#${kindId}--${storyId}`; - cy.log('navigateToStory'); - cy.get(`#${kindId}`, { log: false }).click(); - cy.get(storyLinkId, { log: false }).click(); + cy.log(`navigateToStory ${kind} ${name}`); + + if (name !== 'page') { + // Section can be collapsed, click twice ensure expansion + cy.get(`#${kindId}`).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 ef0333bbb248..2c303f0eb2ac 100644 --- a/cypress/support/index.d.ts +++ b/cypress/support/index.d.ts @@ -4,10 +4,19 @@ type LoggerMethod = 'log' | 'info' | 'debug'; declare namespace Cypress { interface Chainable { + /** + * Visit storybook's introduction page + */ + visitStorybook(): Chainable; + /** * 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/1-Button.stories.ts b/lib/cli/src/frameworks/angular/1-Button.stories.ts index 0ffbf6f851fb..2b929b42a140 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/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/1-Button.stories.ts b/lib/cli/src/frameworks/aurelia/1-Button.stories.ts index 924e0ebaf3c9..34b329040d65 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/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/ember/1-Button.stories.js b/lib/cli/src/frameworks/ember/1-Button.stories.js index 42a918cfa1b3..4ed1d267badb 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/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/html/1-Button.stories.js b/lib/cli/src/frameworks/html/1-Button.stories.js index 3fc92d7a25dc..a0b83f19d786 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/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/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(); + } +} + +
+ +
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/1-Button.stories.js b/lib/cli/src/frameworks/mithril/1-Button.stories.js index f1a7004e3ce5..d6f1849a8d49 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/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/1-Button.stories.js b/lib/cli/src/frameworks/preact/1-Button.stories.js index 77943932c977..ab35ae4c5dc3 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/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/1-Button.stories.js b/lib/cli/src/frameworks/rax/1-Button.stories.js index 3bbaddc78bc0..2a59dc7a753b 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/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/1-Button.stories.js b/lib/cli/src/frameworks/react/js/1-Button.stories.js index cfbae131f187..61d052333c6e 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/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/1-Button.stories.tsx b/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx index ba8630ffb1f3..dbeb802afe6b 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/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/1-Button.stories.js b/lib/cli/src/frameworks/riot/1-Button.stories.js index f95ef9cfac95..c89dbee3d0a3 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/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/1-button.stories.js b/lib/cli/src/frameworks/svelte/1-button.stories.js index 62681b6bc61e..c219003c1e38 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/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/1-Button.stories.js b/lib/cli/src/frameworks/vue/1-Button.stories.js index 84e34a92376c..7e9d0b58a409 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/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/frameworks/web-components/1-Button.stories.js b/lib/cli/src/frameworks/web-components/1-Button.stories.js index 48b8d72a702a..133bd4f98806 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/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/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/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/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/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'), }, }} 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/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts index bf786d5e2be2..9c6295d44999 100644 --- a/lib/cli/src/generators/baseGenerator.ts +++ b/lib/cli/src/generators/baseGenerator.ts @@ -46,29 +46,20 @@ 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 - framework !== 'angular' && '@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'] - : []; + '@storybook/addon-essentials', + ]; 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); - 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/helpers.test.ts b/lib/cli/src/helpers.test.ts index 1a7d32cfaf56..7f9a768fd532 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(), + './stories', + expect.anything() + ); + expect(copySyncSpy).toHaveBeenNthCalledWith( + 2, + 'frameworks/common', + './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 }); } diff --git a/lib/cli/src/js-package-manager/JsPackageManager.ts b/lib/cli/src/js-package-manager/JsPackageManager.ts index eeb52bfa4be7..25043912d88e 100644 --- a/lib/cli/src/js-package-manager/JsPackageManager.ts +++ b/lib/cli/src/js-package-manager/JsPackageManager.ts @@ -10,10 +10,14 @@ 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; + public abstract getRunCommand(command: string): string; + /** * Install dependencies listed in `package.json` */ @@ -178,9 +182,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 +196,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..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']); } @@ -9,6 +11,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..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']); } @@ -9,6 +11,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..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']); } @@ -9,6 +11,10 @@ export class Yarn2Proxy extends JsPackageManager { return 'yarn storybook'; } + getRunCommand(command: string): string { + return `yarn ${command}`; + } + protected runInstall(): void { this.executeCommand('yarn', [], 'inherit'); }