@atlaskit/button 16.1.2

package/codemods/optimistic-15.0.0-lite-mode.ts

@@ -0,0 +1,279 @@
+import { NodePath } from 'ast-types/lib/node-path';
+import core, { API, FileInfo, JSXElement, Node, Options } from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+import { convertButtonType, transformButton } from './helpers/15.0.0-runner';
+import {
+  addCommentBefore,
+  addCommentToStartOfFile,
+  addToImport,
+  changeImportFor,
+  getDefaultSpecifierName,
+  getSafeImportName,
+  isOnlyUsingNameForJSX,
+  isUsingProp,
+  isUsingSupportedSpread,
+  Nullable,
+  tryCreateImport,
+} from './helpers/helpers-generic';
+
+function changeUsage({
+  j,
+  base,
+  packageName,
+}: {
+  j: core.JSCodeshift;
+  base: Collection<Node>;
+  packageName: string;
+}): void {
+  // 1. Are we using the default export?
+  // If not: we can exit early!
+  const defaultName: Nullable<string> = getDefaultSpecifierName({
+    j,
+    base,
+    packageName,
+  });
+  if (defaultName == null) {
+    return;
+  }
+
+  // Only supporting cases where default identifier is only used in JSX
+  const isSupported: boolean = isOnlyUsingNameForJSX({
+    j,
+    base,
+    name: defaultName,
+  });
+
+  if (!isSupported) {
+    tryCreateImport({
+      j,
+      base,
+      relativeToPackage: '@atlaskit/button',
+      packageName: '@atlaskit/button/standard-button',
+    });
+    addToImport({
+      j,
+      base,
+      // we can safely use the default name, because it was being used before
+      importSpecifier: j.importDefaultSpecifier(j.identifier(defaultName)),
+      packageName: '@atlaskit/button/standard-button',
+    });
+
+    addCommentBefore({
+      j,
+      target: base
+        .find(j.ImportDeclaration)
+        .filter(
+          (declaration) =>
+            declaration.value.source.value ===
+            '@atlaskit/button/standard-button',
+        ),
+      message: `
+        This file does not exclusively use Button in JSX.
+        The codemod is unable to know which button variant, so it is using
+        the standard button: "@atlaskit/button/standard-button".
+
+        Please validate this decision.
+        You might need to change the usage of Button to either LoadingButton or CustomThemeButton
+      `,
+    });
+    return;
+  }
+
+  // Find usages of the Button component
+  // There are three possible import statements:
+  //  1. import Button from '@atlaskit/button/standard';
+  //  2. import LoadingButton from '@atlaskit/button/loading-button';
+  //  3. import CustomThemeButton from '@atlaskit/button/custom-theme-button';
+
+  // What to do if any of the names clash?
+  // - In the case of clash: prefix with 'DS' (eg import DSLoadingButton from '@atlaskit/button/loading-button';)
+
+  // What to do if old Button was aliased? eg "AkButton"
+  // - We cannot use that existing alias as we might have three different Button imports in the file
+  // - We automatically will be be swapping to the standard names with 'DS' prefix for all imports
+
+  type Groups = {
+    standard: NodePath<JSXElement, JSXElement>[];
+    loading: NodePath<JSXElement, JSXElement>[];
+    customTheme: NodePath<JSXElement, JSXElement>[];
+  };
+
+  const groups: Groups = {
+    standard: [],
+    loading: [],
+    customTheme: [],
+  };
+
+  base.findJSXElements(defaultName).forEach((path) => {
+    const hasThemeProp: boolean = isUsingProp({
+      j,
+      base,
+      element: path,
+      propName: 'theme',
+    });
+
+    if (hasThemeProp) {
+      groups.customTheme.push(path);
+      return;
+    }
+
+    if (!isUsingSupportedSpread({ j, base, element: path })) {
+      addCommentToStartOfFile({
+        j,
+        base,
+        message: `
+          Detected spreading props (<Button {...props} />) that was too complex for our codemod to understand
+          Our codemod will only look at inline objects, or objects defined in the same file (ObjectExpression's)
+          We have opted for our safest upgrade component in this file: '<CustomThemeButton />'
+        `,
+      });
+      groups.customTheme.push(path);
+      return;
+    }
+
+    const isUsingThemeInFile: boolean =
+      base
+        .find(j.ImportDeclaration)
+        .filter(
+          (declaration) =>
+            declaration.value.source.value ===
+            '@atlaskit/button/custom-theme-button',
+        )
+        .find(j.ImportSpecifier)
+        .filter((specifier) => specifier.value.imported.name === 'Theme')
+        .length > 0;
+
+    if (isUsingThemeInFile) {
+      addCommentToStartOfFile({
+        j,
+        base,
+        message: `
+          Using "import { Theme } from '@atlaskit/button/custom-theme-button" in a file
+          will cause all buttons in that file to be safely converted to a <CustomThemeButton/>
+        `,
+      });
+
+      groups.customTheme.push(path);
+      return;
+    }
+
+    const hasIsLoadingProp: boolean = isUsingProp({
+      j,
+      base,
+      element: path,
+      propName: 'isLoading',
+    });
+
+    if (hasIsLoadingProp) {
+      groups.loading.push(path);
+      return;
+    }
+
+    groups.standard.push(path);
+    return;
+  });
+
+  convertButtonType({
+    j,
+    base,
+    elements: groups.standard,
+    name: getSafeImportName({
+      j,
+      base,
+      currentDefaultSpecifierName: defaultName,
+      desiredName: 'Button',
+      fallbackName: 'DSButton',
+    }),
+    newPackageName: '@atlaskit/button/standard-button',
+  });
+
+  convertButtonType({
+    j,
+    base,
+    elements: groups.loading,
+    newPackageName: '@atlaskit/button/loading-button',
+    name: getSafeImportName({
+      j,
+      base,
+      desiredName: 'LoadingButton',
+      fallbackName: 'DSLoadingButton',
+      currentDefaultSpecifierName: defaultName,
+    }),
+  });
+  convertButtonType({
+    j,
+    base,
+    elements: groups.customTheme,
+    newPackageName: '@atlaskit/button/custom-theme-button',
+    name: getSafeImportName({
+      j,
+      base,
+      currentDefaultSpecifierName: defaultName,
+      desiredName: 'CustomThemeButton',
+      fallbackName: 'DSCustomThemeButton',
+    }),
+  });
+}
+
+export default function transformer(
+  file: FileInfo,
+  { jscodeshift: j }: API,
+  options: Options,
+) {
+  return transformButton({
+    j,
+    file,
+    custom: (base: Collection<any>) => {
+      changeImportFor({
+        j,
+        base,
+        option: {
+          type: 'keep-name',
+          name: 'ButtonProps',
+          behaviour: 'keep-as-named-import',
+        },
+        oldPackagePath: '@atlaskit/button',
+        newPackagePath: '@atlaskit/button/types',
+      });
+
+      const isUsingButtonPropsType: boolean =
+        base
+          .find(j.ImportDeclaration)
+          .filter(
+            (declaration) =>
+              declaration.value.source.value === '@atlaskit/button/types',
+          )
+          .find(j.ImportSpecifier)
+          .filter(
+            (specifier) => specifier.value.imported.name === 'ButtonProps',
+          ).length > 0;
+
+      if (isUsingButtonPropsType) {
+        const target = base
+          .find(j.ImportDeclaration)
+          .filter(
+            (declaration) =>
+              declaration.value.source.value === '@atlaskit/button/types',
+          );
+        addCommentBefore({
+          j,
+          target,
+          message: `
+      Verify ButtonProps is the right prop type
+      You might need the LoadingButtonProps, CustomButtonProps types which can be imported from '@atlaskit/button/types'
+    `,
+        });
+      }
+
+      changeUsage({
+        j,
+        base,
+        packageName: '@atlaskit/button',
+      });
+    },
+  });
+}
+
+// Note: not exporting a 'parser' because doing so
+// will prevent consumers overriding it

package/codemods/readme.md

@@ -0,0 +1 @@
+We are using the `optimistic-` prefix so that the optimistic codemod won't be run in branch deploys

package/custom-theme-button/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/button/custom-theme-button",
+  "main": "../dist/cjs/entry-points/custom-theme-button.js",
+  "module": "../dist/esm/entry-points/custom-theme-button.js",
+  "module:es2019": "../dist/es2019/entry-points/custom-theme-button.js",
+  "types": "../dist/types/entry-points/custom-theme-button.d.ts"
+}

package/dist/cjs/button-group.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ButtonGroup;
+exports.groupItemStyles = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _constants = require("@atlaskit/theme/constants");
+
+/** @jsx jsx */
+var groupItemStyles = {
+  flex: '1 0 auto',
+  display: 'flex',
+
+  /* margins don't flip when the layout uses dir="rtl", whereas pseudos do */
+  '& + &::before': {
+    content: "''",
+    display: 'inline-block',
+    width: "".concat((0, _constants.gridSize)() / 2, "px")
+  }
+};
+exports.groupItemStyles = groupItemStyles;
+
+function ButtonGroup(_ref) {
+  var appearance = _ref.appearance,
+      children = _ref.children;
+  return (0, _core.jsx)("div", {
+    css: {
+      display: 'inline-flex'
+    }
+  }, _react.default.Children.map(children, function (child, idx) {
+    if (!child) {
+      return null;
+    }
+
+    return (0, _core.jsx)("div", {
+      key: idx,
+      css: groupItemStyles
+    }, appearance ? /*#__PURE__*/_react.default.cloneElement(child, {
+      appearance: appearance
+    }) : child);
+  }));
+}

package/dist/cjs/button.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
+
+var _buttonBase = _interopRequireDefault(require("./shared/button-base"));
+
+var _css = require("./shared/css");
+
+var _getIsOnlySingleIcon = _interopRequireDefault(require("./shared/get-is-only-single-icon"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function noop() {}
+
+var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
+var ButtonWithMode = /*#__PURE__*/_react.default.forwardRef(function ButtonWithMode(_ref, ref) {
+  var mode = _ref.mode,
+      _ref$onMouseDown = _ref.onMouseDown,
+      providedOnMouseDown = _ref$onMouseDown === void 0 ? noop : _ref$onMouseDown,
+      _ref$onMouseUp = _ref.onMouseUp,
+      providedOnMouseUp = _ref$onMouseUp === void 0 ? noop : _ref$onMouseUp,
+      rest = (0, _objectWithoutProperties2.default)(_ref, ["mode", "onMouseDown", "onMouseUp"]);
+  var appearance = rest.appearance || 'default';
+  var spacing = rest.spacing || 'default';
+  var shouldFitContainer = Boolean(rest.shouldFitContainer);
+  var isSelected = Boolean(rest.isSelected);
+  var isOnlySingleIcon = (0, _getIsOnlySingleIcon.default)(rest);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isActive = _useState2[0],
+      setIsActive = _useState2[1]; // Wrap onMouseDown / onMouseUp to manually trigger active state
+  //  in Firefox
+
+
+  var onMouseDown = (0, _react.useCallback)(function (event) {
+    providedOnMouseDown(event);
+
+    if (isFirefox) {
+      setIsActive(true);
+    }
+  }, [providedOnMouseDown, setIsActive]);
+  var onMouseUp = (0, _react.useCallback)(function (event) {
+    providedOnMouseUp(event);
+
+    if (isFirefox) {
+      setIsActive(false);
+    }
+  }, [providedOnMouseUp, setIsActive]);
+  var buttonCss = (0, _react.useMemo)(function () {
+    return (0, _css.getCss)({
+      appearance: appearance,
+      spacing: spacing,
+      mode: mode,
+      isSelected: isSelected,
+      shouldFitContainer: shouldFitContainer,
+      isOnlySingleIcon: isOnlySingleIcon
+    });
+  }, [appearance, spacing, mode, isSelected, shouldFitContainer, isOnlySingleIcon]);
+  return /*#__PURE__*/_react.default.createElement(_buttonBase.default, (0, _extends2.default)({}, rest, {
+    ref: ref,
+    buttonCss: buttonCss // Due to how click events are set, we need to set active styles
+    //  manually in Firefox and wrap onMouseDown/onMouseUp
+    ,
+    "data-firefox-is-active": isActive ? true : undefined,
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp
+  }));
+});
+
+var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Button(props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_components.default.Consumer, null, function (_ref2) {
+    var mode = _ref2.mode;
+    return /*#__PURE__*/_react.default.createElement(ButtonWithMode, (0, _extends2.default)({}, props, {
+      ref: ref,
+      mode: mode
+    }));
+  });
+})); // Tools including enzyme rely on components having a display name
+
+
+Button.displayName = 'Button';
+var _default = Button;
+exports.default = _default;

package/dist/cjs/custom-theme-button/custom-theme-button-types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});