{"_id":"@ashokparmar/embeddable-booking-plugin","name":"@ashokparmar/embeddable-booking-plugin","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ashokparmar/embeddable-booking-plugin","version":"1.0.0","description":"Embeddable React 19 booking flow (staff, services, schedule, confirm) with Tailwind CSS and optional video carousel.","keywords":["react","react-19","booking","appointment","tailwind","embed","widget","pos"],"homepage":"https://github.com/AshokParmar24/booking-slot#readme","bugs":{"url":"https://github.com/AshokParmar24/booking-slot/issues"},"repository":{"type":"git","url":"git+https://github.com/AshokParmar24/booking-slot.git"},"license":"MIT","author":{"name":"ashokparmar"},"type":"module","exports":{".":{"import":"./dist/index.js"},"./styles.css":"./dist/index.css"},"main":"./dist/index.js","scripts":{"build":"vite build","dev":"vite --config vite.demo.config.js","preview":"vite preview --config vite.demo.config.js","prepublishOnly":"npm run build"},"dependencies":{"baseline-browser-mapping":"^2.10.16","browserslist":"^4.28.2","caniuse-lite":"^1.0.30001787","convert-source-map":"^2.0.0","debug":"^4.4.3","detect-libc":"^2.1.2","electron-to-chromium":"^1.5.332","enhanced-resolve":"^5.20.1","escalade":"^3.2.0","fdir":"^6.5.0","fraction.js":"^5.3.4","gensync":"^1.0.0-beta.2","graceful-fs":"^4.2.11","jiti":"^2.6.1","js-tokens":"^4.0.0","jsesc":"^3.1.0","json5":"^2.2.3","lightningcss":"^1.32.0","lightningcss-win32-x64-msvc":"^1.32.0","magic-string":"^0.30.21","ms":"^2.1.3","nanoid":"^3.3.11","node-releases":"^2.0.37","picocolors":"^1.1.1","picomatch":"^4.0.4","postcss-value-parser":"^4.2.0","react-refresh":"^0.18.0","rolldown":"^1.0.0-rc.13","scheduler":"^0.27.0","source-map-js":"^1.2.1","tapable":"^2.3.2","tinyglobby":"^0.2.16","tslib":"^2.8.1","update-browserslist-db":"^1.2.3"},"devDependencies":{"@tailwindcss/vite":"^4.2.2","@vitejs/plugin-react":"^5.1.2","autoprefixer":"^10.4.23","postcss":"^8.5.6","react":"^19.2.3","react-dom":"^19.2.3","tailwindcss":"^4.2.2","vite":"^8.0.7"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"module":"./dist/index.js","sideEffects":["**/*.css"],"gitHead":"550b99b28af12efff23dc78b16ab77360a3ec160","_id":"@ashokparmar/embeddable-booking-plugin@1.0.0","_nodeVersion":"22.9.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-GJQe0iQXw6yd9XkqKS2nwq1o4TOQZDe9JaFTODiHbIrZ7sBI1WYgl6rhWSY++7RJv7AB5pwn/tQfB1or+X7Q6A==","shasum":"90e997daf8b28cb75a8054c64eefe3ce96372a0b","tarball":"https://registry.npmjs.org/@ashokparmar/embeddable-booking-plugin/-/embeddable-booking-plugin-1.0.0.tgz","fileCount":6,"unpackedSize":797035,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHBTtwpt8DDpg2iV/JTmh8ZjB5fnZYF1jEXIatezhdcTAiBcXWDMLRg+OKWnoe72uGBSlldU6DsxlY5Op42JAKWWeg=="}]},"_npmUser":{"name":"ashokparmar","email":"ashokparmar72038@gmail.com"},"directories":{},"maintainers":[{"name":"ashokparmar","email":"ashokparmar72038@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/embeddable-booking-plugin_1.0.0_1775666327469_0.30452468595438886"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-08T16:38:47.352Z","1.0.0":"2026-04-08T16:38:47.642Z","modified":"2026-04-08T16:38:47.885Z"},"maintainers":[{"name":"ashokparmar","email":"ashokparmar72038@gmail.com"}],"description":"Embeddable React 19 booking flow (staff, services, schedule, confirm) with Tailwind CSS and optional video carousel.","homepage":"https://github.com/AshokParmar24/booking-slot#readme","keywords":["react","react-19","booking","appointment","tailwind","embed","widget","pos"],"repository":{"type":"git","url":"git+https://github.com/AshokParmar24/booking-slot.git"},"author":{"name":"ashokparmar"},"bugs":{"url":"https://github.com/AshokParmar24/booking-slot/issues"},"license":"MIT","readme":"# embeddable-booking-plugin\n\nA reusable **React 19** booking widget styled with **Tailwind CSS v4**, designed to drop into marketing sites, kiosks, or POS webviews. It covers the full flow—**staff → services → date/time → confirmation**—and can talk to your backend through a small **API interface**. An optional **video carousel** appears only when enabled in settings.\n\n## Install\n\n```bash\nnpm install embeddable-booking-plugin react react-dom\n```\n\nPeer dependencies: `react` and `react-dom` **^19**.\n\n## Styles\n\nImport the compiled stylesheet **once** in your app (or shell that loads the widget):\n\n```js\nimport 'embeddable-booking-plugin/styles.css'\n```\n\n## React usage\n\n```jsx\nimport { BookingPlugin } from 'embeddable-booking-plugin'\nimport 'embeddable-booking-plugin/styles.css'\n\n// Option A: JSON data mode (no backend)\nconst data = {\n  staff: [{ id: 's1', name: 'Jordan Lee' }],\n  services: [{ id: 'v1', name: 'Signature cut', durationMinutes: 45, priceCents: 6500, staffIds: ['s1'] }],\n  slots: [\n    {\n      id: 'slot1',\n      staffId: 's1',\n      date: '2026-04-08',\n      startIso: '2026-04-08T09:00:00',\n      endIso: '2026-04-08T09:45:00',\n      label: '09:00',\n    },\n  ],\n  bookingResult: (payload) => ({\n    id: 'local_1',\n    reference: 'LOCAL-1234',\n    status: 'confirmed',\n    message: 'Saved locally.',\n    payload,\n  }),\n}\n\nexport function Page() {\n  return (\n    <BookingPlugin\n      data={data}\n      settings={{\n        businessName: 'Studio North',\n        tagline: 'Book in under a minute.',\n        showVideoGallery: true,\n        videoGalleryTitle: 'See the space',\n        videos: [\n          { id: '1', title: 'Tour', src: 'https://www.youtube.com/watch?v=VIDEO_ID', type: 'youtube' },\n          { id: '2', title: 'Promo', src: 'https://example.com/clips/promo.mp4', type: 'file' },\n        ],\n        currencyCode: 'USD',\n        locale: 'en-US',\n      }}\n      onStepChange={(step) => console.log('step', step)}\n      onBookingComplete={(result, payload) => console.log('booked', result, payload)}\n    />\n  )\n}\n```\n\n### Video section\n\n- Set `settings.showVideoGallery` to `true` **and** provide a non-empty `settings.videos` array to show the carousel.\n- If `showVideoGallery` is `false`, omitted, or `videos` is empty, the video block is **not rendered**.\n\nSupported `VideoGalleryItem` shapes:\n\n- **File / progressive download:** `type: 'file'` (or omit) and `src` pointing to an MP4/WebM; optional `thumbnailUrl` for the poster.\n- **YouTube:** `type: 'youtube'` or a `youtube.com` / `youtu.be` URL in `src`.\n- **Generic embed:** `type: 'embed'` and `src` set to an embeddable HTTPS URL (iframe `src`).\n\n## Embed in any page (vanilla host)\n\n```js\nimport { mountBookingPlugin } from 'embeddable-booking-plugin'\nimport 'embeddable-booking-plugin/styles.css'\n\nmountBookingPlugin('#booking-root', {\n  data,\n  settings: { businessName: 'Main St. Salon' },\n})\n```\n\n## API integration\n\nThe plugin supports two integration modes:\n\n- **JSON data mode**: pass `data` (staff/services/slots) — no backend needed.\n- **API mode**: pass an `api` object with these methods:\n\n| Method | Default path (customize in your backend) |\n|--------|----------------------------------------|\n| `listStaff` | `GET /staff` |\n| `listServices` | `GET /staff/:id/services` |\n| `listSlots` | `GET /slots?staffId=&date=&serviceIds=` |\n| `createBooking` | `POST /bookings` |\n\nAll methods should return JSON. If your backend returns extra fields in `createBooking`, the confirmation screen will show them under **“View returned booking details”**.\n\n## Local demo\n\n```bash\nnpm install\nnpm run dev\n```\n\n## Build & publish\n\n```bash\nnpm run build\nnpm publish --access public\n```\n\nThe `prepublishOnly` script runs the build automatically.\n\n## License\n\nMIT\n#\u0000 \u0000b\u0000o\u0000o\u0000k\u0000i\u0000n\u0000g\u0000-\u0000s\u0000l\u0000o\u0000t\u0000\r\u0000\n\u0000","readmeFilename":"README.md","_rev":"1-ab7253d528cc62fe9ed17cde65def7cc"}