From 4d2332b8f8ddd668b93aac85222e27c2dcab8349 Mon Sep 17 00:00:00 2001 From: y-kurami Date: Wed, 27 Dec 2017 18:23:22 +0900 Subject: [PATCH 1/4] add guide for Angular --- docs/gatsby-config.js | 1 + docs/src/pages/basics/guide-angular/index.md | 116 ++++++++++++++++++ .../pages/basics/quick-start-guide/index.md | 4 +- .../pages/basics/slow-start-guide/index.md | 1 + 4 files changed, 120 insertions(+), 2 deletions(-) create mode 100644 docs/src/pages/basics/guide-angular/index.md diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js index f7f859206703..7d30334bbe23 100644 --- a/docs/gatsby-config.js +++ b/docs/gatsby-config.js @@ -11,6 +11,7 @@ module.exports = { '/basics/slow-start-guide/', '/basics/guide-react/', '/basics/guide-vue/', + '/basics/guide-angular/', '/basics/writing-stories/', '/basics/exporting-storybook/', '/basics/faq/', diff --git a/docs/src/pages/basics/guide-angular/index.md b/docs/src/pages/basics/guide-angular/index.md new file mode 100644 index 000000000000..665c233af616 --- /dev/null +++ b/docs/src/pages/basics/guide-angular/index.md @@ -0,0 +1,116 @@ +* * * + +id: 'guide-angualr' + +## title: 'Storybook for Angular' + +You may have tried to use our quick start guide to setup your project for Storybook. If you want to set up Storybook manually, this is the guide for you. + +> This will also help you understand how Storybook works. + +## Starter Guide Angular + +Storybook has its own Webpack setup and a dev server. +The Webpack setup is very similar to [Angular CLI](https://cli.angular.io), but allows you to [configure it however you want](/configurations/custom-webpack-config/). + +In this guide, we are trying to set up Storybook for your Angular project. + +## Table of contents + +- [Create Angular project](#create-angular-project) +- [Add @storybook/angular](#add-storybookangular) +- [Create the config file](#create-the-config-file) +- [Write your stories](#write-your-stories) +- [Run your Storybook](#run-your-storybook) + +## Create Angular project + +First of all, you need to prepare an Angular project. To do that, run: + +```sh +npm i -g @angular/cli +ng new your-angular-prj +cd your-angular-prj +``` + +## Add @storybook/angular + +Next, install `@storybook/angular` to your project: + +```sh +npm i --save-dev @storybook/angular +``` + +Then add the following NPM script to your package json in order to start the storybook later in this guide: + +```json +{ + "scripts": { + "storybook": "start-storybook -p 9001 -c .storybook" + } +} +``` + +## Create the config file + +Storybook can be configured in several different ways. +That’s why we need a config directory. We've added a `-c` option to the above NPM script mentioning `.storybook` as the config directory. + +For the basic Storybook configuration file, you don't need to do much, but simply tell Storybook where to find stories. + +To do that, simply create a file at `.storybook/config.js` with the following content: + +```js +import { configure } from '@storybook/angular'; + +function loadStories() { + require('../stories/index.ts'); +} + +configure(loadStories, module); +``` + +That'll load stories in `../stories/index.ts`. + +Just like that, you can load stories from wherever you want to. + +## Write your stories + +Now you can write some stories inside the `../stories/index.ts` file, like this: + +```js +import { storiesOf } from '@storybook/angular'; +import { action } from '@storybook/addon-actions'; +import { MyButtonComponent } from '../src/app/my-button/my-button.component'; + +storiesOf('My Button', module) + .add('with some emoji', () => ({ + component: MyButtonComponent, + props: { + text: 'πŸ˜€ 😎 πŸ‘ πŸ’―', + }, + })) + .add('with some emoji and action', () => ({ + component: MyButtonComponent, + props: { + text: 'πŸ˜€ 😎 πŸ‘ πŸ’―', + click: action('clicked'), + }, + })); +``` + +Each story is a single state of your component. In the above case, there are two stories for the MyButton component: + +1. story with `@Input()` property binding. +2. story with `@Input()` and `@Output()` property binding. + +## Run your Storybook + +Now everything is ready. Simply run your storybook with: + +```sh +npm run storybook +``` + +Now you can change components and write stories whenever you need to. +You'll get those changes into Storybook in a snap with the help of Webpack's HMR API. diff --git a/docs/src/pages/basics/quick-start-guide/index.md b/docs/src/pages/basics/quick-start-guide/index.md index 1eb1eaa771e4..71ee3d4157ad 100644 --- a/docs/src/pages/basics/quick-start-guide/index.md +++ b/docs/src/pages/basics/quick-start-guide/index.md @@ -3,7 +3,7 @@ id: 'quick-start-guide' title: 'Quick Start Guide' --- -Storybook is very easy to use. You can use it with any kind of React or Vue project. +Storybook is very easy to use. You can use it with any kind of React or Vue or Angular project. Follow these steps to get started with Storybook. ```sh @@ -23,4 +23,4 @@ Then you can access your storybook from the browser. * * * -To learn more about what `getstorybook` command does, have a look at our [Start Guide for React](/basics/guide-react/) or [Start Guide for Vue](/basics/guide-vue/). +To learn more about what `getstorybook` command does, have a look at our [Start Guide for React](/basics/guide-react/) or [Start Guide for Vue](/basics/guide-vue/) or [Start Guide for Angular](/basics/guide-angular/). diff --git a/docs/src/pages/basics/slow-start-guide/index.md b/docs/src/pages/basics/slow-start-guide/index.md index cdb65750c74d..a49d890f60c0 100644 --- a/docs/src/pages/basics/slow-start-guide/index.md +++ b/docs/src/pages/basics/slow-start-guide/index.md @@ -7,3 +7,4 @@ Storybook supports multiple UI libraries, the manual setup for each is different - [Storybook for React](/basics/guide-react/) - [Storybook for Vue](/basics/guide-vue/) +- [Storybook for Angular](/basics/guide-angular/) From fdcbfad87a68be9766f0e8ec85df642b348611f2 Mon Sep 17 00:00:00 2001 From: y-kurami Date: Wed, 27 Dec 2017 18:41:05 +0900 Subject: [PATCH 2/4] 'webpack' should be written in lowercase --- docs/src/pages/basics/guide-angular/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/basics/guide-angular/index.md b/docs/src/pages/basics/guide-angular/index.md index 665c233af616..c8e15780ac25 100644 --- a/docs/src/pages/basics/guide-angular/index.md +++ b/docs/src/pages/basics/guide-angular/index.md @@ -10,8 +10,8 @@ You may have tried to use our quick start guide to setup your project for Storyb ## Starter Guide Angular -Storybook has its own Webpack setup and a dev server. -The Webpack setup is very similar to [Angular CLI](https://cli.angular.io), but allows you to [configure it however you want](/configurations/custom-webpack-config/). +Storybook has its own webpack setup and a dev server. +The webpack setup is very similar to [Angular CLI](https://cli.angular.io), but allows you to [configure it however you want](/configurations/custom-webpack-config/). In this guide, we are trying to set up Storybook for your Angular project. @@ -113,4 +113,4 @@ npm run storybook ``` Now you can change components and write stories whenever you need to. -You'll get those changes into Storybook in a snap with the help of Webpack's HMR API. +You'll get those changes into Storybook in a snap with the help of webpack's HMR API. From 8cd149dee0adbf63b361070e054c89d750b620a3 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 27 Dec 2017 23:56:02 +0100 Subject: [PATCH 3/4] Update index.md --- docs/src/pages/basics/guide-angular/index.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/basics/guide-angular/index.md b/docs/src/pages/basics/guide-angular/index.md index c8e15780ac25..4eb48663ed63 100644 --- a/docs/src/pages/basics/guide-angular/index.md +++ b/docs/src/pages/basics/guide-angular/index.md @@ -1,8 +1,9 @@ -* * * +--- +id: 'guide-angular' +title: 'Storybook for Angular' +--- -id: 'guide-angualr' - -## title: 'Storybook for Angular' +## Storybook for Angular You may have tried to use our quick start guide to setup your project for Storybook. If you want to set up Storybook manually, this is the guide for you. From cd6aaaad8bab42061c6ee5ee26460b52f1b7d33f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 27 Dec 2017 23:56:36 +0100 Subject: [PATCH 4/4] Update index.md --- docs/src/pages/basics/guide-angular/index.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/src/pages/basics/guide-angular/index.md b/docs/src/pages/basics/guide-angular/index.md index 4eb48663ed63..2ea64041851a 100644 --- a/docs/src/pages/basics/guide-angular/index.md +++ b/docs/src/pages/basics/guide-angular/index.md @@ -3,8 +3,6 @@ id: 'guide-angular' title: 'Storybook for Angular' --- -## Storybook for Angular - You may have tried to use our quick start guide to setup your project for Storybook. If you want to set up Storybook manually, this is the guide for you. > This will also help you understand how Storybook works.