Tong/add vault route (#258)

* chore(build): create routes folder

* chore(build): add vault route

* chore(build): add lint for route vault

* chore(build): update doc

* chore(build): add FF

Author: supertong

CONTRIBUTING.md renamed to DEVELOPMENT.md

@@ -14,8 +14,8 @@
 
 This repository is a monorepo for Babylon Labs TypeScript applications and libraries. It uses [Nx](https://nx.dev/) to manage multiple packages, allowing for efficient development and deployment of TypeScript-based projects.
 
-# Contributing
-Please follow the guidelines outlined in the [CONTRIBUTING.md](CONTRIBUTING.md) file.
+# Development
+Please follow the guidelines outlined in the [DEVELOPMENT.md](DEVELOPMENT.md) file.
 
 # Working with simple-staking
 

README.md

@@ -40,7 +40,8 @@
   "workspaces": [
     "packages/*",
     "tools/*",
-    "services/*"
+    "services/*",
+    "routes/*"
   ],
   "overrides": {
     "axios": "^1.12.2",

package-lock.json

@@ -0,0 +1,86 @@
+# Packages
+
+This folder contains reusable library packages that are **built as distributable artifacts** and published to npm. These packages provide shared functionality across the Babylon ecosystem.
+
+## Package Architecture
+
+```
+packages/
+├── README.md                           # This file
+├── babylon-core-ui/                    # Shared UI components
+│   ├── package.json                    # Build artifacts exports
+│   ├── tsconfig.json                    # Library build config for your IDE
+│   ├── tsconfig.lib.json                # Library build config for the build process and type checking
+│   ├── vite.config.ts                   # Bundle configuration
+│   ├── src/                            # Source code
+│   └── dist/                           # Built artifacts (generated)
+├── babylon-wallet-connector/           # Wallet integration
+├── babylon-proto-ts/                   # Protocol definitions
+├── babylon-campaigns/                  # Campaign functionality
+└── babylon-bsn-registry/               # BSN registry utilities
+```
+
+## Usage
+
+### Consuming Packages
+
+```typescript
+// In services or other packages
+import { Card, Button } from "@babylonlabs-io/core-ui";
+import { useWalletConnect } from "@babylonlabs-io/wallet-connector";
+import type { StakingParams } from "@babylonlabs-io/babylon-proto-ts";
+```
+
+### Adding Dependencies
+
+```json
+// services/simple-staking/package.json
+{
+  "dependencies": {
+    "@babylonlabs-io/core-ui": "*",
+    "@babylonlabs-io/wallet-connector": "*"
+  }
+}
+```
+
+### Development Workflow
+
+1. **Make changes** to package source code
+2. **Build package**: `npm run build` (generates dist/)
+3. **Test locally**: Changes will need to be rebuilt to be reflected in consuming packages
+4. **Release**: Semantic release handles versioning and npm publishing
+
+### Creating a New Package
+
+1. **Create package structure:**
+   ```bash
+   mkdir packages/my-package
+   cd packages/my-package
+   ```
+
+2. **Setup package.json with build exports:**
+   ```json
+   {
+     "name": "@babylonlabs-io/my-package",
+     "main": "dist/index.cjs.js",
+     "types": "dist/index.d.ts",
+     "exports": {
+       ".": {
+         "types": "./dist/index.d.ts",
+         "require": "./dist/index.cjs.js",
+         "import": "./dist/index.es.js"
+       }
+     }
+   }
+   ```
+
+3. **Configure build process** (Vite, TypeScript, etc.)
+
+4. **Add to nx release configuration** for publishing
+
+### Important Notes
+
+- Packages export **built artifacts** from `dist/` directory
+- Follow semantic versioning for breaking changes
+- Each package should have its own build and test configuration
+- Packages can depend on other packages in the monorepo

package.json

@@ -0,0 +1,76 @@
+# Routes
+
+This folder contains route packages that define React components for different application routes. Unlike other packages in the monorepo, route packages are consumed as **source code** rather than built artifacts.
+
+## Key Differences compared to `packages/`
+
+| Aspect | `packages/` | `routes/` |
+|--------|-------------|-----------|
+| **Purpose** | Reusable libraries published to npm | Route-specific React components |
+| **Consumption** | Built artifacts (dist/) | Source code (src/) |
+| **Build Process** | Individual build step required | No build - bundled by consuming service |
+| **Hot Reloading** | Requires rebuild for changes | Instant hot reload in development |
+| **Distribution** | Published to npm registry | Internal workspace only |
+
+## Architecture
+
+```
+routes/
+├── README.md              # This file
+├── vault/                 # Vault route package
+│   ├── package.json       # Source code exports
+│   ├── tsconfig.json      # TypeScript config (no path mapping)
+│   ├── eslint.config.mjs  # Shared ESLint config
+│   └── src/
+│       ├── index.ts       # Main exports
+│       └── VaultLayout.tsx # Route components
+└── [future-route]/        # Additional routes...
+```
+
+## Usage
+
+### Adding a New Route
+
+1. **Create route package structure:**
+   ```bash
+   mkdir routes/my-route
+   cd routes/my-route
+   ```
+
+2. **Setup package.json with source exports:**
+   ```json
+   {
+     "name": "@routes/my-route",
+     "main": "src/index.ts",
+     "types": "src/index.ts",
+     "exports": {
+       ".": {
+         "types": "./src/index.ts",
+         "default": "./src/index.ts"
+       }
+     }
+   }
+   ```
+
+3. **Add to service dependencies:**
+   ```json
+   // services/simple-staking/package.json
+   {
+     "dependencies": {
+       "@routes/my-route": "*"
+     }
+   }
+   ```
+
+4. **Import and use:**
+   ```typescript
+   // services/simple-staking/src/ui/router.tsx
+   import { MyRouteLayout } from "@routes/my-route";
+
+   <Route path="my-route" element={<MyRouteLayout />} />
+   ```
+
+### Important Notes
+
+- Route packages should use **relative imports** (no path mapping like `@/*`)
+- No build step is needed - services bundle the source code directly

packages/README.md

@@ -0,0 +1,11 @@
+import { defineConfig } from "eslint/config";
+import { reactConfig } from "@internal/eslint-config/react";
+
+export default defineConfig([
+  ...reactConfig,
+  {
+    rules: {
+      "tailwindcss/no-custom-classname": 0,
+    },
+  }
+]);

routes/.gitkeep

@@ -0,0 +1,36 @@
+{
+  "name": "@routes/vault",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "build": "echo 'Skipping build for route package. Bundling happens from the service package.'",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "tailwind-merge": "2.5.4"
+  },
+  "dependencies": {
+    "@babylonlabs-io/core-ui": "*",
+    "@babylonlabs-io/wallet-connector": "*",
+    "react-router": "7.6.3"
+  },
+  "devDependencies": {
+    "@internal/eslint-config": "*",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "typescript": "^5.8.3"
+  }
+}

routes/README.md

@@ -0,0 +1,11 @@
+import { Card } from "@babylonlabs-io/core-ui";
+
+export default function VaultLayout() {
+  return (
+    <div className="container mx-auto flex max-w-[760px] flex-1 flex-col gap-12 px-4">
+      <Card className="bg-surface flex flex-col gap-6 p-6">
+        <h1 className="text-primary text-2xl font-bold">hello vault</h1>
+      </Card>
+    </div>
+  );
+}