@atlaskit/textfield 5.1.2

package/codemods/migrations/remove-imports.tsx

@@ -0,0 +1,8 @@
+import { createRemoveImportsFor } from './utils';
+
+export const removeThemeImports = createRemoveImportsFor({
+  importsToRemove: ['ThemeProps', 'ThemeTokens', 'Theme'],
+  packagePath: '@atlaskit/textfield',
+  comment: `This file uses exports used to help theme @atlaskit/textfield which
+  has now been removed due to its poor performance characteristics.`,
+});

package/codemods/migrations/remove-props.tsx

@@ -0,0 +1,10 @@
+import { createRemoveFuncFor } from './utils';
+
+const component = '@atlaskit/textfield';
+const prop = 'theme';
+const comment = `This file uses the @atlaskit/textfield \`theme\` prop which
+has now been removed due to its poor performance characteristics. We have not replaced
+theme with an equivalent API due to minimal usage of the \`theme\` prop.
+The appearance of TextField will have likely changed.`;
+
+export const removeThemeProp = createRemoveFuncFor(component, prop, comment);

package/codemods/migrations/rename-imports.tsx

@@ -0,0 +1,15 @@
+import { createRenameJSXFunc } from './utils';
+
+export const renamethemeTokensImport = createRenameJSXFunc(
+  '@atlaskit/textfield',
+  'themeTokens',
+  'TextFieldColors',
+  'DSTextFieldColors',
+);
+
+export const renameThemeAppearanceImport = createRenameJSXFunc(
+  '@atlaskit/textfield',
+  'ThemeAppearance',
+  'Appearance',
+  'DSTextFieldAppearance',
+);

package/codemods/migrations/utils.tsx

@@ -0,0 +1,375 @@
+import core, {
+  API,
+  ASTPath,
+  FileInfo,
+  Identifier,
+  ImportDeclaration,
+  ImportSpecifier,
+  Options,
+  Program,
+} from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+export type Nullable<T> = T | null;
+
+export function getDefaultSpecifier(
+  j: core.JSCodeshift,
+  source: any,
+  specifier: string,
+) {
+  const specifiers = source
+    .find(j.ImportDeclaration)
+    .filter(
+      (path: ASTPath<ImportDeclaration>) =>
+        path.node.source.value === specifier,
+    )
+    .find(j.ImportDefaultSpecifier);
+
+  if (!specifiers.length) {
+    return null;
+  }
+  return specifiers.nodes()[0]!.local!.name;
+}
+export function getNamedSpecifier(
+  j: core.JSCodeshift,
+  source: any,
+  specifier: string,
+  importName: string,
+) {
+  const specifiers = source
+    .find(j.ImportDeclaration)
+    .filter(
+      (path: ASTPath<ImportDeclaration>) =>
+        path.node.source.value === specifier,
+    )
+    .find(j.ImportSpecifier)
+    .filter(
+      (path: ASTPath<ImportSpecifier>) =>
+        path.node.imported.name === importName,
+    );
+
+  if (!specifiers.length) {
+    return null;
+  }
+  return specifiers.nodes()[0]!.local!.name;
+}
+
+export function getJSXAttributesByName(
+  j: core.JSCodeshift,
+  element: ASTPath<any>,
+  attributeName: string,
+) {
+  return j(element)
+    .find(j.JSXOpeningElement)
+    .find(j.JSXAttribute)
+    .filter((attribute) => {
+      const matches = j(attribute)
+        .find(j.JSXIdentifier)
+        .filter((identifier) => identifier.value.name === attributeName);
+      return Boolean(matches.length);
+    });
+}
+
+export function hasImportDeclaration(
+  j: core.JSCodeshift,
+  source: any,
+  importPath: string,
+) {
+  const imports = source
+    .find(j.ImportDeclaration)
+    .filter(
+      (path: ASTPath<ImportDeclaration>) =>
+        typeof path.node.source.value === 'string' &&
+        path.node.source.value.startsWith(importPath),
+    );
+
+  return Boolean(imports.length);
+}
+// not replacing newlines (which \s does)
+const spacesAndTabs: RegExp = /[ \t]{2,}/g;
+const lineStartWithSpaces: RegExp = /^[ \t]*/gm;
+
+function clean(value: string): string {
+  return (
+    value
+      .replace(spacesAndTabs, ' ')
+      .replace(lineStartWithSpaces, '')
+      // using .trim() to clear the any newlines before the first text and after last text
+      .trim()
+  );
+}
+
+export function addCommentToStartOfFile({
+  j,
+  base,
+  message,
+}: {
+  j: core.JSCodeshift;
+  base: Collection<Node>;
+  message: string;
+}) {
+  addCommentBefore({
+    j,
+    target: base.find(j.Program),
+    message,
+  });
+}
+
+export function addCommentBefore({
+  j,
+  target,
+  message,
+}: {
+  j: core.JSCodeshift;
+  target: Collection<Program> | Collection<ImportDeclaration>;
+  message: string;
+}) {
+  const content: string = ` TODO: (from codemod) ${clean(message)} `;
+  target.forEach((path: ASTPath<Program | ImportDeclaration>) => {
+    path.value.comments = path.value.comments || [];
+
+    const exists = path.value.comments.find(
+      (comment) => comment.value === content,
+    );
+
+    // avoiding duplicates of the same comment
+    if (exists) {
+      return;
+    }
+
+    path.value.comments.push(j.commentBlock(content));
+  });
+}
+
+export function doesIdentifierExist({
+  j,
+  base,
+  name,
+}: {
+  j: core.JSCodeshift;
+  base: Collection<any>;
+  name: string;
+}): boolean {
+  return (
+    base
+      .find(j.Identifier)
+      .filter((identifer: ASTPath<Identifier>) => identifer.value.name === name)
+      .length > 0
+  );
+}
+
+export function getSafeImportName({
+  j,
+  base,
+  currentDefaultSpecifierName,
+  desiredName,
+  fallbackName,
+}: {
+  j: core.JSCodeshift;
+  base: Collection<any>;
+  currentDefaultSpecifierName: string;
+  desiredName: string;
+  fallbackName: string;
+}) {
+  if (currentDefaultSpecifierName === desiredName) {
+    return desiredName;
+  }
+
+  const isUsed: boolean = doesIdentifierExist({ j, base, name: desiredName });
+
+  return isUsed ? fallbackName : desiredName;
+}
+
+export const createRemoveFuncFor = (
+  component: string,
+  prop: string,
+  comment?: string,
+) => (j: core.JSCodeshift, source: Collection<Node>) => {
+  const defaultSpecifier = getDefaultSpecifier(j, source, component);
+
+  if (!defaultSpecifier) {
+    return;
+  }
+
+  source.findJSXElements(defaultSpecifier).forEach((element) => {
+    getJSXAttributesByName(j, element, prop).forEach((attribute) => {
+      j(attribute).remove();
+      if (comment) {
+        addCommentToStartOfFile({ j, base: source, message: comment });
+      }
+    });
+  });
+};
+
+export const createRemoveImportsFor = ({
+  importsToRemove,
+  packagePath,
+  comment,
+}: {
+  importsToRemove: string[];
+  packagePath: string;
+  comment: string;
+}) => (j: core.JSCodeshift, source: Collection<Node>) => {
+  const isUsingName: boolean =
+    source
+      .find(j.ImportDeclaration)
+      .filter((path) => path.node.source.value === packagePath).length > 0;
+  if (!isUsingName) {
+    return;
+  }
+
+  const existingAliases: Nullable<string>[] =
+    source
+      .find(j.ImportDeclaration)
+      .filter((path) => path.node.source.value === packagePath)
+      .find(j.ImportSpecifier)
+      .nodes()
+      .map(
+        (specifier): Nullable<string> => {
+          if (!importsToRemove.includes(specifier.imported.name)) {
+            return null;
+          }
+          // If aliased: return the alias
+          if (
+            specifier.local &&
+            !importsToRemove.includes(specifier.local.name)
+          ) {
+            return specifier.local.name;
+          }
+
+          return null;
+        },
+      )
+      .filter(Boolean) || null;
+
+  // Add comments
+  source
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === packagePath)
+    .find(j.ImportSpecifier)
+    .filter((importSpecifier) => {
+      const identifier = j(importSpecifier).find(j.Identifier).get();
+      if (
+        importsToRemove.includes(identifier.value.name) ||
+        existingAliases.includes(identifier.value.name)
+      ) {
+        addCommentToStartOfFile({ j, base: source, message: comment });
+        return true;
+      }
+      return false;
+    })
+    .remove();
+
+  // Remove entire import if it is empty
+  const isEmptyNamedImport =
+    source
+      .find(j.ImportDeclaration)
+      .filter((path) => path.node.source.value === packagePath)
+      .find(j.ImportSpecifier)
+      .find(j.Identifier).length === 0;
+
+  if (isEmptyNamedImport) {
+    const isEmptyDefaultImport =
+      source
+        .find(j.ImportDeclaration)
+        .filter((path) => path.node.source.value === packagePath)
+        .find(j.ImportDefaultSpecifier)
+        .find(j.Identifier).length === 0;
+
+    isEmptyDefaultImport
+      ? source
+          .find(j.ImportDeclaration)
+          .filter((path) => path.node.source.value === packagePath)
+          .remove()
+      : source
+          .find(j.ImportDeclaration)
+          .filter((path) => path.node.source.value === packagePath)
+          .find(j.ImportSpecifier)
+          .remove();
+  }
+};
+
+export const createRenameJSXFunc = (
+  packagePath: string,
+  from: string,
+  to: string,
+  fallback: string | undefined = undefined,
+) => (j: core.JSCodeshift, source: any) => {
+  const namedSpecifier = getNamedSpecifier(j, source, packagePath, from);
+
+  const toName = fallback
+    ? getSafeImportName({
+        j,
+        base: source,
+        currentDefaultSpecifierName: namedSpecifier,
+        desiredName: to,
+        fallbackName: fallback,
+      })
+    : to;
+
+  const existingAlias: Nullable<string> =
+    source
+      .find(j.ImportDeclaration)
+      .filter(
+        (path: ASTPath<ImportDeclaration>) =>
+          path.node.source.value === packagePath,
+      )
+      .find(j.ImportSpecifier)
+      .nodes()
+      .map(
+        (specifier: ImportSpecifier): Nullable<string> => {
+          if (from !== specifier.imported.name) {
+            return null;
+          }
+          // If aliased: return the alias
+          if (specifier.local && from !== specifier.local.name) {
+            return specifier.local.name;
+          }
+
+          return null;
+        },
+      )
+      .filter(Boolean)[0] || null;
+
+  source
+    .find(j.ImportDeclaration)
+    .filter(
+      (path: ASTPath<ImportDeclaration>) =>
+        path.node.source.value === packagePath,
+    )
+    .find(j.ImportSpecifier)
+    .filter((importSpecifier: ImportSpecifier) => {
+      const identifier = j(importSpecifier).find(j.Identifier).get();
+      if (
+        from === identifier.value.name ||
+        existingAlias === identifier.value.name
+      ) {
+        return true;
+      }
+      return false;
+    })
+    .replaceWith(
+      [
+        j.importSpecifier(
+          j.identifier(toName),
+          existingAlias ? j.identifier(existingAlias) : null,
+        ),
+      ],
+      j.literal(packagePath),
+    );
+};
+
+export const createTransformer = (
+  component: string,
+  migrates: { (j: core.JSCodeshift, source: Collection<Node>): void }[],
+) => (fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) => {
+  const source: Collection<Node> = j(fileInfo.source);
+
+  if (!hasImportDeclaration(j, source, component)) {
+    return fileInfo.source;
+  }
+
+  migrates.forEach((tf) => tf(j, source));
+
+  return source.toSource(options.printOptions || { quote: 'single' });
+};

package/dist/cjs/component-tokens.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.placeholderTextColor = exports.disabledTextColor = exports.textColor = exports.transparent = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.subtleBackgroundColorHover = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = exports.disabledBackgroundColor = void 0;
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _tokens = require("@atlaskit/tokens");
+
+var disabledBackgroundColor = {
+  light: (0, _tokens.token)('color.background.disabled', _colors.N10),
+  dark: (0, _tokens.token)('color.background.disabled', _colors.DN10)
+};
+exports.disabledBackgroundColor = disabledBackgroundColor;
+var defaultBackgroundColor = {
+  light: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.N10),
+  dark: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.DN10)
+};
+exports.defaultBackgroundColor = defaultBackgroundColor;
+var defaultBackgroundColorFocus = {
+  light: (0, _tokens.token)('color.background.default', _colors.N0),
+  dark: (0, _tokens.token)('color.background.default', _colors.DN10)
+};
+exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;
+var defaultBackgroundColorHover = {
+  light: (0, _tokens.token)('color.background.default', _colors.N30),
+  dark: (0, _tokens.token)('color.background.default', _colors.DN30)
+};
+exports.defaultBackgroundColorHover = defaultBackgroundColorHover;
+var subtleBackgroundColorHover = {
+  light: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30),
+  dark: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.DN30)
+};
+exports.subtleBackgroundColorHover = subtleBackgroundColorHover;
+var defaultBorderColor = {
+  light: (0, _tokens.token)('color.border.neutral', _colors.N40),
+  dark: (0, _tokens.token)('color.border.neutral', _colors.DN40)
+};
+exports.defaultBorderColor = defaultBorderColor;
+var defaultBorderColorFocus = {
+  light: (0, _tokens.token)('color.border.focus', _colors.B100),
+  dark: (0, _tokens.token)('color.border.focus', _colors.B75)
+};
+exports.defaultBorderColorFocus = defaultBorderColorFocus;
+var transparent = {
+  light: 'transparent',
+  dark: 'transparent'
+};
+exports.transparent = transparent;
+var textColor = {
+  light: (0, _tokens.token)('color.text.highEmphasis', _colors.N900),
+  dark: (0, _tokens.token)('color.text.highEmphasis', _colors.DN600)
+};
+exports.textColor = textColor;
+var disabledTextColor = {
+  light: (0, _tokens.token)('color.text.disabled', _colors.N70),
+  dark: (0, _tokens.token)('color.text.disabled', _colors.DN90)
+};
+exports.disabledTextColor = disabledTextColor;
+var placeholderTextColor = {
+  light: (0, _tokens.token)('color.text.lowEmphasis', _colors.N100),
+  dark: (0, _tokens.token)('color.text.lowEmphasis', _colors.DN90)
+};
+exports.placeholderTextColor = placeholderTextColor;