Address storybook reviewer feedback
- add basic doc - include ee/ - add storybook:start and storybook:install yarn scripts
This commit is contained in:
parent
c8eed07cc5
commit
c9cb0c5f04
|
@ -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
|
||||
|
|
|
@ -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 }) => ({
|
||||
|
|
44
doc/development/fe_guide/storybook.md
Normal file
44
doc/development/fe_guide/storybook.md
Normal 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.
|
|
@ -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",
|
||||
|
|
2
storybook/.gitignore
vendored
2
storybook/.gitignore
vendored
|
@ -1,2 +1,2 @@
|
|||
node_modules/
|
||||
storybook-static
|
||||
public/
|
|
@ -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'],
|
||||
};
|
||||
|
|
|
@ -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": {
|
||||
|
|
Loading…
Reference in a new issue