Fix @probo/ui lint

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

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;
-    return <Component {...restProps} className={badge(props)} />;
+    const { size, variant, ...restProps } = 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) {
+    const [focus, setFocus] = useState(false);
+
     if (IconComponent) {
-        const [focus, setFocus] = useState(false);
         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",