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

package/DialogContainer/PromptDialog.js

@@ -22,21 +22,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateValidationSchema = exports.formValidator = void 0;
 exports.PromptDialog = PromptDialog;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const utils_1 = require("@headless-adminapp/app/dataform/utils");
+const form_1 = require("@headless-adminapp/app/form");
+const locale_1 = require("@headless-adminapp/app/locale");
 const yup_1 = require("@hookform/resolvers/yup");
 const lodash_1 = require("lodash");
 const react_hook_form_1 = require("react-hook-form");
@@ -44,16 +37,21 @@ const yup = __importStar(require("yup"));
 const SectionControl_1 = require("../DataForm/SectionControl");
 const StandardControl_1 = require("../PageEntityForm/StandardControl");
 function PromptDialog(props) {
-    var _a, _b;
+    const { language, region } = (0, locale_1.useLocale)();
+    const formValidationStrings = (0, form_1.useFormValidationStrings)();
     const form = (0, react_hook_form_1.useForm)({
         mode: 'all',
         defaultValues: props.defaultValues,
         shouldUnregister: false,
-        resolver: (0, exports.formValidator)(props.attributes),
+        resolver: (0, exports.formValidator)({
+            attributes: props.attributes,
+            language,
+            strings: formValidationStrings,
+            region,
+        }),
     });
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.open, onOpenChange: () => {
-            var _a;
-            (_a = props.onDismiss) === null || _a === void 0 ? void 0 : _a.call(props);
+            props.onDismiss?.();
         }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [!!props.title && (0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: props.title }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogContent, { children: [!!props.text && (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: props.text }), (0, jsx_runtime_1.jsx)("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'column',
@@ -62,37 +60,44 @@ function PromptDialog(props) {
                                     marginBottom: react_components_1.tokens.spacingVerticalL,
                                 }, children: Object.entries(props.attributes).map(([attributeName, attribute]) => {
                                     return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: attributeName, render: ({ field, fieldState, formState }) => {
-                                            var _a, _b;
                                             const isError = (fieldState.isTouched || formState.isSubmitted) &&
-                                                !!((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message);
+                                                !!fieldState.error?.message;
                                             const errorMessage = fieldState.isTouched || formState.isSubmitted
-                                                ? (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message
+                                                ? 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 }) }));
+                                            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 }) }));
                                         } }, attributeName));
-                                }) })] }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", onClick: () => {
-                                    var _a;
-                                    (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
-                                }, children: (_a = props.cancelText) !== null && _a !== void 0 ? _a : 'Cancel' }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", disabled: form.formState.submitCount > 0 && !form.formState.isValid, onClick: () => __awaiter(this, void 0, void 0, function* () {
-                                    yield form.handleSubmit((values) => __awaiter(this, void 0, void 0, function* () {
-                                        var _a;
-                                        (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, values);
-                                    }))();
-                                }), children: (_b = props.confirmText) !== null && _b !== void 0 ? _b : 'Confirm' })] })] }) }) }));
+                                }) })] }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", type: "button", onClick: () => {
+                                    props.onCancel?.();
+                                }, children: props.cancelText ?? 'Cancel' }), (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) => {
+                                        props.onConfirm?.(values);
+                                    })();
+                                }, children: props.confirmText ?? 'Confirm' })] })] }) }) }));
 }
-exports.formValidator = (0, lodash_1.memoize)(function formValidator(attributes) {
-    return (values, context, options) => __awaiter(this, void 0, void 0, function* () {
-        const validator = (0, exports.generateValidationSchema)(attributes);
+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 = yield resolver(values, context, options);
+        const result = await resolver(values, context, options);
         return result;
-    });
-}, (attributes) => JSON.stringify({ attributes }));
-exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema(attributes) {
+    };
+}, (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(Object.assign({}, columns.reduce((acc, column) => {
-        const attribute = attributes[column];
-        const validationSchema = (0, utils_1.generateAttributeValidationSchema)(attribute, 'en', {});
-        return Object.assign(Object.assign({}, acc), { [column]: validationSchema });
-    }, {})));
-}, (attributes) => JSON.stringify({ 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/Insights/CommandBarContainer.d.ts

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

package/Insights/CommandBarContainer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandBarContainer = CommandBarContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const command_1 = require("@headless-adminapp/app/command");
+const hooks_1 = require("@headless-adminapp/app/command/hooks");
+const insights_1 = require("@headless-adminapp/app/insights");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const OverflowCommandBar_1 = require("../OverflowCommandBar");
+function CommandBarContainer() {
+    const baseCommandHandleContext = (0, hooks_1.useBaseCommandHandlerContext)();
+    const insightExpereince = (0, mutable_1.useContextSelector)(insights_1.InsightsContext, (x) => x.experience);
+    const transformedCommands = (0, command_1.useCommands)([insightExpereince.commands], {
+        ...baseCommandHandleContext,
+        primaryControl: {},
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { style: { flex: 1, flexShrink: 0, overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)(OverflowCommandBar_1.OverflowCommandBar, { commands: transformedCommands }) }));
+}

package/Insights/FilterBarContainer.d.ts

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

package/Insights/FilterBarContainer.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterBarContainer = FilterBarContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/dialog/hooks");
+const insights_1 = require("@headless-adminapp/app/insights");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const utils_1 = require("@headless-adminapp/app/utils");
+const icons_1 = require("@headless-adminapp/icons");
+const OverflowCommandBar_1 = require("../OverflowCommandBar");
+function FilterBarContainer() {
+    const openPromptDialog = (0, hooks_1.useOpenPromptDialog)();
+    const insightsState = (0, mutable_1.useContextSelector)(insights_1.InsightsContext, (state) => state);
+    const insightExpereince = insightsState.experience;
+    const setValue = (0, mutable_1.useContextSetValue)(insights_1.InsightsContext);
+    const handleOpenPromptDialog = async () => {
+        const attributes = insightExpereince.filters.reduce((acc, item) => {
+            acc[item.logicalName] =
+                insightsState.experience.attributes[item.logicalName];
+            return acc;
+        }, {});
+        const defaultValues = insightExpereince.filters.reduce((acc, item) => {
+            acc[item.logicalName] = insightsState.data[item.logicalName];
+            return acc;
+        }, {});
+        const result = await openPromptDialog({
+            attributes,
+            defaultValues,
+            title: 'Modify filter',
+            allowDismiss: true,
+        });
+        if (!result) {
+            return;
+        }
+        setValue({
+            data: result,
+        });
+    };
+    const filterCommandItems = insightExpereince.filters
+        .map((item) => {
+        const logicalName = item.logicalName;
+        const value = insightsState.data[logicalName];
+        const attribute = insightsState.experience.attributes[logicalName];
+        if (!item.showInFilterBar) {
+            return null;
+        }
+        if (!attribute || !value) {
+            return null;
+        }
+        if (item.allowQuickFilter) {
+            return {
+                type: 'button',
+                Icon: item.Icon,
+                text: (0, utils_1.getAttributeFormattedValue)(attribute, value, { maxCount: 2 }),
+                onClick: async () => {
+                    const result = await openPromptDialog({
+                        allowDismiss: true,
+                        attributes: {
+                            [logicalName]: attribute,
+                        },
+                        defaultValues: {
+                            [logicalName]: value,
+                        },
+                        title: item.quickFilterTitle ?? attribute.label,
+                    });
+                    if (!result) {
+                        return;
+                    }
+                    setValue({
+                        data: {
+                            ...insightsState.data,
+                            [logicalName]: result[logicalName],
+                        },
+                    });
+                },
+            };
+        }
+        return {
+            type: 'label',
+            Icon: item.Icon,
+            text: (item.beforeContent ?? '') +
+                (0, utils_1.getAttributeFormattedValue)(attribute, value, { maxCount: 2 }),
+        };
+    })
+        .filter(Boolean);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            flexShrink: 0,
+            alignItems: 'center',
+            overflow: 'hidden',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flex: 1,
+                    overflow: 'hidden',
+                    flexShrink: 0,
+                }, children: (0, jsx_runtime_1.jsx)(OverflowCommandBar_1.OverflowCommandBar, { commands: [filterCommandItems], align: "end", beforeDivider: true }) }), insightExpereince.filters.length > 0 && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, { size: 16 }), onClick: handleOpenPromptDialog, style: { flexShrink: 0, marginInline: 8 }, children: "Filter" }))] }));
+}

package/Insights/Grid.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+export declare function WidgetGrid({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function WidgetGridItem({ column, row, children, }: PropsWithChildren<{
+    column?: number;
+    row?: number;
+}>): import("react/jsx-runtime").JSX.Element;

package/Insights/Grid.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetGrid = WidgetGrid;
+exports.WidgetGridItem = WidgetGridItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function WidgetGrid({ children }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            padding: react_components_1.tokens.spacingHorizontalM,
+            width: '100%',
+            // flex: 1,
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr',
+            rowGap: react_components_1.tokens.spacingVerticalM,
+            columnGap: react_components_1.tokens.spacingHorizontalM,
+        }, children: children }));
+}
+function WidgetGridItem({ column, row, children, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gridColumn: column ? `span ${column}` : undefined,
+            gridRow: row ? `span ${row}` : undefined,
+            height: row ? 100 * row + 12 * (row - 1) : 100,
+        }, children: children }));
+}

package/Insights/InsightsContainer.d.ts

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

package/Insights/InsightsContainer.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InsightsContainer = InsightsContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const ScrollView_1 = require("@headless-adminapp/app/components/ScrollView");
+const insights_1 = require("@headless-adminapp/app/insights");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const CommandBarContainer_1 = require("./CommandBarContainer");
+const FilterBarContainer_1 = require("./FilterBarContainer");
+const Widgets_1 = require("./Widgets");
+function InsightsContainer() {
+    const insightsState = (0, mutable_1.useContextSelector)(insights_1.InsightsContext, (state) => state);
+    const insightExpereince = insightsState.experience;
+    const titleButton = ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", style: { pointerEvents: 'auto' }, 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: insightExpereince.title }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground2 }, children: insightExpereince.subtitle })] }) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+            overflow: 'hidden',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { padding: 12 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        background: react_components_1.tokens.colorNeutralBackground1,
+                        boxShadow: react_components_1.tokens.shadow2,
+                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        display: 'flex',
+                        alignItems: 'center',
+                        minHeight: 40,
+                    }, children: [(0, jsx_runtime_1.jsx)(CommandBarContainer_1.CommandBarContainer, {}), (0, jsx_runtime_1.jsx)(FilterBarContainer_1.FilterBarContainer, {})] }) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: 12 }, children: insightsState.insightLookup.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: titleButton }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: insightsState.insightLookup.map((insight) => ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => insightsState.onInsightSelect(insight.id), children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: insight.title }), (0, jsx_runtime_1.jsx)(react_components_1.Caption2, { style: { color: react_components_1.tokens.colorNeutralForeground2 }, children: insight.subtitle })] }) }, insight.id))) }) })] })) : (titleButton) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flex: 1,
+                    overflow: 'hidden',
+                }, children: (0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { children: (0, jsx_runtime_1.jsx)(Widgets_1.Widgets, { widgets: insightExpereince.widgets }) }) })] }));
+}

package/Insights/WidgetChartContainer.d.ts

@@ -0,0 +1,7 @@
+import { ChartWidgetExperience } from '@headless-adminapp/core/experience/insights';
+import { FC } from 'react';
+interface WidgetChartContainerProps {
+    content: ChartWidgetExperience;
+}
+export declare const WidgetChartContainer: FC<WidgetChartContainerProps>;
+export {};

package/Insights/WidgetChartContainer.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetChartContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const BodyLoading_1 = require("../components/BodyLoading");
+const AreaChart_1 = require("./charts/AreaChart");
+const BarChart_1 = require("./charts/BarChart");
+const ComposedChart_1 = require("./charts/ComposedChart");
+const GaugeChart_1 = require("./charts/GaugeChart");
+const LineChart_1 = require("./charts/LineChart");
+const OhlcChart_1 = require("./charts/OhlcChart");
+const PieChart_1 = require("./charts/PieChart");
+const RadarChart_1 = require("./charts/RadarChart");
+const ScatterChart_1 = require("./charts/ScatterChart");
+const useWidgetDetail_1 = require("./hooks/useWidgetDetail");
+const WidgetTitleBar_1 = require("./WidgetTitleBar");
+function getChartComponent(type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) {
+    switch (type) {
+        case 'line':
+            return LineChart_1.LineChart;
+        case 'area':
+            return AreaChart_1.AreaChart;
+        case 'bar':
+            return BarChart_1.BarChart;
+        case 'composed':
+            return ComposedChart_1.ComposedChart;
+        case 'scatter':
+            return ScatterChart_1.ScatterChart;
+        case 'pie':
+            return PieChart_1.PieChart;
+        case 'radar':
+            return RadarChart_1.RadarChart;
+        case 'gauge':
+            return GaugeChart_1.GaugeChart;
+        case 'ohlc':
+            return OhlcChart_1.OhlcChart;
+    }
+}
+const WidgetChartContainer = ({ content, }) => {
+    const { transformedCommands, dataset, isPending, isFetching, widget } = (0, useWidgetDetail_1.useWidgetDetail)(content);
+    const info = content.chart;
+    const type = info.chart.type;
+    const ChartComponent = getChartComponent(type);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            background: react_components_1.tokens.colorNeutralBackground1,
+            boxShadow: react_components_1.tokens.shadow2,
+            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            flexDirection: 'column',
+        }, children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: widget.title, commands: transformedCommands }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, position: 'relative' }, children: [!isPending && ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0 }, children: (0, jsx_runtime_1.jsx)(ChartComponent, { dataset: dataset, chartInfo: info.chart }) })), (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: isFetching })] })] }));
+};
+exports.WidgetChartContainer = WidgetChartContainer;

package/Insights/WidgetDataGridContainer.d.ts

@@ -0,0 +1,4 @@
+import { DataGridWidgetExperience } from '@headless-adminapp/core/experience/insights';
+export declare function WidgetDataGridContainer({ content, }: {
+    content: DataGridWidgetExperience;
+}): import("react/jsx-runtime").JSX.Element;

package/Insights/WidgetDataGridContainer.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetDataGridContainer = WidgetDataGridContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const command_1 = require("@headless-adminapp/app/command");
+const hooks_1 = require("@headless-adminapp/app/command/hooks");
+const DataGridProvider_1 = require("@headless-adminapp/app/datagrid/DataGridProvider");
+const hooks_2 = require("@headless-adminapp/app/datagrid/hooks");
+const hooks_3 = require("@headless-adminapp/app/metadata/hooks");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const widget_1 = require("@headless-adminapp/app/widget");
+const react_1 = require("react");
+const DataGrid_1 = require("../DataGrid");
+const WidgetTitleBar_1 = require("./WidgetTitleBar");
+function WidgetDataGridContainer({ content, }) {
+    const logicalName = content.logicalName;
+    const schema = (0, hooks_3.useSchema)(logicalName);
+    const { view } = (0, hooks_3.useExperienceView)(logicalName);
+    if (!view) {
+        return (0, jsx_runtime_1.jsx)("div", { children: "Loading..." });
+    }
+    if (!schema) {
+        return (0, jsx_runtime_1.jsx)("div", { children: "Schema not found" });
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            background: react_components_1.tokens.colorNeutralBackground1,
+            boxShadow: react_components_1.tokens.shadow2,
+            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            // padding: tokens.spacingHorizontalM,
+            flexDirection: 'column',
+        }, children: (0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: [], onChangeView: () => { }, commands: [], allowViewSelection: false, maxRecords: content.maxRecords, extraFilter: content.filter, children: (0, jsx_runtime_1.jsx)(FormSubgridContainer, { content: content }) }) }));
+}
+const FormSubgridContainer = ({ content, }) => {
+    const baseCommandHandleContext = (0, hooks_1.useBaseCommandHandlerContext)();
+    const primaryControl = (0, hooks_2.useGridControlContext)();
+    const widgetSetValue = (0, mutable_1.useContextSetValue)(widget_1.WidgetContext);
+    const updateStateValue = (0, react_1.useCallback)(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (value) => {
+        widgetSetValue((state) => ({
+            ...state,
+            data: { ...state.data, ...value },
+        }));
+    }, [widgetSetValue]);
+    const transformedCommands = (0, command_1.useCommands)([content.commands], {
+        ...baseCommandHandleContext,
+        primaryControl: {
+            ...primaryControl,
+            updateStateValue,
+        },
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            // gap: 8,
+            // backgroundColor: tokens.colorNeutralBackground2,
+            // padding: 2,
+            overflow: 'hidden',
+        }, children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: "Recent transactions", commands: transformedCommands }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    // gap: 12,
+                    flex: 1,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    // overflow: 'hidden',
+                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        marginTop: 8,
+                    }, 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', minHeight: 300 }, children: (0, jsx_runtime_1.jsx)(DataGrid_1.GridTableContainer, { disableColumnSort: true, disableColumnFilter: true, disableSelection: true, disableContextMenu: true }) }) }) }) })] }));
+};

package/Insights/WidgetTableContainer.d.ts

@@ -0,0 +1,7 @@
+import { TableWidgetExperience } from '@headless-adminapp/core/experience/insights';
+import { FC } from 'react';
+interface WidgetTableContainerProps {
+    content: TableWidgetExperience;
+}
+export declare const WidgetTableContainer: FC<WidgetTableContainerProps>;
+export {};

package/Insights/WidgetTableContainer.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetTableContainer = void 0;
+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 BodyLoading_1 = require("../components/BodyLoading");
+const useWidgetDetail_1 = require("./hooks/useWidgetDetail");
+const WidgetTitleBar_1 = require("./WidgetTitleBar");
+const WidgetTableContainer = ({ content, }) => {
+    const { transformedCommands, dataset, isPending, isFetching, widget } = (0, useWidgetDetail_1.useWidgetDetail)(content);
+    const info = content.table;
+    const data = dataset[0];
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            background: react_components_1.tokens.colorNeutralBackground1,
+            boxShadow: react_components_1.tokens.shadow2,
+            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            flexDirection: 'column',
+            overflow: 'hidden',
+        }, children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: widget.title, commands: transformedCommands }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, position: 'relative', overflow: 'auto' }, children: [!isPending && ((0, jsx_runtime_1.jsxs)(react_components_1.Table, { style: {
+                            borderCollapse: 'collapse',
+                            width: '100%',
+                        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { style: {
+                                    position: 'sticky',
+                                    top: 0,
+                                    background: react_components_1.tokens.colorNeutralBackground3,
+                                    zIndex: 2,
+                                }, children: (0, jsx_runtime_1.jsx)(react_components_1.TableRow, { style: {
+                                        position: 'sticky',
+                                        top: 0,
+                                        minWidth: 'calc(100% - 16px)',
+                                    }, children: info.columns.map((column, index) => {
+                                        const attribute = info.attributes[column];
+                                        return ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { style: {
+                                                minWidth: 32,
+                                                flexShrink: 0,
+                                                flex: 1,
+                                                position: 'sticky',
+                                                background: react_components_1.tokens.colorNeutralBackground3,
+                                                borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
+                                            }, children: attribute.label }, column + String(index)));
+                                    }) }) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { children: data.map((row, index) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { children: info.columns.map((column) => {
+                                        const attribute = info.attributes[column];
+                                        const value = row[column];
+                                        const formattedValue = (0, utils_1.getAttributeFormattedValue)(attribute, value) ?? '';
+                                        switch (attribute?.type) {
+                                            case 'money':
+                                                return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { children: formattedValue }, column));
+                                            case 'lookup':
+                                                return null;
+                                        }
+                                        return (0, jsx_runtime_1.jsx)(react_components_1.TableCell, { children: formattedValue }, column);
+                                    }) }, index))) })] })), (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: isFetching })] })] }));
+};
+exports.WidgetTableContainer = WidgetTableContainer;

package/Insights/WidgetTileContainer.d.ts

@@ -0,0 +1,7 @@
+import { TileWidgetExperience } from '@headless-adminapp/core/experience/insights';
+import { FC } from 'react';
+interface WidgetTileContainerProps {
+    content: TileWidgetExperience;
+}
+export declare const WidgetTileContainer: FC<WidgetTileContainerProps>;
+export {};

package/Insights/WidgetTileContainer.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetTileContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const useWidgetDetail_1 = require("./hooks/useWidgetDetail");
+const WidgetTitleBar_1 = require("./WidgetTitleBar");
+const WidgetTileContainer = ({ content, }) => {
+    const { transformedCommands, widget } = (0, useWidgetDetail_1.useWidgetDetail)(content);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            background: react_components_1.tokens.colorNeutralBackground1,
+            boxShadow: react_components_1.tokens.shadow2,
+            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            flexDirection: 'column',
+        }, children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: widget.title, commands: transformedCommands }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                        flex: 1,
+                        alignItems: 'center',
+                        display: 'flex',
+                        paddingInline: 16,
+                    }, children: (0, jsx_runtime_1.jsx)(react_components_1.Title2, { children: "Not supported yet" }) }) })] }));
+};
+exports.WidgetTileContainer = WidgetTileContainer;

package/Insights/WidgetTitleBar.d.ts

@@ -0,0 +1,7 @@
+import { CommandItemState } from '@headless-adminapp/app/command';
+interface WidgetTitleBarProps {
+    title: string;
+    commands: CommandItemState[][];
+}
+export declare function WidgetTitleBar({ title, commands }: WidgetTitleBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/Insights/WidgetTitleBar.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetTitleBar = WidgetTitleBar;
+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 CommandBar_1 = __importDefault(require("../CommandBar"));
+const OverflowCommandBar_1 = require("../OverflowCommandBar");
+function WidgetTitleBar({ title, commands }) {
+    const { language } = (0, locale_1.useLocale)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    paddingInline: 16,
+                    paddingBlock: 8,
+                    height: 40,
+                    alignItems: 'center',
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: title }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), commands?.[0]?.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { marginRight: -20 }, children: (0, jsx_runtime_1.jsx)(CommandBar_1.default.Wrapper, { children: commands[0].map((command, index) => (0, OverflowCommandBar_1.renderCommandItem)(index, command, language)) }) }))] }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })] }));
+}

package/Insights/Widgets.d.ts

@@ -0,0 +1,4 @@
+import { InsightExpereince } from '@headless-adminapp/core/experience/insights';
+export declare function Widgets({ widgets, }: Readonly<{
+    widgets: InsightExpereince['widgets'];
+}>): import("react/jsx-runtime").JSX.Element;