Clean up storybook config

- upgrade storybook packages
- add comments to webpack config

.eslintrc.yml

@@ -89,9 +89,6 @@ rules:
           group: internal
       alphabetize:
         order: asc
-  filenames/match-regex:
-    - error
-    - "^[a-z_]+(\\.stories|\\.config|\\.documentation|\\.[a-z_]+\\.example|\\.spec)?$"
 overrides:
   - files:
       - '**/spec/**/*'
@@ -110,3 +107,7 @@ overrides:
       import/no-nodejs-modules: off
       filenames/match-regex: off
       no-console: off
+  - files:
+      - '*.stories.js'
+    rules:
+      filenames/match-regex: off

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

 pages:
   extends:
     - .default-retry
+    - .pages:rules
   stage: pages
   needs:
     - rspec:coverage
@@ -21,5 +22,3 @@ pages:
     paths:
       - public
     expire_in: 31d
-  rules:
-    - when: manual

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

@@ -7,10 +7,17 @@ export default {
   title: 'components/todo_button',
 };
 
-export const Primary = () => ({
+const Template = (args, { argTypes }) => ({
   components: { TodoButton },
-  template: '<todo-button />',
-  argTypes: {
-    isTodo: { description: 'True if to-do is unresolved (i.e. not "done")', control: 'boolean' },
-  },
+  props: Object.keys(argTypes),
+  template: '<todo-button v-bind="$props" v-on="$props" />',
 });
+
+export const Default = Template.bind({});
+Default.argTypes = {
+  isTodo: {
+    description: 'True if to-do is unresolved (i.e. not "done")',
+    control: { type: 'boolean' },
+  },
+  click: { action: 'clicked' },
+};

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'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
 };

storybook/config/preview.js

@@ -5,7 +5,3 @@ const stylesheetsRequireCtx = require.context(
 );
 
 stylesheetsRequireCtx('./application.scss');
-
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-};

storybook/config/webpack.config.js

@@ -2,50 +2,51 @@
 
 const { statSync } = require('fs');
 const path = require('path');
-const sass = require('node-sass');
-const { buildIncludePaths, resolveGlobUrl } = require('node-sass-magic-importer/dist/toolbox');
+const sass = require('node-sass'); // eslint-disable-line import/no-unresolved
+const { buildIncludePaths, resolveGlobUrl } = require('node-sass-magic-importer/dist/toolbox'); // eslint-disable-line import/no-unresolved
 const webpack = require('webpack');
 const gitlabWebpackConfig = require('../../config/webpack.config.js');
 
+const ROOT = path.resolve(__dirname, '../../');
 const TRANSPARENT_1X1_PNG =
   'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==)';
+const SASS_INCLUDE_PATHS = [
+  'app/assets/stylesheets',
+  'ee/app/assets/stylesheets',
+  'ee/app/assets/stylesheets/_ee',
+  'node_modules',
+].map((p) => path.resolve(ROOT, p));
 
-function smartImporter(url, prev) {
+/**
+ * Custom importer for node-sass, used when LibSass encounters the `@import` directive.
+ * Doc source: https://github.com/sass/node-sass#importer--v200---experimental
+ * @param {*} url the path in import as-is, which LibSass encountered.
+ * @param {*} prev the previously resolved path.
+ * @returns {Object | null} the new import string.
+ */
+function sassSmartImporter(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 };
-  // }
-
+  // GitLab extensively uses glob-style import paths, but
+  // Sass doesn't support glob-style URLs out of the box.
+  // Here, we try and resolve the glob URL.
+  // If it resolves, we update the @import statement with the resolved path.
   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() {
@@ -61,18 +62,17 @@ const sassLoaderOptions = {
       return new sass.types.String(TRANSPARENT_1X1_PNG);
     },
   },
-  includePaths: sassIncludePaths,
-  importer: smartImporter,
+  includePaths: SASS_INCLUDE_PATHS,
+  importer: sassSmartImporter,
 };
 
-module.exports = ({ config }) => {
+module.exports = function storybookWebpackConfig({ config }) {
+  // Add any missing extensions from the main GitLab webpack 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'];
-
+  // Replace any Storybook-defined CSS loaders with our custom one.
   config.module.rules = [
     ...config.module.rules.filter((r) => !r.test.test('.css')),
     {
@@ -89,7 +89,15 @@ module.exports = ({ config }) => {
     },
   ];
 
+  // Silence webpack warnings about moment/pikaday not being able to resolve.
   config.plugins.push(new webpack.IgnorePlugin(/moment/, /pikaday/));
 
+  // Add any missing aliases from the main GitLab webpack config
+  Object.assign(config.resolve.alias, gitlabWebpackConfig.resolve.alias);
+  // The main GitLab project aliases this `icons.svg` file to app/assets/javascripts/lib/utils/icons_path.js,
+  // which depends on the existence of a global `gon` variable.
+  // By deleting the alias, imports of this path will resolve as expected.
+  delete config.resolve.alias['@gitlab/svgs/dist/icons.svg'];
+
   return config;
 };

storybook/package.json

 {
-  "name": "gitlab-storybook",
-  "version": "1.0.0",
-  "description": "",
+  "private": true,
   "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",
+  "dependencies": {},
+  "devDependencies": {
+    "@storybook/addon-a11y": "^6.2.9",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-controls": "^6.2.9",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/vue": "6.2.9",
     "node-sass": "^4.14.1",
     "node-sass-magic-importer": "^5.3.2",
     "postcss-loader": "3.0.0",