chore: Merge prerelease/minor into prerelease/major

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

cypress/integration/RadioPreview.spec.ts

@@ -68,7 +68,7 @@ describe('Radio Preview', () => {
     });
 
     it(`the "Deep dish" radio button should have an aria-describedby`, () => {
-      cy.findByLabelText('Deep dish').should('have.attr', 'aria-describedby', 'hint-alert');
+      cy.findByLabelText('Deep dish').should('have.attr', 'aria-describedby', 'hint-hint-alert');
     });
   });
 });

modules/codemod/index.js

@@ -4,7 +4,13 @@
 const {spawn} = require('child_process');
 const chalk = require('chalk');
 
-const {_: commands, path, ignoreConfig, ignorePattern, verbose} = require('yargs')
+const {
+  _: commands,
+  path,
+  ignoreConfig,
+  ignorePattern,
+  verbose,
+} = require('yargs')
   .scriptName('canvas-kit-codemod')
   .usage(chalk.bold.blueBright('$0 <transform> [path]'))
   .options({
@@ -61,6 +67,13 @@ const {_: commands, path, ignoreConfig, ignorePattern, verbose} = require('yargs
       describe: chalk.gray('The path to execute the transform in (recursively).'),
     });
   })
+  .command('v11 [path]', chalk.gray('Canvas Kit v10 > v11 upgrade transform'), yargs => {
+    yargs.positional('path', {
+      type: 'string',
+      default: '.',
+      describe: chalk.gray('The path to execute the transform in (recursively).'),
+    });
+  })
   .demandCommand(1, chalk.red.bold('You must provide a transform to apply.'))
   .strictCommands()
   .fail((msg, err, yargs) => {
@@ -84,9 +97,10 @@ const ignoreConfigArg = ignoreConfig ? `--ignore-config=${ignoreConfig}` : '';
 console.log(ignorePattern);
 
 console.log(chalk.blueBright(`\nApplying ${transform} transform to '${path}'\n`));
-const args = `-t ${__dirname}/dist/es6/${transform} ${path} --parser tsx --extensions js,jsx,ts,tsx ${ignoreConfigArg} --ignore-pattern=${ignorePattern} --verbose=${verbose}`.split(
-  ' '
-);
+const args =
+  `-t ${__dirname}/dist/es6/${transform} ${path} --parser tsx --extensions js,jsx,ts,tsx ${ignoreConfigArg} --ignore-pattern=${ignorePattern} --verbose=${verbose}`.split(
+    ' '
+  );
 
 const proc = spawn(`jscodeshift`, args);
 

modules/codemod/lib/v11/index.ts

@@ -0,0 +1,16 @@
+import {Transform} from 'jscodeshift';
+
+import renameHasErrorPreview from './renameHasErrorPreview';
+import replaceStylesIconProp from './replaceStylesIconProp';
+
+const transform: Transform = (file, api, options) => {
+  // These will run in order. If your transform depends on others, place yours after dependent transforms
+  const fixes = [
+    // add codemods here
+    renameHasErrorPreview,
+    replaceStylesIconProp,
+  ];
+  return fixes.reduce((source, fix) => fix({...file, source}, api, options) as string, file.source);
+};
+
+export default transform;

modules/codemod/lib/v11/renameHasErrorPreview.ts

@@ -0,0 +1,66 @@
+import {API, FileInfo, Options, JSXOpeningElement, JSXIdentifier} from 'jscodeshift';
+import {hasImportSpecifiers} from '../v6/utils';
+import {getImportRenameMap} from './utils/getImportRenameMap';
+const textInputPackage = '@workday/canvas-kit-preview-react/text-input';
+const textAreaPackage = '@workday/canvas-kit-preview-react/text-area';
+const formFieldPackage = '@workday/canvas-kit-preview-react/form-field';
+const packages = [textInputPackage, textAreaPackage, formFieldPackage];
+const packageImports = ['TextInput', 'FormField', 'TextArea'];
+
+export default function transformer(file: FileInfo, api: API, options: Options) {
+  const j = api.jscodeshift;
+
+  const root = j(file.source);
+
+  // exit if the named imports aren't found
+  if (!hasImportSpecifiers(api, root, packages, packageImports)) {
+    return file.source;
+  }
+
+  // getImportRenameMap utility will tell us if the file containsCanvasImports
+  // and give us an importMap to track what identifiers we need to update
+  const {importMap, styledMap} = getImportRenameMap(j, root, '@workday/canvas-kit-preview-react');
+
+  root
+    .find(j.JSXOpeningElement, (value: JSXOpeningElement) => {
+      const isCorrectImport = Object.entries(importMap).some(
+        ([original, imported]) =>
+          imported === (value.name as JSXIdentifier).name && packageImports.includes(original)
+      );
+
+      const isCorrectStyled = Object.entries(styledMap).some(
+        ([original, styled]) =>
+          styled === (value.name as JSXIdentifier).name && packageImports.includes(original)
+      );
+
+      return isCorrectImport || isCorrectStyled;
+    })
+    .forEach(nodePath => {
+      nodePath.node.attributes?.forEach(attr => {
+        if (attr.type === 'JSXAttribute') {
+          if (attr.name.name === 'hasError') {
+            attr.name.name = 'error';
+            if (attr.value && attr.value.type === 'JSXExpressionContainer') {
+              const value = attr.value.expression as any;
+
+              if (value.type === 'BooleanLiteral') {
+                if (value.value) {
+                  attr.value = j.stringLiteral('error');
+                } else {
+                  attr.value = j.jsxExpressionContainer(j.identifier('undefined'));
+                }
+              } else if (value.type === 'Identifier') {
+                attr.value.expression = j.conditionalExpression(
+                  j.identifier(value.name),
+                  j.stringLiteral('error'),
+                  j.identifier('undefined')
+                );
+              }
+            }
+          }
+        }
+      });
+    });
+
+  return root.toSource();
+}

modules/codemod/lib/v11/replaceStylesIconProp.ts

@@ -0,0 +1,52 @@
+import {API, FileInfo, Options, JSXOpeningElement, JSXIdentifier} from 'jscodeshift';
+import {hasImportSpecifiers} from '../v6/utils';
+import {getImportRenameMap} from './utils/getImportRenameMap';
+
+const packages = ['@workday/canvas-kit-react', '@workday/canvas-kit-react/icon'];
+const packageImports = ['Svg', 'SystemIcon', 'AccentIcon'];
+
+export default function transformer(file: FileInfo, api: API, options: Options) {
+  const j = api.jscodeshift;
+
+  const root = j(file.source);
+
+  // exit if the named imports aren't found
+  if (!hasImportSpecifiers(api, root, packages, packageImports)) {
+    return file.source;
+  }
+
+  // getImportRenameMap utility will tell us if the file containsCanvasImports
+  // and give us an importMap to track what identifiers we need to update
+  const {importMap, styledMap} = getImportRenameMap(
+    j,
+    root,
+    '@workday/canvas-kit-react',
+    '@workday/canvas-kit-react/icon'
+  );
+
+  root
+    .find(j.JSXOpeningElement, (value: JSXOpeningElement) => {
+      const isCorrectImport = Object.entries(importMap).some(
+        ([original, imported]) =>
+          imported === (value.name as JSXIdentifier).name && packageImports.includes(original)
+      );
+
+      const isCorrectStyled = Object.entries(styledMap).some(
+        ([original, styled]) =>
+          styled === (value.name as JSXIdentifier).name && packageImports.includes(original)
+      );
+
+      return isCorrectImport || isCorrectStyled;
+    })
+    .forEach(nodePath => {
+      nodePath.node.attributes?.forEach(attr => {
+        if (attr.type === 'JSXAttribute') {
+          if (attr.name.name === 'styles') {
+            attr.name.name = 'cs';
+          }
+        }
+      });
+    });
+
+  return root.toSource();
+}

modules/codemod/lib/v11/spec/expectTransformFactory.ts

@@ -0,0 +1,6 @@
+import {runInlineTest} from 'jscodeshift/dist/testUtils';
+
+export const expectTransformFactory =
+  (fn: Function) => (input: string, expected: string, options?: Record<string, any>) => {
+    return runInlineTest(fn, options, {source: input}, expected, {parser: 'tsx'});
+  };