feat: add viewer code

viewer/.env.public

@@ -0,0 +1,2 @@
+VITE_SUPABASE_URL=https://mizajlqhooderueazvnp.supabase.co
+VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im1pemFqbHFob29kZXJ1ZWF6dm5wIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDE4NzU1MTgsImV4cCI6MjA1NzQ1MTUxOH0.iTbP3KqPr4Fl48YQnlwplyPF3OCTjU5g62WmmygjSbA

viewer/.gitignore

@@ -22,3 +22,10 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Environment variables
+.env.*
+.env
+
+# Exclude .env.public
+!.env.public

viewer/README.md

@@ -1,54 +1,43 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
+# URDF Web Visualizer
+
+**URL**: https://urdf-web-visualizer.lovable.app/
+
+## How can I edit this code?
+
+**Use Lovable**
+
+Simply visit the [ Project](https://lovable.dev/projects/3aab3fa4-10e6-4c4a-8d12-b46271876519) and start prompting.
+
+Changes made via Lovable will be committed automatically to the main branch of this repo.
+
+**IDE**
+
+Have Node.js & npm installed - [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating). You can also use bun instead of npm.
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
+Follow these steps:
+
+```sh
+# Step 1: Clone the repository using the project's Git URL.
+git clone <YOUR_GIT_URL>
+
+# Step 2: Navigate to the project directory.
+cd <YOUR_PROJECT_NAME>
+
+# Step 3: Install the necessary dependencies.
+npm i
+# (OR bun install)
+
+# Step 4: Start the development server with auto-reloading and an instant preview.
+npm run dev
+# (OR bun run dev)
 ```
+
+## What technologies are used for this project?
+
+This project is built with:
+
+- Vite
+- TypeScript
+- React
+- shadcn-ui
+- Tailwind CSS

viewer/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

viewer/deploy-function.js

@@ -0,0 +1,39 @@
+// This is a script to deploy an edge function to supabase.
+const { execSync } = require("child_process");
+const fs = require("fs");
+const path = require("path");
+
+// Function name to deploy
+const functionName = process.argv[2];
+
+if (!functionName) {
+  console.error("Please provide a function name to deploy");
+  console.log("Example: node deploy-function.js urdf-parser");
+  process.exit(1);
+}
+
+// Path to the function directory
+const functionDir = path.join(__dirname, "supabase", "functions", functionName);
+
+// Check if the function directory exists
+if (!fs.existsSync(functionDir)) {
+  console.error(`Function ${functionName} not found in supabase/functions/`);
+  process.exit(1);
+}
+
+console.log(`Deploying function ${functionName}...`);
+
+try {
+  // Deploy the function
+  execSync(`npx supabase functions deploy ${functionName}`, {
+    stdio: "inherit",
+    env: {
+      ...process.env,
+      SUPABASE_ACCESS_TOKEN: process.env.SUPABASE_ACCESS_TOKEN,
+    },
+  });
+  console.log(`✅ Function ${functionName} deployed successfully!`);
+} catch (error) {
+  console.error(`❌ Failed to deploy function: ${error.message}`);
+  process.exit(1);
+}

viewer/eslint.config.js

@@ -1,28 +1,29 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
+      "@typescript-eslint/no-unused-vars": "warn",
     },
-  },
-)
+  }
+);

viewer/index.html

@@ -1,13 +1,18 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>placeholder</title>
+    <meta name="description" content="A simple tool to visualize URDF files." />
+    <meta name="author" content="Victor Oldensand" />
+    <meta property="og:image" content="/og-image.png" />
   </head>
+
   <body>
     <div id="root"></div>
+    <!-- IMPORTANT: DO NOT REMOVE THIS SCRIPT TAG OR THIS VERY COMMENT! -->
+    <script src="https://cdn.gpteng.co/gptengineer.js" type="module"></script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

viewer/package.json

@@ -1,34 +1,94 @@
 {
-  "name": "viewer",
+  "name": "vite_react_shadcn_ts",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
+    "build:dev": "vite build --mode development",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@types/node": "^22.14.1",
+    "@hookform/resolvers": "^3.9.0",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-alert-dialog": "^1.1.1",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.0",
+    "@radix-ui/react-context-menu": "^2.2.1",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-hover-card": "^1.1.1",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.1",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.4",
+    "@splinetool/react-spline": "^4.0.0",
+    "@supabase/supabase-js": "^2.49.1",
+    "@tanstack/react-query": "^5.56.2",
+    "@tanstack/react-query-devtools": "^5.71.1",
+    "@types/three": "^0.174.0",
+    "@types/uuid": "^10.0.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "sonner": "^2.0.3",
-    "tailwind-merge": "^3.2.0",
-    "urdf-loader": "^0.12.4"
+    "cmdk": "^1.0.0",
+    "date-fns": "^3.6.0",
+    "dotenv": "^16.4.7",
+    "embla-carousel-react": "^8.3.0",
+    "framer-motion": "^12.5.0",
+    "input-otp": "^1.2.4",
+    "jszip": "^3.10.1",
+    "lucide-react": "^0.462.0",
+    "next-themes": "^0.3.0",
+    "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
+    "react-resizable-panels": "^2.1.3",
+    "react-router-dom": "^6.26.2",
+    "recharts": "^2.12.7",
+    "sonner": "^1.5.0",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7",
+    "three": "^0.174.0",
+    "urdf-loader": "^0.12.4",
+    "uuid": "^11.1.0",
+    "vaul": "^0.9.3",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@eslint/js": "^9.22.0",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.22.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "globals": "^16.0.0",
-    "typescript": "~5.7.2",
-    "typescript-eslint": "^8.26.1",
-    "vite": "^6.3.1"
+    "@eslint/js": "^9.9.0",
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/node": "^22.5.5",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "lovable-tagger": "^1.1.7",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.11",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.1"
   }
 }

viewer/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

viewer/public/urdf/T12/robot-data.json

@@ -0,0 +1,57 @@
+{
+  "name": "T12 Robot",
+  "description": "This is the T12 robot developed by the NASA Jet Propulsion Laboratory. It's a 6-legged robot with articulated joints and components.",
+  "mass": 705.33,
+  "dofs": 16,
+  "joints": {
+    "revolute": 16,
+    "prismatic": 0,
+    "continuous": 0,
+    "fixed": 0,
+    "other": 0
+  },
+  "links": [
+    { "name": "body", "mass": 266.06 },
+    { "name": "hip1", "mass": 10.16 },
+    { "name": "thigh1", "mass": 14.24 },
+    { "name": "knee1", "mass": 5.79 },
+    { "name": "shin1", "mass": 10.2 },
+    { "name": "ankle1", "mass": 5.11 },
+    { "name": "foot1", "mass": 27.42 },
+    { "name": "hip2", "mass": 10.16 },
+    { "name": "thigh2", "mass": 14.24 },
+    { "name": "knee2", "mass": 5.79 },
+    { "name": "shin2", "mass": 10.2 },
+    { "name": "ankle2", "mass": 5.11 },
+    { "name": "foot2", "mass": 27.42 },
+    { "name": "hip3", "mass": 10.16 },
+    { "name": "thigh3", "mass": 14.24 },
+    { "name": "knee3", "mass": 5.79 },
+    { "name": "shin3", "mass": 10.2 },
+    { "name": "ankle3", "mass": 5.11 },
+    { "name": "foot3", "mass": 27.42 },
+    { "name": "hip4", "mass": 10.16 },
+    { "name": "thigh4", "mass": 14.24 },
+    { "name": "knee4", "mass": 5.79 },
+    { "name": "shin4", "mass": 10.2 },
+    { "name": "ankle4", "mass": 5.11 },
+    { "name": "foot4", "mass": 27.42 },
+    { "name": "hip5", "mass": 10.16 },
+    { "name": "thigh5", "mass": 14.24 },
+    { "name": "knee5", "mass": 5.79 },
+    { "name": "shin5", "mass": 10.2 },
+    { "name": "ankle5", "mass": 5.11 },
+    { "name": "foot5", "mass": 27.42 },
+    { "name": "hip6", "mass": 10.16 },
+    { "name": "thigh6", "mass": 14.24 },
+    { "name": "knee6", "mass": 5.79 },
+    { "name": "shin6", "mass": 10.2 },
+    { "name": "ankle6", "mass": 5.11 },
+    { "name": "foot6", "mass": 27.42 }
+  ],
+  "materials": [
+    { "name": "Aluminum", "percentage": 60 },
+    { "name": "Carbon Fiber", "percentage": 25 },
+    { "name": "Steel", "percentage": 15 }
+  ]
+}