chore: Merge support into master

.storybook/main.js

@@ -3,9 +3,12 @@ const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
 
 const modulesPath = path.resolve(__dirname, '../modules');
 const getSpecifications = require('../modules/docs/utils/get-specifications');
+const {createDocProgram} = require('../modules/docs/docgen/createDocProgram');
 
 const processDocs = process.env.SKIP_DOCGEN !== 'true';
 
+const Doc = createDocProgram();
+
 module.exports = {
   stories: [
     '../modules/docs/mdx/**/*.mdx',
@@ -64,8 +67,18 @@ module.exports = {
         include: [modulesPath],
         exclude: /examples|stories|spec|codemod|docs/,
         loaders: [
+          // loaders are run in reverse order. style-transform-loader needs to be done first
           {
             loader: path.resolve(__dirname, 'symbol-doc-loader'),
+            options: {
+              Doc,
+            },
+          },
+          {
+            loader: path.resolve(__dirname, 'style-transform-loader'),
+            options: {
+              Doc,
+            },
           },
         ],
         enforce: 'pre',

.storybook/routes.js

@@ -12,15 +12,15 @@ const routes = {
   '/components/buttons/segmented-control/': 'preview-segmented-control--basic',
   '/components/containers/card/': 'components-containers-card--basic',
   '/components/containers/side-panel/': 'preview-side-panel--basic',
-  '/components/containers/table/': 'preview-table--basic',
+  '/components/containers/table/': 'components-containers-table--basic',
   '/components/containers/tabs/': 'components-containers-tabs--basic',
   '/components/indicators/banner/': 'components-indicators-banner--basic',
   '/components/indicators/loading-dots/': 'components-indicators-loading-dots--basic',
   '/components/indicators/skeleton/': 'components-indicators-skeleton--basic',
   '/components/indicators/status-indicator/': 'preview-status-indicator--basic',
   '/components/inputs/checkbox/': 'components-inputs-checkbox--basic',
   '/components/inputs/color-input/': 'components-inputs-color-picker-color-input--basic',
-  '/components/inputs/form-field/': 'components-inputs-form-field--basic',
+  '/components/inputs/form-field/': 'preview-inputs-form-field--basic',
   '/components/inputs/radio/': 'components-inputs-radio--basic',
   '/components/inputs/select/': 'components-inputs-select--basic',
   '/components/inputs/switch/': 'components-inputs-switch--basic',

.storybook/style-transform-loader.js

@@ -0,0 +1,33 @@
+// @ts-check
+const {getOptions} = require('loader-utils');
+const {transform} = require('@workday/canvas-kit-styling-transform/testing');
+
+/** @typedef {import('webpack').loader.Loader} Loader */
+/** @typedef {import('webpack').loader.LoaderContext} LoaderContext */
+
+// Tracks files that have been processed. If a file is already processed, it
+// means the file has been updated and we need to update the Typescript program
+// so the changes are reflected in our doc output. If we don't update the TS
+// program, the docs will be processed with the outdated cache of the file
+// contents.
+const filesProcessedMap = new Map();
+
+/**
+ * @this {LoaderContext}
+ * @param {Parameters<Loader>[0]} source
+ */
+function styleTransformLoader(source) {
+  const {
+    /** @type {any} */
+    Doc,
+  } = getOptions(this);
+
+  if (filesProcessedMap.has(this.resourcePath)) {
+    Doc.update();
+  }
+  filesProcessedMap.set(this.resourcePath, true);
+
+  return transform(Doc.program, this.resourcePath);
+}
+
+module.exports = styleTransformLoader;

.storybook/symbol-doc-loader.js

@@ -1,32 +1,23 @@
 // @ts-check
-const {createDocProgram} = require('../modules/docs/docgen/createDocProgram');
 const routes = require('./routes');
+const {getOptions} = require('loader-utils');
 
 const routeKeys = Object.keys(routes);
 
-// Tracks files that have been processed. If a file is already processed, it
-// means the file has been updated and we need to update the Typescript program
-// so the changes are reflected in our doc output. If we don't update the TS
-// program, the docs will be processed with the outdated cache of the file
-// contents.
-const filesProcessedMap = new Map();
-
 /** @typedef {import('webpack').loader.Loader} Loader */
 /** @typedef {import('webpack').loader.LoaderContext} LoaderContext */
 
-let {parser, update} = createDocProgram();
-
 /**
  * @this {LoaderContext}
  * @param {Parameters<Loader>[0]} source
  */
 function symbolDocLoader(source) {
-  if (filesProcessedMap.has(this.resourcePath)) {
-    parser = update();
-  }
-  filesProcessedMap.set(this.resourcePath, true);
+  const {
+    /** @type {any} */
+    Doc,
+  } = getOptions(this);
 
-  const docs = parser.getExportedSymbols(this.resourcePath);
+  const docs = Doc.parser.getExportedSymbols(this.resourcePath);
 
   return (
     source +