@taiv/ui 1.15.0 → 2.1.0

package/dist/components/Data/BigCalendar/BigCalendar.stories.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import { useState } from 'react';
+import { BigCalendar, dateFnsLocalizer, withDragAndDrop, } from './BigCalendar';
+// dayjs is the toolkit's stock date library; date-fns isn't a dep, so we feed
+// dayjs through react-big-calendar's `dateFnsLocalizer` shape by adapting the
+// few format/parse functions it needs. Keeps the story dependency-light.
+const localizer = dateFnsLocalizer({
+    format: (date, formatStr) => dayjs(date).format(formatStr),
+    parse: (value, formatStr) => dayjs(value, formatStr).toDate(),
+    startOfWeek: () => dayjs().startOf('week').toDate(),
+    getDay: (date) => dayjs(date).day(),
+    locales: {},
+});
+const today = dayjs().startOf('day');
+const sampleEvents = [
+    {
+        title: 'Game Day — UFC 285',
+        start: today.clone().hour(18).toDate(),
+        end: today.clone().hour(22).toDate(),
+    },
+    {
+        title: 'Trivia Night',
+        start: today.clone().add(1, 'day').hour(19).toDate(),
+        end: today.clone().add(1, 'day').hour(21).toDate(),
+    },
+    {
+        title: 'Karaoke',
+        start: today.clone().add(2, 'day').hour(20).toDate(),
+        end: today.clone().add(2, 'day').hour(23).toDate(),
+    },
+    {
+        title: 'Comedy Night',
+        start: today.clone().add(3, 'day').hour(20).toDate(),
+        end: today.clone().add(3, 'day').hour(22).toDate(),
+    },
+    {
+        title: 'Weekly Food Specials',
+        start: today.clone().toDate(),
+        end: today.clone().add(1, 'day').toDate(),
+        allDay: true,
+    },
+];
+const meta = {
+    title: 'Data/BigCalendar',
+    component: BigCalendar,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: 'Taiv-styled wrapper around `react-big-calendar`. Forwards all props to the underlying library — only the typography is overridden (Poppins + Taiv tokens). Use `withDragAndDrop` (re-exported) for drag/drop + resize. Use `momentLocalizer` (also re-exported) to bind a date library.',
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const [view, setView] = useState('week');
+        const [date, setDate] = useState(new Date());
+        return (_jsx("div", { style: { height: '90vh', padding: 16 }, children: _jsx(BigCalendar, { localizer: localizer, events: sampleEvents, view: view, onView: setView, date: date, onNavigate: setDate, views: ['month', 'week', 'day'], step: 15, timeslots: 4, showMultiDayTimes: true, selectable: true }) }));
+    },
+};
+const DnDCalendar = withDragAndDrop(BigCalendar);
+export const WithDragAndDrop = {
+    render: () => {
+        const [events, setEvents] = useState(sampleEvents);
+        const [view, setView] = useState('week');
+        const [date, setDate] = useState(new Date());
+        const moveEvent = ({ event, start, end, }) => {
+            setEvents((prev) => prev.map((e) => e === event
+                ? { ...e, start: new Date(start), end: new Date(end) }
+                : e));
+        };
+        return (_jsx("div", { style: { height: '90vh', padding: 16 }, children: _jsx(DnDCalendar, { localizer: localizer, events: events, view: view, onView: setView, date: date, onNavigate: setDate, views: ['month', 'week', 'day'], step: 15, timeslots: 4, showMultiDayTimes: true, selectable: true, onEventDrop: moveEvent, onEventResize: moveEvent }) }));
+    },
+};

package/dist/components/Data/Calendar/Calendar.d.ts

@@ -0,0 +1,102 @@
+import { type CalendarEventExternal, type CalendarType } from '@schedule-x/calendar';
+import type React from 'react';
+import '@schedule-x/theme-default/dist/index.css';
+export type CalendarView = 'month' | 'week' | 'day';
+export type { CalendarEventExternal, CalendarType } from '@schedule-x/calendar';
+/**
+ * Default Schedule-X `calendars` map, keyed by Taiv semantic color names.
+ * Consumers using `calendarId: 'primary' | 'success' | …` get Taiv-tokenized
+ * chips out of the box. To category-code events with custom keys (e.g.
+ * `'one-time' | 'weekly'`), pass your own map via the `calendars` prop —
+ * it replaces this default rather than merging.
+ *
+ * Schedule-X paints the chip from `lightColors`:
+ * - `main` drives the 4px left-border accent and the icon stroke
+ * - `container` is the filled background
+ * - `onContainer` is the text painted on top of `container`
+ */
+export declare const TAIV_CALENDAR_PALETTE: Record<string, CalendarType>;
+export interface CalendarProps {
+    /**
+     * Schedule-X native event shape. ISO date strings:
+     * `YYYY-MM-DD` for all-day, `YYYY-MM-DD HH:mm` for timed.
+     * `calendarId` references a key in the `calendars` map (default
+     * `TAIV_CALENDAR_PALETTE`) and drives the chip color scheme.
+     *
+     * To opt out of DnD or resize per-event, set `_options.disableDND` /
+     * `_options.disableResize` on the event itself.
+     */
+    events: CalendarEventExternal[];
+    /** Color palette map. Keys can be referenced as event `calendarId`. */
+    calendars?: Record<string, CalendarType>;
+    view: CalendarView;
+    onViewChange: (view: CalendarView) => void;
+    /** Views available in the toolbar's view switcher. Default: all three. */
+    views?: CalendarView[];
+    /** Controlled current date. Uncontrolled defaults to today. */
+    currentDate?: Date;
+    onDateChange?: (date: Date) => void;
+    /** Fired when a user clicks an event chip. */
+    onEventClick?: (event: CalendarEventExternal) => void;
+    /**
+     * Fired on a single click of an empty time slot (week / day views).
+     * Argument is Schedule-X's ISO datetime string (`YYYY-MM-DD HH:mm`).
+     * Use this to open a "create event" modal with the slot prefilled.
+     * Suppressed automatically when the click was part of a completed drag —
+     * in that case `onSlotRange` fires instead.
+     */
+    onClickDateTime?: (iso: string) => void;
+    /**
+     * Fired on a single click of a month-grid day header. Argument is the
+     * date in `YYYY-MM-DD` format. Mirrors `onClickDateTime` for the
+     * month view (Schedule-X's time-grid click handler never fires there).
+     * Suppressed when the click was part of a completed drag.
+     */
+    onClickDate?: (iso: string) => void;
+    /**
+     * Fired after a drag-to-create gesture in an empty area completes.
+     * `kind: 'time'` means the drag was on the week/day time grid — the
+     * ISO strings carry `YYYY-MM-DD HH:mm`. `kind: 'date'` means the
+     * drag was across month cells — the ISO strings are `YYYY-MM-DD`.
+     *
+     * The consumer is responsible for actually creating the event (this
+     * callback only signals intent — typically by opening an editor modal
+     * with the range pre-filled). Drag must exceed an internal threshold
+     * before this fires; smaller gestures fall through to the click
+     * callbacks above so they remain interchangeable for the user.
+     */
+    onSlotRange?: (startISO: string, endISO: string, kind: 'time' | 'date') => void;
+    /**
+     * Fired after a user finishes a drag-to-move or drag-to-resize gesture.
+     * The event passed has already been updated with the new times.
+     * Use this to dispatch a `saveEvent` (or equivalent). Only fires when
+     * not `readOnly`.
+     */
+    onEventUpdate?: (event: CalendarEventExternal) => void;
+    /** Disables DnD + resize plugins entirely (also blocks slot-click create
+     *  if you respect that on the consumer side). */
+    readOnly?: boolean;
+    /** Granularity in minutes for DnD/resize. Default 15. */
+    minuteStep?: 5 | 10 | 15 | 30 | 60;
+    /** Override the calendar's day boundaries. Format: `'HH:mm'`. */
+    dayBoundaries?: {
+        start: string;
+        end: string;
+    };
+    /** First day of week: 0 = Sun, 1 = Mon. Default 0. */
+    firstDayOfWeek?: 0 | 1;
+    /**
+     * Toolbar rendered above the calendar grid:
+     * - `undefined` (default): a Taiv-styled toolbar with Today / prev / next /
+     *   date label / view switcher.
+     * - `null`: no toolbar — use when composing navigation outside the
+     *   calendar.
+     * - any `ReactNode`: replaces the default toolbar with your own composition.
+     *
+     * Schedule-X's internal header is always hidden regardless of this prop.
+     */
+    toolbar?: React.ReactNode | null;
+}
+declare const Calendar: ({ events, calendars, view, onViewChange, views, currentDate, onDateChange, onEventClick, onClickDateTime, onClickDate, onSlotRange, onEventUpdate, readOnly, minuteStep, toolbar, firstDayOfWeek, dayBoundaries, }: CalendarProps) => React.JSX.Element;
+export { Calendar };
+//# sourceMappingURL=Calendar.d.ts.map

package/dist/components/Data/Calendar/Calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EAKlB,MAAM,sBAAsB,CAAC;AAQ9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,OAAO,0CAA0C,CAAC;AAMlD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;AAEpD,YAAY,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEhF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAyD9D,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B;;;;;;;;OAQG;IACH,MAAM,EAAE,qBAAqB,EAAE,CAAC;IAChC,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IAEzC,IAAI,EAAE,YAAY,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,0EAA0E;IAC1E,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAEpC,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtD;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;;;;;;;;;OAWG;IACH,WAAW,CAAC,EAAE,CACZ,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,GAAG,MAAM,KAClB,IAAI,CAAC;IACV;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAEvD;qDACiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACnC,iEAAiE;IACjE,aAAa,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/C,sDAAsD;IACtD,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;CAClC;AA0SD,QAAA,MAAM,QAAQ,GAAI,oNAkBf,aAAa,sBAmbf,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}