@atlaskit/lozenge 11.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 @@
+# Lozenge
+
+A lozenge is a visual indicator used to highlight an item's status for quick recognition.
+
+## Installation
+
+```sh
+yarn add @atlaskit/lozenge
+```
+
+## Usage
+
+Detailed docs and example usage can be found [here](https://atlassian.design/components/lozenge/).

package/__perf__/default.tsx

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

package/codemods/11.0.0-lite-mode.tsx

@@ -0,0 +1,18 @@
+import { JSCodeshift } from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+import {
+  createTransformer,
+  hasImportDeclaration,
+} from '@atlaskit/codemod-utils';
+
+import moveObjectAppearanceToStyle from './migrations/11.0.0-lite-mode/move-object-appearance-to-style';
+import removeThemeProp from './migrations/11.0.0-lite-mode/remove-theme-prop';
+
+const transformer = createTransformer(
+  [moveObjectAppearanceToStyle, removeThemeProp],
+  (j: JSCodeshift, source: Collection<Node>) =>
+    hasImportDeclaration(j, source, '@atlaskit/lozenge'),
+);
+
+export default transformer;

package/codemods/__tests__/11.0.0-move-object-appearance-to-style.test.tsx

@@ -0,0 +1,172 @@
+import transformer from '../11.0.0-lite-mode';
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('Lozenge codemod', () => {
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Lozenge from '@atlaskit/lozenge';
+
+    const App = () => {
+      return (
+        <Lozenge
+          appearance={{ backgroundColor: 'yellow', textColor: 'blue' }}
+        >
+          Custom
+        </Lozenge>
+      );
+    }
+    `,
+    `
+    import React from 'react';
+    import Lozenge from '@atlaskit/lozenge';
+
+    const App = () => {
+      return (
+        <Lozenge
+          style={{
+            backgroundColor: { backgroundColor: 'yellow', textColor: 'blue' }["backgroundColor"],
+            color: { backgroundColor: 'yellow', textColor: 'blue' }["textColor"]
+          }}
+        >
+          Custom
+        </Lozenge>
+      );
+    }
+    `,
+    `should move object appearance values to style prop`,
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Lozenge from '@atlaskit/custom-lozenge';
+
+    const App = () => {
+      return (
+        <Lozenge
+          appearance={{ backgroundColor: 'yellow', textColor: 'blue' }}
+        >
+          Custom
+        </Lozenge>
+      );
+    }
+    `,
+    `
+    import React from 'react';
+    import Lozenge from '@atlaskit/custom-lozenge';
+
+    const App = () => {
+      return (
+        <Lozenge
+          appearance={{ backgroundColor: 'yellow', textColor: 'blue' }}
+        >
+          Custom
+        </Lozenge>
+      );
+    }
+    `,
+    `should not be modified when not imported from "@atlaskit/lozenge"`,
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Lozenge from '@atlaskit/lozenge';
+
+    const App = () => {
+      return (
+        <Lozenge appearance='default'>
+          Custom
+        </Lozenge>
+      );
+    }
+    `,
+    `
+    import React from 'react';
+    import Lozenge from '@atlaskit/lozenge';
+
+    const App = () => {
+      return (
+        <Lozenge appearance='default'>
+          Custom
+        </Lozenge>
+      );
+    }
+    `,
+    `should not be modified when appearance prop is not an object`,
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Lozenge from '@atlaskit/lozenge';
+
+    const App = (props) => {
+      return (
+        <Lozenge appearance={props.appearance}>
+          Custom
+        </Lozenge>
+      );
+    }
+    `,
+    `
+    import React from 'react';
+    import Lozenge from '@atlaskit/lozenge';
+
+    const App = (props) => {
+      return (
+        <Lozenge appearance={props.appearance}>
+          Custom
+        </Lozenge>
+      );
+    }
+    `,
+    `should not be modified when appearance prop is dynamic`,
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Lozenge from '@atlaskit/lozenge';
+
+    const App = () => {
+      return (
+        <Lozenge
+          appearance="default"
+          style={{ backgroundColor: 'red' }}
+        >
+          Custom
+        </Lozenge>
+      );
+    }
+    `,
+    `
+    import React from 'react';
+    import Lozenge from '@atlaskit/lozenge';
+
+    const App = () => {
+      return (
+        <Lozenge
+          appearance="default"
+          style={{ backgroundColor: 'red' }}
+        >
+          Custom
+        </Lozenge>
+      );
+    }
+    `,
+    `should not be modified when appearance prop is not type of object and style prop is also present`,
+  );
+});

package/codemods/__tests__/11.0.0-remove-theme-prop.test.tsx

@@ -0,0 +1,93 @@
+import transformer from '../11.0.0-lite-mode';
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('remove theme prop', () => {
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Lozenge from '@atlaskit/lozenge';
+    import { useTheme } from '../../theme';
+
+    const LozengeTheme = (themeProps) => ({
+      dark: { backgroundColor: 'blue', color: 'white' },
+      light: { backgroundColor: 'blue', color: 'white' },
+    });
+
+    const App = () => {
+      return (
+        <Lozenge theme={useTheme(LozengeTheme)}>
+          Custom
+        </Lozenge>
+      );
+    }
+    `,
+    `
+    /* TODO: (from codemod) 
+    We could not automatically convert this code to the new API.
+
+    This file uses \`Lozenge\`’s \`theme\` prop. This has been deprecated and removed. 
+
+    You will have to change your usage to use the \`style\` prop.
+    See the example on https://atlaskit.atlassian.com/examples/design-system/lozenge/with-custom-theme */
+    import React from 'react';
+    import Lozenge from '@atlaskit/lozenge';
+    import { useTheme } from '../../theme';
+
+    const LozengeTheme = (themeProps) => ({
+      dark: { backgroundColor: 'blue', color: 'white' },
+      light: { backgroundColor: 'blue', color: 'white' },
+    });
+
+    const App = () => {
+      return (
+        <Lozenge>
+          Custom
+        </Lozenge>
+      );
+    }
+    `,
+    `should remove theme if it is defined inline`,
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Lozenge from '@atlaskit/lozenge';
+    import { lozengeTheme } from '../../theme';
+
+    const App = () => {
+      return (
+        <Lozenge theme={lozengeTheme}>
+          Custom
+        </Lozenge>
+      );
+    }
+    `,
+    `
+    /* TODO: (from codemod) 
+    We could not automatically convert this code to the new API.
+
+    This file uses \`Lozenge\`’s \`theme\` prop. This has been deprecated and removed. 
+
+    You will have to change your usage to use the \`style\` prop.
+    See the example on https://atlaskit.atlassian.com/examples/design-system/lozenge/with-custom-theme */
+    import React from 'react';
+    import Lozenge from '@atlaskit/lozenge';
+    import { lozengeTheme } from '../../theme';
+
+    const App = () => {
+      return (
+        <Lozenge>
+          Custom
+        </Lozenge>
+      );
+    }
+    `,
+    `should remove theme if it is imported`,
+  );
+});

package/codemods/migrations/11.0.0-lite-mode/move-object-appearance-to-style.tsx

@@ -0,0 +1,92 @@
+import { ASTPath, JSCodeshift, JSXAttribute, JSXElement } from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+import {
+  getDefaultSpecifier,
+  getJSXAttributesByName,
+} from '@atlaskit/codemod-utils';
+
+const APPEARANCE_PROP_NAME = 'appearance';
+
+const STYLE_PROP_NAME = 'style';
+
+const moveObjectAppearanceToStyle = (
+  j: JSCodeshift,
+  source: Collection<Node>,
+) => {
+  const defaultSpecifier = getDefaultSpecifier(j, source, '@atlaskit/lozenge');
+
+  if (!defaultSpecifier) {
+    return;
+  }
+
+  source
+    .findJSXElements(defaultSpecifier)
+    .forEach((element: ASTPath<JSXElement>) => {
+      getJSXAttributesByName(j, element, APPEARANCE_PROP_NAME).forEach(
+        (attribute: ASTPath<JSXAttribute>) => {
+          const { value } = attribute.node;
+
+          if (!value) {
+            return;
+          }
+
+          switch (value.type) {
+            case 'JSXExpressionContainer':
+              const { expression: appearanceExpression } = value;
+              if (appearanceExpression.type === 'ObjectExpression') {
+                const styleAttributes = getJSXAttributesByName(
+                  j,
+                  element,
+                  STYLE_PROP_NAME,
+                );
+
+                if (styleAttributes.length === 0) {
+                  j(element)
+                    .find(j.JSXOpeningElement)
+                    .forEach((openingElement) => {
+                      openingElement.node.attributes?.push(
+                        j.jsxAttribute(
+                          j.jsxIdentifier(STYLE_PROP_NAME),
+                          j.jsxExpressionContainer(
+                            getMappedAppearance(j, appearanceExpression),
+                          ),
+                        ),
+                      );
+                    });
+                  j(attribute).remove();
+                }
+              }
+              break;
+          }
+        },
+      );
+    });
+};
+
+function getMappedAppearance(
+  j: JSCodeshift,
+  expression: Parameters<typeof j.memberExpression>[0],
+) {
+  const backgroundColorMemberExpression = j.memberExpression(
+    expression,
+    j.stringLiteral('backgroundColor'),
+  );
+  backgroundColorMemberExpression.computed = true;
+
+  const textColorMemberExpression = j.memberExpression(
+    expression,
+    j.stringLiteral('textColor'),
+  );
+  textColorMemberExpression.computed = true;
+
+  return j.objectExpression([
+    j.objectProperty(
+      j.identifier('backgroundColor'),
+      backgroundColorMemberExpression,
+    ),
+    j.objectProperty(j.identifier('color'), textColorMemberExpression),
+  ]);
+}
+
+export default moveObjectAppearanceToStyle;

package/codemods/migrations/11.0.0-lite-mode/remove-theme-prop.tsx

@@ -0,0 +1,18 @@
+import { createRemoveFuncWithDefaultSpecifierFor } from '../../utils';
+
+const comment = `
+We could not automatically convert this code to the new API.
+
+This file uses \`Lozenge\`’s \`theme\` prop. This has been deprecated and removed. 
+
+You will have to change your usage to use the \`style\` prop.
+See the example on https://atlaskit.atlassian.com/examples/design-system/lozenge/with-custom-theme
+`;
+
+const removeThemeProp = createRemoveFuncWithDefaultSpecifierFor(
+  '@atlaskit/lozenge',
+  'theme',
+  comment,
+);
+
+export default removeThemeProp;

package/codemods/utils.ts

@@ -0,0 +1,30 @@
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+import core from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+import {
+  addCommentToStartOfFile,
+  getDefaultSpecifier,
+  getJSXAttributesByName,
+} from '@atlaskit/codemod-utils';
+
+export const createRemoveFuncWithDefaultSpecifierFor = (
+  component: string,
+  prop: string,
+  comment?: string,
+) => (j: core.JSCodeshift, source: Collection<Node>) => {
+  const specifier = getDefaultSpecifier(j, source, component);
+
+  if (!specifier) {
+    return;
+  }
+
+  source.findJSXElements(specifier).forEach((element) => {
+    getJSXAttributesByName(j, element, prop).forEach((attribute: any) => {
+      if (comment) {
+        addCommentToStartOfFile({ j, base: source, message: comment });
+      }
+      j(attribute).remove();
+    });
+  });
+};