Install PigmentCSS. Change Next config to TS to import theme (broken)

frontends/main/next.config.js → frontends/main/next.config.ts

@@ -1,12 +1,19 @@
 // @ts-check
-const { validateEnv } = require("./validateEnv")
+import type { NextConfig } from "next"
+import { withPigment } from "@pigment-css/nextjs-plugin"
+import { withSentryConfig } from "@sentry/nextjs"
+import { validateEnv } from "./validateEnv"
+// import { theme } from "ol-components/ThemeProvider/ThemeProvider"
+// import { theme } from "../ol-components/ThemeProvider/ThemeProvider"
+import { theme } from "ol-components"
+import BundleAnalyzer from "@next/bundle-analyzer"
 
 validateEnv()
 
 const processFeatureFlags = () => {
   const featureFlagPrefix =
     process.env.NEXT_PUBLIC_POSTHOG_FEATURE_PREFIX || "FEATURE_"
-  const bootstrapFeatureFlags = {}
+  const bootstrapFeatureFlags: Record<string, unknown> = {}
 
   for (const [key, value] of Object.entries(process.env)) {
     if (key.startsWith(`NEXT_PUBLIC_${featureFlagPrefix}`)) {
@@ -19,9 +26,13 @@ const processFeatureFlags = () => {
   return bootstrapFeatureFlags
 }
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+const nextConfig: NextConfig = {
   productionBrowserSourceMaps: true,
+  experimental: {
+    // this will allow nextjs to resolve files (js, ts, css)
+    // outside packages/app directory.
+    externalDir: true,
+  },
   async rewrites() {
     return [
       /* Static assets moved from /static, though image paths are sometimes
@@ -100,41 +111,45 @@ const nextConfig = {
   },
 }
 
-// Injected content via Sentry wizard below
-
-const { withSentryConfig } = require("@sentry/nextjs")
-const withSentry = (config) =>
-  withSentryConfig(config, {
-    // For all available options, see:
-    // https://github.com/getsentry/sentry-webpack-plugin#options
+const sentryConfig = {
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options
 
-    org: "mit-office-of-digital-learning",
-    project: "open-next",
+  org: "mit-office-of-digital-learning",
+  project: "open-next",
 
-    // Only print logs for uploading source maps in CI
-    silent: !process.env.CI,
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
 
-    // For all available options, see:
-    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 
-    // Upload a larger set of source maps for prettier stack traces (increases build time)
-    widenClientFileUpload: true,
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
 
-    // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-    // This can increase your server load as well as your hosting bill.
-    // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-    // side errors will fail.
-    // tunnelRoute: "/monitoring",
+  // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
+  // tunnelRoute: "/monitoring",
 
-    // Automatically tree-shake Sentry logger statements to reduce bundle size
-    disableLogger: true,
-  })
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+}
 
-const withBundleAnalyzer = require("@next/bundle-analyzer")({
+const withBundleAnalyzer = BundleAnalyzer({
   enabled: process.env.ANALYZE === "true",
 })
 
-module.exports = [withBundleAnalyzer, withSentry].reduce(
-  (acc, withPlugin) => withPlugin(acc),
-  nextConfig,
-)
+const pigmentConfig = {
+  transformLibraries: ["@mui/material"],
+  theme,
+}
+
+const config = [
+  withBundleAnalyzer,
+  (config: NextConfig) => withSentryConfig(config, sentryConfig),
+  (config: NextConfig) => withPigment(config, pigmentConfig),
+].reduce((current, extend) => extend(current), nextConfig)
+
+export default config

frontends/main/package.json

@@ -15,9 +15,13 @@
     "@emotion/styled": "^11.11.0",
     "@mitodl/course-search-utils": "3.3.2",
     "@mitodl/smoot-design": "^0.0.0-preview215f7ae3fa",
+    "@mui/material": "^6.4.0",
+    "@mui/material-pigment-css": "^6.4.0",
     "@next/bundle-analyzer": "^14.2.15",
     "@nlux/react": "^2.17.1",
     "@nlux/themes": "^2.17.1",
+    "@pigment-css/nextjs-plugin": "^0.0.30",
+    "@pigment-css/react": "^0.0.30",
     "@remixicon/react": "^4.2.0",
     "@sentry/nextjs": "^8.36.0",
     "@tanstack/react-query": "^4.36.1",

frontends/main/tsconfig.json

@@ -19,7 +19,8 @@
     ],
     "paths": {
       "@/*": ["./src/*"],
-      "@/public/*": ["./public/*"]
+      "@/public/*": ["./public/*"],
+      "ol-components": ["../ol-components/src/index"],
     },
     "target": "ESNext",
     "types": [
@@ -35,7 +36,8 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "../jest.jsdom.config"
+    "../jest.jsdom.config",
+    "../ol-components/src/**/*",
   ],
   "exclude": ["node_modules"]
 }

frontends/ol-components/package.json

@@ -18,10 +18,10 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/base": "5.0.0-beta.61",
-    "@mui/lab": "6.0.0-beta.15",
-    "@mui/material": "^6.1.8",
-    "@mui/material-nextjs": "^6.1.6",
-    "@mui/system": "^6.1.6",
+    "@mui/lab": "6.0.0-beta.23",
+    "@mui/material": "^6.4.0",
+    "@mui/material-nextjs": "^6.3.1",
+    "@mui/system": "^6.4.0",
     "@remixicon/react": "^4.2.0",
     "@testing-library/dom": "^10.4.0",
     "@types/react-dom": "^19",

frontends/ol-components/src/types/theme.d.ts

@@ -101,3 +101,9 @@ declare module "@emotion/react" {
     custom: CustomTheme
   }
 }
+
+declare module "@mui/material-pigment-css" {
+  interface ThemeArgs {
+    theme: Theme
+  }
+}