Merge branch 'main' into update-vanilla-extract

Author: witoszekdev

.eslintrc.cjs

@@ -46,6 +46,21 @@ module.exports = {
     "react/react-in-jsx-scope": "off",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
+    // React compiler rules
+    "react-hooks/purity": "warn", // Side effects during render
+    "react-hooks/refs": "warn", // Reading/writing refs during render
+    "react-hooks/set-state-in-render": "warn", // setState during render
+    "react-hooks/set-state-in-effect": "warn", // Synchronous setState in effects
+    "react-hooks/immutability": "warn", // Mutation of props/state
+    "react-hooks/static-components": "warn", // Dynamic component creation
+    "react-hooks/use-memo": "warn", // useMemo violations
+    "react-hooks/void-use-memo": "warn", // useMemo returning void
+    "react-hooks/component-hook-factories": "warn", // Component/hook factory violations
+    "react-hooks/preserve-manual-memoization": "warn", // Manual memoization issues
+    "react-hooks/globals": "warn", // Global variable usage
+    "react-hooks/error-boundaries": "warn", // Error boundary violations
+    "react-hooks/config": "warn", // Config violations
+    "react-hooks/gating": "warn", // Conditional rendering violations
     "import/no-unresolved": "error",
     "import/order": [
       "error",

.storybook/main.ts

@@ -1,7 +1,8 @@
 import { mergeConfig } from "vite";
 import { resolve } from "path";
+import type { StorybookConfig } from "@storybook/react-vite";
 
-export default {
+const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
@@ -17,9 +18,12 @@ export default {
   ],
   framework: {
     name: "@storybook/react-vite",
-    options: {},
+    options: {
+      strictMode: true,
+    },
   },
   features: {
+    // @ts-expect-error TODO: Check why do we use this feature, maybe it can be removed?
     storyStoreV7: true,
   },
   async viteFinal(config) {
@@ -37,3 +41,5 @@ export default {
     });
   },
 };
+
+export default config;

CHANGELOG.md

@@ -1,5 +1,14 @@
 # @saleor/macaw-ui
 
+## 1.4.1
+
+### Patch Changes
+
+- 54c2363: Upgrade `eslint-plugin-react-hooks` from version 4.6.0 to 7.0.1, add react compiler ESLint rules to detect issues with incorrect hook implementation causing React to crash.
+- 0d2f5ee: CSS Variables from macaw-ui are now set in useLayoutEffect hook, instead of render function, which should resolve issues with React timing. Previously macaw-ui was breaking React contract by making updates in render function, making it not pure.
+- ed9cb0a: React Strict mode was enabled in Storybook for development to detect possible issues earlier. This might mean some components might have "bugs" in development, but not in production build due to additional rendering done in Strict mode. Refer to React docs for more details
+- 10164ae: Fixed crashes caused by `useAutoHeightTextarea` used by Textarea component. It now makes calculations in `useLayoutEffect`, which should prevent timing issues with React 18+
+
 ## 1.4.0
 
 ### Minor Changes

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.0",
+  "version": "1.4.1",
   "license": "CC-BY-4.0",
   "homepage": "https://macaw-ui.vercel.app/",
   "repository": {
@@ -87,8 +87,8 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-react": "^7.33.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-storybook": "^0.6.13",
     "husky": "^8.0.3",
     "is-ci": "^3.0.1",