@workday/canvas-kit-codemod 14.1.0-1290-next.0 → 14.1.0-1294-next.0

package/dist/es6/v14.1/index.d.ts

@@ -0,0 +1,4 @@
+import { Transform } from 'jscodeshift';
+declare const transform: Transform;
+export default transform;
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/v14.1/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/v14.1/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAGtC,QAAA,MAAM,SAAS,EAAE,SAIhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/es6/v14.1/index.js

@@ -0,0 +1,7 @@
+import replaceDeprecatedStyleProps from './replaceDeprecatedStyleProps';
+const transform = (file, api, options) => {
+    // These will run in order. If your transform depends on others, place yours after dependent transforms
+    const fixes = [replaceDeprecatedStyleProps];
+    return fixes.reduce((source, fix) => fix({ ...file, source }, api, options), file.source);
+};
+export default transform;

package/dist/es6/v14.1/replaceDeprecatedStyleProps.d.ts

@@ -0,0 +1,3 @@
+import { API, FileInfo, Options } from 'jscodeshift';
+export default function transformer(file: FileInfo, api: API, options: Options): string;
+//# sourceMappingURL=replaceDeprecatedStyleProps.d.ts.map

package/dist/es6/v14.1/replaceDeprecatedStyleProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"replaceDeprecatedStyleProps.d.ts","sourceRoot":"","sources":["../../../lib/v14.1/replaceDeprecatedStyleProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAE,QAAQ,EAAc,OAAO,EAAC,MAAM,aAAa,CAAC;AAmG/D,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,UA6I7E"}

package/dist/es6/v14.1/replaceDeprecatedStyleProps.js

@@ -0,0 +1,159 @@
+import { getImportRenameMap } from './utils/getImportRenameMap';
+import { hasImportSpecifiers } from '../v6/utils';
+import { backgroundStyleFnConfigs, borderStyleFnConfigs, colorStyleFnConfigs, depthStyleFnConfigs, flexStyleFnConfigs, flexItemStyleFnConfigs, gridStyleFnConfigs, gridItemStyleFnConfigs, layoutStyleFnConfigs, otherStyleFnConfigs, positionStyleFnConfigs, spaceStyleFnConfigs, textStyleFnConfigs, } from '@workday/canvas-kit-react/layout';
+import { getToken } from './utils/getToken';
+const mainPackage = '@workday/canvas-kit-react';
+const previewPackage = '@workday/canvas-kit-preview-react';
+const labsPackage = '@workday/canvas-kit-labs-react';
+const packages = [mainPackage, previewPackage, labsPackage];
+const allProps = [
+    ...backgroundStyleFnConfigs,
+    ...borderStyleFnConfigs,
+    ...colorStyleFnConfigs,
+    ...depthStyleFnConfigs,
+    ...flexStyleFnConfigs,
+    ...flexItemStyleFnConfigs,
+    ...gridStyleFnConfigs,
+    ...gridItemStyleFnConfigs,
+    ...layoutStyleFnConfigs,
+    ...otherStyleFnConfigs,
+    ...positionStyleFnConfigs,
+    ...spaceStyleFnConfigs,
+    ...textStyleFnConfigs,
+];
+const ignoredProps = {
+    Avatar: ['color', 'backgroundColor'],
+    Graphic: ['width', 'height'],
+    Pill: ['maxWidth'],
+    'Pill.Count': ['backgroundColor', 'borderColor'],
+    'Breadcrumbs.Item': ['maxWidth'],
+    'Breadcrumbs.Link': ['maxWidth'],
+    BaseButton: [
+        'background',
+        'border',
+        'boxShadowInner',
+        'boxShadowOuter',
+        'opacity',
+        'borderRadius',
+    ],
+    ColorSwatch: ['color'],
+    AccentIcon: ['color'],
+    SVG: ['width', 'height'],
+    SystemIcon: ['background', 'color', 'fill'],
+    'Menu.Card': ['minWidth', 'maxHeight'],
+    'Popup.Card': ['maxHeight'],
+    'Skeleton.Header': ['width', 'height', 'backgroundColor'],
+    'Skeleton.Shape': ['width', 'height', 'backgroundColor', 'borderRadius'],
+    'Skeleton.Text': ['backgroundColor'],
+    'InputGroup.InnerStart': [
+        'width',
+        'height',
+        'insetInlineStart',
+        'insetInlineEnd',
+        'pointerEvents',
+    ],
+    'InputGroup.InnerEnd': ['width', 'height', 'insetInlineStart', 'insetInlineEnd', 'pointerEvents'],
+    TextInput: ['width'],
+};
+const checkName = (name, { importMap, styledMap }) => {
+    return Object.values(importMap).includes(name) || Object.values(styledMap).includes(name);
+};
+const getImportedName = (name, { importMap, styledMap }) => {
+    const [importedName] = Object.entries(importMap).find(([_, imported]) => imported === name) ||
+        Object.entries(styledMap).find(([_, styled]) => styled === name) ||
+        [];
+    return importedName || name;
+};
+const getPropConfig = (propName) => {
+    return allProps.find(prop => prop.name === propName);
+};
+export default function transformer(file, api, options) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    if (!hasImportSpecifiers(api, root, packages, [])) {
+        return file.source;
+    }
+    const { importMap, styledMap } = getImportRenameMap(j, root, packages);
+    root
+        .find(j.JSXElement, (value) => {
+        var _a;
+        return ((value.openingElement.name.type === 'JSXIdentifier' &&
+            checkName(value.openingElement.name.name, { importMap, styledMap })) ||
+            (value.openingElement.name.type === 'JSXMemberExpression' &&
+                value.openingElement.name.object.type === 'JSXIdentifier' &&
+                checkName(value.openingElement.name.object.name, { importMap, styledMap }))) &&
+            !!((_a = value.openingElement.attributes) === null || _a === void 0 ? void 0 : _a.length);
+    })
+        .forEach(nodePath => {
+        var _a, _b, _c, _d;
+        const csProp = (_a = nodePath.node.openingElement.attributes) === null || _a === void 0 ? void 0 : _a.find(attr => attr.type === 'JSXAttribute' &&
+            attr.name.type === 'JSXIdentifier' &&
+            attr.name.name === 'cs');
+        const asProp = (_b = nodePath.node.openingElement.attributes) === null || _b === void 0 ? void 0 : _b.find(attr => attr.type === 'JSXAttribute' &&
+            attr.name.type === 'JSXIdentifier' &&
+            attr.name.name === 'as');
+        let csPropValue = {};
+        const stringifiedName = (nodePath.node.openingElement.name.type === 'JSXMemberExpression' &&
+            nodePath.node.openingElement.name.object.type === 'JSXIdentifier' &&
+            nodePath.node.openingElement.name.property.type === 'JSXIdentifier'
+            ? `${getImportedName(nodePath.node.openingElement.name.object.name, {
+                importMap,
+                styledMap,
+            })}.${nodePath.node.openingElement.name.property.name}`
+            : nodePath.node.openingElement.name.type === 'JSXIdentifier' &&
+                getImportedName(nodePath.node.openingElement.name.name, { importMap, styledMap }));
+        nodePath.node.openingElement.attributes = (_c = nodePath.node.openingElement.attributes) === null || _c === void 0 ? void 0 : _c.filter(attr => {
+            var _a, _b, _c, _d;
+            if (attr.type === 'JSXAttribute' &&
+                attr.name.type === 'JSXIdentifier' &&
+                getPropConfig(attr.name.name)) {
+                if (((_a = ignoredProps[stringifiedName]) === null || _a === void 0 ? void 0 : _a.includes(attr.name.name)) ||
+                    (asProp &&
+                        asProp.type === 'JSXAttribute' &&
+                        asProp.value &&
+                        ((asProp.value.type === 'JSXExpressionContainer' &&
+                            asProp.value.expression.type === 'Identifier' &&
+                            ((_b = ignoredProps[getImportedName(asProp.value.expression.name, {
+                                importMap,
+                                styledMap,
+                            })]) === null || _b === void 0 ? void 0 : _b.includes(attr.name.name))) ||
+                            (asProp.value.type === 'JSXExpressionContainer' &&
+                                asProp.value.expression.type === 'MemberExpression' &&
+                                asProp.value.expression.object.type === 'Identifier' &&
+                                asProp.value.expression.property.type === 'Identifier' &&
+                                ((_c = ignoredProps[`${getImportedName(asProp.value.expression.object.name, {
+                                    importMap,
+                                    styledMap,
+                                })}.${asProp.value.expression.property.name}`]) === null || _c === void 0 ? void 0 : _c.includes(attr.name.name)))))) {
+                    return true;
+                }
+                const { properties, system } = getPropConfig(attr.name.name);
+                if (csProp &&
+                    csProp.type === 'JSXAttribute' &&
+                    csProp.value &&
+                    csProp.value.type === 'JSXExpressionContainer' &&
+                    csProp.value.expression.type === 'ObjectExpression') {
+                    csProp.value.expression.properties.push(...properties.map((prop) => j.objectProperty(j.identifier(prop), getToken({ j, root }, { system, prop, value: attr.value }))));
+                }
+                if (!csProp && nodePath.node.openingElement.attributes) {
+                    const value = ((_d = attr.value) === null || _d === void 0 ? void 0 : _d.type) === 'JSXExpressionContainer' ? attr.value.expression : attr.value;
+                    csPropValue = {
+                        ...csPropValue,
+                        ...properties.reduce((acc, prop) => {
+                            return {
+                                ...acc,
+                                [prop]: getToken({ j, root }, { system, prop, value }),
+                            };
+                        }, {}),
+                    };
+                }
+                return false;
+            }
+            return true;
+        });
+        if (Object.keys(csPropValue).length) {
+            (_d = nodePath.node.openingElement.attributes) === null || _d === void 0 ? void 0 : _d.push(j.jsxAttribute(j.jsxIdentifier('cs'), j.jsxExpressionContainer(j.objectExpression(Object.entries(csPropValue).map(([key, value]) => j.objectProperty(j.identifier(key), value))))));
+        }
+    });
+    return root.toSource();
+}

package/dist/es6/v14.1/utils/getImportRenameMap.d.ts

@@ -0,0 +1,7 @@
+import { Collection, JSCodeshift } from 'jscodeshift';
+export declare function getImportRenameMap(j: JSCodeshift, root: Collection<any>, packages: string[]): {
+    containsCanvasImports: boolean;
+    importMap: Record<string, string>;
+    styledMap: Record<string, string>;
+};
+//# sourceMappingURL=getImportRenameMap.d.ts.map

package/dist/es6/v14.1/utils/getImportRenameMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getImportRenameMap.d.ts","sourceRoot":"","sources":["../../../../lib/v14.1/utils/getImportRenameMap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,WAAW,EAAiB,MAAM,aAAa,CAAC;AAEpE,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE;;;;EAoD3F"}

package/dist/es6/v14.1/utils/getImportRenameMap.js

@@ -0,0 +1,43 @@
+export function getImportRenameMap(j, root, packages) {
+    let containsCanvasImports = false;
+    // build import name remapping - in case someone renamed imports...
+    // i.e. `import { IconButton as StyledIconButton } ...`
+    const importMap = {};
+    const styledMap = {};
+    root.find(j.ImportDeclaration, node => {
+        // imports our module
+        const value = node.source.value;
+        if (typeof value === 'string' && packages.some(p => value.startsWith(p))) {
+            containsCanvasImports = true;
+            (node.specifiers || []).forEach(specifier => {
+                if (specifier.type === 'ImportSpecifier') {
+                    if (!specifier.local || specifier.local.name === specifier.imported.name) {
+                        importMap[specifier.imported.name] = specifier.imported.name;
+                    }
+                    else {
+                        importMap[specifier.imported.name] = specifier.local.name;
+                    }
+                }
+            });
+        }
+        return false;
+    });
+    root
+        .find(j.CallExpression, (node) => node.callee.type === 'Identifier' &&
+        node.callee.name === 'styled' &&
+        node.arguments[0].type === 'Identifier')
+        .forEach(nodePath => {
+        // const StyledName = styled(OriginalName)({})
+        // const StyledName = styled(OriginalName)`` // Tagged template
+        if ((nodePath.parent.value.type === 'CallExpression' ||
+            nodePath.parent.value.type === 'TaggedTemplateExpression') &&
+            nodePath.parent.parent.value.type === 'VariableDeclarator' &&
+            nodePath.parent.parent.value.id.type === 'Identifier') {
+            const styledName = nodePath.parent.parent.value.id.name;
+            if (nodePath.value.arguments[0].type === 'Identifier') {
+                styledMap[nodePath.value.arguments[0].name] = styledName;
+            }
+        }
+    });
+    return { containsCanvasImports, importMap, styledMap };
+}

package/dist/es6/v14.1/utils/getToken.d.ts

@@ -0,0 +1,6 @@
+export declare const getToken: ({ j, root }: any, { system, prop, value }: {
+    system: string;
+    prop: string;
+    value: any;
+}) => any;
+//# sourceMappingURL=getToken.d.ts.map

package/dist/es6/v14.1/utils/getToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getToken.d.ts","sourceRoot":"","sources":["../../../../lib/v14.1/utils/getToken.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,QAAQ,gBACR,GAAG;YACkB,MAAM;UAAQ,MAAM;WAAS,GAAG;SAmCjE,CAAC"}

package/dist/es6/v14.1/utils/getToken.js

@@ -0,0 +1,31 @@
+import { tokensMap } from './tokensMap';
+import { varToMemberExpression } from '../../v13.2/utils/varToMemberExpression';
+import { systemColors } from '../../v13.2/mapping';
+import { addMissingImports } from '../../v13.2/utils';
+const createSystemToken = (key, system) => key ? `system.${system}${isNaN(key) ? `.${key}` : `[${key}]`}` : null;
+export const getToken = ({ j, root }, { system, prop, value }) => {
+    var _a, _b;
+    if (system in tokensMap) {
+        const tokens = tokensMap[system];
+        let token = '';
+        if (system === 'color') {
+            const tokens = (_a = Object.entries(systemColors).find(([blockKey]) => blockKey.split(',').some(prop => prop === prop))) === null || _a === void 0 ? void 0 : _a[1];
+            const key = tokens === null || tokens === void 0 ? void 0 : tokens[value.value];
+            token = key || `base.${value.value}`;
+        }
+        else {
+            const key = tokens[((_b = value === null || value === void 0 ? void 0 : value.value) !== null && _b !== void 0 ? _b : value)];
+            token = createSystemToken(key, system) || '';
+        }
+        if (token) {
+            if (token.startsWith('system')) {
+                addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
+            }
+            else if (token.startsWith('base')) {
+                addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['base'] });
+            }
+            return varToMemberExpression(j, token);
+        }
+    }
+    return value.type === 'JSXExpressionContainer' ? value.expression : value;
+};

package/dist/es6/v14.1/utils/tokensMap.d.ts

@@ -0,0 +1,31 @@
+export declare const tokensMap: {
+    space: {
+        zero: string;
+        xxxs: string;
+        xxs: string;
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        xxl: string;
+        xxxl: string;
+    };
+    shape: {
+        zero: string;
+        s: string;
+        m: string;
+        l: string;
+        circle: string;
+    };
+    depth: {
+        1: number;
+        2: number;
+        3: number;
+        4: number;
+        5: number;
+        6: number;
+    };
+    color: {};
+};
+//# sourceMappingURL=tokensMap.d.ts.map

package/dist/es6/v14.1/utils/tokensMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokensMap.d.ts","sourceRoot":"","sources":["../../../../lib/v14.1/utils/tokensMap.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBrB,CAAC"}

package/dist/es6/v14.1/utils/tokensMap.js

@@ -0,0 +1,18 @@
+import { mapping } from '../../v13.2/mapping/index';
+export const tokensMap = {
+    space: {
+        ...mapping.space.keys,
+    },
+    shape: {
+        ...mapping.borderRadius.keys,
+    },
+    depth: {
+        1: 1,
+        2: 2,
+        3: 3,
+        4: 4,
+        5: 5,
+        6: 6,
+    },
+    color: {},
+};

package/index.js

@@ -109,6 +109,17 @@ const {
       describe: chalk.gray('The path to execute the transform in (recursively).'),
     });
   })
+  .command(
+    'v14.1 [path]',
+    chalk.gray('Canvas Kit v14.1 upgrade transform (style props deprecation)'),
+    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) => {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@workday/canvas-kit-codemod",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
-  "version": "14.1.0-1290-next.0",
+  "version": "14.1.0-1294-next.0",
   "description": "A collection of codemods for use on Workday Canvas Kit packages.",
   "main": "dist/es6/index.js",
   "sideEffects": false,
@@ -46,5 +46,5 @@
   "resolutions": {
     "recast": "0.20.4"
   },
-  "gitHead": "35fe5190e75f7f7a8e70c8d1f9f14e5e4673d191"
+  "gitHead": "f930e8fc181a26555c35e6e081cf4e1405f4c6fa"
 }