@wix/headless-bookings 0.0.13 → 0.0.14

package/dist/react/time-slot-list/TimeSlotList.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * TimeSlotList - High-level component for displaying time slot list information
+ * Provides components for displaying timezone and time slot data
+ */
+import React from 'react';
+import { GenericList } from '@wix/headless-components/react';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import * as CoreTimeSlotList from '../core/time-slot-list/TimeSlotList.js';
+import { TimeSlotProvider, Info as CoreTimeSlotInfo, } from '../core/time-slot-list/TimeSlot.js';
+import { StartDate, EndDate, Duration, Actions as TimeSlotActions, Locations, LocationRepeater, Location, StaffMembers, StaffMemberRepeater, StaffMember, } from './TimeSlot.js';
+/**
+ * TimeSlot with required id field for GenericList
+ */
+var TestIds;
+(function (TestIds) {
+    TestIds["timeSlotListRoot"] = "time-slot-list-root";
+    TestIds["timeSlotListTimeSlots"] = "time-slot-list-time-slots";
+    TestIds["timeSlotListTimeSlot"] = "time-slot-list-time-slot";
+    TestIds["timeSlotListTimezone"] = "time-slot-list-timezone";
+    TestIds["timeSlotListLoadMore"] = "time-slot-list-load-more";
+})(TestIds || (TestIds = {}));
+/**
+ * Displays the current timezone with customizable rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <TimeSlotList.Timezone className="text-sm text-gray-600" />
+ *
+ * // asChild with primitive
+ * <TimeSlotList.Timezone asChild>
+ *   <span className="font-medium" />
+ * </TimeSlotList.Timezone>
+ *
+ * // asChild with render function
+ * <TimeSlotList.Timezone asChild>
+ *   {({ timezone }) => (
+ *     <span className="text-sm">
+ *       Timezone: {timezone || 'Not set'}
+ *     </span>
+ *   )}
+ * </TimeSlotList.Timezone>
+ * ```
+ */
+export const Timezone = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreTimeSlotList.Timezone, { children: ({ timezone }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListTimezone, customElement: children, customElementProps: { timezone }, children: _jsx("span", { children: timezone }) })) }));
+});
+Timezone.displayName = 'TimeSlotList.Timezone';
+/**
+ * Root component that provides the TimeSlotList service context.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { TimeSlotList } from '@wix/bookings/components';
+ *
+ * function TimeSlotsPage({ config }) {
+ *   return (
+ *     <TimeSlotList.Root config={config}>
+ *       <TimeSlotList.TimeSlots>
+ *         <TimeSlotList.TimeSlotRepeater>
+ *           {children}
+ *         </TimeSlotList.TimeSlotRepeater>
+ *       </TimeSlotList.TimeSlots>
+ *     </TimeSlotList.Root>
+ *   );
+ * }
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { children, config, className, variant } = props;
+    return (_jsx(CoreTimeSlotList.Root, { config: config, children: _jsx(RootContent, { className: className, ref: ref, variant: variant, children: children }) }));
+});
+Root.displayName = 'TimeSlotList.Root';
+/**
+ * Internal component to handle the Root content with core layer access
+ */
+const RootContent = React.forwardRef((props, ref) => {
+    const { children, className, variant } = props;
+    return (_jsx(CoreTimeSlotList.ListData, { children: ({ timeSlots, hasMore, isLoading, loadMore }) => (_jsx(GenericList.Root, { items: timeSlots, loadMore: loadMore, hasMore: hasMore, isLoading: isLoading, className: className, ref: ref, "data-testid": TestIds.timeSlotListRoot, variant: variant, children: children })) }));
+});
+RootContent.displayName = 'TimeSlotList.RootContent';
+/**
+ * Container for the time slots list with empty state support.
+ * Wraps GenericList.Items. Follows List Container Level pattern.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlotList.TimeSlots emptyState={<div>No slots available</div>}>
+ *   <TimeSlotList.TimeSlotRepeater>
+ *     {children}
+ *   </TimeSlotList.TimeSlotRepeater>
+ * </TimeSlotList.TimeSlots>
+ * ```
+ */
+export const TimeSlots = React.forwardRef((props, ref) => {
+    const { children, ...otherProps } = props;
+    return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.timeSlotListTimeSlots, ...otherProps, children: children }));
+});
+TimeSlots.displayName = 'TimeSlotList.TimeSlots';
+/**
+ * Internal component that wraps each time slot item with context provider.
+ * This is separate to allow using the service hook within the repeater.
+ */
+const TimeSlotItemWrapper = ({ slot, children, }) => {
+    return (_jsx(TimeSlotProvider, { slot: slot, children: _jsx(CoreTimeSlotInfo, { children: ({ bookable, isSelected }) => (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-slot-start": slot.localStartDate, "data-slot-id": slot.id, "data-bookable": bookable, "data-selected": isSelected, children: children })) }) }));
+};
+/**
+ * Repeater component that renders each time slot.
+ * Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
+ * Automatically provides TimeSlot context to children.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlotList.TimeSlotRepeater>
+ *   <TimeSlot.StartDate />
+ *   <TimeSlot.Duration />
+ *   <TimeSlot.Actions.Select />
+ * </TimeSlotList.TimeSlotRepeater>
+ * ```
+ */
+export const TimeSlotRepeater = React.forwardRef((props, ref) => {
+    const { children } = props;
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: slot, children: itemChildren }) => (_jsx(TimeSlotItemWrapper, { slot: slot, children: itemChildren }, slot.id)), children: children }));
+});
+TimeSlotRepeater.displayName = 'TimeSlotList.TimeSlotRepeater';
+/**
+ * Displays a button to load more time slots. Not rendered if no more slots are left to load.
+ * Follows the architecture rules - does not support asChild as it's a simple trigger component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlotList.Actions.LoadMore asChild>
+ *   <button>Load More</button>
+ * </TimeSlotList.Actions.LoadMore>
+ * ```
+ */
+export const LoadMore = React.forwardRef((props, ref) => {
+    const { children = _jsx("button", {}), ...otherProps } = props;
+    return (_jsx(GenericList.Actions.LoadMore, { ref: ref, "data-testid": TestIds.timeSlotListLoadMore, ...otherProps, children: children }));
+});
+LoadMore.displayName = 'TimeSlotList.Actions.LoadMore';
+/**
+ * Actions namespace for TimeSlotList
+ */
+export const Actions = {
+    LoadMore,
+};
+// ============================================================================
+// TimeSlot Entity Components (re-exported)
+// ============================================================================
+/**
+ * TimeSlot namespace containing components for displaying individual time slot data.
+ * These components must be used within TimeSlotList.TimeSlotRepeater.
+ *
+ * @example
+ * ```tsx
+ * <TimeSlotList.TimeSlotRepeater>
+ *   <TimeSlot.StartDate />
+ *   <TimeSlot.Duration />
+ *   <TimeSlot.Actions.Select />
+ *
+ *   // Location selection - visible when slot is selected
+ *   <TimeSlot.Locations>
+ *     <TimeSlot.LocationRepeater>
+ *       <TimeSlot.Location.Name />
+ *       <TimeSlot.Location.Actions.Select />
+ *     </TimeSlot.LocationRepeater>
+ *   </TimeSlot.Locations>
+ *
+ *   // Staff member selection - visible when slot is selected
+ *   <TimeSlot.StaffMembers>
+ *     <TimeSlot.StaffMemberRepeater>
+ *       <TimeSlot.StaffMember.Name />
+ *       <TimeSlot.StaffMember.Actions.Select />
+ *     </TimeSlot.StaffMemberRepeater>
+ *   </TimeSlot.StaffMembers>
+ * </TimeSlotList.TimeSlotRepeater>
+ * ```
+ */
+export const TimeSlot = {
+    StartDate,
+    EndDate,
+    Duration,
+    Actions: TimeSlotActions,
+    Locations,
+    LocationRepeater,
+    Location,
+    StaffMembers,
+    StaffMemberRepeater,
+    StaffMember,
+};

package/dist/services/time-slot-list/index.d.ts

@@ -2,5 +2,5 @@
  * TimeSlotList Service
  * Main export file for time slot list service
  */
-export { TimeSlotListServiceDefinition, ViewMode, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type SlotSelection, } from './time-slot-list.def.js';
+export { TimeSlotListServiceDefinition, ViewMode, type TimeSlot, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type SlotSelection, } from './time-slot-list.def.js';
 export { TimeSlotListService, loadTimeSlotListConfig, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -68,5 +68,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "fb9d6c4ddf1f28c1393d4c042861417e97c5e95f9ab301c1f5faaabe"
+  "falconPackageHash": "e3681a6dd045861d1cb7cefbdc04f1ad9e3eb62094bb6a8970b90cd2"
 }