Address storybook reviewer feedback

- add basic doc
- include ee/
- add storybook:start and storybook:install yarn scripts
This commit is contained in:
Tom Quirk 2021-06-07 15:05:20 +09:30
parent c8eed07cc5
commit c9cb0c5f04
7 changed files with 55 additions and 9 deletions

View file

@ -353,8 +353,6 @@ compile-storybook:
- cd storybook/
- run_timed_command "retry yarn install --frozen-lockfile"
- yarn build
- mkdir public
- mv storybook-static/* public
artifacts:
name: storybook
expire_in: 31d

View file

@ -4,7 +4,7 @@ import TodoButton from './todo_button.vue';
export default {
component: TodoButton,
title: 'components/todo_button',
title: 'vue_shared/components/todo_button',
};
const Template = (args, { argTypes }) => ({

View file

@ -0,0 +1,44 @@
# Storybook
The Storybook for the `gitlab-org/gitlab` project is available on our GitLab Pages site at https://gitlab-org.gitlab.io/gitlab/storybook.
## Storybook in local development
Storybook dependencies and configuration are located under the `storybook/` directory.
To build and launch Storybook locally, in the root directory of the `gitlab` project:
1. Install Storybook dependencies:
```bash
yarn storybook:install
```
1. Build the Storybook site:
```bash
yarn storybook:start
```
## Adding components to Storybook
Stories can be added for any Vue component in the `gitlab` repository.
To add a story:
1. Create a new `.stories.js` file in the same directory as the Vue component.
The file name should have the same prefix as the Vue component.
```txt
vue_shared/
├─ components/
│ ├─ todo_button.vue
│ ├─ todo_button.stories.js
```
1. Write the story as per the official Storybook instructions: https://storybook.js.org/docs/vue/writing-stories/introduction
Notes:
- Specify the `title` field of the story as the component's file path from the `javascripts/` directory,
e.g. if the component is located at `app/assets/javascripts/vue_shared/components/todo_button.vue`, specify the `title` as
`vue_shared/components/To-do Button`. This will ensure the Storybook navigation maps closely to our internal directory structure.

View file

@ -40,11 +40,12 @@
"markdownlint:no-trailing-spaces": "markdownlint --config doc/.markdownlint/markdownlint-no-trailing-spaces.yml",
"markdownlint:no-trailing-spaces:fix": "yarn run markdownlint:no-trailing-spaces --fix",
"postinstall": "node ./scripts/frontend/postinstall.js",
"storybook:install": "yarn --cwd ./storybook install",
"storybook:start": "yarn --cwd ./storybook start",
"stylelint-create-utility-map": "node scripts/frontend/stylelint/stylelint-utility-map.js",
"webpack": "NODE_OPTIONS=\"--max-old-space-size=3584\" webpack --config config/webpack.config.js",
"webpack-vendor": "NODE_OPTIONS=\"--max-old-space-size=3584\" webpack --config config/webpack.vendor.config.js",
"webpack-prod": "NODE_OPTIONS=\"--max-old-space-size=3584\" NODE_ENV=production webpack --config config/webpack.config.js",
"storybook": "yarn --cwd ./storybook start"
"webpack-prod": "NODE_OPTIONS=\"--max-old-space-size=3584\" NODE_ENV=production webpack --config config/webpack.config.js"
},
"dependencies": {
"@babel/core": "^7.10.1",

View file

@ -1,2 +1,2 @@
node_modules/
storybook-static
public/

View file

@ -1,5 +1,8 @@
/* eslint-disable import/no-commonjs */
module.exports = {
stories: ['../../app/assets/javascripts/**/*.stories.js'],
stories: [
'../../app/assets/javascripts/**/*.stories.js',
'../../ee/app/assets/javascripts/**/*.stories.js',
],
addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
};

View file

@ -2,8 +2,8 @@
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "start-storybook -p 6006 -c config",
"build": "build-storybook -c config"
"start": "start-storybook -p 9002 -c config",
"build": "build-storybook -c config -o public"
},
"dependencies": {},
"devDependencies": {