Revert "chore: upgrade to react 19"

This reverts commit e9491e1.

apps/main/package.json

@@ -14,19 +14,19 @@
 		"clean": "rm -rf dist && rm -rf node_modules && rm -rf .turbo && rm -rf .next"
 	},
 	"dependencies": {
-		"@reduxjs/toolkit": "^2.5.0",
-		"@sentry/nextjs": "^8.47.0",
+		"@reduxjs/toolkit": "^2.4.0",
+		"@sentry/nextjs": "^8.43.0",
 		"@twilight-toolkit/ui": "workspace:*",
 		"@twilight-toolkit/utils": "workspace:*",
-		"algoliasearch": "5.18.0",
+		"algoliasearch": "5.16.0",
 		"cors": "^2.8.5",
 		"dotenv-webpack": "^8.1.0",
 		"html2plaintext": "^2.1.4",
-		"next": "^15.1.3",
-		"react": "^19.0.0",
-		"react-dom": "^19.0.0",
+		"next": "^15.1.0",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
 		"react-hotkeys-hook": "^3.4.7",
-		"react-redux": "^9.2.0",
+		"react-redux": "^9.1.2",
 		"react-snowfall": "^2.2.0",
 		"redux-saga": "^1.3.0",
 		"rss": "^1.2.2",
@@ -41,8 +41,8 @@
 		"@tailwindcss/typography": "^0.5.15",
 		"@types/cors": "^2.8.17",
 		"@types/lodash": "^4.17.13",
-		"@types/node": "^22.10.2",
-		"@types/react": "^19.0.2",
+		"@types/node": "^22.10.1",
+		"@types/react": "^19.0.1",
 		"@types/react-dom": "^19.0.2",
 		"@types/react-highlight": "^0.12.8",
 		"@types/rss": "^0.0.32",
@@ -51,7 +51,7 @@
 		"comma-number": "^2.1.0",
 		"cssnano": "^7.0.6",
 		"eslint": "^9",
-		"highlight.js": "^11.11.1",
+		"highlight.js": "^11.10.0",
 		"nexment": "^0.0.688",
 		"next-themes": "^0.4.4",
 		"nextjs-progressbar": "^0.0.16",
@@ -62,8 +62,8 @@
 		"react-infinite-scroll-component": "^6.1.0",
 		"react-timeago": "^7.2.0",
 		"smoothscroll-polyfill": "^0.4.4",
-		"swr": "^2.3.0",
-		"tailwindcss": "^3.4.17",
+		"swr": "^2.2.5",
+		"tailwindcss": "^3.4.16",
 		"ts-loader": "^9.5.1",
 		"typescript": "^5.7.2",
 		"webpack": "^5.97.1"
@@ -73,6 +73,6 @@
 		"@types/chai": "^5.0.1",
 		"@types/jest": "^29.5.14",
 		"@types/mocha": "^10.0.10",
-		"cypress": "^13.17.0"
+		"cypress": "^13.16.1"
 	}
 }

apps/main/src/components/Top/index.tsx

@@ -5,7 +5,7 @@ export default function Top() {
 	return (
 		<div className="mt-4 grid lg:grid-cols-5 lg:gap-3">
 			<div className="col-span-3 col-start-1 hidden grid-cols-3 gap-3 lg:grid">
-				<a target="_blank" href="mailto:lipeng.he@uwaterloo.ca" rel="noreferrer">
+				<a target="_blank" href="mailto:he@lipeng.ac" rel="noreferrer">
 					<Button
 						type="default"
 						icon="email"

apps/main/src/pages/index.tsx

@@ -118,7 +118,7 @@ const Home: NextPageWithLayout = () => {
 						Homomorphic Encryption (FHE) and Privacy-preserving Machine Learning
 						(PPML).
 					</p>
-					<p className="mt-5">My current focus is to:</p>
+					<p className="mt-5">My general objectives are to:</p>
 					<ul className="mt-2 list-disc pl-5">
 						<li className="pl-3">
 							Design and develop systems and protocols that are provably secure,
@@ -341,7 +341,7 @@ const Home: NextPageWithLayout = () => {
 						</span>
 						<span className="uppercase">Blog Posts</span>
 					</label>
-					{/* <button
+					<button
 						data-cy="showIndexPosts"
 						onClick={() => setShowPosts(!showPosts)}
 						aria-label="Toggle between posts and subscription box"
@@ -350,7 +350,7 @@ const Home: NextPageWithLayout = () => {
 							className={`flex h-5 w-5 duration-200 ${showPosts ? "rotate-180" : "rotate-0"}`}>
 							<Icon name="arrowUp" />
 						</span>
-					</button> */}
+					</button>
 				</div>
 				{showPosts ? (
 					<div className="mt-5 animate-appear">

packages/eslint-config-react/package.json

@@ -11,14 +11,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^8.19.0",
-    "@typescript-eslint/parser": "^8.19.0",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.7.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "^7.37.3",
-    "prettier-eslint": "^16.3.0"
+    "@typescript-eslint/eslint-plugin": "^5.25.0",
+    "@typescript-eslint/parser": "^5.26.0",
+    "eslint": "^8.16.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^2.7.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "5.0.0-alpha.2",
+    "eslint-plugin-react": "^7.30.0",
+    "prettier-eslint": "^15.0.0"
   }
 }

packages/eslint-config-root/package.json

@@ -8,8 +8,8 @@
     "clean": "rm -rf dist && rm -rf node_modules && rm -rf .turbo"
   },
   "dependencies": {
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint": "^8.34.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-config-turbo": "latest"
   }
 }

packages/prettier-config/package.json

@@ -8,7 +8,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
-    "prettier-plugin-tailwindcss": "^0.6.9"
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "prettier-plugin-tailwindcss": "^0.5.13"
   }
 }

packages/twilight-ui/.storybook/main.js

@@ -1,12 +1,10 @@
-import { dirname, join } from "path"
 import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin"
 
 /** @type { import('@storybook/react-webpack5').StorybookConfig } */
 const config = {
 	staticDirs: ["./public"],
 	stories: ["../stories/**/*.stories.ts", "../src/**/*.stories.@(mdx|tsx)"],
 	addons: [
-		// Support Tailwind CSS
 		{
 			name: "@storybook/addon-essentials",
 			options: {
@@ -20,17 +18,17 @@ const config = {
 				measure: false,
 			},
 		},
+		// Support Tailwind CSS
 		{
 			name: "@storybook/addon-styling",
 			options: {
 				postCss: true,
 			},
 		},
-		getAbsolutePath("@storybook/addon-links"),
-		getAbsolutePath("@storybook/addon-storysource"),
-		getAbsolutePath("storybook-dark-mode"),
-		getAbsolutePath("storybook-addon-turbo-build"),
-		getAbsolutePath("@storybook/addon-webpack5-compiler-babel"),
+		"@storybook/addon-links",
+		"@storybook/addon-storysource",
+		"storybook-dark-mode",
+		"storybook-addon-turbo-build",
 	],
 	// Automatically generate docs for controls
 	typescript: {
@@ -43,8 +41,11 @@ const config = {
 				prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
 		},
 	},
+	features: {
+		storyStoreV7: false,
+	},
 	framework: {
-		name: getAbsolutePath("@storybook/react-webpack5"),
+		name: "@storybook/react-webpack5",
 		options: {
 			builder: {
 				lazyCompilation: false,
@@ -63,12 +64,9 @@ const config = {
 		return config
 	},
 	docs: {
+		autodocs: "tag",
 		defaultName: "Documentation",
 	},
 }
 
 export default config
-
-function getAbsolutePath(value) {
-	return dirname(require.resolve(join(value, "package.json")))
-}

packages/twilight-ui/.storybook/preview.js

@@ -13,6 +13,7 @@ const theme = {
 /** @type { import('@storybook/react-webpack5').Preview } */
 const preview = {
 	parameters: {
+		actions: { argTypesRegex: '^on[A-Z].*' },
 		controls: {
 			// Show full documentation for the controls
 			expanded: true,

packages/twilight-ui/package.json

@@ -23,45 +23,44 @@
     "prepublishOnly": "turbo run build"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.0",
-    "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.26.3",
-    "@babel/preset-typescript": "^7.26.0",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-storysource": "^8.4.7",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
-    "@storybook/addons": "^7.6.17",
-    "@storybook/cli": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-webpack5": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@storybook/theming": "^8.4.7",
-    "@tailwindcss/typography": "^0.5.15",
+    "@babel/core": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
+    "@storybook/addon-essentials": "^7.1.1",
+    "@storybook/addon-links": "^7.1.1",
+    "@storybook/addon-storysource": "^7.1.1",
+    "@storybook/addon-styling": "^1.3.5",
+    "@storybook/addons": "^7.1.1",
+    "@storybook/cli": "^7.1.1",
+    "@storybook/react": "^7.1.1",
+    "@storybook/react-webpack5": "^7.1.1",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/theming": "^7.1.1",
+    "@tailwindcss/typography": "^0.5.9",
     "@twilight-toolkit/utils": "workspace:*",
-    "@types/react": "^19.0.2",
-    "autoprefixer": "^10.4.20",
-    "babel-loader": "^9.2.1",
-    "esbuild": "^0.24.2",
-    "esbuild-plugin-d.ts": "^1.3.1",
-    "esbuild-sass-plugin": "^3.3.1",
-    "eslint-plugin-storybook": "^0.11.1",
+    "@types/react": "^18.0.35",
+    "autoprefixer": "^10.4.14",
+    "babel-loader": "^9.1.2",
+    "esbuild": "^0.18.17",
+    "esbuild-plugin-d.ts": "^1.1.0",
+    "esbuild-sass-plugin": "^2.10.0",
+    "eslint-plugin-storybook": "^0.6.13",
     "http-server": "^14.1.1",
-    "postcss": "^8.4.49",
-    "react-docgen-typescript-plugin": "^1.0.8",
-    "storybook": "^8.4.7",
+    "postcss": "^8.4.27",
+    "react-docgen-typescript-plugin": "^1.0.5",
+    "storybook": "^7.1.1",
     "storybook-addon-turbo-build": "^2.0.1",
-    "storybook-dark-mode": "^4.0.2",
-    "tailwindcss": "^3.4.17",
-    "tsconfig-paths-webpack-plugin": "^4.2.0",
-    "tsup": "^8.3.5",
-    "tsx": "^4.19.2",
-    "typescript": "^5.7.2",
+    "storybook-dark-mode": "^3.0.1",
+    "tailwindcss": "^3.3.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.1",
+    "tsup": "^6.7.0",
+    "tsx": "^3.14.0",
+    "typescript": "^5.0.4",
     "util": "^0.12.5"
   }
 }

packages/twilight-ui/postcss.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-	plugins: [require("tailwindcss")(), require("autoprefixer")()],
+	plugins: [require('tailwindcss')(), require('autoprefixer')()],
 }

packages/twilight-ui/scripts/build.ts

@@ -1,11 +1,11 @@
-import { dependencies } from "../package.json"
-import autoprefixer from "autoprefixer"
 import type { BuildOptions } from "esbuild"
 import { build } from "esbuild"
 import { dtsPlugin } from "esbuild-plugin-d.ts"
 import { sassPlugin } from "esbuild-sass-plugin"
 import postcss from "postcss"
+import autoprefixer from "autoprefixer"
 import tailwind from "tailwindcss"
+import { dependencies } from "../package.json"
 
 const isDevelopment = process.env.NODE_ENV === "development"
 
@@ -31,7 +31,7 @@ const ESBUILD_CONFIG: BuildOptions = {
 		sassPlugin({
 			// TailwindCSS
 			transform: async (source, _resolveDir) => {
-				const postcssPlugins = [autoprefixer, tailwind as any]
+				const postcssPlugins = [autoprefixer, tailwind]
 				const { css } = await postcss(postcssPlugins).process(source, {
 					from: undefined,
 				})

packages/twilight-ui/src/Button/button.stories.tsx

@@ -1,7 +1,8 @@
-import { iconsNames } from "../utils/propTypes"
-import Button from "./button"
 import { Meta, StoryObj } from "@storybook/react"
 
+import Button from "./button"
+import { iconsNames } from "../utils/propTypes"
+
 const meta: Meta<typeof Button> = {
 	title: "Components/ Button",
 	component: Button,

packages/twilight-ui/src/Button/index.ts

@@ -1,4 +1,4 @@
-import Button from "./button"
+import Button from './button'
 
-export type { ButtonProps } from "./button"
+export type { ButtonProps } from './button'
 export default Button

packages/twilight-ui/src/Icon/icon.stories.tsx

@@ -1,7 +1,8 @@
+import React from "react"
+import { StoryFn, StoryObj, Meta } from "@storybook/react"
+
 import Icon from "."
 import icons from "./icons"
-import { StoryFn, StoryObj, Meta } from "@storybook/react"
-import React from "react"
 
 const meta: Meta<typeof Icon> = {
 	title: "Components/ Icon",
@@ -20,7 +21,7 @@ type Story = StoryObj<typeof Icon>
 
 const Template: StoryFn<typeof Icon> = (args) => {
 	return (
-		<i className="flex h-8 w-8">
+		<i className="flex w-8 h-8">
 			<Icon {...args} />
 		</i>
 	)

packages/twilight-ui/src/Icon/icon.tsx

@@ -1,5 +1,6 @@
-import { IconNames } from "../utils/propTypes"
+import React from "react"
 import icons from "./icons"
+import { IconNames } from "../utils/propTypes"
 
 export interface IconProps {
 	/**

packages/twilight-ui/src/Icon/index.ts

@@ -1,4 +1,4 @@
-import Icons from "./icon"
+import Icons from './icon'
 
-export type { IconProps } from "./icon"
+export type { IconProps } from './icon'
 export default Icons

packages/twilight-ui/src/Label/index.ts

@@ -1,4 +1,4 @@
-import Label from "./label"
+import Label from './label'
 
-export type { LabelProps } from "./label"
+export type { LabelProps } from './label'
 export default Label

packages/twilight-ui/src/Label/label.stories.tsx

@@ -1,7 +1,8 @@
-import { iconsNames } from "../utils/propTypes"
-import Label from "./label"
-import { StoryFn, Meta, StoryObj } from "@storybook/react"
 import React from "react"
+import { StoryFn, Meta, StoryObj } from "@storybook/react"
+
+import Label from "./label"
+import { iconsNames } from "../utils/propTypes"
 
 const meta: Meta<typeof Label> = {
 	title: "Components/ Label",