insforge 0.3.1

package/frontend/src/rdg.css

@@ -0,0 +1,194 @@
+/* React Data Grid Styles */
+@import 'react-data-grid/lib/styles.css';
+
+@layer base {
+  :root {
+    --rdg-border-color: #f3f4f6;
+    --rdg-background-color: #f9fafb;
+    --rdg-row-hover-color: #f5f5f5;
+    --rdg-background-color-edit: #ffffff;
+    --rdg-header-row-background-color: #f9fafb;
+    --rdg-outline-color: #262626;
+  }
+
+  .rdg-dark {
+    --rdg-border-color: #404040;
+    --rdg-background-color: #262626;
+    --rdg-row-hover-color: #171717;
+    --rdg-background-color-edit: #262626;
+    --rdg-header-row-background-color: #171717;
+    --rdg-outline-color: #ffffff;
+  }
+}
+
+.rdg-cell {
+  border-right: 1px solid var(--rdg-border-color);
+  padding: 0 14px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--rdg-border-color);
+}
+
+/* Special styling for select column */
+.rdg-cell[data-column-key='rdg-select-column'],
+.rdg-cell[data-colindex='0'] {
+  padding: 0;
+  width: 45px !important;
+  min-width: 45px !important;
+  max-width: 45px !important;
+  justify-content: center;
+}
+
+.rdg-header-row .rdg-cell[data-column-key='rdg-select-column'],
+.rdg-header-row .rdg-cell[data-colindex='0'] {
+  padding: 0;
+  width: 45px !important;
+  min-width: 45px !important;
+  max-width: 45px !important;
+  justify-content: center;
+}
+
+.rdg-row:hover,
+.rdg-row[aria-selected='true'],
+.rdg-row[aria-selected='true']:hover,
+.rdg-header-row .rdg-cell:hover {
+  background-color: var(--rdg-row-hover-color);
+}
+
+/* Remove cell focus outline and use custom styling */
+.rdg-cell[aria-selected='true'] {
+  outline: 2px solid var(--rdg-outline-color);
+}
+
+/* Disable selection styling for disabled cells in link modal */
+.rdg-cell.link-modal-disabled-cell[aria-selected='true'] {
+  outline: none !important;
+}
+
+/* Editor cell styling */
+.rdg-cell.rdg-cell-editing {
+  background-color: var(--rdg-background-color-edit);
+}
+
+/* Custom scrollbar for react-data-grid */
+.rdg-viewport::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.rdg-viewport::-webkit-scrollbar-track {
+  background: #f1f5f9;
+}
+
+.rdg-viewport::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+.rdg-viewport::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* Ensure proper column sizing */
+.rdg-header-row .rdg-cell,
+.rdg-row .rdg-cell {
+  min-width: 0;
+}
+
+/* Remove default sorting icon styling and use custom */
+.rdg-sort-arrow {
+  display: none;
+}
+
+/* Sortable header styling */
+.sortable-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 50px;
+}
+
+.sort-indicators {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-left: 8px;
+  flex-shrink: 0;
+}
+
+/* Sortable column header styling */
+.rdg-header-row .rdg-cell[aria-sort] {
+  cursor: pointer;
+}
+
+/* Monospace font for IDs */
+.font-mono {
+  font-family: 'Ubuntu Mono', 'Consolas', 'Monaco', monospace;
+}
+
+/* Removed duplicate forced scrollbar */
+
+/* Ensure dropdown menu doesn't cause layout shift */
+[data-radix-popper-content-wrapper] {
+  position: fixed !important;
+}
+
+/* React Data Grid Header Styling */
+.rdg-header-row .rdg-cell {
+  border-bottom: 1px solid var(--rdg-border-color);
+  background-color: var(--rdg-header-row-background-color) !important;
+  font-weight: 500;
+  color: var(--rdg-text-color);
+}
+
+.rdg-header-row .rdg-cell:hover {
+  background-color: var(--rdg-row-hover-color);
+}
+
+/* Hide default react-data-grid sort arrows */
+.rdg-header-row .rdg-cell .rdg-sort-arrow {
+  display: none !important;
+}
+
+.rdg-header-row .rdg-cell[aria-sort='ascending']::after,
+.rdg-header-row .rdg-cell[aria-sort='descending']::after {
+  display: none !important;
+}
+
+/* Hide any default sorting indicators */
+.rdg-header-row .rdg-cell::after {
+  display: none !important;
+}
+
+/* Custom header renderer styling */
+.rdg-header-row .rdg-cell .sortable-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  padding: 0 8px;
+}
+
+.rdg-header-row .rdg-cell .sort-indicators {
+  display: flex;
+  flex-direction: column;
+  margin-left: 4px;
+}
+
+.rdg-header-row .rdg-cell .sort-indicators svg {
+  transition: color 0.2s ease;
+}
+/* Custom scrollbar for data grid */
+.rdg .rdg-viewport-dragging .rdg-row {
+  pointer-events: none;
+}
+
+/* Selection column specific styling */
+.rdg .rdg-cell[data-column-key='select-row'] {
+  width: 45px !important;
+  min-width: 45px !important;
+  max-width: 45px !important;
+  justify-content: center;
+}

package/frontend/src/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_DEBUG_MODE?: string;
+  readonly VITE_API_BASE_URL?: string;
+  // add more env variables as needed
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/frontend/tailwind.config.js

@@ -0,0 +1,97 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ['class'],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  prefix: '',
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        border: 'rgb(var(--border))',
+        input: 'rgb(var(--input))',
+        ring: 'rgb(var(--ring))',
+        background: 'rgb(var(--background))',
+        foreground: 'rgb(var(--foreground))',
+        primary: {
+          DEFAULT: 'rgb(var(--primary))',
+          foreground: 'rgb(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'rgb(var(--secondary))',
+          foreground: 'rgb(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'rgb(var(--destructive))',
+          foreground: 'rgb(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'rgb(var(--muted))',
+          foreground: 'rgb(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'rgb(var(--accent))',
+          foreground: 'rgb(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'rgb(var(--popover))',
+          foreground: 'rgb(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'rgb(var(--card))',
+          foreground: 'rgb(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+        'toast-progress': {
+          from: { transform: 'scaleX(0)' },
+          to: { transform: 'scaleX(1)' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'toast-progress': 'toast-progress linear forwards',
+      },
+      fontSize: {
+        xs: ['0.75rem', { lineHeight: '1rem' }],
+        sm: ['0.875rem', { lineHeight: '1.25rem' }],
+        base: ['1rem', { lineHeight: '1.5rem' }],
+        lg: ['1.125rem', { lineHeight: '1.75rem' }],
+        xl: ['1.25rem', { lineHeight: '1.75rem' }],
+        '2xl': ['1.5rem', { lineHeight: '2rem' }],
+        '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+        '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
+        '5xl': ['3rem', { lineHeight: '1' }],
+        '6xl': ['3.75rem', { lineHeight: '1' }],
+      },
+      spacing: {
+        18: '4.5rem',
+        88: '22rem',
+        128: '32rem',
+      },
+      screens: {
+        xs: '475px',
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+};

package/frontend/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@insforge/shared-schemas": ["../shared-schemas/src/index.ts"],
+    }
+  },
+  "include": ["src", "src/vite-env.d.ts", "../shared-schemas"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/frontend/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/frontend/vite.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import svgr from 'vite-plugin-svgr';
+import tailwindcss from '@tailwindcss/vite';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss(), svgr()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@insforge/shared-schemas': path.resolve(__dirname, '../shared-schemas/src'),
+    },
+  },
+  server: {
+    host: true, // Listen on all interfaces when running in Docker
+    port: 7131,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:7130',
+        changeOrigin: true,
+      },
+      '/functions': {
+        target: 'http://localhost:7130',
+        changeOrigin: true,
+      },
+      '/socket.io': {
+        target: 'http://localhost:7130',
+        ws: true,
+        changeOrigin: true,
+      },
+    },
+  },
+  build: {
+    outDir: '../dist/frontend',
+  },
+});

package/frontend/vitest.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.ts',
+    css: true,
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'src/test/',
+        '**/*.d.ts',
+        '**/*.config.*',
+        '**/mockData.ts',
+        'src/main.tsx',
+      ],
+      thresholds: {
+        lines: 60,
+        functions: 60,
+        branches: 60,
+        statements: 60,
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});

package/functions/deno.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "lib": ["deno.window", "deno.worker"],
+    "strict": true
+  },
+  "lint": {
+    "files": {
+      "include": ["./**/*.ts", "./**/*.js"]
+    },
+    "rules": {
+      "tags": ["recommended"]
+    }
+  },
+  "fmt": {
+    "files": {
+      "include": ["./**/*.ts", "./**/*.js"]
+    },
+    "options": {
+      "useTabs": false,
+      "lineWidth": 100,
+      "indentWidth": 2,
+      "singleQuote": true
+    }
+  }
+}