@headless-adminapp/fluent 0.0.17-alpha.34 → 0.0.17-alpha.37

package/DataGrid/useTableColumns.js

@@ -16,6 +16,7 @@ const utils_1 = require("@headless-adminapp/app/utils");
 const app_1 = require("@headless-adminapp/core/experience/app");
 const react_table_1 = require("@tanstack/react-table");
 const react_1 = require("react");
+const componentStore_1 = require("../componentStore");
 const GridColumnHeader_1 = require("../DataGrid/GridColumnHeader");
 const TableCell_1 = require("../DataGrid/TableCell");
 const TableCellLink_1 = require("../DataGrid/TableCell/TableCellLink");
@@ -207,6 +208,13 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                         dateFormat: dateFormats.short,
                         timezone,
                     })) !== null && _c !== void 0 ? _c : '';
+                    if (column.component) {
+                        const Component = componentStore_1.componentStore.getComponent(column.component);
+                        if (!Component) {
+                            throw new Error(`Component with name ${column.component} not found`);
+                        }
+                        return ((0, jsx_runtime_1.jsx)(Component, { column: column, schema: schema, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue }));
+                    }
                     if (schema.primaryAttribute === column.name) {
                         const path = routeResolver({
                             logicalName: schema.logicalName,
@@ -254,10 +262,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         recordSetSetter,
         routeResolver,
         router,
-        schema.attributes,
-        schema.idAttribute,
-        schema.logicalName,
-        schema.primaryAttribute,
+        schema,
         schemaStore,
         setSorting,
         timezone,

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,15 @@
+"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], Object.assign(Object.assign({}, 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,107 @@
+"use strict";
+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.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 = () => __awaiter(this, void 0, void 0, function* () {
+        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 = yield openPromptDialog({
+            attributes,
+            defaultValues,
+            title: 'Modify filter',
+            allowDismiss: true,
+        });
+        if (!result) {
+            return;
+        }
+        setValue({
+            data: result,
+        });
+    });
+    const filterCommandItems = insightExpereince.filters
+        .map((item) => {
+        var _a;
+        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: () => __awaiter(this, void 0, void 0, function* () {
+                    var _a;
+                    const result = yield openPromptDialog({
+                        allowDismiss: true,
+                        attributes: {
+                            [logicalName]: attribute,
+                        },
+                        defaultValues: {
+                            [logicalName]: value,
+                        },
+                        title: (_a = item.quickFilterTitle) !== null && _a !== void 0 ? _a : attribute.label,
+                    });
+                    if (!result) {
+                        return;
+                    }
+                    setValue({
+                        data: Object.assign(Object.assign({}, insightsState.data), { [logicalName]: result[logicalName] }),
+                    });
+                }),
+            };
+        }
+        return {
+            type: 'label',
+            Icon: item.Icon,
+            text: ((_a = item.beforeContent) !== null && _a !== void 0 ? _a : '') +
+                (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,68 @@
+"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..." });
+    }
+    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) => (Object.assign(Object.assign({}, state), { data: Object.assign(Object.assign({}, state.data), value) })));
+    }, [widgetSetValue]);
+    const transformedCommands = (0, command_1.useCommands)([content.commands], Object.assign(Object.assign({}, baseCommandHandleContext), { primaryControl: Object.assign(Object.assign({}, 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,58 @@
+"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 }, 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) => {
+                                        var _a;
+                                        const attribute = info.attributes[column];
+                                        const value = row[column];
+                                        const formattedValue = (_a = (0, utils_1.getAttributeFormattedValue)(attribute, value)) !== null && _a !== void 0 ? _a : '';
+                                        switch (attribute === null || attribute === void 0 ? void 0 : 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,25 @@
+"use strict";
+'use client';
+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 WidgetTitleBar_1 = require("./WidgetTitleBar");
+const useWidgetDetail_1 = require("./hooks/useWidgetDetail");
+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,22 @@
+"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 }) {
+    var _a;
+    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 } }), ((_a = commands === null || commands === void 0 ? void 0 : commands[0]) === null || _a === void 0 ? void 0 : _a.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, }: {
+    widgets: InsightExpereince['widgets'];
+}): import("react/jsx-runtime").JSX.Element;

package/Insights/Widgets.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Widgets = Widgets;
+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 widget_1 = require("@headless-adminapp/app/widget");
+const react_1 = require("react");
+const Grid_1 = require("./Grid");
+const WidgetChartContainer_1 = require("./WidgetChartContainer");
+const WidgetDataGridContainer_1 = require("./WidgetDataGridContainer");
+const WidgetTableContainer_1 = require("./WidgetTableContainer");
+const WidgetTileContainer_1 = require("./WidgetTileContainer");
+const WidgetProvider = ({ children, widget, }) => {
+    const contextValue = (0, mutable_1.useCreateContextStore)({
+        widget,
+        data: widget.defaultData,
+    });
+    (0, react_1.useEffect)(() => {
+        contextValue.setValue({
+            widget,
+            data: widget.defaultData,
+        });
+    }, [widget]);
+    return ((0, jsx_runtime_1.jsx)(widget_1.WidgetContext.Provider, { value: contextValue, children: children }));
+};
+function Widgets({ widgets, }) {
+    return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGrid, { children: widgets.map((widget, index) => {
+            return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGridItem, { row: widget.rows, column: widget.columns, children: (0, jsx_runtime_1.jsx)(WidgetProvider, { widget: widget, children: (0, jsx_runtime_1.jsx)(WidgetItem, {}) }) }, index));
+        }) }));
+}
+function WidgetItem() {
+    const insightState = (0, mutable_1.useContextSelector)(insights_1.InsightsContext, (state) => state);
+    const widgetState = (0, mutable_1.useContextSelector)(widget_1.WidgetContext, (state) => state);
+    const widget = widgetState.widget;
+    const content = typeof widget.content === 'function'
+        ? widget.content(insightState, widgetState)
+        : widget.content;
+    if (content.type === 'tile') {
+        return (0, jsx_runtime_1.jsx)(WidgetTileContainer_1.WidgetTileContainer, { content: content });
+    }
+    if (content.type === 'chart') {
+        return (0, jsx_runtime_1.jsx)(WidgetChartContainer_1.WidgetChartContainer, { content: content });
+    }
+    if (content.type === 'grid') {
+        return (0, jsx_runtime_1.jsx)(WidgetDataGridContainer_1.WidgetDataGridContainer, { content: content });
+    }
+    if (content.type === 'table') {
+        return (0, jsx_runtime_1.jsx)(WidgetTableContainer_1.WidgetTableContainer, { content: content });
+    }
+    if (content.type === 'custom') {
+        return (0, jsx_runtime_1.jsx)(content.Component, {});
+    }
+    return null;
+}

package/Insights/charts/AreaChart.d.ts

@@ -0,0 +1,5 @@
+import { AreaChartInfo } from '@headless-adminapp/core/experience/insights';
+export declare function AreaChart({ dataset, chartInfo, }: {
+    dataset: any[];
+    chartInfo: AreaChartInfo;
+}): import("react/jsx-runtime").JSX.Element;

package/Insights/charts/AreaChart.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AreaChart = AreaChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const recharts_1 = require("recharts");
+const CustomTooltipContent_1 = require("./CustomTooltipContent");
+const formatters_1 = require("./formatters");
+const renderers_1 = require("./renderers");
+function AreaChart({ dataset, chartInfo, }) {
+    const xAxis = chartInfo.xAxis;
+    const yAxis = chartInfo.yAxis;
+    const areas = chartInfo.areas;
+    const xAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(xAxis.tick);
+    const yAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(yAxis.tick);
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.AreaChart, { data: dataset[0], children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderXAxis)(xAxis), (0, renderers_1.renderYAxis)(yAxis), (0, renderers_1.renderAreas)(areas, dataset), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+                        stroke: react_components_1.tokens.colorNeutralBackground6,
+                        opacity: 0.5,
+                    }, content: ({ active, payload, label }) => ((0, jsx_runtime_1.jsx)(CustomTooltipContent_1.CustomTooltipContent, { xAxisFormatter: xAxisFullFormatter, yAxisFormatter: yAxisFullFormatter, active: active, payload: payload, label: label })) })] }) }));
+}

package/Insights/charts/BarChart.d.ts

@@ -0,0 +1,5 @@
+import { BarChartInfo } from '@headless-adminapp/core/experience/insights';
+export declare function BarChart({ dataset, chartInfo, }: {
+    dataset: any[];
+    chartInfo: BarChartInfo;
+}): import("react/jsx-runtime").JSX.Element;