diff --git a/frontend/package.json b/frontend/package.json index a17b5950d1..d0ee387b83 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -51,6 +51,7 @@ "@penpot/svgo": "penpot/svgo#v3.2", "@penpot/text-editor": "workspace:./text-editor", "@playwright/test": "1.58.0", + "@penpot/ui": "file:../plugins/libs/ui", "@storybook/addon-docs": "10.1.11", "@storybook/addon-themes": "10.1.11", "@storybook/addon-vitest": "10.1.11", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 5548634111..056b7a73c4 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -28,6 +28,9 @@ importers: '@penpot/text-editor': specifier: workspace:./text-editor version: link:text-editor + '@penpot/ui': + specifier: file:../plugins/libs/ui + version: file:../plugins/libs/ui(react-dom@19.2.3(react@19.2.3))(react@19.2.3) '@playwright/test': specifier: 1.58.0 version: 1.58.0 @@ -924,36 +927,42 @@ packages: engines: {node: '>= 10.0.0'} cpu: [arm] os: [linux] + libc: [glibc] '@parcel/watcher-linux-arm-musl@2.5.1': resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==} engines: {node: '>= 10.0.0'} cpu: [arm] os: [linux] + libc: [musl] '@parcel/watcher-linux-arm64-glibc@2.5.1': resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==} engines: {node: '>= 10.0.0'} cpu: [arm64] os: [linux] + libc: [glibc] '@parcel/watcher-linux-arm64-musl@2.5.1': resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==} engines: {node: '>= 10.0.0'} cpu: [arm64] os: [linux] + libc: [musl] '@parcel/watcher-linux-x64-glibc@2.5.1': resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==} engines: {node: '>= 10.0.0'} cpu: [x64] os: [linux] + libc: [glibc] '@parcel/watcher-linux-x64-musl@2.5.1': resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==} engines: {node: '>= 10.0.0'} cpu: [x64] os: [linux] + libc: [musl] '@parcel/watcher-win32-arm64@2.5.1': resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==} @@ -983,6 +992,12 @@ packages: '@penpot/plugins-runtime@1.4.2': resolution: {integrity: sha512-y9TDZOnb96JBW9E33dHKpmTMeAPXLtHDIZruUVjtM8hBJWZK7RCv+vAGDGxeoZJC/OB2YAHrCZG+mukePBzcuQ==} + '@penpot/ui@file:../plugins/libs/ui': + resolution: {directory: ../plugins/libs/ui, type: directory} + peerDependencies: + react: '>=19.2' + react-dom: '>=19.2' + '@pkgjs/parseargs@0.11.0': resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} @@ -1035,24 +1050,28 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [glibc] '@resvg/resvg-js-linux-arm64-musl@2.6.2': resolution: {integrity: sha512-3h3dLPWNgSsD4lQBJPb4f+kvdOSJHa5PjTYVsWHxLUzH4IFTJUAnmuWpw4KqyQ3NA5QCyhw4TWgxk3jRkQxEKg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [musl] '@resvg/resvg-js-linux-x64-gnu@2.6.2': resolution: {integrity: sha512-IVUe+ckIerA7xMZ50duAZzwf1U7khQe2E0QpUxu5MBJNao5RqC0zwV/Zm965vw6D3gGFUl7j4m+oJjubBVoftw==} engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [glibc] '@resvg/resvg-js-linux-x64-musl@2.6.2': resolution: {integrity: sha512-UOf83vqTzoYQO9SZ0fPl2ZIFtNIz/Rr/y+7X8XRX1ZnBYsQ/tTb+cj9TE+KHOdmlTFBxhYzVkP2lRByCzqi4jQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [musl] '@resvg/resvg-js-win32-arm64-msvc@2.6.2': resolution: {integrity: sha512-7C/RSgCa+7vqZ7qAbItfiaAWhyRSoD4l4BQAbVDqRRsRgY+S+hgS3in0Rxr7IorKUpGE69X48q6/nOAuTJQxeQ==} @@ -1149,121 +1168,145 @@ packages: resolution: {integrity: sha512-EHMUcDwhtdRGlXZsGSIuXSYwD5kOT9NVnx9sqzYiwAc91wfYOE1g1djOEDseZJKKqtHAHGwnGPQu3kytmfaXLQ==} cpu: [arm] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm-gnueabihf@4.56.0': resolution: {integrity: sha512-E8jKK87uOvLrrLN28jnAAAChNq5LeCd2mGgZF+fGF5D507WlG/Noct3lP/QzQ6MrqJ5BCKNwI9ipADB6jyiq2A==} cpu: [arm] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm-musleabihf@4.54.0': resolution: {integrity: sha512-+pBrqEjaakN2ySv5RVrj/qLytYhPKEUwk+e3SFU5jTLHIcAtqh2rLrd/OkbNuHJpsBgxsD8ccJt5ga/SeG0JmA==} cpu: [arm] os: [linux] + libc: [musl] '@rollup/rollup-linux-arm-musleabihf@4.56.0': resolution: {integrity: sha512-jQosa5FMYF5Z6prEpTCCmzCXz6eKr/tCBssSmQGEeozA9tkRUty/5Vx06ibaOP9RCrW1Pvb8yp3gvZhHwTDsJw==} cpu: [arm] os: [linux] + libc: [musl] '@rollup/rollup-linux-arm64-gnu@4.54.0': resolution: {integrity: sha512-NSqc7rE9wuUaRBsBp5ckQ5CVz5aIRKCwsoa6WMF7G01sX3/qHUw/z4pv+D+ahL1EIKy6Enpcnz1RY8pf7bjwng==} cpu: [arm64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm64-gnu@4.56.0': resolution: {integrity: sha512-uQVoKkrC1KGEV6udrdVahASIsaF8h7iLG0U0W+Xn14ucFwi6uS539PsAr24IEF9/FoDtzMeeJXJIBo5RkbNWvQ==} cpu: [arm64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm64-musl@4.54.0': resolution: {integrity: sha512-gr5vDbg3Bakga5kbdpqx81m2n9IX8M6gIMlQQIXiLTNeQW6CucvuInJ91EuCJ/JYvc+rcLLsDFcfAD1K7fMofg==} cpu: [arm64] os: [linux] + libc: [musl] '@rollup/rollup-linux-arm64-musl@4.56.0': resolution: {integrity: sha512-vLZ1yJKLxhQLFKTs42RwTwa6zkGln+bnXc8ueFGMYmBTLfNu58sl5/eXyxRa2RarTkJbXl8TKPgfS6V5ijNqEA==} cpu: [arm64] os: [linux] + libc: [musl] '@rollup/rollup-linux-loong64-gnu@4.54.0': resolution: {integrity: sha512-gsrtB1NA3ZYj2vq0Rzkylo9ylCtW/PhpLEivlgWe0bpgtX5+9j9EZa0wtZiCjgu6zmSeZWyI/e2YRX1URozpIw==} cpu: [loong64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-loong64-gnu@4.56.0': resolution: {integrity: sha512-FWfHOCub564kSE3xJQLLIC/hbKqHSVxy8vY75/YHHzWvbJL7aYJkdgwD/xGfUlL5UV2SB7otapLrcCj2xnF1dg==} cpu: [loong64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-loong64-musl@4.56.0': resolution: {integrity: sha512-z1EkujxIh7nbrKL1lmIpqFTc/sr0u8Uk0zK/qIEFldbt6EDKWFk/pxFq3gYj4Bjn3aa9eEhYRlL3H8ZbPT1xvA==} cpu: [loong64] os: [linux] + libc: [musl] '@rollup/rollup-linux-ppc64-gnu@4.54.0': resolution: {integrity: sha512-y3qNOfTBStmFNq+t4s7Tmc9hW2ENtPg8FeUD/VShI7rKxNW7O4fFeaYbMsd3tpFlIg1Q8IapFgy7Q9i2BqeBvA==} cpu: [ppc64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-ppc64-gnu@4.56.0': resolution: {integrity: sha512-iNFTluqgdoQC7AIE8Q34R3AuPrJGJirj5wMUErxj22deOcY7XwZRaqYmB6ZKFHoVGqRcRd0mqO+845jAibKCkw==} cpu: [ppc64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-ppc64-musl@4.56.0': resolution: {integrity: sha512-MtMeFVlD2LIKjp2sE2xM2slq3Zxf9zwVuw0jemsxvh1QOpHSsSzfNOTH9uYW9i1MXFxUSMmLpeVeUzoNOKBaWg==} cpu: [ppc64] os: [linux] + libc: [musl] '@rollup/rollup-linux-riscv64-gnu@4.54.0': resolution: {integrity: sha512-89sepv7h2lIVPsFma8iwmccN7Yjjtgz0Rj/Ou6fEqg3HDhpCa+Et+YSufy27i6b0Wav69Qv4WBNl3Rs6pwhebQ==} cpu: [riscv64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-riscv64-gnu@4.56.0': resolution: {integrity: sha512-in+v6wiHdzzVhYKXIk5U74dEZHdKN9KH0Q4ANHOTvyXPG41bajYRsy7a8TPKbYPl34hU7PP7hMVHRvv/5aCSew==} cpu: [riscv64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-riscv64-musl@4.54.0': resolution: {integrity: sha512-ZcU77ieh0M2Q8Ur7D5X7KvK+UxbXeDHwiOt/CPSBTI1fBmeDMivW0dPkdqkT4rOgDjrDDBUed9x4EgraIKoR2A==} cpu: [riscv64] os: [linux] + libc: [musl] '@rollup/rollup-linux-riscv64-musl@4.56.0': resolution: {integrity: sha512-yni2raKHB8m9NQpI9fPVwN754mn6dHQSbDTwxdr9SE0ks38DTjLMMBjrwvB5+mXrX+C0npX0CVeCUcvvvD8CNQ==} cpu: [riscv64] os: [linux] + libc: [musl] '@rollup/rollup-linux-s390x-gnu@4.54.0': resolution: {integrity: sha512-2AdWy5RdDF5+4YfG/YesGDDtbyJlC9LHmL6rZw6FurBJ5n4vFGupsOBGfwMRjBYH7qRQowT8D/U4LoSvVwOhSQ==} cpu: [s390x] os: [linux] + libc: [glibc] '@rollup/rollup-linux-s390x-gnu@4.56.0': resolution: {integrity: sha512-zhLLJx9nQPu7wezbxt2ut+CI4YlXi68ndEve16tPc/iwoylWS9B3FxpLS2PkmfYgDQtosah07Mj9E0khc3Y+vQ==} cpu: [s390x] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-gnu@4.54.0': resolution: {integrity: sha512-WGt5J8Ij/rvyqpFexxk3ffKqqbLf9AqrTBbWDk7ApGUzaIs6V+s2s84kAxklFwmMF/vBNGrVdYgbblCOFFezMQ==} cpu: [x64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-gnu@4.56.0': resolution: {integrity: sha512-MVC6UDp16ZSH7x4rtuJPAEoE1RwS8N4oK9DLHy3FTEdFoUTCFVzMfJl/BVJ330C+hx8FfprA5Wqx4FhZXkj2Kw==} cpu: [x64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-musl@4.54.0': resolution: {integrity: sha512-JzQmb38ATzHjxlPHuTH6tE7ojnMKM2kYNzt44LO/jJi8BpceEC8QuXYA908n8r3CNuG/B3BV8VR3Hi1rYtmPiw==} cpu: [x64] os: [linux] + libc: [musl] '@rollup/rollup-linux-x64-musl@4.56.0': resolution: {integrity: sha512-ZhGH1eA4Qv0lxaV00azCIS1ChedK0V32952Md3FtnxSqZTBTd6tgil4nZT5cU8B+SIw3PFYkvyR4FKo2oyZIHA==} cpu: [x64] os: [linux] + libc: [musl] '@rollup/rollup-openbsd-x64@4.56.0': resolution: {integrity: sha512-O16XcmyDeFI9879pEcmtWvD/2nyxR9mF7Gs44lf1vGGx8Vg2DRNx11aVXBEqOQhWb92WN4z7fW/q4+2NYzCbBA==} @@ -3784,48 +3827,56 @@ packages: engines: {node: '>=14.0.0'} cpu: [arm64] os: [linux] + libc: glibc sass-embedded-linux-arm@1.97.1: resolution: {integrity: sha512-48VxaTUApLyx1NXFdZhKqI/7FYLmz8Ju3Ki2V/p+mhn5raHgAiYeFgn8O1WGxTOh+hBb9y3FdSR5a8MNTbmKMQ==} engines: {node: '>=14.0.0'} cpu: [arm] os: [linux] + libc: glibc sass-embedded-linux-musl-arm64@1.97.1: resolution: {integrity: sha512-kD35WSD9o0279Ptwid3Jnbovo1FYnuG2mayYk9z4ZI4mweXEK6vTu+tlvCE/MdF/zFKSj11qaxaH+uzXe2cO5A==} engines: {node: '>=14.0.0'} cpu: [arm64] os: [linux] + libc: musl sass-embedded-linux-musl-arm@1.97.1: resolution: {integrity: sha512-FUFs466t3PVViVOKY/60JgLLtl61Pf7OW+g5BeEfuqVcSvYUECVHeiYHtX1fT78PEVa0h9tHpM6XpWti+7WYFA==} engines: {node: '>=14.0.0'} cpu: [arm] os: [linux] + libc: musl sass-embedded-linux-musl-riscv64@1.97.1: resolution: {integrity: sha512-ZgpYps5YHuhA2+KiLkPukRbS5298QObgUhPll/gm5i0LOZleKCwrFELpVPcbhsSBuxqji2uaag5OL+n3JRBVVg==} engines: {node: '>=14.0.0'} cpu: [riscv64] os: [linux] + libc: musl sass-embedded-linux-musl-x64@1.97.1: resolution: {integrity: sha512-wcAigOyyvZ6o1zVypWV7QLZqpOEVnlBqJr9MbpnRIm74qFTSbAEmShoh8yMXBymzuVSmEbThxAwW01/TLf62tA==} engines: {node: '>=14.0.0'} cpu: [x64] os: [linux] + libc: musl sass-embedded-linux-riscv64@1.97.1: resolution: {integrity: sha512-9j1qE1ZrLMuGb+LUmBzw93Z4TNfqlRkkxjPVZy6u5vIggeSfvGbte7eRoYBNWX6SFew/yBCL90KXIirWFSGrlQ==} engines: {node: '>=14.0.0'} cpu: [riscv64] os: [linux] + libc: glibc sass-embedded-linux-x64@1.97.1: resolution: {integrity: sha512-7nrLFYMH/UgvEgXR5JxQJ6y9N4IJmnFnYoDxN0nw0jUp+CQWQL4EJ4RqAKTGelneueRbccvt2sEyPK+X0KJ9Jg==} engines: {node: '>=14.0.0'} cpu: [x64] os: [linux] + libc: glibc sass-embedded-unknown-all@1.97.1: resolution: {integrity: sha512-oPSeKc7vS2dx3ZJHiUhHKcyqNq0GWzAiR8zMVpPd/kVMl5ZfVyw+5HTCxxWDBGkX02lNpou27JkeBPCaneYGAQ==} @@ -5245,6 +5296,11 @@ snapshots: ses: 1.14.0 zod: 3.25.76 + '@penpot/ui@file:../plugins/libs/ui(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': + dependencies: + react: 19.2.3 + react-dom: 19.2.3(react@19.2.3) + '@pkgjs/parseargs@0.11.0': optional: true diff --git a/frontend/resources/templates/index.mustache b/frontend/resources/templates/index.mustache index d6437a8969..129d9c57a1 100644 --- a/frontend/resources/templates/index.mustache +++ b/frontend/resources/templates/index.mustache @@ -18,6 +18,7 @@ + {{#isDebug}} {{/isDebug}} diff --git a/frontend/src/app/main/ui/dashboard.cljs b/frontend/src/app/main/ui/dashboard.cljs index 04c376def4..505f315f45 100644 --- a/frontend/src/app/main/ui/dashboard.cljs +++ b/frontend/src/app/main/ui/dashboard.cljs @@ -7,6 +7,7 @@ (ns app.main.ui.dashboard (:require-macros [app.main.style :as stl]) (:require + ["@penpot/ui" :refer [Example]] [app.common.data.macros :as dm] [app.config :as cf] [app.main.data.dashboard :as dd] @@ -312,6 +313,9 @@ ;; team is already set so don't put the team into mf/deps. [:main {:class (stl/css :dashboard) :key (dm/str (:id team))} + + [:div + [:> Example]] [:> sidebar* {:team team :projects projects diff --git a/plugins/libs/ui/README.md b/plugins/libs/ui/README.md index a89c68e881..ef431d1b50 100644 --- a/plugins/libs/ui/README.md +++ b/plugins/libs/ui/README.md @@ -1,10 +1,11 @@ -# ui +# UI -This library was generated with [Nx](https://nx.dev). +A React component library with TypeScript for the Penpot ecosystem. -## Running unit tests +## Commands -Run `nx test ui` to execute the unit tests via [Vitest](https://vitest.dev/). +Run from workspace root: -- pnpm nx test ui -- pnpm nx storybook ui +- **`pnpm storybook:ui`** - Start Storybook for component development +- **`pnpm build:ui`** - Build the library for production +- **`pnpm start:ui`** - Build in watch mode for development diff --git a/plugins/libs/ui/package.json b/plugins/libs/ui/package.json index 1e815b84f3..4290f37ef8 100644 --- a/plugins/libs/ui/package.json +++ b/plugins/libs/ui/package.json @@ -1,12 +1,36 @@ { - "name": "ui", + "name": "@penpot/ui", "version": "0.0.1", - "main": "./index.js", - "types": "./index.d.ts", + "types": "./dist/index.d.ts", + "type": "module", "exports": { ".": { - "import": "./index.mjs", - "require": "./index.js" - } + "import": "./dist/index.js" + }, + "./style.css": "./dist/style.css" + }, + "scripts": { + "start": "vite build --watch" + }, + "devDependencies": { + "@babel/core": "^7.14.5", + "@babel/preset-react": "^7.14.5", + "@storybook/react": "10.2.0", + "@storybook/react-vite": "10.2.0", + "@testing-library/dom": "10.4.0", + "@testing-library/react": "16.3.0", + "@types/react": "^19.0.0", + "@types/react-dom": "^19.0.0", + "@vitejs/plugin-react": "^4.2.0", + "eslint-plugin-import": "2.31.0", + "eslint-plugin-jsx-a11y": "6.10.1", + "eslint-plugin-react": "7.35.0", + "eslint-plugin-react-hooks": "7.0.1", + "react-compiler-runtime": "^1.0.0", + "storybook": "10.2.0" + }, + "peerDependencies": { + "react": ">=19.2", + "react-dom": ">=19.2" } } diff --git a/plugins/libs/ui/src/lib/example/Example.module.css b/plugins/libs/ui/src/lib/example/Example.module.css index f445069d32..bcb65dd60c 100644 --- a/plugins/libs/ui/src/lib/example/Example.module.css +++ b/plugins/libs/ui/src/lib/example/Example.module.css @@ -1,4 +1,5 @@ .container { + background-color: #f0f0f0; padding: 16px; border: 2px solid #000; } diff --git a/plugins/libs/ui/src/lib/example/Example.tsx b/plugins/libs/ui/src/lib/example/Example.tsx index d5d295fe4c..142970f958 100644 --- a/plugins/libs/ui/src/lib/example/Example.tsx +++ b/plugins/libs/ui/src/lib/example/Example.tsx @@ -1,11 +1,20 @@ +import { useState } from 'react'; import styles from './Example.module.css'; export function Example() { + const [count, setCount] = useState(0); + return (
-

Welcome to Example!

+

Example!

+
+

Counter: {count}

+ + + +
); } -export default Example; +export default Example; \ No newline at end of file diff --git a/plugins/libs/ui/vite.config.mts b/plugins/libs/ui/vite.config.mts index 10c091bd06..90d31df027 100644 --- a/plugins/libs/ui/vite.config.mts +++ b/plugins/libs/ui/vite.config.mts @@ -5,12 +5,31 @@ import dts from 'vite-plugin-dts'; import * as path from 'path'; import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin'; +import { copyFileSync } from 'node:fs'; + +const copyCssPlugin = () => ({ + name: 'copy-css', + closeBundle: () => { + try { + copyFileSync( + 'dist/index.css', + '../../../frontend/resources/public/css/ui.css', + ); + } catch (e) { + console.log('Error copying css file', e); + } + }, +}); export default defineConfig(() => ({ root: import.meta.dirname, cacheDir: '../../node_modules/.vite/libs/ui', plugins: [ - react(), + react({ + babel: { + plugins: ['babel-plugin-react-compiler'], + }, + }), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md']), dts({ @@ -18,31 +37,22 @@ export default defineConfig(() => ({ tsconfigPath: path.join(import.meta.dirname, 'tsconfig.lib.json'), pathsToAliases: false, }), + copyCssPlugin(), ], - // Uncomment this if you are using workers. - // worker: { - // plugins: () => [ nxViteTsPaths() ], - // }, - // Configuration for building your library. - // See: https://vite.dev/guide/build.html#library-mode build: { - outDir: '../../dist/libs/ui', + outDir: 'dist/', emptyOutDir: true, reportCompressedSize: true, commonjsOptions: { transformMixedEsModules: true, }, lib: { - // Could also be a dictionary or array of multiple entry points. entry: 'src/index.ts', name: 'ui', fileName: 'index', - // Change this to the formats you want to support. - // Don't forget to update your package.json as well. formats: ['es' as const], }, rollupOptions: { - // External packages that should not be bundled into your library. external: ['react', 'react-dom', 'react/jsx-runtime'], }, }, diff --git a/plugins/nx.json b/plugins/nx.json index d464b579fd..9461a47017 100644 --- a/plugins/nx.json +++ b/plugins/nx.json @@ -156,6 +156,5 @@ } } }, - "useLegacyCache": false, - "nxCloudId": "69720151957fca05c743ec9a" + "useLegacyCache": false } diff --git a/plugins/package.json b/plugins/package.json index 08ea3214b4..82aa518b03 100644 --- a/plugins/package.json +++ b/plugins/package.json @@ -17,15 +17,18 @@ "start:plugin:table": "nx run table-plugin:init", "start:plugin:renamelayers": "nx run rename-layers-plugin:init", "start:plugin:colors-to-tokens": "nx run colors-to-tokens-plugin:init", + "start:ui": "nx run ui:start", "build": "nx build plugins-runtime --emptyOutDir=true", "build:plugins": "nx run-many -t build --parallel -p tag:type:plugin --exclude=poc-state-plugin", "build:styles-example": "nx run example-styles:build", + "build:ui": "nx build ui --emptyOutDir=true", "lint": "nx run-many --all --target=lint --parallel", "format": "nx format:write --libs-and-apps", "format:check": "nx format:check --libs-and-apps", "lint:affected": "nx affected --target=lint", "test": "nx run-many -t test --parallel -p plugins-runtime lorem-ipsum-plugin colors-to-tokens-plugin", "test:e2e": "nx test e2e", + "storybook:ui": "pnpm nx storybook ui", "registry": "nx local-registry", "build:doc": "typedoc --tsconfig libs/plugins-runtime/tsconfig.lib.json --customCss ./tools/typedoc.css --out dist/doc", "release": "tsx ./tools/scripts/publish.ts" @@ -41,8 +44,6 @@ "@angular/cli": "21.1.1", "@angular/compiler-cli": "21.1.1", "@angular/language-service": "21.1.1", - "@babel/core": "^7.14.5", - "@babel/preset-react": "^7.14.5", "@eslint/eslintrc": "^3.3.3", "@eslint/js": "9.39.2", "@nx/angular": "22.4.0", @@ -50,40 +51,30 @@ "@nx/esbuild": "22.4.0", "@nx/eslint": "22.4.0", "@nx/eslint-plugin": "22.4.0", - "@nx/js": "22.4.0", - "@nx/node": "22.4.0", "@nx/react": "22.4.0", "@nx/storybook": "22.4.0", + "@nx/js": "22.4.0", + "@nx/node": "22.4.0", "@nx/vite": "22.4.0", "@nx/vitest": "22.4.0", "@nx/web": "22.4.0", "@schematics/angular": "21.1.1", - "@storybook/react": "10.2.0", - "@storybook/react-vite": "10.2.0", "@swc-node/register": "1.11.1", "@swc/core": "1.15.10", "@swc/helpers": "0.5.18", - "@testing-library/dom": "10.4.0", - "@testing-library/react": "16.3.0", "@types/feather-icons": "^4.29.4", "@types/node": "25.0.10", - "@types/react": "^19.0.0", - "@types/react-dom": "^19.0.0", "@typescript-eslint/eslint-plugin": "8.53.1", "@typescript-eslint/parser": "8.53.1", "@typescript-eslint/utils": "^8.53.1", - "@vitejs/plugin-react": "^4.2.0", "@vitest/coverage-v8": "4.0.17", "@vitest/ui": "4.0.17", + "babel-plugin-react-compiler": "^1.0.0", "concurrently": "^9.2.1", "esbuild": "^0.27.2", "eslint": "9.39.2", "eslint-config-prettier": "10.1.8", "eslint-plugin-deprecation": "^3.0.0", - "eslint-plugin-import": "2.31.0", - "eslint-plugin-jsx-a11y": "6.10.1", - "eslint-plugin-react": "7.35.0", - "eslint-plugin-react-hooks": "7.0.1", "eslint-plugin-storybook": "^10.2.0", "eslint-plugin-unused-imports": "^4.3.0", "fs-extra": "^11.3.3", @@ -94,7 +85,6 @@ "jsonc-eslint-parser": "^2.4.2", "nx": "22.4.0", "prettier": "^3.8.1", - "storybook": "10.2.0", "swc-loader": "0.2.7", "ts-node": "10.9.1", "tsx": "^4.21.0", @@ -119,8 +109,6 @@ "axios": "^1.13.2", "feather-icons": "^4.29.2", "puppeteer": "^24.35.0", - "react": "^19.0.0", - "react-dom": "^19.0.0", "rxjs": "~7.8.2", "ses": "^1.14.0", "tslib": "^2.8.1", diff --git a/plugins/pnpm-lock.yaml b/plugins/pnpm-lock.yaml index a83f0f52f2..f79a967671 100644 --- a/plugins/pnpm-lock.yaml +++ b/plugins/pnpm-lock.yaml @@ -41,12 +41,6 @@ importers: puppeteer: specifier: ^24.35.0 version: 24.36.0(typescript@5.9.3) - react: - specifier: ^19.0.0 - version: 19.2.3 - react-dom: - specifier: ^19.0.0 - version: 19.2.3(react@19.2.3) rxjs: specifier: ~7.8.2 version: 7.8.2 @@ -93,12 +87,6 @@ importers: '@angular/language-service': specifier: 21.1.1 version: 21.1.1 - '@babel/core': - specifier: ^7.14.5 - version: 7.28.6 - '@babel/preset-react': - specifier: ^7.14.5 - version: 7.28.5(@babel/core@7.28.6) '@eslint/eslintrc': specifier: ^3.3.3 version: 3.3.3 @@ -144,12 +132,6 @@ importers: '@schematics/angular': specifier: 21.1.1 version: 21.1.1(chokidar@5.0.0) - '@storybook/react': - specifier: 10.2.0 - version: 10.2.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@10.2.0(@testing-library/dom@10.4.0)(prettier@3.8.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3) - '@storybook/react-vite': - specifier: 10.2.0 - version: 10.2.0(esbuild@0.27.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(rollup@4.56.0)(storybook@10.2.0(@testing-library/dom@10.4.0)(prettier@3.8.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.5.1)(sass-embedded@1.97.3)(sass@1.97.3)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.104.1(@swc/core@1.15.10(@swc/helpers@0.5.18))(esbuild@0.27.2)) '@swc-node/register': specifier: 1.11.1 version: 1.11.1(@swc/core@1.15.10(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3) @@ -159,24 +141,12 @@ importers: '@swc/helpers': specifier: 0.5.18 version: 0.5.18 - '@testing-library/dom': - specifier: 10.4.0 - version: 10.4.0 - '@testing-library/react': - specifier: 16.3.0 - version: 16.3.0(@testing-library/dom@10.4.0)(@types/react-dom@19.2.3(@types/react@19.2.9))(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) '@types/feather-icons': specifier: ^4.29.4 version: 4.29.4 '@types/node': specifier: 25.0.10 version: 25.0.10 - '@types/react': - specifier: ^19.0.0 - version: 19.2.9 - '@types/react-dom': - specifier: ^19.0.0 - version: 19.2.3(@types/react@19.2.9) '@typescript-eslint/eslint-plugin': specifier: 8.53.1 version: 8.53.1(@typescript-eslint/parser@8.53.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3) @@ -186,15 +156,15 @@ importers: '@typescript-eslint/utils': specifier: ^8.53.1 version: 8.53.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3) - '@vitejs/plugin-react': - specifier: ^4.2.0 - version: 4.7.0(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.5.1)(sass-embedded@1.97.3)(sass@1.97.3)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)) '@vitest/coverage-v8': specifier: 4.0.17 version: 4.0.17(vitest@4.0.17) '@vitest/ui': specifier: 4.0.17 version: 4.0.17(vitest@4.0.17) + babel-plugin-react-compiler: + specifier: ^1.0.0 + version: 1.0.0 concurrently: specifier: ^9.2.1 version: 9.2.1 @@ -210,18 +180,6 @@ importers: eslint-plugin-deprecation: specifier: ^3.0.0 version: 3.0.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3) - eslint-plugin-import: - specifier: 2.31.0 - version: 2.31.0(@typescript-eslint/parser@8.53.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)) - eslint-plugin-jsx-a11y: - specifier: 6.10.1 - version: 6.10.1(eslint@9.39.2(jiti@2.6.1)) - eslint-plugin-react: - specifier: 7.35.0 - version: 7.35.0(eslint@9.39.2(jiti@2.6.1)) - eslint-plugin-react-hooks: - specifier: 7.0.1 - version: 7.0.1(eslint@9.39.2(jiti@2.6.1)) eslint-plugin-storybook: specifier: ^10.2.0 version: 10.2.0(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.0(@testing-library/dom@10.4.0)(prettier@3.8.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3) @@ -252,9 +210,6 @@ importers: prettier: specifier: ^3.8.1 version: 3.8.1 - storybook: - specifier: 10.2.0 - version: 10.2.0(@testing-library/dom@10.4.0)(prettier@3.8.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) swc-loader: specifier: 0.2.7 version: 0.2.7(@swc/core@1.15.10(@swc/helpers@0.5.18))(webpack@5.104.1(@swc/core@1.15.10(@swc/helpers@0.5.18))(esbuild@0.27.2)) @@ -305,13 +260,69 @@ importers: libs/plugins-styles: {} - libs/ui: {} + libs/ui: + dependencies: + react: + specifier: '>=19.2' + version: 19.2.3 + react-dom: + specifier: '>=19.2' + version: 19.2.3(react@19.2.3) + devDependencies: + '@babel/core': + specifier: ^7.14.5 + version: 7.28.6 + '@babel/preset-react': + specifier: ^7.14.5 + version: 7.28.5(@babel/core@7.28.6) + '@storybook/react': + specifier: 10.2.0 + version: 10.2.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@10.2.0(@testing-library/dom@10.4.0)(prettier@3.8.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3) + '@storybook/react-vite': + specifier: 10.2.0 + version: 10.2.0(esbuild@0.27.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(rollup@4.56.0)(storybook@10.2.0(@testing-library/dom@10.4.0)(prettier@3.8.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.5.1)(sass-embedded@1.97.3)(sass@1.97.3)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.104.1(@swc/core@1.15.10(@swc/helpers@0.5.18))(esbuild@0.27.2)) + '@testing-library/dom': + specifier: 10.4.0 + version: 10.4.0 + '@testing-library/react': + specifier: 16.3.0 + version: 16.3.0(@testing-library/dom@10.4.0)(@types/react-dom@19.2.3(@types/react@19.2.9))(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) + '@types/react': + specifier: ^19.0.0 + version: 19.2.9 + '@types/react-dom': + specifier: ^19.0.0 + version: 19.2.3(@types/react@19.2.9) + '@vitejs/plugin-react': + specifier: ^4.2.0 + version: 4.7.0(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.5.1)(sass-embedded@1.97.3)(sass@1.97.3)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)) + eslint-plugin-import: + specifier: 2.31.0 + version: 2.31.0(@typescript-eslint/parser@8.53.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)) + eslint-plugin-jsx-a11y: + specifier: 6.10.1 + version: 6.10.1(eslint@9.39.2(jiti@2.6.1)) + eslint-plugin-react: + specifier: 7.35.0 + version: 7.35.0(eslint@9.39.2(jiti@2.6.1)) + eslint-plugin-react-hooks: + specifier: 7.0.1 + version: 7.0.1(eslint@9.39.2(jiti@2.6.1)) + react-compiler-runtime: + specifier: ^1.0.0 + version: 1.0.0(react@19.2.3) + storybook: + specifier: 10.2.0 + version: 10.2.0(@testing-library/dom@10.4.0)(prettier@3.8.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) libs/ui/dist: dependencies: react: specifier: ^19.2.0 version: 19.2.3 + react-compiler-runtime: + specifier: ^1.0.0 + version: 1.0.0(react@19.2.3) react-dom: specifier: ^19.2.0 version: 19.2.3(react@19.2.3) @@ -4500,6 +4511,9 @@ packages: peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 + babel-plugin-react-compiler@1.0.0: + resolution: {integrity: sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==} + babel-plugin-transform-typescript-metadata@0.3.2: resolution: {integrity: sha512-mWEvCQTgXQf48yDqgN7CH50waTyYBeP2Lpqx4nNWab9sxEpdXVeKgfj1qYI2/TgUPQtNFZ85i3PemRtnXVYYJg==} peerDependencies: @@ -7957,6 +7971,11 @@ packages: resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==} engines: {node: '>= 0.10'} + react-compiler-runtime@1.0.0: + resolution: {integrity: sha512-rRfjYv66HlG8896yPUDONgKzG5BxZD1nV9U6rkm+7VCuvQc903C4MjcoZR4zPw53IKSOX9wMQVpA1IAbRtzQ7w==} + peerDependencies: + react: ^17.0.0 || ^18.0.0 || ^19.0.0 || ^0.0.0-experimental + react-docgen-typescript@2.4.0: resolution: {integrity: sha512-ZtAp5XTO5HRzQctjPU0ybY0RRCQO19X/8fxn3w7y2VVTUbGHDKULPTL4ky3vB05euSgG5NpALhEhDPvQ56wvXg==} peerDependencies: @@ -15412,6 +15431,10 @@ snapshots: transitivePeerDependencies: - supports-color + babel-plugin-react-compiler@1.0.0: + dependencies: + '@babel/types': 7.28.6 + babel-plugin-transform-typescript-metadata@0.3.2(@babel/core@7.28.6)(@babel/traverse@7.28.6): dependencies: '@babel/core': 7.28.6 @@ -19496,6 +19519,10 @@ snapshots: iconv-lite: 0.7.2 unpipe: 1.0.0 + react-compiler-runtime@1.0.0(react@19.2.3): + dependencies: + react: 19.2.3 + react-docgen-typescript@2.4.0(typescript@5.9.3): dependencies: typescript: 5.9.3