@headless-adminapp/fluent 0.0.17-alpha.1

package/OverflowCommandBar/OverflowMenu.js

@@ -0,0 +1,45 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverflowMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const locale_1 = require("@headless-adminapp/app/locale");
+const icons_1 = require("@headless-adminapp/icons");
+const react_1 = require("react");
+const MenuItem_1 = require("../CommandBar/MenuItem");
+const OverflowMenuDivider_1 = require("./OverflowMenuDivider");
+const utils_1 = require("./utils");
+const OverflowMenu = ({ items, }) => {
+    const { ref, isOverflowing } = (0, react_components_1.useOverflowMenu)();
+    const { language } = (0, locale_1.useLocale)();
+    if (!isOverflowing) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-end", hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { ref: ref, type: "button", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreHorizontal, {}) }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: items.map((group, groupIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [groupIndex > 0 && ((0, jsx_runtime_1.jsx)(OverflowMenuDivider_1.OverflowMenuDivider, { id: String(groupIndex), previousGroupId: String(groupIndex - 1) })), group.map((item, index) => {
+                                var _a, _b;
+                                const text = 'text' in item ? (_a = item.text) !== null && _a !== void 0 ? _a : '' : '';
+                                return ((0, jsx_runtime_1.jsx)(OverflowMenuItem, { id: `${groupIndex}-${index}`, Icon: item.Icon, onClick: item.type !== 'label' ? item.onClick : undefined, text: text, danger: item.danger, disabled: item.type !== 'label' ? item.disabled : undefined, items: item.type === 'menu'
+                                        ? (_b = item.items) === null || _b === void 0 ? void 0 : _b.map((x) => (0, utils_1.transformMenuItems)(x, language))
+                                        : undefined }, index));
+                            })] }, groupIndex))) }) })] }));
+};
+exports.OverflowMenu = OverflowMenu;
+const OverflowMenuItem = (props) => {
+    const { id } = props, rest = __rest(props, ["id"]);
+    const isVisible = (0, react_components_1.useIsOverflowItemVisible)(id);
+    if (isVisible) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, Object.assign({}, rest));
+};

package/OverflowCommandBar/OverflowMenuDivider.d.ts

@@ -0,0 +1,4 @@
+export declare const OverflowMenuDivider: React.FC<{
+    id: string;
+    previousGroupId: string;
+}>;

package/OverflowCommandBar/OverflowMenuDivider.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverflowMenuDivider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const OverflowMenuDivider = (props) => {
+    const isGroupVisible = (0, react_components_1.useIsOverflowGroupVisible)(props.id);
+    const isPreviousGroupVisible = (0, react_components_1.useIsOverflowGroupVisible)(props.previousGroupId);
+    if (isGroupVisible !== 'hidden' || isPreviousGroupVisible === 'visible') {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {});
+};
+exports.OverflowMenuDivider = OverflowMenuDivider;

package/OverflowCommandBar/index.d.ts

@@ -0,0 +1,3 @@
+export { OverflowCommandBar } from './OverflowCommandBar';
+export { transformMenuItems } from './utils';
+export { renderCommandItem } from './render';

package/OverflowCommandBar/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderCommandItem = exports.transformMenuItems = exports.OverflowCommandBar = void 0;
+var OverflowCommandBar_1 = require("./OverflowCommandBar");
+Object.defineProperty(exports, "OverflowCommandBar", { enumerable: true, get: function () { return OverflowCommandBar_1.OverflowCommandBar; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "transformMenuItems", { enumerable: true, get: function () { return utils_1.transformMenuItems; } });
+var render_1 = require("./render");
+Object.defineProperty(exports, "renderCommandItem", { enumerable: true, get: function () { return render_1.renderCommandItem; } });

package/OverflowCommandBar/render.d.ts

@@ -0,0 +1,2 @@
+import { CommandItemState } from '@headless-adminapp/app/command';
+export declare function renderCommandItem(key: string | number, item: CommandItemState, language: string): import("react/jsx-runtime").JSX.Element;

package/OverflowCommandBar/render.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderCommandItem = renderCommandItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CommandBar_1 = __importDefault(require("../CommandBar"));
+const MenuButton_1 = require("../CommandBar/MenuButton");
+const utils_1 = require("./utils");
+function renderCommandItem(key, item, language) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const commandType = item.type;
+    switch (item.type) {
+        case 'menu':
+            return ((0, jsx_runtime_1.jsx)(MenuButton_1.CommandMenuButton, { Icon: item.Icon, text: (_c = (_b = (_a = item.localizedTexts) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.text) !== null && _c !== void 0 ? _c : '', danger: item.danger, disabled: item.disabled, onClick: item.onClick, items: (_d = item.items) === null || _d === void 0 ? void 0 : _d.map((x) => (0, utils_1.transformMenuItems)(x, language)) }, key));
+        case 'button':
+            return ((0, jsx_runtime_1.jsx)(CommandBar_1.default.Button, { text: (_g = (_f = (_e = item.localizedTexts) === null || _e === void 0 ? void 0 : _e[language]) !== null && _f !== void 0 ? _f : item.text) !== null && _g !== void 0 ? _g : '', Icon: item.Icon, iconPosition: (_h = item.iconPosition) !== null && _h !== void 0 ? _h : 'before', danger: item.danger, disabled: item.disabled, onClick: item.onClick }, key));
+        case 'label':
+            return ((0, jsx_runtime_1.jsx)(CommandBar_1.default.Label, { text: (_l = (_k = (_j = item.localizedTexts) === null || _j === void 0 ? void 0 : _j[language]) !== null && _k !== void 0 ? _k : item.text) !== null && _l !== void 0 ? _l : '', Icon: item.Icon }, key));
+        case 'icon':
+            return ((0, jsx_runtime_1.jsx)(CommandBar_1.default.IconButton, { Icon: item.Icon, danger: item.danger, disabled: item.disabled, onClick: item.onClick }, key));
+        default:
+            throw new Error(`Unknown command type: ${commandType}`);
+    }
+}

package/OverflowCommandBar/utils.d.ts

@@ -0,0 +1,4 @@
+import { MenuItemCommandState } from '@headless-adminapp/app/command';
+import { ArrayWithAtLeastOne } from '@headless-adminapp/core/types';
+import { MenuItemProps } from '../CommandBar/MenuItem';
+export declare function transformMenuItems(items: ArrayWithAtLeastOne<MenuItemCommandState>, language: string): ArrayWithAtLeastOne<MenuItemProps>;

package/OverflowCommandBar/utils.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformMenuItems = transformMenuItems;
+function transformMenuItem(item, language) {
+    var _a, _b, _c, _d;
+    return {
+        Icon: item.Icon,
+        text: (_c = (_b = (_a = item.localizedTexts) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.text) !== null && _c !== void 0 ? _c : '',
+        danger: item.danger,
+        onClick: item.onClick,
+        disabled: item.disabled,
+        items: (_d = item.items) === null || _d === void 0 ? void 0 : _d.map((x) => transformMenuItems(x, language)),
+    };
+}
+function transformMenuItems(items, language) {
+    return items.map((x) => transformMenuItem(x, language));
+}

package/PageEntityForm/CommandContainer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const CommandContainer: FC;

package/PageEntityForm/CommandContainer.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const recordset_1 = require("@headless-adminapp/app/recordset");
+const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
+const hooks_3 = require("@headless-adminapp/app/route/hooks");
+const icons_1 = require("@headless-adminapp/icons");
+const react_1 = require("react");
+const OverflowCommandBar_1 = require("../OverflowCommandBar");
+const CommandContainer = () => {
+    const gridCommands = (0, hooks_1.useMainFormCommands)();
+    const router = (0, hooks_3.useRouter)();
+    const schema = (0, hooks_1.useDataFormSchema)();
+    const [recordSetVisible, setRecordSetVisible] = (0, hooks_2.useRecordSetVisibility)();
+    const recordSetContext = (0, mutable_1.useContextSelector)(recordset_1.RecordSetContext, (state) => state);
+    const extendedCommands = (0, react_1.useMemo)(() => {
+        return [
+            [
+                {
+                    type: 'icon',
+                    Icon: icons_1.Icons.ArrowLeft,
+                    onClick: () => {
+                        router.back();
+                    },
+                },
+            ],
+            ...(recordSetContext.logicalName === schema.logicalName &&
+                recordSetContext.ids.length > 0
+                ? [
+                    [
+                        {
+                            type: 'icon',
+                            Icon: icons_1.Icons.ListLtr,
+                            onClick: () => {
+                                setRecordSetVisible(!recordSetVisible);
+                            },
+                        },
+                    ],
+                ]
+                : []),
+            ...gridCommands,
+        ];
+    }, [gridCommands, recordSetContext, recordSetVisible, schema.logicalName]);
+    return (0, jsx_runtime_1.jsx)(OverflowCommandBar_1.OverflowCommandBar, { commands: extendedCommands });
+};
+exports.CommandContainer = CommandContainer;

package/PageEntityForm/FormTabRelated.d.ts

@@ -0,0 +1,6 @@
+import { RelatedItemInfo } from './RelatedViewSelector';
+interface FormTabRelatedProps {
+    selectedRelatedItem: RelatedItemInfo | null;
+}
+export declare function FormTabRelated({ selectedRelatedItem }: FormTabRelatedProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/PageEntityForm/FormTabRelated.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormTabRelated = FormTabRelated;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const hooks_2 = require("@headless-adminapp/app/dataform/hooks");
+const FormTab_1 = require("../form/layout/FormTab");
+const SubgridControl_1 = require("./SubgridControl");
+function FormTabRelated({ selectedRelatedItem }) {
+    const recordId = (0, hooks_2.useRecordId)();
+    const schema = (0, hooks_1.useDataFormSchema)();
+    return ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab, { value: "related", noWrapper: true, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                flex: 1,
+            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flex: 1,
+                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        boxShadow: react_components_1.tokens.shadow2,
+                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        background: react_components_1.tokens.colorNeutralBackground1,
+                        flex: 1,
+                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                            flex: 1,
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                flex: 1,
+                                display: 'flex',
+                                flexDirection: 'column',
+                            }, children: !!selectedRelatedItem && ((0, jsx_runtime_1.jsx)(SubgridControl_1.SubgridControl, { logicalName: selectedRelatedItem.logicalName, allowViewSelection: true, associated: {
+                                    logicalName: schema.logicalName,
+                                    id: recordId,
+                                    refAttributeName: selectedRelatedItem.attributeName,
+                                } })) }) }) }) }) }) }));
+}

package/PageEntityForm/PageEntityForm.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface PageEntityFormProps {
+    logicalName: string;
+    formId?: string;
+    recordId?: string;
+}
+export declare const PageEntityForm: FC<PageEntityFormProps>;
+export {};

package/PageEntityForm/PageEntityForm.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEntityForm = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const PageEntityFormProvider_1 = require("@headless-adminapp/app/providers/PageEntityFormProvider");
+const icons_1 = require("@headless-adminapp/icons");
+const PageBroken_1 = require("../components/PageBroken");
+const PageLoading_1 = require("../components/PageLoading");
+const PageEntityFormDesktopContainer_1 = require("./PageEntityFormDesktopContainer");
+const RecordSetNavigatorContainer_1 = require("./RecordSetNavigatorContainer");
+const PageEntityForm = ({ logicalName, formId, recordId, }) => {
+    const result = (0, hooks_1.useLoadFormGridPage)(logicalName, formId);
+    if (result.loading) {
+        return (0, jsx_runtime_1.jsx)(PageLoading_1.PageLoading, {});
+    }
+    if (result.error) {
+        return ((0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { Icon: icons_1.Icons.Error, title: result.title, message: result.message }));
+    }
+    const { schema, form, commands } = result;
+    return ((0, jsx_runtime_1.jsx)(PageEntityFormProvider_1.PageEntityFormProvider, { schema: schema, form: form, recordId: recordId, commands: commands, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                flex: 1,
+                flexDirection: 'row',
+                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.PageEntityForm = PageEntityForm;

package/PageEntityForm/PageEntityFormDesktopContainer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const PageEntityFormDesktopContainer: FC;

package/PageEntityForm/PageEntityFormDesktopContainer.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEntityFormDesktopContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const builders_1 = require("@headless-adminapp/app/builders");
+const dataform_1 = require("@headless-adminapp/app/dataform");
+const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const locale_1 = require("@headless-adminapp/app/locale");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const utils_1 = require("@headless-adminapp/app/utils");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const PageBroken_1 = require("../components/PageBroken");
+const PageLoading_1 = require("../components/PageLoading");
+const FormBody_1 = require("../form/layout/FormBody");
+const FormTab_1 = require("../form/layout/FormTab");
+const CommandContainer_1 = require("./CommandContainer");
+const FormTabRelated_1 = require("./FormTabRelated");
+const PageEntityFormStringContext_1 = require("./PageEntityFormStringContext");
+const RelatedViewSelector_1 = require("./RelatedViewSelector");
+const SectionContainer_1 = require("./SectionContainer");
+const PageEntityFormDesktopContainer = () => {
+    var _a, _b;
+    const dataState = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.dataState);
+    const strings = (0, PageEntityFormStringContext_1.usePageEntityFormStrings)();
+    const recordId = (0, hooks_1.useRecordId)();
+    const record = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.record);
+    const activeTab = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.activeTab);
+    const { language } = (0, locale_1.useLocale)();
+    const schema = (0, hooks_1.useDataFormSchema)();
+    const formConfig = (0, hooks_1.useSelectedForm)();
+    const setActiveTab = (0, mutable_1.useContextValueSetter)(dataform_1.DataFormContext, (setValue) => (value) => {
+        setValue((state) => (Object.assign(Object.assign({}, state), { activeTab: value })));
+    });
+    (0, react_1.useEffect)(() => {
+        setActiveTab('general');
+    }, [setActiveTab]);
+    const recordTitle = (0, hooks_1.useRecordTitle)();
+    // const readonly = useIsFormReadonly();
+    const formInstance = (0, hooks_1.useFormInstance)();
+    const isDirty = (0, hooks_1.useFormIsDirty)();
+    const notifications = (0, hooks_1.useFormNotifications)();
+    const [selectedRelatedItem, setSelectedRelatedItem] = (0, react_1.useState)(null);
+    if (dataState.isFetching) {
+        return (0, jsx_runtime_1.jsx)(PageLoading_1.PageLoading, {});
+    }
+    if (dataState.isError) {
+        return (0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { title: "Error", message: "Unable to load page" });
+    }
+    if (recordId && !record) {
+        return ((0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { title: "Record not found", message: "Requested record not found in system or you may not have enought permission." }));
+    }
+    // console.log('render');
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            // backgroundColor: tokens.colorNeutralBackground2,
+            overflow: 'hidden',
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: react_components_1.tokens.spacingVerticalM,
+                    paddingTop: react_components_1.tokens.spacingVerticalM,
+                    paddingInline: react_components_1.tokens.spacingHorizontalM,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            // padding: 4,
+                            boxShadow: react_components_1.tokens.shadow2,
+                            borderRadius: react_components_1.tokens.borderRadiusMedium,
+                            background: react_components_1.tokens.colorNeutralBackground1,
+                            display: 'flex',
+                            // overflow: 'hidden',
+                        }, children: (0, jsx_runtime_1.jsx)(CommandContainer_1.CommandContainer, {}) }), notifications.length > 0 && ((0, jsx_runtime_1.jsx)("div", { children: notifications.map((notification, index) => ((0, jsx_runtime_1.jsx)(react_components_1.MessageBar, { intent: notification.level, icon: null, children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: notification.message }) }, index))) })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            boxShadow: react_components_1.tokens.shadow4,
+                            borderRadius: react_components_1.tokens.borderRadiusMedium,
+                            background: react_components_1.tokens.colorNeutralBackground1,
+                            overflow: 'hidden',
+                            zIndex: 2,
+                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    paddingInline: react_components_1.tokens.spacingHorizontalM,
+                                    paddingTop: react_components_1.tokens.spacingVerticalS,
+                                    marginBottom: react_components_1.tokens.spacingVerticalS,
+                                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', flex: 1 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                                    display: 'flex',
+                                                    gap: react_components_1.tokens.spacingHorizontalXS,
+                                                    alignItems: 'center',
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { children: recordTitle }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: isDirty
+                                                            ? `- ${strings.unsaved}`
+                                                            : !!record
+                                                                ? `- ${strings.saved}`
+                                                                : '' })] }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground3 }, children: (0, builders_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];
+                                            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,
+                                                        } })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: attribute.label }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: formInstance.control, name: controlName, render: ({ field }) => {
+                                                                    return ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: (0, utils_1.getAttributeFormattedValue)(attribute, field.value) }));
+                                                                } })] })] }, controlName));
+                                        }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', paddingBottom: react_components_1.tokens.spacingVerticalS }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TabList, { selectedValue: activeTab, onTabSelect: (e, value) => setActiveTab(value.value), children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: tab.name, children: (0, builders_1.localizedLabel)(language, tab) }, tab.name))), !!selectedRelatedItem && ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: "related", children: (_b = (_a = selectedRelatedItem.localizedPluralLabels) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : selectedRelatedItem.pluralLabel }))] }), (0, jsx_runtime_1.jsx)(RelatedViewSelector_1.RelatedViewSelector, { onSelect: (item) => {
+                                            setSelectedRelatedItem(item);
+                                            setActiveTab('related');
+                                        } })] })] })] }), (0, jsx_runtime_1.jsxs)(FormBody_1.FormBody, { children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab, { value: tab.name, columnCount: tab.columnCount, columnWidths: tab.columnWidths, children: tab.tabColumns.map((tabColumn, index) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab.Column, { children: tabColumn.sections.map((section) => ((0, jsx_runtime_1.jsx)(SectionContainer_1.SectionContainer, { section: section, readOnly: false }, section.name))) }, index))) }, tab.name))), (0, jsx_runtime_1.jsx)(FormTabRelated_1.FormTabRelated, { selectedRelatedItem: selectedRelatedItem })] })] }));
+    // return (
+    //   <Fragment>
+    //     <PageEntityViewDesktopFrame
+    //       commandBar={<CommandContainer />}
+    //       header={<GridHeaderContainer />}
+    //       content={<GridTableContainer />}
+    //       footer={<GridPaginationContainer />}
+    //     />
+    //     {/* <CustomizeColumnsContainer /> */}
+    //   </Fragment>
+    // );
+};
+exports.PageEntityFormDesktopContainer = PageEntityFormDesktopContainer;

package/PageEntityForm/PageEntityFormStringContext.d.ts

@@ -0,0 +1,8 @@
+export interface PageEntityFormStringSet {
+    saved: string;
+    unsaved: string;
+    related: string;
+}
+export declare const defaultPageEntityFormStrings: PageEntityFormStringSet;
+export declare const PageEntityFormStringContext: import("react").Context<PageEntityFormStringSet>;
+export declare function usePageEntityFormStrings(): PageEntityFormStringSet;

package/PageEntityForm/PageEntityFormStringContext.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEntityFormStringContext = exports.defaultPageEntityFormStrings = void 0;
+exports.usePageEntityFormStrings = usePageEntityFormStrings;
+const react_1 = require("react");
+exports.defaultPageEntityFormStrings = {
+    saved: 'Saved',
+    unsaved: 'Unsaved',
+    related: 'Related',
+};
+exports.PageEntityFormStringContext = (0, react_1.createContext)(exports.defaultPageEntityFormStrings);
+function usePageEntityFormStrings() {
+    const context = (0, react_1.useContext)(exports.PageEntityFormStringContext);
+    return context;
+}

package/PageEntityForm/RecordCard.d.ts

@@ -0,0 +1,10 @@
+import { CardView } from '@headless-adminapp/core/experience/view';
+import { InferredSchemaType, Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
+interface RecordCardProps<S extends SchemaAttributes = SchemaAttributes> {
+    schema: Schema<S>;
+    cardView: CardView<S>;
+    record: InferredSchemaType<S>;
+    selected?: boolean;
+}
+export declare function RecordCard<S extends SchemaAttributes = SchemaAttributes>({ schema, cardView, record, selected, }: RecordCardProps<S>): import("react/jsx-runtime").JSX.Element;
+export {};

package/PageEntityForm/RecordCard.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecordCard = RecordCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const utils_1 = require("@headless-adminapp/app/utils");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        paddingInline: react_components_1.tokens.spacingHorizontalL,
+        paddingBlock: react_components_1.tokens.spacingVerticalS,
+        gap: react_components_1.tokens.spacingHorizontalS,
+        // cursor: 'pointer',
+        // '&:hover': {
+        //   background: tokens.colorNeutralBackground1Hover,
+        // },
+        // '&:active': {
+        //   background: tokens.colorNeutralBackground1Pressed,
+        // },
+    },
+    // selected: {
+    //   background: tokens.colorNeutralBackground1Selected,
+    // },
+    selected: {},
+});
+function createIntial(name) {
+    return name === null || name === void 0 ? void 0 : name.split(' ').map((x) => x[0]).slice(0, 2).join('').toUpperCase();
+}
+function RecordCard({ schema, cardView, record, selected, }) {
+    var _a, _b;
+    const styles = useStyles();
+    const _record = record;
+    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];
+        }
+        else if (avatarAttribute.type === 'string' &&
+            avatarAttribute.format === 'url') {
+            avatarSrc = _record[cardView.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: {
+                    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, { children: _record[cardView.primaryColumn] }), (_a = cardView.secondaryColumns) === null || _a === void 0 ? void 0 : _a.map((column) => {
+                        const value = _record[column.name];
+                        if (!value) {
+                            return null;
+                        }
+                        const attribute = schema.attributes[column.name];
+                        let label = '';
+                        if (column.label === true) {
+                            label = attribute.label;
+                        }
+                        else if (typeof column.label === 'string') {
+                            label = column.label;
+                        }
+                        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));
+                            }
+                            if (attribute.type === 'choices') {
+                                const choices = attribute.options.filter((option) => value.includes(option.value));
+                                if (!choices.length) {
+                                    return null;
+                                }
+                                return ((0, jsx_runtime_1.jsx)("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        gap: 4,
+                                    }, children: choices.map((choice) => ((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 }, choice.value))) }, column.name));
+                            }
+                        }
+                        return ((0, jsx_runtime_1.jsxs)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: [!!label && `${label}: `, (0, utils_1.getAttributeFormattedValue)(attribute, value)] }, column.name));
+                    })] }), !!((_b = cardView.rightColumn) === null || _b === void 0 ? void 0 : _b.length) && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'flex-end',
+                }, children: cardView.rightColumn.map((column) => {
+                    const value = _record[column.name];
+                    if (!value) {
+                        return null;
+                    }
+                    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));
+                        }
+                    }
+                    if (column.variant === 'strong') {
+                        return ((0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: (0, utils_1.getAttributeFormattedValue)(value, attribute) }, column.name));
+                    }
+                    (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: (0, utils_1.getAttributeFormattedValue)(value, attribute) }, column.name);
+                }) }))] }));
+}

package/PageEntityForm/RecordSetNavigatorContainer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const RecordSetNavigatorContainer: FC;