@atlaskit/codemod-cli 0.13.1 → 0.13.2

package/dist/es2019/presets/theme-to-design-tokens/theme-to-design-tokens.js

@@ -1,21 +1,16 @@
 /* eslint-disable no-console */
 
-import { isDecendantOfToken, isDecendantOfType } from './utils/ast';
+import { isDecendantOfType, hasImportDeclaration } from '@codeshift/utils';
+import { isDecendantOfToken, isParentOfToken } from './utils/ast';
 import { cleanMeta, getMetaFromAncestors } from './utils/ast-meta';
 import { includesHardCodedColor, isHardCodedColor, isLegacyColor, isLegacyNamedColor } from './utils/color';
 import Search from './utils/fuzzy-search';
 import { legacyColorMetaMap } from './utils/legacy-colors';
 import { tokens } from './utils/tokens';
-const search = Search(tokens, false);
-function hasImportDeclaration(j, source, sourcePath) {
-  return !!source.find(j.ImportDeclaration).filter(path => path.node.source.value === sourcePath).length;
-}
-function hasImportSpecifier(j, source, specifier, sourcePath) {
-  return !!source.find(j.ImportDeclaration).filter(path => path.node.source.value === sourcePath).find(j.ImportSpecifier, {
-    local: {
-      name: specifier
-    }
-  }).length;
+const kebabize = str => str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
+function isBoldColor(color) {
+  const number = parseInt(color.replace(/^./, ''), 10);
+  return number > 300;
 }
 function insertTokenImport(j, source) {
   if (hasImportDeclaration(j, source, '@atlaskit/tokens')) {
@@ -28,9 +23,100 @@ function buildToken(j, tokenId, node) {
   const callExpr = j.callExpression(j.identifier('token'), [j.stringLiteral(tokenId), node].filter(Boolean));
   return callExpr;
 }
-function getTokenFromNode(j, path, baseMeta = []) {
-  const foundMeta = getMetaFromAncestors(j, path);
-  const meta = cleanMeta([...foundMeta, ...baseMeta]);
+function getColorFromIdentifier(expression) {
+  let value = '';
+  if (expression.type === 'Identifier') {
+    value = expression.name;
+  }
+  if (expression.type === 'StringLiteral') {
+    value = expression.value;
+  }
+  if (expression.type === 'MemberExpression' && expression.object.name === 'colors' && isLegacyColor(expression.property.name)) {
+    value = expression.property.name;
+  }
+  return value;
+}
+function getTokenFromNode(j, path, value, propertyName) {
+  const valueMeta = cleanMeta(legacyColorMetaMap[value] || []);
+  const ancestorMeta = cleanMeta([...getMetaFromAncestors(j, path), ...kebabize(propertyName).split('-')] || []);
+  let property = cleanMeta([kebabize(propertyName)])[0];
+
+  // Attempt to find a property from ancestors if one is not found
+  if (!property || !['border', 'icon', 'background', 'text'].includes(property)) {
+    if (ancestorMeta.includes('border')) {
+      property = 'border';
+    }
+    if (ancestorMeta.includes('icon')) {
+      property = 'icon';
+    }
+    if (ancestorMeta.includes('background')) {
+      property = 'background';
+    }
+    if (ancestorMeta.includes('color')) {
+      property = 'text';
+    }
+  }
+  let meta = [];
+  let possibleTokens = tokens;
+  if (property === 'text') {
+    possibleTokens = tokens.filter(token => token.includes('.text'));
+    if (valueMeta.includes('neutral')) {
+      meta.push('color', 'text');
+    }
+    if (valueMeta.includes('neutral') && (value === 'N400' || value === 'N500')) {
+      meta.push('color', 'text', 'subtle');
+    }
+    if (valueMeta.includes('neutral') && (value === 'N80' || value === 'N100' || value === 'N200' || value === 'N300' || value === 'N400')) {
+      meta.push('color', 'text', 'subtlest');
+    }
+
+    // handle non-neutrals
+    if (!valueMeta.includes('neutral')) {
+      meta.push('color', ...ancestorMeta, ...valueMeta);
+    }
+  }
+  if (property === 'background' || property === 'background-color') {
+    if (ancestorMeta.includes('disabled')) {
+      // disabled backgrounds
+      meta.push(property, ...ancestorMeta);
+    } else if (
+    // Surfaces
+    valueMeta.includes('neutral') && value !== 'N100' && value !== 'N200' && value !== 'N300' && value !== 'N400' && value !== 'N500' && value !== 'N600' && value !== 'N700' && value !== 'N800') {
+      meta.push('surface', ...ancestorMeta);
+    } else if (value.includes('N0')) {
+      // default surface
+      meta.push('elevation', 'surface');
+    } else if (valueMeta.includes('neutral') && isBoldColor(value)) {
+      // bold netural backgrounds
+      meta.push('background', 'neutral', 'bold');
+    } else if (valueMeta.includes('neutral')) {
+      // netural backgrounds
+      meta.push('background', 'neutral');
+    }
+  }
+  if (property === 'border' || property === 'border-color' || property === 'border-left' || property === 'border-right' || property === 'border-top' || property === 'border-bottom' || property === 'outline' || property === 'outline-color') {
+    possibleTokens = tokens.filter(token => token.includes('.border') || token.includes('.focus'));
+    if (valueMeta.includes('neutral')) {
+      // standard netural boarder
+      meta.push('color', 'border', ...ancestorMeta);
+    } else {
+      meta.push('border', ...valueMeta, ...ancestorMeta);
+    }
+  }
+  if (ancestorMeta.includes('icon')) {
+    possibleTokens = tokens.filter(token => token.includes('.icon'));
+    if (ancestorMeta.includes('disabled')) {
+      // disabled backgrounds
+      meta.push('disabled');
+    }
+    meta.push('color', 'icon', ...valueMeta);
+  }
+
+  // Fallback if guided behavior yields nothing
+  if (meta.length === 0) {
+    meta.push(property, ...valueMeta, ...ancestorMeta);
+  }
+  const search = Search(possibleTokens, false);
   const results = search.get(meta.join(' '));
   let tokenId = ['MISSING_TOKEN'];
   if (results) {
@@ -38,53 +124,95 @@ function getTokenFromNode(j, path, baseMeta = []) {
   }
   return tokenId[0];
 }
+function parseCSSPropertyName(cssString) {
+  const lastColonIndex = cssString.lastIndexOf(':');
+  const propertyNameEndIndex = Math.max(cssString.lastIndexOf(';', lastColonIndex), cssString.lastIndexOf(' ', lastColonIndex));
+  return cssString.slice(propertyNameEndIndex + 1, lastColonIndex).trim();
+}
 export default function transformer(file, api, debug = false) {
   const j = api.jscodeshift;
   const source = j(file.source);
   let transformed = false;
-  source
-  // Handle colors.N100
-  .find(j.MemberExpression).filter(path => {
-    return path.value.object.type === 'Identifier' && path.value.object.name === 'colors' && path.value.property.type === 'Identifier' && isLegacyColor(path.value.property.name);
-  }).filter(path => !isDecendantOfToken(j, path)).forEach(path => {
-    debug && console.log('file:', file.path);
-    insertTokenImport(j, source);
-    const key = path.value.property.type === 'Identifier' ? path.value.property.name : undefined;
-    const colorMeta = legacyColorMetaMap[key] || [];
-    const tokenId = getTokenFromNode(j, path, colorMeta);
-    j(path).replaceWith(buildToken(j, tokenId, path.value));
-    transformed = true;
-  });
-  source.find(j.ObjectProperty).filter(path => path.value.value.type === 'Identifier' && (isLegacyColor(path.value.value.name) || isLegacyNamedColor(path.value.value.name))).filter(path => hasImportSpecifier(j, source, path.value.value.type === 'Identifier' ? path.value.value.name : '', '@atlaskit/theme') || hasImportSpecifier(j, source, path.value.value.type === 'Identifier' ? path.value.value.name : '', '@atlaskit/theme/colors')).filter(path => !isDecendantOfToken(j, path.value.value)).forEach(path => {
-    const valuePath = path.get('value');
-    debug && console.log('file:', file.path);
+
+  // Objects
+  source.find(j.ObjectProperty).forEach(path => {
+    if (path.value.value.type === 'ObjectExpression') {
+      return;
+    }
+
+    // Avoid transforming objects that are default arguments
+    if (path.parent.parent.value.type === 'ArrowFunctionExpression' || path.parent.parent.value.type === 'FunctionDeclaration') {
+      return;
+    }
+    if (isParentOfToken(j, path.value.value)) {
+      return;
+    }
+    const value = getColorFromIdentifier(path.value.value);
+    if (!value || !includesHardCodedColor(value) && !isHardCodedColor(value) && !isLegacyColor(value) && !isLegacyNamedColor(value)) {
+      return;
+    }
+    let key;
+    if (path.value.key.type === 'NumericLiteral' || path.value.key.type === 'StringLiteral') {
+      key = path.value.key.value.toString();
+    }
+    if (path.value.key.type === 'Identifier') {
+      key = path.value.key.name;
+    }
+
+    // Key is a node type we do not support
+    if (!key) {
+      return;
+    }
+    const tokenId = getTokenFromNode(j, path, value, key);
     insertTokenImport(j, source);
-    const colorMeta = legacyColorMetaMap[valuePath.name] || [];
-    const tokenId = getTokenFromNode(j, valuePath, colorMeta);
-    j(path).replaceWith(j.objectProperty(path.value.key, buildToken(j, tokenId, valuePath.value)));
+    j(path).replaceWith(j.objectProperty(path.value.key, buildToken(j, tokenId, path.value.value)));
     transformed = true;
   });
-  source.find(j.Identifier).filter(path => isLegacyColor(path.value.name) || isLegacyNamedColor(path.value.name)).filter(path => hasImportSpecifier(j, source, path.value.name, '@atlaskit/theme') || hasImportSpecifier(j, source, path.value.name, '@atlaskit/theme/colors')).filter(path => !['ImportSpecifier', 'MemberExpression', 'ObjectProperty'].includes(path.parentPath.value.type)).filter(path => !isDecendantOfToken(j, path)).forEach(path => {
-    debug && console.log('file:', file.path);
-    insertTokenImport(j, source);
-    const colorMeta = legacyColorMetaMap[path.value.name] || [];
-    const tokenId = getTokenFromNode(j, path, colorMeta);
-    j(path).replaceWith(buildToken(j, tokenId, path.value));
+
+  // Template literals
+  source.find(j.TemplateLiteral).forEach(path => {
+    function replaceTemplateLiteralExpressions(j, expression, index) {
+      if (isDecendantOfToken(j, expression)) {
+        return;
+      }
+      if (index >= path.value.quasis.length) {
+        return;
+      }
+      const quasi = path.value.quasis[index];
+      const value = getColorFromIdentifier(expression.value);
+      if (!value || !includesHardCodedColor(value) && !isHardCodedColor(value) && !isLegacyColor(value) && !isLegacyNamedColor(value)) {
+        return;
+      }
+      const tokenId = getTokenFromNode(j, expression, value, parseCSSPropertyName(quasi.value.cooked || ''));
+      insertTokenImport(j, source);
+      expression.replace(buildToken(j, tokenId, expression.value));
+    }
+    j(path).find(j.Identifier).filter(expression => !isDecendantOfType(j, expression, j.MemberExpression)).forEach((expression, i) => replaceTemplateLiteralExpressions(j, expression, i));
+    j(path).find(j.MemberExpression).forEach((expression, i) => replaceTemplateLiteralExpressions(j, expression, i));
     transformed = true;
   });
-  source.find(j.Literal).filter(path => typeof path.value.value === 'string' && (includesHardCodedColor(path.value.value) || isHardCodedColor(path.value.value))).filter(path => !isDecendantOfToken(j, path)).forEach(path => {
+
+  // JSX props
+  source.find(j.JSXAttribute).forEach(path => {
     var _path$value, _path$value$value;
-    debug && console.log('file:', file.path);
+    if (((_path$value = path.value) === null || _path$value === void 0 ? void 0 : (_path$value$value = _path$value.value) === null || _path$value$value === void 0 ? void 0 : _path$value$value.type) !== 'JSXExpressionContainer') {
+      return;
+    }
+    if (isParentOfToken(j, path)) {
+      return;
+    }
+    const expression = path.value.value.expression;
+    const value = getColorFromIdentifier(expression);
+    if (!value || !includesHardCodedColor(value) && !isHardCodedColor(value) && !isLegacyColor(value) && !isLegacyNamedColor(value)) {
+      return;
+    }
+    const tokenId = getTokenFromNode(j, path, value, path.value.name.name);
     insertTokenImport(j, source);
-    const value = path === null || path === void 0 ? void 0 : (_path$value = path.value) === null || _path$value === void 0 ? void 0 : (_path$value$value = _path$value.value) === null || _path$value$value === void 0 ? void 0 : _path$value$value.toString();
-    const colorMeta = legacyColorMetaMap[value] || [];
-    const tokenId = getTokenFromNode(j, path, colorMeta);
-    const tokenNode = buildToken(j, tokenId, path.value);
-    j(path).replaceWith(isDecendantOfType(j, path, j.JSXAttribute) ? j.jsxExpressionContainer(tokenNode) : tokenNode);
+    j(path).find(j.JSXExpressionContainer).forEach(path => {
+      const tokenNode = buildToken(j, tokenId, path.value.expression);
+      j(path).replaceWith(j.jsxExpressionContainer(tokenNode));
+    });
     transformed = true;
   });
-  if (transformed) {
-    return source.toSource();
-  }
-  return file.source;
+  return transformed ? source.toSource() : file.source;
 }

package/dist/es2019/presets/theme-to-design-tokens/utils/ast-meta.js

@@ -1,3 +1,4 @@
+import { getClosestDecendantOfType } from './ast';
 import { getUniqueWordsFromTokens } from './tokens';
 export function getMetaFromAncestors(j, path, meta = []) {
   const parent = path.parentPath;
@@ -27,10 +28,16 @@ export function getMetaFromAncestors(j, path, meta = []) {
     meta.push(propertyName);
   }
   if (parent && parent.value.type === 'JSXAttribute') {
-    if (!['css', 'styles', 'style'].includes(parent.value.name.name)) {
+    if (!['css', 'styles', 'style', 'fill', 'stopColor', 'startColor'].includes(parent.value.name.name)) {
       meta.push(parent.value.name.name);
     }
   }
+  const closestJSXElement = getClosestDecendantOfType(j, path, j.JSXOpeningElement);
+  if (closestJSXElement) {
+    const jsxElementName = closestJSXElement.value.name.name;
+    const nameComponents = jsxElementName.replace(/([a-z])([A-Z])/g, '$1 $2').split(' ');
+    meta.push(...nameComponents);
+  }
   if (parent && parent.value.type === 'VariableDeclarator') {
     meta.push(parent.value.id.name);
   }
@@ -41,11 +48,10 @@ export function getMetaFromAncestors(j, path, meta = []) {
 }
 export function cleanMeta(meta) {
   return meta.reduce((accum, val) => [...accum, ...(typeof val === 'string' ? val.split(/(?=[A-Z])/g).map(e => e.toLowerCase()) : [])], []).reduce((accum, val) => {
-    accum.push(val.replace(/:/g, '').replace(/,/g, '').replace('grey', 'neutral').replace('skeleton', 'neutral').replace('texts', 'text').replace('red', 'danger').replace('error', 'danger').replace('invalid', 'danger').replace('removed', 'danger').replace('removal', 'danger').replace('remove', 'danger').replace('focus', 'focused').replace('valid', 'success').replace('successful', 'success').replace('risk', 'warning').replace('caution', 'warning').replace('warn', 'warning').replace('primary', 'bold').replace('info', 'bold').replace('secondary', 'subtle').replace('hyperlink', 'link').replace('anchor', 'link').replace('active', 'pressed').replace('hover', 'hovered').replace('dragged', 'overlay').replace('dragging', 'overlay').replace('drag', 'overlay').replace('background-color', 'background').replace('color', 'text').replace('icons', 'icon').replace('glyph', 'icon').replace('stroke', 'border').replace('border-left', 'border').replace('border-right', 'border').replace('border-top', 'border').replace('border-bottom', 'border').replace('box-shadow', 'shadow'));
+    const cleanVal = val.replace(/:/g, '').replace(/,/g, '').replace('grey', 'neutral').replace('skeleton', 'neutral').replace('texts', 'text').replace('red', 'danger').replace('error', 'danger').replace('invalid', 'danger').replace('removed', 'danger').replace('removal', 'danger').replace('remove', 'danger').replace('focus', 'focused').replace('valid', 'success').replace('successful', 'success').replace('risk', 'warning').replace('caution', 'warning').replace('primary', 'bold').replace('secondary', 'subtle').replace('hyperlink', 'link').replace('anchor', 'link').replace('active', 'pressed').replace('hover', 'hovered').replace('card', 'raised').replace('dragged', 'surface overlay').replace('dragging', 'surface overlay').replace('drag', 'surface overlay').replace('background-color', 'background').replace('color', 'text').replace('icons', 'icon').replace('glyph', 'icon').replace('stroke', 'border').replace('border-left', 'border').replace('border-right', 'border').replace('border-top', 'border').replace('border-bottom', 'border').replace('box-shadow', 'shadow');
+    accum.push(...cleanVal.split(' '));
     return accum;
-  }, []).filter(val => {
-    return getUniqueWordsFromTokens.includes(val);
-  }).reduce((accum, val) => {
+  }, []).filter(val => getUniqueWordsFromTokens.includes(val)).reduce((accum, val) => {
     if (!accum.includes(val)) {
       accum.push(val);
     }

package/dist/es2019/presets/theme-to-design-tokens/utils/ast.js

@@ -1,10 +1,27 @@
+import { isDecendantOfType } from '@codeshift/utils';
 export function isDecendantOfToken(j, path) {
+  if (path.type === 'CallExpression' && path.callee.type === 'Identifier' && path.callee.name === 'token') {
+    return true;
+  }
   return j(path).closest(j.CallExpression, {
     callee: {
       name: 'token'
     }
   }).length > 0;
 }
-export function isDecendantOfType(j, path, type) {
-  return j(path).closest(type).length > 0;
+export function isParentOfToken(j, path) {
+  if (path.type === 'CallExpression' && path.callee.type === 'Identifier' && path.callee.name === 'token') {
+    return true;
+  }
+  return j(path).find(j.CallExpression, {
+    callee: {
+      name: 'token'
+    }
+  }).length > 0;
+}
+export function getClosestDecendantOfType(j, path, type) {
+  if (!isDecendantOfType(j, path, type)) {
+    return;
+  }
+  return j(path).closest(type).get();
 }

package/dist/es2019/presets/theme-to-design-tokens/utils/legacy-colors.js

@@ -5,16 +5,16 @@ export const legacyColorMetaMap = {
   R75: ['danger'],
   R100: ['danger'],
   R200: ['danger'],
-  R300: ['danger'],
-  R400: ['danger'],
-  R500: ['danger'],
+  R300: ['danger', 'bold'],
+  R400: ['danger', 'bold'],
+  R500: ['danger', 'bold'],
   Y50: ['warning'],
   Y75: ['warning'],
   Y100: ['warning'],
   Y200: ['warning'],
-  Y300: ['warning'],
-  Y400: ['warning'],
-  Y500: ['warning'],
+  Y300: ['warning', 'bold'],
+  Y400: ['warning', 'bold'],
+  Y500: ['warning', 'bold'],
   G50: ['success'],
   G75: ['success'],
   G100: ['success'],
@@ -22,20 +22,20 @@ export const legacyColorMetaMap = {
   G300: ['success'],
   G400: ['success'],
   G500: ['success'],
-  B50: ['brand'],
-  B75: ['brand'],
-  B100: ['brand'],
-  B200: ['brand'],
-  B300: ['brand'],
-  B400: ['brand'],
-  B500: ['brand'],
+  B50: ['information'],
+  B75: ['information'],
+  B100: ['information'],
+  B200: ['information'],
+  B300: ['information', 'bold'],
+  B400: ['information', 'bold'],
+  B500: ['information', 'bold'],
   P50: ['discovery'],
   P75: ['discovery'],
   P100: ['discovery'],
   P200: ['discovery'],
-  P300: ['discovery'],
-  P400: ['discovery'],
-  P500: ['discovery'],
+  P300: ['discovery', 'bold'],
+  P400: ['discovery', 'bold'],
+  P500: ['discovery', 'bold'],
   T50: ['accent', 'teal'],
   T75: ['accent', 'teal'],
   T100: ['accent', 'teal'],
@@ -44,9 +44,24 @@ export const legacyColorMetaMap = {
   T400: ['accent', 'teal'],
   T500: ['accent', 'teal'],
   N0: ['inverse'],
-  N700: ['text'],
-  N800: ['text'],
-  N900: ['text'],
+  N10: ['neutral'],
+  N20: ['neutral'],
+  N30: ['neutral'],
+  N40: ['neutral'],
+  N50: ['neutral'],
+  N60: ['neutral'],
+  N70: ['neutral'],
+  N80: ['neutral'],
+  N90: ['neutral'],
+  N100: ['neutral'],
+  N200: ['neutral'],
+  N300: ['neutral'],
+  N400: ['neutral'],
+  N500: ['neutral'],
+  N600: ['neutral'],
+  N700: ['neutral'],
+  N800: ['neutral'],
+  N900: ['neutral'],
   background: ['background', 'default'],
   backgroundActive: ['background', 'pressed'],
   backgroundHover: ['background', 'hovered'],
@@ -70,5 +85,6 @@ export const legacyColorMetaMap = {
   yellow: ['accent', 'orange'],
   green: ['accent', 'green'],
   grey: ['background', 'neutral'],
-  skeleton: ['background', 'neutral']
+  skeleton: ['skeleton'],
+  white: ['inverse']
 };

package/dist/es2019/presets/theme-to-design-tokens/utils/tokens.js

@@ -1,5 +1,5 @@
 import { light as rawTokens } from '@atlaskit/tokens/tokens-raw';
-export const tokens = rawTokens.filter(t => t.attributes.state === 'active').map(t => t.name.replace(/\.\[default\]/g, '')).filter(t => !t.includes('UNSAFE') && !t.includes('interaction') && !t.includes('chart'));
+export const tokens = rawTokens.filter(t => t.attributes.state === 'active').map(t => t.name.replace(/\.\[default\]/g, '')).filter(t => !t.includes('UNSAFE') && !t.includes('interaction') && !t.includes('chart') && !t.includes('elevation.shadow.overflow'));
 export const getUniqueWordsFromTokens = tokens.reduce((accum, val) => [...accum, ...val.split('.')], []).reduce((accum, val) => [...accum, ...val.split(/(?=[A-Z])/g).map(e => e.toLowerCase())], []).reduce((accum, val) => {
   if (!accum.includes(val)) {
     accum.push(val);

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/codemod-cli",
-	"version": "0.13.1"
+	"version": "0.13.2"
 }

package/dist/esm/main.js

@@ -289,7 +289,7 @@ function _main() {
         case 4:
           _yield$parseArgs = _context5.sent;
           packages = _yield$parseArgs.packages;
-          _process$env$_PACKAGE = "0.13.1", _PACKAGE_VERSION_ = _process$env$_PACKAGE === void 0 ? '0.0.0-dev' : _process$env$_PACKAGE;
+          _process$env$_PACKAGE = "0.13.2", _PACKAGE_VERSION_ = _process$env$_PACKAGE === void 0 ? '0.0.0-dev' : _process$env$_PACKAGE;
           logger.log(chalk.bgBlue(chalk.black("\uD83D\uDCDA Atlassian-Frontend codemod library @ ".concat(_PACKAGE_VERSION_, " \uD83D\uDCDA"))));
           if (packages && packages.length > 0) {
             logger.log(chalk.gray("Searching for codemods for newer versions of the following packages: ".concat(packages.map(function (pkg) {