Merge branch 'codemod/replace-svg-as-components' of github.com:dac09/…

…redwood into codemod/replace-svg-as-components

* 'codemod/replace-svg-as-components' of github.com:dac09/redwood:
  chore(deps): update react monorepo (redwoodjs#8677)
  chore(deps): update dependency postcss to v8.4.24 (redwoodjs#8675)
  chore(deps): update dependency esbuild to v0.18.6 (redwoodjs#8670)
  chore(deps): update dependency dependency-cruiser to v13.0.4 (redwoodjs#8674)
  chore(deps): update dependency autoprefixer to v10.4.14 (redwoodjs#8668)
  chore(deps): update dependency @clerk/clerk-react to v4.20.5 (redwoodjs#8672)
  Fix typos in documentation (redwoodjs#8659)
  fix(docs): Fix & make verifyOwnership consistent (redwoodjs#8596)
  chore(deps): update dependency vite to v4.1.5 [security] (redwoodjs#8671)
  fix(deps): update dependency react-hook-form to v7.45.0 (redwoodjs#8664)
  chore(studio): update tremor to v3 (redwoodjs#8645)
  fix(deps): update dependency webpack to v5.87.0 (redwoodjs#8549)
  fix(deps): update dependency dotenv to v16.3.1 (redwoodjs#8663)
  chore(deps): update dependency @clerk/clerk-react to v4.20.4 (redwoodjs#8662)
  fix(vite): Change config for mantine and chakra to use export default (redwoodjs#8639)
  fix(deps): update storybook monorepo to v7.0.22 (redwoodjs#8652)
  Fix failing v5 codemod for DevFatalErrorPage (redwoodjs#8661)

docs/docs/how-to/using-a-third-party-api.md

@@ -185,7 +185,7 @@ const HomePage = () => {
 
   const onSubmit = (data) => {
     fetch(
-      `https://api.openweathermap.org/data/2.5/weather?zip={data.zip},us&appid=YOUR_API_KEY`
+      `https://api.openweathermap.org/data/2.5/weather?zip=${data.zip},us&appid=YOUR_API_KEY`
     )
       .then((response) => response.json())
       .then((json) => setWeather(json))

docs/docs/logger.md

@@ -80,7 +80,7 @@ In addition to the rich [features](https://github.com/pinojs/pino/blob/master/do
 
 One of 'fatal', 'error', 'warn', 'info', 'debug', 'trace' or 'silent'.
 
-The logger detects you current environment and will default to a sensible minimum log level.
+The logger detects your current environment and will default to a sensible minimum log level.
 
 > **_NOTE:_** In Development, the default is `trace` while in Production, the default is `warn`.
 > This means that output in your dev server can be verbose, but when you deploy you won't miss out on critical issues.

docs/docs/tutorial/chapter7/api-side-currentuser.md

@@ -674,16 +674,13 @@ import { ForbiddenError } from '@redwoodjs/graphql-server'
 // highlight-start
 export const updatePost = async ({ id, input }) => {
   if (await adminPost({ id })) {
-    return true
+    return db.post.update({
+      data: input,
+      where: { id },
+    })
   } else {
     throw new ForbiddenError("You don't have access to this post")
   }
-  // highlight-end
-
-  return db.post.update({
-    data: input,
-    where: { id },
-  })
 }
 ```
 
@@ -693,7 +690,7 @@ This works, but we'll need to do the same thing in `deletePost`. Let's extract t
 
 ```javascript
 // highlight-start
-const verifyOwnership = async (id) {
+const verifyOwnership = async ({ id }) => {
   if (await adminPost({ id })) {
     return true
   } else {
@@ -704,7 +701,7 @@ const verifyOwnership = async (id) {
 
 export const updatePost = async ({ id, input }) => {
   // highlight-next-line
-  await verifyOwnership(id)
+  await verifyOwnership({ id })
 
   return db.post.update({
     data: input,
@@ -720,7 +717,7 @@ import { ForbiddenError } from '@redwoodjs/graphql-server'
 
 import { db } from 'src/lib/db'
 
-const validateOwnership = async ({ id }) => {
+const verifyOwnership = async ({ id }) => {
   if (await adminPost({ id })) {
     return true
   } else {
@@ -745,7 +742,7 @@ export const createPost = ({ input }) => {
 }
 
 export const updatePost = async ({ id, input }) => {
-  await validateOwnership({ id })
+  await verifyOwnership({ id })
 
   return db.post.update({
     data: input,
@@ -754,7 +751,7 @@ export const updatePost = async ({ id, input }) => {
 }
 
 export const deletePost = async ({ id }) => {
-  await validateOwnership({ id })
+  await verifyOwnership({ id })
 
   return db.post.delete({
     where: { id },

docs/versioned_docs/version-5.0/how-to/using-a-third-party-api.md

@@ -185,7 +185,7 @@ const HomePage = () => {
 
   const onSubmit = (data) => {
     fetch(
-      `https://api.openweathermap.org/data/2.5/weather?zip={data.zip},us&appid=YOUR_API_KEY`
+      `https://api.openweathermap.org/data/2.5/weather?zip=${data.zip},us&appid=YOUR_API_KEY`
     )
       .then((response) => response.json())
       .then((json) => setWeather(json))

docs/versioned_docs/version-5.0/logger.md

@@ -80,7 +80,7 @@ In addition to the rich [features](https://github.com/pinojs/pino/blob/master/do
 
 One of 'fatal', 'error', 'warn', 'info', 'debug', 'trace' or 'silent'.
 
-The logger detects you current environment and will default to a sensible minimum log level.
+The logger detects your current environment and will default to a sensible minimum log level.
 
 > **_NOTE:_** In Development, the default is `trace` while in Production, the default is `warn`.
 > This means that output in your dev server can be verbose, but when you deploy you won't miss out on critical issues.

package.json

@@ -73,7 +73,7 @@
     "core-js": "3.31.0",
     "cypress": "12.14.0",
     "cypress-wait-until": "1.7.2",
-    "dependency-cruiser": "13.0.3",
+    "dependency-cruiser": "13.0.4",
     "eslint": "8.42.0",
     "fast-glob": "3.2.12",
     "fs-extra": "11.1.1",

packages/auth-providers/auth0/web/package.json

@@ -30,7 +30,7 @@
     "@auth0/auth0-spa-js": "2.0.8",
     "@babel/cli": "7.22.5",
     "@babel/core": "7.22.5",
-    "@types/react": "18.2.12",
+    "@types/react": "18.2.13",
     "jest": "29.5.0",
     "react": "18.2.0",
     "typescript": "5.1.3"

packages/auth-providers/azureActiveDirectory/web/package.json

@@ -31,7 +31,7 @@
     "@babel/cli": "7.22.5",
     "@babel/core": "7.22.5",
     "@types/netlify-identity-widget": "1.9.3",
-    "@types/react": "18.2.12",
+    "@types/react": "18.2.13",
     "jest": "29.5.0",
     "react": "18.2.0",
     "typescript": "5.1.3"

packages/auth-providers/clerk/web/package.json

@@ -29,15 +29,15 @@
   "devDependencies": {
     "@babel/cli": "7.22.5",
     "@babel/core": "7.22.5",
-    "@clerk/clerk-react": "4.20.1",
+    "@clerk/clerk-react": "4.20.5",
     "@clerk/types": "3.42.0",
-    "@types/react": "18.2.12",
+    "@types/react": "18.2.13",
     "jest": "29.5.0",
     "react": "18.2.0",
     "typescript": "5.1.3"
   },
   "peerDependencies": {
-    "@clerk/clerk-react": "4.20.1"
+    "@clerk/clerk-react": "4.20.5"
   },
   "gitHead": "3905ed045508b861b495f8d5630d76c7a157d8f1"
 }

packages/auth-providers/dbAuth/web/package.json

@@ -32,7 +32,7 @@
     "@babel/cli": "7.22.5",
     "@babel/core": "7.22.5",
     "@simplewebauthn/typescript-types": "7.0.0",
-    "@types/react": "18.2.12",
+    "@types/react": "18.2.13",
     "jest": "29.5.0",
     "react": "18.2.0",
     "typescript": "5.1.3"

packages/auth-providers/firebase/web/package.json

@@ -29,7 +29,7 @@
   "devDependencies": {
     "@babel/cli": "7.22.5",
     "@babel/core": "7.22.5",
-    "@types/react": "18.2.12",
+    "@types/react": "18.2.13",
     "firebase": "9.22.2",
     "jest": "29.5.0",
     "react": "18.2.0",

packages/auth-providers/netlify/web/package.json

@@ -30,7 +30,7 @@
     "@babel/cli": "7.22.5",
     "@babel/core": "7.22.5",
     "@types/netlify-identity-widget": "1.9.3",
-    "@types/react": "18.2.12",
+    "@types/react": "18.2.13",
     "jest": "29.5.0",
     "react": "18.2.0",
     "typescript": "5.1.3"

packages/auth-providers/supabase/web/package.json

@@ -29,7 +29,7 @@
     "@babel/cli": "7.22.5",
     "@babel/core": "7.22.5",
     "@supabase/supabase-js": "2.25.0",
-    "@types/react": "18.2.12",
+    "@types/react": "18.2.13",
     "jest": "29.5.0",
     "react": "18.2.0",
     "typescript": "5.1.3"

packages/auth-providers/supertokens/web/package.json

@@ -29,7 +29,7 @@
   "devDependencies": {
     "@babel/cli": "7.22.5",
     "@babel/core": "7.22.5",
-    "@types/react": "18.2.12",
+    "@types/react": "18.2.13",
     "jest": "29.5.0",
     "react": "18.2.0",
     "supertokens-auth-react": "0.33.1",

packages/cli-packages/storybook/package.json

@@ -26,19 +26,19 @@
   "dependencies": {
     "@redwoodjs/project-config": "5.0.0",
     "@redwoodjs/telemetry": "5.0.0",
-    "@storybook/addon-a11y": "7.0.21",
-    "@storybook/addon-docs": "7.0.21",
-    "@storybook/addon-essentials": "7.0.21",
-    "@storybook/react-webpack5": "7.0.21",
+    "@storybook/addon-a11y": "7.0.22",
+    "@storybook/addon-docs": "7.0.22",
+    "@storybook/addon-essentials": "7.0.22",
+    "@storybook/react-webpack5": "7.0.22",
     "chalk": "4.1.2",
     "execa": "5.1.1",
-    "storybook": "7.0.21",
+    "storybook": "7.0.22",
     "terminal-link": "2.1.1",
     "yargs": "17.7.2"
   },
   "devDependencies": {
     "@types/yargs": "17.0.24",
-    "esbuild": "0.18.4",
+    "esbuild": "0.18.6",
     "fast-glob": "3.2.12",
     "jest": "29.5.0",
     "typescript": "5.1.3"

packages/cli/src/commands/setup/ui/libraries/chakra-ui.js

@@ -29,7 +29,8 @@ export function builder(yargs) {
 const CHAKRA_THEME_AND_COMMENTS = `\
 // This object will be used to override Chakra-UI theme defaults.
 // See https://chakra-ui.com/docs/styled-system/theming/theme for theming options
-module.exports = {}
+const theme = {}
+export default theme
 `
 
 export async function handler({ force, install }) {

packages/cli/src/commands/setup/ui/libraries/mantine.js

@@ -28,7 +28,8 @@ const ALL_MANTINE_PACKAGES = [
 const MANTINE_THEME_AND_COMMENTS = `\
 // This object will be used to override Mantine theme defaults.
 // See https://mantine.dev/theming/mantine-provider/#theme-object for theming options
-module.exports = {}
+const theme = {}
+export default theme
 `
 
 export function builder(yargs) {

packages/codemods/src/codemods/v0.50.x/updateDevFatalErrorPage/updateDevFatalErrorPage.ts

@@ -19,7 +19,7 @@ export const updateDevFatalErrorPage = async () => {
   const dirs = {
     [webFatalErrorPagesDir]: {
       [path.join(webFatalErrorPagesDir, 'FatalErrorPage')]:
-        'https://raw.githubusercontent.com/redwoodjs/redwood/main/packages/create-redwood-app/templates/ts/web/src/pages/FatalErrorPage/FatalErrorPage.tsx',
+        'https://raw.githubusercontent.com/redwoodjs/redwood/v5.3.1/packages/create-redwood-app/templates/ts/web/src/pages/FatalErrorPage/FatalErrorPage.tsx',
     },
   }
 

packages/codemods/src/codemods/v6.x.x/updateThemeConfig/README.md

@@ -0,0 +1,13 @@
+
+```
+npx @redwoodjs/codemods@canary update-theme-config
+```
+# Update Theme Config
+Modifies the config files specifically for mantine and chakra-ui to use ESM syntax to export the theme.
+
+```diff
+// This is common JS lets get rid of it!
+- module.exports = {/**....your theme **/}
++ const theme = {/**....your theme **/}
++ export default theme
+```

packages/codemods/src/codemods/v6.x.x/updateThemeConfig/__testfixtures__/default.input.js

@@ -0,0 +1,3 @@
+// This object will be used to override Mantine theme defaults.
+// See https://mantine.dev/theming/mantine-provider/#theme-object for theming options
+module.exports = {}

packages/codemods/src/codemods/v6.x.x/updateThemeConfig/__testfixtures__/default.output.js

@@ -0,0 +1,4 @@
+// This object will be used to override Mantine theme defaults.
+// See https://mantine.dev/theming/mantine-provider/#theme-object for theming options
+const theme = {}
+export default theme

packages/codemods/src/codemods/v6.x.x/updateThemeConfig/__testfixtures__/identifierTheme.input.js

@@ -0,0 +1,5 @@
+const customTheme = {
+  bazinga: 'kittens'
+}
+
+module.exports = customTheme

packages/codemods/src/codemods/v6.x.x/updateThemeConfig/__testfixtures__/identifierTheme.output.js

@@ -0,0 +1,5 @@
+const customTheme = {
+  bazinga: 'kittens'
+}
+
+export default customTheme

packages/codemods/src/codemods/v6.x.x/updateThemeConfig/__tests__/updateThemeConfig.test.ts

@@ -0,0 +1,9 @@
+describe('updateThemeConfig', () => {
+  it('Converts from module.exports to export default ', async () => {
+    await matchTransformSnapshot('updateThemeConfig', 'default')
+  })
+
+  it('Handles when config is an identifier', async () => {
+    await matchTransformSnapshot('updateThemeConfig', 'identifierTheme')
+  })
+})

packages/codemods/src/codemods/v6.x.x/updateThemeConfig/updateThemeConfig.ts

@@ -0,0 +1,49 @@
+import type { FileInfo, API } from 'jscodeshift'
+
+export default function transform(file: FileInfo, api: API) {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  // Find all module.exports assignments
+  root
+    .find(j.AssignmentExpression, {
+      left: {
+        type: 'MemberExpression',
+        object: { type: 'Identifier', name: 'module' },
+        property: { type: 'Identifier', name: 'exports' },
+      },
+    })
+    .forEach((path) => {
+      const configObject = path.value.right
+
+      let themeObjectName = 'theme'
+
+      if (j.Identifier.check(configObject)) {
+        // If it already is an identifier, reuse it
+        // modules.exports = theme -> export default theme
+        // Note that export default statement is added outside this if statement
+        themeObjectName = configObject.name
+
+        // Remove module.exports assignment
+        j(path).remove()
+      } else {
+        // Create const declaration with the exported object
+        const declaration = j.variableDeclaration('const', [
+          j.variableDeclarator(j.identifier(themeObjectName), configObject),
+        ])
+
+        // Replace module.exports assignment with the const declaration
+        // module.exports = {...} -> const theme = {...}
+        j(path).replaceWith(declaration)
+      }
+
+      // Add export default statement
+      const exportDefaultStatement = j.exportDefaultDeclaration(
+        j.identifier(themeObjectName)
+      )
+
+      j(path.parentPath).insertAfter(exportDefaultStatement)
+    })
+
+  return root.toSource()
+}

packages/codemods/src/codemods/v6.x.x/updateThemeConfig/updateThemeConfig.yargs.ts

@@ -0,0 +1,28 @@
+import path from 'path'
+
+import fg from 'fast-glob'
+import task, { TaskInnerAPI } from 'tasuku'
+
+import { getPaths } from '@redwoodjs/project-config'
+
+import runTransform from '../../../lib/runTransform'
+
+export const command = 'update-theme-config'
+export const description =
+  '(v5.x.x->v6.x.x) Converts mantine and chakra UI configs to use ESM syntax'
+
+export const handler = () => {
+  task('Update Theme Config', async ({ setOutput }: TaskInnerAPI) => {
+    const targetPaths = fg.sync('{chakra,mantine}.config.{js,jsx,tsx,ts}', {
+      cwd: getPaths().web.config,
+      absolute: true,
+    })
+
+    await runTransform({
+      transformPath: path.join(__dirname, 'updateThemeConfig.js'),
+      targetPaths,
+    })
+
+    setOutput('All done! Run `yarn rw lint --fix` to prettify your code')
+  })
+}

packages/core/package.json

@@ -63,7 +63,7 @@
     "css-loader": "6.8.1",
     "css-minimizer-webpack-plugin": "5.0.1",
     "dotenv-webpack": "8.0.1",
-    "esbuild": "0.18.4",
+    "esbuild": "0.18.6",
     "fast-glob": "3.2.12",
     "file-loader": "6.2.0",
     "graphql": "16.6.0",
@@ -78,7 +78,7 @@
     "style-loader": "3.3.3",
     "typescript": "5.1.3",
     "url-loader": "4.1.1",
-    "webpack": "5.85.1",
+    "webpack": "5.87.0",
     "webpack-bundle-analyzer": "4.9.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",

packages/create-redwood-app/package.json

@@ -42,7 +42,7 @@
     "@babel/core": "7.22.5",
     "@babel/plugin-transform-typescript": "7.22.5",
     "@types/babel__core": "7.20.1",
-    "esbuild": "0.18.4",
+    "esbuild": "0.18.6",
     "jest": "29.5.0",
     "klaw-sync": "6.0.0"
   },