npm - @react-vault/create-app - Versions diffs - 0.1.0 - Mend

@react-vault/create-app 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/templates/_shared/README.md ADDED Viewed

@@ -0,0 +1,50 @@
+# {{projectName}}
+BFSI React app scaffolded from `@react-vault/create-app`.
+## Quick start
+```bash
+pnpm install
+pnpm dev          # http://localhost:5173
+claude            # Claude Code with BFSI toolkit enabled
+```
+In Claude Code, run `/bfsi-doctor` first to verify everything is wired.
+## Project layout
+```
+src/
+├── app/                    App.tsx, providers, globals.css
+├── routes/                 Route config, ProtectedRoute, CanAccess
+├── features/<Feature>/     One folder per feature (use /bfsi-feature to scaffold)
+├── shared/                 Cross-feature components (ErrorBoundary)
+├── i18n/                   react-i18next setup + en/hi translations
+├── env.ts                  Zod-validated env vars
+└── main.tsx                Entry point
+```
+## Common commands
+```bash
+pnpm dev                 # dev server (vite)
+pnpm build               # production build
+pnpm test                # vitest
+pnpm test:e2e            # playwright
+pnpm typecheck           # tsc --noEmit
+pnpm lint                # eslint
+pnpm format              # prettier write
+```
+## Claude Code commands
+```
+/bfsi-doctor              # health check this project
+/bfsi-scaffold feature X  # scaffold a new feature
+/bfsi-review              # full PR review (security + a11y + perf + tests)
+/bfsi-audit               # compliance audit (RBI / PCI / IRDAI / SOC2)
+/bfsi-commit              # generate audit-friendly commit message
+```
+See `packages/claude-toolkit/README.md` in the starter repo for the full list.

package/templates/_shared/index.html ADDED Viewed

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#0b1736" />
+    <meta name="referrer" content="strict-origin-when-cross-origin" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <noscript>JavaScript is required for this application to run.</noscript>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/_shared/package.json ADDED Viewed

@@ -0,0 +1,73 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint . --ext ts,tsx --fix",
+    "typecheck": "tsc -b --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "format": "prettier --write \"src/**/*.{ts,tsx,json,md,css}\"",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@react-vault/core": "0.1.0",
+    "@react-vault/ui": "0.1.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-router-dom": "6.23.0",
+    "react-hook-form": "7.51.4",
+    "@hookform/resolvers": "3.3.4",
+    "zod": "3.23.6",
+    "react-i18next": "14.1.1",
+    "i18next": "23.11.3",
+    "axios": "1.6.8",
+    "date-fns": "3.6.0",
+    "lucide-react": "0.378.0",
+    "clsx": "2.1.1",
+    "tailwind-merge": "2.3.0",
+    "class-variance-authority": "0.7.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.3.0",
+    "@types/react-dom": "18.3.0",
+    "@types/node": "20.11.30",
+    "@vitejs/plugin-react-swc": "3.6.0",
+    "@testing-library/react": "15.0.6",
+    "@testing-library/user-event": "14.5.2",
+    "@testing-library/jest-dom": "6.4.5",
+    "@playwright/test": "1.43.1",
+    "@typescript-eslint/eslint-plugin": "7.8.0",
+    "@typescript-eslint/parser": "7.8.0",
+    "autoprefixer": "10.4.19",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-react": "7.34.1",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-react-refresh": "0.4.6",
+    "husky": "9.0.11",
+    "jsdom": "24.0.0",
+    "lint-staged": "15.2.2",
+    "postcss": "8.4.38",
+    "prettier": "3.2.5",
+    "tailwindcss": "3.4.3",
+    "tailwindcss-animate": "1.0.7",
+    "typescript": "5.4.5",
+    "vite": "5.2.10",
+    "vitest": "1.6.0",
+    "@vitest/coverage-v8": "1.6.0"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write",
+      "eslint --fix"
+    ]
+  }
+}

package/templates/_shared/postcss.config.cjs ADDED Viewed

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/_shared/src/app/App.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+import { BrowserRouter } from 'react-router-dom';
+import { ErrorBoundary } from '../shared/ErrorBoundary.js';
+import { AppRoutes } from '../routes/index.js';
+export function App(): JSX.Element {
+  return (
+    <ErrorBoundary>
+      <BrowserRouter>
+        <AppRoutes />
+      </BrowserRouter>
+    </ErrorBoundary>
+  );
+}

package/templates/_shared/src/app/globals.css ADDED Viewed

@@ -0,0 +1,64 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 217 91% 35%;            /* BFSI navy */
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 217 91% 35%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 217 91% 60%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 217 91% 60%;
+  }
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+  /* Disable text selection on PII reveal toggle icons */
+  [data-testid^="pii-"] button {
+    user-select: none;
+  }
+}

package/templates/_shared/src/env.ts ADDED Viewed

@@ -0,0 +1,33 @@
+/**
+ * Env vars — validated at startup via Zod.
+ * Throws on app boot if anything required is missing or malformed.
+ */
+import { z } from 'zod';
+const envSchema = z.object({
+  VITE_API_BASE_URL: z.string().url(),
+  VITE_API_TIMEOUT_MS: z.coerce.number().int().positive().default(30_000),
+  VITE_AUTH_HEADER_NAME: z.string().min(1).default('Authorization'),
+  VITE_AUDIT_ENDPOINT: z.string().min(1).default('/api/audit'),
+  VITE_AUDIT_BATCH_SIZE: z.coerce.number().int().positive().default(20),
+  VITE_AUDIT_FLUSH_INTERVAL_MS: z.coerce.number().int().positive().default(5_000),
+  VITE_SENTRY_DSN: z.string().optional(),
+  VITE_IDLE_TIMEOUT_MS: z.coerce.number().int().positive().default(900_000),
+  VITE_SENSITIVE_IDLE_TIMEOUT_MS: z.coerce.number().int().positive().default(300_000),
+  VITE_FEATURE_FLAGS_PROVIDER: z.enum(['local', 'growthbook', 'unleash']).default('local'),
+});
+export type Env = z.infer<typeof envSchema>;
+function load(): Env {
+  const parsed = envSchema.safeParse(import.meta.env);
+  if (!parsed.success) {
+    const issues = parsed.error.issues
+      .map((i) => `  ${i.path.join('.')}: ${i.message}`)
+      .join('\n');
+    throw new Error(`Invalid environment variables:\n${issues}`);
+  }
+  return parsed.data;
+}
+export const env: Env = load();

package/templates/_shared/src/i18n/i18n.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import en from './translations/en.json';
+import hi from './translations/hi.json';
+void i18n.use(initReactI18next).init({
+  resources: {
+    en: { translation: en },
+    hi: { translation: hi },
+  },
+  lng: 'en',
+  fallbackLng: 'en',
+  interpolation: {
+    escapeValue: false, // React already escapes
+  },
+});
+export default i18n;

package/templates/_shared/src/i18n/translations/en.json ADDED Viewed

@@ -0,0 +1,54 @@
+{
+  "app": {
+    "name": "{{projectName}}",
+    "loading": "Loading…",
+    "empty": "Nothing to show"
+  },
+  "errors": {
+    "network": {
+      "title": "Can't reach the server",
+      "description": "Check your internet connection and try again."
+    },
+    "timeout": {
+      "title": "Request took too long",
+      "description": "Please try again."
+    },
+    "session_expired": {
+      "title": "Session expired",
+      "description": "Please sign in again."
+    },
+    "forbidden": {
+      "title": "Not allowed",
+      "description": "You don't have access to this. Contact your administrator if you think this is wrong."
+    },
+    "not_found": {
+      "title": "Not found",
+      "description": "The page or resource you were looking for doesn't exist."
+    },
+    "validation": {
+      "title": "Check your inputs",
+      "description": "Some fields need attention before we can proceed."
+    },
+    "rate_limited": {
+      "title": "Too many attempts",
+      "description": "Please wait a moment and try again."
+    },
+    "server": {
+      "title": "Something went wrong on our end",
+      "description": "Please try again in a moment. (Ref: {{ref}})"
+    },
+    "generic": {
+      "title": "Something went wrong",
+      "description": "Please try again. If it persists, contact support with reference {{ref}}."
+    }
+  },
+  "pii": {
+    "reveal": {
+      "pan": "Reveal PAN",
+      "aadhaar": "Reveal Aadhaar",
+      "account": "Reveal account number",
+      "mobile": "Reveal mobile",
+      "email": "Reveal email"
+    }
+  }
+}

package/templates/_shared/src/i18n/translations/hi.json ADDED Viewed

@@ -0,0 +1,30 @@
+{
+  "app": {
+    "name": "{{projectName}}",
+    "loading": "लोड हो रहा है…",
+    "empty": "कुछ नहीं दिखाने को"
+  },
+  "errors": {
+    "network": {
+      "title": "सर्वर तक नहीं पहुंच पा रहे",
+      "description": "अपना इंटरनेट कनेक्शन जांचें और फिर से प्रयास करें।"
+    },
+    "session_expired": {
+      "title": "सत्र समाप्त हो गया",
+      "description": "कृपया फिर से साइन इन करें।"
+    },
+    "generic": {
+      "title": "कुछ गलत हुआ",
+      "description": "फिर से प्रयास करें। यदि समस्या बनी रहती है, तो रेफरेंस {{ref}} के साथ समर्थन से संपर्क करें।"
+    }
+  },
+  "pii": {
+    "reveal": {
+      "pan": "पैन दिखाएं",
+      "aadhaar": "आधार दिखाएं",
+      "account": "खाता संख्या दिखाएं",
+      "mobile": "मोबाइल दिखाएं",
+      "email": "ईमेल दिखाएं"
+    }
+  }
+}

package/templates/_shared/src/main.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './app/globals.css';
+import { App } from './app/App.js';
+import './i18n/i18n.js';
+const root = document.getElementById('root');
+if (!root) {
+  throw new Error('root element not found');
+}
+ReactDOM.createRoot(root).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/templates/_shared/src/routes/ProtectedRoute.tsx ADDED Viewed

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+/**
+ * v0.1 stub. Wire up to your auth context once you have it.
+ *
+ * Expected behaviour:
+ *  - If not authenticated → redirect to /login (with `from` for return)
+ *  - If authenticated but lacks `permission` → render 403 + emit audit event
+ *  - Else → render children
+ */
+export interface ProtectedRouteProps {
+  permission?: string;
+  /** Override idle timeout for this route (in ms). */
+  idleTimeoutMs?: number;
+  children: ReactNode;
+}
+export function ProtectedRoute({ permission: _permission, children }: ProtectedRouteProps): JSX.Element {
+  const location = useLocation();
+  // TODO: wire to actual auth context
+  const isAuthenticated = true; // placeholder
+  if (!isAuthenticated) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+  // TODO: check permission against user's permission set
+  return <>{children}</>;
+}

package/templates/_shared/src/routes/index.tsx ADDED Viewed

@@ -0,0 +1,67 @@
+import { Routes, Route } from 'react-router-dom';
+import { ProtectedRoute } from './ProtectedRoute.js';
+export function AppRoutes(): JSX.Element {
+  return (
+    <Routes>
+      <Route path="/" element={<Landing />} />
+      <Route path="/login" element={<Login />} />
+      <Route
+        path="/dashboard"
+        element={
+          <ProtectedRoute permission="dashboard.view">
+            <Dashboard />
+          </ProtectedRoute>
+        }
+      />
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  );
+}
+function Landing(): JSX.Element {
+  return (
+    <main className="container mx-auto py-12">
+      <h1 className="text-3xl font-bold tracking-tight">{`{{projectName}}`}</h1>
+      <p className="mt-2 text-muted-foreground">
+        Scaffolded from @react-vault/create-app. Go to{' '}
+        <a className="underline" href="/dashboard">
+          /dashboard
+        </a>
+        .
+      </p>
+      <p className="mt-4 text-sm text-muted-foreground">
+        Run <code className="rounded bg-muted px-1.5 py-0.5">claude</code> in this directory to
+        start a Claude Code session with the BFSI toolkit enabled. Then run{' '}
+        <code className="rounded bg-muted px-1.5 py-0.5">/bfsi-doctor</code>.
+      </p>
+    </main>
+  );
+}
+function Login(): JSX.Element {
+  return (
+    <main className="container mx-auto py-12">
+      <h1 className="text-2xl font-semibold">Sign in</h1>
+      <p className="mt-2 text-muted-foreground">Login form goes here.</p>
+    </main>
+  );
+}
+function Dashboard(): JSX.Element {
+  return (
+    <main className="container mx-auto py-12">
+      <h1 className="text-2xl font-semibold">Dashboard</h1>
+      <p className="mt-2 text-muted-foreground">Protected by &lt;ProtectedRoute&gt;.</p>
+    </main>
+  );
+}
+function NotFound(): JSX.Element {
+  return (
+    <main className="container mx-auto py-12">
+      <h1 className="text-2xl font-semibold">Not found</h1>
+      <p className="mt-2 text-muted-foreground">The page you were looking for doesn't exist.</p>
+    </main>
+  );
+}

package/templates/_shared/src/shared/ErrorBoundary.tsx ADDED Viewed

@@ -0,0 +1,60 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+import { generateErrorRef } from '@react-vault/core/audit';
+interface Props {
+  children: ReactNode;
+}
+interface State {
+  errorRef: string | null;
+}
+/**
+ * BFSI error boundary. Catches render errors; shows a generic safe message
+ * with a ref code that maps to a full log entry.
+ *
+ * NEVER expose error.message / error.stack to the UI — that leaks technical
+ * detail per the bfsi-error-message skill.
+ */
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { errorRef: null };
+  static getDerivedStateFromError(_error: Error): State {
+    return { errorRef: generateErrorRef() };
+  }
+  componentDidCatch(error: Error, info: ErrorInfo): void {
+    // Forward to your observability (PII-scrubbed). Replace with your client.
+    // For now, log to console with structure.
+    // eslint-disable-next-line no-console
+    console.error('[error-boundary]', {
+      ref: this.state.errorRef,
+      message: error.message,
+      stack: error.stack,
+      componentStack: info.componentStack,
+    });
+  }
+  render(): ReactNode {
+    if (this.state.errorRef) {
+      return (
+        <main className="container mx-auto py-12">
+          <h1 className="text-2xl font-semibold">Something went wrong</h1>
+          <p className="mt-2 text-muted-foreground">
+            We're sorry — an unexpected error occurred. If this persists, contact support with this
+            reference:
+          </p>
+          <code className="mt-4 inline-block rounded bg-muted px-2 py-1 font-mono text-sm">
+            {this.state.errorRef}
+          </code>
+          <div className="mt-6">
+            <a className="underline" href="/">
+              Go back to home
+            </a>
+          </div>
+        </main>
+      );
+    }
+    return this.props.children;
+  }
+}

package/templates/_shared/tailwind.config.ts ADDED Viewed

@@ -0,0 +1,68 @@
+import type { Config } from 'tailwindcss';
+import animate from 'tailwindcss-animate';
+const config: Config = {
+  darkMode: ['class'],
+  content: [
+    './index.html',
+    './src/**/*.{ts,tsx}',
+    './node_modules/@react-vault/ui/dist/**/*.{js,mjs}',
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: { '2xl': '1400px' },
+    },
+    extend: {
+      colors: {
+        // shadcn/ui semantic colors (CSS vars in app/globals.css)
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        // BFSI status colours
+        status: {
+          pending: 'hsl(38 92% 50%)',
+          approved: 'hsl(142 71% 45%)',
+          rejected: 'hsl(0 84% 60%)',
+          review: 'hsl(217 91% 60%)',
+          expired: 'hsl(240 5% 50%)',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
+      },
+    },
+  },
+  plugins: [animate],
+};
+export default config;

package/templates/_shared/tests/setup.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom/vitest';
+import { afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+afterEach(() => {
+  cleanup();
+});

package/templates/_shared/tsconfig.json ADDED Viewed

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "useUnknownInCatchVariables": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": ["vite/client", "node"]
+  },
+  "include": ["src", "tests"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/_shared/tsconfig.node.json ADDED Viewed

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts", "tailwind.config.ts", "postcss.config.cjs", "playwright.config.ts"]
+}