Merge pull request #1800 from chanzuckerberg/ah-majors

chore: update some major versions

package.json

@@ -92,7 +92,7 @@
     "@popperjs/core": "^2.11.8",
     "@tippyjs/react": "^4.2.6",
     "@types/lodash": "^4.14.200",
-    "clsx": "^1.2.1",
+    "clsx": "^2.0.0",
     "graphemer": "^1.4.0",
     "lilconfig": "^2.1.0",
     "lodash": "^4.17.21",
@@ -115,8 +115,8 @@
     "@chanzuckerberg/eslint-plugin-edu-react": "^1.1.9",
     "@chanzuckerberg/eslint-plugin-stories": "^3.2.14",
     "@chanzuckerberg/story-utils": "^4.0.0",
-    "@commitlint/cli": "^17.8.1",
-    "@commitlint/config-conventional": "^17.8.1",
+    "@commitlint/cli": "^18.2.0",
+    "@commitlint/config-conventional": "^18.1.0",
     "@geometricpanda/storybook-addon-badges": "^2.0.0",
     "@omlet/cli": "^1.0.1-beta.38",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -142,7 +142,7 @@
     "@types/react-dom": "^18.2.14",
     "@types/react-portal": "^4.0.5",
     "axe-core": "4.8.2",
-    "chromatic": "^6.24.1",
+    "chromatic": "^7.6.0",
     "codecov": "^3.8.3",
     "copyfiles": "^2.4.1",
     "eslint": "^8.53.0",
@@ -157,8 +157,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-preset-stylelint": "^6.3.2",
     "lint-staged": "^13.3.0",
-    "pascal-case": "^3.1.2",
-    "plop": "^3.1.2",
+    "plop": "^4.0.0",
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
@@ -180,7 +179,7 @@
     "stylelint-config-recommended": "^10.0.1",
     "tailwindcss": "^3.3.5",
     "ts-jest": "^29.1.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.2.2"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

plop-templates/Component/Component.tsx.hbs

@@ -12,7 +12,7 @@ export interface Props {
 /**
  * BETA: This component is still a work in progress and is subject to change.
  *
- * `import {{inBraces name}} from "@chanzuckerberg/eds";`
+ * `import {{inBraces (pascalCase name)}} from "@chanzuckerberg/eds";`
  *
  * TODO: update this comment with a description of the component.
  */

plopfile.js

@@ -1,5 +1,4 @@
-const pascalCase = require('pascal-case');
-const { snakeCase } = require('snake-case');
+const { snakeCase } = require('lodash');
 
 module.exports = (plop) => {
   plop.setHelper('spacedUpperCase', (txt) =>
@@ -8,7 +7,7 @@ module.exports = (plop) => {
 
   // This helper allows us to place a variable inside curly braces without spaces
   // between the text and the braces.
-  plop.setHelper('inBraces', (txt) => `{${pascalCase.pascalCase(txt)}}`);
+  plop.setHelper('inBraces', (txt) => `{${txt}}`);
 
   plop.setGenerator('component', {
     description: 'Create a reusable component',
@@ -27,8 +26,8 @@ module.exports = (plop) => {
       },
       {
         type: 'add',
-        path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.stories.tsx',
-        templateFile: 'plop-templates/Component/Component.stories.tsx.hbs',
+        path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.stories.ts',
+        templateFile: 'plop-templates/Component/Component.stories.ts.hbs',
       },
       {
         type: 'add',