feat(cli): add button-size-tera codemod

beta

MIGRATION.md

@@ -136,6 +136,7 @@ The affected components are: Badge, Blockquote, Button, ButtonGroup, Card, CardF
 - The `primary` and `secondary` **Button** boolean props have been removed. Use the `variant` enum prop instead (🤖 _button-variant-enum_)
 - The `plain` **Button** prop has been removed. Use the new Anchor component or the `tertiary` Button variant instead.
 - The `flat` **Button** variant has been removed (🤖 _button-variant-enum_)
+- The `giga` **Button** size has been removed. Use the `mega` size (default) instead (🤖 _button-size-giga_)
 - The **LoadingButton**'s exit animations have been removed. An action's success or error result should be communicated outside the button (🤖 _exit-animations_)
 - The **Input**, **TextArea**, and **Select** components have the label built in now. Use the `label` prop to pass in the label content and remove the Label component from your code. The `label` prop will become required in the next major version of Circuit UI.
 - The **Input** and **Textarea** components no longer accept `*ClassName` props. Emotion 10 uses style objects instead of class names. Use the `*Styles` props instead. The `wrapperStyles` prop has been renamed to `labelStyles` (🤖 _input-styles-prop_).

src/cli/migrate/__testfixtures__/button-size-giga.input.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Button } from '@sumup/circuit-ui';
+
+const Large = () => <Button size="giga">large</Button>;
+const Small = () => <Button size="kilo">small</Button>;
+
+const RedButton = styled(Button)`
+  color: red;
+`;
+
+const Styled = () => <RedButton size="giga">red</RedButton>;

src/cli/migrate/__testfixtures__/button-size-giga.output.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Button } from '@sumup/circuit-ui';
+
+const Large = () => <Button size="mega">large</Button>;
+const Small = () => <Button size="kilo">small</Button>;
+
+const RedButton = styled(Button)`
+  color: red;
+`;
+
+const Styled = () => <RedButton size="mega">red</RedButton>;

src/cli/migrate/__tests__/transforms.spec.js

@@ -18,6 +18,7 @@ import { defineTest } from 'jscodeshift/dist/testUtils';
 jest.autoMockOff();
 
 defineTest(__dirname, 'button-variant-enum');
+defineTest(__dirname, 'button-size-giga');
 defineTest(__dirname, 'list-variant-enum');
 defineTest(__dirname, 'onchange-prop');
 defineTest(__dirname, 'as-prop');

src/cli/migrate/button-size-giga.ts

@@ -0,0 +1,60 @@
+/**
+ * Copyright 2020, SumUp 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.
+ */
+
+import { Transform, JSCodeshift, Collection } from 'jscodeshift';
+
+import { findLocalNames } from './utils';
+
+function transformFactory(
+  j: JSCodeshift,
+  root: Collection,
+  buttonName: string,
+): void {
+  const components = findLocalNames(j, root, buttonName);
+
+  if (!components) {
+    return;
+  }
+
+  components.forEach((component) => {
+    root
+      .findJSXElements(component)
+      .find(j.JSXAttribute, {
+        name: {
+          type: 'JSXIdentifier',
+          name: 'size',
+        },
+        value: {
+          type: 'Literal',
+          value: 'giga',
+        },
+      })
+      .replaceWith(() =>
+        j.jsxAttribute(j.jsxIdentifier('size'), j.stringLiteral('mega')),
+      );
+  });
+}
+
+const transform: Transform = (file, api) => {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  transformFactory(j, root, 'Button');
+  transformFactory(j, root, 'LoadingButton');
+
+  return root.toSource();
+};
+
+export default transform;

src/cli/migrate/button-variant-enum.ts

@@ -54,8 +54,6 @@ function transformFactory(
         },
       })
       .remove();
-
-    // TODO: Replace plain variant with Anchor component
   });
 }