chore(ui-codemods): make local themes default

Author: git-nandor

docs/contributor-docs/codemods.md

@@ -43,7 +43,7 @@ export default myCodemod
 
 You should write unit tests for your codemods. They are tested via test fixtures (sample before transform, sample after transform). To create a unit test for say `sampleCodemod` the following steps are needed:
 
-1. create a new test in `packages/ui-codemods/lib/__node_tests__/codemod.tests.ts`:
+1. Create a new test in `packages/ui-codemods/lib/__node_tests__/codemod.tests.ts`:
    ```ts
    ---
    type: code
@@ -52,11 +52,33 @@ You should write unit tests for your codemods. They are tested via test fixtures
      runTest(sampleCodemod)
    })
    ```
-2. create a folder named `sampleCodemod` in `packages/ui-codemods/lib/__node_tests__/__testfixtures__`
+2. Create a folder named `sampleCodemod` in `packages/ui-codemods/lib/__node_tests__/__testfixtures__`
 3. Here create sample input-output file pairs whose filename follows the following naming convention: `[fixtureName].input.[js/ts/tsx]`, `[fixtureName].output.[js/ts/tsx]`. These should be your test cases that ensure that the codemod does the transformation correctly.
 
 Done! Run `npm run test:vitest ui-codemods` to run your test.
 
+#### Testing codemod warnings
+
+Sometimes codemods need to emit warnings to inform users about manual follow-ups or tricky edge cases.
+We support testing these warnings using special fixtures and a console.warn spy.
+
+1. In your codemod you can use the `printWarning` from `utils/codemodhelpers.ts` to create warnings.
+2. Create new sample input file in the `__testfixtures__` folder, filename follows the following naming convention: `[fixtureName].warning.input.[js/ts/tsx]`:
+   ```ts
+   ---
+   type: code
+   ---
+   <MyComponent deprecatedProp="value" />
+   ```
+3. Create new sample output file with the array of expected warning messages in the `__testfixtures__` folder, filename follows the following naming convention: `[fixtureName].warning.output.[js/ts/tsx]`:
+   ```ts
+   ---
+   type: code
+   ---
+   ["Warn for deprecated prop usage.", "Warn for something else."]
+   ```
+4. When you run `npm run test:vitest ui-codemods`, your test will pass and ensure your codemod warns as expected.
+
 Finally, you should try to run your codemod as users will do:
 
 ```sh

packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameCanvasThemesCodemod/canvasHighContrastUsage.warning.input.tsx

@@ -0,0 +1,9 @@
+// @ts-nocheck
+
+import canvasHighContrast from '@instructure/ui-themes'
+
+function asd() {
+  canvasHighContrast.use()
+
+  return <div>asd</div>
+}

packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameCanvasThemesCodemod/canvasHighContrastUsage.warning.output.tsx

@@ -0,0 +1 @@
+["Found canvasHighContrast.use(). This will be deleted. Users should wrap each React root in its own InstUISettingsProvider instead."]

packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameCanvasThemesCodemod/canvasUsage.warning.input.tsx

@@ -0,0 +1,9 @@
+// @ts-nocheck
+
+import canvas from '@instructure/ui-themes'
+
+function asd() {
+  canvas.use()
+
+  return <div>asd</div>
+}

packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameCanvasThemesCodemod/canvasUsage.warning.output.tsx

@@ -0,0 +1 @@
+["Found canvas.use(). This will be deleted. Users should wrap each React root in its own InstUISettingsProvider instead."]

packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameCanvasThemesCodemod/deprecated.warning.input.tsx

@@ -0,0 +1,7 @@
+// @ts-nocheck
+
+import { ThemeRegistry } from '@instructure/theme-registry'
+
+function asd() {
+  return <div>asd</div>
+}

packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameCanvasThemesCodemod/deprecated.warning.output.tsx

@@ -0,0 +1 @@
+["ThemeRegistry has been deleted and there are no global themes anymore."]

packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameCanvasThemesCodemod/renamed.input.tsx

@@ -0,0 +1,55 @@
+// @ts-nocheck
+
+import {
+  canvasThemeLocal,
+  canvasHighContrastThemeLocal,
+  somethingElse
+} from '@instructure/ui-themes'
+import { canvasThemeLocal as theme } from '@instructure/ui-themes'
+import { canvasHighContrastThemeLocal as anotherTheme } from '@instructure/ui-themes'
+import * as myThemes from '@instructure/ui-themes'
+
+function asd() {
+  const a = canvasThemeLocal
+  const b = canvasHighContrastThemeLocal
+  const c = canvasThemeLocalCustom
+  const d = myThemes.canvasThemeLocal
+  const e = myThemes.canvasHighContrastThemeLocal
+
+  canvasThemeLocal()
+  canvasHighContrastThemeLocal()
+
+  const { canvasThemeLocal } = myThemes
+  const { canvasHighContrastThemeLocal } = myThemes
+
+  return (
+    <div>
+      <InstUISettingsProvider theme={canvasThemeLocal}>
+        <div>asd</div>
+      </InstUISettingsProvider>
+      <InstUISettingsProvider
+        theme={{
+          ...canvasThemeLocal,
+          ...{
+            typography: { fontFamily: 'monospace' }
+          }
+        }}
+      >
+        <div>asd</div>
+      </InstUISettingsProvider>
+      <InstUISettingsProvider theme={canvasHighContrastThemeLocal}>
+        <div>asd</div>
+      </InstUISettingsProvider>
+      <InstUISettingsProvider
+        theme={{
+          ...canvasHighContrastThemeLocal,
+          ...{
+            typography: { fontFamily: 'monospace' }
+          }
+        }}
+      >
+        <div>asd</div>
+      </InstUISettingsProvider>
+    </div>
+  )
+}

packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameCanvasThemesCodemod/renamed.output.tsx

@@ -0,0 +1,55 @@
+// @ts-nocheck
+
+import {
+  canvasTheme,
+  canvasHighContrastTheme,
+  somethingElse
+} from '@instructure/ui-themes'
+import { canvasTheme as theme } from '@instructure/ui-themes'
+import { canvasHighContrastTheme as anotherTheme } from '@instructure/ui-themes'
+import * as myThemes from '@instructure/ui-themes'
+
+function asd() {
+  const a = canvasTheme
+  const b = canvasHighContrastTheme
+  const c = canvasThemeLocalCustom
+  const d = myThemes.canvasTheme
+  const e = myThemes.canvasHighContrastTheme
+
+  canvasTheme()
+  canvasHighContrastTheme()
+
+  const { canvasTheme } = myThemes
+  const { canvasHighContrastTheme } = myThemes
+
+  return (
+    <div>
+      <InstUISettingsProvider theme={canvasTheme}>
+        <div>asd</div>
+      </InstUISettingsProvider>
+      <InstUISettingsProvider
+        theme={{
+          ...canvasTheme,
+          ...{
+            typography: { fontFamily: 'monospace' }
+          }
+        }}
+      >
+        <div>asd</div>
+      </InstUISettingsProvider>
+      <InstUISettingsProvider theme={canvasHighContrastTheme}>
+        <div>asd</div>
+      </InstUISettingsProvider>
+      <InstUISettingsProvider
+        theme={{
+          ...canvasHighContrastTheme,
+          ...{
+            typography: { fontFamily: 'monospace' }
+          }
+        }}
+      >
+        <div>asd</div>
+      </InstUISettingsProvider>
+    </div>
+  )
+}