From b3dc1289f4b7237e17657fd62def3f3aeaeab4b5 Mon Sep 17 00:00:00 2001 From: Zane <75694352+zanesq@users.noreply.github.com> Date: Wed, 21 May 2025 20:24:34 -0700 Subject: [PATCH] ui-v2: Integrate bossui + chart component (#2622) --- ui-v2/components.json | 21 + ui-v2/lib/utils.ts | 6 + ui-v2/package-lock.json | 936 +++++++++++++++++- ui-v2/package.json | 10 +- ui-v2/src/App.tsx | 2 +- ui-v2/src/components/ChartTile.tsx | 152 --- ui-v2/src/components/PieChartTile.tsx | 123 --- ui-v2/src/components/Timeline.tsx | 169 ++-- ui-v2/src/components/tiles/ChartTile.tsx | 100 ++ .../src/components/{ => tiles}/ClockTile.tsx | 4 +- .../components/{ => tiles}/HighlightTile.tsx | 2 +- ui-v2/src/components/{ => tiles}/ListTile.tsx | 2 +- ui-v2/src/components/tiles/PieChartTile.tsx | 125 +++ ui-v2/src/components/ui/chart.tsx | 353 +++++++ ui-v2/src/components/ui/readme.md | 4 + ui-v2/src/lib/utils.ts | 20 + ui-v2/src/main.tsx | 2 +- ui-v2/src/{index.css => styles/main.css} | 126 ++- ui-v2/src/utils/utils.ts | 6 - ui-v2/tsconfig.json | 5 +- ui-v2/vite.config.ts | 1 + ui-v2/vite.renderer.config.ts | 1 + 22 files changed, 1787 insertions(+), 383 deletions(-) create mode 100644 ui-v2/components.json create mode 100644 ui-v2/lib/utils.ts delete mode 100644 ui-v2/src/components/ChartTile.tsx delete mode 100644 ui-v2/src/components/PieChartTile.tsx create mode 100644 ui-v2/src/components/tiles/ChartTile.tsx rename ui-v2/src/components/{ => tiles}/ClockTile.tsx (94%) rename ui-v2/src/components/{ => tiles}/HighlightTile.tsx (95%) rename ui-v2/src/components/{ => tiles}/ListTile.tsx (96%) create mode 100644 ui-v2/src/components/tiles/PieChartTile.tsx create mode 100644 ui-v2/src/components/ui/chart.tsx create mode 100644 ui-v2/src/components/ui/readme.md create mode 100644 ui-v2/src/lib/utils.ts rename ui-v2/src/{index.css => styles/main.css} (54%) delete mode 100644 ui-v2/src/utils/utils.ts diff --git a/ui-v2/components.json b/ui-v2/components.json new file mode 100644 index 00000000..59522241 --- /dev/null +++ b/ui-v2/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "http://localhost:3000/r/registry.json", + "style": "new-york", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "tailwind.config.js", + "css": "src/styles/main.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} diff --git a/ui-v2/lib/utils.ts b/ui-v2/lib/utils.ts new file mode 100644 index 00000000..bd0c391d --- /dev/null +++ b/ui-v2/lib/utils.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/ui-v2/package-lock.json b/ui-v2/package-lock.json index e5ffc837..b423e0e4 100644 --- a/ui-v2/package-lock.json +++ b/ui-v2/package-lock.json @@ -10,9 +10,12 @@ "dependencies": { "@tanstack/react-router": "^1.120.5", "@tanstack/router": "^0.0.1-beta.53", + "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "lucide-react": "^0.511.0", "react": "^19.1.0", - "react-dom": "^19.1.0" + "react-dom": "^19.1.0", + "recharts": "^2.15.3" }, "devDependencies": { "@electron-forge/cli": "^7.8.1", @@ -56,6 +59,7 @@ "tailwindcss": "^4.1.7", "tailwindcss-animate": "^1.0.7", "ts-node": "^10.9.2", + "tw-animate-css": "^1.3.0", "typescript": "^5.8.3", "vite": "^6.3.5", "vitest": "^3.1.3" @@ -427,6 +431,85 @@ "node": ">=18" } }, + "node_modules/@bundled-es-modules/cookie": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/cookie/-/cookie-2.0.1.tgz", + "integrity": "sha512-8o+5fRPLNbjbdGRRmJj3h6Hh1AQJf2dk3qQ/5ZFb+PXkRNiSoMGGUKlsgLfrxneb72axVJyIYji64E2+nNfYyw==", + "dev": true, + "license": "ISC", + "optional": true, + "peer": true, + "dependencies": { + "cookie": "^0.7.2" + } + }, + "node_modules/@bundled-es-modules/cookie/node_modules/cookie": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz", + "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/@bundled-es-modules/statuses": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/statuses/-/statuses-1.0.1.tgz", + "integrity": "sha512-yn7BklA5acgcBr+7w064fGV+SGIFySjCKpqjcWgBAIfrAkY+4GQTJJHQMeT3V/sgz23VTEVV8TtOmkvJAhFVfg==", + "dev": true, + "license": "ISC", + "optional": true, + "peer": true, + "dependencies": { + "statuses": "^2.0.1" + } + }, + "node_modules/@bundled-es-modules/tough-cookie": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/tough-cookie/-/tough-cookie-0.1.6.tgz", + "integrity": "sha512-dvMHbL464C0zI+Yqxbz6kZ5TOEp7GLW+pry/RWndAR8MJQAXZ2rPmIs8tziTZjeIyhSNZgZbCePtfSbdWqStJw==", + "dev": true, + "license": "ISC", + "optional": true, + "peer": true, + "dependencies": { + "@types/tough-cookie": "^4.0.5", + "tough-cookie": "^4.1.4" + } + }, + "node_modules/@bundled-es-modules/tough-cookie/node_modules/tough-cookie": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz", + "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==", + "dev": true, + "license": "BSD-3-Clause", + "optional": true, + "peer": true, + "dependencies": { + "psl": "^1.1.33", + "punycode": "^2.1.1", + "universalify": "^0.2.0", + "url-parse": "^1.5.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@bundled-es-modules/tough-cookie/node_modules/universalify": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz", + "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/@cspotcode/source-map-support": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", @@ -2012,6 +2095,210 @@ "url": "https://github.com/sponsors/nzakas" } }, + "node_modules/@inquirer/confirm": { + "version": "5.1.10", + "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.1.10.tgz", + "integrity": "sha512-FxbQ9giWxUWKUk2O5XZ6PduVnH2CZ/fmMKMBkH71MHJvWr7WL5AHKevhzF1L5uYWB2P548o1RzVxrNd3dpmk6g==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "@inquirer/core": "^10.1.11", + "@inquirer/type": "^3.0.6" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@inquirer/core": { + "version": "10.1.11", + "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-10.1.11.tgz", + "integrity": "sha512-BXwI/MCqdtAhzNQlBEFE7CEflhPkl/BqvAuV/aK6lW3DClIfYVDWPP/kXuXHtBWC7/EEbNqd/1BGq2BGBBnuxw==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "@inquirer/figures": "^1.0.11", + "@inquirer/type": "^3.0.6", + "ansi-escapes": "^4.3.2", + "cli-width": "^4.1.0", + "mute-stream": "^2.0.0", + "signal-exit": "^4.1.0", + "wrap-ansi": "^6.2.0", + "yoctocolors-cjs": "^2.1.2" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@inquirer/core/node_modules/ansi-escapes": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", + "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "type-fest": "^0.21.3" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@inquirer/core/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, + "node_modules/@inquirer/core/node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@inquirer/core/node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, + "license": "ISC", + "optional": true, + "peer": true, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@inquirer/core/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@inquirer/core/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@inquirer/core/node_modules/type-fest": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", + "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", + "dev": true, + "license": "(MIT OR CC0-1.0)", + "optional": true, + "peer": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@inquirer/core/node_modules/wrap-ansi": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", + "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@inquirer/figures": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.11.tgz", + "integrity": "sha512-eOg92lvrn/aRUqbxRyvpEWnrvRuTYRifixHkYVpJiygTgVSBIHDqLh0SrMQXkafvULg3ck11V7xvR+zcgvpHFw==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/@inquirer/type": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-3.0.6.tgz", + "integrity": "sha512-/mKVCtVpyBu3IDarv0G+59KC4stsD5mDsGpYh+GKs1NZT88Jh52+cuoA1AtLk2Q0r/quNl+1cSUyLRHBFeD0XA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -2174,6 +2461,26 @@ "node": ">= 12.13.0" } }, + "node_modules/@mswjs/interceptors": { + "version": "0.37.6", + "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.37.6.tgz", + "integrity": "sha512-wK+5pLK5XFmgtH3aQ2YVvA3HohS3xqV/OxuVOdNx9Wpnz7VE/fnC+e1A7ln6LFYeck7gOJ/dsZV6OLplOtAJ2w==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "@open-draft/deferred-promise": "^2.2.0", + "@open-draft/logger": "^0.3.0", + "@open-draft/until": "^2.0.0", + "is-node-process": "^1.2.0", + "outvariant": "^1.4.3", + "strict-event-emitter": "^0.5.1" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -2241,6 +2548,37 @@ "node": "^12.13.0 || ^14.15.0 || >=16.0.0" } }, + "node_modules/@open-draft/deferred-promise": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz", + "integrity": "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, + "node_modules/@open-draft/logger": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@open-draft/logger/-/logger-0.3.0.tgz", + "integrity": "sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "is-node-process": "^1.2.0", + "outvariant": "^1.4.0" + } + }, + "node_modules/@open-draft/until": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@open-draft/until/-/until-2.1.0.tgz", + "integrity": "sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", @@ -3297,6 +3635,78 @@ "@types/responselike": "^1.0.0" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, + "node_modules/@types/d3-array": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz", + "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==", + "license": "MIT" + }, + "node_modules/@types/d3-color": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz", + "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==", + "license": "MIT" + }, + "node_modules/@types/d3-ease": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz", + "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==", + "license": "MIT" + }, + "node_modules/@types/d3-interpolate": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz", + "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==", + "license": "MIT", + "dependencies": { + "@types/d3-color": "*" + } + }, + "node_modules/@types/d3-path": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz", + "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==", + "license": "MIT" + }, + "node_modules/@types/d3-scale": { + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz", + "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==", + "license": "MIT", + "dependencies": { + "@types/d3-time": "*" + } + }, + "node_modules/@types/d3-shape": { + "version": "3.1.7", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz", + "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==", + "license": "MIT", + "dependencies": { + "@types/d3-path": "*" + } + }, + "node_modules/@types/d3-time": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz", + "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==", + "license": "MIT" + }, + "node_modules/@types/d3-timer": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz", + "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==", + "license": "MIT" + }, "node_modules/@types/eslint": { "version": "9.6.1", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz", @@ -3397,6 +3807,24 @@ "@types/node": "*" } }, + "node_modules/@types/statuses": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@types/statuses/-/statuses-2.0.5.tgz", + "integrity": "sha512-jmIUGWrAiwu3dZpxntxieC+1n/5c3mjrImkmOSQ2NC5uP6cYO4aAZDdSmRcI5C1oiTmqlZGHC+/NmJrKogbP5A==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, + "node_modules/@types/tough-cookie": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", + "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/@types/yauzl": { "version": "2.10.3", "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz", @@ -4777,6 +5205,18 @@ "node": ">=6.0" } }, + "node_modules/class-variance-authority": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz", + "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==", + "license": "Apache-2.0", + "dependencies": { + "clsx": "^2.1.1" + }, + "funding": { + "url": "https://polar.sh/cva" + } + }, "node_modules/clean-stack": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", @@ -4833,6 +5273,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/cli-width": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-4.1.0.tgz", + "integrity": "sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==", + "dev": true, + "license": "ISC", + "optional": true, + "peer": true, + "engines": { + "node": ">= 12" + } + }, "node_modules/cliui": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", @@ -5254,9 +5706,129 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true, "license": "MIT" }, + "node_modules/d3-array": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz", + "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==", + "license": "ISC", + "dependencies": { + "internmap": "1 - 2" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-color": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", + "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-ease": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz", + "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-format": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", + "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "license": "ISC", + "dependencies": { + "d3-color": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-path": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz", + "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-scale": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", + "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", + "license": "ISC", + "dependencies": { + "d3-array": "2.10.0 - 3", + "d3-format": "1 - 3", + "d3-interpolate": "1.2.0 - 3", + "d3-time": "2.1.1 - 3", + "d3-time-format": "2 - 4" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-shape": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz", + "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==", + "license": "ISC", + "dependencies": { + "d3-path": "^3.1.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz", + "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==", + "license": "ISC", + "dependencies": { + "d3-array": "2 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time-format": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", + "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", + "license": "ISC", + "dependencies": { + "d3-time": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-timer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz", + "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, "node_modules/data-urls": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz", @@ -5350,6 +5922,12 @@ "dev": true, "license": "MIT" }, + "node_modules/decimal.js-light": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz", + "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==", + "license": "MIT" + }, "node_modules/decompress-response": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz", @@ -5569,6 +6147,16 @@ "license": "MIT", "peer": true }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dunder-proto": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", @@ -7240,6 +7828,15 @@ "dev": true, "license": "Apache-2.0" }, + "node_modules/fast-equals": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz", + "integrity": "sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==", + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/fast-glob": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz", @@ -8065,6 +8662,18 @@ "dev": true, "license": "MIT" }, + "node_modules/graphql": { + "version": "16.11.0", + "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.11.0.tgz", + "integrity": "sha512-mS1lbMsxgQj6hge1XZ6p7GPhbrtFwUFYi3wRzXAC/FmYnyXMTvvI3td3rjmQ2u8ewXueaSvRPWaEcgVVOT9Jnw==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0" + } + }, "node_modules/has-bigints": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz", @@ -8159,6 +8768,15 @@ "node": ">= 0.4" } }, + "node_modules/headers-polyfill": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-4.0.3.tgz", + "integrity": "sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/hookified": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.9.0.tgz", @@ -8440,6 +9058,15 @@ "node": ">= 0.4" } }, + "node_modules/internmap": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", + "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, "node_modules/interpret": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz", @@ -8717,6 +9344,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-node-process": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/is-node-process/-/is-node-process-1.2.0.tgz", + "integrity": "sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/is-number": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", @@ -9058,7 +9694,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true, "license": "MIT" }, "node_modules/js-yaml": { @@ -9870,7 +10505,6 @@ "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true, "license": "MIT" }, "node_modules/lodash.castarray": { @@ -9950,7 +10584,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "license": "MIT", "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" @@ -9986,6 +10619,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.511.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.511.0.tgz", + "integrity": "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/lz-string": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", @@ -10502,6 +11144,89 @@ "dev": true, "license": "MIT" }, + "node_modules/msw": { + "version": "2.8.4", + "resolved": "https://registry.npmjs.org/msw/-/msw-2.8.4.tgz", + "integrity": "sha512-GLU8gx0o7RBG/3x/eTnnLd5S5ZInxXRRRMN8GJwaPZ4jpJTxzQfWGvwr90e8L5dkKJnz+gT4gQYCprLy/c4kVw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "@bundled-es-modules/cookie": "^2.0.1", + "@bundled-es-modules/statuses": "^1.0.1", + "@bundled-es-modules/tough-cookie": "^0.1.6", + "@inquirer/confirm": "^5.0.0", + "@mswjs/interceptors": "^0.37.0", + "@open-draft/deferred-promise": "^2.2.0", + "@open-draft/until": "^2.1.0", + "@types/cookie": "^0.6.0", + "@types/statuses": "^2.0.4", + "graphql": "^16.8.1", + "headers-polyfill": "^4.0.2", + "is-node-process": "^1.2.0", + "outvariant": "^1.4.3", + "path-to-regexp": "^6.3.0", + "picocolors": "^1.1.1", + "strict-event-emitter": "^0.5.1", + "type-fest": "^4.26.1", + "yargs": "^17.7.2" + }, + "bin": { + "msw": "cli/index.js" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/mswjs" + }, + "peerDependencies": { + "typescript": ">= 4.8.x" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/msw/node_modules/path-to-regexp": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz", + "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, + "node_modules/msw/node_modules/type-fest": { + "version": "4.41.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz", + "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==", + "dev": true, + "license": "(MIT OR CC0-1.0)", + "optional": true, + "peer": true, + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/mute-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-2.0.0.tgz", + "integrity": "sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==", + "dev": true, + "license": "ISC", + "optional": true, + "peer": true, + "engines": { + "node": "^18.17.0 || >=20.5.0" + } + }, "node_modules/nano-spawn": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nano-spawn/-/nano-spawn-1.0.2.tgz", @@ -10740,7 +11465,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -10980,6 +11704,15 @@ "node": ">=8" } }, + "node_modules/outvariant": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.3.tgz", + "integrity": "sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/own-keys": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz", @@ -11574,6 +12307,14 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/pretty-format/node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "dev": true, + "license": "MIT", + "peer": true + }, "node_modules/proc-log": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-2.0.1.tgz", @@ -11619,7 +12360,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.4.0", @@ -11631,7 +12371,6 @@ "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true, "license": "MIT" }, "node_modules/proxy-addr": { @@ -11648,6 +12387,21 @@ "node": ">= 0.10" } }, + "node_modules/psl": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz", + "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "punycode": "^2.3.1" + }, + "funding": { + "url": "https://github.com/sponsors/lupomontero" + } + }, "node_modules/pump": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz", @@ -11685,6 +12439,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/querystringify": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", + "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -11767,12 +12530,10 @@ } }, "node_modules/react-is": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", - "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", - "dev": true, - "license": "MIT", - "peer": true + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", + "license": "MIT" }, "node_modules/react-refresh": { "version": "0.17.0", @@ -11784,6 +12545,37 @@ "node": ">=0.10.0" } }, + "node_modules/react-smooth": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz", + "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==", + "license": "MIT", + "dependencies": { + "fast-equals": "^5.0.1", + "prop-types": "^15.8.1", + "react-transition-group": "^4.4.5" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "license": "BSD-3-Clause", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-binary-file-arch": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/read-binary-file-arch/-/read-binary-file-arch-1.0.6.tgz", @@ -11904,6 +12696,44 @@ "node": ">= 6" } }, + "node_modules/recharts": { + "version": "2.15.3", + "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.3.tgz", + "integrity": "sha512-EdOPzTwcFSuqtvkDoaM5ws/Km1+WTAO2eizL7rqiG0V2UVhTnz0m7J2i0CjVPUCdEkZImaWvXLbZDS2H5t6GFQ==", + "license": "MIT", + "dependencies": { + "clsx": "^2.0.0", + "eventemitter3": "^4.0.1", + "lodash": "^4.17.21", + "react-is": "^18.3.1", + "react-smooth": "^4.0.4", + "recharts-scale": "^0.4.4", + "tiny-invariant": "^1.3.1", + "victory-vendor": "^36.6.8" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/recharts-scale": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz", + "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==", + "license": "MIT", + "dependencies": { + "decimal.js-light": "^2.4.1" + } + }, + "node_modules/recharts/node_modules/eventemitter3": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==", + "license": "MIT" + }, "node_modules/rechoir": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz", @@ -11995,6 +12825,15 @@ "node": ">=0.10.0" } }, + "node_modules/requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/resedit": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/resedit/-/resedit-2.0.3.tgz", @@ -12850,6 +13689,15 @@ "dev": true, "license": "MIT" }, + "node_modules/strict-event-emitter": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.5.1.tgz", + "integrity": "sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/string_decoder": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", @@ -14096,6 +14944,16 @@ "dev": true, "license": "0BSD" }, + "node_modules/tw-animate-css": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.3.0.tgz", + "integrity": "sha512-jrJ0XenzS9KVuDThJDvnhalbl4IYiMQ/XvpA0a2FL8KmlK+6CSMviO7ROY/I7z1NnUs5NnDhlM6fXmF40xPxzw==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/Wombosvideo" + } + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -14341,6 +15199,19 @@ "punycode": "^2.1.0" } }, + "node_modules/url-parse": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz", + "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "querystringify": "^2.1.1", + "requires-port": "^1.0.0" + } + }, "node_modules/use-sync-external-store": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz", @@ -14409,6 +15280,28 @@ "node": ">= 0.8" } }, + "node_modules/victory-vendor": { + "version": "36.9.2", + "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz", + "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==", + "license": "MIT AND ISC", + "dependencies": { + "@types/d3-array": "^3.0.3", + "@types/d3-ease": "^3.0.0", + "@types/d3-interpolate": "^3.0.1", + "@types/d3-scale": "^4.0.2", + "@types/d3-shape": "^3.1.0", + "@types/d3-time": "^3.0.0", + "@types/d3-timer": "^3.0.0", + "d3-array": "^3.1.6", + "d3-ease": "^3.0.1", + "d3-interpolate": "^3.0.1", + "d3-scale": "^4.0.2", + "d3-shape": "^3.1.0", + "d3-time": "^3.0.0", + "d3-timer": "^3.0.1" + } + }, "node_modules/vite": { "version": "6.3.5", "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz", @@ -15181,6 +16074,21 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/yoctocolors-cjs": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/yoctocolors-cjs/-/yoctocolors-cjs-2.1.2.tgz", + "integrity": "sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } } } } diff --git a/ui-v2/package.json b/ui-v2/package.json index 20c84f0f..c7462b7c 100644 --- a/ui-v2/package.json +++ b/ui-v2/package.json @@ -34,9 +34,12 @@ "dependencies": { "@tanstack/react-router": "^1.120.5", "@tanstack/router": "^0.0.1-beta.53", + "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "lucide-react": "^0.511.0", "react": "^19.1.0", - "react-dom": "^19.1.0" + "react-dom": "^19.1.0", + "recharts": "^2.15.3" }, "devDependencies": { "@electron-forge/cli": "^7.8.1", @@ -48,6 +51,7 @@ "@electron-forge/shared-types": "^7.8.1", "@playwright/test": "^1.52.0", "@tailwindcss/postcss": "^4.1.7", + "@tailwindcss/typography": "^0.5.16", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.3.0", "@testing-library/user-event": "^14.6.1", @@ -75,11 +79,11 @@ "prettier": "^3.5.3", "stylelint": "^16.19.1", "stylelint-config-standard": "^38.0.0", - "@tailwindcss/typography": "^0.5.16", "tailwind-merge": "^3.3.0", "tailwindcss": "^4.1.7", "tailwindcss-animate": "^1.0.7", "ts-node": "^10.9.2", + "tw-animate-css": "^1.3.0", "typescript": "^5.8.3", "vite": "^6.3.5", "vitest": "^3.1.3" @@ -98,4 +102,4 @@ "config": { "forge": "./forge.config.ts" } -} \ No newline at end of file +} diff --git a/ui-v2/src/App.tsx b/ui-v2/src/App.tsx index 2a504ac7..5522b422 100644 --- a/ui-v2/src/App.tsx +++ b/ui-v2/src/App.tsx @@ -8,7 +8,7 @@ const App: React.FC = (): React.ReactElement => { return (
-
+
}> diff --git a/ui-v2/src/components/ChartTile.tsx b/ui-v2/src/components/ChartTile.tsx deleted file mode 100644 index 74dbece4..00000000 --- a/ui-v2/src/components/ChartTile.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import React from 'react'; -import { useTimelineStyles } from '../hooks/useTimelineStyles'; - -interface ChartTileProps { - title: string; - value: string; - trend?: string; - data: number[]; - icon: React.ReactNode; - variant?: 'line' | 'bar'; - date?: Date; -} - -export default function ChartTile({ - title, - value, - trend, - data, - icon, - variant = 'line', - date -}: ChartTileProps) { - const { contentCardStyle } = useTimelineStyles(date); - - // Convert data points to SVG coordinates - const createSmoothPath = () => { - const points = data.map((value, index) => { - const x = (index / (data.length - 1)) * 100; - const y = 100 - ((value - Math.min(...data)) / (Math.max(...data) - Math.min(...data))) * 100; - return [x, y]; - }); - - let path = `M ${points[0][0]},${points[0][1]}`; - for (let i = 0; i < points.length - 1; i++) { - const current = points[i]; - const next = points[i + 1]; - const controlPoint1X = current[0] + (next[0] - current[0]) / 3; - const controlPoint2X = current[0] + 2 * (next[0] - current[0]) / 3; - path += ` C ${controlPoint1X},${current[1]} ${controlPoint2X},${next[1]} ${next[0]},${next[1]}`; - } - return path; - }; - - // Create bar chart elements - const createBars = () => { - const maxValue = Math.max(...data.map(Math.abs)); - const barWidth = 8; - const spacing = (100 - (data.length * barWidth)) / (data.length - 1); - - return data.map((value, index) => { - const x = index * (barWidth + spacing); - const height = Math.abs(value) / maxValue * 50; - const y = value > 0 ? 50 - height : 50; - - return { - x, - y, - height, - isPositive: value > 0 - }; - }); - }; - - return ( -
- {/* Header section with icon */} -
-
- {icon} -
- -
-
{title}
-
- {value} - {trend && {trend}} -
-
-
- - {/* Chart Container */} -
- - {variant === 'line' ? ( - <> - - - - - - - - - - {/* Data points */} - {data.map((value, index) => { - const x = (index / (data.length - 1)) * 100; - const y = 100 - ((value - Math.min(...data)) / (Math.max(...data) - Math.min(...data))) * 100; - return ( - - ); - })} - - ) : ( - <> - {createBars().map((bar, index) => ( - - ))} - - )} - -
-
- ); -} \ No newline at end of file diff --git a/ui-v2/src/components/PieChartTile.tsx b/ui-v2/src/components/PieChartTile.tsx deleted file mode 100644 index 62585218..00000000 --- a/ui-v2/src/components/PieChartTile.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import React from 'react'; -import { useTimelineStyles } from '../hooks/useTimelineStyles'; - -interface PieChartSegment { - value: number; - color: string; - label: string; -} - -interface PieChartTileProps { - title: string; - icon: React.ReactNode; - segments: PieChartSegment[]; - date?: Date; -} - -export default function PieChartTile({ - title, - icon, - segments, - date -}: PieChartTileProps) { - const { contentCardStyle } = useTimelineStyles(date); - - const total = segments.reduce((sum, segment) => sum + segment.value, 0); - let currentAngle = 0; - - const createPieSegments = () => { - return segments.map((segment, index) => { - const startAngle = currentAngle; - const percentage = segment.value / total; - const angle = percentage * 360; - currentAngle += angle; - - const startX = Math.cos((startAngle - 90) * Math.PI / 180) * 32 + 50; - const startY = Math.sin((startAngle - 90) * Math.PI / 180) * 32 + 50; - const endX = Math.cos((currentAngle - 90) * Math.PI / 180) * 32 + 50; - const endY = Math.sin((currentAngle - 90) * Math.PI / 180) * 32 + 50; - - const largeArcFlag = angle > 180 ? 1 : 0; - - const d = [ - `M 50 50`, - `L ${startX} ${startY}`, - `A 32 32 0 ${largeArcFlag} 1 ${endX} ${endY}`, - 'Z' - ].join(' '); - - return { - path: d, - color: segment.color, - label: segment.label, - percentage: (percentage * 100).toFixed(1) - }; - }); - }; - - const pieSegments = createPieSegments(); - - return ( -
- {/* Header */} -
-
- {icon} -
-
- {title} -
-
- - {/* Pie Chart */} -
-
- - {pieSegments.map((segment, index) => ( - - ))} - -
- - {/* Legend */} -
- {pieSegments.map((segment, index) => ( -
-
-
- - {segment.label} - -
- - {segment.percentage}% - -
- ))} -
-
-
- ); -} \ No newline at end of file diff --git a/ui-v2/src/components/Timeline.tsx b/ui-v2/src/components/Timeline.tsx index 5cd6d83b..f601e23d 100644 --- a/ui-v2/src/components/Timeline.tsx +++ b/ui-v2/src/components/Timeline.tsx @@ -1,17 +1,25 @@ import React, { useRef, useMemo, useEffect } from 'react'; -import ChartTile from './ChartTile'; -import HighlightTile from './HighlightTile'; -import PieChartTile from './PieChartTile'; -import ListTile from './ListTile'; -import ClockTile from './ClockTile'; +import ChartTile from './tiles/ChartTile.tsx'; +import HighlightTile from './tiles/HighlightTile.tsx'; +import PieChartTile from './tiles/PieChartTile.tsx'; +import ListTile from './tiles/ListTile.tsx'; +import ClockTile from './tiles/ClockTile.tsx'; import TimelineDots from './TimelineDots'; -import { ChartLineIcon, ChartBarIcon, PieChartIcon, ListIcon, StarIcon, TrendingUpIcon } from './icons'; +import { + ChartLineIcon, + ChartBarIcon, + PieChartIcon, + ListIcon, + StarIcon, + TrendingUpIcon, +} from './icons'; -const generateRandomData = (length: number) => Array.from({ length }, () => Math.floor(Math.random() * 100)); +const generateRandomData = (length: number) => + Array.from({ length }, () => Math.floor(Math.random() * 100)); const generateTileData = (date: Date) => { const isToday = new Date().toDateString() === date.toDateString(); - + return { left: [ // Performance metrics @@ -24,8 +32,8 @@ const generateTileData = (date: Date) => { data: generateRandomData(7), icon: , variant: 'line' as const, - date - } + date, + }, }, { type: 'highlight' as const, @@ -35,8 +43,8 @@ const generateTileData = (date: Date) => { icon: , subtitle: isToday ? 'Personal best today' : 'Keep it up', date, - accentColor: '#FFB800' - } + accentColor: '#FFB800', + }, }, { type: 'pie' as const, @@ -46,10 +54,10 @@ const generateTileData = (date: Date) => { segments: [ { value: 45, color: '#00CAF7', label: 'Completed' }, { value: 35, color: '#FFB800', label: 'In Progress' }, - { value: 20, color: '#FF4444', label: 'Pending' } + { value: 20, color: '#FF4444', label: 'Pending' }, ], - date - } + date, + }, }, // Additional metrics { @@ -61,8 +69,8 @@ const generateTileData = (date: Date) => { data: generateRandomData(7), icon: , variant: 'bar' as const, - date - } + date, + }, }, { type: 'highlight' as const, @@ -72,8 +80,8 @@ const generateTileData = (date: Date) => { icon: , subtitle: 'Based on feedback', date, - accentColor: '#4CAF50' - } + accentColor: '#4CAF50', + }, }, { type: 'list' as const, @@ -84,10 +92,10 @@ const generateTileData = (date: Date) => { { text: 'Project Alpha', value: '87%', color: '#00CAF7' }, { text: 'Team Meeting', value: '2:30 PM' }, { text: 'Review Code', value: '13', color: '#FFB800' }, - { text: 'Deploy Update', value: 'Done', color: '#4CAF50' } + { text: 'Deploy Update', value: 'Done', color: '#4CAF50' }, ], - date - } + date, + }, }, // System metrics { @@ -99,8 +107,8 @@ const generateTileData = (date: Date) => { data: generateRandomData(7), icon: , variant: 'line' as const, - date - } + date, + }, }, { type: 'pie' as const, @@ -110,11 +118,11 @@ const generateTileData = (date: Date) => { segments: [ { value: 60, color: '#4CAF50', label: 'Free' }, { value: 25, color: '#FFB800', label: 'Used' }, - { value: 15, color: '#FF4444', label: 'System' } + { value: 15, color: '#FF4444', label: 'System' }, ], - date - } - } + date, + }, + }, ], right: [ // Performance metrics @@ -127,16 +135,16 @@ const generateTileData = (date: Date) => { data: generateRandomData(7), icon: , variant: 'bar' as const, - date - } + date, + }, }, // Clock tile { type: 'clock' as const, props: { title: 'Current Time', - date - } + date, + }, }, { type: 'highlight' as const, @@ -146,8 +154,8 @@ const generateTileData = (date: Date) => { icon: , subtitle: 'Above target', date, - accentColor: '#4CAF50' - } + accentColor: '#4CAF50', + }, }, { type: 'pie' as const, @@ -157,10 +165,10 @@ const generateTileData = (date: Date) => { segments: [ { value: 55, color: '#4CAF50', label: 'Available' }, { value: 30, color: '#FFB800', label: 'In Use' }, - { value: 15, color: '#FF4444', label: 'Reserved' } + { value: 15, color: '#FF4444', label: 'Reserved' }, ], - date - } + date, + }, }, // Updates and notifications { @@ -172,10 +180,10 @@ const generateTileData = (date: Date) => { { text: 'System Update', value: 'Complete', color: '#4CAF50' }, { text: 'New Features', value: '3', color: '#00CAF7' }, { text: 'Bug Fixes', value: '7', color: '#FFB800' }, - { text: 'Performance', value: '+15%', color: '#4CAF50' } + { text: 'Performance', value: '+15%', color: '#4CAF50' }, ], - date - } + date, + }, }, // Additional metrics { @@ -187,8 +195,8 @@ const generateTileData = (date: Date) => { data: generateRandomData(7), icon: , variant: 'line' as const, - date - } + date, + }, }, { type: 'highlight' as const, @@ -198,8 +206,8 @@ const generateTileData = (date: Date) => { icon: , subtitle: 'Last 24 hours', date, - accentColor: '#00CAF7' - } + accentColor: '#00CAF7', + }, }, // System health { @@ -210,10 +218,10 @@ const generateTileData = (date: Date) => { segments: [ { value: 75, color: '#4CAF50', label: 'Healthy' }, { value: 20, color: '#FFB800', label: 'Warning' }, - { value: 5, color: '#FF4444', label: 'Critical' } + { value: 5, color: '#FF4444', label: 'Critical' }, ], - date - } + date, + }, }, { type: 'list' as const, @@ -224,12 +232,12 @@ const generateTileData = (date: Date) => { { text: 'Main API', value: 'Online', color: '#4CAF50' }, { text: 'Database', value: '98%', color: '#00CAF7' }, { text: 'Cache', value: 'Synced', color: '#4CAF50' }, - { text: 'CDN', value: 'Active', color: '#4CAF50' } + { text: 'CDN', value: 'Active', color: '#4CAF50' }, ], - date - } - } - ] + date, + }, + }, + ], }; }; @@ -240,7 +248,7 @@ export default function Timeline() { const sections = useMemo(() => { const result = []; const today = new Date(); - + for (let i = 0; i <= 29; i++) { const date = new Date(today); date.setDate(today.getDate() - i); @@ -251,10 +259,10 @@ export default function Timeline() { date, isToday: i === 0, leftTiles: tileData.left, - rightTiles: tileData.right + rightTiles: tileData.right, }); } - + return result; }, []); @@ -269,7 +277,7 @@ export default function Timeline() { sectionElement.scrollTo({ left: scrollToX, - behavior: 'smooth' + behavior: 'smooth', }); }); }; @@ -287,14 +295,14 @@ export default function Timeline() { }, { threshold: 0.5, - rootMargin: '0px' + rootMargin: '0px', } ); // Add resize handler const handleResize = () => { // Find the currently visible section - const visibleSection = sectionRefs.current.find(section => { + const visibleSection = sectionRefs.current.find((section) => { if (!section) return false; const rect = section.getBoundingClientRect(); const viewportHeight = window.innerHeight; @@ -347,23 +355,25 @@ export default function Timeline() { }; return ( -
{sections.map((section, index) => ( -
sectionRefs.current[index] = el} - className="h-screen relative snap-center snap-always overflow-x-scroll snap-x snap-mandatory scrollbar-hide" + ref={(el) => (sectionRefs.current[index] = el)} + className="h-screen relative snap-center snap-always overflow-y-hidden overflow-x-scroll snap-x snap-mandatory scrollbar-hide" >
{/* Main flex container */}
- {/* Left Grid */}
-
+
{section.leftTiles.map((tile, i) => (
{renderTile(tile, i)} @@ -375,28 +385,45 @@ export default function Timeline() { {/* Center Timeline */}
{/* Upper Timeline Dots */} - + {/* Date Display */}
-
+
{section.date.toLocaleString('default', { month: 'short' })}
-
+
{section.date.getDate()}
-
+
{section.date.toLocaleString('default', { weekday: 'long' })}
{/* Lower Timeline Dots */} - +
{/* Right Grid */}
-
+
{section.rightTiles.map((tile, i) => (
{renderTile(tile, i)} @@ -410,4 +437,4 @@ export default function Timeline() { ))}
); -} \ No newline at end of file +} diff --git a/ui-v2/src/components/tiles/ChartTile.tsx b/ui-v2/src/components/tiles/ChartTile.tsx new file mode 100644 index 00000000..a161658e --- /dev/null +++ b/ui-v2/src/components/tiles/ChartTile.tsx @@ -0,0 +1,100 @@ +import React from 'react'; +import { useTimelineStyles } from '../../hooks/useTimelineStyles.ts'; +import { ChartConfig, ChartContainer } from "@/components/ui/chart.tsx"; +import { BarChart, Bar, LineChart, Line, ResponsiveContainer, Tooltip } from 'recharts'; + +interface ChartTileProps { + title: string; + value: string; + trend?: string; + data: number[]; + icon: React.ReactNode; + variant?: 'line' | 'bar'; + date?: Date; +} + +export default function ChartTile({ + title, + value, + trend, + data, + icon, + variant = 'line', + date +}: ChartTileProps) { + const { contentCardStyle } = useTimelineStyles(date); + + // Convert the data array to the format expected by recharts + const chartData = data.map((value, index) => ({ + value, + index: `Point ${index + 1}` + })); + + // Chart configuration + const chartConfig = { + value: { + label: title, + theme: { + light: variant === 'line' ? '#0B54DE' : '#4CAF50', + dark: variant === 'line' ? '#00CAF7' : '#4CAF50' + } + } + } satisfies ChartConfig; + + return ( +
+ {/* Header section with icon */} +
+
+ {icon} +
+ +
+
{title}
+
+ {value} + {trend && {trend}} +
+
+
+ + {/* Chart Container */} +
+ + {variant === 'line' ? ( + + + + + ) : ( + + + + + )} + +
+
+ ); +} diff --git a/ui-v2/src/components/ClockTile.tsx b/ui-v2/src/components/tiles/ClockTile.tsx similarity index 94% rename from ui-v2/src/components/ClockTile.tsx rename to ui-v2/src/components/tiles/ClockTile.tsx index 1343e995..7dc318ec 100644 --- a/ui-v2/src/components/ClockTile.tsx +++ b/ui-v2/src/components/tiles/ClockTile.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react'; -import { useTimelineStyles } from '../hooks/useTimelineStyles'; -import waveBg from '../assets/backgrounds/wave-bg.png'; +import { useTimelineStyles } from '../../hooks/useTimelineStyles.ts'; +import waveBg from '../../assets/backgrounds/wave-bg.png'; interface ClockCardProps { date?: Date; diff --git a/ui-v2/src/components/HighlightTile.tsx b/ui-v2/src/components/tiles/HighlightTile.tsx similarity index 95% rename from ui-v2/src/components/HighlightTile.tsx rename to ui-v2/src/components/tiles/HighlightTile.tsx index cb44f526..167c5de1 100644 --- a/ui-v2/src/components/HighlightTile.tsx +++ b/ui-v2/src/components/tiles/HighlightTile.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useTimelineStyles } from '../hooks/useTimelineStyles'; +import { useTimelineStyles } from '../../hooks/useTimelineStyles.ts'; interface HighlightTileProps { title: string; diff --git a/ui-v2/src/components/ListTile.tsx b/ui-v2/src/components/tiles/ListTile.tsx similarity index 96% rename from ui-v2/src/components/ListTile.tsx rename to ui-v2/src/components/tiles/ListTile.tsx index 8c41cccf..bce3e3af 100644 --- a/ui-v2/src/components/ListTile.tsx +++ b/ui-v2/src/components/tiles/ListTile.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useTimelineStyles } from '../hooks/useTimelineStyles'; +import { useTimelineStyles } from '../../hooks/useTimelineStyles.ts'; interface ListItem { text: string; diff --git a/ui-v2/src/components/tiles/PieChartTile.tsx b/ui-v2/src/components/tiles/PieChartTile.tsx new file mode 100644 index 00000000..a161339f --- /dev/null +++ b/ui-v2/src/components/tiles/PieChartTile.tsx @@ -0,0 +1,125 @@ +import React from 'react'; +import { useTimelineStyles } from '../../hooks/useTimelineStyles'; +import { ChartConfig, ChartContainer } from "@/components/ui/chart"; +import { PieChart, Pie, Cell, Tooltip, Legend } from 'recharts'; + +interface PieChartSegment { + value: number; + color: string; + label: string; +} + +interface PieChartTileProps { + title: string; + icon: React.ReactNode; + segments: PieChartSegment[]; + date?: Date; +} + +export default function PieChartTile({ + title, + icon, + segments, + date +}: PieChartTileProps) { + const { contentCardStyle } = useTimelineStyles(date); + + // Convert segments to the format expected by recharts + const chartData = segments.map(segment => ({ + name: segment.label, + value: segment.value + })); + + // Create chart configuration with theme colors + const chartConfig = segments.reduce((config, segment) => { + config[segment.label] = { + label: segment.label, + color: segment.color + }; + return config; + }, {} as ChartConfig); + + // Custom tooltip formatter + const tooltipFormatter = (value: number, name: string) => { + const total = segments.reduce((sum, segment) => sum + segment.value, 0); + const percentage = ((value / total) * 100).toFixed(1); + return [`${percentage}%`, name]; + }; + + return ( +
+ {/* Header */} +
+
+ {icon} +
+
+ {title} +
+
+ + {/* Pie Chart */} +
+
+ + + + {segments.map((segment, index) => ( + + ))} + + + + +
+ + {/* Legend */} +
+ {segments.map((segment, index) => { + const percentage = ((segment.value / segments.reduce((sum, s) => sum + s.value, 0)) * 100).toFixed(1); + return ( +
+
+
+ + {segment.label} + +
+ + {percentage}% + +
+ ); + })} +
+
+
+ ); +} diff --git a/ui-v2/src/components/ui/chart.tsx b/ui-v2/src/components/ui/chart.tsx new file mode 100644 index 00000000..fcf93af0 --- /dev/null +++ b/ui-v2/src/components/ui/chart.tsx @@ -0,0 +1,353 @@ +"use client"; + +import * as React from "react"; +import * as RechartsPrimitive from "recharts"; + +import { cn } from "@/lib/utils"; + +// Format: { THEME_NAME: CSS_SELECTOR } +const THEMES = { light: "", dark: ".dark" } as const; + +export type ChartConfig = { + [k in string]: { + label?: React.ReactNode; + icon?: React.ComponentType; + } & ( + | { color?: string; theme?: never } + | { color?: never; theme: Record } + ); +}; + +type ChartContextProps = { + config: ChartConfig; +}; + +const ChartContext = React.createContext(null); + +function useChart() { + const context = React.useContext(ChartContext); + + if (!context) { + throw new Error("useChart must be used within a "); + } + + return context; +} + +function ChartContainer({ + id, + className, + children, + config, + ...props +}: React.ComponentProps<"div"> & { + config: ChartConfig; + children: React.ComponentProps< + typeof RechartsPrimitive.ResponsiveContainer + >["children"]; +}) { + const uniqueId = React.useId(); + const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`; + + return ( + +
+ + + {children} + +
+ + ); +} + +const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { + const colorConfig = Object.entries(config).filter( + ([, config]) => config.theme || config.color + ); + + if (!colorConfig.length) { + return null; + } + + return ( +