🎉 Add UI Typescript example component

2026-04-25 19:28:12 +00:00 · 2026-01-23 09:39:44 +01:00 · 2026-01-23 09:39:44 +01:00 · 269aaf245f
commit 269aaf245f
parent 047e341223
12 changed files with 216 additions and 95 deletions
--- 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",
--- 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

--- a/frontend/resources/templates/index.mustache
+++ b/frontend/resources/templates/index.mustache
@ -18,6 +18,7 @@
    <meta name="twitter:creator" content="@penpotapp">
    <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
    <link id="theme" href="css/main.css?version={{& version_tag}}" rel="stylesheet" type="text/css" />
+     <link href="css/ui.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
    {{#isDebug}}
    <link href="css/debug.css?version={{& version_tag}}" rel="stylesheet" type="text/css" />
    {{/isDebug}}
--- 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
--- 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
--- 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"
  }
 }
--- 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;
 }
--- 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 (
    <div className={styles.container}>
-      <h1>Welcome to Example!</h1>
+      <h1>Example!</h1>
+      <div>
+        <h2>Counter: {count}</h2>
+        <button onClick={() => setCount(count + 1)}>Increment</button>
+        <button onClick={() => setCount(count - 1)}>Decrement</button>
+        <button onClick={() => setCount(0)}>Reset</button>
+      </div>
    </div>
  );
 }

-export default Example;
+export default Example;
--- 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'],
    },
  },
--- a/plugins/nx.json
+++ b/plugins/nx.json
@ -156,6 +156,5 @@
      }
    }
  },
-  "useLegacyCache": false,
-  "nxCloudId": "69720151957fca05c743ec9a"
+  "useLegacyCache": false
 }
--- 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",
--- 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