Fix @probo/ui lint

Signed-off-by: Émile Ré <nemile.re@gmail.com>

package-lock.json

@@ -10,6 +10,9 @@
         "apps/*",
         "packages/*"
       ],
+      "dependencies": {
+        "react-dom": "^19.2.1"
+      },
       "devDependencies": {
         "turbo": "^2.5.3"
       },
@@ -1970,10 +1973,6 @@
       "resolved": "packages/emails",
       "link": true
     },
-    "node_modules/@probo/esbuild-plugin-postcss": {
-      "resolved": "packages/esbuild-plugin-postcss",
-      "link": true
-    },
     "node_modules/@probo/helpers": {
       "resolved": "packages/helpers",
       "link": true
@@ -6063,51 +6062,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/autoprefixer": {
-      "version": "10.4.22",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.22.tgz",
-      "integrity": "sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.27.0",
-        "caniuse-lite": "^1.0.30001754",
-        "fraction.js": "^5.3.4",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.1.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/autoprefixer/node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -8177,16 +8131,6 @@
         "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
       }
     },
-    "node_modules/eslint-plugin-react-refresh": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.24.tgz",
-      "integrity": "sha512-nLHIW7TEq3aLrEYWpVaJ1dRgFR+wLDPN8e8FpYAql/bMV2oBEfC37K0gLEGgv9fy66juNShSMV8OkTqzltcG/w==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "eslint": ">=8.40"
-      }
-    },
     "node_modules/eslint-plugin-storybook": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.12.0.tgz",
@@ -8682,20 +8626,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/fraction.js": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
-      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -11498,6 +11428,7 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
       "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -11598,16 +11529,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/nullthrows": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
@@ -12200,6 +12121,7 @@
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
       "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -12238,17 +12160,11 @@
         "node": ">=4"
       }
     },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/postcss/node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/prelude-ls": {
@@ -12461,15 +12377,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "19.2.0",
+      "version": "19.2.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
-      "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
+      "integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
       "license": "MIT",
       "dependencies": {
         "scheduler": "^0.27.0"
       },
       "peerDependencies": {
-        "react": "^19.2.0"
+        "react": "^19.2.1"
       }
     },
     "node_modules/react-dropzone": {
@@ -13581,6 +13497,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -15920,6 +15837,7 @@
     "packages/esbuild-plugin-postcss": {
       "name": "@probo/esbuild-plugin-postcss",
       "version": "0.0.1",
+      "extraneous": true,
       "dependencies": {
         "postcss": "^8.5"
       },
@@ -16198,7 +16116,6 @@
         "@vitest/coverage-v8": "^3.1.3",
         "eslint": "^9.25.0",
         "eslint-plugin-react-hooks": "^5.2.0",
-        "eslint-plugin-react-refresh": "^0.4.19",
         "eslint-plugin-storybook": "^0.12.0",
         "globals": "^16.0.0",
         "playwright": "^1.55.1",

package.json

@@ -29,5 +29,8 @@
   "packageManager": "npm@11.1.0",
   "volta": {
     "node": "24.4.0"
+  },
+  "dependencies": {
+    "react-dom": "^19.2.1"
   }
 }

packages/esbuild-plugin-postcss/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "@probo/esbuild-plugin-postcss",
-  "version": "0.0.1",
-  "exports": {
-    ".": "./src/index.mjs"
-  },
-  "scripts": {
-    "test": "node tests/esbuild.test.mjs"
-  },
-  "type": "module",
-  "dependencies": {
-    "postcss": "^8.5"
-  },
-  "peerDependencies": {
-    "esbuild": "^0.25.0"
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.4.20",
-    "esbuild": "^0.25.0"
-  }
-}

packages/esbuild-plugin-postcss/src/index.mjs

@@ -1,52 +0,0 @@
-import postcss from "postcss";
-import path from "node:path";
-import fs from "node:fs/promises";
-import os from "node:os";
-import process from "node:process";
-
-export default (options = { plugins: [] }) => ({
-  name: "postcss",
-  setup: async function (build) {
-    const { rootDir = options.rootDir || process.cwd() } = options;
-
-    const tmpDirPath = await fs.mkdtemp(
-      path.join(os.tmpdir(), "esbuild-plugin-postcss-"),
-    );
-
-    build.onResolve(
-      { filter: /.\.(css)$/, namespace: "file" },
-      async (args) => {
-        const resolution = await build.resolve(args.path, {
-          resolveDir: args.resolveDir,
-          kind: args.kind,
-        });
-        if (resolution.errors.length > 0) {
-          return { errors: resolution.errors };
-        }
-
-        const sourceFullPath = resolution.path;
-        const sourceExt = path.extname(sourceFullPath);
-        const sourceBaseName = path.basename(sourceFullPath, sourceExt);
-        const sourceDir = path.dirname(sourceFullPath);
-        const sourceRelDir = path.relative(path.dirname(rootDir), sourceDir);
-
-        const tmpDir = path.resolve(tmpDirPath, sourceRelDir);
-        const tmpFilePath = path.resolve(tmpDir, `${sourceBaseName}.css`);
-        await fs.mkdir(tmpDir, { recursive: true });
-
-        const css = await fs.readFile(sourceFullPath);
-        const result = await postcss(options.plugins).process(css, {
-          from: sourceFullPath,
-          to: tmpFilePath,
-        });
-
-        await fs.writeFile(tmpFilePath, result.css);
-
-        return {
-          path: tmpFilePath,
-          watchFiles: [sourceFullPath],
-        };
-      },
-    );
-  },
-});

packages/esbuild-plugin-postcss/tests/esbuild.test.mjs

@@ -1,67 +0,0 @@
-import { strict as assert } from "node:assert";
-import path from "node:path";
-import fs from "node:fs/promises";
-import os from "node:os";
-import * as esbuild from "esbuild";
-import postcssPlugin from "../src/index.mjs";
-import postcss from "postcss";
-import autoprefixer from "autoprefixer";
-
-// Create a temporary directory for our test
-const tmpDir = await fs.mkdtemp(
-  path.join(os.tmpdir(), "esbuild-postcss-test-"),
-);
-const inputFile = path.join(tmpDir, "input.css");
-const outputFile = path.join(tmpDir, "output.js");
-
-// Create a simple CSS file for testing
-const cssContent = `
-.example {
-  display: flex;
-  user-select: none;
-}
-`;
-
-// Write the test CSS file
-await fs.writeFile(inputFile, cssContent);
-
-// Test the plugin with autoprefixer
-try {
-  console.log("Testing PostCSS plugin with autoprefixer...");
-
-  const result = await esbuild.build({
-    entryPoints: [inputFile],
-    bundle: true,
-    outfile: outputFile,
-    plugins: [
-      postcssPlugin({
-        plugins: [autoprefixer],
-      }),
-    ],
-  });
-
-  console.log("Build completed successfully");
-
-  const outputContent = await fs.readFile(outputFile, "utf8");
-
-  assert(
-    outputContent.includes("-webkit-user-select"),
-    "Expected -webkit-user-select to be added by autoprefixer",
-  );
-  assert(
-    outputContent.includes("-moz-user-select"),
-    "Expected -moz-user-select to be added by autoprefixer",
-  );
-
-  console.log("Test passed: Autoprefixer correctly processed CSS");
-} catch (error) {
-  console.error("Test failed:", error);
-  process.exit(1);
-} finally {
-  try {
-    await fs.rm(tmpDir, { recursive: true, force: true });
-    console.log("Cleaned up temporary test files");
-  } catch (cleanupError) {
-    console.warn("Warning: Failed to clean up temporary files:", cleanupError);
-  }
-}

packages/ui/.storybook/main.ts

@@ -6,7 +6,7 @@ import { join, dirname } from "path";
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
  */
-function getAbsolutePath(value: string): any {
+function getAbsolutePath(value: string): string {
     return dirname(require.resolve(join(value, "package.json")));
 }
 const config: StorybookConfig = {

packages/ui/.storybook/preview.tsx

@@ -4,6 +4,7 @@ import "../src/theme.css";
 import "./preview.css";
 import { BrowserRouter } from "react-router";
 import { useEffect } from "react";
+import React from "react";
 
 const preview: Preview = {
     parameters: {
@@ -15,7 +16,7 @@ const preview: Preview = {
         },
     },
     decorators: [
-        (Story, { parameters }) => {
+        (Story) => {
             useEffect(() => {
                 document.body.classList.add("bg-level-0");
             }, []);

packages/ui/eslint.config.mjs

@@ -1,10 +1,12 @@
+// @ts-check
+
 import js from "@eslint/js";
+import { defineConfig } from "eslint/config";
 import globals from "globals";
 import reactHooks from "eslint-plugin-react-hooks";
-import reactRefresh from "eslint-plugin-react-refresh";
 import tseslint from "typescript-eslint";
 
-export default tseslint.config(
+export default defineConfig(
     { ignores: ["dist"] },
     {
         extends: [js.configs.recommended, ...tseslint.configs.recommended],
@@ -18,14 +20,9 @@ export default tseslint.config(
         },
         plugins: {
             "react-hooks": reactHooks,
-            "react-refresh": reactRefresh,
         },
         rules: {
             ...reactHooks.configs.recommended.rules,
-            "react-refresh/only-export-components": [
-                "warn",
-                { allowConstantExport: true },
-            ],
         },
     },
 );

packages/ui/package.json

@@ -55,7 +55,6 @@
         "@vitest/coverage-v8": "^3.1.3",
         "eslint": "^9.25.0",
         "eslint-plugin-react-hooks": "^5.2.0",
-        "eslint-plugin-react-refresh": "^0.4.19",
         "eslint-plugin-storybook": "^0.12.0",
         "globals": "^16.0.0",
         "playwright": "^1.55.1",

packages/ui/src/Atoms/Badge/Badge.tsx

@@ -40,6 +40,6 @@ const badge = tv({
 
 export function Badge(props: Props) {
     const Component = props.asChild ? Slot : "div";
-    const { asChild, size, variant, ...restProps } = props;
+    const { size, variant, ...restProps } = props;
-    return <Component {...restProps} className={badge(props)} />;
+    return <Component {...restProps} className={badge({ size, variant })} />;
 }

packages/ui/src/Atoms/InfiniteScrollTrigger/InfiniteScrollTrigger.tsx

@@ -18,7 +18,7 @@ export function InfiniteScrollTrigger({ children, onView, loading }: Props) {
     const onViewRef = useRefSync(onView);
     useEffect(() => {
         if (inView && !loading) onViewRef.current();
-    }, [inView, loading]);
+    }, [inView, loading, onViewRef]);
 
     return (
         <div

packages/ui/src/Atoms/Input/Input.tsx

@@ -34,8 +34,9 @@ export function Input({
     onValueChange,
     ...props
 }: Props) {
-    if (IconComponent) {
     const [focus, setFocus] = useState(false);
+
+    if (IconComponent) {
         return (
             <div
                 className={input({

packages/ui/src/Atoms/Textarea/Textarea.tsx

@@ -3,6 +3,7 @@ import {
     type TextareaHTMLAttributes,
     type RefCallback,
     useLayoutEffect,
+    useCallback,
 } from "react";
 import { input } from "../Input/Input";
 import clsx from "clsx";
@@ -17,16 +18,16 @@ export function Textarea(props: Props) {
     const ref = useRef<HTMLTextAreaElement>(null);
     const { autogrow, ref: propsRef, ...restProps } = props;
 
-    const adjustHeight = () => {
+    const adjustHeight = useCallback(() => {
         if (!autogrow || !ref.current) return;
         ref.current.style.height = "inherit";
         const paddingY = 2;
         ref.current.style.height = `${ref.current.scrollHeight + paddingY * 2}px`;
-    };
+    }, [autogrow, ref]);
 
     useLayoutEffect(() => {
         adjustHeight();
-    }, []);
+    }, [adjustHeight]);
 
     return (
         <textarea

packages/ui/src/Atoms/Toasts/Toasts.stories.tsx

@@ -11,7 +11,7 @@ export default {
 type Story = StoryObj<typeof Toasts>;
 
 export const Default: Story = {
-    render() {
+    render: function Render() {
         const { toast } = useToast();
         return (
             <>

packages/ui/src/Layouts/Layout.tsx

@@ -78,7 +78,7 @@ export function Drawer({
         return () => {
             setDrawer(false);
         };
-    }, []);
+    }, [setDrawer]);
     return createPortal(
         <aside
             className={clsx(

packages/ui/src/Molecules/Combobox/Combobox.stories.tsx

@@ -12,7 +12,7 @@ export default {
 type Story = StoryObj<typeof Combobox>;
 
 export const Default: Story = {
-    render: () => {
+    render: function Render() {
         const [items, setItems] = useState(["a", "b", "c"] as string[]);
         const onSearch = (query: string) => {
             setItems(times(10, (i) => `${query} ${i}`));

packages/ui/src/Molecules/Dialog/ConfirmDialog.tsx

@@ -59,7 +59,7 @@ export function useConfirm() {
                 label: props.label ?? __("Delete"),
             });
         },
-        [open],
+        [open, __],
     );
 }
 

packages/ui/src/Molecules/DurationPicker/DurationPicker.stories.tsx

@@ -11,7 +11,7 @@ export default {
 type Story = StoryObj<typeof DurationPicker>;
 
 export const Default: Story = {
-    render() {
+    render: function Render() {
         const [value, setValue] = useState<string | null>("PT1H");
         return <DurationPicker value={value} onValueChange={setValue} />;
     },

packages/ui/src/Molecules/MeasureImplementation/MeasureImplementation.stories.tsx

@@ -10,21 +10,23 @@ export default {
 
 type Story = StoryObj<typeof MeasureImplementation>;
 
+type MeasureState = "IMPLEMENTED" | "IN_PROGRESS" | "NOT_APPLICABLE" | "NOT_STARTED";
+
 export const Default: Story = {
     args: {
         measures: [
             ...times(15, () => ({
-                state: "IMPLEMENTED",
+                state: "IMPLEMENTED" as MeasureState,
             })),
             ...times(10, () => ({
-                state: "IN_PROGRESS",
+                state: "IN_PROGRESS" as MeasureState,
             })),
             ...times(5, () => ({
-                state: "NOT_APPLICABLE",
+                state: "NOT_APPLICABLE" as MeasureState,
             })),
             ...times(5, () => ({
-                state: "NOT_STARTED",
+                state: "NOT_STARTED" as MeasureState,
             })),
-        ] as any,
+        ],
     },
 };

packages/ui/src/Molecules/Risks/RisksChart.tsx

@@ -59,7 +59,7 @@ export function RisksChart({ organizationId, type, risks }: Props) {
         return groupBy(risks ?? [], (risk) =>
             cellKey(risk[impactField], risk[likelihoodField]),
         );
-    }, [organizationId, risks]);
+    }, [impactField, likelihoodField, risks]);
 
     return (
         <Card padded className="text-txt-primary">

packages/ui/src/Molecules/Table/DataTable.stories.tsx

@@ -19,7 +19,7 @@ export default {
 type Story = StoryObj<Component>;
 
 export const Default: Story = {
-    render: ({ onUpdate }) => {
+    render: function Render({ onUpdate }) {
         const [state, setState] = useState({
             name: "John",
             status: "delivered",