feat(cli): add codemod for styles prop

beta

MIGRATION.md

@@ -127,7 +127,7 @@ The affected components are: Badge, Blockquote, Button, ButtonGroup, Card, CardF
 - The `flat` **Button** variant has been removed (🤖 _button-variant-enum_)
 - The **LoadingButton**'s exit animations have been removed. An action's success or error result should be communicated outside the button (🤖 _exit-animations_)
 - The **RadioButton** and **Switch** components no longer accept the `onToggle` prop. Use the `onChange` prop instead (🤖 _onchange-prop_)
-- 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 **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_). The `deepRef` prop has been renamed to `ref` (🤖 _input-deepref-prop_)
 - The **Selector** component no longer accepts the `onClick` and `selected` props. Use the `onChange` and `checked` props instead (🤖 _selector-props_). The `value` and `name` have been added as required props.
 - The **RadioButtonGroup** component's `label` property inside the `options` prop has been renamed to `children`.
 - The **IconButton** component's dimensions and style have changed. It is now consistent with the Button component.

src/cli/migrate/__testfixtures__/input-deepref-prop.input.js

@@ -1,17 +1,33 @@
-import React, { useRef } from 'react';
+import React, { useRef, Fragment } from 'react';
 import styled from '@emotion/styled';
-import { Input } from '@sumup/circuit-ui';
+import { Input, TextArea } from '@sumup/circuit-ui';
 
 const Form = () => {
-  const ref = useRef(null);
-  return <Input deepRef={ref} />;
+  const inputRef = useRef(null);
+  const textAreaRef = useRef(null);
+  return (
+    <Fragment>
+      <Input deepRef={inputRef} />
+      <TextArea deepRef={textAreaRef} />
+    </Fragment>
+  );
 };
 
 const RedInput = styled(Input)`
   color: red;
 `;
 
+const RedTextArea = styled(TextArea)`
+  color: red;
+`;
+
 const RedForm = () => {
-  const ref = useRef(null);
-  return <RedInput deepRef={ref} />;
+  const inputRef = useRef(null);
+  const textAreaRef = useRef(null);
+  return (
+    <Fragment>
+      <RedInput deepRef={inputRef} />
+      <RedTextArea deepRef={textAreaRef} />
+    </Fragment>
+  );
 };

src/cli/migrate/__testfixtures__/input-deepref-prop.output.js

@@ -1,17 +1,33 @@
-import React, { useRef } from 'react';
+import React, { useRef, Fragment } from 'react';
 import styled from '@emotion/styled';
-import { Input } from '@sumup/circuit-ui';
+import { Input, TextArea } from '@sumup/circuit-ui';
 
 const Form = () => {
-  const ref = useRef(null);
-  return <Input ref={ref} />;
+  const inputRef = useRef(null);
+  const textAreaRef = useRef(null);
+  return (
+    <Fragment>
+      <Input ref={inputRef} />
+      <TextArea ref={textAreaRef} />
+    </Fragment>
+  );
 };
 
 const RedInput = styled(Input)`
   color: red;
 `;
 
+const RedTextArea = styled(TextArea)`
+  color: red;
+`;
+
 const RedForm = () => {
-  const ref = useRef(null);
-  return <RedInput ref={ref} />;
+  const inputRef = useRef(null);
+  const textAreaRef = useRef(null);
+  return (
+    <Fragment>
+      <RedInput ref={inputRef} />
+      <RedTextArea ref={textAreaRef} />
+    </Fragment>
+  );
 };

src/cli/migrate/__testfixtures__/input-styles-prop.input.js

@@ -0,0 +1,42 @@
+import React, { useRef } from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
+import { Input, TextArea } from '@sumup/circuit-ui';
+
+const Form = () => (
+  <>
+    <Input
+      wrapperStyles={theme => css`
+        color: red;
+      `}
+    />
+    <TextArea
+      wrapperStyles={theme => css`
+        color: red;
+      `}
+    />
+  </>
+);
+
+const RedInput = styled(Input)`
+  color: red;
+`;
+
+const RedTextArea = styled(TextArea)`
+  color: red;
+`;
+
+const RedForm = () => (
+  <>
+    <RedInput
+      wrapperStyles={theme => css`
+        color: red;
+      `}
+    />
+    <RedTextArea
+      wrapperStyles={theme => css`
+        color: red;
+      `}
+    />
+  </>
+);

src/cli/migrate/__testfixtures__/input-styles-prop.output.js

@@ -0,0 +1,42 @@
+import React, { useRef } from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
+import { Input, TextArea } from '@sumup/circuit-ui';
+
+const Form = () => (
+  <>
+    <Input
+      labelStyles={theme => css`
+        color: red;
+      `}
+    />
+    <TextArea
+      labelStyles={theme => css`
+        color: red;
+      `}
+    />
+  </>
+);
+
+const RedInput = styled(Input)`
+  color: red;
+`;
+
+const RedTextArea = styled(TextArea)`
+  color: red;
+`;
+
+const RedForm = () => (
+  <>
+    <RedInput
+      labelStyles={theme => css`
+        color: red;
+      `}
+    />
+    <RedTextArea
+      labelStyles={theme => css`
+        color: red;
+      `}
+    />
+  </>
+);

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

@@ -24,5 +24,6 @@ defineTest(__dirname, 'as-prop');
 defineTest(__dirname, 'selector-props');
 defineTest(__dirname, 'exit-animations');
 defineTest(__dirname, 'input-deepref-prop');
+defineTest(__dirname, 'input-styles-prop');
 defineTest(__dirname, 'component-names-v2');
 defineTest(__dirname, 'component-static-properties');

src/cli/migrate/input-deepref-prop.ts

@@ -13,15 +13,16 @@
  * limitations under the License.
  */
 
-import { Transform } from 'jscodeshift';
+import { Transform, JSCodeshift, Collection } from 'jscodeshift';
 
 import { renameJSXAttribute, findLocalNames } from './utils';
 
-const transform: Transform = (file, api) => {
-  const j = api.jscodeshift;
-  const root = j(file.source);
-
-  const components = findLocalNames(j, root, 'Input');
+function transformFactory(
+  j: JSCodeshift,
+  root: Collection,
+  componentName: string
+): void {
+  const components = findLocalNames(j, root, componentName);
 
   if (!components) {
     return;
@@ -30,6 +31,14 @@ const transform: Transform = (file, api) => {
   components.forEach(component => {
     renameJSXAttribute(j, root, component, 'deepRef', 'ref');
   });
+}
+
+const transform: Transform = (file, api) => {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  transformFactory(j, root, 'Input');
+  transformFactory(j, root, 'TextArea');
 
   return root.toSource();
 };

src/cli/migrate/input-styles-prop.ts

@@ -0,0 +1,46 @@
+/**
+ * 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 { renameJSXAttribute, findLocalNames } from './utils';
+
+function transformFactory(
+  j: JSCodeshift,
+  root: Collection,
+  componentName: string
+): void {
+  const components = findLocalNames(j, root, componentName);
+
+  if (!components) {
+    return;
+  }
+
+  components.forEach(component => {
+    renameJSXAttribute(j, root, component, 'wrapperStyles', 'labelStyles');
+  });
+}
+
+const transform: Transform = (file, api) => {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  transformFactory(j, root, 'Input');
+  transformFactory(j, root, 'TextArea');
+
+  return root.toSource();
+};
+
+export default transform;