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

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;

package/PageCalendar/EventDialog/utils.js

@@ -0,0 +1,57 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateValidationSchema = exports.formValidator = void 0;
+const utils_1 = require("@headless-adminapp/app/dataform/utils");
+const yup_1 = require("@hookform/resolvers/yup");
+const lodash_1 = require("lodash");
+const yup = __importStar(require("yup"));
+// TODO: refactor duplicate code
+exports.formValidator = (0, lodash_1.memoize)(function formValidator({ attributes, language, strings, region, }) {
+    return async (values, context, options) => {
+        const validator = (0, exports.generateValidationSchema)({
+            attributes,
+            language,
+            strings,
+            region,
+        });
+        const resolver = (0, yup_1.yupResolver)(validator);
+        const result = await resolver(values, context, options);
+        return result;
+    };
+}, (options) => JSON.stringify(options));
+exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema({ attributes, language, strings, region, }) {
+    const columns = Object.keys(attributes);
+    return yup.object().shape({
+        ...columns.reduce((acc, column) => {
+            const attribute = attributes[column];
+            const validationSchema = (0, utils_1.generateAttributeValidationSchema)(attribute, language, strings, region);
+            return {
+                ...acc,
+                [column]: validationSchema,
+            };
+        }, {}),
+    });
+}, (options) => JSON.stringify(options));

package/PageCalendar/Header.d.ts

@@ -0,0 +1,8 @@
+import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { UseFormReturn } from 'react-hook-form';
+interface HeaderProps<SA extends SchemaAttributes = SchemaAttributes> {
+    filterForm: UseFormReturn<InferredSchemaType<SA>, unknown, undefined>;
+    onCreateButtonClick: () => void;
+}
+export declare function Header<SA extends SchemaAttributes = SchemaAttributes>({ filterForm, onCreateButtonClick, }: Readonly<HeaderProps<SA>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/PageCalendar/Header.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = Header;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const useConfig_1 = require("@headless-adminapp/app/calendar/hooks/useConfig");
+const icons_fluent_1 = require("@headless-adminapp/icons-fluent");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const StandardControl_1 = require("../PageEntityForm/StandardControl");
+function Header({ filterForm, onCreateButtonClick, }) {
+    const config = (0, useConfig_1.useConfig)();
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            background: react_components_1.tokens.colorNeutralBackground1,
+            borderRadius: react_components_1.tokens.borderRadiusLarge,
+            paddingBlock: react_components_1.tokens.spacingVerticalS,
+            paddingInline: react_components_1.tokens.spacingHorizontalM,
+            gap: react_components_1.tokens.spacingVerticalS,
+            boxShadow: react_components_1.tokens.shadow2,
+        }, children: [(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: config.title }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground2 }, children: config.description })] }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: react_components_1.tokens.spacingHorizontalS,
+                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { style: { fontWeight: react_components_1.tokens.fontWeightMedium }, icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.Add, {}), appearance: "primary", onClick: onCreateButtonClick, children: "Create" }) })] }), !!config.filterAttributes && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: Object.entries(config.filterAttributes).map(([attributeName, attribute]) => {
+                            return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: filterForm.control, name: attributeName, render: ({ field }) => {
+                                    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) }));
+                                } }, attributeName));
+                        }) })] }))] }));
+}

package/PageCalendar/PageCalendar.d.ts

@@ -0,0 +1,7 @@
+import { CalendarConfig } from '@headless-adminapp/app/calendar/types';
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+interface PageCalendarProps<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes, SA3 extends SchemaAttributes = SchemaAttributes> {
+    config: CalendarConfig<SA1, SA2, SA3>;
+}
+export declare function PageCalendar<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes, SA3 extends SchemaAttributes = SchemaAttributes>(props: Readonly<PageCalendarProps<SA1, SA2, SA3>>): import("react/jsx-runtime").JSX.Element;
+export {};