🎉 Add ts ui storybook

plugins/.gitignore

@@ -53,4 +53,6 @@ apps/e2e/screenshots/*.png
 
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
-.pnpm-store
+.pnpm-store
+
+storybook-static

plugins/libs/ui/.babelrc

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

plugins/libs/ui/.storybook/main.ts

@@ -0,0 +1,27 @@
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/lib/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+  addons: [],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {
+      builder: {
+        viteConfigPath: 'vite.config.mts',
+      },
+    },
+  },
+};
+
+function getAbsolutePath(value: string): any {
+  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}
+
+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

plugins/libs/ui/README.md

@@ -0,0 +1,10 @@
+# ui
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ui` to execute the unit tests via [Vitest](https://vitest.dev/).
+
+- pnpm nx test ui
+- pnpm nx storybook ui

plugins/libs/ui/eslint.config.mjs

@@ -0,0 +1,12 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.base.config.js';
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

plugins/libs/ui/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "ui",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}

plugins/libs/ui/project.json

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

plugins/libs/ui/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/example/Example';

plugins/libs/ui/src/lib/example/Example.module.css

@@ -0,0 +1,4 @@
+.container {
+  padding: 16px;
+  border: 2px solid #000;
+}

plugins/libs/ui/src/lib/example/Example.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Example from './Example';
+
+describe('Example', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Example />);
+    expect(baseElement).toBeTruthy();
+  });
+});

plugins/libs/ui/src/lib/example/Example.stories.ts

@@ -0,0 +1,12 @@
+import { Example } from './Example';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+  title: 'UI/Example',
+  component: Example,
+} satisfies Meta<typeof Example>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};

plugins/libs/ui/src/lib/example/Example.tsx

@@ -0,0 +1,11 @@
+import styles from './Example.module.css';
+
+export function Example() {
+  return (
+    <div className={styles.container}>
+      <h1>Welcome to Example!</h1>
+    </div>
+  );
+}
+
+export default Example;

plugins/libs/ui/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client", "vitest"],
+    "baseUrl": "."
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
+    }
+  ]
+}

plugins/libs/ui/tsconfig.lib.json

@@ -0,0 +1,39 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

plugins/libs/ui/tsconfig.spec.json

@@ -0,0 +1,28 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

plugins/libs/ui/tsconfig.storybook.json

@@ -0,0 +1,33 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "outDir": "",
+    "module": "esnext",
+    "moduleResolution": "bundler"
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.js"
+  ],
+  "include": [
+    "src/**/*.stories.ts",
+    "src/**/*.stories.js",
+    "src/**/*.stories.jsx",
+    "src/**/*.stories.tsx",
+    "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"
+  ]
+}

plugins/libs/ui/vite.config.mts

@@ -0,0 +1,61 @@
+/// <reference types='vitest' />
+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';
+
+export default defineConfig(() => ({
+  root: import.meta.dirname,
+  cacheDir: '../../node_modules/.vite/libs/ui',
+  plugins: [
+    react(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(import.meta.dirname, 'tsconfig.lib.json'),
+      pathsToAliases: false,
+    }),
+  ],
+  // 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',
+    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'],
+    },
+  },
+  test: {
+    name: 'ui',
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/libs/ui',
+      provider: 'v8' as const,
+    },
+  },
+}));

plugins/nx.json

@@ -67,6 +67,17 @@
       "options": {
         "testTargetName": "test"
       }
+    },
+    {
+      "plugin": "@nx/storybook/plugin",
+      "options": {
+        "serveStorybookTargetName": "storybook",
+        "buildStorybookTargetName": "build-storybook",
+        "testStorybookTargetName": "test-storybook",
+        "staticStorybookTargetName": "static-storybook",
+        "buildDepsTargetName": "build-deps",
+        "watchDepsTargetName": "watch-deps"
+      }
     }
   ],
   "generators": {
@@ -138,6 +149,11 @@
     },
     "@schematics/angular:resolver": {
       "typeSeparator": "."
+    },
+    "@nx/react": {
+      "library": {
+        "unitTestRunner": "vitest"
+      }
     }
   },
   "useLegacyCache": false,

plugins/package.json

@@ -41,6 +41,8 @@
     "@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",
@@ -49,19 +51,27 @@
     "@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/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/uuid": "^11.0.0",
+    "@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",
     "concurrently": "^9.2.1",
@@ -69,6 +79,10 @@
     "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": "5.0.0",
     "fs-extra": "^11.3.3",
     "globals": "^17.0.0",
     "happy-dom": "^20.3.4",
@@ -77,7 +91,9 @@
     "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",
     "typedoc": "^0.28.16",
     "typescript": "5.9.3",
@@ -99,6 +115,8 @@
     "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",

plugins/tsconfig.base.json

@@ -17,7 +17,8 @@
     "paths": {
       "@penpot/plugin-types": ["libs/plugin-types/index.d.ts"],
       "plugins-runtime": ["libs/plugins-runtime/src/index.ts"],
-      "plugins-styles/*": ["libs/plugins-styles/src/*"]
+      "plugins-styles/*": ["libs/plugins-styles/src/*"],
+      "ui": ["libs/ui/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]