Upgrade to Storybook v7 (#992)

This is a major refactor. We're upgrading to Storybook v7, switching
from Webpack to Vite, and dropping Gulp as a build tool in favor of
simple npm scripts. There should be no real changes in the output,
aside from dropping some no-longer-needed vendor prefixes since we no
longer include Autoprefixer in our PostCSS config.

.eslintignore

@@ -1,3 +1,6 @@
-/dist
-/src/compiled
-/storybook-static
+!.storybook
+dist
+storybook-static
+src/compiled
+.temp
+*.html

.eslintrc.cjs

@@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+  },
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended', // needed to help it understand jsx syntax
+    'plugin:mdx/recommended',
+    'plugin:storybook/recommended',
+    'prettier',
+  ],
+  settings: {
+    react: {
+      version: 'detect', // needed to keep it from complaining about mdx files
+    },
+  },
+  rules: {},
+};

.gitignore

@@ -1,25 +1,34 @@
 # Build directories
 dist
+dist-ssr
 storybook-static
+.temp
 
-# Auto-generated templatized SVG files
-/src/assets/**/*.twig
-
-# Auto-generated design token stories
-/src/compiled
+# Auto-generated design token files
+src/compiled
 
 # Dependencies
 node_modules
 
-# OS debris
-.DS_Store
-
 # Local configurations
-.vscode
+*.local
 
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.nvmrc

@@ -1 +1 @@
-lts/gallium
+lts/*

.prettierignore

@@ -1,4 +1,5 @@
-/dist
-/src/compiled
-/src/developerdocs.scss
-/storybook-static
+dist
+storybook-static
+src/compiled
+src/developerdocs.scss
+.temp

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

.storybook/AutoDocsTemplate.mdx

@@ -0,0 +1,10 @@
+import { Meta, Title, Subtitle, Description, Stories } from '@storybook/blocks';
+
+{/* This is a modified version of the default AutoDocs template */}
+{/* https://storybook.js.org/docs/html/writing-docs/autodocs#write-a-custom-template */}
+
+<Meta isTemplate />
+<Title />
+<Subtitle />
+<Description />
+<Stories />

.storybook/main.js

@@ -1,10 +1,10 @@
-const { resolve } = require('path');
-
-module.exports = {
-  stories: ['../src/welcome.stories.mdx', '../src/**/*.stories.@(js|mdx)'],
-  core: {
-    builder: 'webpack5',
-  },
+/** @type { import('@storybook/html-vite').StorybookConfig } */
+const config = {
+  stories: [
+    '../src/introduction.mdx', // list first so it's the initial page
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
   addons: [
     {
       name: '@storybook/addon-essentials',
@@ -18,71 +18,12 @@ module.exports = {
     'storybook-addon-themes',
     'storybook-dark-mode',
   ],
-  webpackFinal: async (config) => {
-    const isDev = config.mode === 'development';
-    // Remove default SVG processing from default config.
-    // @see https://github.com/storybookjs/storybook/issues/5708#issuecomment-515384927
-    config.module.rules = config.module.rules.map((data) => {
-      if (/svg\|/.test(String(data.test))) {
-        data.test =
-          /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/;
-      }
-      return data;
-    });
-
-    /**
-     * For development, leave the default 'cheap-module-source-map', as it's faster and works.
-     * For the build, using the default does not work correctly, but this option appears to.
-     * @see https://webpack.js.org/configuration/devtool/
-     */
-    if (!isDev) {
-      config.devtool = 'source-map';
-    }
-
-    // Push new rules
-    config.module.rules.push(
-      {
-        test: /\.s[ca]ss$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: true,
-              // Lets CSS loader know there are two loaders left that may be
-              // handling imports.
-              // @see https://github.com/webpack-contrib/css-loader#importloaders
-              importLoaders: 2,
-            },
-          },
-          {
-            loader: 'postcss-loader',
-            options: {
-              sourceMap: true,
-            },
-          },
-          {
-            loader: 'sass-loader',
-            options: {
-              // Dart Sass performs much better than Node Sass
-              implementation: require('sass'),
-              sourceMap: true,
-              sassOptions: {
-                importer: [require('../glob-sass-importer')],
-              },
-            },
-          },
-        ],
-      },
-      {
-        // Optimize and process SVGs as React elements for use in documentation
-        test: /\.svg$/,
-        use: '@svgr/webpack',
-      }
-    );
-
-    return config;
+  framework: {
+    name: '@storybook/html-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
   },
 };
+export default config;

.storybook/mltshpTheme.js

@@ -1,5 +1,11 @@
 import { create } from '@storybook/theming/create';
 
+/**
+ * Storybook MLTSHP Theme
+ * Applies MLTSHP logo and name to Storybook UI
+ *
+ * @see https://storybook.js.org/addons/storybook-addon-themes
+ */
 const mltshpCustomization = {
   brandTitle: 'MLTSHP Patterns',
   brandUrl: 'https://mltshp.com',

.storybook/preview.js

@@ -1,35 +1,31 @@
-import breakpointTokens from '../src/compiled/js/breakpoints';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import { themes } from '../src/themes/storybook-themes';
-import { mltshpThemeLight, mltshpThemeDark } from './mltshpTheme';
+/** @type { import('@storybook/html').Preview } */
+import AutoDocsTemplate from './AutoDocsTemplate.mdx';
+import { mltshpThemeDark, mltshpThemeLight } from './mltshpTheme';
 import './preview.scss';
-const breakpoints = breakpointTokens.size.breakpoint;
+import '../src/main.scss';
 
-// Create viewports using widths defined in design tokens
-const breakpointViewports = Object.keys(breakpoints).map((key) => {
-  return {
-    name: breakpoints[key].name,
-    styles: {
-      width: breakpoints[key].value,
-      height: '100%',
+const preview = {
+  parameters: {
+    // @see https://storybook.js.org/docs/html/writing-docs/autodocs
+    docs: {
+      page: AutoDocsTemplate,
     },
-    type: 'other',
-  };
-});
-
-export const parameters = {
-  themes,
-  viewport: {
-    viewports: {
-      ...breakpointViewports,
-      ...INITIAL_VIEWPORTS,
+    // @see https://storybook.js.org/addons/storybook-dark-mode
+    darkMode: {
+      dark: { ...mltshpThemeDark },
+      light: { ...mltshpThemeLight },
+      darkClass: 't-dark',
+      lightClass: 't-light',
+      stylePreview: true,
+    },
+    // @see https://storybook.js.org/addons/storybook-addon-themes
+    themes: {
+      list: [
+        { name: 'Light', class: 't-light', color: 'white' },
+        { name: 'Dark', class: 't-dark', color: 'black' },
+      ],
     },
-  },
-  darkMode: {
-    dark: { ...mltshpThemeDark },
-    light: { ...mltshpThemeLight },
-    darkClass: 't-dark',
-    lightClass: 't-light',
-    stylePreview: true,
   },
 };
+
+export default preview;