@atlaskit/textfield 5.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 @@
+# Textfield
+
+A text field is an input that allows a user to write or edit text.
+
+## Installation
+
+```sh
+yarn add @atlaskit/textfield
+```
+
+## Usage
+
+Detailed docs and example usage can be found [here](https://atlassian.design/components/textfield/).

package/__perf__/default.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import Textfield from '../src';
+
+export default () => <Textfield name="basic" />;

package/__perf__/examples.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { fireEvent } from '@testing-library/dom';
+import {
+  InteractionTaskArgs,
+  PublicInteractionTask,
+} from 'storybook-addon-performance';
+
+import Texfield from '../src';
+
+const testId = 'text-field-test-id';
+
+const getLastTexfield = (container: HTMLElement) => {
+  const textField = container.querySelectorAll(`[data-testId="${testId}"]`);
+  return textField[textField.length - 1];
+};
+
+const textField = () => {
+  return <Texfield placeholder="new texfield" testId={testId} width="large" />;
+};
+
+const interactionTasks: PublicInteractionTask[] = [
+  {
+    name: 'Focus',
+    description: 'Render texfield and make input focus',
+    run: async ({ container }: InteractionTaskArgs): Promise<void> => {
+      const texfield = getLastTexfield(container);
+      fireEvent.focus(texfield);
+    },
+  },
+  {
+    name: 'Blur',
+    description: 'Render texfield and make input blur',
+    run: async ({ container }: InteractionTaskArgs): Promise<void> => {
+      const texfield = getLastTexfield(container);
+      fireEvent.blur(texfield);
+    },
+  },
+  {
+    name: 'OnChange',
+    description: 'Render texfield and make input change',
+    run: async ({ container }: InteractionTaskArgs): Promise<void> => {
+      const texfield = getLastTexfield(container);
+      fireEvent.change(texfield, { target: { value: 'foo' } });
+    },
+  },
+];
+
+textField.story = {
+  name: 'texfield',
+  parameters: {
+    performance: {
+      interactions: interactionTasks,
+    },
+  },
+};
+
+export default textField;

package/codemods/5.0.0-lite-mode.tsx

@@ -0,0 +1,16 @@
+import { removeThemeImports } from './migrations/remove-imports';
+import { removeThemeProp } from './migrations/remove-props';
+import {
+  renameThemeAppearanceImport,
+  renamethemeTokensImport,
+} from './migrations/rename-imports';
+import { createTransformer } from './migrations/utils';
+
+const transformer = createTransformer('@atlaskit/textfield', [
+  removeThemeProp,
+  removeThemeImports,
+  renamethemeTokensImport,
+  renameThemeAppearanceImport,
+]);
+
+export default transformer;

package/codemods/__tests__/5.0.0-lite-mode.tsx

@@ -0,0 +1,87 @@
+jest.autoMockOff();
+
+import transformer from '../5.0.0-lite-mode';
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('TextField code-mods', () => {
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+      import Textfield, { ThemeProps, ThemeAppearance , themeTokens as ColorTokens, ThemeTokens } from '@atlaskit/textfield';
+      import customeTheme from './theme';
+      import React from 'react';
+
+      const SimpleTextfield = () => {
+        return (
+          <Textfield
+            theme={customTheme}
+          />
+        );
+      }
+    `,
+    `
+      /* TODO: (from codemod) 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. */
+      /* TODO: (from codemod) This file uses exports used to help theme @atlaskit/textfield which
+      has now been removed due to its poor performance characteristics. */
+      import Textfield, { Appearance, TextFieldColors as ColorTokens } from '@atlaskit/textfield';
+      import customeTheme from './theme';
+      import React from 'react';
+
+      const SimpleTextfield = () => {
+        return <Textfield />;
+      }
+    `,
+    'should remove theme & its imports from Textfield and leave a comment',
+  );
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+      import Textfield, { ThemeProps, ThemeTokens } from '@atlaskit/textfield';
+      import React from 'react';
+
+      const SimpleTextfield = () => {
+        return (
+          <Textfield
+            theme={(theme, props: ThemeProps) => {
+              const { container, input, ...rest } = theme(props);
+              return {
+                ...rest,
+                container: {
+                  ...container,
+                  padding: 5,
+                  border: '2px solid orange',
+                },
+                input: {
+                  ...input,
+                  fontSize: 20,
+                  border: '2px solid green',
+                },
+              };
+            }}
+          />
+        );
+      }
+    `,
+    `
+      /* TODO: (from codemod) 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. */
+      /* TODO: (from codemod) This file uses exports used to help theme @atlaskit/textfield which
+      has now been removed due to its poor performance characteristics. */
+      import Textfield from '@atlaskit/textfield';
+      import React from 'react';
+
+      const SimpleTextfield = () => {
+        return <Textfield />;
+      }
+    `,
+    'should remove theme prop & its imports from Textfield and leave a comment',
+  );
+});

package/codemods/__tests__/remove-imports.tsx

@@ -0,0 +1,64 @@
+jest.autoMockOff();
+
+import { removeThemeImports } from '../migrations/remove-imports';
+import { createTransformer } from '../migrations/utils';
+
+const transformer = createTransformer('@atlaskit/textfield', [
+  removeThemeImports,
+]);
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+const importToDoComment = `
+/* TODO: (from codemod) This file uses exports used to help theme @atlaskit/textfield which
+    has now been removed due to its poor performance characteristics. */`;
+
+describe('Remove imports', () => {
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import Textfield, { Theme, ThemeProps, ThemeTokens } from '@atlaskit/textfield';
+    `,
+    `
+    ${importToDoComment}
+    import Textfield from '@atlaskit/textfield';
+  `,
+    'should remove theme imports from Textfield and leave a comment',
+  );
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import Textfield, { ThemeProps as TextfieldThemeProp, Theme as TextFieldTheme, ThemeTokens as TextfieldThemeTokens} from '@atlaskit/textfield';
+    `,
+    `
+    ${importToDoComment}
+    import Textfield from '@atlaskit/textfield';
+  `,
+    'should remove theme imports with alias name from Textfield and leave a comment',
+  );
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import { TextFieldProps, ThemeProps, Theme, ThemeTokens } from '@atlaskit/textfield';
+    `,
+    `
+    ${importToDoComment}
+    import { TextFieldProps } from '@atlaskit/textfield';
+    `,
+    'should remove theme imports & leave other imports from Textfield and leave a comment',
+  );
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import { ThemeProps, ThemeTokens, Theme } from '@atlaskit/textfield';
+    `,
+    `
+    ${importToDoComment}
+    `,
+    'should remove theme imports & remove whole line if no default import from Textfield and leave a comment',
+  );
+});

package/codemods/__tests__/remove-prop.tsx

@@ -0,0 +1,142 @@
+jest.autoMockOff();
+
+import { removeThemeProp } from '../migrations/remove-props';
+import { createTransformer } from '../migrations/utils';
+
+const transformer = createTransformer('@atlaskit/textfield', [removeThemeProp]);
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+const themeToDoComment = `
+/* TODO: (from codemod) 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. */`;
+
+describe('Remove prop', () => {
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Textfield from '@atlaskit/textfield';
+    import customeTheme from './theme';
+
+    const SimpleTextfield = () => {
+      return (
+        <Textfield
+          theme={customTheme}
+        />
+      );
+    }
+  `,
+    `
+    ${themeToDoComment}
+    import React from 'react';
+    import Textfield from '@atlaskit/textfield';
+    import customeTheme from './theme';
+
+    const SimpleTextfield = () => {
+      return <Textfield />;
+    }
+  `,
+    'should remove theme from Textfield and leave a comment',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import TextField from '@atlaskit/textfield';
+    import customeTheme from './theme';
+
+    const SimpleTextfield = () => {
+      return (
+        <TextField
+          theme={customTheme}
+        />
+      );
+    }
+  `,
+    `
+    ${themeToDoComment}
+    import React from 'react';
+    import TextField from '@atlaskit/textfield';
+    import customeTheme from './theme';
+
+    const SimpleTextfield = () => {
+      return <TextField />;
+    }
+  `,
+    'should remove theme from TextField and leave a comment',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Textfield from '@atlaskit/textfield';
+    import customeTheme from './theme';
+
+    const SimpleTextfield = () => {
+      return (
+        <div>
+          <Textfield
+            theme={customTheme}
+          />
+          <Textfield
+            theme={customTheme}
+          />
+        </div>
+      );
+    }
+  `,
+    `
+    ${themeToDoComment}
+    import React from 'react';
+    import Textfield from '@atlaskit/textfield';
+    import customeTheme from './theme';
+
+    const SimpleTextfield = () => {
+      return (
+        <div>
+          <Textfield />
+          <Textfield />
+        </div>
+      );
+    }
+  `,
+    'should remove 2 usages of theme and add 1 comment',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Foo from '@atlaskit/textfield';
+    import customeTheme from './theme';
+
+    const SimpleTextfield = () => {
+      return (
+        <Foo
+          theme={customeTheme}
+        />
+      );
+    }
+  `,
+    `
+    ${themeToDoComment}
+    import React from 'react';
+    import Foo from '@atlaskit/textfield';
+    import customeTheme from './theme';
+
+    const SimpleTextfield = () => {
+      return <Foo />;
+    }
+  `,
+    'should remove theme prop when using an aliased name',
+  );
+});

package/codemods/__tests__/rename-imports.tsx

@@ -0,0 +1,85 @@
+jest.autoMockOff();
+
+import {
+  renameThemeAppearanceImport,
+  renamethemeTokensImport,
+} from '../migrations/rename-imports';
+import { createTransformer } from '../migrations/utils';
+
+const transformer = createTransformer('@atlaskit/textfield', [
+  renamethemeTokensImport,
+  renameThemeAppearanceImport,
+]);
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('Rename imports', () => {
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import { themeTokens, ThemeAppearance } from '@atlaskit/textfield';
+    `,
+    `
+    import { TextFieldColors, Appearance } from '@atlaskit/textfield';
+    `,
+    'should rename themeTokens & ThemeAppearance to TextFieldColors & Appearance',
+  );
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import Textfield, { ThemeAppearance, themeTokens } from '@atlaskit/textfield';
+    `,
+    `
+    import Textfield, { Appearance, TextFieldColors } from '@atlaskit/textfield';
+  `,
+    'should rename themeTokens & Appearance to TextFieldColors  & Appearance and keep Textfield default import as is',
+  );
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import Textfield, { TextFieldProps, themeTokens } from '@atlaskit/textfield';
+    `,
+    `
+    import Textfield, { TextFieldProps, TextFieldColors } from '@atlaskit/textfield';
+  `,
+    'should rename themeTokens to TextFieldColors and keep TextFieldProps as is',
+  );
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import Textfield, { TextFieldProps, themeTokens as MyLifeMyColors } from '@atlaskit/textfield';
+    `,
+    `
+    import Textfield, { TextFieldProps, TextFieldColors as MyLifeMyColors } from '@atlaskit/textfield';
+  `,
+    'should rename themeTokens to TextFieldColors and keep its alias name as is',
+  );
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import Textfield, { ThemeProps as TextfieldThemeProp,
+      ThemeAppearance as TextFieldAppearance, Theme as TextFieldTheme, themeTokens as MyLifeMyColors, ThemeTokens as TextfieldThemeTokens} from '@atlaskit/textfield';
+    `,
+    `
+    import Textfield, { ThemeProps as TextfieldThemeProp,
+      Appearance as TextFieldAppearance, Theme as TextFieldTheme, TextFieldColors as MyLifeMyColors, ThemeTokens as TextfieldThemeTokens} from '@atlaskit/textfield';
+  `,
+    'should rename themeTokens to TextFieldColors, ThemeAppearance to Appearance and keep its alias name as is even when there are multiple name exports with alias',
+  );
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import { themeTokens, TextFieldProps } from '@atlaskit/textfield';
+    `,
+    `
+    import { TextFieldColors, TextFieldProps } from '@atlaskit/textfield';
+    `,
+    'should rename themeTokens to TextFieldColors and keep TextFieldProps named import as is',
+  );
+});