diff --git a/examples/angular-cli/.storybook/config.js b/examples/angular-cli/.storybook/config.js index 10a0838b13df..3ec2718b7843 100644 --- a/examples/angular-cli/.storybook/config.js +++ b/examples/angular-cli/.storybook/config.js @@ -3,7 +3,7 @@ import { configure } from '@storybook/angular'; function loadStories() { - require('../src/stories'); + require('../stories'); } configure(loadStories, module); diff --git a/examples/angular-cli/src/stories/index.ts b/examples/angular-cli/stories/index.ts similarity index 95% rename from examples/angular-cli/src/stories/index.ts rename to examples/angular-cli/stories/index.ts index 6aca064c7ee6..6b773daddd08 100644 --- a/examples/angular-cli/src/stories/index.ts +++ b/examples/angular-cli/stories/index.ts @@ -6,7 +6,7 @@ import { linkTo } from '@storybook/addon-links'; import { Welcome, Button } from '@storybook/angular/demo'; -import { AppComponent } from '../app/app.component'; +import { AppComponent } from '../src/app/app.component'; storiesOf('Welcome') .add('to Storybook', () => ({ diff --git a/lib/cli/generators/ANGULAR/index.js b/lib/cli/generators/ANGULAR/index.js new file mode 100644 index 000000000000..bb1c3ad7c96f --- /dev/null +++ b/lib/cli/generators/ANGULAR/index.js @@ -0,0 +1,19 @@ +const mergeDirs = require('merge-dirs').default; +const helpers = require('../../lib/helpers'); +const path = require('path'); +const latestVersion = require('latest-version'); + +module.exports = latestVersion('@storybook/angular').then(version => { + mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite'); + + const packageJson = helpers.getPackageJson(); + + packageJson.devDependencies = packageJson.devDependencies || {}; + packageJson.devDependencies['@storybook/angular'] = `^${version}`; + + packageJson.scripts = packageJson.scripts || {}; + packageJson.scripts.storybook = 'start-storybook -p 6006'; + packageJson.scripts['build-storybook'] = 'build-storybook'; + + helpers.writePackageJson(packageJson); +}); diff --git a/lib/cli/generators/ANGULAR/template/.storybook/addons.js b/lib/cli/generators/ANGULAR/template/.storybook/addons.js new file mode 100644 index 000000000000..4f9743d248ee --- /dev/null +++ b/lib/cli/generators/ANGULAR/template/.storybook/addons.js @@ -0,0 +1,5 @@ +/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ + +import '@storybook/addon-actions/register'; +import '@storybook/addon-links/register'; +import '@storybook/addon-notes/register'; diff --git a/lib/cli/generators/ANGULAR/template/.storybook/config.js b/lib/cli/generators/ANGULAR/template/.storybook/config.js new file mode 100644 index 000000000000..3ec2718b7843 --- /dev/null +++ b/lib/cli/generators/ANGULAR/template/.storybook/config.js @@ -0,0 +1,9 @@ +/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ + +import { configure } from '@storybook/angular'; + +function loadStories() { + require('../stories'); +} + +configure(loadStories, module); diff --git a/lib/cli/generators/ANGULAR/template/stories/index.ts b/lib/cli/generators/ANGULAR/template/stories/index.ts new file mode 100644 index 000000000000..339e2ca8b5d0 --- /dev/null +++ b/lib/cli/generators/ANGULAR/template/stories/index.ts @@ -0,0 +1,42 @@ +import { storiesOf } from '@storybook/angular'; +import { addonNotes } from '@storybook/addon-notes'; +import { action } from '@storybook/addon-actions' +import { linkTo } from '@storybook/addon-links' + +import { Welcome, Button } from '@storybook/angular/demo'; + +storiesOf('Welcome', module) + .add('to Storybook', () => ({ + component: Welcome, + props: {} + })) + +storiesOf('Button', module) + .add('with text', () => ({ + component: Button, + props: { + text: 'Hello Button' + } + })) + .add('with some emoji', addonNotes({ notes: 'My notes on a button with emojis' })(() => ({ + component: Button, + props: { + text: '😀 😎 👍 💯' + } + }))) + .add('with some emoji and action', addonNotes({ notes: 'My notes on a button with emojis' })(() => ({ + component: Button, + props: { + text: '😀 😎 👍 💯', + onClick: action('This was clicked OMG') + } + }))) + +storiesOf('Another Button', module) + .add('button with link to another story', () => ({ + component: Button, + props: { + text: 'Go to Welcome Story', + onClick: linkTo('Welcome') + } + })) \ No newline at end of file diff --git a/lib/cli/lib/detect.js b/lib/cli/lib/detect.js index 52b6986fdadc..3540343de34d 100644 --- a/lib/cli/lib/detect.js +++ b/lib/cli/lib/detect.js @@ -13,7 +13,8 @@ module.exports = function detect(options) { if ( packageJson.devDependencies['@storybook/react'] || packageJson.devDependencies['@storybook/react-native'] || - packageJson.devDependencies['@storybook/vue'] + packageJson.devDependencies['@storybook/vue'] || + packageJson.devDependencies['@storybook/angular'] ) { return types.ALREADY_HAS_STORYBOOK; } @@ -71,5 +72,12 @@ module.exports = function detect(options) { return types.REACT; } + if ( + (packageJson.dependencies && packageJson.dependencies['@angular/cli']) || + (packageJson.devDependencies && packageJson.devDependencies['@angular/cli']) + ) { + return types.ANGULAR; + } + return types.UNDETECTED; }; diff --git a/lib/cli/lib/project_types.js b/lib/cli/lib/project_types.js index 51bda352c292..68830905dd94 100644 --- a/lib/cli/lib/project_types.js +++ b/lib/cli/lib/project_types.js @@ -9,6 +9,7 @@ module.exports = { WEBPACK_REACT: 'WEBPACK_REACT', VUE: 'VUE', SFC_VUE: 'SFC_VUE', + ANGULAR: 'ANGULAR', ALREADY_HAS_STORYBOOK: 'ALREADY_HAS_STORYBOOK', UPDATE_PACKAGE_ORGANIZATIONS: 'UPDATE_PACKAGE_ORGANIZATIONS', };