@headless-adminapp/fluent 0.0.17-alpha.7 → 1.0.0

package/PageBoard/BoardColumnUI.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoardColumnUI = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const context_1 = require("@headless-adminapp/app/board/context");
+const hooks_1 = require("@headless-adminapp/app/board/hooks");
+const hooks_2 = require("@headless-adminapp/app/command/hooks");
+const ScrollbarWithMoreDataRequest_1 = require("@headless-adminapp/app/components/ScrollbarWithMoreDataRequest");
+const context_2 = require("@headless-adminapp/app/mutable/context");
+const react_1 = require("react");
+const DndProvider_1 = require("../components/DndProvider");
+const BoardColumnCard_1 = require("./BoardColumnCard");
+const BoardingColumnCardLoading_1 = require("./BoardingColumnCardLoading");
+const BoardColumnUI = () => {
+    const data = (0, hooks_1.useBoardColumnData)();
+    const dataState = (0, hooks_1.useBoardColumnDataState)();
+    const fetchNextPage = (0, context_2.useContextSelector)(context_1.BoardColumnContext, (state) => state.fetchNextPage);
+    const { columnId, acceptSourceIds, title, updateFn } = (0, hooks_1.useBoardColumnConfig)();
+    const { PreviewComponent, schema, columnConfigs } = (0, hooks_1.useBoardConfig)();
+    const baseContext = (0, hooks_2.useBaseCommandHandlerContext)();
+    const { useDrop } = (0, DndProvider_1.useDndContext)();
+    const ref = (0, react_1.useRef)(null);
+    const [{ handlerId, over, canDrop }, drop] = useDrop({
+        accept: acceptSourceIds,
+        collect(monitor) {
+            return {
+                handlerId: monitor.getHandlerId(),
+                over: monitor.isOver(),
+                canDrop: monitor.canDrop(),
+            };
+        },
+        drop: (item) => {
+            (async () => {
+                await updateFn?.({
+                    ...baseContext,
+                    primaryControl: {
+                        logicalName: schema.logicalName,
+                        id: item.id,
+                        schema: schema,
+                    },
+                });
+            })().catch(console.error);
+        },
+    });
+    const canDrag = (0, react_1.useMemo)(() => {
+        return columnConfigs.some((config) => config.acceptSourceIds.length > 0);
+    }, [columnConfigs]);
+    drop(ref);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            borderRadius: react_components_1.tokens.borderRadiusXLarge,
+            outline: over
+                ? `2px dashed ${react_components_1.tokens.colorBrandBackground}`
+                : canDrop
+                    ? `2px dashed ${react_components_1.tokens.colorNeutralStroke1}`
+                    : 'none',
+            outlineOffset: -5,
+            paddingTop: react_components_1.tokens.spacingVerticalS,
+        }, "data-handler-id": handlerId, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    paddingInline: react_components_1.tokens.spacingHorizontalS,
+                    alignItems: 'center',
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: title }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } })] }) }), (0, jsx_runtime_1.jsx)(ScrollbarWithMoreDataRequest_1.ScrollbarWithMoreDataRequest, { data: data?.records, hasMore: dataState?.hasNextPage, onRequestMore: () => {
+                    fetchNextPage();
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: react_components_1.tokens.spacingHorizontalM,
+                        padding: react_components_1.tokens.spacingHorizontalS,
+                    }, children: [data?.records.map((record, index) => ((0, jsx_runtime_1.jsx)(BoardColumnCard_1.BoardColumnCard, { record: record, index: index, columnId: columnId, canDrag: canDrag, PreviewComponent: PreviewComponent, schema: schema }, index))), dataState.isFetching &&
+                            Array.from({ length: 5 }).map((_, index) => ((0, jsx_runtime_1.jsx)(BoardingColumnCardLoading_1.BoardingColumnCardLoading, {}, index)))] }) })] }));
+};
+exports.BoardColumnUI = BoardColumnUI;

package/PageBoard/BoardingColumnCardLoading.d.ts

@@ -0,0 +1 @@
+export declare function BoardingColumnCardLoading(): import("react/jsx-runtime").JSX.Element;

package/PageBoard/BoardingColumnCardLoading.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoardingColumnCardLoading = BoardingColumnCardLoading;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function BoardingColumnCardLoading() {
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Skeleton, { style: {
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            borderRadius: react_components_1.tokens.borderRadiusLarge,
+            padding: react_components_1.tokens.spacingHorizontalM,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: react_components_1.tokens.spacingVerticalM,
+        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { style: {
+                    height: 16,
+                    width: '100%',
+                } }), (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { style: {
+                    height: 16,
+                    width: '50%',
+                } })] }));
+}

package/PageBoard/Header.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface HeaderProps {
+    title: string;
+    subtitle: string;
+}
+export declare const Header: FC<HeaderProps>;
+export {};

package/PageBoard/Header.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// eslint-disable-next-line simple-import-sort/imports
+const react_components_1 = require("@fluentui/react-components");
+const react_query_1 = require("@tanstack/react-query");
+const hooks_1 = require("@headless-adminapp/app/board/hooks");
+const icons_1 = require("@headless-adminapp/icons");
+const AppStringContext_1 = require("../App/AppStringContext");
+const Header = ({ title, subtitle }) => {
+    const client = (0, react_query_1.useQueryClient)();
+    const schema = (0, hooks_1.useBoardSchema)();
+    const [searchText, setSearchText] = (0, hooks_1.useSearchText)();
+    const appStrings = (0, AppStringContext_1.useAppStrings)();
+    const refresh = async () => {
+        await client.invalidateQueries({
+            queryKey: ['data', 'retriveRecords', schema.logicalName],
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: react_components_1.tokens.spacingHorizontalM,
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { color: react_components_1.tokens.colorNeutralForeground1 }, children: title }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground2 }, children: subtitle })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: react_components_1.tokens.spacingHorizontalS,
+                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.SearchBox, { appearance: "filled-darker", placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e, data) => setSearchText(data.value) }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Refresh, { size: 20 }), onClick: refresh })] })] }));
+};
+exports.Header = Header;

package/PageBoard/PageBoard.d.ts

@@ -0,0 +1,7 @@
+import { BoardConfig } from '@headless-adminapp/app/board/types';
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+interface PageBoardProps<S extends SchemaAttributes = SchemaAttributes> {
+    config: BoardConfig<S>;
+}
+export declare function PageBoard<S extends SchemaAttributes = SchemaAttributes>(props: Readonly<PageBoardProps<S>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/PageBoard/PageBoard.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageBoard = PageBoard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const context_1 = require("@headless-adminapp/app/board/context");
+const context_2 = require("@headless-adminapp/app/mutable/context");
+const react_1 = require("react");
+const DndProvider_1 = require("../components/DndProvider");
+const BoardColumn_1 = require("./BoardColumn");
+const Header_1 = require("./Header");
+function PageBoard(props) {
+    const contextValue = (0, context_2.useCreateContextStore)({
+        config: props.config,
+        searchText: '',
+    });
+    (0, react_1.useEffect)(() => {
+        contextValue.setValue({
+            config: props.config,
+            searchText: '',
+        });
+    }, [contextValue, props.config]);
+    return ((0, jsx_runtime_1.jsx)(context_1.BoardContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(DndProvider_1.DndProvider, { 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)("div", { children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                background: react_components_1.tokens.colorNeutralBackground1,
+                                borderRadius: react_components_1.tokens.borderRadiusLarge,
+                                paddingBlock: react_components_1.tokens.spacingVerticalM,
+                                paddingInline: react_components_1.tokens.spacingHorizontalM,
+                                gap: react_components_1.tokens.spacingVerticalM,
+                                boxShadow: react_components_1.tokens.shadow4,
+                            }, children: (0, jsx_runtime_1.jsx)(Header_1.Header, { title: props.config.title, subtitle: props.config.description }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            flex: 1,
+                            marginInline: -6,
+                            marginTop: react_components_1.tokens.spacingVerticalM,
+                        }, children: props.config.columnConfigs.map((config) => ((0, jsx_runtime_1.jsx)(BoardColumn_1.BoardColumn, { config: config }, config.columnId))) })] }) }) }));
+}

package/PageBoard/index.d.ts

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

package/PageBoard/index.js

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

package/PageCalendar/CalendarSection.d.ts

@@ -0,0 +1,20 @@
+import { DateSelectArg, EventClickArg, EventInput } from '@fullcalendar/core';
+import { ViewType } from './types';
+interface CalendarSectionProps {
+    startDate: Date | null;
+    endDate: Date | null;
+    viewType: ViewType;
+    onRangeChange?: (props: {
+        currentStart: Date;
+        currentEnd: Date;
+        activeStart: Date;
+        activeEnd: Date;
+        viewType: ViewType;
+    }) => void;
+    events: EventInput[];
+    onEventClick?: (event: EventClickArg) => void;
+    onDateSelect?: (event: DateSelectArg) => void;
+    loading?: boolean;
+}
+export declare const CalendarSection: ({ startDate, endDate, viewType, onRangeChange, events, onDateSelect, onEventClick, loading, }: Readonly<CalendarSectionProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/PageCalendar/CalendarSection.js

@@ -0,0 +1,108 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const daygrid_1 = __importDefault(require("@fullcalendar/daygrid"));
+const interaction_1 = __importDefault(require("@fullcalendar/interaction"));
+const react_1 = __importDefault(require("@fullcalendar/react"));
+const timegrid_1 = __importDefault(require("@fullcalendar/timegrid"));
+const locale_1 = require("@headless-adminapp/app/locale");
+const icons_1 = require("@headless-adminapp/icons");
+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_2 = require("react");
+const BodyLoading_1 = require("../components/BodyLoading");
+const renderEventContent_1 = require("./renderEventContent");
+const TitleSelector_1 = require("./TitleSelector");
+const types_1 = require("./types");
+const ViewSelector_1 = require("./ViewSelector");
+dayjs_1.default.extend(utc_1.default);
+dayjs_1.default.extend(timezone_1.default);
+dayjs_1.default.extend(isoWeek_1.default);
+const CalendarSection = ({ startDate, endDate, viewType, onRangeChange, events, onDateSelect, onEventClick, loading, }) => {
+    const calendarRef = (0, react_2.useRef)(null);
+    const { timezone } = (0, locale_1.useLocale)();
+    const isToday = (0, react_2.useMemo)(() => {
+        if (!startDate || !endDate) {
+            return false;
+        }
+        let today = (0, dayjs_1.default)().tz(timezone);
+        if (viewType === types_1.ViewType.Month) {
+            today = today.startOf('month');
+        }
+        else if (viewType === types_1.ViewType.Week) {
+            today = today.startOf('isoWeek');
+        }
+        return (today.format('YYYY-MM-DD') ===
+            (0, dayjs_1.default)(startDate).tz(timezone).format('YYYY-MM-DD'));
+    }, [startDate, endDate, timezone, viewType]);
+    function handleDateRangeChange(props) {
+        const currentStart = props.view.currentStart;
+        const currentEnd = props.view.currentEnd;
+        const activeStart = props.view.activeStart;
+        const activeEnd = props.view.activeEnd;
+        switch (props.view.type) {
+            case types_1.ViewType.Month:
+                onRangeChange?.({
+                    currentStart: currentStart, //dayjs(currentStart).tz(timezone).startOf('month').toDate(),
+                    currentEnd: currentEnd, // dayjs(currentEnd).tz(timezone).endOf('month').toDate(),
+                    activeStart: activeStart, // dayjs(activeStart).tz(timezone).startOf('day').toDate(),
+                    activeEnd: activeEnd, // dayjs(activeEnd).tz(timezone).endOf('day').toDate(),
+                    viewType: types_1.ViewType.Month,
+                });
+                break;
+            case types_1.ViewType.Week:
+                onRangeChange?.({
+                    currentStart: (0, dayjs_1.default)(currentStart)
+                        .tz(timezone)
+                        .startOf('isoWeek')
+                        .toDate(),
+                    currentEnd: (0, dayjs_1.default)(currentEnd).tz(timezone).endOf('isoWeek').toDate(),
+                    activeStart: (0, dayjs_1.default)(activeStart).tz(timezone).startOf('day').toDate(),
+                    activeEnd: (0, dayjs_1.default)(activeEnd).tz(timezone).endOf('day').toDate(),
+                    viewType: types_1.ViewType.Week,
+                });
+                break;
+            case types_1.ViewType.Day:
+                onRangeChange?.({
+                    currentStart: (0, dayjs_1.default)(currentStart)
+                        .tz(timezone)
+                        .startOf('day')
+                        .toDate(),
+                    currentEnd: (0, dayjs_1.default)(currentEnd).tz(timezone).endOf('day').toDate(),
+                    activeStart: (0, dayjs_1.default)(activeStart).tz(timezone).startOf('day').toDate(),
+                    activeEnd: (0, dayjs_1.default)(activeEnd).tz(timezone).endOf('day').toDate(),
+                    viewType: types_1.ViewType.Day,
+                });
+                break;
+        }
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            position: 'relative',
+            background: react_components_1.tokens.colorNeutralBackground1,
+            padding: react_components_1.tokens.spacingHorizontalL,
+            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            boxShadow: react_components_1.tokens.shadow2,
+            gap: react_components_1.tokens.spacingVerticalM,
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "outline", style: { fontWeight: react_components_1.tokens.fontWeightMedium }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Calendar, {}), onClick: () => calendarRef.current?.getApi().today(), disabled: isToday, children: "Today" }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronLeft, {}), onClick: () => calendarRef.current?.getApi().prev() }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronRight, {}), onClick: () => calendarRef.current?.getApi().next() })] }), (0, jsx_runtime_1.jsx)(TitleSelector_1.TitleSelector, { start: startDate, end: endDate, onChange: (start) => {
+                            const api = calendarRef.current?.getApi();
+                            if (!api) {
+                                return;
+                            }
+                            api.gotoDate(start);
+                        }, viewType: viewType }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, justifyContent: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(ViewSelector_1.ViewSelector, { viewType: viewType, onChange: (viewType) => {
+                                calendarRef.current?.getApi().changeView(viewType);
+                            } }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0 }, children: (0, jsx_runtime_1.jsx)(react_1.default, { ref: calendarRef, plugins: [daygrid_1.default, timegrid_1.default, interaction_1.default], initialView: types_1.ViewType.Month, weekends: true, firstDay: 1, events: events, datesSet: handleDateRangeChange, select: onDateSelect, eventClick: onEventClick, eventContent: renderEventContent_1.renderEventContent, timeZone: timezone, height: "100%", editable: false, selectable: true, selectMirror: true, dayMaxEvents: true, eventMinHeight: 24, eventTimeFormat: (props) => {
+                                return (0, dayjs_1.default)(props.start.marker).tz(timezone).format('hh:mm A');
+                            }, headerToolbar: false }) }), (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: loading })] })] }));
+};
+exports.CalendarSection = CalendarSection;

package/PageCalendar/EventDialog/AttributeController.d.ts

@@ -0,0 +1,10 @@
+import { Attribute } from '@headless-adminapp/core';
+import { Path, UseFormReturn } from 'react-hook-form';
+import { BaseFieldValues } from './types';
+interface AttributeControllerProps {
+    attribute: Attribute;
+    attributeName: Path<BaseFieldValues>;
+    form: UseFormReturn<BaseFieldValues>;
+}
+export declare function AttributeController({ attribute, attributeName, form, }: Readonly<AttributeControllerProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/PageCalendar/EventDialog/AttributeController.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttributeController = AttributeController;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const SectionControl_1 = require("../../DataForm/SectionControl");
+const StandardControl_1 = require("../../PageEntityForm/StandardControl");
+function AttributeController({ attribute, attributeName, form, }) {
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: attributeName, render: ({ field, fieldState, formState }) => {
+            const isError = (fieldState.isTouched || formState.isSubmitted) &&
+                !!fieldState.error?.message;
+            const errorMessage = fieldState.isTouched || formState.isSubmitted
+                ? fieldState.error?.message
+                : '';
+            return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: "left", required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, readOnly: attribute.readonly }) }));
+        } }));
+}

package/PageCalendar/EventDialog/EventDialog.d.ts

@@ -0,0 +1,25 @@
+import { BaseEventAttributes } from '@headless-adminapp/app/calendar/baseEventAttributes';
+import { CalendarConfig, CalendarEventResolverFn } from '@headless-adminapp/app/calendar/types';
+import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { Nullable } from '@headless-adminapp/core/types';
+export declare function defineEventAttributes<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes>(beforeDescriptionAttributes?: SA1, afterDescriptionAttributes?: SA2): BaseEventAttributes & SA1 & SA2;
+interface EventDialogProps<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes> {
+    isOpen: boolean;
+    title?: string;
+    beforeDescriptionAttributes?: SA1;
+    afterDescriptionAttributes?: SA2;
+    values: Partial<Nullable<InferredSchemaType<BaseEventAttributes>>>;
+    onSubmit?: (data: {
+        modifiedValues: Partial<Nullable<InferredSchemaType<BaseEventAttributes>>>;
+        values: Nullable<InferredSchemaType<BaseEventAttributes>>;
+    }) => Promise<void>;
+    onCancel?: () => void;
+    onDismiss?: () => void;
+    allowOpenRecord?: boolean;
+    onOpenRecord?: (id: string) => void;
+    onDelete?: (id: string) => void;
+    eventResolver?: CalendarEventResolverFn;
+    config: CalendarConfig;
+}
+export declare function EventDialog<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes>(props: Readonly<EventDialogProps<SA1, SA2>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/PageCalendar/EventDialog/EventDialog.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineEventAttributes = defineEventAttributes;
+exports.EventDialog = EventDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const baseEventAttributes_1 = require("@headless-adminapp/app/calendar/baseEventAttributes");
+const utils_1 = require("@headless-adminapp/core/schema/utils");
+const EventFormBody_1 = require("./EventFormBody");
+function defineEventAttributes(beforeDescriptionAttributes, afterDescriptionAttributes) {
+    return (0, utils_1.defineSchemaAttributes)({
+        ...baseEventAttributes_1.baseEventAttributes,
+        ...beforeDescriptionAttributes,
+        ...afterDescriptionAttributes,
+    });
+}
+function EventDialog(props) {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.isOpen, onOpenChange: () => {
+            props.onDismiss?.();
+        }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsx)(EventFormBody_1.EventFormBody, { values: props.values, config: props.config, onCancel: props.onCancel, onSubmit: props.onSubmit, allowOpenRecord: props.allowOpenRecord, onOpenRecord: props.onOpenRecord, onDelete: props.onDelete }) }) }));
+}

package/PageCalendar/EventDialog/EventFormBody.d.ts

@@ -0,0 +1,18 @@
+import { BaseEventAttributes } from '@headless-adminapp/app/calendar/baseEventAttributes';
+import { CalendarConfig } from '@headless-adminapp/app/calendar/types';
+import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { Nullable } from '@headless-adminapp/core/types';
+interface EventFormBodyProps<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes> {
+    values: Partial<Nullable<InferredSchemaType<BaseEventAttributes> & InferredSchemaType<SA1> & InferredSchemaType<SA2>>>;
+    onSubmit?: (data: {
+        modifiedValues: Partial<Nullable<InferredSchemaType<BaseEventAttributes>>>;
+        values: Nullable<InferredSchemaType<BaseEventAttributes>>;
+    }) => Promise<void>;
+    onCancel?: () => void;
+    allowOpenRecord?: boolean;
+    onOpenRecord?: (id: string) => void;
+    onDelete?: (id: string) => void;
+    config: CalendarConfig;
+}
+export declare function EventFormBody(props: Readonly<EventFormBodyProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/PageCalendar/EventDialog/EventFormBody.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EventFormBody = EventFormBody;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const baseEventAttributes_1 = require("@headless-adminapp/app/calendar/baseEventAttributes");
+const saveRecord_1 = require("@headless-adminapp/app/dataform/utils/saveRecord");
+const form_1 = require("@headless-adminapp/app/form");
+const locale_1 = require("@headless-adminapp/app/locale");
+const icons_fluent_1 = require("@headless-adminapp/icons-fluent");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const BodyLoading_1 = require("../../components/BodyLoading");
+const EventFormContent_1 = require("./EventFormContent");
+const utils_1 = require("./utils");
+function EventFormBody(props) {
+    const { language, region } = (0, locale_1.useLocale)();
+    const formValidationStrings = (0, form_1.useFormValidationStrings)();
+    const { data: record, isPending } = (0, react_query_1.useQuery)({
+        queryKey: ['calendar-events', 'event', props.values.id],
+        queryFn: async () => {
+            if (props.values.id && props.config.eventResolver) {
+                return props.config.eventResolver(props.values.id);
+            }
+            return null;
+        },
+    });
+    const form = (0, react_hook_form_1.useForm)({
+        mode: 'all',
+        defaultValues: props.values,
+        shouldUnregister: false,
+        resolver: (0, utils_1.formValidator)({
+            attributes: baseEventAttributes_1.baseEventAttributes,
+            language,
+            strings: formValidationStrings,
+            region,
+        }),
+    });
+    const formRef = (0, react_1.useRef)(form);
+    formRef.current = form;
+    const defaultValues = (0, react_1.useMemo)(() => {
+        return {
+            ...props.values,
+            ...record,
+            id: props.values.id,
+            title: props.values.title,
+            description: props.values.description,
+            start: props.values.start,
+            end: props.values.end,
+            allDay: props.values.allDay,
+        };
+    }, [record, props.values]);
+    (0, react_1.useEffect)(() => {
+        formRef.current.reset(defaultValues);
+    }, [defaultValues]);
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsxs)(react_components_1.DialogTitle, { action: props.values.id ? ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-end", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", "aria-label": "close", icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.MoreVertical, {}) }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { children: [props.allowOpenRecord && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.OpenInNew, { size: 20 }), onClick: () => props.onOpenRecord?.(props.values.id), children: "Open" })), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.Delete, { size: 20 }), onClick: () => props.onDelete?.(props.values.id), children: "Delete" })] }) })] })) : null, children: [props.values.id ? 'Edit' : 'New', ' ', props.config.eventLabel.toLowerCase()] }), (0, jsx_runtime_1.jsx)(EventFormContent_1.EventFormContent, { form: form, afterDescriptionAttributes: props.config.afterDescriptionAttributes, beforeDescriptionAttributes: props.config.beforeDescriptionAttributes }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", disabled: form.formState.submitCount > 0 && !form.formState.isValid, onClick: async () => {
+                            await form.handleSubmit(async (values) => {
+                                await props.onSubmit?.({
+                                    modifiedValues: values.id
+                                        ? (0, saveRecord_1.getModifiedValues)(defaultValues, values)
+                                        : values,
+                                    values,
+                                });
+                            })();
+                        }, children: props.values.id ? 'Save' : 'Create' }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", type: "button", onClick: () => {
+                            props.onCancel?.();
+                        }, children: props.values.id ? 'Close' : 'Cancel' })] }), (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: isPending })] }));
+}

package/PageCalendar/EventDialog/EventFormContent.d.ts

@@ -0,0 +1,10 @@
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+import { UseFormReturn } from 'react-hook-form';
+import { BaseFieldValues } from './types';
+interface EventFormContentProps<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes> {
+    form: UseFormReturn<BaseFieldValues>;
+    beforeDescriptionAttributes?: SA1;
+    afterDescriptionAttributes?: SA2;
+}
+export declare function EventFormContent<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes>({ form, afterDescriptionAttributes, beforeDescriptionAttributes, }: Readonly<EventFormContentProps<SA1, SA2>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/PageCalendar/EventDialog/EventFormContent.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EventFormContent = EventFormContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const baseEventAttributes_1 = require("@headless-adminapp/app/calendar/baseEventAttributes");
+const AttributeController_1 = require("./AttributeController");
+function EventFormContent({ form, afterDescriptionAttributes, beforeDescriptionAttributes, }) {
+    const allDay = form.watch('allDay');
+    return ((0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: react_components_1.tokens.spacingVerticalM,
+                marginTop: react_components_1.tokens.spacingVerticalL,
+                marginBottom: react_components_1.tokens.spacingVerticalL,
+            }, children: [(0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "title", attribute: baseEventAttributes_1.baseEventAttributes.title }), (0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "start", attribute: {
+                        ...baseEventAttributes_1.baseEventAttributes.start,
+                        ...(allDay ? { format: 'date' } : { format: 'datetime' }),
+                    } }), (0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "end", attribute: {
+                        ...baseEventAttributes_1.baseEventAttributes.end,
+                        ...(allDay ? { format: 'date' } : { format: 'datetime' }),
+                    } }), (0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "allDay", attribute: baseEventAttributes_1.baseEventAttributes.allDay }), Object.entries(beforeDescriptionAttributes ?? {}).map(([attributeName, attribute]) => {
+                    return ((0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: attributeName, attribute: attribute }, attributeName));
+                }), (0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "description", attribute: baseEventAttributes_1.baseEventAttributes.description }), Object.entries(afterDescriptionAttributes ?? {}).map(([attributeName, attribute]) => {
+                    return ((0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: attributeName, attribute: attribute }, attributeName));
+                })] }) }));
+}

package/PageCalendar/EventDialog/types.d.ts

@@ -0,0 +1,3 @@
+import { BaseEventAttributes } from '@headless-adminapp/app/calendar/baseEventAttributes';
+import { InferredSchemaType } from '@headless-adminapp/core/schema';
+export type BaseFieldValues = InferredSchemaType<BaseEventAttributes>;

package/PageCalendar/EventDialog/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/PageCalendar/EventDialog/utils.d.ts

@@ -0,0 +1,23 @@
+import { FormValidationStringSet } from '@headless-adminapp/app/form';
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+import * as yup from 'yup';
+export declare const formValidator: (<A extends SchemaAttributes = SchemaAttributes>({ attributes, language, strings, region, }: {
+    attributes: A;
+    language: string;
+    strings: FormValidationStringSet;
+    region: string;
+}) => (values: Record<string, any>, context: any, options: any) => Promise<import("react-hook-form").ResolverResult<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+}>>) & import("lodash").MemoizedFunction;
+export declare const generateValidationSchema: (<A extends SchemaAttributes = SchemaAttributes>({ attributes, language, strings, region, }: {
+    attributes: A;
+    language: string;
+    strings: FormValidationStringSet;
+    region: string;
+}) => yup.ObjectSchema<{
+    [x: string]: any;
+}, yup.AnyObject, {
+    [x: string]: any;
+}, "">) & import("lodash").MemoizedFunction;