@atlaskit/button 16.1.2

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2019 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,13 @@
+# Button
+
+A button triggers an event or action. They let users know what will happen next.
+
+## Installation
+
+```sh
+yarn add @atlaskit/button
+```
+
+## Usage
+
+Detailed docs and example usage can be found [here](https://atlassian.design/components/button/).

package/__perf__/button.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import Button from '../src';
+
+import Example from './utils/example-runner';
+import { interactionTasks } from './utils/interaction-tasks';
+
+const button = () => <Example Component={Button} />;
+
+button.story = {
+  name: 'Button',
+  parameters: {
+    performance: {
+      interactions: interactionTasks,
+    },
+  },
+};
+
+export default button;

package/__perf__/custom.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { CustomThemeButton } from '../src';
+
+import Example from './utils/example-runner';
+import { interactionTasks } from './utils/interaction-tasks';
+
+const customThemeButton = () => <Example Component={CustomThemeButton} />;
+
+customThemeButton.story = {
+  name: 'CustomThemeButton',
+  parameters: {
+    performance: {
+      interactions: interactionTasks,
+    },
+  },
+};
+
+export default customThemeButton;

package/__perf__/customised.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import AddIcon from '@atlaskit/icon/glyph/editor/add';
+
+import { CustomThemeButton } from '../src';
+
+export default () => (
+  <CustomThemeButton iconBefore={<AddIcon label="add" />}>
+    Button
+  </CustomThemeButton>
+);

package/__perf__/default.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import Button from '../src';
+
+export default () => <Button>Default button</Button>;

package/__perf__/loading.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import { LoadingButton } from '../src';
+
+export default () => <LoadingButton isLoading>Loading button</LoadingButton>;

package/__perf__/utils/example-runner.tsx

@@ -0,0 +1,48 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+
+import type { ButtonProps } from '../../src';
+
+export default function Example({
+  Component,
+}: {
+  Component: ButtonProps['component'];
+}) {
+  const [isSelected, setIsSelected] = useState<boolean>(false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
+  const ref = useRef<HTMLElement>(null);
+
+  useLayoutEffect(() => {
+    function toggleSelect() {
+      setIsSelected((value) => !value);
+    }
+    function toggleDisabled() {
+      setIsDisabled((value) => !value);
+    }
+
+    const el: HTMLElement | null = ref.current;
+    if (!el) {
+      throw new Error('Could not find button ref');
+    }
+
+    el.addEventListener('toggle-select', toggleSelect);
+    el.addEventListener('toggle-disabled', toggleDisabled);
+
+    return () => {
+      el.removeEventListener('toggle-select', toggleSelect);
+      el.removeEventListener('toggle-disabled', toggleDisabled);
+    };
+  }, []);
+
+  return (
+    // @ts-ignore
+    <Component
+      ref={ref}
+      testId="my-button"
+      isSelected={isSelected}
+      isDisabled={isDisabled}
+      data-is-selected={isSelected}
+    >
+      Hello world
+    </Component>
+  );
+}

package/__perf__/utils/interaction-tasks.tsx

@@ -0,0 +1,98 @@
+import { fireEvent } from '@testing-library/react';
+import {
+  InteractionTaskArgs,
+  PublicInteractionTask,
+} from 'storybook-addon-performance';
+
+export const interactionTasks: PublicInteractionTask[] = [
+  {
+    name: 'Click a button',
+    description:
+      'Recording how long a mousedown + click event take to be processed',
+    run: async ({ container }: InteractionTaskArgs): Promise<void> => {
+      const button: HTMLElement | null = container.querySelector(
+        '[data-testid="my-button"]',
+      );
+      if (button == null) {
+        throw new Error('Could not find button element');
+      }
+
+      fireEvent.mouseDown(button);
+      fireEvent.click(button);
+    },
+  },
+  {
+    name: 'Focus on button',
+    description: 'Focus on a button and wait for layout and paint to finish',
+    run: async ({
+      container,
+      controls,
+    }: InteractionTaskArgs): Promise<void> => {
+      const button: HTMLElement | null = container.querySelector(
+        '[data-testid="my-button"]',
+      );
+      if (button == null) {
+        throw new Error('Could not find button element');
+      }
+
+      await controls.time(async () => {
+        fireEvent.focus(button);
+        fireEvent.blur(button);
+      });
+    },
+  },
+  {
+    name: 'Select button',
+    description: 'Trigger the selection of a button',
+    run: async ({
+      container,
+      controls,
+    }: InteractionTaskArgs): Promise<void> => {
+      const button: HTMLElement | null = container.querySelector(
+        '[data-testid="my-button"]',
+      );
+      if (button == null) {
+        throw new Error('Could not find button element');
+      }
+
+      if (button.getAttribute('data-is-selected') !== 'false') {
+        throw new Error('Should not start selected');
+      }
+
+      await controls.time(async () => {
+        fireEvent(button, new Event('toggle-select'));
+      });
+
+      if (button.getAttribute('data-is-selected') !== 'true') {
+        throw new Error('Should now be selected');
+      }
+    },
+  },
+  {
+    name: 'Disable button',
+    description: 'Trigger the disabling of a button',
+    run: async ({
+      container,
+      controls,
+    }: InteractionTaskArgs): Promise<void> => {
+      const button: HTMLElement | null = container.querySelector(
+        '[data-testid="my-button"]',
+      );
+      if (button == null) {
+        throw new Error('Could not find button element');
+      }
+
+      if (button.hasAttribute('disabled')) {
+        throw new Error('Should not start disabled');
+      }
+
+      await controls.time(async () => {
+        fireEvent(button, new Event('toggle-disabled'));
+      });
+
+      if (!button.hasAttribute('disabled')) {
+        throw new Error('Should now be disabled');
+      }
+    },
+  },
+];

package/button-group/package.json

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

package/codemods/15.0.0-lite-mode.ts

@@ -0,0 +1,49 @@
+import { API, FileInfo, Options } from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+import { changeType, transformButton } from './helpers/15.0.0-runner';
+import {
+  getDefaultSpecifierName,
+  Nullable,
+  shiftDefaultImport,
+} from './helpers/helpers-generic';
+
+export default function transformer(
+  file: FileInfo,
+  { jscodeshift: j }: API,
+  options: Options,
+) {
+  return transformButton({
+    file,
+    j,
+    custom: (base: Collection<any>) => {
+      changeType({
+        j,
+        base,
+        oldName: 'ButtonProps',
+        newName: 'CustomThemeButtonProps',
+        fallbackNameAlias: 'DSCustomThemeButtonProps',
+      });
+
+      const defaultName: Nullable<string> = getDefaultSpecifierName({
+        j,
+        base,
+        packageName: '@atlaskit/button',
+      });
+      if (defaultName == null) {
+        return;
+      }
+
+      shiftDefaultImport({
+        j,
+        base,
+        defaultName,
+        oldPackagePath: '@atlaskit/button',
+        newPackagePath: '@atlaskit/button/custom-theme-button',
+      });
+    },
+  });
+}
+
+// Note: not exporting a 'parser' because doing so
+// will prevent consumers overriding it

package/codemods/15.1.1-data-testid.ts

@@ -0,0 +1,173 @@
+import core, { API, FileInfo, Options } from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+import {
+  addCommentToStartOfFile,
+  getDefaultSpecifierName,
+  getJSXAttributesByName,
+  hasImportDeclaration,
+  Nullable,
+} from './helpers/helpers-generic';
+const relevantEntryPoints = [
+  '@atlaskit/button',
+  '@atlaskit/button/standard-button',
+  '@atlaskit/button/loading-button',
+  '@atlaskit/button/custom-theme-button',
+];
+
+function isRelevant(j: core.JSCodeshift, source: string): boolean {
+  return relevantEntryPoints.some((entryPoint) =>
+    hasImportDeclaration(j, source, entryPoint),
+  );
+}
+
+function renameProp({
+  j,
+  base,
+  component,
+  attributeFrom,
+  attributeTo,
+}: {
+  j: core.JSCodeshift;
+  base: Collection<any>;
+  component: string;
+  attributeFrom: string;
+  attributeTo: string;
+}) {
+  base.findJSXElements(component).forEach((element) => {
+    const first = getJSXAttributesByName({
+      j,
+      element: element.value,
+      attributeName: attributeFrom,
+    });
+
+    // not using attribute
+    if (!first.length) {
+      return;
+    }
+
+    // let's check to see if they are using the to attribute
+    const second = getJSXAttributesByName({
+      j,
+      element: element.value,
+      attributeName: attributeTo,
+    });
+
+    // if the attribute we are moving to already exists we are in trouble
+    if (second.length) {
+      addCommentToStartOfFile({
+        j,
+        base,
+        message: `
+        Cannot rename ${attributeFrom} to ${attributeTo} on ${component}.
+        A ${component} was detected with both ${attributeFrom} and ${attributeTo} props.
+        Please remove the ${attributeFrom} prop and check your tests`,
+      });
+      return;
+    }
+
+    first.find(j.JSXIdentifier).replaceWith(j.jsxIdentifier(attributeTo));
+  });
+}
+
+export function getNamedImportName({
+  j,
+  base,
+  importPath,
+  originalName,
+}: {
+  j: core.JSCodeshift;
+  base: Collection<any>;
+  originalName: string;
+  importPath: string;
+}): Nullable<string> {
+  const name: Nullable<string> =
+    base
+      .find(j.ImportDeclaration)
+      .filter((path) => path.node.source.value === importPath)
+      .find(j.ImportSpecifier)
+      .nodes()
+      .map(
+        (specifier): Nullable<string> => {
+          if (specifier.imported.name === originalName) {
+            // aliased
+            if (specifier.local) {
+              return specifier.local.name;
+            }
+            // not aliased
+            return originalName;
+          }
+
+          return null;
+        },
+      )
+      .filter(Boolean)[0] || null;
+  return name;
+}
+
+export default function transformer(
+  file: FileInfo,
+  { jscodeshift: j }: API,
+  options: Options,
+) {
+  if (!isRelevant(j, file.source)) {
+    return file.source;
+  }
+
+  const base: Collection<any> = j(file.source);
+
+  // renaming default imports for entry points
+  relevantEntryPoints.forEach((importPath) => {
+    const defaultName: Nullable<string> = getDefaultSpecifierName({
+      j,
+      base,
+      packageName: importPath,
+    });
+
+    if (defaultName != null) {
+      renameProp({
+        j,
+        base,
+        component: defaultName,
+        attributeFrom: 'data-testid',
+        attributeTo: 'testId',
+      });
+    }
+  });
+
+  // named imports
+  const standard = getNamedImportName({
+    j,
+    base,
+    importPath: '@atlaskit/button',
+    originalName: 'StandardButton',
+  });
+  const loading = getNamedImportName({
+    j,
+    base,
+    importPath: '@atlaskit/button',
+    originalName: 'LoadingButton',
+  });
+  const customTheme = getNamedImportName({
+    j,
+    base,
+    importPath: '@atlaskit/button',
+    originalName: 'CustomThemeButton',
+  });
+  [standard, loading, customTheme].forEach((name) => {
+    if (name != null) {
+      renameProp({
+        j,
+        base,
+        component: name,
+        attributeFrom: 'data-testid',
+        attributeTo: 'testId',
+      });
+    }
+  });
+
+  return base.toSource({ quote: 'single' });
+}
+
+// Note: not exporting a 'parser' because doing so
+// will prevent consumers overriding it