Add codemod to update lab Button size (#420)

.changeset/gold-llamas-develop.md

@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/ds-codemod': major
+---
+
+Add codemod to update lab Button size

packages/codemod/transforms/web-ui/v1/__testfixtures__/rename-lab-button-size-no-button-import.input.tsx

@@ -0,0 +1,13 @@
+// this is a comment at the beginning of the file
+import * as React from 'react';
+import { Link } from '@utilitywarehouse/web-ui/dist/lab';
+import { Heading } from '@utilitywarehouse/web-ui';
+
+const Component = () => (
+  <div>
+    <Heading></Heading>
+    <Link></Link>
+  </div>
+);
+
+export default Component;

packages/codemod/transforms/web-ui/v1/__testfixtures__/rename-lab-button-size-no-button-import.output.tsx

@@ -0,0 +1,13 @@
+// this is a comment at the beginning of the file
+import * as React from 'react';
+import { Link } from '@utilitywarehouse/web-ui/dist/lab';
+import { Heading } from '@utilitywarehouse/web-ui';
+
+const Component = () => (
+  <div>
+    <Heading></Heading>
+    <Link></Link>
+  </div>
+);
+
+export default Component;

packages/codemod/transforms/web-ui/v1/__testfixtures__/rename-lab-button-size-no-lab-import.input.tsx

@@ -0,0 +1,13 @@
+// this is a comment at the beginning of the file
+import * as React from 'react';
+import { Button } from '@utilitywarehouse/web-ui';
+
+const Component = () => (
+  <div>
+    <Button></Button>
+    <Button size='small'></Button>
+    <Button size='large'></Button>
+  </div>
+);
+
+export default Component;

packages/codemod/transforms/web-ui/v1/__testfixtures__/rename-lab-button-size-no-lab-import.output.tsx

@@ -0,0 +1,13 @@
+// this is a comment at the beginning of the file
+import * as React from 'react';
+import { Button } from '@utilitywarehouse/web-ui';
+
+const Component = () => (
+  <div>
+    <Button></Button>
+    <Button size='small'></Button>
+    <Button size='large'></Button>
+  </div>
+);
+
+export default Component;

packages/codemod/transforms/web-ui/v1/__testfixtures__/rename-lab-button-size-responsive.input.tsx

@@ -0,0 +1,24 @@
+// this is a comment at the beginning of the file
+import * as React from 'react';
+import { Button } from '@utilitywarehouse/web-ui/dist/lab';
+
+const Component = () => (
+  <div>
+    <Button
+      size={{
+        mobile: 'small',
+        desktop: 'large',
+      }}
+    ></Button>
+    <Button
+      size={{
+        mobile: 'small',
+        tablet: 'large',
+        desktop: 'small',
+        wide: 'large',
+      }}
+    ></Button>
+  </div>
+);
+
+export default Component;

packages/codemod/transforms/web-ui/v1/__testfixtures__/rename-lab-button-size-responsive.output.tsx

@@ -0,0 +1,24 @@
+// this is a comment at the beginning of the file
+import * as React from 'react';
+import { Button } from '@utilitywarehouse/web-ui/dist/lab';
+
+const Component = () => (
+  <div>
+    <Button
+      size={{
+        mobile: 'small',
+        desktop: 'medium',
+      }}
+    ></Button>
+    <Button
+      size={{
+        mobile: 'small',
+        tablet: 'medium',
+        desktop: 'small',
+        wide: 'medium',
+      }}
+    ></Button>
+  </div>
+);
+
+export default Component;

packages/codemod/transforms/web-ui/v1/__testfixtures__/rename-lab-button-size.input.tsx

@@ -0,0 +1,13 @@
+// this is a comment at the beginning of the file
+import * as React from 'react';
+import { Button } from '@utilitywarehouse/web-ui/dist/lab';
+
+const Component = () => (
+  <div>
+    <Button></Button>
+    <Button size='small'></Button>
+    <Button size='large'></Button>
+  </div>
+);
+
+export default Component;

packages/codemod/transforms/web-ui/v1/__testfixtures__/rename-lab-button-size.output.tsx

@@ -0,0 +1,13 @@
+// this is a comment at the beginning of the file
+import * as React from 'react';
+import { Button } from '@utilitywarehouse/web-ui/dist/lab';
+
+const Component = () => (
+  <div>
+    <Button></Button>
+    <Button size='small'></Button>
+    <Button size='medium'></Button>
+  </div>
+);
+
+export default Component;

packages/codemod/transforms/web-ui/v1/__tests__/rename-lab-button-size.test.js

@@ -0,0 +1,34 @@
+/* eslint-disable no-undef */
+const defineTest = require('jscodeshift/dist/testUtils').defineTest;
+
+const NAME = 'rename-lab-button-size';
+
+describe(NAME, () => {
+  defineTest(__dirname, NAME, {}, undefined, {
+    parser: 'tsx',
+  });
+});
+
+const NO_LAB_IMPORT_NAME = `${NAME}-no-lab-import`;
+
+describe(NO_LAB_IMPORT_NAME, () => {
+  defineTest(__dirname, NAME, {}, NO_LAB_IMPORT_NAME, {
+    parser: 'tsx',
+  });
+});
+
+const NO_BUTTON_IMPORT_NAME = `${NAME}-no-button-import`;
+
+describe(NO_BUTTON_IMPORT_NAME, () => {
+  defineTest(__dirname, NAME, {}, NO_BUTTON_IMPORT_NAME, {
+    parser: 'tsx',
+  });
+});
+
+const RESPONSIVE_NAME = `${NAME}-responsive`;
+
+describe(RESPONSIVE_NAME, () => {
+  defineTest(__dirname, NAME, {}, RESPONSIVE_NAME, {
+    parser: 'tsx',
+  });
+});

packages/codemod/transforms/web-ui/v1/migration.js

@@ -0,0 +1,10 @@
+/* eslint-disable no-undef */
+const transformRenameLabButtonSize = require('./rename-lab-button-size');
+
+function transformer(file, api, options) {
+  // run this before migrating Button out of lab submodule
+  file.source = transformRenameLabButtonSize(file, api, options);
+  return file.source;
+}
+
+module.exports = transformer;

packages/codemod/transforms/web-ui/v1/rename-lab-button-size.js

@@ -0,0 +1,38 @@
+function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const getFirstNode = () => root.find(j.Program).get('body', 0).node;
+  // Save the comments attached to the first node
+  const firstNode = getFirstNode();
+  const { comments } = firstNode;
+
+  const hasWebUILabButton =
+    root
+      .find(j.ImportDeclaration)
+      .filter(path => path.value.source.value === '@utilitywarehouse/web-ui/dist/lab')
+      .find(j.ImportSpecifier)
+      .filter(path => path.node.imported.name === 'Button').length > 0;
+
+  if (hasWebUILabButton) {
+    root
+      .findJSXElements('Button')
+      .find(j.JSXAttribute, { name: { type: 'JSXIdentifier', name: 'size' } })
+      .find(j.Literal)
+      .forEach(path => {
+        const value = path.node.value;
+        if (value === 'large') {
+          path.node.value = 'medium';
+        }
+      });
+  }
+
+  // If the first node has been modified or deleted, reattach the comments
+  const firstNode2 = getFirstNode();
+  if (firstNode2 !== firstNode) {
+    firstNode2.comments = comments;
+  }
+  return root.toSource({ quote: 'single' });
+}
+
+module.exports = transformer;

packages/web-ui/docs/web-ui/guides/migration/v1.mdx

@@ -15,13 +15,16 @@ documenting for others, thankyou!
 ## Contents
 
 - [Buttons size renaming](#buttons-size-renaming)
+- [Codemods](#codemods)
+  - [Migration](#migration)
+  - [Rename lab button size](#rename-lab-button-size)
 
-### Buttons size renaming
+## Buttons size renaming
 
 The `Button` component from the `lab` submodule, and the `IconButton`
 component, have had the `large` size value renamed to `medium`.
 
-There will be a codemod available to support this change.
+There is a codemod available to support this change.
 
 ```diff
 - <Button size='large'></Button>
@@ -53,3 +56,29 @@ There will be a codemod available to support this change.
 +   }}
 + ></IconButton>
 ```
+
+## Codemods
+
+### Migration
+
+This will run all codemods required to migrate from Web UI `v0` to `v1`.
+You can use `npx` to run the codemod on your source files.
+
+```console
+npx @utilitywarehouse/ds-codemod web-ui/v1/migration <path>
+```
+
+Included codemods:
+
+- `rename-lab-button-size`
+
+Please make sure you fix any linting or formatting issues before continuing to
+run any further codemods.
+
+### Rename lab button size
+
+Updates the size value `large` to `medium` for the `Button` comopnent from the lab submodule.
+
+```console
+npx @utilitywarehouse/ds-codemod web-ui/v1/rename-lab-button-size <path>
+```