@headless-adminapp/fluent 0.0.17-alpha.63 → 0.0.17-alpha.65

package/PageCalendar/PageCalendar.js

@@ -0,0 +1,231 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageCalendar = PageCalendar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const auth_1 = require("@headless-adminapp/app/auth");
+const context_1 = require("@headless-adminapp/app/calendar/context");
+const dialog_1 = require("@headless-adminapp/app/dialog");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const progress_indicator_1 = require("@headless-adminapp/app/progress-indicator");
+const toast_notification_1 = require("@headless-adminapp/app/toast-notification");
+const react_query_1 = require("@tanstack/react-query");
+const dayjs_1 = __importDefault(require("dayjs"));
+const isoWeek_1 = __importDefault(require("dayjs/plugin/isoWeek"));
+const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
+const utc_1 = __importDefault(require("dayjs/plugin/utc"));
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const EventDialog_1 = require("./EventDialog/EventDialog");
+const Header_1 = require("./Header");
+const types_1 = require("./types");
+const utils_1 = require("./utils");
+const CalendarSection = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./CalendarSection'))).then((mod) => ({ default: mod.CalendarSection })));
+dayjs_1.default.extend(utc_1.default);
+dayjs_1.default.extend(timezone_1.default);
+dayjs_1.default.extend(isoWeek_1.default);
+function PageCalendar(props) {
+    const contextValue = (0, mutable_1.useCreateContextStore)({
+        config: props.config,
+    });
+    (0, react_1.useEffect)(() => {
+        contextValue.setValue({
+            config: props.config,
+        });
+    }, [contextValue, props.config]);
+    const config = props.config;
+    const openDialog = (0, dialog_1.useOpenDialog)();
+    const openConfirmDialog = (0, dialog_1.useOpenConfirmDialog)();
+    const openToastNotification = (0, toast_notification_1.useOpenToastNotification)();
+    const { hideProgressIndicator, showProgressIndicator } = (0, progress_indicator_1.useProgressIndicator)();
+    const [activeStartDate, setActiveStartDate] = (0, react_1.useState)(null);
+    const [activeEndDate, setActiveEndDate] = (0, react_1.useState)(null);
+    const [currentStartDate, setCurrentStartDate] = (0, react_1.useState)(null);
+    const [currentEndDate, setCurrentEndDate] = (0, react_1.useState)(null);
+    const [viewType, setViewType] = (0, react_1.useState)(types_1.ViewType.Month);
+    const queryClient = (0, react_query_1.useQueryClient)();
+    const filterForm = (0, react_hook_form_1.useForm)({
+        mode: 'all',
+        defaultValues: config.defaultFilter,
+        shouldUnregister: false,
+    });
+    const filterValues = filterForm.watch();
+    const auth = (0, auth_1.useAuthSession)();
+    const { data: events, isPending: loading } = (0, react_query_1.useQuery)({
+        queryKey: [
+            'calendar-events',
+            'list',
+            activeStartDate,
+            activeEndDate,
+            filterValues,
+            auth,
+        ],
+        queryFn: async () => {
+            if (!activeStartDate || !activeEndDate) {
+                return [];
+            }
+            try {
+                const result = await config.eventsResolver({
+                    start: activeStartDate,
+                    end: activeEndDate,
+                    filter: filterValues,
+                    auth,
+                });
+                return result.map(utils_1.transformEvent);
+            }
+            catch (error) {
+                openToastNotification({
+                    title: 'Error',
+                    text: error.message,
+                    type: 'error',
+                });
+                throw error;
+            }
+        },
+        staleTime: 1000 * 60 * 5, // 5 minutes
+    });
+    function openEventDetailModel(values) {
+        const { close } = openDialog({
+            type: 'custom',
+            Component: EventDialog_1.EventDialog,
+            props: {
+                onDismiss: () => {
+                    close();
+                },
+                config,
+                values,
+                onSubmit: async (data) => {
+                    try {
+                        const { id, end, start, title, allDay, description, ...rest } = data.values;
+                        await config.saveEvent({
+                            event: {
+                                id,
+                                title,
+                                start: start ? new Date(start) : null,
+                                end: end ? new Date(end) : null,
+                                allDay: allDay ?? false,
+                                description,
+                                ...rest,
+                            },
+                            modifiedValues: data.modifiedValues,
+                        });
+                        await queryClient.invalidateQueries({
+                            queryKey: ['calendar-events'],
+                        });
+                        close();
+                    }
+                    catch (error) {
+                        openToastNotification({
+                            title: 'Error',
+                            text: error.message,
+                            type: 'error',
+                        });
+                    }
+                },
+                onDelete: async (id) => {
+                    try {
+                        const confirmResult = await openConfirmDialog({
+                            title: 'Delete Event',
+                            text: 'Are you sure you want to delete this event?',
+                        });
+                        if (!confirmResult?.confirmed) {
+                            return;
+                        }
+                        showProgressIndicator('Deleting event...');
+                        await config.deleteEvent(id);
+                        await queryClient.invalidateQueries({
+                            queryKey: ['calendar-events'],
+                        });
+                        close();
+                    }
+                    catch (error) {
+                        openToastNotification({
+                            title: 'Error',
+                            text: error.message,
+                            type: 'error',
+                        });
+                    }
+                    finally {
+                        hideProgressIndicator();
+                    }
+                },
+                allowOpenRecord: !!config.openRecord,
+                onOpenRecord: config.openRecord,
+                onCancel: () => {
+                    close();
+                },
+            },
+        });
+    }
+    function handleDateSelect(selectInfo) {
+        openEventDetailModel({
+            title: '',
+            start: selectInfo.start.toISOString(),
+            end: selectInfo.end.toISOString(),
+            allDay: selectInfo.allDay,
+            customer: null,
+            description: '',
+        });
+    }
+    function handleEventClick(clickInfo) {
+        openEventDetailModel({
+            id: clickInfo.event.id,
+            title: clickInfo.event.title,
+            start: clickInfo.event.start?.toISOString(),
+            end: clickInfo.event.end?.toISOString(),
+            allDay: clickInfo.event.allDay,
+            description: '',
+            ...clickInfo.event.extendedProps,
+        });
+    }
+    function handleCreateButtonClick() {
+        openEventDetailModel({
+            title: '',
+            start: null,
+            end: null,
+            allDay: false,
+            description: '',
+        });
+    }
+    const onRangeChange = ({ currentStart, currentEnd, activeStart, activeEnd, viewType, }) => {
+        setCurrentStartDate(currentStart);
+        setCurrentEndDate(currentEnd);
+        setActiveStartDate(activeStart);
+        setActiveEndDate(activeEnd);
+        setViewType(viewType);
+    };
+    return ((0, jsx_runtime_1.jsx)(context_1.CalendarContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                flex: 1,
+                gap: react_components_1.tokens.spacingVerticalM,
+                padding: react_components_1.tokens.spacingHorizontalL,
+                background: react_components_1.tokens.colorNeutralBackground3,
+            }, children: [(0, jsx_runtime_1.jsx)(Header_1.Header, { filterForm: filterForm, onCreateButtonClick: handleCreateButtonClick }), (0, jsx_runtime_1.jsx)(CalendarSection, { startDate: currentStartDate, endDate: currentEndDate, viewType: viewType, onRangeChange: onRangeChange, events: events ?? [], onEventClick: handleEventClick, onDateSelect: handleDateSelect, loading: loading })] }) }));
+}

package/PageCalendar/TitleSelector.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { ViewType } from './types';
+interface TitleSelectorProps {
+    start?: Date | null;
+    end?: Date | null;
+    viewType: ViewType;
+    onChange: (start: Date, end: Date) => void;
+}
+export declare const TitleSelector: FC<TitleSelectorProps>;
+export {};

package/PageCalendar/TitleSelector.js

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TitleSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_calendar_compat_1 = require("@fluentui/react-calendar-compat");
+const react_components_1 = require("@fluentui/react-components");
+const locale_1 = require("@headless-adminapp/app/locale");
+const icons_fluent_1 = require("@headless-adminapp/icons-fluent");
+const dayjs_1 = __importDefault(require("dayjs"));
+const isoWeek_1 = __importDefault(require("dayjs/plugin/isoWeek"));
+const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
+const utc_1 = __importDefault(require("dayjs/plugin/utc"));
+const react_1 = require("react");
+const types_1 = require("./types");
+dayjs_1.default.extend(utc_1.default);
+dayjs_1.default.extend(timezone_1.default);
+dayjs_1.default.extend(isoWeek_1.default);
+const TitleSelector = ({ start, end, onChange, viewType, }) => {
+    const { timezone } = (0, locale_1.useLocale)();
+    const label = (0, react_1.useMemo)(() => {
+        if (!start || !end) {
+            return '';
+        }
+        switch (viewType) {
+            case types_1.ViewType.Day:
+                return (0, dayjs_1.default)(start).format('MMM D, YYYY');
+            case types_1.ViewType.Week:
+                return `${(0, dayjs_1.default)(start).format('MMM D')} - ${(0, dayjs_1.default)(end).format('MMM D, YYYY')}`;
+            case types_1.ViewType.Month:
+                return (0, dayjs_1.default)(start).format('MMMM YYYY');
+        }
+        return '';
+    }, [start, end, viewType]);
+    if (!start || !end) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Popover, { positioning: "below", children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", style: {
+                        fontWeight: react_components_1.tokens.fontWeightMedium,
+                        fontSize: react_components_1.tokens.fontSizeBase400,
+                    }, icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.ChevronDown, { size: 16 }), iconPosition: "after", children: label }) }), (0, jsx_runtime_1.jsxs)(react_components_1.PopoverSurface, { tabIndex: -1, style: { padding: 0 }, children: [viewType === types_1.ViewType.Month && ((0, jsx_runtime_1.jsx)(react_calendar_compat_1.Calendar, { dateRangeType: react_calendar_compat_1.DateRangeType.Month, highlightSelectedMonth: true, isDayPickerVisible: false, value: start ? (0, dayjs_1.default)(start).toDate() : new Date(), onSelectDate: (date) => {
+                            const start = (0, dayjs_1.default)(date)
+                                .tz(timezone, true)
+                                .startOf('month')
+                                .toDate();
+                            const end = (0, dayjs_1.default)(date)
+                                .tz(timezone, true)
+                                .endOf('month')
+                                .toDate();
+                            onChange(start, end);
+                        } })), viewType === types_1.ViewType.Week && ((0, jsx_runtime_1.jsx)(react_calendar_compat_1.Calendar, { dateRangeType: react_calendar_compat_1.DateRangeType.Week, firstDayOfWeek: 1, value: start ? (0, dayjs_1.default)(start).toDate() : new Date(), onSelectDate: (date) => {
+                            const start = (0, dayjs_1.default)(date)
+                                .tz(timezone, true)
+                                .startOf('isoWeek')
+                                .toDate();
+                            const end = (0, dayjs_1.default)(date)
+                                .tz(timezone, true)
+                                .endOf('isoWeek')
+                                .toDate();
+                            onChange(start, end);
+                        } })), viewType === types_1.ViewType.Day && ((0, jsx_runtime_1.jsx)(react_calendar_compat_1.Calendar, { dateRangeType: react_calendar_compat_1.DateRangeType.Day, firstDayOfWeek: 1, value: start ? (0, dayjs_1.default)(start).toDate() : new Date(), onSelectDate: (date) => {
+                            console.log('d', date);
+                            const start = (0, dayjs_1.default)(date)
+                                .tz(timezone, true)
+                                .startOf('day')
+                                .toDate();
+                            const end = (0, dayjs_1.default)(date).tz(timezone, true).endOf('day').toDate();
+                            onChange(start, end);
+                        } }))] })] }));
+};
+exports.TitleSelector = TitleSelector;

package/PageCalendar/ViewSelector.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { ViewType } from './types';
+interface ViewSelectorProps {
+    viewType: ViewType;
+    onChange: (viewType: ViewType) => void;
+}
+export declare const ViewSelector: FC<ViewSelectorProps>;
+export {};

package/PageCalendar/ViewSelector.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const types_1 = require("./types");
+const viewItems = [
+    {
+        label: 'Month',
+        value: types_1.ViewType.Month,
+    },
+    {
+        label: 'Week',
+        value: types_1.ViewType.Week,
+    },
+    {
+        label: 'Day',
+        value: types_1.ViewType.Day,
+    },
+];
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {},
+    button: {
+        '&:not(:first-of-type)': {
+            // borderLeftWidth: 0,
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+        },
+        '&:not(:last-of-type)': {
+            borderRightWidth: 0,
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+        },
+    },
+    active: {
+        '&+button': {
+            borderLeftColor: 'transparent !important',
+        },
+    },
+});
+const ViewSelector = ({ viewType, onChange }) => {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'inline-flex',
+            overflow: 'hidden',
+        }, className: styles.root, children: viewItems.map((item) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { className: (0, react_components_1.mergeClasses)(styles.button, item.value === viewType && styles.active), appearance: item.value === viewType ? 'primary' : 'secondary', onClick: () => onChange(item.value), style: {
+                    fontWeight: react_components_1.tokens.fontWeightRegular,
+                    minWidth: 60,
+                }, children: item.label }, item.value) }, item.value))) }));
+};
+exports.ViewSelector = ViewSelector;

package/PageCalendar/baseEventAttributes.d.ts

@@ -0,0 +1,35 @@
+export declare const baseEventAttributes: {
+    id: {
+        type: "id";
+        label: string;
+        string: true;
+    };
+    title: {
+        type: "string";
+        format: "text";
+        label: string;
+        required: true;
+    };
+    start: {
+        type: "date";
+        format: "datetime";
+        label: string;
+        required: true;
+    };
+    end: {
+        type: "date";
+        format: "datetime";
+        label: string;
+        required: true;
+    };
+    allDay: {
+        type: "boolean";
+        label: string;
+    };
+    description: {
+        type: "string";
+        format: "textarea";
+        label: string;
+    };
+};
+export type BaseEventAttributes = typeof baseEventAttributes;

package/PageCalendar/baseEventAttributes.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.baseEventAttributes = void 0;
+const utils_1 = require("@headless-adminapp/core/schema/utils");
+exports.baseEventAttributes = (0, utils_1.defineSchemaAttributes)({
+    id: {
+        type: 'id',
+        label: 'ID',
+        string: true,
+    },
+    title: {
+        type: 'string',
+        format: 'text',
+        label: 'Title',
+        required: true,
+    },
+    start: {
+        type: 'date',
+        format: 'datetime',
+        label: 'Start',
+        required: true,
+    },
+    end: {
+        type: 'date',
+        format: 'datetime',
+        label: 'End',
+        required: true,
+    },
+    allDay: {
+        type: 'boolean',
+        label: 'All day',
+    },
+    description: {
+        type: 'string',
+        format: 'textarea',
+        label: 'Description',
+    },
+});

package/PageCalendar/context.d.ts

@@ -0,0 +1,20 @@
+import type { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { CalendarEventResolverFn, CalendarEventSaveFn, CalendarEventsResolverFn } from './types';
+export interface CalendarConfig<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes, SA3 extends SchemaAttributes = SchemaAttributes> {
+    eventsResolver: CalendarEventsResolverFn<SA3>;
+    eventResolver?: CalendarEventResolverFn;
+    saveEvent: CalendarEventSaveFn<SA1, SA2>;
+    beforeDescriptionAttributes?: SA1;
+    afterDescriptionAttributes?: SA2;
+    filterAttributes?: SA3;
+    defaultFilter?: InferredSchemaType<SA3>;
+    openRecord?: (id: string) => void;
+    deleteEvent: (id: string) => Promise<void>;
+    title: string;
+    description: string;
+    eventLabel: string;
+}
+export interface CalendarContextState<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes, SA3 extends SchemaAttributes = SchemaAttributes> {
+    config: CalendarConfig<SA1, SA2, SA3>;
+}
+export declare const CalendarContext: import("react").Context<import("@headless-adminapp/app/mutable").ContextValue<CalendarContextState<SchemaAttributes, SchemaAttributes, SchemaAttributes>>>;

package/PageCalendar/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarContext = void 0;
+const mutable_1 = require("@headless-adminapp/app/mutable");
+exports.CalendarContext = (0, mutable_1.createContext)();

package/PageCalendar/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useConfig';

package/PageCalendar/hooks/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useConfig"), exports);

package/PageCalendar/hooks/useConfig.d.ts

@@ -0,0 +1,3 @@
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+import { CalendarConfig } from '../context';
+export declare function useConfig<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes, SA3 extends SchemaAttributes = SchemaAttributes>(): CalendarConfig<SA1, SA2, SA3>;

package/PageCalendar/hooks/useConfig.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConfig = useConfig;
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const context_1 = require("../context");
+function useConfig() {
+    return (0, mutable_1.useContextSelector)(context_1.CalendarContext, (state) => state.config);
+}

package/PageCalendar/index.d.ts

@@ -0,0 +1 @@
+export { PageCalendar } from './PageCalendar';

package/PageCalendar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageCalendar = void 0;
+var PageCalendar_1 = require("./PageCalendar");
+Object.defineProperty(exports, "PageCalendar", { enumerable: true, get: function () { return PageCalendar_1.PageCalendar; } });

package/PageCalendar/renderEventContent.d.ts

@@ -0,0 +1,2 @@
+import type { EventContentArg } from '@fullcalendar/core';
+export declare function renderEventContent(eventInfo: EventContentArg): import("react/jsx-runtime").JSX.Element;

package/PageCalendar/renderEventContent.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderEventContent = renderEventContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function renderEventContent(eventInfo) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            backgroundColor: react_components_1.tokens.colorBrandBackground2,
+            color: react_components_1.tokens.colorNeutralForeground1,
+            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            paddingBlock: react_components_1.tokens.spacingVerticalXXS,
+            paddingInline: react_components_1.tokens.spacingHorizontalS,
+            border: `1px solid ${react_components_1.tokens.colorBrandStroke2}`,
+            gap: react_components_1.tokens.spacingHorizontalS,
+            width: '100%',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            height: '100%',
+            cursor: 'pointer',
+        }, children: [eventInfo.timeText && (0, jsx_runtime_1.jsx)("span", { children: eventInfo.timeText }), (0, jsx_runtime_1.jsx)("span", { style: { fontWeight: react_components_1.tokens.fontWeightSemibold }, children: eventInfo.event.title })] }));
+}

package/PageCalendar/types.d.ts

@@ -0,0 +1,5 @@
+export declare enum ViewType {
+    Month = "dayGridMonth",
+    Week = "timeGridWeek",
+    Day = "timeGridDay"
+}

package/PageCalendar/types.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewType = void 0;
+var ViewType;
+(function (ViewType) {
+    ViewType["Month"] = "dayGridMonth";
+    ViewType["Week"] = "timeGridWeek";
+    ViewType["Day"] = "timeGridDay";
+})(ViewType || (exports.ViewType = ViewType = {}));

package/PageCalendar/utils.d.ts

@@ -0,0 +1,3 @@
+import type { EventInput } from '@fullcalendar/core';
+import { CalendarEvent } from '@headless-adminapp/app/calendar/types';
+export declare function transformEvent(event: CalendarEvent): EventInput;

package/PageCalendar/utils.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformEvent = transformEvent;
+function transformEvent(event) {
+    const { id, title, description, end, start, ...rest } = event;
+    return {
+        id,
+        title,
+        description,
+        start: start ?? undefined,
+        end: end ?? undefined,
+        allDay: event.allDay ?? false,
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        extendedProps: rest,
+    };
+}

package/PageEntityForm/PageCustomEntityForm.d.ts

@@ -1,3 +1,5 @@
+import { RetriveRecordFn } from '@headless-adminapp/app/dataform/DataFormProvider/types';
+import { SaveRecordFn } from '@headless-adminapp/app/dataform/utils/saveRecord';
 import { EntityMainFormCommandItemExperience, Form } from '@headless-adminapp/core/experience/form';
 import { Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
 import { FC } from 'react';
@@ -6,6 +8,8 @@ interface PageCustomEntityFormProps<SA extends SchemaAttributes = SchemaAttribut
     schema: Schema<SA>;
     form: Form<SA>;
     commands: EntityMainFormCommandItemExperience[][];
+    retriveRecordFn?: RetriveRecordFn<SA>;
+    saveRecordFn?: SaveRecordFn;
 }
 export declare const PageCustomEntityForm: FC<PageCustomEntityFormProps>;
 export {};

package/PageEntityForm/PageCustomEntityForm.js

@@ -5,8 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const PageEntityFormProvider_1 = require("@headless-adminapp/app/providers/PageEntityFormProvider");
 const PageEntityFormDesktopContainer_1 = require("./PageEntityFormDesktopContainer");
-const PageCustomEntityForm = ({ recordId, commands, form, schema, }) => {
-    return ((0, jsx_runtime_1.jsx)(PageEntityFormProvider_1.PageEntityFormProvider, { schema: schema, form: form, recordId: recordId, commands: commands, children: (0, jsx_runtime_1.jsx)("div", { style: {
+const PageCustomEntityForm = ({ recordId, commands, form, schema, retriveRecordFn, saveRecordFn, }) => {
+    return ((0, jsx_runtime_1.jsx)(PageEntityFormProvider_1.PageEntityFormProvider, { schema: schema, form: form, recordId: recordId, commands: commands, retriveRecordFn: retriveRecordFn, saveRecordFn: saveRecordFn, children: (0, jsx_runtime_1.jsx)("div", { style: {
                 display: 'flex',
                 flex: 1,
                 flexDirection: 'row',

package/components/BodyLoading.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 interface BodyLoadingProps {
-    loading: boolean;
+    loading?: boolean;
 }
 export declare const BodyLoading: FC<BodyLoadingProps>;
 export {};

package/components/BodyLoading.js

@@ -12,6 +12,7 @@ const BodyLoading = ({ loading }) => {
                     inset: 0,
                     backgroundColor: react_components_1.tokens.colorNeutralBackground1,
                     opacity: 0.7,
+                    zIndex: 1,
                 } }), (0, jsx_runtime_1.jsx)("div", { style: {
                     position: 'absolute',
                     inset: 0,

package/form/controls/DateControl.d.ts

@@ -3,4 +3,4 @@ export interface DateControlProps extends ControlProps<string> {
     maxDate?: Date;
     minDate?: Date;
 }
-export declare function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }: DateControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }: Readonly<DateControlProps>): import("react/jsx-runtime").JSX.Element;