[PCC-1176] Starter kit redesign

.prettierrc

@@ -1,5 +1,8 @@
 {
-  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
+  "plugins": [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ],
   "semi": true,
   "singleQuote": false,
   "useTabs": false,

configs/eslint/package.json

@@ -23,5 +23,8 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "3.2.5"
+  },
+  "devDependencies": {
+    "prettier-plugin-tailwindcss": "^0.6.6"
   }
 }

local_testing/testpages/package.json

@@ -10,19 +10,19 @@
   },
   "dependencies": {
     "@pantheon-systems/pcc-react-sample-library": "workspace:*",
-    "next": "^14.2.3",
+    "next": "^14.2.5",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "devDependencies": {
     "@types/node": "^20.11.21",
-    "@types/react": "^18.2.60",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.17",
     "eslint": "^8.57.0",
-    "eslint-config-next": "14.0.3",
+    "eslint-config-next": "^14.2.3",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.5.4"
   }
 }

package.json

@@ -22,7 +22,10 @@
   },
   "dependencies": {
     "@changesets/cli": "^2.27.1",
+    "@manypkg/cli": "^0.21.4",
     "eslint": "^8.57.0",
+    "eslint-config-pcc-custom": "workspace:*",
+    "husky": "^9.0.11",
     "turbo": "^1.12.4"
   },
   "pnpm": {
@@ -36,9 +39,5 @@
       "webpack-dev-middleware": "^7.2.1",
       "@pantheon-systems/pcc-vue-sdk>ufo": "1.5.3"
     }
-  },
-  "devDependencies": {
-    "eslint-config-pcc-custom": "workspace:*",
-    "husky": "^9.0.11"
   }
 }

packages/browser/package.json

@@ -17,8 +17,8 @@
   "devDependencies": {
     "eslint": "^8.57.0",
     "eslint-config-pcc-custom": "workspace:*",
-    "tsup": "^8.0.2",
-    "typescript": "^5.3.3"
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.4"
   },
   "dependencies": {
     "@pantheon-systems/pcc-sdk-core": "workspace:*"

packages/cli/package.json

@@ -60,12 +60,12 @@
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "7.21.5",
+    "@babel/preset-env": "^7.25.3",
     "@types/bluebird": "^3.5.42",
     "@types/fs-extra": "^11.0.4",
     "@types/inquirer": "^9.0.7",
     "@types/jest": "29.5.1",
-    "@types/node": "^20.14.15",
+    "@types/node": "^20.11.21",
     "@types/nunjucks": "^3.2.6",
     "@types/server-destroy": "^1.0.3",
     "@types/showdown": "^2.0.6",
@@ -77,6 +77,6 @@
     "jest": "29.5.0",
     "tmp": "^0.2.3",
     "ts-jest": "29.1.0",
-    "tsup": "^7.2.0"
+    "tsup": "^8.2.4"
   }
 }

packages/core/package.json

@@ -46,7 +46,7 @@
     "graphql-tag": "^2.12.6",
     "graphql-ws": "^5.15.0",
     "query-string": "^8.2.0",
-    "typescript": "^5.3.3",
+    "typescript": "^5.5.4",
     "zod": "^3.22.4",
     "zod-validation-error": "^1.5.0"
   },
@@ -55,7 +55,7 @@
     "@vitest/coverage-v8": "^1.6.0",
     "eslint": "^8.57.0",
     "eslint-config-pcc-custom": "workspace:*",
-    "tsup": "^7.2.0",
+    "tsup": "^8.2.4",
     "vitest": "^1.3.1"
   }
 }

packages/react-sample-library/package.json

@@ -45,6 +45,8 @@
     "@storybook/react": "^8.1.4",
     "@storybook/test": "^8.1.4",
     "@types/node": "^20.11.21",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "copyfiles": "^2.4.1",
     "eslint": "^8.57.0",
     "eslint-config-pcc-custom": "workspace:*",
@@ -53,8 +55,8 @@
     "react-dom": "18.3.1",
     "rimraf": "^5.0.5",
     "storybook": "^8.1.4",
-    "tsup": "^7.2.0",
-    "typescript": "^5.3.3"
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.4"
   },
   "peerDependencies": {
     "@types/react": ">=17",

packages/react-sdk/package.json

@@ -67,24 +67,26 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@types/jest": "29.5.1",
-    "@types/node": "18.16.9",
+    "@types/node": "^20.11.21",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-test-renderer": "18.0.0",
     "babel-loader": "9.1.2",
     "chalk": "^5.3.0",
     "cli-spinners": "^2.9.2",
     "concurrently": "8.0.1",
-    "eslint": "8.46.0",
+    "eslint": "^8.57.0",
     "eslint-config-pcc-custom": "workspace:*",
     "jest": "29.5.0",
-    "next": "^14.2.3",
-    "octokit": "^3.1.2",
+    "next": "^14.2.5",
+    "octokit": "^3.2.1",
     "ora": "^6.3.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-test-renderer": "18.3.1",
     "ts-jest": "29.1.0",
-    "tsup": "6.7.0",
-    "typescript": "5.4.5",
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.4",
     "yargs": "^17.7.2"
   },
   "peerDependencies": {

packages/react-sdk/src/components/Preview/LivePreviewIndicator.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
 import { setup, styled } from "goober";
-import React, { useState } from "react";
+import React, { ComponentProps, useState } from "react";
 import { Arrow, useLayer } from "react-laag";
 import { IconDot } from "../Icons/IconDot";
 import { IconInfo } from "../Icons/IconInfo";
@@ -68,7 +68,7 @@ export const LivePreviewIndicator = ({ isLive }: Props) => {
                 </span>
               </div>
               <Arrow
-                {...arrowProps}
+                {...(arrowProps as ComponentProps<typeof Arrow>)}
                 size={9}
                 roundness={0}
                 backgroundColor="#23232D"

packages/react-sdk/src/core/pantheon-context.tsx

@@ -1,3 +1,4 @@
+import { ApolloClient } from "@apollo/client/core/ApolloClient.js";
 import { ApolloProvider } from "@apollo/client/react/context/ApolloProvider.js";
 import { PantheonClient } from "@pantheon-systems/pcc-sdk-core";
 import React, { PropsWithChildren } from "react";
@@ -13,7 +14,11 @@ export const PantheonProvider = ({
   children,
 }: PantheonProviderProps) => (
   <PantheonContext.Provider value={client}>
-    <ApolloProvider client={client.apolloClient}>{children}</ApolloProvider>
+    <ApolloProvider
+      client={client.apolloClient as unknown as ApolloClient<unknown>}
+    >
+      {children}
+    </ApolloProvider>
   </PantheonContext.Provider>
 );
 

packages/react-sdk/src/utils/react-element.ts

@@ -1,8 +1,14 @@
-export const getTextContent = (node: React.ReactNode): string => {
+import { type ReactNode } from "react";
+
+export const getTextContent = (node: ReactNode): string => {
   // Handle all possible types that ReactNode can be, since it is a union of types.
   if (node == null) {
     return "";
-  } else if (typeof node === "string" || typeof node === "number") {
+  } else if (
+    typeof node === "string" ||
+    typeof node === "number" ||
+    typeof node === "bigint"
+  ) {
     return node.toString();
   } else if (typeof node === "boolean") {
     return "";

packages/vue-sdk/package.json

@@ -59,11 +59,11 @@
     "eslint-config-pcc-custom": "workspace:*",
     "h3": "^1.11.1",
     "sass": "^1.71.1",
-    "tsup": "^7.2.0",
-    "typescript": "^5.3.3",
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.4",
     "unplugin-vue": "^4.5.2",
     "vite": "^5.1.4",
-    "vue": "^3.3.4",
+    "vue": "3.4.27",
     "vue-3": "npm:vue@^3.4.27"
   },
   "peerDependencies": {