diff --git a/package-lock.json b/package-lock.json index 86fd1916f..e6113fcb3 100644 --- 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", diff --git a/package.json b/package.json index 8cc55fe50..2b693cf44 100644 --- 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" } } diff --git a/packages/esbuild-plugin-postcss/package.json b/packages/esbuild-plugin-postcss/package.json deleted file mode 100644 index 5eb4938d9..000000000 --- a/packages/esbuild-plugin-postcss/package.json +++ /dev/null @@ -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" - } -} diff --git a/packages/esbuild-plugin-postcss/src/index.mjs b/packages/esbuild-plugin-postcss/src/index.mjs deleted file mode 100644 index d5a806170..000000000 --- a/packages/esbuild-plugin-postcss/src/index.mjs +++ /dev/null @@ -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], - }; - }, - ); - }, -}); diff --git a/packages/esbuild-plugin-postcss/tests/esbuild.test.mjs b/packages/esbuild-plugin-postcss/tests/esbuild.test.mjs deleted file mode 100644 index 6adf45ea7..000000000 --- a/packages/esbuild-plugin-postcss/tests/esbuild.test.mjs +++ /dev/null @@ -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); - } -} diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts index 618c7c9b8..4fa6c6027 100644 --- 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 = { diff --git a/packages/ui/.storybook/preview.tsx b/packages/ui/.storybook/preview.tsx index e32edabae..d6c3cbb44 100644 --- 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"); }, []); diff --git a/packages/ui/eslint.config.js b/packages/ui/eslint.config.mjs similarity index 70% rename from packages/ui/eslint.config.js rename to packages/ui/eslint.config.mjs index 0a964a59f..794c86556 100644 --- a/packages/ui/eslint.config.js +++ 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 }, - ], }, }, ); diff --git a/packages/ui/package.json b/packages/ui/package.json index 041730693..2d8b32852 100644 --- 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", diff --git a/packages/ui/src/Atoms/Badge/Badge.tsx b/packages/ui/src/Atoms/Badge/Badge.tsx index 8cae95f6a..cfb7985af 100644 --- 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 ; + const { size, variant, ...restProps } = props; + return ; } diff --git a/packages/ui/src/Atoms/InfiniteScrollTrigger/InfiniteScrollTrigger.tsx b/packages/ui/src/Atoms/InfiniteScrollTrigger/InfiniteScrollTrigger.tsx index d199608d4..b72c1edbb 100644 --- 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 (
(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 (