package.nix: updated to build Invoice Ninja with React frontend

package.json

@@ -0,0 +1,194 @@
+{
+  "name": "@invoiceninja/ui",
+  "version": "03.05.2026.1",
+  "private": true,
+  "dependencies": {
+    "@azure/msal-browser": "^3.28.1",
+    "@docuninja/builder2.0": "^0.0.90",
+    "@emotion/styled": "^11.14.0",
+    "@excalidraw/excalidraw": "^0.18.0",
+    "@fontsource/alex-brush": "^5.2.6",
+    "@fontsource/dancing-script": "^5.2.6",
+    "@fontsource/great-vibes": "^5.2.6",
+    "@fontsource/pacifico": "^5.2.6",
+    "@fontsource/satisfy": "^5.2.6",
+    "@fortawesome/fontawesome-free": "^7.0.1",
+    "@headlessui/react": "^1.7.19",
+    "@headlessui/tailwindcss": "^0.2.2",
+    "@hello-pangea/dnd": "^16.6.0",
+    "@monaco-editor/react": "^4.7.0",
+    "@react-oauth/google": "^0.12.1",
+    "@reduxjs/toolkit": "^1.9.7",
+    "@sentry/react": "^7.120.3",
+    "@sentry/tracing": "^7.120.3",
+    "@stripe/stripe-js": "^4.10.0",
+    "@tinymce/tinymce-react": "^5.1.1",
+    "@tippyjs/react": "^4.2.6",
+    "@tiptap/extension-color": "^3.11.1",
+    "@tiptap/extension-font-family": "^3.11.1",
+    "@tiptap/extension-highlight": "^3.11.1",
+    "@tiptap/extension-image": "^3.12.1",
+    "@tiptap/extension-link": "^3.11.1",
+    "@tiptap/extension-placeholder": "^3.11.1",
+    "@tiptap/extension-strike": "^3.11.1",
+    "@tiptap/extension-subscript": "^3.11.1",
+    "@tiptap/extension-superscript": "^3.11.1",
+    "@tiptap/extension-table": "^3.11.1",
+    "@tiptap/extension-table-cell": "^3.11.1",
+    "@tiptap/extension-table-header": "^3.11.1",
+    "@tiptap/extension-table-row": "^3.11.1",
+    "@tiptap/extension-task-item": "^3.11.1",
+    "@tiptap/extension-task-list": "^3.11.1",
+    "@tiptap/extension-text-align": "^3.11.1",
+    "@tiptap/extension-underline": "^3.11.1",
+    "@tiptap/react": "^3.11.1",
+    "@tiptap/starter-kit": "^3.11.1",
+    "@types/js-beautify": "^1.14.3",
+    "antd": "^5.24.3",
+    "array-move": "^4.0.0",
+    "axios": "^1.8.3",
+    "classnames": "^2.5.1",
+    "collect.js": "^4.36.1",
+    "currency.js": "^2.0.4",
+    "dayjs": "^1.11.13",
+    "deep-object-diff": "^1.1.9",
+    "dompurify": "^3.2.4",
+    "dotenv": "^16.4.7",
+    "driver.js": "^1.4.0",
+    "font-awesome": "^4.7.0",
+    "formik": "^2.4.6",
+    "grapesjs": "^0.22.13",
+    "grapesjs-blocks-basic": "^1.0.2",
+    "grapesjs-parser-postcss": "^1.0.3",
+    "grapesjs-plugin-export": "^1.0.12",
+    "grapesjs-preset-webpage": "^1.0.3",
+    "grapesjs-style-bg": "^2.0.2",
+    "grapesjs-tui-image-editor": "^1.0.2",
+    "hex-color-regex": "^1.1.0",
+    "history": "^5.3.0",
+    "i18next": "^22.5.1",
+    "jotai": "^2.12.2",
+    "js-beautify": "^1.15.4",
+    "js-sha256": "^0.11.0",
+    "katex": "^0.16.22",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "mitt": "^3.0.1",
+    "monaco-editor": "^0.53.0",
+    "papaparse": "^5.5.2",
+    "playwright": "^1.59.0",
+    "pretty-bytes": "^6.1.1",
+    "pusher-js": "^8.4.0",
+    "randexp": "^0.5.3",
+    "react": "^18.3.1",
+    "react-apple-signin-auth": "^1.1.0",
+    "react-colorful": "^5.6.1",
+    "react-date-range": "^1.4.0",
+    "react-datepicker": "^4.25.0",
+    "react-day-picker": "^9.10.0",
+    "react-debounce-input": "^3.3.0",
+    "react-dom": "^18.3.1",
+    "react-dropzone": "^14.3.8",
+    "react-feather": "^2.0.10",
+    "react-hot-toast": "^2.5.2",
+    "react-i18next": "^12.3.1",
+    "react-icons": "^4.12.0",
+    "react-image-crop": "^11.0.10",
+    "react-json-tree": "^0.20.0",
+    "react-markdown": "^10.1.0",
+    "react-number-format": "^5.4.3",
+    "react-phone-number-input": "^3.4.12",
+    "react-qr-code": "^2.0.15",
+    "react-query": "^3.39.3",
+    "react-redux": "^8.1.3",
+    "react-resizable-panels": "^2.1.7",
+    "react-responsive": "^9.0.2",
+    "react-router-dom": "^6.30.0",
+    "react-select": "^5.10.1",
+    "react-string-replace": "^1.1.1",
+    "react-turnstile": "^1.1.4",
+    "react-use": "^17.6.0",
+    "react-verification-input": "^3.3.1",
+    "recharts": "^2.15.1",
+    "rehype-raw": "^7.0.0",
+    "remove": "^0.1.5",
+    "sha256": "^0.2.0",
+    "signature_pad": "^5.0.10",
+    "socket.io-client": "^4.8.3",
+    "styled-components": "^6.1.15",
+    "tailwind-scrollbar": "^3.1.0",
+    "tiptap-extension-font-size": "^1.2.0",
+    "uuid": "^11.1.0",
+    "v": "^0.3.0",
+    "y-websocket": "^3.0.0",
+    "zustand": "^5.0.8"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "format": "prettier --write src/",
+    "lint": "eslint src --max-warnings=0",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepare": "husky install",
+    "preview": "vite build && vite preview"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.22.0",
+    "@faker-js/faker": "^9.0.0",
+    "@playwright/test": "^1.58.2",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/dompurify": "^3.2.0",
+    "@types/hex-color-regex": "^1.1.3",
+    "@types/lodash": "^4.17.16",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.19.11",
+    "@types/papaparse": "^5.3.15",
+    "@types/prettier": "^2.7.3",
+    "@types/react": "^18.3.18",
+    "@types/react-date-range": "^1.4.10",
+    "@types/react-datepicker": "^4.19.6",
+    "@types/react-dom": "^18.3.5",
+    "@types/uuid": "^9.0.8",
+    "@vitejs/plugin-react": "^5.1.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.22.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "globals": "^16.0.0",
+    "husky": "^8.0.3",
+    "postcss": "^8.5.3",
+    "prettier": "^2.8.8",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.26.1",
+    "vite": "^7.3.1",
+    "vite-tsconfig-paths": "^6.1.0",
+    "vitest": "^4.0.18"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "engineStrict": true,
+  "type": "module",
+  "overrides": {
+    "@docuninja/builder2.0": {
+      "react": "$react",
+      "react-dom": "$react-dom"
+    },
+    "socket.io-parser": "^4.2.6"
+  }
+}

package.nix

@@ -1,59 +1,84 @@
-{ lib
+{ buildNpmPackage
-, php
-, openssl
-, writers
 , fetchFromGitHub
+, importNpmLock
+, lib
+, openssl
+, php82
+, nodejs_22
+, symlinkJoin
+, writers
 , dataDir ? "/var/lib/invoiceninja"
 , runtimeDir ? "/run/invoiceninja"
 }:
 
-php.buildComposerProject (finalAttrs: {
+let
   pname = "invoiceninja";
-  version = "5.12.13";
+  version = "5.13.19";
-
+  uiVersion = "03.05.2026.1";
   src = fetchFromGitHub {
-    owner = "invoiceninja";
+    owner = pname;
-    repo = "invoiceninja";
+    repo = pname;
-    rev = "v${finalAttrs.version}";
+    rev = "v${version}";
-    hash = "sha256-/+dmZUxDeC33bBuM2oZwU9wOVtJY0X5/dkhlpbfLkYg=";
+    hash = "sha256-PlFu9MQ4nZ2oHgSwOLffqERpZPIWkpgZ/qTqru63a9Y=";
+  };
+  uiSrc = fetchFromGitHub {
+    owner = pname;
+    repo = "ui";
+    tag = uiVersion;
+    hash = "sha256-aEqYX/YNUV5UR631X4zQyqoXSSuUqvILplV8Mm557Bc=";
   };
 
-  vendorHash = "sha256-NzFOh3XpKC3Ia1Ns9I6xN9N6y1F5dFSEk7bxq/eKZIc=";
+  # PHP composer
+  composer = php82.buildComposerProject (finalAttrs: {
+    inherit src version;
+    pname = "${pname}-composer";
 
-  patches = [
+    vendorHash = "sha256-2CyWKlyCyoCt/WdY7Ta0oEXW2KIkGwhilHtzpBJ5Wnk=";
-    ./disable-react-for-admin.patch
-  ];
 
-  # Upstream composer.json has invalid license, webpatser/laravel-countries package is pointing
+    # Upstream composer.json has invalid license, webpatser/laravel-countries package is pointing
-  # to commit-ref, and php required in require and require-dev
+    # to commit-ref, and php required in require and require-dev
-  composerStrictValidation = false;
+    composerStrictValidation = false;
 
-  postInstall = ''
+    postInstall = ''mv "$out/share/php/${finalAttrs.pname}"/* $out'';
-    mv "$out/share/php/${finalAttrs.pname}"/* $out
+  });
-    rm -R $out/bootstrap/cache
   
-    rm -rf $out/public/storage
+  # React frontend
+  ui = buildNpmPackage {
+    pname = "${pname}-ui";
+    version = uiVersion;
+    src = uiSrc;
 
-    # Move static contents for the NixOS module to pick it up, if needed.
+    nodejs = nodejs_22;
-    mv $out/bootstrap $out/bootstrap-static
-    mv $out/storage $out/storage-static
   
-    # Link NixOS module files to derivation output
+    #npmDepsHash = "sha256-T2/0POKcr4x98cy3rfeNyTIBZrHuLfqpC1J6nymGcys=";
-    ln -s ${dataDir}/.env $out/.env
-    ln -s ${dataDir}/storage $out/
-    ln -s ${dataDir}/storage/app/public $out/public/storage
-    ln -s ${runtimeDir} $out/bootstrap
-  '';
 
-  meta = {
+    #npmPackFlags = [ "--ignore-scripts" ];
-    description = "Open-source, self-hosted invoicing application";
+    #npmInstallFlags = [ "--omit=dev" ];
-    homepage = "https://www.invoiceninja.com/";
+
-    license = with lib.licenses; {
+    npmConfigHook = importNpmLock.npmConfigHook;
-      fullName = "Elastic License 2.0";
+    #npmDeps = importNpmLock {
-      shortName = "Elastic-2.0";
+    #  package = builtins.readFile ./. + "/package.json";
-      free = false;
+    #  packageLock = builtins.readFile ./. + "/package-lock.json";
-    };
+    #};
-    platforms = lib.platforms.all;
+    npmDeps = importNpmLock { npmRoot = ./.; };
+
+    prePatch = ''
+      sed -i 's/VITE_IS_TEST=true/VITE_IS_TEST=false/' .env.example
+      cp .env.example .env
+
+      # This will make the build output a single bundle file (bundle.[hash].js)
+      cp ${composer}/vite.config.ts.react ./vite.config.js
+
+      #${npm-lockfile-fix}/bin/npm-lockfile-fix ./package-lock.json
+    '';
   };
-})
+
+  invoiceNinja = symlinkJoin {
+    name = "invoiceninja";
+    paths = [
+      composer
+      ui
+    ];
+  };
+in ui