diff --git a/lib/cli/.babelrc.json b/lib/cli/.babelrc.json index 9ab56eefbb58..4e0cb0f8f852 100644 --- a/lib/cli/.babelrc.json +++ b/lib/cli/.babelrc.json @@ -12,6 +12,7 @@ ] ], "ignore": [ + "./src/framework", "./src/generators/**/template", "./src/generators/**/template-csf", "./src/generators/**/template-csf-ts", diff --git a/lib/cli/src/generators/.eslintrc.js b/lib/cli/src/.eslintrc.js similarity index 58% rename from lib/cli/src/generators/.eslintrc.js rename to lib/cli/src/.eslintrc.js index d7fac90c788e..3625258646f3 100644 --- a/lib/cli/src/generators/.eslintrc.js +++ b/lib/cli/src/.eslintrc.js @@ -3,7 +3,7 @@ const ignore = 0; module.exports = { overrides: [ { - files: '*/template[-?]*/**', + files: '**/template[-?]*/**', env: { browser: true, }, @@ -12,7 +12,6 @@ module.exports = { 'import/no-unresolved': ignore, 'import/no-extraneous-dependencies': ignore, 'global-require': ignore, - 'react/react-in-jsx-scope': ignore, }, }, { @@ -21,5 +20,18 @@ module.exports = { browser: false, }, }, + { + files: 'frameworks/**/*', + env: { + browser: true, + }, + rules: { + 'jsx-a11y/anchor-is-valid': ignore, + 'import/no-unresolved': ignore, + 'react/prop-types': ignore, + 'react/react-in-jsx-scope': ignore, + 'import/no-extraneous-dependencies': ignore, + }, + }, ], }; diff --git a/lib/cli/src/generators/AURELIA/template-csf/src/stories/0-Welcome.stories.ts b/lib/cli/src/frameworks/angular/ts/0-Welcome.stories.ts similarity index 77% rename from lib/cli/src/generators/AURELIA/template-csf/src/stories/0-Welcome.stories.ts rename to lib/cli/src/frameworks/angular/ts/0-Welcome.stories.ts index 92ddbc26b274..38786fa32607 100644 --- a/lib/cli/src/generators/AURELIA/template-csf/src/stories/0-Welcome.stories.ts +++ b/lib/cli/src/frameworks/angular/ts/0-Welcome.stories.ts @@ -1,4 +1,4 @@ -import { Welcome } from '@storybook/aurelia/demo'; +import Welcome from './welcome.component'; export default { title: 'Welcome', diff --git a/lib/cli/src/generators/AURELIA/template-csf/src/stories/1-Button.stories.ts b/lib/cli/src/frameworks/angular/ts/1-Button.stories.ts similarity index 95% rename from lib/cli/src/generators/AURELIA/template-csf/src/stories/1-Button.stories.ts rename to lib/cli/src/frameworks/angular/ts/1-Button.stories.ts index 833f785fa2a0..d10578f20c46 100644 --- a/lib/cli/src/generators/AURELIA/template-csf/src/stories/1-Button.stories.ts +++ b/lib/cli/src/frameworks/angular/ts/1-Button.stories.ts @@ -1,7 +1,7 @@ import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; -import { Button } from '@storybook/aurelia/demo'; +import Button from './button.component'; export default { title: 'Button', diff --git a/lib/cli/src/frameworks/angular/ts/button.component.ts b/lib/cli/src/frameworks/angular/ts/button.component.ts new file mode 100644 index 000000000000..da804e507b7d --- /dev/null +++ b/lib/cli/src/frameworks/angular/ts/button.component.ts @@ -0,0 +1,26 @@ +import { Component, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'storybook-button-component', + template: ` `, + styles: [ + ` + button { + border: 1px solid #eee; + border-radius: 3px; + background-color: #ffffff; + cursor: pointer; + font-size: 15px; + padding: 3px 10px; + margin: 10px; + } + `, + ], +}) +export default class ButtonComponent { + @Input() + text = ''; + + @Output() + onClick = new EventEmitter(); +} diff --git a/lib/cli/src/frameworks/angular/ts/welcome.component.ts b/lib/cli/src/frameworks/angular/ts/welcome.component.ts new file mode 100644 index 000000000000..ab8309c1a581 --- /dev/null +++ b/lib/cli/src/frameworks/angular/ts/welcome.component.ts @@ -0,0 +1,81 @@ +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/generators/ANGULAR/template-csf/src/stories/0-Welcome.stories.ts b/lib/cli/src/frameworks/aurelia/ts/0-Welcome.stories.ts similarity index 77% rename from lib/cli/src/generators/ANGULAR/template-csf/src/stories/0-Welcome.stories.ts rename to lib/cli/src/frameworks/aurelia/ts/0-Welcome.stories.ts index 058c0cc13555..acefc457a070 100644 --- a/lib/cli/src/generators/ANGULAR/template-csf/src/stories/0-Welcome.stories.ts +++ b/lib/cli/src/frameworks/aurelia/ts/0-Welcome.stories.ts @@ -1,4 +1,4 @@ -import { Welcome } from '@storybook/angular/demo'; +import Welcome from './welcome'; export default { title: 'Welcome', diff --git a/lib/cli/src/generators/ANGULAR/template-csf/src/stories/1-Button.stories.ts b/lib/cli/src/frameworks/aurelia/ts/1-Button.stories.ts similarity index 95% rename from lib/cli/src/generators/ANGULAR/template-csf/src/stories/1-Button.stories.ts rename to lib/cli/src/frameworks/aurelia/ts/1-Button.stories.ts index 8efda9b2e43f..fab17e139c62 100644 --- a/lib/cli/src/generators/ANGULAR/template-csf/src/stories/1-Button.stories.ts +++ b/lib/cli/src/frameworks/aurelia/ts/1-Button.stories.ts @@ -1,7 +1,7 @@ import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; -import { Button } from '@storybook/angular/demo'; +import Button from './button'; export default { title: 'Button', diff --git a/lib/cli/src/frameworks/aurelia/ts/button.ts b/lib/cli/src/frameworks/aurelia/ts/button.ts new file mode 100644 index 000000000000..86cac656b57c --- /dev/null +++ b/lib/cli/src/frameworks/aurelia/ts/button.ts @@ -0,0 +1,28 @@ +import { customElement, bindable } from 'aurelia'; + +@customElement({ + name: 'storybook-button-component', + template: ` + + `, +}) +export default class Button { + @bindable() + text = ''; + + @bindable() + onClick: MouseEvent; +} diff --git a/lib/cli/src/frameworks/aurelia/ts/welcome.ts b/lib/cli/src/frameworks/aurelia/ts/welcome.ts new file mode 100644 index 000000000000..109911b7de2e --- /dev/null +++ b/lib/cli/src/frameworks/aurelia/ts/welcome.ts @@ -0,0 +1,79 @@ +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/generators/EMBER/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/frameworks/ember/0-Welcome.stories.js similarity index 100% rename from lib/cli/src/generators/EMBER/template-csf/stories/0-Welcome.stories.js rename to lib/cli/src/frameworks/ember/0-Welcome.stories.js diff --git a/lib/cli/src/generators/EMBER/template-csf/stories/1-Button.stories.js b/lib/cli/src/frameworks/ember/1-Button.stories.js similarity index 100% rename from lib/cli/src/generators/EMBER/template-csf/stories/1-Button.stories.js rename to lib/cli/src/frameworks/ember/1-Button.stories.js diff --git a/lib/cli/src/generators/HTML/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/frameworks/html/0-Welcome.stories.js similarity index 100% rename from lib/cli/src/generators/HTML/template-csf/stories/0-Welcome.stories.js rename to lib/cli/src/frameworks/html/0-Welcome.stories.js diff --git a/lib/cli/src/generators/HTML/template-csf/stories/1-Button.stories.js b/lib/cli/src/frameworks/html/1-Button.stories.js similarity index 100% rename from lib/cli/src/generators/HTML/template-csf/stories/1-Button.stories.js rename to lib/cli/src/frameworks/html/1-Button.stories.js diff --git a/lib/cli/src/generators/MARKO/template-csf/stories/index.stories.js b/lib/cli/src/frameworks/marko/0-Welcome.stories.js similarity index 68% rename from lib/cli/src/generators/MARKO/template-csf/stories/index.stories.js rename to lib/cli/src/frameworks/marko/0-Welcome.stories.js index 41fcb8b4fc12..a0cba3b6d1b0 100644 --- a/lib/cli/src/generators/MARKO/template-csf/stories/index.stories.js +++ b/lib/cli/src/frameworks/marko/0-Welcome.stories.js @@ -1,4 +1,4 @@ -import Welcome from './components/welcome/index.marko'; +import Welcome from './welcome.marko'; export default { title: 'Welcome', diff --git a/lib/cli/src/generators/MARKO/template-csf/stories/components/welcome/index.marko b/lib/cli/src/frameworks/marko/welcome.marko similarity index 100% rename from lib/cli/src/generators/MARKO/template-csf/stories/components/welcome/index.marko rename to lib/cli/src/frameworks/marko/welcome.marko diff --git a/lib/cli/src/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/frameworks/mithril/0-Welcome.stories.js similarity index 100% rename from lib/cli/src/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js rename to lib/cli/src/frameworks/mithril/0-Welcome.stories.js diff --git a/lib/cli/src/generators/MITHRIL/template-csf/stories/1-Button.stories.js b/lib/cli/src/frameworks/mithril/1-Button.stories.js similarity index 100% rename from lib/cli/src/generators/MITHRIL/template-csf/stories/1-Button.stories.js rename to lib/cli/src/frameworks/mithril/1-Button.stories.js diff --git a/lib/cli/src/generators/MITHRIL/template-csf/stories/Button.js b/lib/cli/src/frameworks/mithril/Button.js similarity index 100% rename from lib/cli/src/generators/MITHRIL/template-csf/stories/Button.js rename to lib/cli/src/frameworks/mithril/Button.js diff --git a/lib/cli/src/generators/MITHRIL/template-csf/stories/Welcome.js b/lib/cli/src/frameworks/mithril/Welcome.js similarity index 100% rename from lib/cli/src/generators/MITHRIL/template-csf/stories/Welcome.js rename to lib/cli/src/frameworks/mithril/Welcome.js diff --git a/lib/cli/src/generators/PREACT/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/frameworks/preact/0-Welcome.stories.js similarity index 100% rename from lib/cli/src/generators/PREACT/template-csf/stories/0-Welcome.stories.js rename to lib/cli/src/frameworks/preact/0-Welcome.stories.js diff --git a/lib/cli/src/generators/PREACT/template-csf/stories/1-Button.stories.js b/lib/cli/src/frameworks/preact/1-Button.stories.js similarity index 100% rename from lib/cli/src/generators/PREACT/template-csf/stories/1-Button.stories.js rename to lib/cli/src/frameworks/preact/1-Button.stories.js diff --git a/lib/cli/src/generators/PREACT/template-csf/stories/Button.js b/lib/cli/src/frameworks/preact/Button.js similarity index 74% rename from lib/cli/src/generators/PREACT/template-csf/stories/Button.js rename to lib/cli/src/frameworks/preact/Button.js index 2a3546d48c5d..698f9d881933 100644 --- a/lib/cli/src/generators/PREACT/template-csf/stories/Button.js +++ b/lib/cli/src/frameworks/preact/Button.js @@ -1,5 +1,5 @@ /** @jsx h */ -/* eslint-disable react/no-unknown-property, react/prop-types */ +/* eslint-disable react/no-unknown-property */ import { h } from 'preact'; const Button = ({ children, ...props }) => ( diff --git a/lib/cli/src/generators/PREACT/template-csf/stories/Welcome.js b/lib/cli/src/frameworks/preact/Welcome.js similarity index 94% rename from lib/cli/src/generators/PREACT/template-csf/stories/Welcome.js rename to lib/cli/src/frameworks/preact/Welcome.js index b4ce7052f260..7a47695cf121 100644 --- a/lib/cli/src/generators/PREACT/template-csf/stories/Welcome.js +++ b/lib/cli/src/frameworks/preact/Welcome.js @@ -13,7 +13,6 @@ const Main = (props) => ( /> ); -// eslint-disable-next-line react/prop-types const Title = ({ children, ...props }) =>

{children}

; const Note = (props) => ( @@ -40,7 +39,6 @@ const InlineCode = (props) => ( /> ); -// eslint-disable-next-line react/prop-types const Link = ({ children, href, ...props }) => ( ( ); -// eslint-disable-next-line react/prop-types const NavButton = ({ children, ...props }) => ( ); -/* eslint-disable-next-line react/prop-types */ const Welcome = ({ showApp }) => (
Welcome to storybook diff --git a/lib/cli/src/generators/RAX/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/frameworks/rax/0-Welcome.stories.js similarity index 100% rename from lib/cli/src/generators/RAX/template-csf/stories/0-Welcome.stories.js rename to lib/cli/src/frameworks/rax/0-Welcome.stories.js diff --git a/lib/cli/src/generators/RAX/template-csf/stories/1-Button.stories.js b/lib/cli/src/frameworks/rax/1-Button.stories.js similarity index 100% rename from lib/cli/src/generators/RAX/template-csf/stories/1-Button.stories.js rename to lib/cli/src/frameworks/rax/1-Button.stories.js diff --git a/lib/cli/src/generators/RAX/template-csf/stories/Welcome.js b/lib/cli/src/frameworks/rax/Welcome.js similarity index 97% rename from lib/cli/src/generators/RAX/template-csf/stories/Welcome.js rename to lib/cli/src/frameworks/rax/Welcome.js index 340844748cd3..6995d7de5947 100644 --- a/lib/cli/src/generators/RAX/template-csf/stories/Welcome.js +++ b/lib/cli/src/frameworks/rax/Welcome.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types, jsx-a11y/anchor-is-valid */ import { createElement } from 'rax'; import View from 'rax-view'; import Text from 'rax-text'; diff --git a/lib/cli/src/generators/METEOR/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/frameworks/react/js/0-Welcome.stories.js similarity index 83% rename from lib/cli/src/generators/METEOR/template-csf/stories/0-Welcome.stories.js rename to lib/cli/src/frameworks/react/js/0-Welcome.stories.js index 9920a416e1ff..1274ca16a4ff 100644 --- a/lib/cli/src/generators/METEOR/template-csf/stories/0-Welcome.stories.js +++ b/lib/cli/src/frameworks/react/js/0-Welcome.stories.js @@ -1,6 +1,6 @@ import React from 'react'; import { linkTo } from '@storybook/addon-links'; -import { Welcome } from '@storybook/react/demo'; +import Welcome from './Welcome'; export default { title: 'Welcome', diff --git a/lib/cli/src/generators/REACT/template-csf/stories/1-Button.stories.js b/lib/cli/src/frameworks/react/js/1-Button.stories.js similarity index 95% rename from lib/cli/src/generators/REACT/template-csf/stories/1-Button.stories.js rename to lib/cli/src/frameworks/react/js/1-Button.stories.js index 383864b23ad1..57f15cf2a479 100644 --- a/lib/cli/src/generators/REACT/template-csf/stories/1-Button.stories.js +++ b/lib/cli/src/frameworks/react/js/1-Button.stories.js @@ -1,7 +1,7 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; -import { Button } from '@storybook/react/demo'; +import Button from './Button'; export default { title: 'Button', diff --git a/lib/cli/src/frameworks/react/js/Button.jsx b/lib/cli/src/frameworks/react/js/Button.jsx new file mode 100644 index 000000000000..8b431e3d0e57 --- /dev/null +++ b/lib/cli/src/frameworks/react/js/Button.jsx @@ -0,0 +1,19 @@ +import React from 'react'; + +const styles = { + border: '1px solid #eee', + borderRadius: 3, + backgroundColor: '#FFFFFF', + cursor: 'pointer', + fontSize: 15, + padding: '3px 10px', + margin: 10, +}; + +const Button = ({ children, onClick }) => ( + +); + +export default Button; diff --git a/lib/cli/src/frameworks/react/js/Welcome.jsx b/lib/cli/src/frameworks/react/js/Welcome.jsx new file mode 100644 index 000000000000..42328a1b4fc7 --- /dev/null +++ b/lib/cli/src/frameworks/react/js/Welcome.jsx @@ -0,0 +1,128 @@ +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 }) => ( + +); + +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 default Welcome; diff --git a/lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx b/lib/cli/src/frameworks/react/ts/0-Welcome.stories.tsx similarity index 83% rename from lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx rename to lib/cli/src/frameworks/react/ts/0-Welcome.stories.tsx index 9920a416e1ff..1274ca16a4ff 100644 --- a/lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx +++ b/lib/cli/src/frameworks/react/ts/0-Welcome.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { linkTo } from '@storybook/addon-links'; -import { Welcome } from '@storybook/react/demo'; +import Welcome from './Welcome'; export default { title: 'Welcome', diff --git a/lib/cli/src/generators/WEBPACK_REACT/template-csf/stories/1-Button.stories.js b/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx similarity index 95% rename from lib/cli/src/generators/WEBPACK_REACT/template-csf/stories/1-Button.stories.js rename to lib/cli/src/frameworks/react/ts/1-Button.stories.tsx index 383864b23ad1..57f15cf2a479 100644 --- a/lib/cli/src/generators/WEBPACK_REACT/template-csf/stories/1-Button.stories.js +++ b/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; -import { Button } from '@storybook/react/demo'; +import Button from './Button'; export default { title: 'Button', diff --git a/lib/cli/src/frameworks/react/ts/Button.tsx b/lib/cli/src/frameworks/react/ts/Button.tsx new file mode 100644 index 000000000000..bd79304547b2 --- /dev/null +++ b/lib/cli/src/frameworks/react/ts/Button.tsx @@ -0,0 +1,20 @@ +import React, { FunctionComponent, HTMLAttributes } from 'react'; + +const styles = { + border: '1px solid #eee', + borderRadius: 3, + backgroundColor: '#FFFFFF', + cursor: 'pointer', + fontSize: 15, + padding: '3px 10px', + margin: 10, +}; + +type Props = Pick, 'onClick'>; +const Button: FunctionComponent = ({ children, onClick }) => ( + +); + +export default Button; diff --git a/lib/cli/src/frameworks/react/ts/Welcome.tsx b/lib/cli/src/frameworks/react/ts/Welcome.tsx new file mode 100644 index 000000000000..2d5d35e5000a --- /dev/null +++ b/lib/cli/src/frameworks/react/ts/Welcome.tsx @@ -0,0 +1,159 @@ +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 }) => ( + +); + +interface WelcomeProps { + showApp: () => void; +} +const Welcome: FunctionComponent = ({ 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. + +
+); +Welcome.displayName = 'Welcome'; + +export { Welcome as default }; diff --git a/lib/cli/src/generators/RIOT/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/frameworks/riot/0-Welcome.stories.js similarity index 100% rename from lib/cli/src/generators/RIOT/template-csf/stories/0-Welcome.stories.js rename to lib/cli/src/frameworks/riot/0-Welcome.stories.js diff --git a/lib/cli/src/generators/RIOT/template-csf/stories/1-Button.stories.js b/lib/cli/src/frameworks/riot/1-Button.stories.js similarity index 100% rename from lib/cli/src/generators/RIOT/template-csf/stories/1-Button.stories.js rename to lib/cli/src/frameworks/riot/1-Button.stories.js diff --git a/lib/cli/src/generators/RIOT/template-csf/stories/MyButton.tag b/lib/cli/src/frameworks/riot/MyButton.tag similarity index 100% rename from lib/cli/src/generators/RIOT/template-csf/stories/MyButton.tag rename to lib/cli/src/frameworks/riot/MyButton.tag diff --git a/lib/cli/src/generators/RIOT/template-csf/stories/Welcome.tag b/lib/cli/src/frameworks/riot/Welcome.tag similarity index 100% rename from lib/cli/src/generators/RIOT/template-csf/stories/Welcome.tag rename to lib/cli/src/frameworks/riot/Welcome.tag diff --git a/lib/cli/src/generators/SVELTE/template-csf/stories/0-welcome.stories.js b/lib/cli/src/frameworks/svelte/0-welcome.stories.js similarity index 100% rename from lib/cli/src/generators/SVELTE/template-csf/stories/0-welcome.stories.js rename to lib/cli/src/frameworks/svelte/0-welcome.stories.js diff --git a/lib/cli/src/generators/SVELTE/template-csf/stories/1-button.stories.js b/lib/cli/src/frameworks/svelte/1-button.stories.js similarity index 100% rename from lib/cli/src/generators/SVELTE/template-csf/stories/1-button.stories.js rename to lib/cli/src/frameworks/svelte/1-button.stories.js diff --git a/lib/cli/src/generators/SVELTE/template-csf/stories/button.svelte b/lib/cli/src/frameworks/svelte/button.svelte similarity index 100% rename from lib/cli/src/generators/SVELTE/template-csf/stories/button.svelte rename to lib/cli/src/frameworks/svelte/button.svelte diff --git a/lib/cli/src/generators/SVELTE/template-csf/stories/welcome.svelte b/lib/cli/src/frameworks/svelte/welcome.svelte similarity index 100% rename from lib/cli/src/generators/SVELTE/template-csf/stories/welcome.svelte rename to lib/cli/src/frameworks/svelte/welcome.svelte diff --git a/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js b/lib/cli/src/frameworks/vue/js/0-Welcome.stories.js similarity index 100% rename from lib/cli/src/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js rename to lib/cli/src/frameworks/vue/js/0-Welcome.stories.js diff --git a/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js b/lib/cli/src/frameworks/vue/js/1-Button.stories.js similarity index 96% rename from lib/cli/src/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js rename to lib/cli/src/frameworks/vue/js/1-Button.stories.js index 19f372961463..20fb5fd82f3f 100644 --- a/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js +++ b/lib/cli/src/frameworks/vue/js/1-Button.stories.js @@ -1,7 +1,7 @@ import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; -import MyButton from './MyButton.vue'; +import MyButton from './Button.vue'; export default { title: 'Button', diff --git a/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/MyButton.vue b/lib/cli/src/frameworks/vue/js/Button.vue similarity index 100% rename from lib/cli/src/generators/SFC_VUE/template-csf/src/stories/MyButton.vue rename to lib/cli/src/frameworks/vue/js/Button.vue diff --git a/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/Welcome.vue b/lib/cli/src/frameworks/vue/js/Welcome.vue similarity index 100% rename from lib/cli/src/generators/SFC_VUE/template-csf/src/stories/Welcome.vue rename to lib/cli/src/frameworks/vue/js/Welcome.vue diff --git a/lib/cli/src/generators/ANGULAR/index.ts b/lib/cli/src/generators/ANGULAR/index.ts index cc9d5921366f..f2587a863a8d 100644 --- a/lib/cli/src/generators/ANGULAR/index.ts +++ b/lib/cli/src/generators/ANGULAR/index.ts @@ -16,7 +16,7 @@ import { } from '../../helpers'; import { StoryFormat } from '../../project_types'; import { NpmOptions } from '../../NpmOptions'; -import { Generator, GeneratorOptions } from '../Generator'; +import { Generator, GeneratorOptions } from '../generator'; async function addDependencies(npmOptions: NpmOptions, { storyFormat }: GeneratorOptions) { const packages = [ @@ -64,7 +64,7 @@ function editAngularAppTsConfig() { writeFileAsJson(getAngularAppTsConfigPath(), tsConfigJson); } -const generator: Generator = async (npmOptions, { storyFormat }) => { +const generator: Generator = async (npmOptions, { storyFormat, language }) => { if (!isDefaultProjectSet()) { throw new Error( 'Could not find a default project in your Angular workspace.\nSet a defaultProject in your angular.json and re-run the installation.' @@ -73,7 +73,7 @@ const generator: Generator = async (npmOptions, { storyFormat }) => { copyTemplate(__dirname, storyFormat); - await addDependencies(npmOptions, { storyFormat }); + await addDependencies(npmOptions, { storyFormat, language }); editAngularAppTsConfig(); editStorybookTsConfig(path.resolve('./.storybook/tsconfig.json')); }; diff --git a/lib/cli/src/generators/ANGULAR/template-mdx/.storybook/main.js b/lib/cli/src/generators/ANGULAR/template-mdx/.storybook/main.js index ef8b96bacf01..6f9aa1333b7e 100644 --- a/lib/cli/src/generators/ANGULAR/template-mdx/.storybook/main.js +++ b/lib/cli/src/generators/ANGULAR/template-mdx/.storybook/main.js @@ -1,4 +1,4 @@ module.exports = { - stories: ['../src/**/*.stories.(ts|mdx)'], + stories: ['../src/**/*.stories.(ts|js|mdx)', '../stories/**/*.stories.(ts|js|mdx)'], addons: ['@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-links'], }; diff --git a/lib/cli/src/generators/AURELIA/template-mdx/src/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/ANGULAR/template-mdx/stories/0-Welcome.stories.mdx similarity index 87% rename from lib/cli/src/generators/AURELIA/template-mdx/src/stories/0-Welcome.stories.mdx rename to lib/cli/src/generators/ANGULAR/template-mdx/stories/0-Welcome.stories.mdx index 17ad75634de5..950f16f92340 100644 --- a/lib/cli/src/generators/AURELIA/template-mdx/src/stories/0-Welcome.stories.mdx +++ b/lib/cli/src/generators/ANGULAR/template-mdx/stories/0-Welcome.stories.mdx @@ -1,5 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; -import { Welcome } from '@storybook/aurelia/demo'; +import Welcome from '../src/welcome.component'; diff --git a/lib/cli/src/generators/AURELIA/template-mdx/src/stories/1-Button.stories.mdx b/lib/cli/src/generators/ANGULAR/template-mdx/stories/1-Button.stories.mdx similarity index 94% rename from lib/cli/src/generators/AURELIA/template-mdx/src/stories/1-Button.stories.mdx rename to lib/cli/src/generators/ANGULAR/template-mdx/stories/1-Button.stories.mdx index 33e95def4412..029cbd35dcf9 100644 --- a/lib/cli/src/generators/AURELIA/template-mdx/src/stories/1-Button.stories.mdx +++ b/lib/cli/src/generators/ANGULAR/template-mdx/stories/1-Button.stories.mdx @@ -2,7 +2,7 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; -import { Button } from '@storybook/aurelia/demo'; +import Button from '../src/button.component'; diff --git a/lib/cli/src/generators/AURELIA/index.ts b/lib/cli/src/generators/AURELIA/index.ts index 3f7362f13759..b80c31e83dca 100644 --- a/lib/cli/src/generators/AURELIA/index.ts +++ b/lib/cli/src/generators/AURELIA/index.ts @@ -6,10 +6,11 @@ import { getPackageJson, writeFileAsJson, copyTemplate, + copyComponents, readFileAsJson, } from '../../helpers'; -import { Generator } from '../Generator'; -import { StoryFormat } from '../../project_types'; +import { Generator } from '../generator'; +import { StoryFormat, SupportedLanguage } from '../../project_types'; function addStorybookExcludeGlobToTsConfig() { const tsConfigJson = readFileAsJson('tsconfig.json', true); @@ -27,6 +28,7 @@ function addStorybookExcludeGlobToTsConfig() { writeFileAsJson('tsconfig.json', tsConfigJson); } const generator: Generator = async (npmOptions, { storyFormat = StoryFormat.CSF }) => { + copyComponents('aurelia', SupportedLanguage.TYPESCRIPT); copyTemplate(__dirname, storyFormat); const packages = [ '@storybook/aurelia', diff --git a/lib/cli/src/generators/AURELIA/template-csf/.storybook/main.js b/lib/cli/src/generators/AURELIA/template-csf/.storybook/main.js index 16aa97cdc160..2271016abe6b 100644 --- a/lib/cli/src/generators/AURELIA/template-csf/.storybook/main.js +++ b/lib/cli/src/generators/AURELIA/template-csf/.storybook/main.js @@ -1,4 +1,4 @@ module.exports = { - stories: ['../src/**/*.stories.ts'], + stories: ['../src/**/*.stories.(ts|tsx|js|jsx)'], addons: ['@storybook/addon-actions', '@storybook/addon-links'], }; diff --git a/lib/cli/src/generators/AURELIA/template-mdx/.storybook/main.js b/lib/cli/src/generators/AURELIA/template-mdx/.storybook/main.js index ef8b96bacf01..7cc886146b41 100644 --- a/lib/cli/src/generators/AURELIA/template-mdx/.storybook/main.js +++ b/lib/cli/src/generators/AURELIA/template-mdx/.storybook/main.js @@ -1,4 +1,4 @@ module.exports = { - stories: ['../src/**/*.stories.(ts|mdx)'], + stories: ['../src/**/*.stories.(ts|mdx)', '../stories/**/*.stories.(ts|mdx)'], addons: ['@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-links'], }; diff --git a/lib/cli/src/generators/ANGULAR/template-mdx/src/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/AURELIA/template-mdx/stories/0-Welcome.stories.mdx similarity index 87% rename from lib/cli/src/generators/ANGULAR/template-mdx/src/stories/0-Welcome.stories.mdx rename to lib/cli/src/generators/AURELIA/template-mdx/stories/0-Welcome.stories.mdx index 5fc361cd9b67..f41888c00296 100644 --- a/lib/cli/src/generators/ANGULAR/template-mdx/src/stories/0-Welcome.stories.mdx +++ b/lib/cli/src/generators/AURELIA/template-mdx/stories/0-Welcome.stories.mdx @@ -1,5 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; -import { Welcome } from '@storybook/angular/demo'; +import Welcome from '../src/welcome'; diff --git a/lib/cli/src/generators/ANGULAR/template-mdx/src/stories/1-Button.stories.mdx b/lib/cli/src/generators/AURELIA/template-mdx/stories/1-Button.stories.mdx similarity index 94% rename from lib/cli/src/generators/ANGULAR/template-mdx/src/stories/1-Button.stories.mdx rename to lib/cli/src/generators/AURELIA/template-mdx/stories/1-Button.stories.mdx index 2bfaa57e0afd..434156120f9b 100644 --- a/lib/cli/src/generators/ANGULAR/template-mdx/src/stories/1-Button.stories.mdx +++ b/lib/cli/src/generators/AURELIA/template-mdx/stories/1-Button.stories.mdx @@ -2,7 +2,7 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; -import { Button } from '@storybook/angular/demo'; +import Button from '../src/button'; diff --git a/lib/cli/src/generators/EMBER/index.ts b/lib/cli/src/generators/EMBER/index.ts index 874e81e6e2e7..87089ae46389 100644 --- a/lib/cli/src/generators/EMBER/index.ts +++ b/lib/cli/src/generators/EMBER/index.ts @@ -5,10 +5,11 @@ import { getBabelDependencies, installDependencies, copyTemplate, + copyComponents, } from '../../helpers'; -import { Generator } from '../Generator'; +import { Generator } from '../generator'; -const generator: Generator = async (npmOptions, { storyFormat }) => { +const generator: Generator = async (npmOptions, { storyFormat, language }) => { const [ storybookVersion, babelPluginEmberModulePolyfillVersion, @@ -28,6 +29,7 @@ const generator: Generator = async (npmOptions, { storyFormat }) => { '@storybook/addons' ); + copyComponents('ember', language); copyTemplate(__dirname, storyFormat); const packageJson = await retrievePackageJson(); diff --git a/lib/cli/src/generators/EMBER/template-csf/.storybook/main.js b/lib/cli/src/generators/EMBER/template-csf/.storybook/main.js index 3036098563cc..772e86c2ed12 100644 --- a/lib/cli/src/generators/EMBER/template-csf/.storybook/main.js +++ b/lib/cli/src/generators/EMBER/template-csf/.storybook/main.js @@ -1,4 +1,4 @@ module.exports = { - stories: ['../stories/**/*.stories.js'], + stories: ['../src/**/*.stories.(js|mdx)'], addons: ['@storybook/addon-actions', '@storybook/addon-links'], }; diff --git a/lib/cli/src/generators/Generator.ts b/lib/cli/src/generators/Generator.ts index b6143c0c92dc..1a0b7ce3206f 100644 --- a/lib/cli/src/generators/Generator.ts +++ b/lib/cli/src/generators/Generator.ts @@ -1,8 +1,57 @@ import { NpmOptions } from '../NpmOptions'; -import { StoryFormat } from '../project_types'; +import { StoryFormat, SupportedLanguage, SupportedFrameworks } from '../project_types'; +import { + retrievePackageJson, + getVersionedPackages, + writePackageJson, + getBabelDependencies, + installDependencies, + copyTemplate, + copyComponents, +} from '../helpers'; +import configure from './configure'; export type GeneratorOptions = { + language: SupportedLanguage; storyFormat: StoryFormat; }; export type Generator = (npmOptions: NpmOptions, options: GeneratorOptions) => Promise; + +const generator = async ( + npmOptions: NpmOptions, + { storyFormat, language }: GeneratorOptions, + framework: SupportedFrameworks, + extraPackages?: string[], + extraAddons?: string[] +) => { + const packages = [ + `@storybook/${framework}`, + '@storybook/addon-essentials', + '@storybook/addon-links', + ...extraPackages, + ...extraAddons, + ]; + const versionedPackages = await getVersionedPackages(npmOptions, ...packages); + + configure(extraAddons); + copyComponents(framework, language); + copyTemplate(__dirname, storyFormat); + + const packageJson = await retrievePackageJson(); + + packageJson.dependencies = packageJson.dependencies || {}; + packageJson.devDependencies = packageJson.devDependencies || {}; + + packageJson.scripts = packageJson.scripts || {}; + packageJson.scripts.storybook = 'start-storybook -p 6006'; + packageJson.scripts['build-storybook'] = 'build-storybook'; + + writePackageJson(packageJson); + + const babelDependencies = await getBabelDependencies(npmOptions, packageJson); + + installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]); +}; + +export default generator; diff --git a/lib/cli/src/generators/HTML/index.ts b/lib/cli/src/generators/HTML/index.ts index 25d850192b6c..2aca1ac9d54b 100755 --- a/lib/cli/src/generators/HTML/index.ts +++ b/lib/cli/src/generators/HTML/index.ts @@ -5,11 +5,12 @@ import { getBabelDependencies, installDependencies, copyTemplate, + copyComponents, } from '../../helpers'; import { StoryFormat } from '../../project_types'; -import { Generator } from '../Generator'; +import { Generator } from '../generator'; -const generator: Generator = async (npmOptions, { storyFormat }) => { +const generator: Generator = async (npmOptions, { storyFormat, language }) => { const packages = ['@storybook/html', '@storybook/addon-actions', '@storybook/addon-links']; const versionedPackages = await getVersionedPackages(npmOptions, ...packages); @@ -17,6 +18,7 @@ const generator: Generator = async (npmOptions, { storyFormat }) => { packages.push('@storybook/addon-docs'); } + copyComponents('html', language); copyTemplate(__dirname, storyFormat); const packageJson = await retrievePackageJson(); diff --git a/lib/cli/src/generators/HTML/template-csf/.storybook/main.js b/lib/cli/src/generators/HTML/template-csf/.storybook/main.js index 3036098563cc..cb904cff8e17 100644 --- a/lib/cli/src/generators/HTML/template-csf/.storybook/main.js +++ b/lib/cli/src/generators/HTML/template-csf/.storybook/main.js @@ -1,4 +1,4 @@ module.exports = { - stories: ['../stories/**/*.stories.js'], + stories: ['../src/**/*.stories.(ts|js|mdx)', '../stories/**/*.stories.(ts|js|mdx)'], addons: ['@storybook/addon-actions', '@storybook/addon-links'], }; diff --git a/lib/cli/src/generators/HTML/template-mdx/.storybook/main.js b/lib/cli/src/generators/HTML/template-mdx/.storybook/main.js index be80f95bd994..d16d74dd063d 100644 --- a/lib/cli/src/generators/HTML/template-mdx/.storybook/main.js +++ b/lib/cli/src/generators/HTML/template-mdx/.storybook/main.js @@ -1,4 +1,4 @@ module.exports = { - stories: ['../stories/**/*.stories.(js|mdx)'], + stories: ['../src/**/*.stories.(ts|js|mdx)', '../stories/**/*.stories.(ts|js|mdx)'], addons: ['@storybook/addon-docs'], }; diff --git a/lib/cli/src/generators/MARIONETTE/index.ts b/lib/cli/src/generators/MARIONETTE/index.ts index e3ce805931a8..a55e1f36aab0 100644 --- a/lib/cli/src/generators/MARIONETTE/index.ts +++ b/lib/cli/src/generators/MARIONETTE/index.ts @@ -7,7 +7,7 @@ import { installDependencies, retrievePackageJson, } from '../../helpers'; -import { Generator } from '../Generator'; +import { Generator } from '../generator'; const generator: Generator = async (npmOptions) => { const storybookVersion = await getVersion(npmOptions, '@storybook/marionette'); diff --git a/lib/cli/src/generators/MARKO/index.ts b/lib/cli/src/generators/MARKO/index.ts index b8a3bc0e40e1..5220b6a1d81d 100644 --- a/lib/cli/src/generators/MARKO/index.ts +++ b/lib/cli/src/generators/MARKO/index.ts @@ -6,7 +6,7 @@ import { installDependencies, copyTemplate, } from '../../helpers'; -import { Generator } from '../Generator'; +import { Generator } from '../generator'; const generator: Generator = async (npmOptions, { storyFormat }) => { const [storybookVersion, addonActionVersion, addonKnobsVersion] = await getVersions( diff --git a/lib/cli/src/generators/MARKO/template-csf/.storybook/main.js b/lib/cli/src/generators/MARKO/template-csf/.storybook/main.js index c6a06f1fbc34..c8c3e603e095 100644 --- a/lib/cli/src/generators/MARKO/template-csf/.storybook/main.js +++ b/lib/cli/src/generators/MARKO/template-csf/.storybook/main.js @@ -1,4 +1,4 @@ module.exports = { - stories: ['../stories/**/*.stories.js'], + stories: ['../src/**/*.stories.js'], addons: ['@storybook/addon-actions', '@storybook/addon-knobs'], }; diff --git a/lib/cli/src/generators/METEOR/index.ts b/lib/cli/src/generators/METEOR/index.ts index 6420a01f0b03..2643c08748ba 100644 --- a/lib/cli/src/generators/METEOR/index.ts +++ b/lib/cli/src/generators/METEOR/index.ts @@ -7,10 +7,11 @@ import { getBabelDependencies, installDependencies, copyTemplate, + copyComponents, } from '../../helpers'; -import { Generator } from '../Generator'; +import { Generator } from '../generator'; -const generator: Generator = async (npmOptions, { storyFormat }) => { +const generator: Generator = async (npmOptions, { storyFormat, language }) => { const [ storybookVersion, actionsVersion, @@ -34,6 +35,7 @@ const generator: Generator = async (npmOptions, { storyFormat }) => { '@babel/preset-react' ); + copyComponents('react', language); copyTemplate(__dirname, storyFormat); const packageJson = await retrievePackageJson(); diff --git a/lib/cli/src/generators/METEOR/template-csf/.storybook/main.js b/lib/cli/src/generators/METEOR/template-csf/.storybook/main.js index c6a06f1fbc34..c8c3e603e095 100644 --- a/lib/cli/src/generators/METEOR/template-csf/.storybook/main.js +++ b/lib/cli/src/generators/METEOR/template-csf/.storybook/main.js @@ -1,4 +1,4 @@ module.exports = { - stories: ['../stories/**/*.stories.js'], + stories: ['../src/**/*.stories.js'], addons: ['@storybook/addon-actions', '@storybook/addon-knobs'], }; diff --git a/lib/cli/src/generators/METEOR/template-csf/stories/1-Button.stories.js b/lib/cli/src/generators/METEOR/template-csf/stories/1-Button.stories.js deleted file mode 100644 index 6bcfa2146627..000000000000 --- a/lib/cli/src/generators/METEOR/template-csf/stories/1-Button.stories.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { action } from '@storybook/addon-actions'; -import { Button } from '@storybook/react/demo'; - -export default { - title: 'Button', - component: Button, -}; - -export const Text = () => ; - -export const Emoji = () => ( - -); diff --git a/lib/cli/src/generators/MITHRIL/index.ts b/lib/cli/src/generators/MITHRIL/index.ts index d6bff9454643..271187acd3d2 100644 --- a/lib/cli/src/generators/MITHRIL/index.ts +++ b/lib/cli/src/generators/MITHRIL/index.ts @@ -6,7 +6,7 @@ import { installDependencies, copyTemplate, } from '../../helpers'; -import { Generator } from '../Generator'; +import { Generator } from '../generator'; const generator: Generator = async (npmOptions, { storyFormat }) => { const [ diff --git a/lib/cli/src/generators/MITHRIL/template-csf/.storybook/main.js b/lib/cli/src/generators/MITHRIL/template-csf/.storybook/main.js index c6a06f1fbc34..c8c3e603e095 100644 --- a/lib/cli/src/generators/MITHRIL/template-csf/.storybook/main.js +++ b/lib/cli/src/generators/MITHRIL/template-csf/.storybook/main.js @@ -1,4 +1,4 @@ module.exports = { - stories: ['../stories/**/*.stories.js'], + stories: ['../src/**/*.stories.js'], addons: ['@storybook/addon-actions', '@storybook/addon-knobs'], }; diff --git a/lib/cli/src/generators/PREACT/index.ts b/lib/cli/src/generators/PREACT/index.ts index 42c9eb416c9d..4a4b9dba7aa7 100644 --- a/lib/cli/src/generators/PREACT/index.ts +++ b/lib/cli/src/generators/PREACT/index.ts @@ -6,7 +6,7 @@ import { installDependencies, copyTemplate, } from '../../helpers'; -import { Generator } from '../Generator'; +import { Generator } from '../generator'; const generator: Generator = async (npmOptions, { storyFormat }) => { const [storybookVersion, actionsVersion, linksVersion, addonsVersion] = await getVersions( diff --git a/lib/cli/src/generators/PREACT/template-csf/.storybook/main.js b/lib/cli/src/generators/PREACT/template-csf/.storybook/main.js index 3036098563cc..302586ca4090 100644 --- a/lib/cli/src/generators/PREACT/template-csf/.storybook/main.js +++ b/lib/cli/src/generators/PREACT/template-csf/.storybook/main.js @@ -1,4 +1,4 @@ module.exports = { - stories: ['../stories/**/*.stories.js'], + stories: ['../src/**/*.stories.js'], addons: ['@storybook/addon-actions', '@storybook/addon-links'], }; diff --git a/lib/cli/src/generators/RAX/index.ts b/lib/cli/src/generators/RAX/index.ts index 4ac18e259ab9..9c4b8da676a9 100644 --- a/lib/cli/src/generators/RAX/index.ts +++ b/lib/cli/src/generators/RAX/index.ts @@ -5,10 +5,11 @@ import { getBabelDependencies, installDependencies, copyTemplate, + copyComponents, } from '../../helpers'; -import { Generator } from '../Generator'; +import { Generator } from '../generator'; -const generator: Generator = async (npmOptions, { storyFormat }) => { +const generator: Generator = async (npmOptions, { storyFormat, language }) => { const [ storybookVersion, actionsVersion, @@ -24,6 +25,7 @@ const generator: Generator = async (npmOptions, { storyFormat }) => { 'rax' ); + copyComponents('rax', language); copyTemplate(__dirname, storyFormat); const packageJson = await retrievePackageJson(); diff --git a/lib/cli/src/generators/RAX/template-csf/.storybook/main.js b/lib/cli/src/generators/RAX/template-csf/.storybook/main.js index 3036098563cc..302586ca4090 100644 --- a/lib/cli/src/generators/RAX/template-csf/.storybook/main.js +++ b/lib/cli/src/generators/RAX/template-csf/.storybook/main.js @@ -1,4 +1,4 @@ module.exports = { - stories: ['../stories/**/*.stories.js'], + stories: ['../src/**/*.stories.js'], addons: ['@storybook/addon-actions', '@storybook/addon-links'], }; diff --git a/lib/cli/src/generators/REACT/index.ts b/lib/cli/src/generators/REACT/index.ts index 586dac39814b..117af995d217 100644 --- a/lib/cli/src/generators/REACT/index.ts +++ b/lib/cli/src/generators/REACT/index.ts @@ -1,43 +1,7 @@ -import { - getVersionedPackages, - retrievePackageJson, - writePackageJson, - getBabelDependencies, - installDependencies, - copyTemplate, -} from '../../helpers'; -import { StoryFormat } from '../../project_types'; -import { Generator } from '../Generator'; +import baseGenerator, { Generator } from '../generator'; -const generator: Generator = async (npmOptions, { storyFormat }) => { - const packages = [ - '@storybook/react', - '@storybook/addon-actions', - '@storybook/addon-links', - '@storybook/addons', - ]; - if (storyFormat === StoryFormat.MDX) { - packages.push('@storybook/addon-docs'); - } - - const versionedPackages = await getVersionedPackages(npmOptions, ...packages); - - copyTemplate(__dirname, storyFormat); - - const packageJson = await retrievePackageJson(); - - packageJson.dependencies = packageJson.dependencies || {}; - packageJson.devDependencies = packageJson.devDependencies || {}; - - packageJson.scripts = packageJson.scripts || {}; - packageJson.scripts.storybook = 'start-storybook -p 6006'; - packageJson.scripts['build-storybook'] = 'build-storybook'; - - writePackageJson(packageJson); - - const babelDependencies = await getBabelDependencies(npmOptions, packageJson); - - installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]); +const generator: Generator = async (npmOptions, options) => { + baseGenerator(npmOptions, options, 'react'); }; export default generator; diff --git a/lib/cli/src/generators/REACT/template-csf/.storybook/main.js b/lib/cli/src/generators/REACT/template-csf/.storybook/main.js index 11692a0e7725..2271016abe6b 100644 --- a/lib/cli/src/generators/REACT/template-csf/.storybook/main.js +++ b/lib/cli/src/generators/REACT/template-csf/.storybook/main.js @@ -1,4 +1,4 @@ module.exports = { - stories: ['../stories/**/*.stories.(ts|tsx|js|jsx)'], + stories: ['../src/**/*.stories.(ts|tsx|js|jsx)'], addons: ['@storybook/addon-actions', '@storybook/addon-links'], }; diff --git a/lib/cli/src/generators/REACT/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/generators/REACT/template-csf/stories/0-Welcome.stories.js deleted file mode 100644 index 9920a416e1ff..000000000000 --- a/lib/cli/src/generators/REACT/template-csf/stories/0-Welcome.stories.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { linkTo } from '@storybook/addon-links'; -import { Welcome } from '@storybook/react/demo'; - -export default { - title: 'Welcome', - component: Welcome, -}; - -export const ToStorybook = () => ; - -ToStorybook.storyName = 'to Storybook'; diff --git a/lib/cli/src/generators/REACT/template-mdx/.storybook/main.js b/lib/cli/src/generators/REACT/template-mdx/.storybook/main.js index 687009302e52..c698efe5509d 100644 --- a/lib/cli/src/generators/REACT/template-mdx/.storybook/main.js +++ b/lib/cli/src/generators/REACT/template-mdx/.storybook/main.js @@ -1,5 +1,8 @@ module.exports = { - stories: ['../stories/**/*.stories.(js|mdx)'], + stories: [ + '../src/**/*.stories.(ts|tsx|js|jsx|mdx)', + '../stories/**/*.stories.(ts|tsx|js|jsx|mdx)', + ], addons: [ '@storybook/addon-actions', '@storybook/addon-links', 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 index 8f48008a3b56..4e0f04619efe 100644 --- 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 @@ -1,6 +1,6 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import { linkTo } from '@storybook/addon-links'; -import { Welcome } from '@storybook/react/demo'; +import Welcome from '../Welcome'; diff --git a/lib/cli/src/generators/REACT/template-mdx/stories/1-Button.stories.mdx b/lib/cli/src/generators/REACT/template-mdx/stories/1-Button.stories.mdx index ed90840f9dcb..09554ab784a8 100644 --- a/lib/cli/src/generators/REACT/template-mdx/stories/1-Button.stories.mdx +++ b/lib/cli/src/generators/REACT/template-mdx/stories/1-Button.stories.mdx @@ -1,6 +1,6 @@ import { action } from '@storybook/addon-actions'; -import { Button } from '@storybook/react/demo'; import { Meta, Story } from '@storybook/addon-docs/blocks'; +import Button from '../Button'; diff --git a/lib/cli/src/generators/REACT_NATIVE/index.ts b/lib/cli/src/generators/REACT_NATIVE/index.ts index aad02bcb16c6..f69c29ec9a98 100644 --- a/lib/cli/src/generators/REACT_NATIVE/index.ts +++ b/lib/cli/src/generators/REACT_NATIVE/index.ts @@ -10,7 +10,7 @@ import { copyTemplate, } from '../../helpers'; import { NpmOptions } from '../../NpmOptions'; -import { GeneratorOptions } from '../Generator'; +import { GeneratorOptions } from '../generator'; export default async ( npmOptions: NpmOptions, diff --git a/lib/cli/src/generators/REACT_SCRIPTS/index.ts b/lib/cli/src/generators/REACT_SCRIPTS/index.ts index cc43eafdb98e..a06f24bfb011 100644 --- a/lib/cli/src/generators/REACT_SCRIPTS/index.ts +++ b/lib/cli/src/generators/REACT_SCRIPTS/index.ts @@ -1,53 +1,18 @@ import path from 'path'; import fs from 'fs'; -import { - retrievePackageJson, - getVersionedPackages, - writePackageJson, - getBabelDependencies, - installDependencies, - copyTemplate, -} from '../../helpers'; -import { StoryFormat } from '../../project_types'; -import { Generator } from '../Generator'; +import { retrievePackageJson, writePackageJson } from '../../helpers'; -const generator: Generator = async (npmOptions, { storyFormat }) => { - const packages = [ - '@storybook/react', - '@storybook/preset-create-react-app', - '@storybook/addon-actions', - '@storybook/addon-links', - '@storybook/addons', - ]; - - if (storyFormat === StoryFormat.MDX) { - packages.push('@storybook/addon-docs'); - } - - const versionedPackages = await getVersionedPackages(npmOptions, ...packages); - - copyTemplate(__dirname, storyFormat); - - const packageJson = await retrievePackageJson(); - - packageJson.dependencies = packageJson.dependencies || {}; - packageJson.devDependencies = packageJson.devDependencies || {}; - - packageJson.scripts = packageJson.scripts || {}; - packageJson.scripts.storybook = 'start-storybook -p 9009'; - packageJson.scripts['build-storybook'] = 'build-storybook'; +import baseGenerator, { Generator } from '../generator'; +const generator: Generator = async (npmOptions, options) => { + await baseGenerator(npmOptions, options, 'react', [], ['@storybook/preset-create-react-app']); if (fs.existsSync(path.resolve('./public'))) { + const packageJson = await retrievePackageJson(); // has a public folder and add support to it. packageJson.scripts.storybook += ' -s public'; packageJson.scripts['build-storybook'] += ' -s public'; + writePackageJson(packageJson); } - - writePackageJson(packageJson); - - const babelDependencies = await getBabelDependencies(npmOptions, packageJson); - - installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]); }; export default generator; diff --git a/lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/.storybook/main.js b/lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/.storybook/main.js deleted file mode 100644 index cd20fe295779..000000000000 --- a/lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/.storybook/main.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = { - stories: ['../src/**/*.stories.(ts|tsx|js|jsx)'], - addons: [ - '@storybook/preset-create-react-app', - '@storybook/addon-actions', - '@storybook/addon-links', - ], -}; diff --git a/lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/src/stories/1-Button.stories.tsx b/lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/src/stories/1-Button.stories.tsx deleted file mode 100644 index 6bcfa2146627..000000000000 --- a/lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/src/stories/1-Button.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { action } from '@storybook/addon-actions'; -import { Button } from '@storybook/react/demo'; - -export default { - title: 'Button', - component: Button, -}; - -export const Text = () => ; - -export const Emoji = () => ( - -); diff --git a/lib/cli/src/generators/REACT_SCRIPTS/template-csf/.storybook/main.js b/lib/cli/src/generators/REACT_SCRIPTS/template-csf/.storybook/main.js index 8f79d4617f2b..cd20fe295779 100644 --- a/lib/cli/src/generators/REACT_SCRIPTS/template-csf/.storybook/main.js +++ b/lib/cli/src/generators/REACT_SCRIPTS/template-csf/.storybook/main.js @@ -1,5 +1,5 @@ module.exports = { - stories: ['../src/**/*.stories.js'], + stories: ['../src/**/*.stories.(ts|tsx|js|jsx)'], addons: [ '@storybook/preset-create-react-app', '@storybook/addon-actions', diff --git a/lib/cli/src/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js b/lib/cli/src/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js deleted file mode 100644 index 9920a416e1ff..000000000000 --- a/lib/cli/src/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { linkTo } from '@storybook/addon-links'; -import { Welcome } from '@storybook/react/demo'; - -export default { - title: 'Welcome', - component: Welcome, -}; - -export const ToStorybook = () => ; - -ToStorybook.storyName = 'to Storybook'; diff --git a/lib/cli/src/generators/REACT_SCRIPTS/template-csf/src/stories/1-Button.stories.js b/lib/cli/src/generators/REACT_SCRIPTS/template-csf/src/stories/1-Button.stories.js deleted file mode 100644 index 383864b23ad1..000000000000 --- a/lib/cli/src/generators/REACT_SCRIPTS/template-csf/src/stories/1-Button.stories.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import { action } from '@storybook/addon-actions'; -import { linkTo } from '@storybook/addon-links'; -import { Button } from '@storybook/react/demo'; - -export default { - title: 'Button', - component: Button, -}; - -export const Text = () => ; - -export const Emoji = () => ( - -); - -Emoji.parameters = { notes: 'My notes on a button with emojis' }; - -export const WithSomeEmojiAndAction = () => ( - -); - -WithSomeEmojiAndAction.storyName = 'with some emoji and action'; -WithSomeEmojiAndAction.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/generators/REACT_SCRIPTS/template-mdx/.storybook/main.js b/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/.storybook/main.js index fac25378d41e..6181a3b86505 100644 --- a/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/.storybook/main.js +++ b/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/.storybook/main.js @@ -1,5 +1,8 @@ module.exports = { - stories: ['../src/**/*.stories.(js|mdx)'], + stories: [ + '../src/**/*.stories.(ts|tsx|js|jsx|mdx)', + '../stories/**/*.stories.(ts|tsx|js|jsx|mdx)', + ], addons: [ '@storybook/addon-actions', '@storybook/addon-links', diff --git a/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/src/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/stories/0-Welcome.stories.mdx similarity index 89% rename from lib/cli/src/generators/REACT_SCRIPTS/template-mdx/src/stories/0-Welcome.stories.mdx rename to lib/cli/src/generators/REACT_SCRIPTS/template-mdx/stories/0-Welcome.stories.mdx index 8f48008a3b56..3e250967895c 100644 --- a/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/src/stories/0-Welcome.stories.mdx +++ b/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/stories/0-Welcome.stories.mdx @@ -1,6 +1,6 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import { linkTo } from '@storybook/addon-links'; -import { Welcome } from '@storybook/react/demo'; +import Welcome from '../src/Welcome'; diff --git a/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/src/stories/1-Button.stories.mdx b/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/stories/1-Button.stories.mdx similarity index 90% rename from lib/cli/src/generators/REACT_SCRIPTS/template-mdx/src/stories/1-Button.stories.mdx rename to lib/cli/src/generators/REACT_SCRIPTS/template-mdx/stories/1-Button.stories.mdx index 7c87b32323cd..8005ba7e0e0b 100644 --- a/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/src/stories/1-Button.stories.mdx +++ b/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/stories/1-Button.stories.mdx @@ -1,6 +1,6 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import { action } from '@storybook/addon-actions'; -import { Button } from '@storybook/react/demo'; +import Button from '../src/Button'; diff --git a/lib/cli/src/generators/RIOT/index.ts b/lib/cli/src/generators/RIOT/index.ts index 2c624431018a..d88918904b22 100644 --- a/lib/cli/src/generators/RIOT/index.ts +++ b/lib/cli/src/generators/RIOT/index.ts @@ -5,10 +5,11 @@ import { getBabelDependencies, installDependencies, copyTemplate, + copyComponents, } from '../../helpers'; -import { Generator } from '../Generator'; +import { Generator } from '../generator'; -const generator: Generator = async (npmOptions, { storyFormat }) => { +const generator: Generator = async (npmOptions, { storyFormat, language }) => { const [ storybookVersion, actionsVersion, @@ -24,6 +25,7 @@ const generator: Generator = async (npmOptions, { storyFormat }) => { 'riot-tag-loader' ); + copyComponents('riot', language); copyTemplate(__dirname, storyFormat); const packageJson = await retrievePackageJson(); diff --git a/lib/cli/src/generators/RIOT/template-csf/.storybook/main.js b/lib/cli/src/generators/RIOT/template-csf/.storybook/main.js index 3036098563cc..302586ca4090 100644 --- a/lib/cli/src/generators/RIOT/template-csf/.storybook/main.js +++ b/lib/cli/src/generators/RIOT/template-csf/.storybook/main.js @@ -1,4 +1,4 @@ module.exports = { - stories: ['../stories/**/*.stories.js'], + stories: ['../src/**/*.stories.js'], addons: ['@storybook/addon-actions', '@storybook/addon-links'], }; diff --git a/lib/cli/src/generators/SFC_VUE/index.ts b/lib/cli/src/generators/SFC_VUE/index.ts index 0f85dbce6b12..358a3230c020 100644 --- a/lib/cli/src/generators/SFC_VUE/index.ts +++ b/lib/cli/src/generators/SFC_VUE/index.ts @@ -5,11 +5,12 @@ import { getBabelDependencies, installDependencies, copyTemplate, + copyComponents, } from '../../helpers'; import { StoryFormat } from '../../project_types'; -import { Generator } from '../Generator'; +import { Generator } from '../generator'; -const generator: Generator = async (npmOptions, { storyFormat }) => { +const generator: Generator = async (npmOptions, { storyFormat, language }) => { const packages = [ '@storybook/vue', '@storybook/addon-actions', @@ -21,6 +22,7 @@ const generator: Generator = async (npmOptions, { storyFormat }) => { } const versionedPackages = await getVersionedPackages(npmOptions, ...packages); + copyComponents('vue', language); copyTemplate(__dirname, storyFormat); const packageJson = await retrievePackageJson(); diff --git a/lib/cli/src/generators/SFC_VUE/template-mdx/.storybook/main.js b/lib/cli/src/generators/SFC_VUE/template-mdx/.storybook/main.js index a956ae0c91da..723d7adf586b 100644 --- a/lib/cli/src/generators/SFC_VUE/template-mdx/.storybook/main.js +++ b/lib/cli/src/generators/SFC_VUE/template-mdx/.storybook/main.js @@ -1,4 +1,7 @@ module.exports = { - stories: ['../src/**/*.stories.(js|mdx)'], + stories: [ + '../src/**/*.stories.(ts|tsx|js|jsx|mdx)', + '../stories/**/*.stories.(ts|tsx|js|jsx|mdx)', + ], addons: ['@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-links'], }; diff --git a/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/MyButton.vue b/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/MyButton.vue deleted file mode 100644 index 4ad8ff85f08c..000000000000 --- a/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/MyButton.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - - - diff --git a/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue b/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue deleted file mode 100644 index bfb932da3d2a..000000000000 --- a/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue +++ /dev/null @@ -1,119 +0,0 @@ - - - - - diff --git a/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/SFC_VUE/template-mdx/stories/0-Welcome.stories.mdx similarity index 92% rename from lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/0-Welcome.stories.mdx rename to lib/cli/src/generators/SFC_VUE/template-mdx/stories/0-Welcome.stories.mdx index bcf64d1f659d..813b03213928 100644 --- a/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/0-Welcome.stories.mdx +++ b/lib/cli/src/generators/SFC_VUE/template-mdx/stories/0-Welcome.stories.mdx @@ -1,6 +1,6 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import { linkTo } from '@storybook/addon-links'; -import Welcome from './Welcome.vue'; +import Welcome from '../src/Welcome.vue'; diff --git a/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/1-Button.stories.mdx b/lib/cli/src/generators/SFC_VUE/template-mdx/stories/1-Button.stories.mdx similarity index 94% rename from lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/1-Button.stories.mdx rename to lib/cli/src/generators/SFC_VUE/template-mdx/stories/1-Button.stories.mdx index f37647542ac2..f8aa5827e56e 100644 --- a/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/1-Button.stories.mdx +++ b/lib/cli/src/generators/SFC_VUE/template-mdx/stories/1-Button.stories.mdx @@ -1,7 +1,7 @@ import { Meta, Story } from '@storybook/addon-docs/blocks'; import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; -import MyButton from './MyButton.vue'; +import MyButton from '../src/MyButton.vue'; diff --git a/lib/cli/src/generators/SVELTE/index.ts b/lib/cli/src/generators/SVELTE/index.ts index 9da7bfa15463..45291b70b50a 100644 --- a/lib/cli/src/generators/SVELTE/index.ts +++ b/lib/cli/src/generators/SVELTE/index.ts @@ -5,10 +5,11 @@ import { getBabelDependencies, installDependencies, copyTemplate, + copyComponents, } from '../../helpers'; -import { Generator } from '../Generator'; +import { Generator } from '../generator'; -const generator: Generator = async (npmOptions, { storyFormat }) => { +const generator: Generator = async (npmOptions, { storyFormat, language }) => { const [ storybookVersion, actionsVersion, @@ -26,6 +27,7 @@ const generator: Generator = async (npmOptions, { storyFormat }) => { 'svelte-loader' ); + copyComponents('svelte', language); copyTemplate(__dirname, storyFormat); const packageJson = await retrievePackageJson(); diff --git a/lib/cli/src/generators/SVELTE/template-csf/.storybook/main.js b/lib/cli/src/generators/SVELTE/template-csf/.storybook/main.js index 3036098563cc..302586ca4090 100644 --- a/lib/cli/src/generators/SVELTE/template-csf/.storybook/main.js +++ b/lib/cli/src/generators/SVELTE/template-csf/.storybook/main.js @@ -1,4 +1,4 @@ module.exports = { - stories: ['../stories/**/*.stories.js'], + stories: ['../src/**/*.stories.js'], addons: ['@storybook/addon-actions', '@storybook/addon-links'], }; diff --git a/lib/cli/src/generators/VUE/index.ts b/lib/cli/src/generators/VUE/index.ts index d35af935858a..881e44d3415a 100644 --- a/lib/cli/src/generators/VUE/index.ts +++ b/lib/cli/src/generators/VUE/index.ts @@ -9,7 +9,7 @@ import { copyTemplate, } from '../../helpers'; import { StoryFormat } from '../../project_types'; -import { Generator } from '../Generator'; +import { Generator } from '../generator'; const generator: Generator = async (npmOptions, { storyFormat }) => { const packages = [ diff --git a/lib/cli/src/generators/VUE/template-mdx/.storybook/main.js b/lib/cli/src/generators/VUE/template-mdx/.storybook/main.js index 5545e141a54c..723d7adf586b 100644 --- a/lib/cli/src/generators/VUE/template-mdx/.storybook/main.js +++ b/lib/cli/src/generators/VUE/template-mdx/.storybook/main.js @@ -1,4 +1,7 @@ module.exports = { - stories: ['../stories/**/*.stories.(js|mdx)'], + stories: [ + '../src/**/*.stories.(ts|tsx|js|jsx|mdx)', + '../stories/**/*.stories.(ts|tsx|js|jsx|mdx)', + ], addons: ['@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-links'], }; diff --git a/lib/cli/src/generators/WEB-COMPONENTS/index.ts b/lib/cli/src/generators/WEB-COMPONENTS/index.ts index 373eac327a67..6884166f964f 100755 --- a/lib/cli/src/generators/WEB-COMPONENTS/index.ts +++ b/lib/cli/src/generators/WEB-COMPONENTS/index.ts @@ -8,7 +8,7 @@ import { installDependencies, } from '../../helpers'; import { StoryFormat } from '../../project_types'; -import { Generator } from '../Generator'; +import { Generator } from '../generator'; const generator: Generator = async (npmOptions, { storyFormat }) => { const packages = [ diff --git a/lib/cli/src/generators/WEBPACK_REACT/index.ts b/lib/cli/src/generators/WEBPACK_REACT/index.ts index 75bec7324ed2..117af995d217 100644 --- a/lib/cli/src/generators/WEBPACK_REACT/index.ts +++ b/lib/cli/src/generators/WEBPACK_REACT/index.ts @@ -1,42 +1,7 @@ -import { - retrievePackageJson, - getVersionedPackages, - writePackageJson, - getBabelDependencies, - installDependencies, - copyTemplate, -} from '../../helpers'; -import { StoryFormat } from '../../project_types'; -import { Generator } from '../Generator'; +import baseGenerator, { Generator } from '../generator'; -const generator: Generator = async (npmOptions, { storyFormat }) => { - const packages = [ - '@storybook/react', - '@storybook/addon-actions', - '@storybook/addon-links', - '@storybook/addons', - ]; - if (storyFormat === StoryFormat.MDX) { - packages.push('@storybook/addon-docs'); - } - const versionedPackages = await getVersionedPackages(npmOptions, ...packages); - - copyTemplate(__dirname, storyFormat); - - const packageJson = await retrievePackageJson(); - - packageJson.dependencies = packageJson.dependencies || {}; - packageJson.devDependencies = packageJson.devDependencies || {}; - - packageJson.scripts = packageJson.scripts || {}; - packageJson.scripts.storybook = 'start-storybook -p 6006'; - packageJson.scripts['build-storybook'] = 'build-storybook'; - - writePackageJson(packageJson); - - const babelDependencies = await getBabelDependencies(npmOptions, packageJson); - - installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]); +const generator: Generator = async (npmOptions, options) => { + baseGenerator(npmOptions, options, 'react'); }; export default generator; diff --git a/lib/cli/src/generators/WEBPACK_REACT/template-csf/.storybook/main.js b/lib/cli/src/generators/WEBPACK_REACT/template-csf/.storybook/main.js deleted file mode 100644 index 69e89d84f741..000000000000 --- a/lib/cli/src/generators/WEBPACK_REACT/template-csf/.storybook/main.js +++ /dev/null @@ -1,9 +0,0 @@ -module.exports = { - stories: ['../stories/**/*.stories.js'], - addons: ['@storybook/addon-actions', '@storybook/addon-links'], - webpackFinal: async (config) => { - // do mutation to the config - - return config; - }, -}; diff --git a/lib/cli/src/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js deleted file mode 100644 index 9920a416e1ff..000000000000 --- a/lib/cli/src/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { linkTo } from '@storybook/addon-links'; -import { Welcome } from '@storybook/react/demo'; - -export default { - title: 'Welcome', - component: Welcome, -}; - -export const ToStorybook = () => ; - -ToStorybook.storyName = 'to Storybook'; diff --git a/lib/cli/src/generators/WEBPACK_REACT/template-mdx/.storybook/main.js b/lib/cli/src/generators/WEBPACK_REACT/template-mdx/.storybook/main.js deleted file mode 100644 index b6db46a69841..000000000000 --- a/lib/cli/src/generators/WEBPACK_REACT/template-mdx/.storybook/main.js +++ /dev/null @@ -1,16 +0,0 @@ -module.exports = { - stories: ['../stories/**/*.stories.(js|mdx)'], - addons: [ - '@storybook/addon-actions', - '@storybook/addon-links', - { - name: '@storybook/addon-docs', - options: { configureJSX: true }, - }, - ], - webpackFinal: async (config) => { - // do mutation to the config - - return config; - }, -}; 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 index 8f48008a3b56..3e250967895c 100644 --- 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 @@ -1,6 +1,6 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import { linkTo } from '@storybook/addon-links'; -import { Welcome } from '@storybook/react/demo'; +import Welcome from '../src/Welcome'; diff --git a/lib/cli/src/generators/WEBPACK_REACT/template-mdx/stories/1-Button.stories.mdx b/lib/cli/src/generators/WEBPACK_REACT/template-mdx/stories/1-Button.stories.mdx index 876782206a82..e7606083b0a3 100644 --- a/lib/cli/src/generators/WEBPACK_REACT/template-mdx/stories/1-Button.stories.mdx +++ b/lib/cli/src/generators/WEBPACK_REACT/template-mdx/stories/1-Button.stories.mdx @@ -1,6 +1,6 @@ import { Meta, Story } from '@storybook/addon-docs/blocks'; import { action } from '@storybook/addon-actions'; -import { Button } from '@storybook/react/demo'; +import Button from '../src/Button'; diff --git a/lib/cli/src/generators/configure.ts b/lib/cli/src/generators/configure.ts new file mode 100644 index 000000000000..333576de9b33 --- /dev/null +++ b/lib/cli/src/generators/configure.ts @@ -0,0 +1,16 @@ +import fse from 'fs-extra'; + +function mainConfigurationGenerator(addons?: string[], custom?: any) { + const hasSrc = fse.existsSync('./src'); + + const config = { + stories: ['../stories/**/*.stories.*', hasSrc && '../src/**/*.stories.*'].filter(Boolean), + addons: ['@storybook/addon-essentials', '@storybook/addon-links', ...addons], + ...custom, + }; + + const stringified = `module.exports = ${JSON.stringify(config, null, 2)}`; + fse.writeFileSync('./.storybook/main.js', stringified, { encoding: 'utf8' }); +} + +export default mainConfigurationGenerator; diff --git a/lib/cli/src/helpers.test.ts b/lib/cli/src/helpers.test.ts index 47dedbb8da34..a6c1503c86e9 100644 --- a/lib/cli/src/helpers.test.ts +++ b/lib/cli/src/helpers.test.ts @@ -2,7 +2,7 @@ import fs from 'fs'; import fse from 'fs-extra'; import * as helpers from './helpers'; -import { StoryFormat } from './project_types'; +import { StoryFormat, SupportedLanguage, SupportedFrameworks } from './project_types'; jest.mock('fs', () => ({ existsSync: jest.fn(), @@ -10,6 +10,7 @@ jest.mock('fs', () => ({ jest.mock('fs-extra', () => ({ copySync: jest.fn(() => ({})), + ensureDir: jest.fn(() => {}), })); jest.mock('path', () => ({ @@ -54,4 +55,54 @@ describe('Helpers', () => { }).toThrowError(expectedMessage); }); }); + + it.each` + language | exists | expected + ${'javascript'} | ${['js', 'ts']} | ${'/js'} + ${'typescript'} | ${['js', 'ts']} | ${'/ts'} + ${'typescript'} | ${['js']} | ${'/js'} + ${'javascript'} | ${[]} | ${''} + ${'typescript'} | ${[]} | ${''} + `( + `should copy $expected when folder $exists exists for language $language`, + ({ language, exists, expected }) => { + const componentsDirectory = exists.map((folder: string) => `frameworks/react/${folder}`); + const expectedDirectory = `frameworks/react${expected}`; + (fse.existsSync as jest.Mock).mockImplementation((filePath) => { + return componentsDirectory.includes(filePath) || filePath === 'frameworks/react'; + }); + helpers.copyComponents('react', language); + + const copySyncSpy = jest.spyOn(fse, 'copySync'); + expect(copySyncSpy).toHaveBeenCalledWith( + expectedDirectory, + expect.anything(), + expect.anything() + ); + } + ); + + it(`should copy to src folder when exists`, () => { + (fse.existsSync as jest.Mock).mockImplementation((filePath) => { + return filePath === 'frameworks/react' || filePath === './src'; + }); + helpers.copyComponents('react', SupportedLanguage.JAVASCRIPT); + expect(fse.copySync).toHaveBeenCalledWith(expect.anything(), './src', expect.anything()); + }); + + it(`should copy to root folder when src doesn't exist`, () => { + (fse.existsSync as jest.Mock).mockImplementation((filePath) => { + return filePath === 'frameworks/react'; + }); + helpers.copyComponents('react', SupportedLanguage.JAVASCRIPT); + expect(fse.copySync).toHaveBeenCalledWith(expect.anything(), '.', expect.anything()); + }); + + it(`should throw an error for unsupported framework`, () => { + const framework = 'unknown framework' as SupportedFrameworks; + const expectedMessage = `Unsupported framework: ${framework}`; + expect(() => { + helpers.copyComponents(framework, SupportedLanguage.JAVASCRIPT); + }).toThrowError(expectedMessage); + }); }); diff --git a/lib/cli/src/helpers.ts b/lib/cli/src/helpers.ts index 4e345911d346..3d6c944da5f9 100644 --- a/lib/cli/src/helpers.ts +++ b/lib/cli/src/helpers.ts @@ -9,7 +9,7 @@ import stripJsonComments from 'strip-json-comments'; import { latestVersion } from './latest_version'; import { npmInit } from './npm_init'; -import { StoryFormat } from './project_types'; +import { StoryFormat, SupportedFrameworks, SupportedLanguage } from './project_types'; import { PackageJson } from './PackageJson'; import { NpmOptions } from './NpmOptions'; @@ -328,6 +328,16 @@ export function addToDevDependenciesIfNotPresent( export function copyTemplate(templateRoot: string, storyFormat: StoryFormat) { const templateDir = path.resolve(templateRoot, `template-${storyFormat}/`); + const newTemplates = [/WEBPACK_REACT/, /REACT/, /REACT_SCRIPTS/]; + const reactNative = /REACT_NATIVE/; + if ( + newTemplates.some((t) => templateRoot.match(t)) && + storyFormat !== StoryFormat.MDX && + !templateRoot.match(reactNative) + ) { + return; + } + if (!fs.existsSync(templateDir)) { // Fallback to CSF plain first, in case format is typescript but template is not available. if (storyFormat === StoryFormat.CSF_TYPESCRIPT) { @@ -339,3 +349,42 @@ export function copyTemplate(templateRoot: string, storyFormat: StoryFormat) { } fse.copySync(templateDir, '.', { overwrite: true }); } + +export function copyComponents(framework: SupportedFrameworks, language: SupportedLanguage) { + const languageFolderMapping: { [key in SupportedLanguage]: string } = { + javascript: 'js', + typescript: 'ts', + }; + const componentsPath = () => { + const frameworkPath = `frameworks/${framework}`; + const languageSpecific = path.resolve( + __dirname, + `${frameworkPath}/${languageFolderMapping[language]}` + ); + if (fse.existsSync(languageSpecific)) { + return languageSpecific; + } + const jsFallback = path.resolve( + __dirname, + `${frameworkPath}/${languageFolderMapping.javascript}` + ); + if (fse.existsSync(jsFallback)) { + return jsFallback; + } + const frameworkRootPath = path.resolve(__dirname, frameworkPath); + if (fse.existsSync(frameworkRootPath)) { + return frameworkRootPath; + } + throw new Error(`Unsupported framework: ${framework}`); + }; + + const targetPath = () => { + if (fse.existsSync('./src')) { + return './src'; + } + return '.'; + }; + + const destinationPath = targetPath(); + fse.copySync(componentsPath(), destinationPath, { overwrite: true }); +} diff --git a/lib/cli/src/initiate.ts b/lib/cli/src/initiate.ts index 1c080c029a09..7a5f7c6f2a3c 100644 --- a/lib/cli/src/initiate.ts +++ b/lib/cli/src/initiate.ts @@ -58,13 +58,13 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr skipInstall: options.skipInstall, }; + const language = detectLanguage(); const defaultStoryFormat = - detectLanguage() === SupportedLanguage.TYPESCRIPT - ? StoryFormat.CSF_TYPESCRIPT - : StoryFormat.CSF; + language === SupportedLanguage.TYPESCRIPT ? StoryFormat.CSF_TYPESCRIPT : StoryFormat.CSF; const generatorOptions = { storyFormat: options.storyFormat || defaultStoryFormat, + language, }; const runStorybookCommand = useYarn ? 'yarn storybook' : 'npm run storybook'; diff --git a/lib/cli/src/project_types.ts b/lib/cli/src/project_types.ts index 48df5d200767..35cf14657a83 100644 --- a/lib/cli/src/project_types.ts +++ b/lib/cli/src/project_types.ts @@ -1,3 +1,4 @@ +// Should match @storybook/ export type SupportedFrameworks = | 'react' | 'react-native' @@ -11,7 +12,10 @@ export type SupportedFrameworks = | 'meteor' | 'preact' | 'svelte' - | 'rax'; + | 'rax' + | 'aurelia' + | 'html' + | 'web-components'; export enum ProjectType { UNDETECTED = 'UNDETECTED', diff --git a/lib/cli/tsconfig.json b/lib/cli/tsconfig.json index c4e40706894b..baab5c88cd85 100644 --- a/lib/cli/tsconfig.json +++ b/lib/cli/tsconfig.json @@ -12,5 +12,5 @@ "noFallthroughCasesInSwitch": true }, "include": ["src/**/*"], - "exclude": ["src/**/template*"] + "exclude": ["src/**/template*", "src/framework/**/*"] } diff --git a/scripts/prepare.js b/scripts/prepare.js index 19e50ee6bccf..84c397565b51 100644 --- a/scripts/prepare.js +++ b/scripts/prepare.js @@ -34,9 +34,16 @@ function cleanup() { if (fs.existsSync(path.join(process.cwd(), 'dist'))) { const files = shell.find('dist').filter((filePath) => { // Do not remove folder - // And do not clean anything for @storybook/cli/dist/generators/**/template* because these are the template files + // And do not clean anything for: + // - @storybook/cli/dist/generators/**/template* + // - @storybook/cli/dist/frameworks/* + // because these are the template files // that will be copied to init SB on users' projects - if (fs.lstatSync(filePath).isDirectory() || /generators\/.+\/template.*/.test(filePath)) { + if ( + fs.lstatSync(filePath).isDirectory() || + /generators\/.+\/template.*/.test(filePath) || + /dist\/frameworks\/.*/.test(filePath) + ) { return false; }