@voyantjs/booking-requirements-ui 0.13.0

package/README.md

@@ -0,0 +1,17 @@
+# @voyantjs/booking-requirements-ui
+
+Importable React UI components for Voyant booking-requirements. Bundler-consumed (Vite, Next.js, webpack, etc.).
+
+## Install
+
+```bash
+pnpm add @voyantjs/booking-requirements-ui @voyantjs/booking-requirements-react @voyantjs/voyant-ui @tanstack/react-query react react-dom
+```
+
+`@voyantjs/voyant-ui` provides the design-system primitives. `@voyantjs/booking-requirements-react` provides the data-layer hooks. Both are required peers.
+
+All components accept a `className` prop and merge it with `cn()`. Wrap or compose to extend; use the registry copy-paste path (`npx shadcn add @voyant/...`) for components you want to fork outright.
+
+## Not included (registry-only)
+
+Some components couple to TanStack Router or template-local helpers and remain available only via the shadcn registry: `booking-question-dialog`, `contact-requirement-dialog`, `question-option-dialog`. Import via `npx shadcn add @voyant/<component>` and customize per-project.

package/dist/components/booking-requirements-contact-tab.d.ts

@@ -0,0 +1,8 @@
+import type { ContactRequirement } from "@voyantjs/booking-requirements-react";
+export declare function BookingRequirementsContactTab({ rows, onCreate, onEdit, onDelete, }: {
+    rows: ContactRequirement[];
+    onCreate: () => void;
+    onEdit: (row: ContactRequirement) => void;
+    onDelete: (row: ContactRequirement) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-requirements-contact-tab.d.ts.map

package/dist/components/booking-requirements-contact-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-requirements-contact-tab.d.ts","sourceRoot":"","sources":["../../src/components/booking-requirements-contact-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAA;AAI9E,wBAAgB,6BAA6B,CAAC,EAC5C,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,kBAAkB,EAAE,CAAA;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAA;IACzC,QAAQ,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAA;CAC5C,2CAyFA"}

package/dist/components/booking-requirements-contact-tab.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button } from "@voyantjs/voyant-ui/components";
+import { Pencil, Plus, Trash2 } from "lucide-react";
+export function BookingRequirementsContactTab({ rows, onCreate, onEdit, onDelete, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold", children: "Contact Requirements" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Standard traveler fields collected at booking (name, email, passport, etc.)." })] }), _jsxs(Button, { size: "sm", onClick: onCreate, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Add Requirement"] })] }), rows.length === 0 ? (_jsx("div", { className: "rounded-md border border-dashed p-8 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No contact requirements yet. Add one to start collecting traveler data." }) })) : (_jsx("div", { className: "rounded-md border bg-background", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b text-muted-foreground", children: [_jsx("th", { className: "p-3 text-left font-medium", children: "Field" }), _jsx("th", { className: "p-3 text-left font-medium", children: "Scope" }), _jsx("th", { className: "p-3 text-left font-medium", children: "Required" }), _jsx("th", { className: "p-3 text-left font-medium", children: "Per Traveler" }), _jsx("th", { className: "p-3 text-left font-medium", children: "Sort" }), _jsx("th", { className: "p-3 text-left font-medium", children: "Status" }), _jsx("th", { className: "w-20 p-3" })] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsx("td", { className: "p-3 font-medium capitalize", children: row.fieldKey.replace(/_/g, " ") }), _jsx("td", { className: "p-3 capitalize text-muted-foreground", children: row.scope.replace("_", " ") }), _jsx("td", { className: "p-3", children: row.isRequired ? (_jsx(Badge, { variant: "default", children: "Required" })) : (_jsx(Badge, { variant: "outline", children: "Optional" })) }), _jsx("td", { className: "p-3", children: row.perTraveler ? (_jsx(Badge, { variant: "secondary", children: "Yes" })) : (_jsx("span", { className: "text-xs text-muted-foreground", children: "No" })) }), _jsx("td", { className: "p-3 font-mono text-xs", children: row.sortOrder }), _jsx("td", { className: "p-3", children: _jsx(Badge, { variant: row.active ? "default" : "outline", children: row.active ? "Active" : "Inactive" }) }), _jsx("td", { className: "p-3", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => onEdit(row), className: "text-muted-foreground hover:text-foreground", children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: () => onDelete(row), className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }) })] }, row.id))) })] }) }))] }));
+}

package/dist/components/booking-requirements-questions-tab.d.ts

@@ -0,0 +1,14 @@
+import { type BookingQuestion, type BookingQuestionOption } from "@voyantjs/booking-requirements-react";
+export declare function BookingRequirementsQuestionsTab({ rows, expandedIds, questionOptionsById, onToggle, onCreate, onEdit, onDelete, onCreateOption, onEditOption, onDeleteOption, }: {
+    rows: BookingQuestion[];
+    expandedIds: Set<string>;
+    questionOptionsById: Map<string, BookingQuestionOption[]>;
+    onToggle: (questionId: string) => void;
+    onCreate: () => void;
+    onEdit: (question: BookingQuestion) => void;
+    onDelete: (question: BookingQuestion) => void;
+    onCreateOption: (question: BookingQuestion, nextSort: number) => void;
+    onEditOption: (question: BookingQuestion, option: BookingQuestionOption) => void;
+    onDeleteOption: (option: BookingQuestionOption) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-requirements-questions-tab.d.ts.map

package/dist/components/booking-requirements-questions-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-requirements-questions-tab.d.ts","sourceRoot":"","sources":["../../src/components/booking-requirements-questions-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,qBAAqB,EAE3B,MAAM,sCAAsC,CAAA;AAI7C,wBAAgB,+BAA+B,CAAC,EAC9C,IAAI,EACJ,WAAW,EACX,mBAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,cAAc,GACf,EAAE;IACD,IAAI,EAAE,eAAe,EAAE,CAAA;IACvB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACxB,mBAAmB,EAAE,GAAG,CAAC,MAAM,EAAE,qBAAqB,EAAE,CAAC,CAAA;IACzD,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAA;IAC3C,QAAQ,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAA;IAC7C,cAAc,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACrE,YAAY,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAA;IAChF,cAAc,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAA;CACxD,2CA0KA"}

package/dist/components/booking-requirements-questions-tab.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SELECT_TYPES, } from "@voyantjs/booking-requirements-react";
+import { Badge, Button } from "@voyantjs/voyant-ui/components";
+import { Pencil, Plus, Trash2 } from "lucide-react";
+export function BookingRequirementsQuestionsTab({ rows, expandedIds, questionOptionsById, onToggle, onCreate, onEdit, onDelete, onCreateOption, onEditOption, onDeleteOption, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold", children: "Custom Questions" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Product-specific questions asked at booking (dietary needs, preferences, etc.)." })] }), _jsxs(Button, { size: "sm", onClick: onCreate, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Add Question"] })] }), rows.length === 0 ? (_jsx("div", { className: "rounded-md border border-dashed p-8 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No questions yet. Add one to collect custom data at booking." }) })) : (_jsx("div", { className: "flex flex-col gap-2", children: rows.map((question) => {
+                    const expanded = expandedIds.has(question.id);
+                    const options = (questionOptionsById.get(question.id) ?? []).slice();
+                    const hasChoices = SELECT_TYPES.has(question.fieldType);
+                    const nextSort = options.length > 0 ? Math.max(...options.map((option) => option.sortOrder)) + 1 : 0;
+                    return (_jsxs("div", { className: "rounded-md border", children: [_jsxs("div", { className: "flex items-center gap-3 p-3", children: [_jsx("button", { type: "button", onClick: () => onToggle(question.id), className: "text-sm text-muted-foreground hover:text-foreground", children: expanded ? "Hide" : "Show" }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium", children: question.label }), question.code ? (_jsx("span", { className: "font-mono text-xs text-muted-foreground", children: question.code })) : null, _jsx(Badge, { variant: "outline", className: "capitalize", children: question.fieldType.replace("_", " ") }), _jsx(Badge, { variant: "secondary", className: "capitalize", children: question.target.replace("_", " ") }), question.isRequired ? _jsx(Badge, { variant: "default", children: "Required" }) : null, _jsx(Badge, { variant: question.active ? "default" : "outline", children: question.active ? "Active" : "Inactive" })] }), question.description ? (_jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: question.description })) : null] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onEdit(question), children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => onDelete(question), children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] })] }), expanded ? (_jsxs("div", { className: "border-t bg-muted/30 p-3", children: [!hasChoices ? (_jsx("p", { className: "py-2 text-center text-xs text-muted-foreground", children: "Choice options only apply to single-select / multi-select field types." })) : null, hasChoices ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Choices" }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => onCreateOption(question, nextSort), children: [_jsx(Plus, { className: "mr-1 h-3 w-3" }), "Add Choice"] })] }), options.length === 0 ? (_jsx("p", { className: "py-2 text-center text-xs text-muted-foreground", children: "No choices yet." })) : (_jsx("div", { className: "rounded border bg-background", children: _jsxs("table", { className: "w-full text-xs", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b text-muted-foreground", children: [_jsx("th", { className: "p-2 text-left font-medium", children: "Sort" }), _jsx("th", { className: "p-2 text-left font-medium", children: "Value" }), _jsx("th", { className: "p-2 text-left font-medium", children: "Label" }), _jsx("th", { className: "p-2 text-left font-medium", children: "Default" }), _jsx("th", { className: "p-2 text-left font-medium", children: "Status" }), _jsx("th", { className: "w-16 p-2" })] }) }), _jsx("tbody", { children: options.map((option) => (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsx("td", { className: "p-2 font-mono", children: option.sortOrder }), _jsx("td", { className: "p-2 font-mono text-muted-foreground", children: option.value }), _jsx("td", { className: "p-2", children: option.label }), _jsx("td", { className: "p-2", children: option.isDefault ? (_jsx(Badge, { variant: "secondary", children: "Default" })) : (_jsx("span", { className: "text-muted-foreground", children: "-" })) }), _jsx("td", { className: "p-2", children: _jsx(Badge, { variant: option.active ? "default" : "outline", children: option.active ? "Active" : "Inactive" }) }), _jsx("td", { className: "p-2", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => onEditOption(question, option), className: "text-muted-foreground hover:text-foreground", children: _jsx(Pencil, { className: "h-3 w-3" }) }), _jsx("button", { type: "button", onClick: () => onDeleteOption(option), className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3 w-3" }) })] }) })] }, option.id))) })] }) }))] })) : null] })) : null] }, question.id));
+                }) }))] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { BookingRequirementsContactTab } from "./components/booking-requirements-contact-tab";
+export { BookingRequirementsQuestionsTab } from "./components/booking-requirements-questions-tab";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,+CAA+C,CAAA;AAC7F,OAAO,EAAE,+BAA+B,EAAE,MAAM,iDAAiD,CAAA"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { BookingRequirementsContactTab } from "./components/booking-requirements-contact-tab";
+export { BookingRequirementsQuestionsTab } from "./components/booking-requirements-questions-tab";

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@voyantjs/booking-requirements-ui",
+  "version": "0.13.0",
+  "license": "FSL-1.1-Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/voyantjs/voyant.git",
+    "directory": "packages/booking-requirements-ui"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": "./src/index.ts",
+    "./components/*": "./src/components/*.tsx"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "prepack": "pnpm run build",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check src/",
+    "test": "vitest run --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "@voyantjs/booking-requirements-react": "workspace:*",
+    "@voyantjs/voyant-ui": "workspace:*",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.96.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@voyantjs/booking-requirements-react": "workspace:*",
+    "@voyantjs/voyant-typescript-config": "workspace:*",
+    "@voyantjs/voyant-ui": "workspace:*",
+    "lucide-react": "^0.475.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.2"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      },
+      "./components/*": {
+        "types": "./dist/components/*.d.ts",
+        "import": "./dist/components/*.js"
+      }
+    },
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts"
+  }
+}