@chronowl/widget 1.0.0

package/dist/types/components.d.ts

@@ -0,0 +1,242 @@
+import { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, HTMLAttributes, SVGAttributes } from 'react';
+
+export type Size = 'sm' | 'md' | 'lg';
+export type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'text';
+export type ButtonColor = 'primary' | 'secondary' | 'error' | 'success' | 'warning';
+export type BadgeVariant = 'confirmed' | 'pending' | 'cancelled' | 'completed' | 'info';
+export type TypographyVariant = 'display-lg' | 'display-md' | 'display-sm' | 'headline-lg' | 'headline-md' | 'headline-sm' | 'title-lg' | 'title-md' | 'title-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'label-lg' | 'label-md' | 'label-sm';
+export type TypographyAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'small' | 'label' | 'caption';
+export interface Service {
+    id: string;
+    name: string;
+    description: string;
+    duration: number;
+    price: number;
+    currency: string;
+    category?: string;
+}
+export interface TimeSlot {
+    id: string;
+    startTime: string;
+    endTime: string;
+    available: boolean;
+}
+export interface BookingData {
+    serviceId: string;
+    date: string;
+    timeSlotId: string;
+    clientName: string;
+    clientEmail: string;
+    clientPhone: string;
+    notes?: string;
+}
+export interface BookingConfirmation {
+    id: string;
+    service: Service;
+    date: string;
+    timeSlot: TimeSlot;
+    clientName: string;
+    clientEmail: string;
+    status: BadgeVariant;
+    createdAt: string;
+}
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: Size;
+    fullWidth?: boolean;
+    loading?: boolean;
+    icon?: ReactNode;
+    iconPosition?: 'start' | 'end';
+}
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+    fullWidth?: boolean;
+}
+export interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
+    htmlFor?: string;
+    required?: boolean;
+    children: ReactNode;
+}
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant: BadgeVariant;
+    size?: Size;
+    icon?: ReactNode;
+}
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    elevation?: 0 | 1 | 2 | 3 | 4 | 5;
+    outlined?: boolean;
+    padding?: Size;
+    children: ReactNode;
+}
+export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
+    orientation?: 'horizontal' | 'vertical';
+    inset?: boolean;
+}
+export type IconName = 'calendar' | 'clock' | 'check' | 'close' | 'chevron-left' | 'chevron-right' | 'chevron-down' | 'search' | 'user' | 'mail' | 'phone' | 'notes' | 'alert' | 'info' | 'star' | 'location' | 'edit' | 'trash' | 'arrow-left' | 'arrow-right' | 'spinner' | 'owl';
+export interface IconProps extends SVGAttributes<SVGSVGElement> {
+    name: IconName;
+    size?: Size;
+    color?: string;
+}
+export interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
+    size?: Size;
+    color?: string;
+}
+export interface TypographyProps extends HTMLAttributes<HTMLElement> {
+    variant?: TypographyVariant;
+    as?: TypographyAs;
+    color?: string;
+    truncate?: boolean;
+    align?: 'left' | 'center' | 'right';
+    children: ReactNode;
+}
+export interface FormGroupProps {
+    label: string;
+    htmlFor: string;
+    error?: string;
+    helperText?: string;
+    required?: boolean;
+    children: ReactNode;
+}
+export interface TimeSelectorProps {
+    slots: TimeSlot[];
+    selectedSlotId?: string;
+    onSelectSlot: (slot: TimeSlot) => void;
+    loading?: boolean;
+}
+export interface DateSelectorProps {
+    selectedDate?: Date;
+    onSelectDate: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: string[];
+    availableDates?: string[];
+}
+export interface ServiceCardProps {
+    service: Service;
+    selected?: boolean;
+    onSelect: (service: Service) => void;
+}
+export interface AvailabilitySlotProps {
+    slot: TimeSlot;
+    selected?: boolean;
+    onSelect: (slot: TimeSlot) => void;
+}
+export interface ConfirmationBadgeProps {
+    status: BadgeVariant;
+    label: string;
+}
+export interface EmptyStateProps {
+    icon?: IconName;
+    title: string;
+    description?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+export interface LoadingStateProps {
+    message?: string;
+    size?: Size;
+}
+export interface InputWithIconProps extends InputProps {
+    icon: ReactNode;
+    iconPosition?: 'start' | 'end';
+}
+export interface ButtonGroupProps {
+    children: ReactNode;
+    orientation?: 'horizontal' | 'vertical';
+    fullWidth?: boolean;
+}
+export interface HeaderProps {
+    title?: string;
+    subtitle?: string;
+    onBack?: () => void;
+    actions?: ReactNode;
+}
+export interface StepperProps {
+    steps: string[];
+    currentStep: number;
+    onStepClick?: (step: number) => void;
+}
+export interface ServiceListProps {
+    services: Service[];
+    selectedServiceId?: string;
+    onSelectService: (service: Service) => void;
+    loading?: boolean;
+}
+export interface CalendarProps {
+    selectedDate?: Date;
+    onSelectDate: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: string[];
+    availableDates?: string[];
+}
+export interface AvailabilityGridProps {
+    slots: TimeSlot[];
+    selectedSlotId?: string;
+    onSelectSlot: (slot: TimeSlot) => void;
+    loading?: boolean;
+}
+export interface BookingFormProps {
+    onSubmit: (data: Omit<BookingData, 'serviceId' | 'date' | 'timeSlotId'>) => void;
+    loading?: boolean;
+    initialValues?: Partial<BookingData>;
+}
+export interface ConfirmationModalProps {
+    open: boolean;
+    onClose: () => void;
+    confirmation: BookingConfirmation | null;
+    onNewBooking?: () => void;
+}
+export interface ErrorModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    message: string;
+    onRetry?: () => void;
+}
+export interface TimeSlotSelectorProps {
+    slots: TimeSlot[];
+    selectedSlotId?: string;
+    onSelectSlot: (slot: TimeSlot) => void;
+    columns?: number;
+}
+export interface FooterProps {
+    companyName?: string;
+    poweredBy?: boolean;
+}
+export interface MainLayoutProps {
+    header?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+}
+export interface CenteredLayoutProps {
+    children: ReactNode;
+    maxWidth?: string;
+}
+export interface BookingPageTemplateProps {
+    steps: string[];
+    currentStep: number;
+    onStepClick?: (step: number) => void;
+    onBack?: () => void;
+    title?: string;
+    children: ReactNode;
+    footer?: ReactNode;
+}
+export type BookingStep = 'service' | 'datetime' | 'form' | 'confirmation';
+export interface ChronOwlWidgetProps {
+    services: Service[];
+    onFetchSlots: (serviceId: string, date: string) => Promise<TimeSlot[]>;
+    onSubmitBooking: (data: BookingData) => Promise<BookingConfirmation>;
+    theme?: 'light' | 'dark';
+    locale?: string;
+    companyName?: string;
+    className?: string;
+}

package/dist/utils/api.d.ts

@@ -0,0 +1,10 @@
+import { ApiConfig, BookingResponse, CreateBookingParams } from '../types/api';
+import { Service, TimeSlot } from '../types/components';
+
+export declare function configureApi(newConfig: Partial<ApiConfig>): void;
+export declare const chronowlApi: {
+    getServices(saasId?: string): Promise<Service[]>;
+    getAvailability(serviceId: string, date: string, saasId?: string): Promise<TimeSlot[]>;
+    createBooking(params: CreateBookingParams): Promise<BookingResponse>;
+    cancelBooking(bookingId: string, saasId?: string): Promise<BookingResponse>;
+};

package/dist/utils/helpers.d.ts

@@ -0,0 +1,3 @@
+export declare function cn(...classes: (string | false | undefined | null)[]): string;
+export declare function formatCurrency(amount: number, currency?: string): string;
+export declare function formatDuration(minutes: number): string;

package/dist/utils/validators.d.ts

@@ -0,0 +1,6 @@
+export declare function validateEmail(email: string): boolean;
+export declare function validatePhone(phone: string): boolean;
+export declare function validateRequired(value: string): boolean;
+export declare function formatDate(date: Date, locale?: string): string;
+export declare function formatDateShort(date: Date, locale?: string): string;
+export declare function dateToString(date: Date): string;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@chronowl/widget",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "ChronOwl - Sabia gestión del tiempo para tus citas. Widget de reservas/citas reutilizable.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --ext .ts,.tsx",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.3.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.7.0"
+  },
+  "keywords": [
+    "chronowl",
+    "booking",
+    "widget",
+    "appointments",
+    "scheduling",
+    "react",
+    "design-system",
+    "stitch",
+    "material-design-3"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chronowl/widget"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}