Init storybook for vue_shared

Adds Storybook dependencies, config,
and a story for todo_button.vue.

Deploys to GitLab pages.

.eslintrc.yml

@@ -89,6 +89,9 @@ rules:
           group: internal
       alphabetize:
         order: asc
+  filenames/match-regex:
+    - error
+    - "^[a-z_]+(\\.stories|\\.config|\\.documentation|\\.[a-z_]+\\.example|\\.spec)?$"
 overrides:
   - files:
       - '**/spec/**/*'

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

@@ -344,3 +344,20 @@ startup-css-check as-if-foss:
   needs:
     - job: "compile-test-assets as-if-foss"
     - job: "rspec frontend_fixture as-if-foss"
+
+compile-storybook:
+  extends:
+    - .compile-assets-base
+  script:
+    - source scripts/utils.sh
+    - cd storybook/
+    - run_timed_command "retry yarn install --frozen-lockfile"
+    - yarn build
+    - mkdir public
+    - mv storybook-static/* public
+  artifacts:
+    name: storybook
+    expire_in: 31d
+    when: always
+    paths:
+      - public

.gitlab/ci/pages.gitlab-ci.yml

 pages:
   extends:
     - .default-retry
-    - .pages:rules
   stage: pages
   needs:
     - rspec:coverage
     - coverage-frontend
     - karma
     - compile-production-assets
+    - compile-storybook
   script:
     - mv public/ .public/
     - mkdir public/
@@ -16,7 +16,10 @@ pages:
     - mv coverage-javascript/ public/coverage-javascript/ || true
     - cp .public/assets/application-*.css public/application.css || true
     - cp .public/assets/application-*.css.gz public/application.css.gz || true
+    - cp .public/storybook public/storybook || true
   artifacts:
     paths:
       - public
     expire_in: 31d
+  rules:
+    - when: manual

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

+/* eslint-disable @gitlab/require-i18n-strings */
+
+import TodoButton from './todo_button.vue';
+
+export default {
+  component: TodoButton,
+  title: 'components/todo_button',
+};
+
+export const Primary = () => ({
+  components: { TodoButton },
+  template: '<todo-button />',
+  argTypes: {
+    isTodo: { description: 'True if to-do is unresolved (i.e. not "done")', control: 'boolean' },
+  },
+});

package.json

@@ -43,7 +43,8 @@
     "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"
+    "webpack-prod": "NODE_OPTIONS=\"--max-old-space-size=3584\" NODE_ENV=production webpack --config config/webpack.config.js",
+    "storybook": "yarn --cwd ./storybook start"
   },
   "dependencies": {
     "@babel/core": "^7.10.1",

storybook/.gitignore

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

storybook/config/main.js

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

storybook/config/preview.js

+/* eslint-disable import/no-unresolved, import/no-commonjs */
+const stylesheetsRequireCtx = require.context(
+  '../../app/assets/stylesheets',
+  true,
+  /application\.scss$/,
+);
+
+stylesheetsRequireCtx('./application.scss');
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+};

storybook/config/webpack.config.js

+/* eslint-disable no-param-reassign */
+
+const { statSync } = require('fs');
+const sass = require('node-sass');
+const { buildIncludePaths, resolveGlobUrl } = require('node-sass-magic-importer/dist/toolbox');
+const path = require('path');
+const webpack = require('webpack');
+const gitlabWebpackConfig = require('../../config/webpack.config.js');
+
+const TRANSPARENT_1X1_PNG =
+  'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==)';
+
+function smartImporter(url, prev) {
+  const nodeSassOptions = this.options;
+  const includePaths = buildIncludePaths(nodeSassOptions.includePaths, prev).filter(
+    (includePath) => !includePath.includes('node_modules'),
+  );
+
+  // if (url.startsWith('@gitlab/ui')) {
+  //   return { file: resolveUrl(url.replace('@gitlab/ui/', ''), includePaths) };
+  // }
+
+  // if (url === 'framework/variables') {
+  //   return { contents: patchedFrameworkVariables };
+  // }
+
+  const filePaths = resolveGlobUrl(url, includePaths);
+
+  if (filePaths) {
+    const contents = filePaths
+      .filter((file) => statSync(file).isFile())
+      .map((x) => `@import '${x}';`)
+      .join(`\n`);
+    return { contents };
+  }
+
+  return null;
+}
+
+const ROOT = path.resolve(__dirname, '../../');
+
+const sassIncludePaths = [
+  'app/assets/stylesheets',
+  'ee/app/assets/stylesheets',
+  'ee/app/assets/stylesheets/_ee',
+  'node_modules',
+].map((p) => path.resolve(ROOT, p));
+
+const sassLoaderOptions = {
+  functions: {
+    'image-url($url)': function sassImageUrlStub() {
+      return new sass.types.String(TRANSPARENT_1X1_PNG);
+    },
+    'asset_path($url)': function sassAssetPathStub() {
+      return new sass.types.String(TRANSPARENT_1X1_PNG);
+    },
+    'asset_url($url)': function sassAssetUrlStub() {
+      return new sass.types.String(TRANSPARENT_1X1_PNG);
+    },
+    'url($url)': function sassUrlStub() {
+      return new sass.types.String(TRANSPARENT_1X1_PNG);
+    },
+  },
+  includePaths: sassIncludePaths,
+  importer: smartImporter,
+};
+
+module.exports = ({ config }) => {
+  config.resolve.extensions = Array.from(
+    new Set([...config.resolve.extensions, ...gitlabWebpackConfig.resolve.extensions]),
+  );
+
+  Object.assign(config.resolve.alias, gitlabWebpackConfig.resolve.alias);
+  delete config.resolve.alias['@gitlab/svgs/dist/icons.svg'];
+
+  config.module.rules = [
+    ...config.module.rules.filter((r) => !r.test.test('.css')),
+    {
+      test: /\.s?css$/,
+      exclude: /typescale\/\w+_demo\.scss$/, // skip typescale demo stylesheets
+      loaders: [
+        'style-loader',
+        'css-loader',
+        {
+          loader: 'sass-loader',
+          options: sassLoaderOptions,
+        },
+      ],
+    },
+  ];
+
+  config.plugins.push(new webpack.IgnorePlugin(/moment/, /pikaday/));
+
+  return config;
+};

storybook/package.json

+{
+  "name": "gitlab-storybook",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "start-storybook -p 6006 -c config",
+    "build": "build-storybook -c config"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@storybook/addon-controls": "^6.1.20",
+    "@storybook/addon-essentials": "^6.1.20",
+    "@storybook/addon-links": "^6.1.20",
+    "@storybook/vue": "^6.1.20",
+    "node-sass": "^4.14.1",
+    "node-sass-magic-importer": "^5.3.2",
+    "postcss-loader": "3.0.0",
+    "sass-loader": "^7.1.0"
+  }
+}