[LG-4735] Spinner codemod

.changeset/loading-spinner.md

@@ -17,9 +17,15 @@ Size.Small: 24px;
 Size.Default: 48px;
 Size.Large: 64px;
 ```
+Run the codemod to auto-update this prop change 
+```bash
+lg codemod loading-spinner-v5
+```
 
 - Removes `baseFontSize` prop
 - Removes the explicit `description` prop. 
+These props will be _removed_ by the codemod, but the description will only be converted to a comment, and must be updated  manually.
+To add a description to the spinner, use the `Description` component from `@leafygreen-ui/typography` directly.
 ```tsx
 <div>
   <Spinner size="default" />

tools/codemods/README.md

@@ -322,6 +322,56 @@ import Copyable from '@leafygreen-ui/copyable';
 <Tooltip justify="middle" renderMode="top-layer" />
 ```
 
+### `loading-spinner-v5`
+
+This codemod can be used to upgrade Spinner components to v5 of `@leafygreen-ui/loading-indicator`.
+
+This codemod applies to the following package:
+
+- `@leafygreen-ui/loading-indicator`
+
+This codemod does the following:
+
+1. Converts `displayOption` prop to `size` prop with appropriate value mapping
+2. Removes `description` prop and adds guidance comment
+3. Removes `baseFontSize` prop if present
+
+```shell
+pnpm lg codemod loading-spinner-v5 <path>
+```
+
+**Before**:
+
+```tsx
+import { Spinner } from '@leafygreen-ui/loading-indicator';
+
+<Spinner
+  displayOption="default-vertical"
+  description="Loading data..."
+  darkMode={true}
+/>
+<Spinner
+  displayOption="large-vertical"
+  description="Processing..."
+  baseFontSize={16}
+/>
+```
+
+**After**:
+
+```tsx
+import { Spinner } from '@leafygreen-ui/loading-indicator';
+
+/* Previous description: "Loading data..." */
+/* TODO: The Spinner component no longer supports the `description` prop. Please render description text separately using the Typography component. */
+
+<Spinner size="default" darkMode={true} />;
+
+/* Previous description: "Processing..." */
+/* TODO: The Spinner component no longer supports the `description` prop. Please render description text separately using the Typography component. */
+<Spinner size="large" />;
+```
+
 ### `tabs-v17`
 
 This codemod can be used to get started in upgrading LG `Tabs` instances to v17 of `@leafygreen-ui/tabs`.

tools/codemods/src/codemods/loading-spinner-v5/tests/aliased-import.input.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { Spinner as LGSpinner } from '@leafygreen-ui/loading-indicator';
+
+export default function App() {
+  return (
+    <div>
+      <LGSpinner displayOption="default-vertical" description="Loading..." />
+      <LGSpinner displayOption="large-vertical" />
+    </div>
+  );
+}

tools/codemods/src/codemods/loading-spinner-v5/tests/aliased-import.output.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Spinner as LGSpinner } from '@leafygreen-ui/loading-indicator';
+
+export default function App() {
+  return (
+    <div>
+      {/* Previous description: "Loading..." */}
+      {/* TODO: The Spinner component no longer supports the `description` prop. Please render description text separately using the Typography component. */}
+      <LGSpinner size="default" />
+      <LGSpinner size="large" />
+    </div>
+  );
+}

tools/codemods/src/codemods/loading-spinner-v5/tests/combined-props.input.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Spinner } from '@leafygreen-ui/loading-indicator';
+
+export default function App() {
+  return (
+    <div>
+      <Spinner
+        displayOption="default-vertical"
+        description="Loading data..."
+        darkMode={true}
+        className="my-spinner"
+      />
+      <Spinner
+        displayOption="large-vertical"
+        description="Processing..."
+        baseFontSize={16}
+        colorOverride="#FF0000"
+      />
+    </div>
+  );
+}

tools/codemods/src/codemods/loading-spinner-v5/tests/combined-props.output.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Spinner } from '@leafygreen-ui/loading-indicator';
+
+export default function App() {
+  return (
+    <div>
+      {/* Previous description: "Loading data..." */}
+      {/* TODO: The Spinner component no longer supports the `description` prop. Please render description text separately using the Typography component. */}
+      <Spinner size="default" darkMode={true} className="my-spinner" />
+      {/* Previous description: "Processing..." */}
+      {/* TODO: The Spinner component no longer supports the `description` prop. Please render description text separately using the Typography component. */}
+      <Spinner size="large" colorOverride="#FF0000" />
+    </div>
+  );
+}

tools/codemods/src/codemods/loading-spinner-v5/tests/no-changes.input.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { PageLoader, Spinner } from '@leafygreen-ui/loading-indicator';
+
+export default function App() {
+  return (
+    <div>
+      <Spinner size="default" />
+      <Spinner size="large" darkMode={true} />
+      <Spinner />
+      <PageLoader
+        baseFontSize={16}
+        description="Loading page..."
+        darkMode={true}
+      />
+    </div>
+  );
+}

tools/codemods/src/codemods/loading-spinner-v5/tests/no-changes.output.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { PageLoader, Spinner } from '@leafygreen-ui/loading-indicator';
+
+export default function App() {
+  return (
+    <div>
+      <Spinner size="default" />
+      <Spinner size="large" darkMode={true} />
+      <Spinner />
+      <PageLoader
+        baseFontSize={16}
+        description="Loading page..."
+        darkMode={true}
+      />
+    </div>
+  );
+}

tools/codemods/src/codemods/loading-spinner-v5/tests/remove-description.input.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { Spinner } from '@leafygreen-ui/loading-indicator';
+
+export default function App() {
+  return (
+    <div>
+      <Spinner description="Loading..." />
+      <Spinner displayOption="large-vertical" description="Please wait" />
+    </div>
+  );
+}

tools/codemods/src/codemods/loading-spinner-v5/tests/remove-description.output.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Spinner } from '@leafygreen-ui/loading-indicator';
+
+export default function App() {
+  return (
+    <div>
+      {/* Previous description: "Loading..." */}
+      {/* TODO: The Spinner component no longer supports the `description` prop. Please render description text separately using the Typography component. */}
+      <Spinner />
+      {/* Previous description: "Please wait" */}
+      {/* TODO: The Spinner component no longer supports the `description` prop. Please render description text separately using the Typography component. */}
+      <Spinner size="large" />
+    </div>
+  );
+}

tools/codemods/src/codemods/loading-spinner-v5/tests/replace-displayOption-with-size.input.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Spinner } from '@leafygreen-ui/loading-indicator';
+
+export default function App() {
+  return (
+    <div>
+      <Spinner displayOption="default-vertical" />
+      <Spinner displayOption="default-horizontal" />
+      <Spinner displayOption="large-vertical" />
+      <Spinner displayOption="xlarge-vertical" />
+    </div>
+  );
+}

tools/codemods/src/codemods/loading-spinner-v5/tests/replace-displayOption-with-size.output.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Spinner } from '@leafygreen-ui/loading-indicator';
+
+export default function App() {
+  return (
+    <div>
+      <Spinner size="default" />
+      <Spinner size="default" />
+      <Spinner size="large" />
+      <Spinner size="large" />
+    </div>
+  );
+}

tools/codemods/src/codemods/loading-spinner-v5/tests/transform.spec.ts

@@ -0,0 +1,28 @@
+import { transformTest } from '../../../utils/tests/transformTest';
+
+const transform = 'loading-spinner-v5';
+
+const tests = [
+  {
+    name: 'replace-displayOption-with-size',
+  },
+  {
+    name: 'remove-description',
+  },
+  {
+    name: 'combined-props',
+  },
+  {
+    name: 'aliased-import',
+  },
+  {
+    name: 'no-changes',
+  },
+];
+
+for (const test of tests) {
+  transformTest(__dirname, {
+    fixture: test.name,
+    transform,
+  });
+}

tools/codemods/src/codemods/loading-spinner-v5/tests/tree-shaken-import.input.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { Spinner } from '@leafygreen-ui/loading-indicator/spinner';
+
+export default function App() {
+  return (
+    <div>
+      <Spinner displayOption="default-vertical" description="Loading..." />
+      <Spinner displayOption="large-vertical" />
+    </div>
+  );
+}

tools/codemods/src/codemods/loading-spinner-v5/tests/tree-shaken-import.output.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Spinner } from '@leafygreen-ui/loading-indicator/spinner';
+
+export default function App() {
+  return (
+    <div>
+      {/* Previous description: "Loading..." */}
+      {/* TODO: The Spinner component no longer supports the `description` prop. Please render description text separately using the Typography component. */}
+      <Spinner size="default" />
+      <Spinner size="large" />
+    </div>
+  );
+}