Fix @probo/ui lint

Signed-off-by: Émile Ré <nemile.re@gmail.com>
2025-12-04 17:24:59 +04:00
parent 6462de597b
commit a202f2f51e
21 changed files with 45 additions and 264 deletions
--- a/package-lock.json
+++ b/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",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
-      "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
+      "version": "19.2.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
+      "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",
--- a/package.json
+++ b/package.json
@@ -29,5 +29,8 @@
  "packageManager": "npm@11.1.0",
  "volta": {
    "node": "24.4.0"
+  },
+  "dependencies": {
+    "react-dom": "^19.2.1"
  }
 }
--- a/packages/esbuild-plugin-postcss/package.json
+++ b/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"
-  }
-}
--- a/packages/esbuild-plugin-postcss/src/index.mjs
+++ b/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],
-        };
-      },
-    );
-  },
-});
--- a/packages/esbuild-plugin-postcss/tests/esbuild.test.mjs
+++ b/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);
-  }
-}
--- a/packages/ui/.storybook/main.ts
+++ b/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 = {
--- a/packages/ui/.storybook/preview.tsx
+++ b/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");
            }, []);
--- a/packages/ui/eslint.config.mjs
+++ b/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 },
-            ],
        },
    },
 );
--- a/packages/ui/package.json
+++ b/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",
--- a/packages/ui/src/Atoms/Badge/Badge.tsx
+++ b/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;
-    return <Component {...restProps} className={badge(props)} />;
+    const { size, variant, ...restProps } = props;
+    return <Component {...restProps} className={badge({ size, variant })} />;
 }
--- a/packages/ui/src/Atoms/InfiniteScrollTrigger/InfiniteScrollTrigger.tsx
+++ b/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
--- a/packages/ui/src/Atoms/Input/Input.tsx
+++ b/packages/ui/src/Atoms/Input/Input.tsx
@@ -34,8 +34,9 @@ export function Input({
    onValueChange,
    ...props
 }: Props) {
+    const [focus, setFocus] = useState(false);
+
    if (IconComponent) {
-        const [focus, setFocus] = useState(false);
        return (
            <div
                className={input({
--- a/packages/ui/src/Atoms/Textarea/Textarea.tsx
+++ b/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
--- a/packages/ui/src/Atoms/Toasts/Toasts.stories.tsx
+++ b/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 (
            <>
--- a/packages/ui/src/Layouts/Layout.tsx
+++ b/packages/ui/src/Layouts/Layout.tsx
@@ -78,7 +78,7 @@ export function Drawer({
        return () => {
            setDrawer(false);
        };
-    }, []);
+    }, [setDrawer]);
    return createPortal(
        <aside
            className={clsx(
--- a/packages/ui/src/Molecules/Combobox/Combobox.stories.tsx
+++ b/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}`));
--- a/packages/ui/src/Molecules/Dialog/ConfirmDialog.tsx
+++ b/packages/ui/src/Molecules/Dialog/ConfirmDialog.tsx
@@ -59,7 +59,7 @@ export function useConfirm() {
                label: props.label ?? __("Delete"),
            });
        },
-        [open],
+        [open, __],
    );
 }

--- a/packages/ui/src/Molecules/DurationPicker/DurationPicker.stories.tsx
+++ b/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} />;
    },
--- a/packages/ui/src/Molecules/MeasureImplementation/MeasureImplementation.stories.tsx
+++ b/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,
+        ],
    },
 };
--- a/packages/ui/src/Molecules/Risks/RisksChart.tsx
+++ b/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">
--- a/packages/ui/src/Molecules/Table/DataTable.stories.tsx
+++ b/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",