✨ Move ui to frontend/packages/ui

frontend/package.json

@@ -51,7 +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",
+    "@penpot/ui": "workspace:./packages/ui",
     "@storybook/addon-docs": "10.1.11",
     "@storybook/addon-themes": "10.1.11",
     "@storybook/addon-vitest": "10.1.11",

frontend/packages/ui/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": [],
+  "plugins": []
+}

frontend/packages/ui/.gitignore

@@ -0,0 +1 @@
+dist/

frontend/packages/ui/.storybook/main.ts

@@ -21,7 +21,3 @@ function getAbsolutePath(value: string): any {
 }
 
 export default config;
-
-// To customize your Vite configuration you can use the viteFinal field.
-// Check https://storybook.js.org/docs/react/builders/vite#configuration
-// and https://nx.dev/recipes/storybook/custom-builder-configs

frontend/packages/ui/package.json

@@ -10,7 +10,8 @@
     "./style.css": "./dist/style.css"
   },
   "scripts": {
-    "start": "vite build --watch"
+    "watch": "vite build --watch",
+    "build": "vite build"
   },
   "devDependencies": {
     "@babel/core": "^7.14.5",
@@ -22,12 +23,14 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.2.0",
+    "babel-plugin-react-compiler": "^1.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",
     "react-compiler-runtime": "^1.0.0",
-    "storybook": "10.2.0"
+    "storybook": "10.2.0",
+    "vite-plugin-dts": "^4.5.4"
   },
   "peerDependencies": {
     "react": ">=19.2",

frontend/packages/ui/src/lib/example/Example.tsx

@@ -14,7 +14,8 @@ export function Example() {
         <button onClick={() => setCount(0)}>Reset</button>
       </div>
     </div>
+
   );
 }
 
-export default Example;
+export default Example;

frontend/packages/ui/tsconfig.lib.json

@@ -4,8 +4,6 @@
     "outDir": "../../dist/out-tsc",
     "types": [
       "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts",
       "vite/client"
     ]
   },

frontend/packages/ui/tsconfig.storybook.json

@@ -24,10 +24,5 @@
     "src/**/*.stories.mdx",
     ".storybook/*.js",
     ".storybook/*.ts"
-  ],
-  "files": [
-    "../../node_modules/@nx/react/typings/styled-jsx.d.ts",
-    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nx/react/typings/image.d.ts"
   ]
 }

frontend/packages/ui/vite.config.mts

@@ -3,8 +3,6 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 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 = () => ({
@@ -13,7 +11,7 @@ const copyCssPlugin = () => ({
     try {
       copyFileSync(
         'dist/index.css',
-        '../../../frontend/resources/public/css/ui.css',
+        '../../resources/public/css/ui.css',
       );
     } catch (e) {
       console.log('Error copying css file', e);
@@ -23,15 +21,12 @@ const copyCssPlugin = () => ({
 
 export default defineConfig(() => ({
   root: import.meta.dirname,
-  cacheDir: '../../node_modules/.vite/libs/ui',
   plugins: [
     react({
       babel: {
         plugins: ['babel-plugin-react-compiler'],
       },
     }),
-    nxViteTsPaths(),
-    nxCopyAssetsPlugin(['*.md']),
     dts({
       entryRoot: 'src',
       tsconfigPath: path.join(import.meta.dirname, 'tsconfig.lib.json'),

frontend/pnpm-workspace.yaml

@@ -7,3 +7,4 @@ packages:
   - "packages/draft-js"
   - "packages/mousetrap"
   - "text-editor"
+  - "packages/ui"

frontend/scripts/build-libs.js

@@ -1,6 +1,20 @@
 import * as esbuild from "esbuild";
 import { readFile } from "node:fs/promises";
 
+/**
+ * esbuild plugin to watch a directory recursively
+ */
+const watchExtraDirPlugin = {
+  name: 'watch-extra-dir',
+  setup(build) {
+    build.onLoad({ filter: /target\/index.js/, namespace: 'file' }, async (args) => {
+      return {
+        watchDirs: ["packages/ui/dist"],
+      };
+    });
+  }
+};
+
 const filter =
   /react-virtualized[/\\]dist[/\\]es[/\\]WindowScroller[/\\]utils[/\\]onScroll\.js$/;
 
@@ -36,7 +50,7 @@ const config = {
     js: '"use strict";\nvar global = globalThis;',
   },
   outfile: "resources/public/js/libs.js",
-  plugins: [fixReactVirtualized, rebuildNotify],
+  plugins: [fixReactVirtualized, rebuildNotify, watchExtraDirPlugin],
 };
 
 async function watch() {

frontend/src/app/main/ui/dashboard.cljs

@@ -7,7 +7,6 @@
 (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]
@@ -313,9 +312,6 @@
      ;; 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

plugins/libs/ui/.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    [
-      "@nx/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
-  "plugins": []
-}

plugins/libs/ui/eslint.config.mjs

@@ -1,39 +0,0 @@
-// @ts-check
-import baseConfig, { compat } from '../../eslint.base.config.js';
-import storybook from 'eslint-plugin-storybook';
-import unusedImports from 'eslint-plugin-unused-imports';
-import reactHooks from 'eslint-plugin-react-hooks';
-
-export default [
-  ...baseConfig,
-  reactHooks.configs.flat.recommended,
-  ...storybook.configs['flat/recommended'],
-  ...compat.config({ extends: ['plugin:@nx/react-typescript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.ts', '**/*.tsx'],
-  })),
-  {
-    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
-    ignores: ['**/.storybook/**'],
-  },
-  {
-    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
-    plugins: {
-      'unused-imports': unusedImports,
-    },
-    rules: {
-      '@typescript-eslint/no-unused-vars': 'off',
-      'unused-imports/no-unused-imports': 'error',
-      'unused-imports/no-unused-vars': [
-        'warn',
-        {
-          vars: 'all',
-          varsIgnorePattern: '^_',
-          args: 'after-used',
-          argsIgnorePattern: '^_',
-        },
-      ],
-    },
-  },
-];
-

plugins/libs/ui/project.json

@@ -1,8 +0,0 @@
-{
-  "name": "ui",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "libs/ui/src",
-  "projectType": "library",
-  "tags": [],
-  "targets": {}
-}

plugins/pnpm-lock.yaml

@@ -315,61 +315,6 @@ importers:
         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)
-    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))
-      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)
-
 packages:
 
   '@acemir/cssom@0.9.31':