├── .eslintrc.cjs
├── .github
    └── workflows
    │   ├── deploy.yml
    │   └── pr-check.yml
├── .gitignore
├── .nojekyll
├── 404.html
├── README.md
├── _config.yml
├── bun.lockb
├── components.json
├── cover.jpeg
├── index.html
├── package.json
├── postcss.config.js
├── public
    └── favicon.png
├── samplebaseline.json
├── src
    ├── App.css
    ├── App.tsx
    ├── BenchmarkTable.tsx
    ├── CompareChart.tsx
    ├── assets
    │   ├── github-mark.svg
    │   ├── github-mark.tsx
    │   └── react.svg
    ├── components
    │   ├── theme-provider.tsx
    │   └── ui
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   ├── chart.tsx
    │   │   ├── command.tsx
    │   │   ├── dialog.tsx
    │   │   ├── dropdown-menu.tsx
    │   │   ├── form.tsx
    │   │   ├── input.tsx
    │   │   ├── label.tsx
    │   │   ├── popover.tsx
    │   │   ├── select.tsx
    │   │   ├── table.tsx
    │   │   ├── tabs.tsx
    │   │   └── textarea.tsx
    ├── index.css
    ├── lib
    │   └── utils.ts
    ├── main.tsx
    ├── mainComponent.tsx
    ├── page.tsx
    ├── types
    │   ├── benchmark.ts
    │   └── filters.ts
    ├── ui
    │   ├── Compare.tsx
    │   ├── Filters.tsx
    │   ├── mode-toggle.tsx
    │   ├── shell.tsx
    │   ├── theme-toggle.tsx
    │   └── upload.tsx
    ├── utils
    │   └── benchmarkCompare.ts
    └── vite-env.d.ts
├── tailwind.config.js
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts


/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:@typescript-eslint/recommended',
 7 |     'plugin:react-hooks/recommended',
 8 |   ],
 9 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
10 |   parser: '@typescript-eslint/parser',
11 |   plugins: ['react-refresh'],
12 |   rules: {
13 |     'react-refresh/only-export-components': [
14 |       'warn',
15 |       { allowConstantExport: true },
16 |     ],
17 |   },
18 | }
19 | 


--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy static content to Pages
 2 | 
 3 | on:
 4 |   # Runs on pushes targeting the default branch
 5 |   push:
 6 |     branches: ['main']
 7 | 
 8 |   # Allows you to run this workflow manually from the Actions tab
 9 |   workflow_dispatch:
10 | 
11 | # Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
12 | permissions:
13 |   contents: read
14 |   pages: write
15 |   id-token: write
16 | 
17 | # Allow one concurrent deployment
18 | concurrency:
19 |   group: 'pages'
20 |   cancel-in-progress: true
21 | 
22 | jobs:
23 |   # Single deploy job since we're just deploying
24 |   deploy:
25 |     environment:
26 |       name: github-pages
27 |       url: ${{ steps.deployment.outputs.page_url }}
28 |     runs-on: ubuntu-latest
29 |     steps:
30 |       - name: Checkout
31 |         uses: actions/checkout@v4
32 |       - name: Set up Bun
33 |         uses: oven-sh/setup-bun@v2
34 |       - name: Install dependencies
35 |         run: bun install --frozen-lockfile
36 |       - name: Build
37 |         run: npm run build
38 |       - name: Setup Pages
39 |         uses: actions/configure-pages@v4
40 |       - name: Upload artifact
41 |         uses: actions/upload-pages-artifact@v3
42 |         with:
43 |           # Upload dist folder
44 |           path: './dist'
45 |       - name: Deploy to GitHub Pages
46 |         id: deployment
47 |         uses: actions/deploy-pages@v4
48 | 


--------------------------------------------------------------------------------
/.github/workflows/pr-check.yml:
--------------------------------------------------------------------------------
 1 | name: PR Check
 2 | 
 3 | on:
 4 |   # Runs on pushes targeting the default branch
 5 |   pull_request:
 6 |     branches: ['main']
 7 | 
 8 | 
 9 | # Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
10 | permissions:
11 |   contents: read
12 | 
13 | # Allow one concurrent deployment
14 | concurrency:
15 |   group: 'pr-check'
16 |   cancel-in-progress: false
17 | 
18 | jobs:
19 |   # Single deploy job since we're just deploying
20 |   build:
21 |     runs-on: ubuntu-latest
22 |     steps:
23 |       - name: Checkout
24 |         uses: actions/checkout@v4
25 |       - name: Set up Bun
26 |         uses: oven-sh/setup-bun@v2
27 |       - name: Install dependencies
28 |         run: bun install --frozen-lockfile
29 |       - name: Build
30 |         run: npm run build
31 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/.nojekyll:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Single Page Apps for GitHub Pages</title>
 6 |     <script type="text/javascript">
 7 |       // Single Page Apps for GitHub Pages
 8 |       // MIT License
 9 |       // https://github.com/rafgraph/spa-github-pages
10 |       // This script takes the current url and converts the path and query
11 |       // string into just a query string, and then redirects the browser
12 |       // to the new url with only a query string and hash fragment,
13 |       // e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
14 |       // https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
15 |       // Note: this 404.html file must be at least 512 bytes for it to work
16 |       // with Internet Explorer (it is currently > 512 bytes)
17 | 
18 |       // If you're creating a Project Pages site and NOT using a custom domain,
19 |       // then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
20 |       // This way the code will only replace the route part of the path, and not
21 |       // the real directory in which the app resides, for example:
22 |       // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
23 |       // https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
24 |       // Otherwise, leave pathSegmentsToKeep as 0.
25 |       var pathSegmentsToKeep = 1;
26 | 
27 |       var l = window.location;
28 |       l.replace(
29 |         l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
30 |         l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
31 |         l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
32 |         (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
33 |         l.hash
34 |       );
35 | 
36 |     </script>
37 |   </head>
38 |   <body>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![](cover.jpeg)
 2 | 
 3 | # BenchMarkify 📈
 4 | <a href="https://twitter.com/yogeshpaliyal" target="_blank">
 5 | <img alt="Twitter: yogeshpaliyal" src="https://img.shields.io/twitter/follow/yogeshpaliyal.svg?style=social" />
 6 | </a>  
 7 | 
 8 | > Benchmarkify is a web app that helps you visualize and analyze Android macrobenchmark results stored in JSON format.
 9 | 
10 | ### ✨ Demo
11 | 
12 | ![image](https://github.com/user-attachments/assets/2bff6b8c-e5c5-43e3-85b8-1dbfe7560023)
13 | 
14 | 
15 | ## 🧰 Features
16 | 1. Select Select 1 or multiple benchmark results.
17 | 2. Select any metric.
18 | 3. Compare Benchmarks in Charts or tables.
19 | 4. Store Benchmarks locally to use later.
20 | 5. Share the results with team. (we do not store any data).
21 | 
22 | ## ⌨️ Usage
23 | 
24 | 1. Select the file from `<benchmarkModule>/build/outputs/<baseline-result>.json`
25 | 2. Paste in BenchMarkify.
26 | 3. Generate clear and informative charts and tables.
27 | 
28 | 
29 | 
30 | 
31 | ## ✍️ Author
32 | 
33 | 👤 **Yogesh Choudhary Paliyal**
34 | 
35 | * Twitter: <a href="https://twitter.com/yogeshpaliyal" target="_blank">@yogeshpaliyal</a>
36 | * Email: yogeshpaliyal.foss@gmail.com
37 | 
38 | Feel free to ping me 😉
39 | 
40 | ## 🤝 Contributing
41 | 
42 | Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any
43 | contributions you make are **greatly appreciated**.
44 | 
45 | 1. Open an issue first to discuss what you would like to change.
46 | 1. Fork the Project
47 | 1. Create your feature branch (`git checkout -b feature/amazing-feature`)
48 | 1. Commit your changes (`git commit -m 'Add some amazing feature'`)
49 | 1. Push to the branch (`git push origin feature/amazing-feature`)
50 | 1. Open a pull request
51 | 
52 | Please make sure to update tests as appropriate.
53 | 
54 | ## ❤ Show your support
55 | 
56 | Give a ⭐️ if this project helped you!
57 | 
58 | <a href="https://www.patreon.com/yogeshpaliyal">
59 |   <img alt="Patron Link" src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="160"/>
60 | </a>
61 | 
62 | <a href="https://www.buymeacoffee.com/yogeshpaliyal" target="_blank">
63 |     <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" width="160">
64 | </a>
65 | 
66 | <a href="https://www.paypal.me/yogeshpaliyal" target="_blank">
67 |     <img src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" alt="Donation" width="160">
68 | </a>
69 | 
70 | 
71 | ## 📝 License
72 | 
73 | ```
74 | Copyright © 2024 - Yogesh Choudhary Paliyal
75 | 
76 | Licensed under the Apache License, Version 2.0 (the "License");
77 | you may not use this file except in compliance with the License.
78 | You may obtain a copy of the License at
79 | 
80 |    http://www.apache.org/licenses/LICENSE-2.0
81 | 
82 | Unless required by applicable law or agreed to in writing, software
83 | distributed under the License is distributed on an "AS IS" BASIS,
84 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
85 | See the License for the specific language governing permissions and
86 | limitations under the License.
87 | ```
88 | 
89 | _This README was generated by [readgen](https://github.com/theapache64/readgen)_ ❤
90 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | remote_theme: pages-themes/cayman@v0.2.0
2 | plugins:
3 | - jekyll-remote-theme # add this line to the plugins list if you already have one
4 | 


--------------------------------------------------------------------------------
/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yogeshpaliyal/benchmarkify/8f25a115d41cb4b5cbc475c0c0ad1cfb399a8a95/bun.lockb


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": false,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "src/App.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/cover.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yogeshpaliyal/benchmarkify/8f25a115d41cb4b5cbc475c0c0ad1cfb399a8a95/cover.jpeg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 | <!-- Google tag (gtag.js) -->
 5 |   <!-- Start Single Page Apps for GitHub Pages -->
 6 |   <script type="text/javascript">
 7 |     // Single Page Apps for GitHub Pages
 8 |     // MIT License
 9 |     // https://github.com/rafgraph/spa-github-pages
10 |     // This script checks to see if a redirect is present in the query string,
11 |     // converts it back into the correct url and adds it to the
12 |     // browser's history using window.history.replaceState(...),
13 |     // which won't cause the browser to attempt to load the new url.
14 |     // When the single page app is loaded further down in this file,
15 |     // the correct url will be waiting in the browser's history for
16 |     // the single page app to route accordingly.
17 |     (function(l) {
18 |       if (l.search[1] === '/' ) {
19 |         var decoded = l.search.slice(1).split('&').map(function(s) { 
20 |           return s.replace(/~and~/g, '&')
21 |         }).join('?');
22 |         window.history.replaceState(null, null,
23 |             l.pathname.slice(0, -1) + decoded + l.hash
24 |         );
25 |       }
26 |     }(window.location))
27 |   </script>
28 |   <!-- End Single Page Apps for GitHub Pages -->
29 | <script async src="https://www.googletagmanager.com/gtag/js?id=G-LL6NJ9HZGY"></script>
30 | <script>
31 |   window.dataLayer = window.dataLayer || [];
32 |   function gtag(){dataLayer.push(arguments);}
33 |   gtag('js', new Date());
34 | 
35 |   gtag('config', 'G-LL6NJ9HZGY');
36 | </script>
37 |     <meta charset="UTF-8" />
38 |     <link rel="shortcut icon" href="/favicon.png" type="image/png">
39 |     <link rel="icon" href="/favicon.png" type="image/png">
40 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
41 |     <title>BenchMarkify</title>
42 |   </head>
43 |   <body>
44 |     <div id="root"></div>
45 |     <script type="module" src="/src/main.tsx"></script>
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "benchmark-charts",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "homepage": "https://github.yogeshpaliyal.com/benchmarkify/#",
 7 |   "scripts": {
 8 |     "dev": "vite",
 9 |     "build": "tsc -b && vite build",
10 |     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
11 |     "preview": "vite preview"
12 |   },
13 |   "dependencies": {
14 |     "@hookform/resolvers": "^3.9.0",
15 |     "@phosphor-icons/react": "^2.1.7",
16 |     "@radix-ui/react-dialog": "^1.1.2",
17 |     "@radix-ui/react-dropdown-menu": "^2.1.1",
18 |     "@radix-ui/react-label": "^2.1.0",
19 |     "@radix-ui/react-popover": "^1.1.2",
20 |     "@radix-ui/react-select": "^2.1.1",
21 |     "@radix-ui/react-slot": "^1.1.0",
22 |     "@radix-ui/react-tabs": "^1.1.0",
23 |     "babel-runtime": "^6.26.0",
24 |     "class-variance-authority": "^0.7.0",
25 |     "clsx": "^2.1.1",
26 |     "cmdk": "1.0.0",
27 |     "install": "^0.13.0",
28 |     "lucide-react": "^0.408.0",
29 |     "mathjs": "^14.3.1",
30 |     "pandas-js": "^0.2.4",
31 |     "react": "^18.3.1",
32 |     "react-dom": "^18.3.1",
33 |     "react-hook-form": "^7.52.1",
34 |     "react-router-dom": "^6.25.1",
35 |     "recharts": "^2.12.7",
36 |     "tailwind-merge": "^2.4.0",
37 |     "tailwindcss-animate": "^1.0.7",
38 |     "zod": "^3.23.8"
39 |   },
40 |   "devDependencies": {
41 |     "@types/node": "^20.14.11",
42 |     "@types/react": "^18.3.3",
43 |     "@types/react-dom": "^18.3.0",
44 |     "@typescript-eslint/eslint-plugin": "^7.15.0",
45 |     "@typescript-eslint/parser": "^7.15.0",
46 |     "@vitejs/plugin-react": "^4.3.1",
47 |     "autoprefixer": "^10.4.19",
48 |     "eslint": "^8.57.0",
49 |     "eslint-plugin-react-hooks": "^4.6.2",
50 |     "eslint-plugin-react-refresh": "^0.4.7",
51 |     "postcss": "^8.4.39",
52 |     "tailwindcss": "^3.4.6",
53 |     "typescript": "^5.2.2",
54 |     "vite": "^5.3.4"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yogeshpaliyal/benchmarkify/8f25a115d41cb4b5cbc475c0c0ad1cfb399a8a95/public/favicon.png


--------------------------------------------------------------------------------
/samplebaseline.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "context": {
  3 |         "build": {
  4 |             "brand": "Jio",
  5 |             "device": "TEST123",
  6 |             "fingerprint": "TEST123",
  7 |             "model": "LS1542QWN",
  8 |             "version": {
  9 |                 "sdk": 30
 10 |             }
 11 |         },
 12 |         "cpuCoreCount": 4,
 13 |         "cpuLocked": false,
 14 |         "cpuMaxFreqHz": 1305600000,
 15 |         "memTotalBytes": 1972162560,
 16 |         "sustainedPerformanceModeEnabled": false
 17 |     },
 18 |     "benchmarks": [
 19 |         {
 20 |             "name": "startupCompilationBaselineProfiles",
 21 |             "params": {},
 22 |             "className": "com.example.benchmark.StartupBenchmarks",
 23 |             "totalRunTimeNs": 155690886242,
 24 |             "metrics": {
 25 |                 "timeToInitialDisplayMs": {
 26 |                     "minimum": 1096.115833,
 27 |                     "maximum": 1414.014947,
 28 |                     "median": 1161.0081765,
 29 |                     "runs": [
 30 |                         1414.014947,
 31 |                         1133.693229,
 32 |                         1170.526197,
 33 |                         1281.624479,
 34 |                         1101.296875,
 35 |                         1128.309427,
 36 |                         1151.490156,
 37 |                         1172.742812,
 38 |                         1346.225885,
 39 |                         1096.115833
 40 |                     ]
 41 |                 }
 42 |             },
 43 |             "sampledMetrics": {},
 44 |             "warmupIterations": 0,
 45 |             "repeatIterations": 10,
 46 |             "thermalThrottleSleepSeconds": 0
 47 |         },
 48 |         {
 49 |             "name": "startupCompilationNone",
 50 |             "params": {},
 51 |             "className": "com.example.benchmark.StartupBenchmarks",
 52 |             "totalRunTimeNs": 129921305159,
 53 |             "metrics": {
 54 |                 "timeToInitialDisplayMs": {
 55 |                     "minimum": 1489.099687,
 56 |                     "maximum": 2170.634582,
 57 |                     "median": 1685.6467699999998,
 58 |                     "runs": [
 59 |                         2170.634582,
 60 |                         1556.952812,
 61 |                         1489.099687,
 62 |                         1917.608541,
 63 |                         1519.933229,
 64 |                         1568.782031,
 65 |                         1513.596249,
 66 |                         1877.662291,
 67 |                         1847.907603,
 68 |                         1802.511509
 69 |                     ]
 70 |                 }
 71 |             },
 72 |             "sampledMetrics": {},
 73 |             "warmupIterations": 0,
 74 |             "repeatIterations": 10,
 75 |             "thermalThrottleSleepSeconds": 0
 76 |         },
 77 |         {
 78 |             "name": "startupCompilationNone2",
 79 |             "params": {},
 80 |             "className": "com.example.benchmark.StartupBenchmarks",
 81 |             "totalRunTimeNs": 129921305159,
 82 |             "metrics": {
 83 |                 "timeToInitialDisplayMs": {
 84 |                     "minimum": 1489.099687,
 85 |                     "maximum": 2170.634582,
 86 |                     "median": 1685.6467699999998,
 87 |                     "runs": [
 88 |                         2170.634582,
 89 |                         1556.952812,
 90 |                         1489.099687,
 91 |                         1917.608541,
 92 |                         1519.933229,
 93 |                         1568.782031,
 94 |                         1513.596249,
 95 |                         1877.662291,
 96 |                         1847.907603,
 97 |                         1802.511509
 98 |                     ]
 99 |                 }
100 |             },
101 |             "sampledMetrics": {},
102 |             "warmupIterations": 0,
103 |             "repeatIterations": 10,
104 |             "thermalThrottleSleepSeconds": 0
105 |         }
106 |     ]
107 | }


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @layer base {
  6 |   :root {
  7 |     --background: 0 0% 100%;
  8 |     --foreground: 240 10% 3.9%;
  9 |     --card: 0 0% 100%;
 10 |     --card-foreground: 240 10% 3.9%;
 11 |     --popover: 0 0% 100%;
 12 |     --popover-foreground: 240 10% 3.9%;
 13 |     --primary: 240 5.9% 10%;
 14 |     --primary-foreground: 0 0% 98%;
 15 |     --secondary: 240 4.8% 95.9%;
 16 |     --secondary-foreground: 240 5.9% 10%;
 17 |     --muted: 240 4.8% 95.9%;
 18 |     --muted-foreground: 240 3.8% 46.1%;
 19 |     --accent: 240 4.8% 95.9%;
 20 |     --accent-foreground: 240 5.9% 10%;
 21 |     --destructive: 0 72.22% 50.59%;
 22 |     --destructive-foreground: 0 0% 98%;
 23 |     --border: 240 5.9% 90%;
 24 |     --input: 240 5.9% 90%;
 25 |     --ring: 240 5% 64.9%;
 26 |     --radius: 0.5rem;
 27 | 
 28 |     --chart-1: 12 76% 61%;
 29 |     --chart-2: 173 58% 39%;
 30 |     --chart-3: 197 37% 24%;
 31 |     --chart-4: 43 74% 66%;
 32 |     --chart-5: 27 87% 67%;
 33 |   }
 34 | 
 35 |   .dark {
 36 |     --background: 240 10% 3.9%;
 37 |     --foreground: 0 0% 98%;
 38 |     --card: 240 10% 3.9%;
 39 |     --card-foreground: 0 0% 98%;
 40 |     --popover: 240 10% 3.9%;
 41 |     --popover-foreground: 0 0% 98%;
 42 |     --primary: 0 0% 98%;
 43 |     --primary-foreground: 240 5.9% 10%;
 44 |     --secondary: 240 3.7% 15.9%;
 45 |     --secondary-foreground: 0 0% 98%;
 46 |     --muted: 240 3.7% 15.9%;
 47 |     --muted-foreground: 240 5% 64.9%;
 48 |     --accent: 240 3.7% 15.9%;
 49 |     --accent-foreground: 0 0% 98%;
 50 |     --destructive: 0 62.8% 30.6%;
 51 |     --destructive-foreground: 0 85.7% 97.3%;
 52 |     --border: 240 3.7% 15.9%;
 53 |     --input: 240 3.7% 15.9%;
 54 |     --ring: 240 4.9% 83.9%;
 55 | 
 56 |     --chart-1: 220 70% 50%;
 57 |     --chart-2: 160 60% 45%;
 58 |     --chart-3: 30 80% 55%;
 59 |     --chart-4: 280 65% 60%;
 60 |     --chart-5: 340 75% 55%;
 61 |   }
 62 | }
 63 | 
 64 | @layer base {
 65 |   * {
 66 |     @apply border-border;
 67 |   }
 68 |   html {
 69 |     @apply scroll-smooth;
 70 |   }
 71 |   body {
 72 |     @apply bg-background text-foreground;
 73 |     /* font-feature-settings: "rlig" 1, "calt" 1; */
 74 |     font-synthesis-weight: none;
 75 |     text-rendering: optimizeLegibility;
 76 |   }
 77 | }
 78 | 
 79 | @layer utilities {
 80 |   .step {
 81 |     counter-increment: step;
 82 |   }
 83 | 
 84 |   .step:before {
 85 |     @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
 86 |     @apply ml-[-50px] mt-[-4px];
 87 |     content: counter(step);
 88 |   }
 89 | 
 90 |   .chunk-container {
 91 |     @apply shadow-none;
 92 |   }
 93 | 
 94 |   .chunk-container::after {
 95 |     content: "";
 96 |     @apply absolute -inset-4 shadow-xl rounded-xl border;
 97 |   }
 98 | }
 99 | 
100 | @media (max-width: 640px) {
101 |   .container {
102 |     @apply px-4;
103 |   }
104 | }


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from "react";
  2 | import "./App.css";
  3 | import { CompareChart } from "./CompareChart";
  4 | import { Textarea } from "@/components/ui/textarea";
  5 | import { Benchmark, calculateAverage } from "./types/benchmark";
  6 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
  7 | import { BenchmarkTable } from "./BenchmarkTable";
  8 | import sampleBenchmarks from "../samplebaseline.json";
  9 | import { FiltersSelector } from "./ui/Filters";
 10 | import { Filters } from "./types/filters";
 11 | import { Button } from "./components/ui/button";
 12 | import {
 13 |   Select,
 14 |   SelectContent,
 15 |   SelectGroup,
 16 |   SelectItem,
 17 |   SelectLabel,
 18 |   SelectTrigger,
 19 |   SelectValue,
 20 | } from "@/components/ui/select";
 21 | import { Compare } from "./ui/Compare";
 22 | 
 23 | function App({ json, resetJson, filters }: { json: string | undefined, resetJson: () => void, filters: Filters | undefined }) {
 24 |   const [benchmarks, setBenchmarks] = useState<Benchmark[] | undefined>([]);
 25 | 
 26 |   const [rawInput, setRawInput] = useState<string | undefined>(json);
 27 |   const [filter, setFilter] = useState<Filters | undefined>(filters);
 28 |   const [selectedTab, setSelectedTab] = useState<string | undefined>("charts");
 29 | 
 30 |   const [localBenchmarks, setLocalBenchmarks] = useState<
 31 |     Record<string, string | undefined> | undefined
 32 |   >();
 33 | 
 34 |   useEffect(() => {
 35 |     const localBenchMarksStr = localStorage.getItem("benchmarks");
 36 |     if (localBenchMarksStr) {
 37 |       try {
 38 |         setLocalBenchmarks(JSON.parse(localBenchMarksStr));
 39 |       } catch (e) {
 40 |         console.error(e);
 41 |       }
 42 |     }
 43 |   });
 44 | 
 45 |   useEffect(() => {
 46 |     try {
 47 |       const value = JSON.parse(rawInput ?? "");
 48 |       const benchmarksWithAverage = value.benchmarks.map(
 49 |         (benchmark: Benchmark) => {
 50 |           const metricsWithAverage = Object.keys(benchmark.metrics).reduce(
 51 |             (acc, key) => {
 52 |               const metric = benchmark.metrics[key];
 53 |               const average = calculateAverage(metric.runs);
 54 |               acc[key] = { ...metric, average };
 55 |               return acc;
 56 |             },
 57 |             {} as Record<string, any>
 58 |           );
 59 |           return { ...benchmark, metrics: metricsWithAverage };
 60 |         }
 61 |       );
 62 |       setBenchmarks(benchmarksWithAverage);
 63 |     } catch (e) {
 64 |       setBenchmarks([]);
 65 |       console.error(e);
 66 |     }
 67 |   }, [rawInput]);
 68 | 
 69 |   const [filteredBenchmarks, setFilteredBenchmarks] = useState<
 70 |     Benchmark[] | undefined
 71 |   >([]);
 72 | 
 73 |   useEffect(() => {
 74 |     setFilteredBenchmarks(
 75 |       benchmarks?.filter((benchmark) =>
 76 |         filter?.benchmarkNames.includes(benchmark.name)
 77 |       )
 78 |     );
 79 |   }, [filter, benchmarks]);
 80 | 
 81 |   const validateJson = (json: any) => {
 82 |     const sampleJson = sampleBenchmarks;
 83 |     const isValidContext =
 84 |       JSON.stringify(Object.keys(json.context)) ===
 85 |       JSON.stringify(Object.keys(sampleJson.context));
 86 |     const isValidBenchmarks = json.benchmarks.every((benchmark: any) => {
 87 |       return (
 88 |         JSON.stringify(Object.keys(benchmark)) ===
 89 |         JSON.stringify(Object.keys(sampleJson.benchmarks[0]))
 90 |       );
 91 |     });
 92 |     return isValidContext && isValidBenchmarks;
 93 |   };
 94 | 
 95 |   return (
 96 |     <div className="flex flex-col">
 97 |       <div className="lg:flex flex-row flex-1 w-full">
 98 |         <div className="flex flex-1 flex-col p-4">
 99 |           <div className="w-full flex flex-row gap-2 pb-4 max-md:flex-col">
100 |             <Select
101 |               onValueChange={(selectedItem) =>
102 |                 setRawInput(localBenchmarks?.[selectedItem])
103 |               }
104 |             >
105 |               <SelectTrigger className="md:w-[180px]">
106 |                 <SelectValue placeholder="Select Saved Benchmark" />
107 |               </SelectTrigger>
108 |               <SelectContent>
109 |                 <SelectGroup>
110 |                   <SelectLabel>Benchmarks</SelectLabel>
111 |                   {localBenchmarks &&
112 |                     Object.keys(localBenchmarks)?.map((localBenchmark) => {
113 |                       return (
114 |                         <SelectItem value={localBenchmark}>
115 |                           {localBenchmark}
116 |                         </SelectItem>
117 |                       );
118 |                     })}
119 |                 </SelectGroup>
120 |               </SelectContent>
121 |             </Select>
122 |             <div className=" flex max-sm:flex-col gap-2">
123 |               <Button
124 |                 className="max-md:flex-1"
125 |                 variant={"outline"}
126 |                 onClick={() => {
127 |                   let value = window.prompt("Save macrobenchmark profile", "");
128 |                   if (value) {
129 |                     const localBenchMarksStr =
130 |                       localStorage.getItem("benchmarks");
131 |                     let localBenchMarks: Record<string, string | undefined> =
132 |                       {};
133 |                     if (localBenchMarksStr) {
134 |                       localBenchMarks = JSON.parse(localBenchMarksStr);
135 |                     }
136 |                     localBenchMarks[value] = rawInput;
137 |                     localStorage.setItem(
138 |                       "benchmarks",
139 |                       JSON.stringify(localBenchMarks, null, 2)
140 |                     );
141 |                     setLocalBenchmarks(localBenchMarks);
142 |                   }
143 |                 }}
144 |               >
145 |                 Save
146 |               </Button>
147 |               <Button
148 |                 className="max-md:flex-1"
149 |                 variant={"outline"}
150 |                 onClick={() => setRawInput("")}
151 |               >
152 |                 Clear
153 |               </Button>
154 |             </div>
155 |           </div>
156 |           <Button
157 |             variant="outline"
158 |             className="mb-4 hover:bg-gray-200 focus:bg-gray-300"
159 |             onClick={() => resetJson()}
160 |           >
161 |             Upload JSON File
162 |           </Button>
163 |           <Textarea
164 |             className="flex-1"
165 |             value={rawInput}
166 |             placeholder="Paste Benchmark JSON here"
167 |             onChange={(e) => {
168 |               setRawInput(e.currentTarget.value);
169 |             }}
170 |           />
171 |         </div>
172 |         <div className="flex flex-[3] justify-around content-around p-4">
173 |           <div className="w-full flex flex-col">
174 |             <div className="w-full flex flex-row max-sm:flex-col justify-between">
175 |               <FiltersSelector
176 |                 benchmarks={benchmarks}
177 |                 filters={filter}
178 |                 setFilters={setFilter}
179 |               />
180 | 
181 |               <div className="flex gap-[8px] max-sm:flex-col max-lg:flex-col pb-4">
182 |                 <Compare benchmarks={benchmarks} />
183 |                 <Button
184 |                   onClick={() => {
185 |                     const url = new URL(window.location.href);
186 |                     url.searchParams.set(
187 |                       "benchmarks",
188 |                       JSON.stringify(JSON.parse(rawInput ?? ""))
189 |                     );
190 |                     url.searchParams.set(
191 |                       "filters",
192 |                       JSON.stringify(filter) ?? ""
193 |                     );
194 |                     navigator.clipboard.writeText(url.toString()).then(() => {
195 |                       console.log("New URL", url.toString());
196 |                       alert("Link copied to clipboard");
197 |                     });
198 |                   }}
199 |                 >
200 |                   {" "}
201 |                   Share{" "}
202 |                 </Button>
203 |               </div>
204 |             </div>
205 | 
206 |             <Tabs
207 |               onValueChange={setSelectedTab}
208 |               defaultValue="charts"
209 |               className="flex-1 flex flex-col"
210 |             >
211 |               <TabsList className="grid w-full grid-cols-2">
212 |                 <TabsTrigger value="charts">Charts</TabsTrigger>
213 |                 <TabsTrigger value="table">Table</TabsTrigger>
214 |               </TabsList>
215 |               {selectedTab == "charts" && (
216 |                 <TabsContent className="flex-1 flex" value="charts">
217 |                   <div className="flex-1 flex">
218 |                     <CompareChart
219 |                       filter={filter}
220 |                       benchmarks={filteredBenchmarks}
221 |                     />
222 |                   </div>
223 |                 </TabsContent>
224 |               )}
225 |               {selectedTab == "table" && (
226 |                 <TabsContent value="table" className="flex-1 flex">
227 |                   <div className="flex-1 flex flex-row overflow-hidden">
228 |                     <BenchmarkTable
229 |                       benchmarks={filteredBenchmarks}
230 |                       filters={filter}
231 |                     />
232 |                   </div>
233 |                 </TabsContent>
234 |               )}
235 |             </Tabs>
236 |           </div>
237 |         </div>
238 |       </div>
239 |     </div>
240 |   );
241 | }
242 | 
243 | export default App;
244 | 


--------------------------------------------------------------------------------
/src/BenchmarkTable.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Table,
 3 |   TableBody,
 4 |   TableCaption,
 5 |   TableCell,
 6 |   TableHead,
 7 |   TableHeader,
 8 |   TableRow,
 9 | } from "@/components/ui/table";
10 | import { Benchmark } from "./types/benchmark";
11 | import { Filters } from "./types/filters";
12 | 
13 | export function BenchmarkTable({
14 |   benchmarks,
15 |   filters
16 | }: {
17 |   benchmarks: Benchmark[] | undefined;
18 |   filters: Filters | undefined;
19 | }) {
20 | 
21 |     const tableData = benchmarks?.map((benchmark) => ({
22 |         name: benchmark.name,
23 |         minimum: filters ? benchmark.metrics[filters.metrics].minimum : 0,
24 |         median: filters ? benchmark.metrics[filters.metrics].median : 0,
25 |         maximum: filters ? benchmark.metrics[filters.metrics].maximum : 0,
26 |         average: filters ? benchmark.metrics[filters.metrics].average : 0,
27 |       })) || []
28 |     
29 | 
30 |   return (
31 |   <div className="flex-1 w-0">
32 |     <Table>
33 |     <TableHeader>
34 |       <TableRow>
35 |         <TableHead >Name</TableHead>
36 |         <TableHead>Minimum</TableHead>
37 |         <TableHead>Median</TableHead>
38 |         <TableHead >Maximum</TableHead>
39 |         <TableHead >Average</TableHead>
40 |       </TableRow>
41 |     </TableHeader>
42 |     <TableBody>
43 |       
44 |       {tableData.map((item) => (
45 |         <TableRow>
46 |          <TableCell className="font-medium">{item.name}</TableCell>
47 |          <TableCell>{item.minimum}</TableCell>
48 |          <TableCell>{item.median}</TableCell>
49 |          <TableCell>{item.maximum}</TableCell>
50 |          <TableCell>{item.average}</TableCell>
51 |          </TableRow>
52 |       ))}
53 |       
54 |     </TableBody>
55 |   </Table>
56 |   </div>);
57 | }
58 | 


--------------------------------------------------------------------------------
/src/CompareChart.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { TrendingUp } from "lucide-react";
  4 | import {
  5 |   Bar,
  6 |   BarChart,
  7 |   CartesianGrid,
  8 |   Line,
  9 |   LineChart,
 10 |   XAxis,
 11 |   YAxis,
 12 | } from "recharts";
 13 | 
 14 | import {
 15 |   Card,
 16 |   CardContent,
 17 |   CardDescription,
 18 |   CardFooter,
 19 |   CardHeader,
 20 |   CardTitle,
 21 | } from "@/components/ui/card";
 22 | import {
 23 |   ChartConfig,
 24 |   ChartContainer,
 25 |   ChartLegend,
 26 |   ChartLegendContent,
 27 |   ChartTooltip,
 28 |   ChartTooltipContent,
 29 | } from "@/components/ui/chart";
 30 | import { Benchmark } from "./types/benchmark";
 31 | import { Filters } from "./types/filters";
 32 | 
 33 | const chartConfig = {
 34 |   minimum: {
 35 |     label: "minimum",
 36 |     color: "hsl(var(--chart-1))",
 37 |   },
 38 |   median: {
 39 |     label: "median",
 40 |     color: "hsl(var(--chart-2))",
 41 |   },
 42 |   maximum: {
 43 |     label: "maximum",
 44 |     color: "hsl(var(--chart-3))",
 45 |   },
 46 |   average: {
 47 |     label: "average",
 48 |     color: "hsl(var(--chart-4))",
 49 |   },
 50 | } satisfies ChartConfig;
 51 | 
 52 | export function CompareChart({
 53 |   benchmarks,
 54 |   filter,
 55 | }: {
 56 |   benchmarks: Benchmark[] | undefined;
 57 |   filter: Filters | undefined;
 58 | }) {
 59 |   const chartData =
 60 |     benchmarks?.map((benchmark) => ({
 61 |       name: benchmark.name,
 62 |       minimum: filter ? benchmark.metrics[filter.metrics]?.minimum : 0,
 63 |       median: filter ? benchmark.metrics[filter.metrics]?.median : 0,
 64 |       maximum: filter ? benchmark.metrics[filter.metrics]?.maximum : 0,
 65 |       average: filter ? benchmark.metrics[filter.metrics]?.average : 0,
 66 |     })) || [];
 67 | 
 68 |   return (
 69 |     <Card className="flex-1 flex flex-col">
 70 |       <CardHeader>
 71 |         <CardTitle>{filter?.metrics}</CardTitle>
 72 |       </CardHeader>
 73 |       <CardContent className="flex-1 flex-row">
 74 |         <ChartContainer className="flex-1" config={chartConfig}>
 75 |           <LineChart
 76 |             accessibilityLayer
 77 |             data={chartData}
 78 |             margin={{
 79 |               left: 12,
 80 |               right: 12,
 81 |             }}
 82 |           >
 83 |             <CartesianGrid vertical={true} />
 84 |             <XAxis
 85 |               dataKey="name"
 86 |               tickLine={true}
 87 |               tickMargin={3}
 88 |               minTickGap={0}
 89 |               axisLine={false}
 90 |             />
 91 |             <YAxis
 92 |               scale={"auto"}
 93 |               dataKey="maximum"
 94 |               allowDataOverflow={false}
 95 |               axisLine={true}
 96 |             />
 97 |             <ChartTooltip
 98 |               cursor={false}
 99 |               content={<ChartTooltipContent indicator="dashed" />}
100 |             />
101 |             <Line
102 |               dataKey="minimum"
103 |               stroke="var(--color-minimum)"
104 |               strokeWidth={2}
105 |             />
106 |             <Line
107 |               dataKey="median"
108 |               stroke="var(--color-median)"
109 |               strokeWidth={2}
110 |             />
111 |             <Line
112 |               dataKey="maximum"
113 |               stroke="var(--color-maximum)"
114 |               strokeWidth={2}
115 |             />
116 |             <Line
117 |               dataKey="average"
118 |               stroke="var(--color-average)"
119 |               strokeWidth={2}
120 |             />
121 |             <ChartLegend content={<ChartLegendContent />} />
122 |           </LineChart>
123 |         </ChartContainer>
124 |       </CardContent>
125 |     </Card>
126 |   );
127 | }
128 | 


--------------------------------------------------------------------------------
/src/assets/github-mark.svg:
--------------------------------------------------------------------------------
1 | <svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#000000"/></svg>


--------------------------------------------------------------------------------
/src/assets/github-mark.tsx:
--------------------------------------------------------------------------------
 1 | import { useTheme } from "@/components/theme-provider";
 2 | 
 3 | const GithubIcon = () => {
 4 |   const currentTheme = useTheme();
 5 |   const fillColor = currentTheme.finalTheme == "dark" ? "#ffffff" : "#000000";
 6 | 
 7 |   return (
 8 |     <svg width="32" height="32"  viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
 9 |       <path
10 |         fill-rule="evenodd"
11 |         clip-rule="evenodd"
12 |         d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
13 |         fill={fillColor}
14 |       />
15 |     </svg>
16 |   );
17 | };
18 | 
19 | export default GithubIcon;
20 | 


--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext, useContext, useEffect, useState } from "react"
 2 | 
 3 | type Theme = "dark" | "light" | "system"
 4 | 
 5 | type ThemeProviderProps = {
 6 |   children: React.ReactNode
 7 |   defaultTheme?: Theme
 8 |   storageKey?: string
 9 | }
10 | 
11 | type ThemeProviderState = {
12 |   theme: Theme
13 |   finalTheme : "dark" | "light"
14 |   setTheme: (theme: Theme) => void
15 | }
16 | 
17 | const initialState: ThemeProviderState = {
18 |   theme: "system",
19 |   finalTheme: "light",
20 |   setTheme: () => null,
21 | }
22 | 
23 | const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
24 | 
25 | export function ThemeProvider({
26 |   children,
27 |   defaultTheme = "system",
28 |   storageKey = "vite-ui-theme",
29 |   ...props
30 | }: ThemeProviderProps) {
31 |   const [theme, setTheme] = useState<Theme>(
32 |     () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
33 |   )
34 |   const finalTheme = theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)")
35 |   .matches
36 |   ? "dark"
37 |   : "light" : theme
38 | 
39 |   useEffect(() => {
40 |     const root = window.document.documentElement
41 | 
42 |     root.classList.remove("light", "dark")
43 | 
44 |     if (theme === "system") {
45 |       const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
46 |         .matches
47 |         ? "dark"
48 |         : "light"
49 | 
50 |       root.classList.add(systemTheme)
51 |       return
52 |     }
53 | 
54 |     root.classList.add(theme)
55 |   }, [theme])
56 | 
57 |   const value = {
58 |     theme,
59 |     finalTheme,
60 |     setTheme: (theme: Theme) => {
61 |       localStorage.setItem(storageKey, theme)
62 |       setTheme(theme)
63 |     },
64 |   }
65 | 
66 |   return (
67 |     <ThemeProviderContext.Provider {...props} value={value}>
68 |       {children}
69 |     </ThemeProviderContext.Provider>
70 |   )
71 | }
72 | 
73 | export const useTheme = () => {
74 |   const context = useContext(ThemeProviderContext)
75 | 
76 |   if (context === undefined)
77 |     throw new Error("useTheme must be used within a ThemeProvider")
78 | 
79 |   return context
80 | }
81 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg  border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <p
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 | 


--------------------------------------------------------------------------------
/src/components/ui/chart.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as RechartsPrimitive from "recharts"
  3 | 
  4 | import { cn } from "@/lib/utils"
  5 | 
  6 | // Format: { THEME_NAME: CSS_SELECTOR }
  7 | const THEMES = { light: "", dark: ".dark" } as const
  8 | 
  9 | export type ChartConfig = {
 10 |   [k in string]: {
 11 |     label?: React.ReactNode
 12 |     icon?: React.ComponentType
 13 |   } & (
 14 |     | { color?: string; theme?: never }
 15 |     | { color?: never; theme: Record<keyof typeof THEMES, string> }
 16 |   )
 17 | }
 18 | 
 19 | type ChartContextProps = {
 20 |   config: ChartConfig
 21 | }
 22 | 
 23 | const ChartContext = React.createContext<ChartContextProps | null>(null)
 24 | 
 25 | function useChart() {
 26 |   const context = React.useContext(ChartContext)
 27 | 
 28 |   if (!context) {
 29 |     throw new Error("useChart must be used within a <ChartContainer />")
 30 |   }
 31 | 
 32 |   return context
 33 | }
 34 | 
 35 | const ChartContainer = React.forwardRef<
 36 |   HTMLDivElement,
 37 |   React.ComponentProps<"div"> & {
 38 |     config: ChartConfig
 39 |     children: React.ComponentProps<
 40 |       typeof RechartsPrimitive.ResponsiveContainer
 41 |     >["children"]
 42 |   }
 43 | >(({ id, className, children, config, ...props }, ref) => {
 44 |   const uniqueId = React.useId()
 45 |   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
 46 | 
 47 |   return (
 48 |     <ChartContext.Provider value={{ config }}>
 49 |       <div
 50 |         data-chart={chartId}
 51 |         ref={ref}
 52 |         className={cn(
 53 |           "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
 54 |           className
 55 |         )}
 56 |         {...props}
 57 |       >
 58 |         <ChartStyle id={chartId} config={config} />
 59 |         <RechartsPrimitive.ResponsiveContainer>
 60 |           {children}
 61 |         </RechartsPrimitive.ResponsiveContainer>
 62 |       </div>
 63 |     </ChartContext.Provider>
 64 |   )
 65 | })
 66 | ChartContainer.displayName = "Chart"
 67 | 
 68 | const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
 69 |   const colorConfig = Object.entries(config).filter(
 70 |     ([_, config]) => config.theme || config.color
 71 |   )
 72 | 
 73 |   if (!colorConfig.length) {
 74 |     return null
 75 |   }
 76 | 
 77 |   return (
 78 |     <style
 79 |       dangerouslySetInnerHTML={{
 80 |         __html: Object.entries(THEMES)
 81 |           .map(
 82 |             ([theme, prefix]) => `
 83 | ${prefix} [data-chart=${id}] {
 84 | ${colorConfig
 85 |   .map(([key, itemConfig]) => {
 86 |     const color =
 87 |       itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
 88 |       itemConfig.color
 89 |     return color ? `  --color-${key}: ${color};` : null
 90 |   })
 91 |   .join("\n")}
 92 | }
 93 | `
 94 |           )
 95 |           .join("\n"),
 96 |       }}
 97 |     />
 98 |   )
 99 | }
100 | 
101 | const ChartTooltip = RechartsPrimitive.Tooltip
102 | 
103 | const ChartTooltipContent = React.forwardRef<
104 |   HTMLDivElement,
105 |   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
106 |     React.ComponentProps<"div"> & {
107 |       hideLabel?: boolean
108 |       hideIndicator?: boolean
109 |       indicator?: "line" | "dot" | "dashed"
110 |       nameKey?: string
111 |       labelKey?: string
112 |     }
113 | >(
114 |   (
115 |     {
116 |       active,
117 |       payload,
118 |       className,
119 |       indicator = "dot",
120 |       hideLabel = false,
121 |       hideIndicator = false,
122 |       label,
123 |       labelFormatter,
124 |       labelClassName,
125 |       formatter,
126 |       color,
127 |       nameKey,
128 |       labelKey,
129 |     },
130 |     ref
131 |   ) => {
132 |     const { config } = useChart()
133 | 
134 |     const tooltipLabel = React.useMemo(() => {
135 |       if (hideLabel || !payload?.length) {
136 |         return null
137 |       }
138 | 
139 |       const [item] = payload
140 |       const key = `${labelKey || item.dataKey || item.name || "value"}`
141 |       const itemConfig = getPayloadConfigFromPayload(config, item, key)
142 |       const value =
143 |         !labelKey && typeof label === "string"
144 |           ? config[label as keyof typeof config]?.label || label
145 |           : itemConfig?.label
146 | 
147 |       if (labelFormatter) {
148 |         return (
149 |           <div className={cn("font-medium", labelClassName)}>
150 |             {labelFormatter(value, payload)}
151 |           </div>
152 |         )
153 |       }
154 | 
155 |       if (!value) {
156 |         return null
157 |       }
158 | 
159 |       return <div className={cn("font-medium", labelClassName)}>{value}</div>
160 |     }, [
161 |       label,
162 |       labelFormatter,
163 |       payload,
164 |       hideLabel,
165 |       labelClassName,
166 |       config,
167 |       labelKey,
168 |     ])
169 | 
170 |     if (!active || !payload?.length) {
171 |       return null
172 |     }
173 | 
174 |     const nestLabel = payload.length === 1 && indicator !== "dot"
175 | 
176 |     return (
177 |       <div
178 |         ref={ref}
179 |         className={cn(
180 |           "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
181 |           className
182 |         )}
183 |       >
184 |         {!nestLabel ? tooltipLabel : null}
185 |         <div className="grid gap-1.5">
186 |           {payload.map((item, index) => {
187 |             const key = `${nameKey || item.name || item.dataKey || "value"}`
188 |             const itemConfig = getPayloadConfigFromPayload(config, item, key)
189 |             const indicatorColor = color || item.payload.fill || item.color
190 | 
191 |             return (
192 |               <div
193 |                 key={item.dataKey}
194 |                 className={cn(
195 |                   "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
196 |                   indicator === "dot" && "items-center"
197 |                 )}
198 |               >
199 |                 {formatter && item?.value !== undefined && item.name ? (
200 |                   formatter(item.value, item.name, item, index, item.payload)
201 |                 ) : (
202 |                   <>
203 |                     {itemConfig?.icon ? (
204 |                       <itemConfig.icon />
205 |                     ) : (
206 |                       !hideIndicator && (
207 |                         <div
208 |                           className={cn(
209 |                             "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
210 |                             {
211 |                               "h-2.5 w-2.5": indicator === "dot",
212 |                               "w-1": indicator === "line",
213 |                               "w-0 border-[1.5px] border-dashed bg-transparent":
214 |                                 indicator === "dashed",
215 |                               "my-0.5": nestLabel && indicator === "dashed",
216 |                             }
217 |                           )}
218 |                           style={
219 |                             {
220 |                               "--color-bg": indicatorColor,
221 |                               "--color-border": indicatorColor,
222 |                             } as React.CSSProperties
223 |                           }
224 |                         />
225 |                       )
226 |                     )}
227 |                     <div
228 |                       className={cn(
229 |                         "flex flex-1 justify-between leading-none",
230 |                         nestLabel ? "items-end" : "items-center"
231 |                       )}
232 |                     >
233 |                       <div className="grid gap-1.5">
234 |                         {nestLabel ? tooltipLabel : null}
235 |                         <span className="text-muted-foreground">
236 |                           {itemConfig?.label || item.name}
237 |                         </span>
238 |                       </div>
239 |                       {item.value && (
240 |                         <span className="font-mono font-medium tabular-nums text-foreground">
241 |                           {item.value.toLocaleString()}
242 |                         </span>
243 |                       )}
244 |                     </div>
245 |                   </>
246 |                 )}
247 |               </div>
248 |             )
249 |           })}
250 |         </div>
251 |       </div>
252 |     )
253 |   }
254 | )
255 | ChartTooltipContent.displayName = "ChartTooltip"
256 | 
257 | const ChartLegend = RechartsPrimitive.Legend
258 | 
259 | const ChartLegendContent = React.forwardRef<
260 |   HTMLDivElement,
261 |   React.ComponentProps<"div"> &
262 |     Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
263 |       hideIcon?: boolean
264 |       nameKey?: string
265 |     }
266 | >(
267 |   (
268 |     { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
269 |     ref
270 |   ) => {
271 |     const { config } = useChart()
272 | 
273 |     if (!payload?.length) {
274 |       return null
275 |     }
276 | 
277 |     return (
278 |       <div
279 |         ref={ref}
280 |         className={cn(
281 |           "flex items-center justify-center gap-4",
282 |           verticalAlign === "top" ? "pb-3" : "pt-3",
283 |           className
284 |         )}
285 |       >
286 |         {payload.map((item) => {
287 |           const key = `${nameKey || item.dataKey || "value"}`
288 |           const itemConfig = getPayloadConfigFromPayload(config, item, key)
289 | 
290 |           return (
291 |             <div
292 |               key={item.value}
293 |               className={cn(
294 |                 "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
295 |               )}
296 |             >
297 |               {itemConfig?.icon && !hideIcon ? (
298 |                 <itemConfig.icon />
299 |               ) : (
300 |                 <div
301 |                   className="h-2 w-2 shrink-0 rounded-[2px]"
302 |                   style={{
303 |                     backgroundColor: item.color,
304 |                   }}
305 |                 />
306 |               )}
307 |               {itemConfig?.label}
308 |             </div>
309 |           )
310 |         })}
311 |       </div>
312 |     )
313 |   }
314 | )
315 | ChartLegendContent.displayName = "ChartLegend"
316 | 
317 | // Helper to extract item config from a payload.
318 | function getPayloadConfigFromPayload(
319 |   config: ChartConfig,
320 |   payload: unknown,
321 |   key: string
322 | ) {
323 |   if (typeof payload !== "object" || payload === null) {
324 |     return undefined
325 |   }
326 | 
327 |   const payloadPayload =
328 |     "payload" in payload &&
329 |     typeof payload.payload === "object" &&
330 |     payload.payload !== null
331 |       ? payload.payload
332 |       : undefined
333 | 
334 |   let configLabelKey: string = key
335 | 
336 |   if (
337 |     key in payload &&
338 |     typeof payload[key as keyof typeof payload] === "string"
339 |   ) {
340 |     configLabelKey = payload[key as keyof typeof payload] as string
341 |   } else if (
342 |     payloadPayload &&
343 |     key in payloadPayload &&
344 |     typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
345 |   ) {
346 |     configLabelKey = payloadPayload[
347 |       key as keyof typeof payloadPayload
348 |     ] as string
349 |   }
350 | 
351 |   return configLabelKey in config
352 |     ? config[configLabelKey]
353 |     : config[key as keyof typeof config]
354 | }
355 | 
356 | export {
357 |   ChartContainer,
358 |   ChartTooltip,
359 |   ChartTooltipContent,
360 |   ChartLegend,
361 |   ChartLegendContent,
362 |   ChartStyle,
363 | }
364 | 


--------------------------------------------------------------------------------
/src/components/ui/command.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { type DialogProps } from "@radix-ui/react-dialog"
  3 | import { Command as CommandPrimitive } from "cmdk"
  4 | import { Search } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | import { Dialog, DialogContent } from "@/components/ui/dialog"
  8 | 
  9 | const Command = React.forwardRef<
 10 |   React.ElementRef<typeof CommandPrimitive>,
 11 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive>
 12 | >(({ className, ...props }, ref) => (
 13 |   <CommandPrimitive
 14 |     ref={ref}
 15 |     className={cn(
 16 |       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 17 |       className
 18 |     )}
 19 |     {...props}
 20 |   />
 21 | ))
 22 | Command.displayName = CommandPrimitive.displayName
 23 | 
 24 | interface CommandDialogProps extends DialogProps {}
 25 | 
 26 | const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 27 |   return (
 28 |     <Dialog {...props}>
 29 |       <DialogContent className="overflow-hidden p-0 shadow-lg">
 30 |         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 31 |           {children}
 32 |         </Command>
 33 |       </DialogContent>
 34 |     </Dialog>
 35 |   )
 36 | }
 37 | 
 38 | const CommandInput = React.forwardRef<
 39 |   React.ElementRef<typeof CommandPrimitive.Input>,
 40 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 41 | >(({ className, ...props }, ref) => (
 42 |   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
 43 |     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
 44 |     <CommandPrimitive.Input
 45 |       ref={ref}
 46 |       className={cn(
 47 |         "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 48 |         className
 49 |       )}
 50 |       {...props}
 51 |     />
 52 |   </div>
 53 | ))
 54 | 
 55 | CommandInput.displayName = CommandPrimitive.Input.displayName
 56 | 
 57 | const CommandList = React.forwardRef<
 58 |   React.ElementRef<typeof CommandPrimitive.List>,
 59 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 60 | >(({ className, ...props }, ref) => (
 61 |   <CommandPrimitive.List
 62 |     ref={ref}
 63 |     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
 64 |     {...props}
 65 |   />
 66 | ))
 67 | 
 68 | CommandList.displayName = CommandPrimitive.List.displayName
 69 | 
 70 | const CommandEmpty = React.forwardRef<
 71 |   React.ElementRef<typeof CommandPrimitive.Empty>,
 72 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 73 | >((props, ref) => (
 74 |   <CommandPrimitive.Empty
 75 |     ref={ref}
 76 |     className="py-6 text-center text-sm"
 77 |     {...props}
 78 |   />
 79 | ))
 80 | 
 81 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
 82 | 
 83 | const CommandGroup = React.forwardRef<
 84 |   React.ElementRef<typeof CommandPrimitive.Group>,
 85 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 86 | >(({ className, ...props }, ref) => (
 87 |   <CommandPrimitive.Group
 88 |     ref={ref}
 89 |     className={cn(
 90 |       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
 91 |       className
 92 |     )}
 93 |     {...props}
 94 |   />
 95 | ))
 96 | 
 97 | CommandGroup.displayName = CommandPrimitive.Group.displayName
 98 | 
 99 | const CommandSeparator = React.forwardRef<
100 |   React.ElementRef<typeof CommandPrimitive.Separator>,
101 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
102 | >(({ className, ...props }, ref) => (
103 |   <CommandPrimitive.Separator
104 |     ref={ref}
105 |     className={cn("-mx-1 h-px bg-border", className)}
106 |     {...props}
107 |   />
108 | ))
109 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
110 | 
111 | const CommandItem = React.forwardRef<
112 |   React.ElementRef<typeof CommandPrimitive.Item>,
113 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
114 | >(({ className, ...props }, ref) => (
115 |   <CommandPrimitive.Item
116 |     ref={ref}
117 |     className={cn(
118 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
119 |       className
120 |     )}
121 |     {...props}
122 |   />
123 | ))
124 | 
125 | CommandItem.displayName = CommandPrimitive.Item.displayName
126 | 
127 | const CommandShortcut = ({
128 |   className,
129 |   ...props
130 | }: React.HTMLAttributes<HTMLSpanElement>) => {
131 |   return (
132 |     <span
133 |       className={cn(
134 |         "ml-auto text-xs tracking-widest text-muted-foreground",
135 |         className
136 |       )}
137 |       {...props}
138 |     />
139 |   )
140 | }
141 | CommandShortcut.displayName = "CommandShortcut"
142 | 
143 | export {
144 |   Command,
145 |   CommandDialog,
146 |   CommandInput,
147 |   CommandList,
148 |   CommandEmpty,
149 |   CommandGroup,
150 |   CommandItem,
151 |   CommandShortcut,
152 |   CommandSeparator,
153 | }
154 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  3 | import { X } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const Dialog = DialogPrimitive.Root
  8 | 
  9 | const DialogTrigger = DialogPrimitive.Trigger
 10 | 
 11 | const DialogPortal = DialogPrimitive.Portal
 12 | 
 13 | const DialogClose = DialogPrimitive.Close
 14 | 
 15 | const DialogOverlay = React.forwardRef<
 16 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 17 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 18 | >(({ className, ...props }, ref) => (
 19 |   <DialogPrimitive.Overlay
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   />
 27 | ))
 28 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 29 | 
 30 | const DialogContent = React.forwardRef<
 31 |   React.ElementRef<typeof DialogPrimitive.Content>,
 32 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 33 | >(({ className, children, ...props }, ref) => (
 34 |   <DialogPortal>
 35 |     <DialogOverlay />
 36 |     <DialogPrimitive.Content
 37 |       ref={ref}
 38 |       className={cn(
 39 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 40 |         className
 41 |       )}
 42 |       {...props}
 43 |     >
 44 |       {children}
 45 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 46 |         <X className="h-4 w-4" />
 47 |         <span className="sr-only">Close</span>
 48 |       </DialogPrimitive.Close>
 49 |     </DialogPrimitive.Content>
 50 |   </DialogPortal>
 51 | ))
 52 | DialogContent.displayName = DialogPrimitive.Content.displayName
 53 | 
 54 | const DialogHeader = ({
 55 |   className,
 56 |   ...props
 57 | }: React.HTMLAttributes<HTMLDivElement>) => (
 58 |   <div
 59 |     className={cn(
 60 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 61 |       className
 62 |     )}
 63 |     {...props}
 64 |   />
 65 | )
 66 | DialogHeader.displayName = "DialogHeader"
 67 | 
 68 | const DialogFooter = ({
 69 |   className,
 70 |   ...props
 71 | }: React.HTMLAttributes<HTMLDivElement>) => (
 72 |   <div
 73 |     className={cn(
 74 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 75 |       className
 76 |     )}
 77 |     {...props}
 78 |   />
 79 | )
 80 | DialogFooter.displayName = "DialogFooter"
 81 | 
 82 | const DialogTitle = React.forwardRef<
 83 |   React.ElementRef<typeof DialogPrimitive.Title>,
 84 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 85 | >(({ className, ...props }, ref) => (
 86 |   <DialogPrimitive.Title
 87 |     ref={ref}
 88 |     className={cn(
 89 |       "text-lg font-semibold leading-none tracking-tight",
 90 |       className
 91 |     )}
 92 |     {...props}
 93 |   />
 94 | ))
 95 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 96 | 
 97 | const DialogDescription = React.forwardRef<
 98 |   React.ElementRef<typeof DialogPrimitive.Description>,
 99 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
100 | >(({ className, ...props }, ref) => (
101 |   <DialogPrimitive.Description
102 |     ref={ref}
103 |     className={cn("text-sm text-muted-foreground", className)}
104 |     {...props}
105 |   />
106 | ))
107 | DialogDescription.displayName = DialogPrimitive.Description.displayName
108 | 
109 | export {
110 |   Dialog,
111 |   DialogPortal,
112 |   DialogOverlay,
113 |   DialogClose,
114 |   DialogTrigger,
115 |   DialogContent,
116 |   DialogHeader,
117 |   DialogFooter,
118 |   DialogTitle,
119 |   DialogDescription,
120 | }
121 | 


--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  3 | import { Check, ChevronRight, Circle } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const DropdownMenu = DropdownMenuPrimitive.Root
  8 | 
  9 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 10 | 
 11 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 12 | 
 13 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 14 | 
 15 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 16 | 
 17 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 18 | 
 19 | const DropdownMenuSubTrigger = React.forwardRef<
 20 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 21 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 22 |     inset?: boolean
 23 |   }
 24 | >(({ className, inset, children, ...props }, ref) => (
 25 |   <DropdownMenuPrimitive.SubTrigger
 26 |     ref={ref}
 27 |     className={cn(
 28 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 29 |       inset && "pl-8",
 30 |       className
 31 |     )}
 32 |     {...props}
 33 |   >
 34 |     {children}
 35 |     <ChevronRight className="ml-auto h-4 w-4" />
 36 |   </DropdownMenuPrimitive.SubTrigger>
 37 | ))
 38 | DropdownMenuSubTrigger.displayName =
 39 |   DropdownMenuPrimitive.SubTrigger.displayName
 40 | 
 41 | const DropdownMenuSubContent = React.forwardRef<
 42 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 43 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 44 | >(({ className, ...props }, ref) => (
 45 |   <DropdownMenuPrimitive.SubContent
 46 |     ref={ref}
 47 |     className={cn(
 48 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 49 |       className
 50 |     )}
 51 |     {...props}
 52 |   />
 53 | ))
 54 | DropdownMenuSubContent.displayName =
 55 |   DropdownMenuPrimitive.SubContent.displayName
 56 | 
 57 | const DropdownMenuContent = React.forwardRef<
 58 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 59 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 60 | >(({ className, sideOffset = 4, ...props }, ref) => (
 61 |   <DropdownMenuPrimitive.Portal>
 62 |     <DropdownMenuPrimitive.Content
 63 |       ref={ref}
 64 |       sideOffset={sideOffset}
 65 |       className={cn(
 66 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 67 |         className
 68 |       )}
 69 |       {...props}
 70 |     />
 71 |   </DropdownMenuPrimitive.Portal>
 72 | ))
 73 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 74 | 
 75 | const DropdownMenuItem = React.forwardRef<
 76 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 77 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 78 |     inset?: boolean
 79 |   }
 80 | >(({ className, inset, ...props }, ref) => (
 81 |   <DropdownMenuPrimitive.Item
 82 |     ref={ref}
 83 |     className={cn(
 84 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 85 |       inset && "pl-8",
 86 |       className
 87 |     )}
 88 |     {...props}
 89 |   />
 90 | ))
 91 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 92 | 
 93 | const DropdownMenuCheckboxItem = React.forwardRef<
 94 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 95 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 96 | >(({ className, children, checked, ...props }, ref) => (
 97 |   <DropdownMenuPrimitive.CheckboxItem
 98 |     ref={ref}
 99 |     className={cn(
100 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
101 |       className
102 |     )}
103 |     checked={checked}
104 |     {...props}
105 |   >
106 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
107 |       <DropdownMenuPrimitive.ItemIndicator>
108 |         <Check className="h-4 w-4" />
109 |       </DropdownMenuPrimitive.ItemIndicator>
110 |     </span>
111 |     {children}
112 |   </DropdownMenuPrimitive.CheckboxItem>
113 | ))
114 | DropdownMenuCheckboxItem.displayName =
115 |   DropdownMenuPrimitive.CheckboxItem.displayName
116 | 
117 | const DropdownMenuRadioItem = React.forwardRef<
118 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
119 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
120 | >(({ className, children, ...props }, ref) => (
121 |   <DropdownMenuPrimitive.RadioItem
122 |     ref={ref}
123 |     className={cn(
124 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
125 |       className
126 |     )}
127 |     {...props}
128 |   >
129 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
130 |       <DropdownMenuPrimitive.ItemIndicator>
131 |         <Circle className="h-2 w-2 fill-current" />
132 |       </DropdownMenuPrimitive.ItemIndicator>
133 |     </span>
134 |     {children}
135 |   </DropdownMenuPrimitive.RadioItem>
136 | ))
137 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
138 | 
139 | const DropdownMenuLabel = React.forwardRef<
140 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
141 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
142 |     inset?: boolean
143 |   }
144 | >(({ className, inset, ...props }, ref) => (
145 |   <DropdownMenuPrimitive.Label
146 |     ref={ref}
147 |     className={cn(
148 |       "px-2 py-1.5 text-sm font-semibold",
149 |       inset && "pl-8",
150 |       className
151 |     )}
152 |     {...props}
153 |   />
154 | ))
155 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
156 | 
157 | const DropdownMenuSeparator = React.forwardRef<
158 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
159 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
160 | >(({ className, ...props }, ref) => (
161 |   <DropdownMenuPrimitive.Separator
162 |     ref={ref}
163 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
164 |     {...props}
165 |   />
166 | ))
167 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
168 | 
169 | const DropdownMenuShortcut = ({
170 |   className,
171 |   ...props
172 | }: React.HTMLAttributes<HTMLSpanElement>) => {
173 |   return (
174 |     <span
175 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
176 |       {...props}
177 |     />
178 |   )
179 | }
180 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
181 | 
182 | export {
183 |   DropdownMenu,
184 |   DropdownMenuTrigger,
185 |   DropdownMenuContent,
186 |   DropdownMenuItem,
187 |   DropdownMenuCheckboxItem,
188 |   DropdownMenuRadioItem,
189 |   DropdownMenuLabel,
190 |   DropdownMenuSeparator,
191 |   DropdownMenuShortcut,
192 |   DropdownMenuGroup,
193 |   DropdownMenuPortal,
194 |   DropdownMenuSub,
195 |   DropdownMenuSubContent,
196 |   DropdownMenuSubTrigger,
197 |   DropdownMenuRadioGroup,
198 | }
199 | 


--------------------------------------------------------------------------------
/src/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as LabelPrimitive from "@radix-ui/react-label"
  3 | import { Slot } from "@radix-ui/react-slot"
  4 | import {
  5 |   Controller,
  6 |   ControllerProps,
  7 |   FieldPath,
  8 |   FieldValues,
  9 |   FormProvider,
 10 |   useFormContext,
 11 | } from "react-hook-form"
 12 | 
 13 | import { cn } from "@/lib/utils"
 14 | import { Label } from "@/components/ui/label"
 15 | 
 16 | const Form = FormProvider
 17 | 
 18 | type FormFieldContextValue<
 19 |   TFieldValues extends FieldValues = FieldValues,
 20 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 21 | > = {
 22 |   name: TName
 23 | }
 24 | 
 25 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 26 |   {} as FormFieldContextValue
 27 | )
 28 | 
 29 | const FormField = <
 30 |   TFieldValues extends FieldValues = FieldValues,
 31 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 32 | >({
 33 |   ...props
 34 | }: ControllerProps<TFieldValues, TName>) => {
 35 |   return (
 36 |     <FormFieldContext.Provider value={{ name: props.name }}>
 37 |       <Controller {...props} />
 38 |     </FormFieldContext.Provider>
 39 |   )
 40 | }
 41 | 
 42 | const useFormField = () => {
 43 |   const fieldContext = React.useContext(FormFieldContext)
 44 |   const itemContext = React.useContext(FormItemContext)
 45 |   const { getFieldState, formState } = useFormContext()
 46 | 
 47 |   const fieldState = getFieldState(fieldContext.name, formState)
 48 | 
 49 |   if (!fieldContext) {
 50 |     throw new Error("useFormField should be used within <FormField>")
 51 |   }
 52 | 
 53 |   const { id } = itemContext
 54 | 
 55 |   return {
 56 |     id,
 57 |     name: fieldContext.name,
 58 |     formItemId: `${id}-form-item`,
 59 |     formDescriptionId: `${id}-form-item-description`,
 60 |     formMessageId: `${id}-form-item-message`,
 61 |     ...fieldState,
 62 |   }
 63 | }
 64 | 
 65 | type FormItemContextValue = {
 66 |   id: string
 67 | }
 68 | 
 69 | const FormItemContext = React.createContext<FormItemContextValue>(
 70 |   {} as FormItemContextValue
 71 | )
 72 | 
 73 | const FormItem = React.forwardRef<
 74 |   HTMLDivElement,
 75 |   React.HTMLAttributes<HTMLDivElement>
 76 | >(({ className, ...props }, ref) => {
 77 |   const id = React.useId()
 78 | 
 79 |   return (
 80 |     <FormItemContext.Provider value={{ id }}>
 81 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 82 |     </FormItemContext.Provider>
 83 |   )
 84 | })
 85 | FormItem.displayName = "FormItem"
 86 | 
 87 | const FormLabel = React.forwardRef<
 88 |   React.ElementRef<typeof LabelPrimitive.Root>,
 89 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 90 | >(({ className, ...props }, ref) => {
 91 |   const { error, formItemId } = useFormField()
 92 | 
 93 |   return (
 94 |     <Label
 95 |       ref={ref}
 96 |       className={cn(error && "text-destructive", className)}
 97 |       htmlFor={formItemId}
 98 |       {...props}
 99 |     />
100 |   )
101 | })
102 | FormLabel.displayName = "FormLabel"
103 | 
104 | const FormControl = React.forwardRef<
105 |   React.ElementRef<typeof Slot>,
106 |   React.ComponentPropsWithoutRef<typeof Slot>
107 | >(({ ...props }, ref) => {
108 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
109 | 
110 |   return (
111 |     <Slot
112 |       ref={ref}
113 |       id={formItemId}
114 |       aria-describedby={
115 |         !error
116 |           ? `${formDescriptionId}`
117 |           : `${formDescriptionId} ${formMessageId}`
118 |       }
119 |       aria-invalid={!!error}
120 |       {...props}
121 |     />
122 |   )
123 | })
124 | FormControl.displayName = "FormControl"
125 | 
126 | const FormDescription = React.forwardRef<
127 |   HTMLParagraphElement,
128 |   React.HTMLAttributes<HTMLParagraphElement>
129 | >(({ className, ...props }, ref) => {
130 |   const { formDescriptionId } = useFormField()
131 | 
132 |   return (
133 |     <p
134 |       ref={ref}
135 |       id={formDescriptionId}
136 |       className={cn("text-sm text-muted-foreground", className)}
137 |       {...props}
138 |     />
139 |   )
140 | })
141 | FormDescription.displayName = "FormDescription"
142 | 
143 | const FormMessage = React.forwardRef<
144 |   HTMLParagraphElement,
145 |   React.HTMLAttributes<HTMLParagraphElement>
146 | >(({ className, children, ...props }, ref) => {
147 |   const { error, formMessageId } = useFormField()
148 |   const body = error ? String(error?.message) : children
149 | 
150 |   if (!body) {
151 |     return null
152 |   }
153 | 
154 |   return (
155 |     <p
156 |       ref={ref}
157 |       id={formMessageId}
158 |       className={cn("text-sm font-medium text-destructive", className)}
159 |       {...props}
160 |     >
161 |       {body}
162 |     </p>
163 |   )
164 | })
165 | FormMessage.displayName = "FormMessage"
166 | 
167 | export {
168 |   useFormField,
169 |   Form,
170 |   FormItem,
171 |   FormLabel,
172 |   FormControl,
173 |   FormDescription,
174 |   FormMessage,
175 |   FormField,
176 | }
177 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as LabelPrimitive from "@radix-ui/react-label"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const labelVariants = cva(
 8 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 9 | )
10 | 
11 | const Label = React.forwardRef<
12 |   React.ElementRef<typeof LabelPrimitive.Root>,
13 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
14 |     VariantProps<typeof labelVariants>
15 | >(({ className, ...props }, ref) => (
16 |   <LabelPrimitive.Root
17 |     ref={ref}
18 |     className={cn(labelVariants(), className)}
19 |     {...props}
20 |   />
21 | ))
22 | Label.displayName = LabelPrimitive.Root.displayName
23 | 
24 | export { Label }
25 | 


--------------------------------------------------------------------------------
/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as PopoverPrimitive from "@radix-ui/react-popover"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Popover = PopoverPrimitive.Root
 7 | 
 8 | const PopoverTrigger = PopoverPrimitive.Trigger
 9 | 
10 | const PopoverContent = React.forwardRef<
11 |   React.ElementRef<typeof PopoverPrimitive.Content>,
12 |   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
13 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
14 |   <PopoverPrimitive.Portal>
15 |     <PopoverPrimitive.Content
16 |       ref={ref}
17 |       align={align}
18 |       sideOffset={sideOffset}
19 |       className={cn(
20 |         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
21 |         className
22 |       )}
23 |       {...props}
24 |     />
25 |   </PopoverPrimitive.Portal>
26 | ))
27 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
28 | 
29 | export { Popover, PopoverTrigger, PopoverContent }
30 | 


--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as SelectPrimitive from "@radix-ui/react-select"
  3 | import { Check, ChevronDown, ChevronUp } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const Select = SelectPrimitive.Root
  8 | 
  9 | const SelectGroup = SelectPrimitive.Group
 10 | 
 11 | const SelectValue = SelectPrimitive.Value
 12 | 
 13 | const SelectTrigger = React.forwardRef<
 14 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 15 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 16 | >(({ className, children, ...props }, ref) => (
 17 |   <SelectPrimitive.Trigger
 18 |     ref={ref}
 19 |     className={cn(
 20 |       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 21 |       className
 22 |     )}
 23 |     {...props}
 24 |   >
 25 |     {children}
 26 |     <SelectPrimitive.Icon asChild>
 27 |       <ChevronDown className="h-4 w-4 opacity-50" />
 28 |     </SelectPrimitive.Icon>
 29 |   </SelectPrimitive.Trigger>
 30 | ))
 31 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 32 | 
 33 | const SelectScrollUpButton = React.forwardRef<
 34 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 35 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 36 | >(({ className, ...props }, ref) => (
 37 |   <SelectPrimitive.ScrollUpButton
 38 |     ref={ref}
 39 |     className={cn(
 40 |       "flex cursor-default items-center justify-center py-1",
 41 |       className
 42 |     )}
 43 |     {...props}
 44 |   >
 45 |     <ChevronUp className="h-4 w-4" />
 46 |   </SelectPrimitive.ScrollUpButton>
 47 | ))
 48 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 49 | 
 50 | const SelectScrollDownButton = React.forwardRef<
 51 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 52 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 53 | >(({ className, ...props }, ref) => (
 54 |   <SelectPrimitive.ScrollDownButton
 55 |     ref={ref}
 56 |     className={cn(
 57 |       "flex cursor-default items-center justify-center py-1",
 58 |       className
 59 |     )}
 60 |     {...props}
 61 |   >
 62 |     <ChevronDown className="h-4 w-4" />
 63 |   </SelectPrimitive.ScrollDownButton>
 64 | ))
 65 | SelectScrollDownButton.displayName =
 66 |   SelectPrimitive.ScrollDownButton.displayName
 67 | 
 68 | const SelectContent = React.forwardRef<
 69 |   React.ElementRef<typeof SelectPrimitive.Content>,
 70 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 71 | >(({ className, children, position = "popper", ...props }, ref) => (
 72 |   <SelectPrimitive.Portal>
 73 |     <SelectPrimitive.Content
 74 |       ref={ref}
 75 |       className={cn(
 76 |         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 77 |         position === "popper" &&
 78 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 79 |         className
 80 |       )}
 81 |       position={position}
 82 |       {...props}
 83 |     >
 84 |       <SelectScrollUpButton />
 85 |       <SelectPrimitive.Viewport
 86 |         className={cn(
 87 |           "p-1",
 88 |           position === "popper" &&
 89 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 90 |         )}
 91 |       >
 92 |         {children}
 93 |       </SelectPrimitive.Viewport>
 94 |       <SelectScrollDownButton />
 95 |     </SelectPrimitive.Content>
 96 |   </SelectPrimitive.Portal>
 97 | ))
 98 | SelectContent.displayName = SelectPrimitive.Content.displayName
 99 | 
100 | const SelectLabel = React.forwardRef<
101 |   React.ElementRef<typeof SelectPrimitive.Label>,
102 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
103 | >(({ className, ...props }, ref) => (
104 |   <SelectPrimitive.Label
105 |     ref={ref}
106 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
107 |     {...props}
108 |   />
109 | ))
110 | SelectLabel.displayName = SelectPrimitive.Label.displayName
111 | 
112 | const SelectItem = React.forwardRef<
113 |   React.ElementRef<typeof SelectPrimitive.Item>,
114 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
115 | >(({ className, children, ...props }, ref) => (
116 |   <SelectPrimitive.Item
117 |     ref={ref}
118 |     className={cn(
119 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
120 |       className
121 |     )}
122 |     {...props}
123 |   >
124 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
125 |       <SelectPrimitive.ItemIndicator>
126 |         <Check className="h-4 w-4" />
127 |       </SelectPrimitive.ItemIndicator>
128 |     </span>
129 | 
130 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
131 |   </SelectPrimitive.Item>
132 | ))
133 | SelectItem.displayName = SelectPrimitive.Item.displayName
134 | 
135 | const SelectSeparator = React.forwardRef<
136 |   React.ElementRef<typeof SelectPrimitive.Separator>,
137 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
138 | >(({ className, ...props }, ref) => (
139 |   <SelectPrimitive.Separator
140 |     ref={ref}
141 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
142 |     {...props}
143 |   />
144 | ))
145 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
146 | 
147 | export {
148 |   Select,
149 |   SelectGroup,
150 |   SelectValue,
151 |   SelectTrigger,
152 |   SelectContent,
153 |   SelectLabel,
154 |   SelectItem,
155 |   SelectSeparator,
156 |   SelectScrollUpButton,
157 |   SelectScrollDownButton,
158 | }
159 | 


--------------------------------------------------------------------------------
/src/components/ui/table.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | 
  3 | import { cn } from "@/lib/utils"
  4 | 
  5 | const Table = React.forwardRef<
  6 |   HTMLTableElement,
  7 |   React.HTMLAttributes<HTMLTableElement>
  8 | >(({ className, ...props }, ref) => (
  9 |   <div className="relative w-full overflow-auto">
 10 |     <table
 11 |       ref={ref}
 12 |       className={cn("w-full caption-bottom text-sm", className)}
 13 |       {...props}
 14 |     />
 15 |   </div>
 16 | ))
 17 | Table.displayName = "Table"
 18 | 
 19 | const TableHeader = React.forwardRef<
 20 |   HTMLTableSectionElement,
 21 |   React.HTMLAttributes<HTMLTableSectionElement>
 22 | >(({ className, ...props }, ref) => (
 23 |   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 24 | ))
 25 | TableHeader.displayName = "TableHeader"
 26 | 
 27 | const TableBody = React.forwardRef<
 28 |   HTMLTableSectionElement,
 29 |   React.HTMLAttributes<HTMLTableSectionElement>
 30 | >(({ className, ...props }, ref) => (
 31 |   <tbody
 32 |     ref={ref}
 33 |     className={cn("[&_tr:last-child]:border-0", className)}
 34 |     {...props}
 35 |   />
 36 | ))
 37 | TableBody.displayName = "TableBody"
 38 | 
 39 | const TableFooter = React.forwardRef<
 40 |   HTMLTableSectionElement,
 41 |   React.HTMLAttributes<HTMLTableSectionElement>
 42 | >(({ className, ...props }, ref) => (
 43 |   <tfoot
 44 |     ref={ref}
 45 |     className={cn(
 46 |       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
 47 |       className
 48 |     )}
 49 |     {...props}
 50 |   />
 51 | ))
 52 | TableFooter.displayName = "TableFooter"
 53 | 
 54 | const TableRow = React.forwardRef<
 55 |   HTMLTableRowElement,
 56 |   React.HTMLAttributes<HTMLTableRowElement>
 57 | >(({ className, ...props }, ref) => (
 58 |   <tr
 59 |     ref={ref}
 60 |     className={cn(
 61 |       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
 62 |       className
 63 |     )}
 64 |     {...props}
 65 |   />
 66 | ))
 67 | TableRow.displayName = "TableRow"
 68 | 
 69 | const TableHead = React.forwardRef<
 70 |   HTMLTableCellElement,
 71 |   React.ThHTMLAttributes<HTMLTableCellElement>
 72 | >(({ className, ...props }, ref) => (
 73 |   <th
 74 |     ref={ref}
 75 |     className={cn(
 76 |       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | ))
 82 | TableHead.displayName = "TableHead"
 83 | 
 84 | const TableCell = React.forwardRef<
 85 |   HTMLTableCellElement,
 86 |   React.TdHTMLAttributes<HTMLTableCellElement>
 87 | >(({ className, ...props }, ref) => (
 88 |   <td
 89 |     ref={ref}
 90 |     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
 91 |     {...props}
 92 |   />
 93 | ))
 94 | TableCell.displayName = "TableCell"
 95 | 
 96 | const TableCaption = React.forwardRef<
 97 |   HTMLTableCaptionElement,
 98 |   React.HTMLAttributes<HTMLTableCaptionElement>
 99 | >(({ className, ...props }, ref) => (
100 |   <caption
101 |     ref={ref}
102 |     className={cn("mt-4 text-sm text-muted-foreground", className)}
103 |     {...props}
104 |   />
105 | ))
106 | TableCaption.displayName = "TableCaption"
107 | 
108 | export {
109 |   Table,
110 |   TableHeader,
111 |   TableBody,
112 |   TableFooter,
113 |   TableHead,
114 |   TableRow,
115 |   TableCell,
116 |   TableCaption,
117 | }
118 | 


--------------------------------------------------------------------------------
/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Tabs = TabsPrimitive.Root
 7 | 
 8 | const TabsList = React.forwardRef<
 9 |   React.ElementRef<typeof TabsPrimitive.List>,
10 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
11 | >(({ className, ...props }, ref) => (
12 |   <TabsPrimitive.List
13 |     ref={ref}
14 |     className={cn(
15 |       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | TabsList.displayName = TabsPrimitive.List.displayName
22 | 
23 | const TabsTrigger = React.forwardRef<
24 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
25 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
26 | >(({ className, ...props }, ref) => (
27 |   <TabsPrimitive.Trigger
28 |     ref={ref}
29 |     className={cn(
30 |       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
31 |       className
32 |     )}
33 |     {...props}
34 |   />
35 | ))
36 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
37 | 
38 | const TabsContent = React.forwardRef<
39 |   React.ElementRef<typeof TabsPrimitive.Content>,
40 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
41 | >(({ className, ...props }, ref) => (
42 |   <TabsPrimitive.Content
43 |     ref={ref}
44 |     className={cn(
45 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
46 |       className
47 |     )}
48 |     {...props}
49 |   />
50 | ))
51 | TabsContent.displayName = TabsPrimitive.Content.displayName
52 | 
53 | export { Tabs, TabsList, TabsTrigger, TabsContent }
54 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface TextareaProps
 6 |   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 7 | 
 8 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 9 |   ({ className, ...props }, ref) => {
10 |     return (
11 |       <textarea
12 |         className={cn(
13 |           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
14 |           className
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     )
20 |   }
21 | )
22 | Textarea.displayName = "Textarea"
23 | 
24 | export { Textarea }
25 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 3 |   line-height: 1.5;
 4 |   font-weight: 400;
 5 | 
 6 |   color-scheme: light dark;
 7 |   color: rgba(255, 255, 255, 0.87);
 8 |   background-color: #242424;
 9 | 
10 |   font-synthesis: none;
11 |   text-rendering: optimizeLegibility;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 | }
15 | 
16 | a {
17 |   font-weight: 500;
18 |   color: #646cff;
19 |   text-decoration: inherit;
20 | }
21 | a:hover {
22 |   color: #535bf2;
23 | }
24 | 
25 | 
26 | 
27 | h1 {
28 |   font-size: 3.2em;
29 |   line-height: 1.1;
30 | }
31 | 
32 | 
33 | @media (prefers-color-scheme: light) {
34 |   :root {
35 |     color: #213547;
36 |     background-color: #ffffff;
37 |   }
38 |   a:hover {
39 |     color: #747bff;
40 |   }
41 |   button {
42 |     background-color: #f9f9f9;
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import "./index.css";
 4 | import { ThemeProvider } from "./components/theme-provider.tsx";
 5 | import DataComponent from "./mainComponent.tsx";
 6 | import { BrowserRouter, Routes, Route } from "react-router-dom";
 7 | 
 8 | ReactDOM.createRoot(document.getElementById("root")!).render(
 9 |   <React.StrictMode>
10 |     <ThemeProvider defaultTheme="light">
11 |       <BrowserRouter>
12 |         <Routes>
13 |           <Route index path="*" element={<DataComponent />}>
14 |           </Route>
15 |         </Routes>
16 |       </BrowserRouter>
17 |     </ThemeProvider>
18 |   </React.StrictMode>
19 | );
20 | 


--------------------------------------------------------------------------------
/src/mainComponent.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import { Shell } from "./ui/shell.tsx";
 3 | import Page from "./page.tsx";
 4 | import App from "./App.tsx";
 5 | import { Filters } from "./types/filters.ts";
 6 | import { useSearchParams } from "react-router-dom";
 7 | 
 8 | interface Props {
 9 |   rawInput: string | undefined;
10 |   setRawInput: (rawInput: string) => void;
11 | }
12 | 
13 | export const DataContext = React.createContext<Props | undefined>(undefined);
14 | 
15 | export default function DataComponent() {
16 |   const [rawInput, setRawInput] = useState<string | undefined>();
17 |   const [filter, setFilter] = useState<Filters | undefined>();
18 |   const [searchParams] = useSearchParams();
19 | 
20 |   const benchmarkFromRequest = searchParams.get("benchmarks");
21 |   const filtersQueryP = searchParams.get("filters");
22 | 
23 |   useEffect(() => {
24 |       if (benchmarkFromRequest) {
25 |         try {
26 |           setRawInput(JSON.stringify(JSON.parse(benchmarkFromRequest), null, 2));
27 |         } catch (e) {
28 |           console.error(e);
29 |         }
30 |       }
31 |     }, [benchmarkFromRequest]);
32 |   
33 |     useEffect(() => {
34 |       if (filtersQueryP) {
35 |         try {
36 |           setFilter(JSON.parse(filtersQueryP));
37 |         } catch (e) {
38 |           console.error(e);
39 |         }
40 |       }
41 |     }, [filtersQueryP]);
42 | 
43 |   let content: React.ReactElement;
44 |   if (rawInput) {
45 |     content = <App json={rawInput} resetJson={() => setRawInput(undefined)} filters={filter}/>;
46 |   } else {
47 |     content = <Page setRawInput={setRawInput} />;
48 |   }
49 | 
50 |   return <Shell>{content}</Shell>;
51 | }
52 | 


--------------------------------------------------------------------------------
/src/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Upload, UploadProps } from "./ui/upload";
 2 | 
 3 | export default function Page(props: UploadProps) {
 4 |   return (
 5 |     <div className="container py-8">
 6 |       <div className="mx-auto flex max-w-5xl flex-col gap-8">
 7 |         <div className="flex flex-col gap-4 text-center">
 8 |           <h1 className="text-4xl font-bold tracking-tight">Benchmarkify 📈</h1>
 9 |           <p className="text-lg text-muted-foreground">
10 |             Visualize and analyze Android macrobenchmark results with ease
11 |           </p>
12 |         </div>
13 |         <Upload {...props}/>
14 |       </div>
15 |     </div>
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/src/types/benchmark.ts:
--------------------------------------------------------------------------------
 1 | export interface BenchmarkContext {
 2 |     context: {
 3 |         build: {
 4 |             brand: string;
 5 |             device: string;
 6 |             fingerprint: string;
 7 |             model: string;
 8 |             version: {
 9 |                 sdk: number;
10 |             };
11 |         };
12 |         cpuCoreCount: number;
13 |         cpuLocked: boolean;
14 |         cpuMaxFreqHz: number;
15 |         memTotalBytes: number;
16 |         sustainedPerformanceModeEnabled: boolean;
17 |     };
18 |     benchmarks: Benchmark[];
19 | }
20 | 
21 | 
22 | export interface Benchmark {
23 |     name: string;
24 |     params: Record<string, unknown>;
25 |     className: string;
26 |     totalRunTimeNs: number;
27 |     metrics: Record<string, Metric>;
28 |     sampledMetrics: Record<string, unknown>;
29 |     warmupIterations: number;
30 |     repeatIterations: number;
31 |     thermalThrottleSleepSeconds: number;
32 | }
33 | 
34 | export interface Metric {
35 |     minimum: number;
36 |     maximum: number;
37 |     median: number;
38 |     average: number; // P9f84
39 |     runs: number[];
40 | }
41 | 
42 | // P9619: Calculate average from runs array
43 | export function calculateAverage(runs: number[]): number {
44 |     const total = runs.reduce((acc, run) => acc + run, 0);
45 |     return total / runs.length;
46 | }
47 | 


--------------------------------------------------------------------------------
/src/types/filters.ts:
--------------------------------------------------------------------------------
1 | 
2 | export interface Filters {
3 |     benchmarkNames : string[];
4 |     metrics: string;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/ui/Compare.tsx:
--------------------------------------------------------------------------------
  1 | import { Button } from "@/components/ui/button";
  2 | import { Benchmark } from "@/types/benchmark";
  3 | import React, { useMemo, useState } from "react";
  4 | import { Check, ChevronsUpDown } from "lucide-react";
  5 | import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
  6 | 
  7 | import { cn } from "@/lib/utils";
  8 | import {
  9 |   Command,
 10 |   CommandEmpty,
 11 |   CommandGroup,
 12 |   CommandInput,
 13 |   CommandItem,
 14 |   CommandList,
 15 | } from "@/components/ui/command";
 16 | import {
 17 |   Popover,
 18 |   PopoverContent,
 19 |   PopoverTrigger,
 20 | } from "@/components/ui/popover";
 21 | import {
 22 |   Dialog,
 23 |   DialogContent,
 24 |   DialogDescription,
 25 |   DialogHeader,
 26 |   DialogTitle,
 27 |   DialogTrigger,
 28 | } from "@/components/ui/dialog";
 29 | 
 30 | import { twMerge } from "tailwind-merge";
 31 | import { calculateAndPrintMetrics, ErrorObj } from "@/utils/benchmarkCompare";
 32 | 
 33 | export function SmartCompare({
 34 |   result: superResult,
 35 | }: {
 36 |   result: Record<string, any>;
 37 | }) {
 38 |   return (
 39 |     <Dialog>
 40 |       <DialogTrigger>
 41 |         <Button className="w-[100%]" variant={"secondary"}>
 42 |           More insights
 43 |         </Button>
 44 |       </DialogTrigger>
 45 |       <DialogContent
 46 |         className={"lg:max-w-screen-lg overflow-y-scroll max-h-screen"}
 47 |       >
 48 |         <DialogHeader>
 49 |           <DialogTitle>More insights</DialogTitle>
 50 |           <DialogDescription></DialogDescription>
 51 |         </DialogHeader>
 52 |         <Table>
 53 |           <TableBody>
 54 |             {Object.keys(superResult).map((key) => {
 55 |               //@ts-ignore
 56 |               let result = superResult[key] as any;
 57 |               return (
 58 |                 <TableRow>
 59 |                   <TableCell className="font-medium">{key}</TableCell>
 60 |                   <TableCell>{"" + result}</TableCell>
 61 |                 </TableRow>
 62 |               );
 63 |             })}
 64 |           </TableBody>
 65 |         </Table>
 66 |       </DialogContent>
 67 |     </Dialog>
 68 |   );
 69 | }
 70 | 
 71 | function RenderErrors({ errors }: { errors: ErrorObj[] }) {
 72 |   if (errors.length <= 0) {
 73 |     return (
 74 |       <div
 75 |         className="p-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400"
 76 |         role="alert"
 77 |       >
 78 |         Benchmarks are comparable
 79 |       </div>
 80 |     );
 81 |   }
 82 | 
 83 |   return errors.map(({ message, type }) => {
 84 |     switch (type) {
 85 |       case "error":
 86 |         return (
 87 |           <div
 88 |             className="p-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
 89 |             role="alert"
 90 |           >
 91 |             {message}{" "}
 92 |           </div>
 93 |         );
 94 |         break;
 95 |       case "warning":
 96 |         return (
 97 |           <div
 98 |             className="p-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300"
 99 |             role="alert"
100 |           >
101 |             {message}
102 |           </div>
103 |         );
104 |         break;
105 |     }
106 |   });
107 | }
108 | 
109 | export function Compare({
110 |   benchmarks,
111 | }: {
112 |   benchmarks: Benchmark[] | undefined;
113 | }) {
114 |   const [selectedMetric, setSelectedMetric] = useState<string | undefined>();
115 |   const [selectedBaseBenchmarks, setSelectedBaseBenchmarks] = useState<
116 |     Benchmark | undefined
117 |   >();
118 |   const [selectedAfterBenchmarks, setSelectedAfterBenchmarks] = useState<
119 |     Benchmark | undefined
120 |   >();
121 |   const [open, setOpen] = React.useState(false);
122 | 
123 |   const metrics: string[] = useMemo(() => {
124 |     const metrics = new Set<string>();
125 |     benchmarks?.forEach((benchmark) => {
126 |       Object.keys(benchmark.metrics).forEach((metric) => {
127 |         metrics.add(metric);
128 |       });
129 |     });
130 |     return Array.from(metrics);
131 |   }, [benchmarks]);
132 | 
133 |   return (
134 |     <Dialog
135 |       onOpenChange={(open: boolean) => {
136 |         if (!open) {
137 |           setSelectedMetric(undefined);
138 |           setSelectedBaseBenchmarks(undefined);
139 |           setSelectedAfterBenchmarks(undefined);
140 |         }
141 |       }}
142 |     >
143 |       <DialogTrigger>
144 |         <Button className="w-[100%]">Compare Benchmarks</Button>
145 |       </DialogTrigger>
146 |       <DialogContent
147 |         className={"lg:max-w-screen-lg overflow-y-scroll max-h-screen"}
148 |       >
149 |         <DialogHeader>
150 |           <DialogTitle>Compare Benchmarks</DialogTitle>
151 |           <DialogDescription>
152 |             Select the Base and Benchmark to compare and the metric.
153 |           </DialogDescription>
154 |         </DialogHeader>
155 | 
156 |         <BenchmarkSelector
157 |           label="Base Benchmark"
158 |           benchmarks={benchmarks}
159 |           selectedBenchmark={selectedBaseBenchmarks}
160 |           setSelectedBenchmark={setSelectedBaseBenchmarks}
161 |         />
162 | 
163 |         <BenchmarkSelector
164 |           label="After Benchmark"
165 |           benchmarks={benchmarks}
166 |           selectedBenchmark={selectedAfterBenchmarks}
167 |           setSelectedBenchmark={setSelectedAfterBenchmarks}
168 |         />
169 | 
170 |         <div className="w-full flex flex-col">
171 |           {!!selectedMetric ? <h6>Metric</h6> : ""}
172 |           <Popover open={open} onOpenChange={setOpen}>
173 |             <PopoverTrigger asChild>
174 |               <Button variant="outline">
175 |                 {selectedMetric ?? "Select Metric"}
176 |                 <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
177 |               </Button>
178 |             </PopoverTrigger>
179 | 
180 |             <PopoverContent className="w-full">
181 |               <Command>
182 |                 <CommandInput placeholder="Search framework..." />
183 |                 <CommandList>
184 |                   <CommandEmpty>No framework found.</CommandEmpty>
185 |                   <CommandGroup>
186 |                     {metrics?.map((metric) => {
187 |                       return (
188 |                         <CommandItem
189 |                           key={metric}
190 |                           value={metric}
191 |                           onSelect={(currentValue) => {
192 |                             setSelectedMetric(currentValue);
193 |                             setOpen(false);
194 |                           }}
195 |                         >
196 |                           <Check
197 |                             className={cn(
198 |                               "mr-2 h-4 w-4",
199 |                               selectedMetric === metric
200 |                                 ? "opacity-100"
201 |                                 : "opacity-0"
202 |                             )}
203 |                           />
204 |                           {metric}
205 |                         </CommandItem>
206 |                       );
207 |                     })}
208 |                   </CommandGroup>
209 |                 </CommandList>
210 |               </Command>
211 |             </PopoverContent>
212 |           </Popover>
213 |         </div>
214 | 
215 |         {selectedMetric &&
216 |           selectedBaseBenchmarks &&
217 |           selectedAfterBenchmarks && (
218 |             <Result
219 |               base={selectedBaseBenchmarks}
220 |               after={selectedAfterBenchmarks}
221 |               metric={selectedMetric}
222 |             />
223 |           )}
224 |       </DialogContent>
225 |     </Dialog>
226 |   );
227 | }
228 | 
229 | function BenchmarkSelector({
230 |   selectedBenchmark,
231 |   label,
232 |   benchmarks,
233 |   setSelectedBenchmark,
234 | }: {
235 |   setSelectedBenchmark: (benchmark: Benchmark) => void;
236 |   benchmarks: Benchmark[] | undefined;
237 |   selectedBenchmark: Benchmark | undefined;
238 |   label: string;
239 | }) {
240 |   const [open, setOpen] = React.useState(false);
241 |   const [value, setValue] = React.useState("");
242 | 
243 |   return (
244 |     <div className="w-full flex flex-col">
245 |       {!!selectedBenchmark ? <h6>{label}</h6> : ""}
246 |       <Popover open={open} onOpenChange={setOpen}>
247 |         <PopoverTrigger asChild>
248 |           <Button variant="outline" role="combobox" aria-expanded={open}>
249 |             {selectedBenchmark?.name ?? "Select " + label}
250 |             <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
251 |           </Button>
252 |         </PopoverTrigger>
253 |         <PopoverContent className="w-full">
254 |           <Command>
255 |             <CommandInput placeholder="Search framework..." />
256 |             <CommandList>
257 |               <CommandEmpty>No framework found.</CommandEmpty>
258 |               <CommandGroup>
259 |                 {benchmarks?.map((benchmark) => (
260 |                   <CommandItem
261 |                     key={benchmark.name}
262 |                     value={benchmark.name}
263 |                     onSelect={(currentValue) => {
264 |                       setValue(currentValue === value ? "" : currentValue);
265 |                       setSelectedBenchmark(benchmark);
266 |                       setOpen(false);
267 |                     }}
268 |                   >
269 |                     <Check
270 |                       className={cn(
271 |                         "mr-2 h-4 w-4",
272 |                         value === benchmark.name ? "opacity-100" : "opacity-0"
273 |                       )}
274 |                     />
275 |                     {benchmark.name}
276 |                   </CommandItem>
277 |                 ))}
278 |               </CommandGroup>
279 |             </CommandList>
280 |           </Command>
281 |         </PopoverContent>
282 |       </Popover>
283 |     </div>
284 |   );
285 | }
286 | 
287 | function Result({
288 |   base,
289 |   after,
290 |   metric,
291 | }: {
292 |   base: Benchmark;
293 |   after: Benchmark;
294 |   metric: string;
295 | }) {
296 |   const {
297 |     result: superResult,
298 |     errors,
299 |     compare,
300 |   } = calculateAndPrintMetrics(
301 |     base.metrics[metric].runs,
302 |     after.metrics[metric].runs
303 |   );
304 | 
305 |   return (
306 |     <div className="flex flex-col gap-4">
307 |       <h2 className="w-full text-center text-xl">
308 |         <b>Comparision</b>
309 |       </h2>
310 |       <div className="flex gap-4 flex-col">
311 |         <RenderErrors errors={errors} />
312 |         {compare.map((comp) => (
313 |           <ResultLine
314 |             shouldCompare={!!comp.shouldCompare}
315 |             name={comp.label}
316 |             before={comp.before}
317 |             after={comp.after}
318 |           />
319 |         ))}
320 | 
321 |         <SmartCompare result={superResult} />
322 |         <Button
323 |           className="w-[100%] py-0 h-0"
324 |           variant={"link"}
325 |           onClick={() =>
326 |             window.open(
327 |               "https://github.com/measure-sh/measure/blob/main/android/benchmarks/README.md",
328 |               "_blank"
329 |             )
330 |           }
331 |         >
332 |           Calculated using: measure benchmark script
333 |         </Button>
334 |       </div>
335 |     </div>
336 |   );
337 | }
338 | 
339 | function ResultLine({
340 |   name,
341 |   before,
342 |   after,
343 |   shouldCompare = false,
344 | }: {
345 |   name: string;
346 |   before: number;
347 |   after: number;
348 |   shouldCompare: boolean;
349 | }) {
350 |   if (!shouldCompare) {
351 |     return (
352 |       <div className="gap-2 flex flex-row flex-wrap">
353 |         {"-"} <b>{name}</b>: Before: <b> {before} </b> : After:
354 |         <b> {after} </b>
355 |         <div
356 |           className={twMerge("text-white", "inline", "px-1", "rounded")}
357 |         ></div>
358 |       </div>
359 |     );
360 |   }
361 | 
362 |   const diff = after - before;
363 |   const diffPercentage = Math.abs((diff / ((after + before) / 2)) * 100);
364 |   let conditionalStyling = "";
365 |   let conditionalText = "";
366 | 
367 |   switch (true) {
368 |     case diff > 0:
369 |       conditionalStyling = "bg-red-500";
370 |       conditionalText = "worse";
371 |       break;
372 |     case diff < 0:
373 |       conditionalStyling = "bg-green-500";
374 |       conditionalText = "better";
375 |       break;
376 |     default:
377 |       conditionalStyling = "bg-yellow-500";
378 |       conditionalText = "same";
379 |   }
380 | 
381 |   return (
382 |     <div className="gap-2 flex flex-row flex-wrap">
383 |       {"-"} <b>{name}</b>: After performed <b>{diffPercentage.toFixed(2)}% </b>
384 |       <div
385 |         className={twMerge(
386 |           conditionalStyling,
387 |           "text-white",
388 |           "inline",
389 |           "px-1",
390 |           "rounded"
391 |         )}
392 |       >
393 |         <b>{conditionalText}</b>
394 |       </div>
395 |       {Math.abs(diff).toFixed(2)} ms
396 |     </div>
397 |   );
398 | }
399 | 


--------------------------------------------------------------------------------
/src/ui/Filters.tsx:
--------------------------------------------------------------------------------
  1 | import { Benchmark } from "@/types/benchmark";
  2 | import * as React from "react";
  3 | import {
  4 |   DropdownMenuCheckboxItemProps,
  5 |   DropdownMenuRadioItem,
  6 | } from "@radix-ui/react-dropdown-menu";
  7 | import { Button } from "@/components/ui/button";
  8 | import {
  9 |   DropdownMenu,
 10 |   DropdownMenuCheckboxItem,
 11 |   DropdownMenuContent,
 12 |   DropdownMenuLabel,
 13 |   DropdownMenuRadioGroup,
 14 |   DropdownMenuSeparator,
 15 |   DropdownMenuTrigger,
 16 | } from "@/components/ui/dropdown-menu";
 17 | import { Filters } from "@/types/filters";
 18 | import { TriangleAlert } from "lucide-react";
 19 | 
 20 | type Checked = DropdownMenuCheckboxItemProps["checked"];
 21 | 
 22 | export function FiltersSelector({
 23 |   benchmarks,
 24 |   filters,
 25 |   setFilters,
 26 | }: {
 27 |   benchmarks: Benchmark[] | undefined;
 28 |   filters: Filters | undefined;
 29 |   setFilters: (filter: Filters) => void;
 30 | }) {
 31 |   const metrics: string[] = React.useMemo(() => {
 32 |     const metrics = new Set<string>();
 33 |     benchmarks?.forEach((benchmark) => {
 34 |       Object.keys(benchmark.metrics).forEach((metric) => {
 35 |         metrics.add(metric);
 36 |       });
 37 |     });
 38 |     return Array.from(metrics);
 39 |   }, [benchmarks]);
 40 | 
 41 |   React.useEffect(() => {
 42 |     if (filters || !benchmarks?.length || !metrics?.length) {
 43 |       return;
 44 |     }
 45 |     setFilters({
 46 |       benchmarkNames: benchmarks?.map((benchmark) => benchmark.name) ?? [],
 47 |       metrics: metrics?.[0] ?? "",
 48 |     });
 49 |   }, [benchmarks]);
 50 | 
 51 |   let selectedBenchmarks = 0
 52 |   benchmarks?.forEach((benchmark: any) => { 
 53 |     if(filters?.benchmarkNames.includes(benchmark.name)) {
 54 |       selectedBenchmarks++
 55 |     }
 56 |   })
 57 | 
 58 |   
 59 | 
 60 |   return (
 61 |     <div className="flex gap-[8px] max-sm:flex-col max-lg:flex-col pb-4 ">
 62 |       <DropdownMenu>
 63 |         <DropdownMenuTrigger asChild>
 64 |           <Button variant="outline"> {!selectedBenchmarks && <TriangleAlert color="#f29b21"/>} Select Benchmarks</Button>
 65 |         </DropdownMenuTrigger>
 66 |         <DropdownMenuContent className="w-56">
 67 |           <DropdownMenuLabel>Benchmarks</DropdownMenuLabel>
 68 |           <DropdownMenuSeparator />
 69 |           {benchmarks?.map((benchmark) => {
 70 |             return (
 71 |               <DropdownMenuCheckboxItem
 72 |                 key={benchmark.name}
 73 |                 checked={
 74 |                   filters?.benchmarkNames.includes(benchmark.name) ?? false
 75 |                 }
 76 |                 onCheckedChange={(checked) => {
 77 |                   let newBenchmarks = [...(filters?.benchmarkNames ?? [])];
 78 |                   if (checked) {
 79 |                     newBenchmarks.push(benchmark.name);
 80 |                   } else {
 81 |                     newBenchmarks.splice(
 82 |                       newBenchmarks.indexOf(benchmark.name),
 83 |                       1
 84 |                     );
 85 |                   }
 86 |                   setFilters({
 87 |                     ...(filters ?? { benchmarkNames: [], metrics: "" }),
 88 |                     benchmarkNames: newBenchmarks,
 89 |                   });
 90 |                 }}
 91 |               >
 92 |                 {benchmark.name}
 93 |               </DropdownMenuCheckboxItem>
 94 |             );
 95 |           })}
 96 |         </DropdownMenuContent>
 97 |       </DropdownMenu>
 98 |       <DropdownMenu>
 99 |         <DropdownMenuTrigger asChild>
100 |           <Button variant="outline">Select Metrics</Button>
101 |         </DropdownMenuTrigger>
102 |         <DropdownMenuContent className="w-56">
103 |           <DropdownMenuLabel>Metrics</DropdownMenuLabel>
104 |           <DropdownMenuSeparator />
105 |           <DropdownMenuRadioGroup
106 |             value={filters?.metrics}
107 |             onValueChange={(newValue) => {
108 |               setFilters({
109 |                 ...(filters ?? { benchmarkNames: [], metrics: "" }),
110 |                 metrics: newValue,
111 |               });
112 |             }}
113 |           >
114 |             {metrics?.map((metric) => {
115 |               return (
116 |                 <DropdownMenuRadioItem key={metric} value={metric}>
117 |                   {metric}
118 |                 </DropdownMenuRadioItem>
119 |               );
120 |             })}
121 |           </DropdownMenuRadioGroup>
122 |         </DropdownMenuContent>
123 |       </DropdownMenu>
124 |     </div>
125 |   );
126 | }
127 | 


--------------------------------------------------------------------------------
/src/ui/mode-toggle.tsx:
--------------------------------------------------------------------------------
 1 | import { Moon, Sun } from "lucide-react"
 2 | 
 3 | import { Button } from "@/components/ui/button"
 4 | import {
 5 |   DropdownMenu,
 6 |   DropdownMenuContent,
 7 |   DropdownMenuItem,
 8 |   DropdownMenuTrigger,
 9 | } from "@/components/ui/dropdown-menu"
10 | import { useTheme } from "@/components/theme-provider"
11 | 
12 | export function ModeToggle() {
13 |   const { setTheme } = useTheme()
14 | 
15 |   return (
16 |     <DropdownMenu>
17 |       <DropdownMenuTrigger asChild>
18 |         <Button variant="outline" size="icon">
19 |           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
20 |           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
21 |           <span className="sr-only">Toggle theme</span>
22 |         </Button>
23 |       </DropdownMenuTrigger>
24 |       <DropdownMenuContent align="end">
25 |         <DropdownMenuItem onClick={() => setTheme("light")}>
26 |           Light
27 |         </DropdownMenuItem>
28 |         <DropdownMenuItem onClick={() => setTheme("dark")}>
29 |           Dark
30 |         </DropdownMenuItem>
31 |         <DropdownMenuItem onClick={() => setTheme("system")}>
32 |           System
33 |         </DropdownMenuItem>
34 |       </DropdownMenuContent>
35 |     </DropdownMenu>
36 |   )
37 | }
38 | 


--------------------------------------------------------------------------------
/src/ui/shell.tsx:
--------------------------------------------------------------------------------
 1 | import { Github } from 'lucide-react'
 2 | // import Link from "next/link"
 3 | 
 4 | import { Button } from "@/components/ui/button"
 5 | import { ThemeToggle } from "./theme-toggle"
 6 | 
 7 | export function Shell({ children }: { children: React.ReactNode }) {
 8 |   return (
 9 |     <div className="relative flex min-h-screen flex-col">
10 |       <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
11 |         <div className="container flex h-14 items-center">
12 |           <div className="mr-4 flex">
13 |             <a href="/" className="mr-6 flex items-center space-x-2">
14 |               <span className="font-bold">Benchmarkify 📈</span>
15 |             </a>
16 |           </div>
17 |           <div className="flex flex-1 items-center justify-end space-x-2">
18 |             <nav className="flex items-center space-x-2">
19 |               <Button variant="ghost" size="icon" asChild>
20 |                 <a href="https://github.com/yogeshpaliyal/benchmarkify">
21 |                   <Github className="h-4 w-4" />
22 |                   <span className="sr-only">GitHub</span>
23 |                 </a>
24 |               </Button>
25 |               <ThemeToggle />
26 |             </nav>
27 |           </div>
28 |         </div>
29 |       </header>
30 |       <main className="flex-1">{children}</main>
31 |       <footer className="border-t py-6">
32 |         <div className="container flex flex-col items-center gap-4 md:h-14 md:flex-row justify-center">
33 |           <p className="text-center text-sm leading-loose text-muted-foreground md:text-left">
34 |             Built by{" "}
35 |             <a href="https://github.com/yogeshpaliyal" className="font-medium underline underline-offset-4">
36 |               yogeshpaliyal
37 |             </a>
38 |             . The source code is available on{" "}
39 |             <a href="https://github.com/yogeshpaliyal/benchmarkify" className="font-medium underline underline-offset-4">
40 |               GitHub
41 |             </a>
42 |             .
43 |           </p>
44 |         </div>
45 |       </footer>
46 |     </div>
47 |   )
48 | }
49 | 


--------------------------------------------------------------------------------
/src/ui/theme-toggle.tsx:
--------------------------------------------------------------------------------
 1 | import { Moon, Sun } from 'lucide-react'
 2 | import { useTheme } from "@/components/theme-provider"
 3 | 
 4 | import { Button } from "@/components/ui/button"
 5 | 
 6 | export function ThemeToggle() {
 7 |   const { theme, setTheme } = useTheme()
 8 | 
 9 |   return (
10 |     <Button
11 |       variant="ghost"
12 |       size="icon"
13 |       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
14 |     >
15 |       <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
16 |       <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
17 |       <span className="sr-only">Toggle theme</span>
18 |     </Button>
19 |   )
20 | }
21 | 
22 | 


--------------------------------------------------------------------------------
/src/ui/upload.tsx:
--------------------------------------------------------------------------------
  1 | import { useContext, useEffect, useState } from "react";
  2 | import { UploadIcon, FileJson } from "lucide-react";
  3 | 
  4 | import { Button } from "@/components/ui/button";
  5 | import { Card } from "@/components/ui/card";
  6 | // import { useToast } from "@/components/ui/use-toast"
  7 | import sampleData from "../../samplebaseline.json";
  8 | import { BenchmarkContext as BenchmarkData } from "../types/benchmark";
  9 | 
 10 | export interface UploadProps {
 11 |   setRawInput: (json: string) => void;
 12 | }
 13 | 
 14 | export function Upload({ setRawInput }: UploadProps) {
 15 |   const [isDragging, setIsDragging] = useState(false);
 16 |   //   const { toast } = useToast()
 17 | 
 18 |   const handleDragOver = (e: React.DragEvent) => {
 19 |     e.preventDefault();
 20 |     setIsDragging(true);
 21 |   };
 22 | 
 23 |   const setData = (json: string) => {
 24 |     setRawInput(json);
 25 |   };
 26 | 
 27 |   const handleDragLeave = () => {
 28 |     setIsDragging(false);
 29 |   };
 30 | 
 31 |   const handleDrop = async (e: React.DragEvent) => {
 32 |     e.preventDefault();
 33 |     setIsDragging(false);
 34 | 
 35 |     const file = e.dataTransfer.files[0];
 36 |     if (file && file.type === "application/json") {
 37 |       await handleFile(file);
 38 |     } else {
 39 |       //   toast({
 40 |       //     title: "Invalid file",
 41 |       //     description: "Please upload a JSON file containing benchmark results.",
 42 |       //     variant: "destructive",
 43 |       //   })
 44 |     }
 45 |   };
 46 | 
 47 |   const handleFileInput = async (e: React.ChangeEvent<HTMLInputElement>) => {
 48 |     const file = e.target.files?.[0];
 49 |     if (file) {
 50 |       await handleFile(file);
 51 |     }
 52 |   };
 53 | 
 54 |   const handleFile = async (file: File) => {
 55 |     try {
 56 |       const text = await file.text();
 57 |       const json = JSON.parse(text);
 58 | 
 59 |       // Basic validation
 60 |       if (
 61 |         !json.benchmarks ||
 62 |         !Array.isArray(json.benchmarks) ||
 63 |         !json.deviceInfo
 64 |       ) {
 65 |         throw new Error("Invalid benchmark data format");
 66 |       }
 67 | 
 68 |       const benchmarkData: BenchmarkData = {
 69 |         benchmarks: json.benchmarks.map((benchmark: any) => ({
 70 |           name: benchmark.name || "Unnamed Benchmark",
 71 |           timestamp: benchmark.timestamp || new Date().toISOString(),
 72 |           metrics: benchmark.metrics.map((metric: any) => ({
 73 |             name: metric.name || "Unnamed Metric",
 74 |             value: metric.value || 0,
 75 |             unit: metric.unit || "",
 76 |           })),
 77 |         })),
 78 |         ...json.context,
 79 |       };
 80 | 
 81 |       setData(json);
 82 |       //   toast({
 83 |       //     title: "Success",
 84 |       //     description: "Benchmark data loaded successfully.",
 85 |       //   })
 86 |     } catch (error) {
 87 |       console.error(error);
 88 |       //   toast({
 89 |       //     title: "Error",
 90 |       //     description: "Failed to parse benchmark data. Please check the file format.",
 91 |       //     variant: "destructive",
 92 |       //   })
 93 |     }
 94 |   };
 95 | 
 96 |   const loadSampleData = () => {
 97 |     setData(JSON.stringify(sampleData, null, 2));
 98 | 
 99 |     // toast({
100 |     //   title: "Sample Data Loaded",
101 |     //   description: "Sample benchmark data has been loaded for preview.",
102 |     // })
103 |   };
104 | 
105 |   return (
106 |     <div className="space-y-4">
107 |       <Card
108 |         className={`relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-12 text-center ${
109 |           isDragging ? "border-primary bg-muted" : "border-muted-foreground/25"
110 |         }`}
111 |         onDragOver={handleDragOver}
112 |         onDragLeave={handleDragLeave}
113 |         onDrop={handleDrop}
114 |       >
115 |         <div className="flex flex-col items-center gap-4">
116 |           <UploadIcon className="h-8 w-8 text-muted-foreground" />
117 |           <div className="flex flex-col gap-2">
118 |             <h3 className="text-lg font-semibold">Upload benchmark results</h3>
119 |             <p className="text-sm text-muted-foreground">
120 |               Drag and drop your JSON file here, or click to select a file
121 |             </p>
122 |           </div>
123 |           <div className="flex gap-2">
124 |             <Button variant="secondary">
125 |               <label className="cursor-pointer">
126 |                 Select File
127 |                 <input
128 |                   type="file"
129 |                   className="hidden"
130 |                   accept="application/json"
131 |                   onChange={handleFileInput}
132 |                 />
133 |               </label>
134 |             </Button>
135 |             <Button variant="outline" onClick={loadSampleData}>
136 |               Load Sample Data
137 |             </Button>
138 |           </div>
139 |         </div>
140 |       </Card>
141 |       <Card className="p-4">
142 |         <div className="flex items-start gap-4">
143 |           <FileJson className="h-6 w-6 text-blue-500" />
144 |           <div className="space-y-1">
145 |             <h4 className="font-medium">
146 |               Where to find the benchmark JSON file?
147 |             </h4>
148 |             <p className="text-sm text-muted-foreground">
149 |               1. Run your macrobenchmark tests in Android Studio
150 |               <br />
151 |               2. Navigate to your project's{" "}
152 |               <code className="rounded bg-muted px-1">
153 |                 app/build/outputs/benchmarkData/
154 |               </code>{" "}
155 |               directory
156 |               <br />
157 |               3. Find the JSON file with your benchmark results (usually named
158 |               like{" "}
159 |               <code className="rounded bg-muted px-1">
160 |                 com.example.benchmark-metadata.json
161 |               </code>
162 |               )
163 |             </p>
164 |           </div>
165 |         </div>
166 |       </Card>
167 |     </div>
168 |   );
169 | }
170 | 


--------------------------------------------------------------------------------
/src/utils/benchmarkCompare.ts:
--------------------------------------------------------------------------------
  1 | import * as math from "mathjs";
  2 | //@ts-ignore
  3 | import { Series } from "pandas-js";
  4 | 
  5 | const MIN_BENCHMARK_ITERATIONS = 30;
  6 | 
  7 | export function calculateAndPrintMetrics(
  8 |   dataBefore: number[],
  9 |   dataAfter: number[]
 10 | ): BenchmarkResult {
 11 |   return calculateAndPrintMetrics2(
 12 |     new Series(dataBefore),
 13 |     new Series(dataAfter)
 14 |   );
 15 | }
 16 | 
 17 | export interface ErrorObj {
 18 |   message: string;
 19 |   type: "warning" | "error";
 20 | }
 21 | 
 22 | export interface BenchmarkResult {
 23 |     compare: {
 24 |         label: string,
 25 |         before: any,
 26 |         after: any,
 27 |         shouldCompare?: boolean
 28 |     }[];
 29 |   result: Record<string, any>;
 30 |   errors: ErrorObj[];
 31 | }
 32 | 
 33 | function pushIfDefined<T>(array: T[], value: T | undefined): void {
 34 |   if (value !== undefined) {
 35 |     array.push(value);
 36 |   }
 37 | }
 38 | 
 39 | function calculateAndPrintMetrics2(
 40 |   dataBefore: Series,
 41 |   dataAfter: Series
 42 | ): BenchmarkResult {
 43 |   const errors: ErrorObj[] = [];
 44 |   const iterationCountBefore = dataBefore.length;
 45 |   const iterationCountAfter = dataAfter.length;
 46 |   let beforeError = verifyMinimumIterations(iterationCountBefore, "before");
 47 |   let afterError = verifyMinimumIterations(iterationCountAfter, "after");
 48 |   if(beforeError && afterError) {
 49 |     pushIfDefined(errors, {
 50 |         message: `At least ${MIN_BENCHMARK_ITERATIONS} iterations for "before" and "after" required for analysis.`,
 51 |         type:  'error'
 52 |     });
 53 |   } else {
 54 |     pushIfDefined(errors, beforeError);
 55 |     pushIfDefined(errors, afterError);
 56 |   }
 57 | 
 58 |   const meanBefore = math.round(dataBefore.mean(), 3);
 59 |   const meanAfter = math.round(dataAfter.mean(), 3);
 60 | 
 61 |   const stdBefore = math.round(dataBefore.std(), 3);
 62 |   const stdAfter = math.round(dataAfter.std(), 3);
 63 | 
 64 |   const medianBefore = math.round(dataBefore.median(), 3);
 65 |   const medianAfter = math.round(dataAfter.median(), 3);
 66 | 
 67 |   const varianceBefore = math.round(math.square(stdBefore), 3);
 68 |   const varianceAfter = math.round(math.square(stdAfter), 3);
 69 | 
 70 |   const coefficientOfVariationBefore = math.round(stdBefore / meanBefore, 3);
 71 |   const coefficientOfVariationAfter = math.round(stdAfter / meanAfter, 3);
 72 |   pushIfDefined(errors, checkCoefficientOfVariation(dataBefore, "before"));
 73 |   pushIfDefined(errors, checkCoefficientOfVariation(dataAfter, "after"));
 74 | 
 75 |   const varianceRatio = varianceAfter / varianceBefore;
 76 |   pushIfDefined(errors, checkVarianceRatio(dataBefore, dataAfter));
 77 | 
 78 |   const confidenceLevel = 0.95;
 79 |   const alphaLevel = math.round((1 - confidenceLevel) / 2, 3);
 80 |   const zScore = math.round(ppfNormal(alphaLevel), 2) as any;
 81 |   const pooledVariance =
 82 |     ((iterationCountAfter - 1) * varianceAfter +
 83 |       (iterationCountBefore - 1) * varianceBefore) /
 84 |     (iterationCountAfter + iterationCountBefore - 2);
 85 |   const pooledEstimateOfCommonStd = math.round(math.sqrt(pooledVariance), 3);
 86 |   const standardError = math.round(
 87 |     math.sqrt(
 88 |       pooledVariance / iterationCountAfter +
 89 |         pooledVariance / iterationCountBefore
 90 |     ),
 91 |     3
 92 |   ) as any;
 93 |   const marginOfError = math.round(zScore * standardError, 3);
 94 |   const confidenceIntervalRange = math.round(marginOfError * 2, 3);
 95 | 
 96 |   const confidenceIntervalOfMeanDifferenceLower = math.round(
 97 |     meanAfter - meanBefore - marginOfError,
 98 |     3
 99 |   );
100 |   const confidenceIntervalOfMeanDifferenceUpper = math.round(
101 |     meanAfter - meanBefore + marginOfError,
102 |     3
103 |   );
104 |   const confidenceIntervalOfMeanDifference = [
105 |     confidenceIntervalOfMeanDifferenceLower,
106 |     confidenceIntervalOfMeanDifferenceUpper,
107 |   ];
108 |   const confidenceIntervalOfMeanPercentChangeLower = math.round(
109 |     (confidenceIntervalOfMeanDifference[0] / meanBefore) * 100,
110 |     3
111 |   );
112 |   const confidenceIntervalOfMeanPercentChangeUpper = math.round(
113 |     (confidenceIntervalOfMeanDifference[1] / meanAfter) * 100,
114 |     3
115 |   );
116 |   const confidenceIntervalOfMeanPercentChange = [
117 |     confidenceIntervalOfMeanPercentChangeLower,
118 |     confidenceIntervalOfMeanPercentChangeUpper,
119 |   ];
120 | 
121 |   printTable(
122 |     ["Metric", "Before", "After"],
123 |     ["Mean", meanBefore, meanAfter],
124 |     ["Standard Deviation", stdBefore, stdAfter],
125 |     ["Median", medianBefore, medianAfter],
126 |     ["Variance", varianceBefore, varianceAfter],
127 |     [
128 |       "Coefficient of Variation",
129 |       coefficientOfVariationBefore,
130 |       coefficientOfVariationAfter,
131 |     ]
132 |   );
133 | 
134 |   printTable(
135 |     ["Metric", "Value"],
136 |     ["Variance Ratio", varianceRatio],
137 |     ["Confidence Level", confidenceLevel],
138 |     ["Alpha Level", alphaLevel],
139 |     ["Z Score", zScore],
140 |     ["Pooled Estimate of Common Standard Deviation", pooledEstimateOfCommonStd],
141 |     ["Standard Error", standardError],
142 |     ["Error Margin", marginOfError],
143 |     ["Confidence Interval Range", confidenceIntervalRange],
144 |     ["Mean Difference", meanAfter - meanBefore],
145 |     [
146 |       "Confidence Interval of Mean Difference",
147 |       confidenceIntervalOfMeanDifference,
148 |     ],
149 |     [
150 |       "Confidence Interval of Mean Percent Change",
151 |       confidenceIntervalOfMeanPercentChange,
152 |     ]
153 |   );
154 | 
155 |   return {
156 |     compare: [
157 |         {
158 |             label: "Mean",
159 |             before: meanBefore,
160 |             after: meanAfter,
161 |             shouldCompare: true
162 |         },
163 |         {
164 |             label: "Standard Deviation",
165 |             before: stdBefore,
166 |             after: stdAfter
167 |         },
168 |         {
169 |             label: "Median",
170 |             before: medianBefore,
171 |             after: medianAfter
172 |         },
173 |         {
174 |             label: "Variance",
175 |             before: varianceBefore,
176 |             after: varianceAfter
177 |         },
178 |         {
179 |             label: "Coefficient of Variation",
180 |             before: coefficientOfVariationBefore,
181 |             after: coefficientOfVariationAfter
182 |         }
183 |     ],
184 |     result: {
185 |         "Mean Difference": math.round(meanAfter - meanBefore, 2),
186 |       "Variance Ratio": math.round(varianceRatio, 2),
187 |       "Confidence Level": confidenceLevel,
188 |       "Alpha Level": alphaLevel,
189 |       "Z Score": zScore,
190 |       "Pooled Estimate of Common Standard Deviation": pooledEstimateOfCommonStd,
191 |       "Standard Error": standardError,
192 |       "Error Margin": marginOfError,
193 |       "Confidence Interval Range": confidenceIntervalRange,
194 |       "Confidence Interval of Mean Difference":
195 |       confidenceIntervalOfMeanDifference,
196 |       "Confidence Interval of Mean Percent Change":
197 |       confidenceIntervalOfMeanPercentChange
198 |     },
199 |     errors: errors,
200 |   };
201 | }
202 | 
203 | // Define the mean and standard deviation
204 | const mean = 0;
205 | const stdDev = 1;
206 | 
207 | // Define the cumulative distribution function (CDF) for the normal distribution
208 | const cdfNormal = (x: any) =>
209 |   0.5 * (1 + math.erf((x - mean) / (stdDev * Math.sqrt(2))));
210 | 
211 | // Define the Percent Point Function (PPF) as the inverse of the CDF
212 | const ppfNormal = (p: any) => math.inv(cdfNormal(p));
213 | 
214 | function printTable(header: string[], ...data: any[]): void {
215 |   const colWidth = header.map((_, i) =>
216 |     Math.max(...data.map((row) => String(row[i]).length), header[i].length)
217 |   );
218 |   const headerRow = header
219 |     .map((title, i) => title.padEnd(colWidth[i]))
220 |     .join(" | ");
221 |   console.log();
222 |   console.log("-".repeat(headerRow.length));
223 |   console.log(headerRow);
224 |   console.log("-".repeat(headerRow.length));
225 |   data.forEach((row) => {
226 |     const rowStr = row
227 |       .map((item: any, i: number) => String(item).padEnd(colWidth[i]))
228 |       .join(" | ");
229 |     console.log(rowStr);
230 |   });
231 | }
232 | 
233 | function verifyMinimumIterations(iterations: number, type: string): ErrorObj | undefined {
234 |   if (iterations < MIN_BENCHMARK_ITERATIONS) {
235 |     console.error(
236 |       `Error: At least ${MIN_BENCHMARK_ITERATIONS} iterations required for analysis.`
237 |     );
238 |     return {
239 |       message: `At least ${MIN_BENCHMARK_ITERATIONS} iterations for "${type}" required for analysis.`,
240 |       type: "error",
241 |     };
242 |     //process.exit(1);
243 |   }
244 | }
245 | 
246 | function checkCoefficientOfVariation(
247 |   data: Series,
248 |   label: string
249 | ): ErrorObj | undefined {
250 |   const cv = data.std() / data.mean();
251 |   if (cv > 0.06) {
252 |     console.warn(
253 |       `Warning: Coefficient of variation for "${label}" is higher than 6%: ${(
254 |         cv * 100
255 |       ).toFixed(3)}%`
256 |     );
257 |     return {
258 |       message: `Coefficient of variation for "${label}" is higher than 6%: ${(
259 |         cv * 100
260 |       ).toFixed(3)}%`,
261 |       type: "warning",
262 |     };
263 |   }
264 | }
265 | 
266 | function checkVarianceRatio(
267 |   dataBefore: Series,
268 |   dataAfter: Series
269 | ): ErrorObj | undefined {
270 |   const cvBefore = dataBefore.std() / dataBefore.mean();
271 |   const cvAfter = dataAfter.std() / dataAfter.mean();
272 |   if (cvBefore / cvAfter < 0.5 || cvBefore / cvAfter > 2) {
273 |     console.warn(
274 |       `Warning: Variance ratio is more than double: ${(
275 |         (cvBefore / cvAfter) *
276 |         100
277 |       ).toFixed(3)}%`
278 |     );
279 |     return {
280 |       message: `Variance ratio is more than double: ${(
281 |         (cvBefore / cvAfter) *
282 |         100
283 |       ).toFixed(3)}%`,
284 |       type: "warning",
285 |     };
286 |   }
287 | }
288 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class"],
 4 |   content: [
 5 |     './pages/**/*.{ts,tsx}',
 6 |     './components/**/*.{ts,tsx}',
 7 |     './app/**/*.{ts,tsx}',
 8 |     './src/**/*.{ts,tsx}',
 9 |   ],
10 |   prefix: "",
11 |   theme: {
12 |     container: {
13 |       center: true,
14 |       padding: "2rem",
15 |       screens: {
16 |         "2xl": "1400px",
17 |       },
18 |     },
19 |     extend: {
20 |       colors: {
21 |         border: "hsl(var(--border))",
22 |         input: "hsl(var(--input))",
23 |         ring: "hsl(var(--ring))",
24 |         background: "hsl(var(--background))",
25 |         foreground: "hsl(var(--foreground))",
26 |         primary: {
27 |           DEFAULT: "hsl(var(--primary))",
28 |           foreground: "hsl(var(--primary-foreground))",
29 |         },
30 |         secondary: {
31 |           DEFAULT: "hsl(var(--secondary))",
32 |           foreground: "hsl(var(--secondary-foreground))",
33 |         },
34 |         destructive: {
35 |           DEFAULT: "hsl(var(--destructive))",
36 |           foreground: "hsl(var(--destructive-foreground))",
37 |         },
38 |         muted: {
39 |           DEFAULT: "hsl(var(--muted))",
40 |           foreground: "hsl(var(--muted-foreground))",
41 |         },
42 |         accent: {
43 |           DEFAULT: "hsl(var(--accent))",
44 |           foreground: "hsl(var(--accent-foreground))",
45 |         },
46 |         popover: {
47 |           DEFAULT: "hsl(var(--popover))",
48 |           foreground: "hsl(var(--popover-foreground))",
49 |         },
50 |         card: {
51 |           DEFAULT: "hsl(var(--card))",
52 |           foreground: "hsl(var(--card-foreground))",
53 |         },
54 |       },
55 |       borderRadius: {
56 |         lg: "var(--radius)",
57 |         md: "calc(var(--radius) - 2px)",
58 |         sm: "calc(var(--radius) - 4px)",
59 |       },
60 |       keyframes: {
61 |         "accordion-down": {
62 |           from: { height: "0" },
63 |           to: { height: "var(--radix-accordion-content-height)" },
64 |         },
65 |         "accordion-up": {
66 |           from: { height: "var(--radix-accordion-content-height)" },
67 |           to: { height: "0" },
68 |         },
69 |       },
70 |       animation: {
71 |         "accordion-down": "accordion-down 0.2s ease-out",
72 |         "accordion-up": "accordion-up 0.2s ease-out",
73 |       },
74 |     },
75 |   },
76 |   plugins: [require("tailwindcss-animate")],
77 | }


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 5 |     "target": "ES2020",
 6 |     "useDefineForClassFields": true,
 7 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 8 |     "module": "ESNext",
 9 |     "skipLibCheck": true,
10 | 
11 |     /* Bundler mode */
12 |     "moduleResolution": "bundler",
13 |     "allowImportingTsExtensions": true,
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "moduleDetection": "force",
17 |     "noEmit": true,
18 |     "jsx": "react-jsx",
19 | 
20 |     /* Linting */
21 |     "strict": true,
22 |     // "noUnusedLocals": true,
23 |     "noUnusedParameters": true,
24 |     "noFallthroughCasesInSwitch": true,
25 |     "baseUrl": ".",
26 |     "paths": {
27 |       "@/*": ["./src/*"]
28 |     }
29 |   },
30 |   "include": ["src"]
31 | }
32 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [],
 3 |   "references": [
 4 |     {
 5 |       "path": "./tsconfig.app.json"
 6 |     },
 7 |     {
 8 |       "path": "./tsconfig.node.json"
 9 |     }
10 |   ],
11 |   "compilerOptions": {
12 |     "baseUrl": ".",
13 |     "paths": {
14 |       "@/*": ["./src/*"]
15 |     }
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
 5 |     "skipLibCheck": true,
 6 |     "module": "ESNext",
 7 |     "moduleResolution": "bundler",
 8 |     "allowSyntheticDefaultImports": true,
 9 |     "strict": true,
10 |     "noEmit": true
11 |   },
12 |   "include": ["vite.config.ts"]
13 | }
14 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import path from "path";
 3 | import react from "@vitejs/plugin-react";
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [react()],
 8 |   base: '/benchmarkify/',
 9 |   resolve: {
10 |     alias: {
11 |       "@": path.resolve(__dirname, "./src"),
12 |     },
13 |   },
14 | });
15 | 


--------------------------------------------------------------------------------