@headless-adminapp/fluent 1.0.2 → 1.1.0

package/PageCalendar/PageCalendar.js

@@ -32,6 +32,7 @@ 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 hooks_1 = require("@headless-adminapp/app/hooks");
 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");
@@ -64,11 +65,12 @@ function PageCalendar(props) {
     const openConfirmDialog = (0, dialog_1.useOpenConfirmDialog)();
     const openToastNotification = (0, toast_notification_1.useOpenToastNotification)();
     const { hideProgressIndicator, showProgressIndicator } = (0, progress_indicator_1.useProgressIndicator)();
+    const isMobile = (0, hooks_1.useIsMobile)();
     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 [viewType, setViewType] = (0, react_1.useState)(isMobile ? types_1.ViewType.Day : types_1.ViewType.Month);
     const queryClient = (0, react_query_1.useQueryClient)();
     const filterForm = (0, react_hook_form_1.useForm)({
         mode: 'all',
@@ -184,6 +186,9 @@ function PageCalendar(props) {
         });
     }
     function handleDateSelect(selectInfo) {
+        if (config.disableCreate) {
+            return;
+        }
         openEventDetailModel({
             title: '',
             start: selectInfo.start.toISOString(),

package/PageCalendar/TitleSelector.js

@@ -7,6 +7,7 @@ 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 hooks_1 = require("@headless-adminapp/app/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
 const icons_fluent_1 = require("@headless-adminapp/icons-fluent");
 const dayjs_1 = __importDefault(require("dayjs"));
@@ -20,20 +21,24 @@ 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 isMobile = (0, hooks_1.useIsMobile)();
     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');
+                return (0, dayjs_1.default)(start).format(isMobile ? 'MMM D' : 'MMM D, YYYY');
             case types_1.ViewType.Week:
+                if (isMobile) {
+                    return `${(0, dayjs_1.default)(start).format('MMM D')} - ${(0, dayjs_1.default)(end).format('D')}`;
+                }
                 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 (0, dayjs_1.default)(start).format(isMobile ? 'MMM YYYY' : 'MMMM YYYY');
         }
         return '';
-    }, [start, end, viewType]);
+    }, [start, end, viewType, isMobile]);
     if (!start || !end) {
         return null;
     }
@@ -61,7 +66,6 @@ const TitleSelector = ({ start, end, onChange, viewType, }) => {
                                 .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')

package/PageEntityForm/PageCustomEntityForm.d.ts

@@ -2,7 +2,6 @@ import { RetriveRecordFn } from '@headless-adminapp/app/dataform/DataFormProvide
 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';
 interface PageCustomEntityFormProps<SA extends SchemaAttributes = SchemaAttributes> {
     recordId?: string;
     schema: Schema<SA>;
@@ -11,5 +10,5 @@ interface PageCustomEntityFormProps<SA extends SchemaAttributes = SchemaAttribut
     retriveRecordFn?: RetriveRecordFn<SA>;
     saveRecordFn?: SaveRecordFn;
 }
-export declare const PageCustomEntityForm: FC<PageCustomEntityFormProps>;
+export declare function PageCustomEntityForm<SA extends SchemaAttributes = SchemaAttributes>({ recordId, commands, form, schema, retriveRecordFn, saveRecordFn, }: Readonly<PageCustomEntityFormProps<SA>>): import("react/jsx-runtime").JSX.Element;
 export {};

package/PageEntityForm/PageCustomEntityForm.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageCustomEntityForm = void 0;
+exports.PageCustomEntityForm = PageCustomEntityForm;
 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 RecordSetNavigatorContainer_1 = require("./RecordSetNavigatorContainer");
-const PageCustomEntityForm = ({ recordId, commands, form, schema, retriveRecordFn, saveRecordFn, }) => {
+function 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.jsxs)("div", { style: {
                 display: 'flex',
                 flex: 1,
@@ -14,5 +14,4 @@ const PageCustomEntityForm = ({ recordId, commands, form, schema, retriveRecordF
                 backgroundColor: react_components_1.tokens.colorNeutralBackground2,
                 overflow: 'hidden',
             }, children: [(0, jsx_runtime_1.jsx)(RecordSetNavigatorContainer_1.RecordSetNavigatorContainer, {}), (0, jsx_runtime_1.jsx)(PageEntityFormDesktopContainer_1.PageEntityFormDesktopContainer, {})] }) }));
-};
-exports.PageCustomEntityForm = PageCustomEntityForm;
+}

package/PageEntityForm/PageEntityFormDesktopContainer.js

@@ -112,6 +112,10 @@ const PageEntityFormDesktopContainer = () => {
                                                                 ? `- ${strings.saved}`
                                                                 : '' })] }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground3 }, children: (0, utils_1.localizedLabel)(language, schema) })] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'row' }, children: formConfig.experience.headerControls?.map((controlName, index) => {
                                             const attribute = schema.attributes[controlName];
+                                            if (!attribute) {
+                                                console.warn(`Attribute ${controlName} not found`);
+                                                return null;
+                                            }
                                             return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && ((0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: true, style: {
                                                             width: react_components_1.tokens.spacingHorizontalXXL,
                                                             opacity: 0.5,

package/PageEntityForm/RecordAvatar.js

@@ -38,7 +38,6 @@ const RecordAvatar = () => {
         if (!recordId) {
             return;
         }
-        console.log('onChange', value);
         try {
             showProgressIndicator();
             await dataService.updateRecord(schema.logicalName, recordId, {
@@ -61,7 +60,7 @@ const RecordAvatar = () => {
         return null;
     }
     if (isPlaceholder && !value) {
-        const Icon = experienceSchema.icon ?? icons_1.Icons.Entity ?? icons_1.IconPlaceholder;
+        const Icon = experienceSchema.Icon ?? icons_1.Icons.Entity ?? icons_1.IconPlaceholder;
         return ((0, jsx_runtime_1.jsx)("div", { style: {
                 display: 'flex',
                 alignItems: 'flex-start',

package/PageEntityForm/RecordCard.js

@@ -40,24 +40,27 @@ function RecordCard({ schema, cardView, record, selected, }) {
     const recordTitle = _record[schema.primaryAttribute];
     const initials = createIntial(recordTitle);
     let avatarSrc = '';
-    if (cardView.avatarColumn) {
-        const avatarAttribute = schema.attributes[cardView.avatarColumn];
-        if (avatarAttribute.type === 'attachment' &&
-            avatarAttribute.format === 'image') {
-            avatarSrc = _record[cardView.avatarColumn]?.url;
-        }
-        else if (avatarAttribute.type === 'string' &&
-            avatarAttribute.format === 'url') {
-            avatarSrc = _record[cardView.avatarColumn];
+    if (cardView.showAvatar) {
+        const avatarColumn = cardView.avatarColumn || schema.avatarAttribute;
+        if (avatarColumn) {
+            const avatarAttribute = schema.attributes[avatarColumn];
+            if (avatarAttribute.type === 'attachment' &&
+                avatarAttribute.format === 'image') {
+                avatarSrc = _record[avatarColumn]?.url;
+            }
+            else if (avatarAttribute.type === 'string' &&
+                avatarAttribute.format === 'url') {
+                avatarSrc = _record[avatarColumn];
+            }
         }
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, react_components_1.mergeClasses)(styles.root, selected && styles.selected), children: [cardView.showAvatar && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", style: { cursor: 'pointer' }, image: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, react_components_1.mergeClasses)(styles.root, selected && styles.selected), children: [cardView.showAvatar && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", size: !cardView.secondaryColumns?.length ? 20 : 32, style: { cursor: 'pointer' }, image: {
                     src: avatarSrc,
                 } })), (0, jsx_runtime_1.jsxs)("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     flex: 1,
-                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { wordBreak: 'break-all' }, children: _record[cardView.primaryColumn] }), cardView.secondaryColumns?.map((column) => ((0, jsx_runtime_1.jsx)(SecondaryColumnContent, { record: _record, column: column, schema: schema }, column.name)))] }), !!cardView.rightColumn?.length && ((0, jsx_runtime_1.jsx)("div", { style: {
+                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { wordBreak: 'break-all' }, children: (0, utils_1.getAttributeFormattedValue)(schema.attributes[cardView.primaryColumn], _record[cardView.primaryColumn]) }), cardView.secondaryColumns?.map((column) => ((0, jsx_runtime_1.jsx)(SecondaryColumnContent, { record: _record, column: column, schema: schema }, column.name)))] }), !!cardView.rightColumn?.length && ((0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'flex-end',
@@ -69,18 +72,7 @@ function RecordCard({ schema, cardView, record, selected, }) {
                     const attribute = schema.attributes[column.name];
                     if (column.variant === 'choice') {
                         if (attribute.type === 'choice') {
-                            const choice = attribute.options.find((option) => option.value === value);
-                            if (!choice) {
-                                return null;
-                            }
-                            return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
-                                    background: choice.color,
-                                    color: 'white',
-                                    height: 16,
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                }, children: choice.label }, column.name));
+                            return ((0, jsx_runtime_1.jsx)(ChoiceTag, { attribute: attribute, value: value }, column.name));
                         }
                     }
                     if (column.variant === 'strong') {
@@ -130,12 +122,9 @@ const ChoiceTag = ({ attribute, value, }) => {
     if (bgColor) {
         color = (0, color_1.isColorDark)(bgColor) ? '#FFFFFF' : '#000000';
     }
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Badge, { size: "small", appearance: "filled", style: {
             background: bgColor,
             color: color,
-            height: 16,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
+            fontWeight: react_components_1.tokens.fontWeightRegular,
         }, children: choice.label }));
 };

package/PageEntityForm/RelatedViewSelector.js

@@ -88,6 +88,7 @@ function RelatedViewSelector(props) {
                         padding: `${react_components_1.tokens.spacingVerticalM} ${react_components_1.tokens.spacingHorizontalMNudge}`,
                         fontFamily: react_components_1.tokens.fontFamilyBase,
                         lineHeight: react_components_1.tokens.lineHeightBase300,
+                        fontSize: react_components_1.tokens.fontSizeBase300,
                         backgroundColor: react_components_1.tokens.colorTransparentBackground,
                         alignItems: 'center',
                         position: 'relative',

package/PageEntityForm/SectionContainer.js

@@ -7,6 +7,7 @@ const constants_1 = require("@headless-adminapp/app/dataform/constants");
 const utils_1 = require("@headless-adminapp/app/dataform/DataFormProvider/utils");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
 const useEventManager_1 = require("@headless-adminapp/app/dataform/hooks/useEventManager");
+const hooks_2 = require("@headless-adminapp/app/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
 const utils_2 = require("@headless-adminapp/app/locale/utils");
 const mutable_1 = require("@headless-adminapp/app/mutable");
@@ -24,6 +25,7 @@ function SectionContainer({ section }) {
     const isFormReadonly = (0, hooks_1.useFormIsReadonly)();
     const { language } = (0, locale_1.useLocale)();
     const eventManager = (0, useEventManager_1.useEventManager)();
+    const isMobile = (0, hooks_2.useIsMobile)();
     const disabledControls = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.disabledControls);
     const hiddenControls = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.hiddenControls);
     const requiredFields = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.requiredFields);
@@ -41,6 +43,10 @@ function SectionContainer({ section }) {
             switch (control.type) {
                 case 'standard': {
                     const attribute = schema.attributes[control.attributeName];
+                    if (!attribute) {
+                        console.warn(`Attribute ${control.attributeName} not found`);
+                        return null;
+                    }
                     let Control = StandardControl_1.StandardControl;
                     if (control.component) {
                         if (typeof control.component === 'function') {
@@ -78,7 +84,7 @@ function SectionContainer({ section }) {
                                     attribute.localizedLabels?.[language] ??
                                     control.label ??
                                     attribute.label;
-                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelPosition: section.labelPosition, required: required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(Control, { attribute: attribute, name: control.attributeName, value: field.value, onChange: (value) => {
+                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelPosition: isMobile ? 'top' : section.labelPosition, required: required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(Control, { attribute: attribute, name: control.attributeName, value: field.value, onChange: (value) => {
                                             const previousValue = field.value;
                                             field.onChange(value);
                                             eventManager.emit(constants_1.EVENT_KEY_ON_FIELD_CHANGE, control.attributeName, value, previousValue);

package/PageEntityView/PageEntityView.d.ts

@@ -3,6 +3,7 @@ interface PageEntityViewProps {
     logicalName: string;
     viewId?: string;
     onChangeView?: (viewId: string) => void;
+    useV2?: boolean;
 }
 export declare const PageEntityView: FC<PageEntityViewProps>;
 export {};

package/PageEntityView/PageEntityView.js

@@ -10,7 +10,7 @@ const PageBroken_1 = require("../components/PageBroken");
 const PageLoading_1 = require("../components/PageLoading");
 const PageEntityViewDesktopContainer_1 = require("./PageEntityViewDesktopContainer");
 const PageEntityViewMobileContainer_1 = require("./PageEntityViewMobileContainer");
-const PageEntityView = ({ logicalName, viewId, onChangeView, }) => {
+const PageEntityView = ({ logicalName, viewId, onChangeView, useV2, }) => {
     const result = (0, datagrid_1.useLoadMainGridPage)(logicalName, viewId);
     const isMobile = (0, hooks_1.useIsMobile)();
     if (result.loading) {
@@ -20,6 +20,16 @@ const PageEntityView = ({ logicalName, viewId, onChangeView, }) => {
         return ((0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { Icon: icons_1.Icons.Error, title: result.title, message: result.message }));
     }
     const { schema, commands, viewLookup, view } = result;
-    return ((0, jsx_runtime_1.jsx)(PageEntityViewProvider_1.PageEntityViewProvider, { schema: schema, view: view, availableViews: viewLookup, commands: commands, onChangeView: onChangeView, children: isMobile ? ((0, jsx_runtime_1.jsx)(PageEntityViewMobileContainer_1.PageEntityViewMobileContainer, {})) : ((0, jsx_runtime_1.jsx)(PageEntityViewDesktopContainer_1.PageEntityViewDesktopContainer, {})) }));
+    let content = null;
+    if (isMobile) {
+        content = (0, jsx_runtime_1.jsx)(PageEntityViewMobileContainer_1.PageEntityViewMobileContainer, {});
+    }
+    else if (!useV2) {
+        content = (0, jsx_runtime_1.jsx)(PageEntityViewDesktopContainer_1.PageEntityViewDesktopContainer, {});
+    }
+    else {
+        content = (0, jsx_runtime_1.jsx)(PageEntityViewDesktopContainer_1.PageEntityViewDesktopContainerV2, {});
+    }
+    return ((0, jsx_runtime_1.jsx)(PageEntityViewProvider_1.PageEntityViewProvider, { schema: schema, view: view, availableViews: viewLookup, commands: commands, onChangeView: onChangeView, children: content }));
 };
 exports.PageEntityView = PageEntityView;

package/PageEntityView/PageEntityViewDesktopContainer.d.ts

@@ -1,2 +1,3 @@
 import { FC } from 'react';
 export declare const PageEntityViewDesktopContainer: FC;
+export declare const PageEntityViewDesktopContainerV2: FC;

package/PageEntityView/PageEntityViewDesktopContainer.js

@@ -1,14 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageEntityViewDesktopContainer = void 0;
+exports.PageEntityViewDesktopContainerV2 = exports.PageEntityViewDesktopContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const CommandContainer_1 = require("../DataGrid/CommandContainer");
 const GridHeaderContainer_1 = require("../DataGrid/GridHeaderContainer");
 const GridPaginationContainer_1 = require("../DataGrid/GridPaginationContainer");
 const GridTableContainer_1 = require("../DataGrid/GridTableContainer");
 const PageEntityViewDesktopFrame_1 = require("./PageEntityViewDesktopFrame");
+const PageEntityViewDesktopFrameV2_1 = require("./PageEntityViewDesktopFrameV2");
 const PageEntityViewDesktopContainer = () => {
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PageEntityViewDesktopFrame_1.PageEntityViewDesktopFrame, { commandBar: (0, jsx_runtime_1.jsx)(CommandContainer_1.CommandContainer, {}), header: (0, jsx_runtime_1.jsx)(GridHeaderContainer_1.GridHeaderContainer, {}), content: (0, jsx_runtime_1.jsx)(GridTableContainer_1.GridTableContainer, {}), footer: (0, jsx_runtime_1.jsx)(GridPaginationContainer_1.GridPaginationContainer, {}) }) }));
+    return ((0, jsx_runtime_1.jsx)(PageEntityViewDesktopFrame_1.PageEntityViewDesktopFrame, { commandBar: (0, jsx_runtime_1.jsx)(CommandContainer_1.CommandContainer, {}), header: (0, jsx_runtime_1.jsx)(GridHeaderContainer_1.GridHeaderContainer, {}), content: (0, jsx_runtime_1.jsx)(GridTableContainer_1.GridTableContainer, { headerHeight: 33, rowHeight: 44 }), footer: (0, jsx_runtime_1.jsx)(GridPaginationContainer_1.GridPaginationContainer, {}) }));
 };
 exports.PageEntityViewDesktopContainer = PageEntityViewDesktopContainer;
+const PageEntityViewDesktopContainerV2 = () => {
+    return ((0, jsx_runtime_1.jsx)(PageEntityViewDesktopFrameV2_1.PageEntityViewDesktopFrameV2, { header: (0, jsx_runtime_1.jsx)(GridHeaderContainer_1.GridHeaderContainerV2, {}), content: (0, jsx_runtime_1.jsx)(GridTableContainer_1.GridTableContainer, { noPadding: true, headerHeight: 40, rowHeight: 44 }), footer: (0, jsx_runtime_1.jsx)(GridPaginationContainer_1.GridPaginationContainer, {}) }));
+};
+exports.PageEntityViewDesktopContainerV2 = PageEntityViewDesktopContainerV2;

package/PageEntityView/PageEntityViewDesktopFrame.js

@@ -44,6 +44,6 @@ const PageEntityViewDesktopFrame = ({ commandBar, header, content, footer }) =>
                                 display: 'flex',
                                 flexDirection: 'column',
                                 gap: 8,
-                            }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), footer] })] })] }) }));
+                            }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.5 } }), footer] })] })] }) }));
 };
 exports.PageEntityViewDesktopFrame = PageEntityViewDesktopFrame;

package/PageEntityView/PageEntityViewDesktopFrameV2.d.ts

@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+interface PageEntityViewDesktopFrameProps {
+    header: React.ReactNode;
+    content: React.ReactNode;
+    footer: React.ReactNode;
+}
+export declare const PageEntityViewDesktopFrameV2: FC<PageEntityViewDesktopFrameProps>;
+export {};

package/PageEntityView/PageEntityViewDesktopFrameV2.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEntityViewDesktopFrameV2 = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+// Exprement component
+const PageEntityViewDesktopFrameV2 = ({ header, content, footer }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            gap: 8,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+            padding: 12,
+            overflow: 'hidden',
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                gap: 12,
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        paddingBlock: 8,
+                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                            gap: 16,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            flex: 1,
+                        }, children: header }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        boxShadow: react_components_1.tokens.shadow2,
+                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        background: react_components_1.tokens.colorNeutralBackground1,
+                        overflow: 'hidden',
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                gap: 16,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                flex: 1,
+                            }, children: (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: 'flex' }, children: content }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                            }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.5 } }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', paddingInline: 8, paddingBlock: 8 }, children: footer })] })] })] }) }));
+};
+exports.PageEntityViewDesktopFrameV2 = PageEntityViewDesktopFrameV2;

package/PageEntityView/PageEntityViewMobileContainer.js

@@ -6,9 +6,8 @@ const react_1 = require("react");
 const CommandContainer_1 = require("../DataGrid/CommandContainer");
 const GridHeaderMobile_1 = require("../DataGrid/GridHeaderMobile");
 const GridListContainer_1 = require("../DataGrid/GridListContainer");
-const GridPaginationContainer_1 = require("../DataGrid/GridPaginationContainer");
-const PageEntityViewDesktopFrame_1 = require("./PageEntityViewDesktopFrame");
+const PageEntityViewMobileFrame_1 = require("./PageEntityViewMobileFrame");
 const PageEntityViewMobileContainer = () => {
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PageEntityViewDesktopFrame_1.PageEntityViewDesktopFrame, { commandBar: (0, jsx_runtime_1.jsx)(CommandContainer_1.CommandContainer, {}), header: (0, jsx_runtime_1.jsx)(GridHeaderMobile_1.GridHeaderMobile, {}), content: (0, jsx_runtime_1.jsx)(GridListContainer_1.GridListContainer, {}), footer: (0, jsx_runtime_1.jsx)(GridPaginationContainer_1.GridPaginationContainer, {}) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PageEntityViewMobileFrame_1.PageEntityViewMobileFrame, { commandBar: (0, jsx_runtime_1.jsx)(CommandContainer_1.CommandContainer, {}), header: (0, jsx_runtime_1.jsx)(GridHeaderMobile_1.GridHeaderMobile, {}), content: (0, jsx_runtime_1.jsx)(GridListContainer_1.GridListContainer, {}) }) }));
 };
 exports.PageEntityViewMobileContainer = PageEntityViewMobileContainer;

package/PageEntityView/PageEntityViewMobileFrame.d.ts

@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+interface PageEntityViewMobileFrameProps {
+    commandBar: React.ReactNode;
+    header: React.ReactNode;
+    content: React.ReactNode;
+}
+export declare const PageEntityViewMobileFrame: FC<PageEntityViewMobileFrameProps>;
+export {};

package/PageEntityView/PageEntityViewMobileFrame.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEntityViewMobileFrame = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const PageEntityViewMobileFrame = ({ commandBar, header, content, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            background: react_components_1.tokens.colorNeutralBackground1,
+            overflow: 'hidden',
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                gap: 4,
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                        boxShadow: react_components_1.tokens.shadow2,
+                        background: react_components_1.tokens.colorNeutralBackground1,
+                        display: 'flex',
+                        minHeight: 40,
+                        flexDirection: 'column',
+                        gap: 4,
+                        paddingBottom: 8,
+                    }, children: [commandBar, header] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                            gap: 8,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            flex: 1,
+                        }, children: (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: 'flex' }, children: content }) }) })] }) }));
+};
+exports.PageEntityViewMobileFrame = PageEntityViewMobileFrame;

package/PageInsight/PageInsight.d.ts

@@ -0,0 +1,7 @@
+import { InsightConfig } from '@headless-adminapp/core/experience/insights';
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+interface PageInsightProps<S extends SchemaAttributes = SchemaAttributes> {
+    config: InsightConfig<S>;
+}
+export declare function PageInsight<S extends SchemaAttributes = SchemaAttributes>({ config, }: Readonly<PageInsightProps<S>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/PageInsight/PageInsight.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageInsight = PageInsight;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const insights_1 = require("@headless-adminapp/app/insights");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const store_1 = require("@headless-adminapp/app/store");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const InsightsContainer_1 = require("../Insights/InsightsContainer");
+function PageInsight({ config, }) {
+    const filterForm = (0, react_hook_form_1.useForm)({
+        mode: 'all',
+        defaultValues: config.defaultFilter,
+        shouldUnregister: false,
+    });
+    const filterValues = filterForm.watch();
+    const eventManager = (0, react_1.useMemo)(() => new store_1.EventManager(), []);
+    const insightsValues = (0, mutable_1.useCreateContextStore)({
+        config,
+        filterValues,
+        eventManager,
+    });
+    (0, react_1.useEffect)(() => {
+        insightsValues.setValue({
+            config,
+            filterValues,
+        });
+    }, [config, filterValues, insightsValues]);
+    return ((0, jsx_runtime_1.jsx)(insights_1.InsightsContext.Provider, { value: insightsValues, children: (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, { ...filterForm, children: (0, jsx_runtime_1.jsx)(InsightsContainer_1.InsightsContainer, {}) }) }));
+}

package/PageInsight/index.d.ts

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

package/PageInsight/index.js

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

package/PageInsights/PageInsights.d.ts

@@ -1,9 +1,7 @@
-import { InsightExpereince, InsightLookup } from '@headless-adminapp/core/experience/insights';
-export declare function createInsightLookup(insights: InsightExpereince[]): InsightLookup[];
-interface PageInsightsProps {
-    insights: InsightExpereince[];
-    insightId: string;
-    onChangeInsight: (id: string) => void;
+import { InsightConfig } from '@headless-adminapp/core/experience/insights';
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+interface PageInsightsProps<S extends SchemaAttributes = SchemaAttributes> {
+    config: InsightConfig<S>;
 }
-export declare function PageInsights({ insightId, insights, onChangeInsight, }: PageInsightsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function PageInsights<S extends SchemaAttributes = SchemaAttributes>({ config, }: Readonly<PageInsightsProps<S>>): import("react/jsx-runtime").JSX.Element;
 export {};

package/PageInsights/PageInsights.js

@@ -1,25 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createInsightLookup = createInsightLookup;
 exports.PageInsights = PageInsights;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const InsightsProvider_1 = require("@headless-adminapp/app/insights/InsightsProvider");
+const insights_1 = require("@headless-adminapp/app/insights");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const store_1 = require("@headless-adminapp/app/store");
 const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
 const InsightsContainer_1 = require("../Insights/InsightsContainer");
-function createInsightLookup(insights) {
-    return insights.map((insight) => ({
-        id: insight.id,
-        title: insight.title,
-        subtitle: insight.subtitle,
-    }));
-}
-function PageInsights({ insightId, insights, onChangeInsight, }) {
-    const insightExpereince = (0, react_1.useMemo)(() => {
-        return insights.find((insight) => insight.id === insightId);
-    }, [insightId, insights]);
-    const insightLookups = (0, react_1.useMemo)(() => createInsightLookup(insights), [insights]);
-    if (!insightExpereince) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(InsightsProvider_1.InsightsProvider, { experience: insightExpereince, insightLookup: insightLookups, onInsightSelect: onChangeInsight, children: (0, jsx_runtime_1.jsx)(InsightsContainer_1.InsightsContainer, {}) }));
+function PageInsights({ config, }) {
+    const filterForm = (0, react_hook_form_1.useForm)({
+        mode: 'all',
+        defaultValues: config.defaultFilter,
+        shouldUnregister: false,
+    });
+    const filterValues = filterForm.watch();
+    const eventManager = (0, react_1.useMemo)(() => new store_1.EventManager(), []);
+    const insightsValues = (0, mutable_1.useCreateContextStore)({
+        config,
+        filterValues,
+        eventManager,
+    });
+    (0, react_1.useEffect)(() => {
+        insightsValues.setValue({
+            config,
+            filterValues,
+        });
+    }, [config, filterValues, insightsValues]);
+    return ((0, jsx_runtime_1.jsx)(insights_1.InsightsContext.Provider, { value: insightsValues, children: (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, { ...filterForm, children: (0, jsx_runtime_1.jsx)(InsightsContainer_1.InsightsContainer, {}) }) }));
 }

package/PageInsights/index.d.ts

@@ -1 +1 @@
-export { PageInsights, createInsightLookup } from './PageInsights';
+export { PageInsights } from './PageInsights';

package/PageInsights/index.js

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

package/components/ComponentBroken.d.ts

@@ -0,0 +1,7 @@
+import { Icon } from '@headless-adminapp/icons';
+interface ComponentBrokenProps {
+    message?: string;
+    Icon?: Icon;
+}
+export declare function ComponentBroken({ message, Icon }: ComponentBrokenProps): import("react/jsx-runtime").JSX.Element;
+export {};