@chronowl/widget 1.0.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.
- package/LICENSE +21 -0
- package/dist/ChronOwlWidget.d.ts +22 -0
- package/dist/components/atoms/Badge.d.ts +10 -0
- package/dist/components/atoms/Button.d.ts +10 -0
- package/dist/components/atoms/Card.d.ts +9 -0
- package/dist/components/atoms/Divider.d.ts +9 -0
- package/dist/components/atoms/Icon.d.ts +10 -0
- package/dist/components/atoms/Input.d.ts +10 -0
- package/dist/components/atoms/Label.d.ts +9 -0
- package/dist/components/atoms/Spinner.d.ts +9 -0
- package/dist/components/atoms/Typography.d.ts +10 -0
- package/dist/components/atoms/index.d.ts +9 -0
- package/dist/components/hooks/useAvailability.d.ts +11 -0
- package/dist/components/hooks/useBooking.d.ts +12 -0
- package/dist/components/hooks/useForm.d.ts +19 -0
- package/dist/components/hooks/useServices.d.ts +10 -0
- package/dist/components/index.d.ts +5 -0
- package/dist/components/molecules/AvailabilitySlot.d.ts +9 -0
- package/dist/components/molecules/ButtonGroup.d.ts +9 -0
- package/dist/components/molecules/ConfirmationBadge.d.ts +9 -0
- package/dist/components/molecules/DateSelector.d.ts +10 -0
- package/dist/components/molecules/EmptyState.d.ts +9 -0
- package/dist/components/molecules/FormGroup.d.ts +10 -0
- package/dist/components/molecules/InputWithIcon.d.ts +9 -0
- package/dist/components/molecules/LoadingState.d.ts +9 -0
- package/dist/components/molecules/ServiceCard.d.ts +10 -0
- package/dist/components/molecules/TimeSelector.d.ts +9 -0
- package/dist/components/molecules/index.d.ts +10 -0
- package/dist/components/organisms/AvailabilityGrid.d.ts +9 -0
- package/dist/components/organisms/BookingForm.d.ts +10 -0
- package/dist/components/organisms/Calendar.d.ts +10 -0
- package/dist/components/organisms/ConfirmationModal.d.ts +10 -0
- package/dist/components/organisms/ErrorModal.d.ts +9 -0
- package/dist/components/organisms/Footer.d.ts +9 -0
- package/dist/components/organisms/Header.d.ts +10 -0
- package/dist/components/organisms/ServiceList.d.ts +9 -0
- package/dist/components/organisms/Stepper.d.ts +10 -0
- package/dist/components/organisms/TimeSlotSelector.d.ts +10 -0
- package/dist/components/organisms/index.d.ts +10 -0
- package/dist/components/pages/BookingPage.d.ts +17 -0
- package/dist/components/pages/ConfirmationPage.d.ts +16 -0
- package/dist/components/pages/ErrorPage.d.ts +14 -0
- package/dist/components/pages/index.d.ts +3 -0
- package/dist/components/templates/BookingPageTemplate.d.ts +11 -0
- package/dist/components/templates/CenteredLayout.d.ts +9 -0
- package/dist/components/templates/MainLayout.d.ts +11 -0
- package/dist/components/templates/index.d.ts +3 -0
- package/dist/constants/api.d.ts +14 -0
- package/dist/constants/design.d.ts +56 -0
- package/dist/favicon.svg +21 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.js +1 -0
- package/dist/index.mjs +2053 -0
- package/dist/style.css +1 -0
- package/dist/tokens/borders.d.ts +14 -0
- package/dist/tokens/colors.d.ts +56 -0
- package/dist/tokens/elevation.d.ts +15 -0
- package/dist/tokens/index.d.ts +12 -0
- package/dist/tokens/motion.d.ts +38 -0
- package/dist/tokens/spacing.d.ts +28 -0
- package/dist/tokens/typography.d.ts +107 -0
- package/dist/types/api.d.ts +43 -0
- package/dist/types/booking.d.ts +50 -0
- package/dist/types/components.d.ts +242 -0
- package/dist/utils/api.d.ts +10 -0
- package/dist/utils/helpers.d.ts +3 -0
- package/dist/utils/validators.d.ts +6 -0
- package/package.json +55 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 ChronOwl
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ChronOwlWidgetProps } from './types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* ChronOwlWidget - Componente principal del widget de reservas
|
|
5
|
+
*
|
|
6
|
+
* Widget embebible y reutilizable para múltiples SaaS.
|
|
7
|
+
* Encapsula todo el flujo de reserva: selección de servicio,
|
|
8
|
+
* fecha/hora, datos del cliente, y confirmación.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* <ChronOwlWidget
|
|
13
|
+
* services={services}
|
|
14
|
+
* onFetchSlots={async (serviceId, date) => fetchSlots(serviceId, date)}
|
|
15
|
+
* onSubmitBooking={async (data) => createBooking(data)}
|
|
16
|
+
* companyName="Mi Empresa"
|
|
17
|
+
* />
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
declare function ChronOwlWidget({ services, onFetchSlots, onSubmitBooking, theme, companyName, className, }: ChronOwlWidgetProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export { ChronOwlWidget };
|
|
22
|
+
export default ChronOwlWidget;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { BadgeProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Badge Atom - Basado en Material Chip Component (Stitch)
|
|
5
|
+
*
|
|
6
|
+
* Para mostrar estados de reserva: confirmada, pendiente,
|
|
7
|
+
* cancelada, completada, info.
|
|
8
|
+
*/
|
|
9
|
+
declare function Badge({ variant, size, icon, children, className, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { Badge };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ButtonProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Button Atom - Basado en Material Button Component (Stitch)
|
|
5
|
+
*
|
|
6
|
+
* Variantes Stitch: Filled, Tonal, Outlined, Text
|
|
7
|
+
* Touch target mínimo 44x44px para mobile.
|
|
8
|
+
*/
|
|
9
|
+
declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
10
|
+
export { Button };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { CardProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Card Atom - Basado en Material Card Component (Stitch)
|
|
5
|
+
*
|
|
6
|
+
* Contenedor base. Soporta elevation y outlined variants.
|
|
7
|
+
*/
|
|
8
|
+
declare function Card({ elevation, outlined, padding, children, className, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { Card };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { DividerProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Divider Atom - Basado en Material Divider (Stitch)
|
|
5
|
+
*
|
|
6
|
+
* Separadores visuales horizontal/vertical con opción inset.
|
|
7
|
+
*/
|
|
8
|
+
declare function Divider({ orientation, inset, className, ...props }: DividerProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { Divider };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { IconProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Icon Atom - Basado en Material Symbols (Stitch icon system)
|
|
5
|
+
*
|
|
6
|
+
* SVGs inline para evitar dependencias externas.
|
|
7
|
+
* Todos los íconos necesarios para el widget de reservas.
|
|
8
|
+
*/
|
|
9
|
+
declare function Icon({ name, size, color, className, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { Icon };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { InputProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Input/TextField Atom - Basado en Material TextField Component (Stitch)
|
|
5
|
+
*
|
|
6
|
+
* Soporta label flotante, iconos leading/trailing, estados de error,
|
|
7
|
+
* helper text, y está optimizado para mobile.
|
|
8
|
+
*/
|
|
9
|
+
declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
10
|
+
export { Input };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { LabelProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Label Atom - Basado en Typography + Label tag (Stitch)
|
|
5
|
+
*
|
|
6
|
+
* Para formularios, con indicador de campo requerido.
|
|
7
|
+
*/
|
|
8
|
+
declare function Label({ htmlFor, required, children, className, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { Label };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { SpinnerProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Spinner/Loader Atom - Basado en Material Progress Indicator (Stitch)
|
|
5
|
+
*
|
|
6
|
+
* Indicador circular de carga con animación.
|
|
7
|
+
*/
|
|
8
|
+
declare function Spinner({ size, color, className, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { Spinner };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { TypographyProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Typography Atom - Basado en Stitch Typescale system
|
|
5
|
+
*
|
|
6
|
+
* Sistema tipográfico completo con 15 variantes Material Design 3.
|
|
7
|
+
* Mapeo semántico automático de variante a elemento HTML.
|
|
8
|
+
*/
|
|
9
|
+
declare function Typography({ variant, as, color, truncate, align, children, className, ...props }: TypographyProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { Typography };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { Button } from './Button';
|
|
2
|
+
export { Input } from './Input';
|
|
3
|
+
export { Label } from './Label';
|
|
4
|
+
export { Badge } from './Badge';
|
|
5
|
+
export { Card } from './Card';
|
|
6
|
+
export { Divider } from './Divider';
|
|
7
|
+
export { Icon } from './Icon';
|
|
8
|
+
export { Spinner } from './Spinner';
|
|
9
|
+
export { Typography } from './Typography';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { TimeSlot } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
interface UseAvailabilityReturn {
|
|
4
|
+
slots: TimeSlot[];
|
|
5
|
+
loading: boolean;
|
|
6
|
+
error: string | null;
|
|
7
|
+
fetchSlots: (serviceId: string, date: Date) => Promise<void>;
|
|
8
|
+
clearSlots: () => void;
|
|
9
|
+
}
|
|
10
|
+
export declare function useAvailability(saasId: string): UseAvailabilityReturn;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { BookingResponse, CreateBookingParams } from '../../types/api';
|
|
2
|
+
|
|
3
|
+
interface UseBookingReturn {
|
|
4
|
+
booking: BookingResponse | null;
|
|
5
|
+
loading: boolean;
|
|
6
|
+
error: string | null;
|
|
7
|
+
createBooking: (params: CreateBookingParams) => Promise<BookingResponse | null>;
|
|
8
|
+
cancelBooking: (bookingId: string) => Promise<void>;
|
|
9
|
+
reset: () => void;
|
|
10
|
+
}
|
|
11
|
+
export declare function useBooking(saasId: string): UseBookingReturn;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
type ValidationRule<T> = (value: T[keyof T], values: T) => string | undefined;
|
|
2
|
+
interface UseFormOptions<T extends Record<string, string>> {
|
|
3
|
+
initialValues: T;
|
|
4
|
+
validationRules?: Partial<Record<keyof T, ValidationRule<T>>>;
|
|
5
|
+
onSubmit: (values: T) => void | Promise<void>;
|
|
6
|
+
}
|
|
7
|
+
interface UseFormReturn<T extends Record<string, string>> {
|
|
8
|
+
values: T;
|
|
9
|
+
errors: Partial<Record<keyof T, string>>;
|
|
10
|
+
touched: Partial<Record<keyof T, boolean>>;
|
|
11
|
+
isValid: boolean;
|
|
12
|
+
isSubmitting: boolean;
|
|
13
|
+
handleChange: (field: keyof T, value: string) => void;
|
|
14
|
+
handleBlur: (field: keyof T) => void;
|
|
15
|
+
handleSubmit: () => void;
|
|
16
|
+
reset: () => void;
|
|
17
|
+
}
|
|
18
|
+
export declare function useForm<T extends Record<string, string>>({ initialValues, validationRules, onSubmit, }: UseFormOptions<T>): UseFormReturn<T>;
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Service } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
interface UseServicesReturn {
|
|
4
|
+
services: Service[];
|
|
5
|
+
loading: boolean;
|
|
6
|
+
error: string | null;
|
|
7
|
+
refetch: () => void;
|
|
8
|
+
}
|
|
9
|
+
export declare function useServices(saasId: string): UseServicesReturn;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { Button, Input, Label, Badge, Card, Divider, Icon, Spinner, Typography } from './atoms';
|
|
2
|
+
export { FormGroup, TimeSelector, DateSelector, ServiceCard, AvailabilitySlot, ConfirmationBadge, EmptyState, LoadingState, InputWithIcon, ButtonGroup, } from './molecules';
|
|
3
|
+
export { Header, Stepper, ServiceList, Calendar, AvailabilityGrid, BookingForm, ConfirmationModal, ErrorModal, TimeSlotSelector, Footer, } from './organisms';
|
|
4
|
+
export { MainLayout, CenteredLayout, BookingPageTemplate } from './templates';
|
|
5
|
+
export { BookingPage, ConfirmationPage, ErrorPage } from './pages';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { AvailabilitySlotProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* AvailabilitySlot Molecule - Button + Typography
|
|
5
|
+
*
|
|
6
|
+
* Slot horario individual seleccionable.
|
|
7
|
+
*/
|
|
8
|
+
declare function AvailabilitySlot({ slot, selected, onSelect }: AvailabilitySlotProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { AvailabilitySlot };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ButtonGroupProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* ButtonGroup Molecule - Múltiples Buttons
|
|
5
|
+
*
|
|
6
|
+
* Agrupa botones de acciones relacionadas horizontal o verticalmente.
|
|
7
|
+
*/
|
|
8
|
+
declare function ButtonGroup({ children, orientation, fullWidth, }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { ButtonGroup };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ConfirmationBadgeProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* ConfirmationBadge Molecule - Badge + Icon + Typography
|
|
5
|
+
*
|
|
6
|
+
* Confirmación visual del estado de una reserva.
|
|
7
|
+
*/
|
|
8
|
+
declare function ConfirmationBadge({ status, label }: ConfirmationBadgeProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { ConfirmationBadge };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { DateSelectorProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* DateSelector Molecule - Mini calendario mensual
|
|
5
|
+
*
|
|
6
|
+
* Selector de fecha con navegación por mes, fechas deshabilitadas,
|
|
7
|
+
* y resaltado de fechas disponibles.
|
|
8
|
+
*/
|
|
9
|
+
declare function DateSelector({ selectedDate, onSelectDate, minDate, maxDate, disabledDates, availableDates, }: DateSelectorProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { DateSelector };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { EmptyStateProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* EmptyState Molecule - Icon + Typography + Button
|
|
5
|
+
*
|
|
6
|
+
* Se muestra cuando no hay disponibilidad o datos vacíos.
|
|
7
|
+
*/
|
|
8
|
+
declare function EmptyState({ icon, title, description, action }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { EmptyState };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FormGroupProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* FormGroup Molecule - Label + Input + Error message
|
|
5
|
+
*
|
|
6
|
+
* Composición para formularios de reserva.
|
|
7
|
+
* Envuelve cualquier input con su label y mensajes de error/ayuda.
|
|
8
|
+
*/
|
|
9
|
+
declare function FormGroup({ label, htmlFor, error, helperText, required, children, }: FormGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { FormGroup };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { InputWithIconProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* InputWithIcon Molecule - Input + Icon
|
|
5
|
+
*
|
|
6
|
+
* Wrapper conveniente para inputs con ícono.
|
|
7
|
+
*/
|
|
8
|
+
declare const InputWithIcon: import('react').ForwardRefExoticComponent<InputWithIconProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
9
|
+
export { InputWithIcon };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { LoadingStateProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* LoadingState Molecule - Spinner + Typography
|
|
5
|
+
*
|
|
6
|
+
* Indicador de carga con mensaje opcional.
|
|
7
|
+
*/
|
|
8
|
+
declare function LoadingState({ message, size }: LoadingStateProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { LoadingState };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ServiceCardProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* ServiceCard Molecule - Card + Typography + Badge
|
|
5
|
+
*
|
|
6
|
+
* Muestra un servicio disponible con nombre, descripción,
|
|
7
|
+
* duración y precio. Seleccionable.
|
|
8
|
+
*/
|
|
9
|
+
declare function ServiceCard({ service, selected, onSelect }: ServiceCardProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { ServiceCard };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { TimeSelectorProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* TimeSelector Molecule - Selector de hora
|
|
5
|
+
*
|
|
6
|
+
* Grid de horarios disponibles con soporte para loading y selección.
|
|
7
|
+
*/
|
|
8
|
+
declare function TimeSelector({ slots, selectedSlotId, onSelectSlot, loading, }: TimeSelectorProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { TimeSelector };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export { FormGroup } from './FormGroup';
|
|
2
|
+
export { TimeSelector } from './TimeSelector';
|
|
3
|
+
export { DateSelector } from './DateSelector';
|
|
4
|
+
export { ServiceCard } from './ServiceCard';
|
|
5
|
+
export { AvailabilitySlot } from './AvailabilitySlot';
|
|
6
|
+
export { ConfirmationBadge } from './ConfirmationBadge';
|
|
7
|
+
export { EmptyState } from './EmptyState';
|
|
8
|
+
export { LoadingState } from './LoadingState';
|
|
9
|
+
export { InputWithIcon } from './InputWithIcon';
|
|
10
|
+
export { ButtonGroup } from './ButtonGroup';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { AvailabilityGridProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* AvailabilityGrid Organism - Grid de AvailabilitySlots
|
|
5
|
+
*
|
|
6
|
+
* Muestra los horarios disponibles en un grid responsive.
|
|
7
|
+
*/
|
|
8
|
+
declare function AvailabilityGrid({ slots, selectedSlotId, onSelectSlot, loading, }: AvailabilityGridProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { AvailabilityGrid };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { BookingFormProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* BookingForm Organism - FormGroups + Button
|
|
5
|
+
*
|
|
6
|
+
* Formulario del cliente: nombre, email, teléfono, notas.
|
|
7
|
+
* Validación integrada, mobile-first.
|
|
8
|
+
*/
|
|
9
|
+
declare function BookingForm({ onSubmit, loading, initialValues }: BookingFormProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { BookingForm };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { CalendarProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Calendar Organism - FullCalendar integrado
|
|
5
|
+
*
|
|
6
|
+
* Envuelve DateSelector con título y contexto.
|
|
7
|
+
* Soporta fechas deshabilitadas y disponibles.
|
|
8
|
+
*/
|
|
9
|
+
declare function Calendar({ selectedDate, onSelectDate, minDate, maxDate, disabledDates, availableDates, }: CalendarProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { Calendar };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ConfirmationModalProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* ConfirmationModal Organism - Basado en Dialog Component (Stitch)
|
|
5
|
+
*
|
|
6
|
+
* Modal con detalles de la reserva confirmada.
|
|
7
|
+
* Accesible con focus trap y cierre con Escape.
|
|
8
|
+
*/
|
|
9
|
+
declare function ConfirmationModal({ open, onClose, confirmation, onNewBooking, }: ConfirmationModalProps): import("react/jsx-runtime").JSX.Element | null;
|
|
10
|
+
export { ConfirmationModal };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ErrorModalProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* ErrorModal Organism - Basado en Dialog Component (Stitch)
|
|
5
|
+
*
|
|
6
|
+
* Modal de error con opción de reintentar.
|
|
7
|
+
*/
|
|
8
|
+
declare function ErrorModal({ open, onClose, title, message, onRetry, }: ErrorModalProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { ErrorModal };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FooterProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Footer Organism - Typography + Links
|
|
5
|
+
*
|
|
6
|
+
* Footer del widget con powered-by y copyright.
|
|
7
|
+
*/
|
|
8
|
+
declare function Footer({ companyName, poweredBy }: FooterProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { Footer };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { HeaderProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Header Organism - Basado en TopAppBar (Stitch)
|
|
5
|
+
*
|
|
6
|
+
* Header del widget con logo, título, subtítulo y acciones.
|
|
7
|
+
* Mobile-first con touch targets adecuados.
|
|
8
|
+
*/
|
|
9
|
+
declare function Header({ title, subtitle, onBack, actions }: HeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { Header };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ServiceListProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* ServiceList Organism - Múltiples ServiceCards
|
|
5
|
+
*
|
|
6
|
+
* Lista de servicios disponibles con loading y empty states.
|
|
7
|
+
*/
|
|
8
|
+
declare function ServiceList({ services, selectedServiceId, onSelectService, loading, }: ServiceListProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { ServiceList };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { StepperProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Stepper Organism - Basado en Stepper Component (Stitch)
|
|
5
|
+
*
|
|
6
|
+
* Muestra progreso: Servicio → Fecha/Hora → Datos → Confirmación
|
|
7
|
+
* Responsive: iconos en mobile, texto completo en desktop.
|
|
8
|
+
*/
|
|
9
|
+
declare function Stepper({ steps, currentStep, onStepClick }: StepperProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { Stepper };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { TimeSlotSelectorProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* TimeSlotSelector Organism - Atoms seleccionables
|
|
5
|
+
*
|
|
6
|
+
* Selector visual de tiempo en grid configurable.
|
|
7
|
+
* Agrupa por AM/PM opcionalmente.
|
|
8
|
+
*/
|
|
9
|
+
declare function TimeSlotSelector({ slots, selectedSlotId, onSelectSlot, columns, }: TimeSlotSelectorProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { TimeSlotSelector };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export { Header } from './Header';
|
|
2
|
+
export { Stepper } from './Stepper';
|
|
3
|
+
export { ServiceList } from './ServiceList';
|
|
4
|
+
export { Calendar } from './Calendar';
|
|
5
|
+
export { AvailabilityGrid } from './AvailabilityGrid';
|
|
6
|
+
export { BookingForm } from './BookingForm';
|
|
7
|
+
export { ConfirmationModal } from './ConfirmationModal';
|
|
8
|
+
export { ErrorModal } from './ErrorModal';
|
|
9
|
+
export { TimeSlotSelector } from './TimeSlotSelector';
|
|
10
|
+
export { Footer } from './Footer';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { Service, TimeSlot, BookingData, BookingConfirmation } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
interface BookingPageProps {
|
|
4
|
+
services: Service[];
|
|
5
|
+
onFetchSlots: (serviceId: string, date: string) => Promise<TimeSlot[]>;
|
|
6
|
+
onSubmitBooking: (data: BookingData) => Promise<BookingConfirmation>;
|
|
7
|
+
companyName?: string;
|
|
8
|
+
title?: string;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* BookingPage - Flujo completo de reserva
|
|
12
|
+
*
|
|
13
|
+
* Orquesta todo el flujo: selección de servicio → fecha/hora → datos → confirmación.
|
|
14
|
+
* Maneja estado, navegación entre pasos, fetching de slots, y envío de reserva.
|
|
15
|
+
*/
|
|
16
|
+
declare function BookingPage({ services, onFetchSlots, onSubmitBooking, companyName, title, }: BookingPageProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export { BookingPage };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { BookingConfirmation } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
interface ConfirmationPageProps {
|
|
4
|
+
confirmation: BookingConfirmation;
|
|
5
|
+
onNewBooking?: () => void;
|
|
6
|
+
onClose?: () => void;
|
|
7
|
+
companyName?: string;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* ConfirmationPage - Vista después de agendar exitosamente
|
|
11
|
+
*
|
|
12
|
+
* Muestra todos los detalles de la reserva confirmada
|
|
13
|
+
* con opciones para nueva reserva o cerrar.
|
|
14
|
+
*/
|
|
15
|
+
declare function ConfirmationPage({ confirmation, onNewBooking, onClose, companyName, }: ConfirmationPageProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export { ConfirmationPage };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
interface ErrorPageProps {
|
|
2
|
+
title?: string;
|
|
3
|
+
message?: string;
|
|
4
|
+
onRetry?: () => void;
|
|
5
|
+
onBack?: () => void;
|
|
6
|
+
companyName?: string;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* ErrorPage - Vista de error / sin disponibilidad
|
|
10
|
+
*
|
|
11
|
+
* Página genérica de error con opciones de reintento y navegación.
|
|
12
|
+
*/
|
|
13
|
+
declare function ErrorPage({ title, message, onRetry, onBack, companyName, }: ErrorPageProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export { ErrorPage };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { BookingPageTemplateProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* BookingPageTemplate Template - Header + Stepper + Content + Actions
|
|
5
|
+
*
|
|
6
|
+
* Template principal para el flujo de reserva.
|
|
7
|
+
* Incluye header con navegación, stepper de progreso,
|
|
8
|
+
* área de contenido scrollable, y footer.
|
|
9
|
+
*/
|
|
10
|
+
declare function BookingPageTemplate({ steps, currentStep, onStepClick, onBack, title, children, footer, }: BookingPageTemplateProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export { BookingPageTemplate };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { CenteredLayoutProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* CenteredLayout Template - Centered container
|
|
5
|
+
*
|
|
6
|
+
* Para modals y contenido centrado verticalmente.
|
|
7
|
+
*/
|
|
8
|
+
declare function CenteredLayout({ children, maxWidth }: CenteredLayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { CenteredLayout };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { MainLayoutProps } from '../../types/components';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* MainLayout Template - Header + Main Content + Footer
|
|
5
|
+
*
|
|
6
|
+
* Layout principal del widget. Flex column con header fijo,
|
|
7
|
+
* contenido scrollable, y footer al fondo.
|
|
8
|
+
* Max-width 480px para mantener el formato widget.
|
|
9
|
+
*/
|
|
10
|
+
declare function MainLayout({ header, footer, children }: MainLayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export { MainLayout };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Constantes de la API ChronOwl.
|
|
3
|
+
*/
|
|
4
|
+
export declare const API_ENDPOINTS: {
|
|
5
|
+
readonly services: (saasId: string) => string;
|
|
6
|
+
readonly availability: (saasId: string, serviceId: string, date: string) => string;
|
|
7
|
+
readonly bookings: "/api/bookings";
|
|
8
|
+
readonly bookingDetail: (saasId: string, bookingId: string) => string;
|
|
9
|
+
readonly cancelBooking: (saasId: string, bookingId: string) => string;
|
|
10
|
+
};
|
|
11
|
+
/** No hay URL por defecto - el consumidor DEBE configurar la URL de su backend */
|
|
12
|
+
export declare const DEFAULT_API_URL = "";
|
|
13
|
+
/** Timeout por defecto para requests (ms) */
|
|
14
|
+
export declare const DEFAULT_REQUEST_TIMEOUT = 30000;
|