Address storybook reviewer feedback

- add basic doc
- include ee/
- add storybook:start and storybook:install yarn scripts

.gitlab/ci/frontend.gitlab-ci.yml

@@ -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

app/assets/javascripts/vue_shared/components/todo_button.stories.js

@@ -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 }) => ({

doc/development/fe_guide/storybook.md

+# 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.

package.json

@@ -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",

storybook/.gitignore

 node_modules/
-storybook-static
\ No newline at end of file
+public/
\ No newline at end of file

storybook/config/main.js

 /* 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'],
 };

storybook/package.json

@@ -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": {