@zuii/booking 0.1.1

package/dist/style/booking.css

@@ -0,0 +1,124 @@
+:root {
+  --booking-bg: var(--white);
+  --booking-color: var(--primary);
+  --booking-text: var(--booking-color);
+  --booking-selected-bg: #3c4e62;
+  --booking-selected-text: #fff;
+  --booking-footer-bg: #3c4e62;
+  --booking-footer-text: #fff;
+  --booking-radius: var(--radius-base);
+  --booking-gap: 1rem;
+}
+
+.booking-wrapper {
+  display: flex;
+  gap: var(--booking-gap);
+  flex-wrap: wrap;
+}
+
+.booking__calendar-column {
+  flex: 1;
+  max-width: 100%;
+}
+@media (max-width: 450px) {
+  .booking__calendar-column {
+    width: 100%;
+  }
+}
+
+.booking__slots-column {
+  flex: 1;
+}
+
+.booking {
+  width: 100%;
+  border-radius: var(--booking-radius);
+  overflow: hidden;
+  color: var(--booking-text);
+  user-select: none;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.booking--empty {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  background: var(--booking-bg);
+  border: 1px dashed var(--booking-color);
+  border-radius: var(--booking-radius);
+}
+
+.booking__empty-message {
+  text-align: center;
+  color: #94a3b8;
+  padding: 40px;
+}
+.booking__empty-message svg {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+.booking__empty-message p {
+  font-size: 16px;
+  margin: 0;
+}
+
+.booking__slots {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  gap: 15px;
+}
+
+.booking__slot {
+  background: var(--booking-bg);
+  padding: 20px 10px;
+  border: none;
+  border-radius: 4px;
+  text-align: center;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 20px;
+  color: var(--booking-text);
+  transition: all 0.2s;
+}
+.booking__slot:hover {
+  background: color-mix(in srgb, var(--booking-bg), #000 5%);
+}
+
+.booking__slot--selected {
+  background: var(--booking-selected-bg);
+  color: var(--booking-selected-text);
+}
+
+.booking__slot--range {
+  background: color-mix(in srgb, var(--booking-selected-bg), transparent 60%);
+  color: var(--booking-selected-text);
+}
+
+.booking__footer {
+  background: var(--booking-footer-bg);
+  color: var(--booking-footer-text);
+  padding: 25px;
+  border-radius: 4px;
+  text-align: left;
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.booking__empty {
+  color: #6c757d;
+  font-style: italic;
+}
+
+.booking__title {
+  font-size: 1.2rem;
+  color: var(--booking-text);
+}
+
+/*# sourceMappingURL=booking.css.map */

package/dist/style/booking.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/style/_booking.scss","../../src/style/_booking-empty-message.scss","../../src/style/_booking-slots.scss","../../src/style/_booking-slot.scss","../../src/style/_booking-footer.scss","../../src/style/_booking-empty.scss","../../src/style/_booking-title.scss"],"names":[],"mappings":"AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAKD;EACC;EAEA;;AAEA;EALD;IAME;;;;AAIF;EACC;;;AAKD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACvDD;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;;;ACdF;EACC;EACA;EACA;;;ACHD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;;;ACxBD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACRD;EACC;EACA;;;ACFD;EACC;EACA","file":"booking.css"}

package/dist/style/booking.min.css

@@ -0,0 +1 @@
+:root{--booking-bg: var(--white);--booking-color: var(--primary);--booking-text: var(--booking-color);--booking-selected-bg: #3c4e62;--booking-selected-text: #fff;--booking-footer-bg: #3c4e62;--booking-footer-text: #fff;--booking-radius: var(--radius-base);--booking-gap: 1rem}.booking-wrapper{display:flex;gap:var(--booking-gap);flex-wrap:wrap}.booking__calendar-column{flex:1;max-width:100%}@media(max-width: 450px){.booking__calendar-column{width:100%}}.booking__slots-column{flex:1}.booking{width:100%;border-radius:var(--booking-radius);overflow:hidden;color:var(--booking-text);user-select:none;display:flex;flex-direction:column;height:100%}.booking--empty{display:flex;flex-direction:column;height:100%;justify-content:center;align-items:center;background:var(--booking-bg);border:1px dashed var(--booking-color);border-radius:var(--booking-radius)}.booking__empty-message{text-align:center;color:#94a3b8;padding:40px}.booking__empty-message svg{width:48px;height:48px;margin-bottom:16px;opacity:.5}.booking__empty-message p{font-size:16px;margin:0}.booking__slots{display:grid;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));gap:15px}.booking__slot{background:var(--booking-bg);padding:20px 10px;border:none;border-radius:4px;text-align:center;cursor:pointer;font-weight:700;font-size:20px;color:var(--booking-text);transition:all .2s}.booking__slot:hover{background:color-mix(in srgb, var(--booking-bg), #000 5%)}.booking__slot--selected{background:var(--booking-selected-bg);color:var(--booking-selected-text)}.booking__slot--range{background:color-mix(in srgb, var(--booking-selected-bg), transparent 60%);color:var(--booking-selected-text)}.booking__footer{background:var(--booking-footer-bg);color:var(--booking-footer-text);padding:25px;border-radius:4px;text-align:left;font-size:22px;font-weight:400;line-height:1.4}.booking__empty{color:#6c757d;font-style:italic}.booking__title{font-size:1.2rem;color:var(--booking-text)}/*# sourceMappingURL=booking.min.css.map */

package/dist/style/booking.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/style/_booking.scss","../../src/style/_booking-empty-message.scss","../../src/style/_booking-slots.scss","../../src/style/_booking-slot.scss","../../src/style/_booking-footer.scss","../../src/style/_booking-empty.scss","../../src/style/_booking-title.scss"],"names":[],"mappings":"AAAA,MACC,2BACA,gCACA,qCACA,+BACA,8BACA,6BACA,4BACA,qCACA,oBAGD,iBACC,aACA,uBACA,eAKD,0BACC,OAEA,eAEA,yBALD,0BAME,YAIF,uBACC,OAKD,SACC,WACA,oCACA,gBACA,0BACA,iBACA,aACA,sBACA,YAGD,gBACC,aACA,sBACA,YACA,uBACA,mBACA,6BACA,uCACA,oCCvDD,wBACC,kBACA,cACA,aAEA,4BACC,WACA,YACA,mBACA,WAGD,0BACC,eACA,SCdF,gBACC,aACA,4DACA,SCHD,eACC,6BACA,kBACA,YACA,kBACA,kBACA,eACA,gBACA,eACA,0BACA,mBAEA,qBACC,0DAIF,yBACC,sCACA,mCAGD,sBACC,2EACA,mCCxBD,iBACC,oCACA,iCACA,aACA,kBACA,gBACA,eACA,gBACA,gBCRD,gBACC,cACA,kBCFD,gBACC,iBACA","file":"booking.min.css"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@zuii/booking",
+  "version": "0.1.1",
+  "type": "module",
+  "description": "Composant Booking pour zuii",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/symfony"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs"
+    },
+    "./symfony": "./src/symfony/booking_controller.ts",
+    "./style": "./dist/style/booking.css"
+  },
+  "dependencies": {
+    "date-fns": "^4.1.0",
+    "@zuii/calendar": "0.1.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "@zuii/core": "1.0.0"
+  },
+  "keywords": [
+    "zuii",
+    "booking",
+    "reservation"
+  ],
+  "author": "Vincent Moreau",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "pnpm build:js && pnpm build:css && pnpm build:css:min",
+    "build:css": "sass src/style/index.scss dist/style/booking.css --load-path=node_modules --silence-deprecation=import",
+    "build:css:min": "sass src/style/index.scss dist/style/booking.min.css --style=compressed --load-path=node_modules --silence-deprecation=import",
+    "build:js": "tsup",
+    "dev": "pnpm build:js && pnpm build:css && tsup --watch"
+  }
+}

package/src/symfony/README.md

@@ -0,0 +1,40 @@
+# Intégration Symfony pour @zuii/booking
+
+Ce dossier contient le contrôleur Stimulus pour utiliser l'interface de réservation dans un projet Symfony.
+
+## Installation
+
+Assurez-vous d'avoir installé le package via npm/pnpm :
+```bash
+pnpm add @zuii/booking @zuii/calendar
+```
+
+## Utilisation
+
+### 1. Enregistrement du contrôleur
+Dans votre fichier `assets/controllers.json`, importez le contrôleur :
+
+```javascript
+import BookingController from '@zuii/booking/symfony';
+// ... enregistrement dans Stimulus
+```
+
+### 2. Utilisation dans Twig
+```twig
+<div {{ stimulus_controller('@zuii/booking/symfony', {
+    lang: 'fr',
+    availability: { '2026-04-02': ['10:00', '11:00', '13:00'] },
+    fields: [
+        { name: 'full_name', label: 'Nom complet', type: 'text', required: true },
+        { name: 'email', label: 'Email', type: 'email', required: true }
+    ],
+    inputName: 'reservation'
+}) }}></div>
+
+<script>
+    document.addEventListener('booking:slot-select', (event) => {
+        console.log('Réservation confirmée :', event.detail);
+        // event.detail contient : { date, slot, formData }
+    });
+</script>
+```

package/src/symfony/booking_controller.ts

@@ -0,0 +1,72 @@
+import { Controller } from '@hotwired/stimulus';
+import { Booking } from '../js/Booking';
+
+/**
+ * Stimulus controller for @zuii/booking.
+ * 
+ * Usage in Twig:
+ * <div {{ stimulus_controller('@zuii/booking/symfony', {
+ *    lang: 'fr',
+ *    availability: { '2026-04-02': ['10:00', '11:00'] },
+ *    fields: [
+ *        { name: 'name', label: 'Nom', type: 'text', required: true }
+ *    ]
+ * }) }}></div>
+ */
+export default class extends Controller {
+	static values = {
+		lang: { type: String, default: 'fr' },
+		availability: { type: Object, default: {} },
+		selectedDate: String,
+		inputName: { type: String, default: 'booking_datetime' },
+		fields: { type: Array, default: [] },
+		mode: { type: String, default: 'single' },
+		disablePast: { type: Boolean, default: false },
+		initialDate: String
+	};
+
+	declare langValue: 'fr' | 'en';
+	declare availabilityValue: Record<string, string[]>;
+	declare selectedDateValue: string;
+	declare inputNameValue: string;
+	declare fieldsValue: any[];
+	declare modeValue: 'single' | 'range';
+	declare disablePastValue: boolean;
+	declare initialDateValue: string;
+
+	private booking: Booking | null = null;
+
+	connect() {
+		const options: any = {
+			lang: this.langValue,
+			availability: this.availabilityValue,
+			inputName: this.inputNameValue,
+			mode: this.modeValue,
+			disablePast: this.disablePastValue,
+			onSlotSelect: (date: Date, slot: string, formData: any) => {
+				this.dispatch('slot-select', { detail: { date, slot, formData } });
+			}
+		};
+
+		if (this.selectedDateValue) {
+			options.selectedDate = new Date(this.selectedDateValue);
+		}
+		if (this.initialDateValue) {
+			options.initialDate = new Date(this.initialDateValue);
+		}
+		if (this.fieldsValue && this.fieldsValue.length > 0) {
+			options.fields = this.fieldsValue;
+		}
+
+		this.booking = new Booking(this.element as HTMLElement, options);
+	}
+
+	/**
+	 * Callback Stimulus quand la langue change dynamiquement.
+	 */
+	langValueChanged() {
+		if (this.booking) {
+			this.booking.setLanguage(this.langValue);
+		}
+	}
+}