Re-add UI from monorepo

.changeset/eighty-carrots-mate.md

@@ -0,0 +1,11 @@
+---
+'@elek-io/client': minor
+---
+
+Re-added GUI - instead of using the old UI repository where we created completely custom UI components with headlessui for accessibility, I've switched to shadcn (which uses Radix UI) base components with custom changes. Currently all components exist inside this repository. Once "finished" I'll extract them into the elek-io/ui component library to use them for the website and docs too.
+
+Also switched from electron-forge to electron-vite and use ESM wherever possible - which is everywhere except the preload.
+
+There is still some UI isses especially when creating a collection - where the dialog is closing whenever the user inputs something into the modal.
+This can also be seen when the clone Project dialog is used.
+Also buttons sometimes need two clicks to work.

.eslintrc.json

@@ -1,16 +1,9 @@
 {
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": true
-  },
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:import/recommended",
-    "plugin:import/electron",
-    "plugin:import/typescript"
-  ],
-  "parser": "@typescript-eslint/parser"
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "@electron-toolkit/eslint-config-ts/recommended",
+    "@electron-toolkit/eslint-config-prettier"
+  ]
 }

.github/workflows/cd.yml

@@ -8,14 +8,14 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
 jobs:
   release:
     name: Releasing on ${{ matrix.platform }} with Node.js ${{ matrix.node-version }}
-    timeout-minutes: 15
+    timeout-minutes: 20
     strategy:
       matrix:
         # @see https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners/about-github-hosted-runners#standard-github-hosted-runners-for-public-repositories
         # macos-12 = intel
         # macos-14 = M1 (arm)
         platform: [ubuntu-22.04, macos-12, macos-14, windows-2022]
-        node-version: [18]
+        node-version: [20]
     runs-on: ${{ matrix.platform }}
     steps:
       - name: Check out code
@@ -27,15 +27,17 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies
-        run: yarn install
-      - name: Run linter
-        run: yarn run lint
-      - name: Build and create pull request or publish to GitHub
+        run: npm install
+      # - name: Run linter
+      #   run: npm run lint
+      - name: Build
+        run: npm run build
+      - name: Create pull request or publish to GitHub
         uses: changesets/action@v1
         with:
           title: 'WIP: Release x.x.x'
           commit: Release new version
-          publish: yarn run release
+          publish: npm run release
         env:
           # See https://github.com/changesets/action/issues/147
           HOME: ${{ github.workspace }}

.github/workflows/ci.yml

@@ -6,14 +6,15 @@ on:
 jobs:
   test:
     name: Testing on ${{ matrix.platform }} with Node.js ${{ matrix.node-version }}
-    timeout-minutes: 15
+    timeout-minutes: 20
     strategy:
+      fail-fast: false
       matrix:
         # @see https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners/about-github-hosted-runners#standard-github-hosted-runners-for-public-repositories
         # macos-12 = intel
         # macos-14 = M1 (arm)
         platform: [ubuntu-22.04, macos-12, macos-14, windows-2022]
-        node-version: [18]
+        node-version: [20]
     runs-on: ${{ matrix.platform }}
     steps:
       - name: Check out code
@@ -25,22 +26,30 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies
-        run: yarn install
-      - name: Run linter
-        run: yarn run lint
-      - name: Identify misconfigurations and security anti-patterns
-        uses: doyensec/electronegativity-action@v2
-      - name: Upload report
-        uses: github/codeql-action/upload-sarif@v1
-        with:
-          sarif_file: ../electronegativity_results
+        run: npm install
+      # - name: Run linter
+      #   run: npm run lint
+      # - name: Run typecheck
+      #   run: npm run typecheck
+      # - name: Identify misconfigurations and security anti-patterns
+      #   uses: doyensec/electronegativity-action@v2
+      # - name: Upload report
+      #   uses: github/codeql-action/upload-sarif@v1
+      # with:
+      #   sarif_file: ../electronegativity_results
       - name: Build
-        run: yarn run build
+        run: npm run build
       # Uncomment if necessary
       # For example to inspect the build applications
       - name: Upload artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: artifact_${{ matrix.platform }}
-          path: out/make
+          path: |
+            dist/*.exe
+            dist/*.dmg
+            dist/*.zip
+            dist/*.AppImage
+            dist/*.snap
+            dist/*.deb
           if-no-files-found: error

.github/workflows/release.yml

@@ -0,0 +1,52 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - v*.*.*
+
+jobs:
+  release:
+    name: Releasing on ${{ matrix.platform }} with Node.js ${{ matrix.node-version }}
+    timeout-minutes: 20
+    strategy:
+      matrix:
+        # @see https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners/about-github-hosted-runners#standard-github-hosted-runners-for-public-repositories
+        # macos-12 = intel
+        # macos-14 = M1 (arm)
+        platform: [ubuntu-22.04, macos-12, macos-14, windows-2022]
+        node-version: [20]
+    runs-on: ${{ matrix.platform }}
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+      - name: Setup Node.js ${{ matrix.node-version }} environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies
+        run: npm install
+      # - name: Run linter
+      #   run: npm run lint
+      - name: Build
+        run: npm run build
+      - name: Release
+        uses: softprops/action-gh-release@v2
+        with:
+          draft: true
+          body_path: ${{ github.workspace }}/CHANGELOG.md
+          files: |
+            dist/*.exe
+            dist/*.zip
+            dist/*.dmg
+            dist/*.AppImage
+            dist/*.snap
+            dist/*.deb
+            dist/*.rpm
+            dist/*.tar.gz
+            dist/*.yml
+            dist/*.blockmap
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -90,6 +90,7 @@ typings/
 
 # Electron-Forge
 out/
+dist/
 
 # Sentry Config File
 .env.sentry-build-plugin

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint"]
+}

.vscode/launch.json

@@ -1,25 +1,39 @@
 {
+  "version": "0.2.0",
   "configurations": [
     {
-      "name": "Dev (Electron Main)",
+      "name": "Debug Main Process",
       "type": "node",
       "request": "launch",
-      "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.sh",
+      "cwd": "${workspaceRoot}",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite",
       "windows": {
-        "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.cmd"
+        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd"
       },
-      // runtimeArgs will be passed directly to your Electron application
-      "runtimeArgs": [],
-      "cwd": "${workspaceFolder}",
-      "console": "integratedTerminal"
+      "runtimeArgs": ["--sourcemap"],
+      "env": {
+        "REMOTE_DEBUGGING_PORT": "9222"
+      }
     },
     {
-      "name": "Build process",
-      "request": "launch",
-      "runtimeExecutable": "yarn",
-      "runtimeArgs": ["run", "build"],
-      "skipFiles": ["<node_internals>/**"],
-      "type": "node"
+      "name": "Debug Renderer Process",
+      "port": 9222,
+      "request": "attach",
+      "type": "chrome",
+      "webRoot": "${workspaceFolder}/src/renderer",
+      "timeout": 60000,
+      "presentation": {
+        "hidden": true
+      }
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Debug All",
+      "configurations": ["Debug Main Process", "Debug Renderer Process"],
+      "presentation": {
+        "order": 1
+      }
     }
   ]
 }

build/entitlements.mac.plist

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+    <key>com.apple.security.cs.allow-dyld-environment-variables</key>
+    <true/>
+  </dict>
+</plist>

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/renderer/src/index.css",
+    "baseColor": "zinc",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@renderer/components",
+    "utils": "@renderer/util"
+  }
+}

dev-app-update.yml

@@ -0,0 +1,3 @@
+provider: generic
+url: https://example.com/auto-updates
+updaterCacheDirName: electron-vite-updater

electron-builder.yml

@@ -0,0 +1,43 @@
+appId: io.elek.client
+productName: 'elek.io Client'
+directories:
+  buildResources: build
+files:
+  - '!**/.vscode/*'
+  - '!src/*'
+  - '!electron.vite.config.{js,ts,mjs,cjs}'
+  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
+  - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
+  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
+extraMetadata:
+  name: 'elek-io-client' # Overwrites package.json name, since it cannot handle special characters
+asarUnpack:
+  - resources/**
+win:
+  executableName: 'elek.io Client'
+nsis:
+  artifactName: elek-io-client-${version}-setup.${ext}
+  shortcutName: ${productName}
+  uninstallDisplayName: ${productName}
+  createDesktopShortcut: always
+mac:
+  entitlementsInherit: build/entitlements.mac.plist
+  extendInfo:
+    - NSCameraUsageDescription: Application requests access to the device's camera.
+    - NSMicrophoneUsageDescription: Application requests access to the device's microphone.
+    - NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.
+    - NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.
+  notarize: false
+dmg:
+  artifactName: elek-io-client-${version}.${ext}
+linux:
+  target:
+    - AppImage
+    - snap
+    - deb
+  category: Office
+appImage:
+  artifactName: elek-io-client-${version}.${ext}
+npmRebuild: false
+publish:
+  provider: github

electron.vite.config.ts

@@ -0,0 +1,46 @@
+import { sentryVitePlugin } from '@sentry/vite-plugin';
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
+import viteReact from '@vitejs/plugin-react';
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+  main: {
+    build: { sourcemap: true },
+    plugins: [
+      externalizeDepsPlugin(),
+      sentryVitePlugin({
+        org: 'elek-io',
+        project: 'client',
+      }),
+    ],
+  },
+  preload: {
+    build: {
+      rollupOptions: {
+        output: {
+          // With a sandboxed renderer and preload process the preload cannot use ESM
+          // This is a current (v31.2) limitation of using ESM in Electron
+          // @see https://www.electronjs.org/docs/latest/tutorial/esm#summary-esm-support-matrix
+          // @see https://github.com/alex8088/electron-vite/discussions/423#discussioncomment-8922407
+          format: 'cjs',
+        },
+      },
+    },
+    // plugins: [externalizeDepsPlugin()], @see above
+  },
+  renderer: {
+    resolve: {
+      alias: {
+        '@renderer': resolve('src/renderer/src'),
+      },
+    },
+    plugins: [
+      TanStackRouterVite({
+        routesDirectory: './src/renderer/src/routes',
+        generatedRouteTree: './src/renderer/src/routeTree.gen.ts',
+      }),
+      viteReact(),
+    ],
+  },
+});