@headless-adminapp/fluent 0.0.17-alpha.5 → 0.0.17-alpha.52

package/form/layout/FormTab/FormTab.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormTab = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable unused-imports/no-unused-vars */
 const dataform_1 = require("@headless-adminapp/app/dataform");
 const hooks_1 = require("@headless-adminapp/app/hooks");
 const mutable_1 = require("@headless-adminapp/app/mutable");
@@ -26,7 +27,7 @@ exports.FormTab = FormTab;
 /** @todo: unfinished component */
 const FormTabInternal = ({ children, value, fullHeight, columnCount, columnWidths, }) => {
     const divRef = (0, react_1.useRef)(null);
-    const divSize = (0, hooks_1.useElementSize)(divRef);
+    const divSize = (0, hooks_1.useElementSize)(divRef, 100);
     const padding = 0;
     // const columnCount = 2;
     const minSectionWidth = 392;
@@ -65,7 +66,7 @@ const FormTabInternal = ({ children, value, fullHeight, columnCount, columnWidth
             flexDirection: 'column',
             flex: 1,
             // marginTop: 12,
-            padding: 12,
+            // padding: 12,
         }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                 // display: 'flex',
                 // flexWrap: 'wrap',

package/form/types.d.ts

@@ -2,11 +2,11 @@ import { JSX } from 'react';
 import { CurrencyControlProps } from './controls/CurrencyControl';
 import { DateControlProps } from './controls/DateControl';
 import { DateTimeControlProps } from './controls/DateTimeControl';
+import { DecimalControlProps } from './controls/DecimalControl';
 import { EmailControlProps } from './controls/EmailControl';
 import { LookupControlProps } from './controls/LookupControl';
 import { MultiSelectControlProps } from './controls/MultiSelectControl';
 import { MultiSelectLookupControlProps } from './controls/MultiSelectLookupControl';
-import { NumberControlProps } from './controls/NumberControl';
 import { PasswordControlProps } from './controls/PasswordControl';
 import { SelectControlProps } from './controls/SelectControl';
 import { SwitchControlProps } from './controls/SwitchControl';
@@ -32,7 +32,7 @@ export type EmailFormControlProps = BaseFormControlProps & EmailControlProps & {
 export type PasswordFormControlProps = BaseFormControlProps & PasswordControlProps & {
     type: 'password';
 };
-export type NumberFormControlProps = BaseFormControlProps & NumberControlProps & {
+export type NumberFormControlProps = BaseFormControlProps & DecimalControlProps & {
     type: 'number';
 };
 export type CurrencyFormControlProps = BaseFormControlProps & CurrencyControlProps & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.5",
+  "version": "0.0.17-alpha.52",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -17,7 +17,8 @@
     "url": "https://github.com/headless-adminapp/adminapp/issues"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && sass src/styles/index.scss dist/styles.css --no-source-map",
+    "clean": "rm -rf dist && rm -f tsconfig.tsbuildinfo",
     "ts-check": "tsc --noEmit",
     "copy-files": "cp package.json dist",
     "prepublishOnly": "pnpm run build && pnpm run copy-files",
@@ -28,8 +29,9 @@
   "license": "ISC",
   "dependencies": {
     "@fluentui/react-components": "9.54.4",
-    "@fluentui/react-datepicker-compat": "^0.4.43",
-    "@fluentui/react-nav-preview": "^0.5.1",
+    "@fluentui/react-datepicker-compat": "0.4.43",
+    "@fluentui/react-nav-preview": "0.5.1",
+    "@fluentui/react-timepicker-compat": "0.2.46",
     "@hookform/resolvers": "^3.9.0",
     "@tanstack/react-query": "5.51.1",
     "@tanstack/react-table": "^8.20.1",
@@ -41,7 +43,11 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-hook-form": "7.52.2",
+    "react-quill": "^2.0.0",
+    "recharts": "^2.13.3",
+    "sass": "1.81.0",
+    "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "ce1cd9d647ff147098bed887326ab0b0f73017ce"
+  "gitHead": "d51866b6ef09087e30a44a6a63f099075c6aea89"
 }

package/styles.css

@@ -0,0 +1,100 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
+.TextControl_readonly:after {
+  border-bottom-color: var(--colorNeutralStrokeDisabled) !important;
+}
+
+.FormBody_scrollview > div {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacingVerticalM);
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+.fui-MenuItem__icon > svg,
+.fui-Button__icon > svg {
+  width: inherit;
+  height: inherit;
+}
+
+.hdlapp_rte {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--colorNeutralBackground3);
+  overflow: hidden;
+  border-radius: var(--borderRadiusMedium);
+  border: 1px solid transparent;
+}
+.hdlapp_rte:focus-within {
+  border-color: var(--colorNeutralForeground2BrandSelected);
+}
+.hdlapp_rte .ql-snow .ql-picker {
+  color: var(--colorNeutralForeground3Hover);
+}
+.hdlapp_rte .ql-snow .ql-stroke {
+  stroke: var(--colorNeutralForeground3Hover);
+}
+.hdlapp_rte .ql-snow.ql-toolbar button:hover,
+.hdlapp_rte .ql-snow .ql-toolbar button:hover,
+.hdlapp_rte .ql-snow.ql-toolbar button:focus,
+.hdlapp_rte .ql-snow .ql-toolbar button:focus,
+.hdlapp_rte .ql-snow.ql-toolbar button.ql-active,
+.hdlapp_rte .ql-snow .ql-toolbar button.ql-active,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label:hover,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label:hover,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label.ql-active,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item:hover,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item:hover,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+  color: var(--colorNeutralForeground1);
+}
+.hdlapp_rte .ql-snow.ql-toolbar button:hover .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar button:hover .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar button:focus .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar button:focus .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar button.ql-active .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar button.ql-active .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar button:focus .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+  stroke: var(--colorNeutralForeground1);
+}
+.hdlapp_rte .ql-snow.ql-toolbar {
+  border: none;
+}
+.hdlapp_rte .ql-toolbar.ql-snow + .ql-container.ql-snow {
+  border-top: 1px solid var(--colorNeutralBackground1Hover);
+}
+.hdlapp_rte .ql-container.ql-snow {
+  border: none;
+}

package/types/index.d.ts

@@ -6,6 +6,7 @@ declare module '@headless-adminapp/icons/types' {
         Eye: Icon;
         EyeOff: Icon;
         Calendar: Icon;
+        Clock: Icon;
         ArrowLeft: Icon;
         ArrowRight: Icon;
         ArrowDown: Icon;
@@ -16,6 +17,7 @@ declare module '@headless-adminapp/icons/types' {
         Add: Icon;
         Edit: Icon;
         Delete: Icon;
+        Save: Icon;
         Refresh: Icon;
         MoreVertical: Icon;
         MoreHorizontal: Icon;
@@ -27,6 +29,18 @@ declare module '@headless-adminapp/icons/types' {
         FilterDismiss: Icon;
         ListLtr: Icon;
         ListRtl: Icon;
+        Export: Icon;
+        ExportCsv: Icon;
+        ExportExcel: Icon;
+        Entity: Icon;
+        OpenInNew: Icon;
+        Play: Icon;
+        Audio: Icon;
+        Video: Icon;
+        Copy: Icon;
+        Document: Icon;
+        Image: Icon;
+        Checkmark: Icon;
     }
 }
 export {};

package/App/AppProvider.d.ts

@@ -1,9 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-interface AppProviderProps {
-    appId: string;
-    loadingComponent: React.ReactNode;
-    notFoundComponent: React.ReactNode;
-}
-/*** @todo: move to app */
-export declare const AppProvider: FC<PropsWithChildren<AppProviderProps>>;
-export {};

package/App/AppProvider.js

@@ -1,50 +0,0 @@
-"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.AppProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const app_1 = require("@headless-adminapp/app/app");
-const hooks_1 = require("@headless-adminapp/app/metadata/hooks");
-const react_query_1 = require("@tanstack/react-query");
-const react_1 = require("react");
-/*** @todo: move to app */
-const AppProvider = ({ children, appId, loadingComponent, notFoundComponent, }) => {
-    const experienceStore = (0, hooks_1.useExperienceStore)();
-    const appStore = (0, hooks_1.useAppStore)();
-    const { data: schemaMetadataList } = (0, react_query_1.useQuery)({
-        queryKey: ['experience-schema-metadata-list'],
-        queryFn: () => __awaiter(void 0, void 0, void 0, function* () {
-            return experienceStore.getExperienceSchemaMetadatList();
-        }),
-        initialData: [],
-    });
-    const { data: app, isLoading } = (0, react_query_1.useQuery)({
-        queryKey: ['experience-app', appId],
-        queryFn: () => __awaiter(void 0, void 0, void 0, function* () {
-            return appStore.getApp(appId);
-        }),
-    });
-    const schemaMetadataDic = (0, react_1.useMemo)(() => {
-        var _a;
-        return (_a = schemaMetadataList === null || schemaMetadataList === void 0 ? void 0 : schemaMetadataList.reduce((acc, item) => {
-            acc[item.logicalName] = item;
-            return acc;
-        }, {})) !== null && _a !== void 0 ? _a : {};
-    }, [schemaMetadataList]);
-    if (isLoading) {
-        return loadingComponent;
-    }
-    if (!app) {
-        return notFoundComponent;
-    }
-    return ((0, jsx_runtime_1.jsx)(app_1.AppContext.Provider, { value: { app, schemaMetadataDic, schemaMetadataList }, children: children }));
-};
-exports.AppProvider = AppProvider;

package/DataGrid/getAttributeFormattedValue.d.ts

@@ -1,16 +0,0 @@
-import { Attribute, InferredAttributeType } from '@headless-adminapp/core/attributes';
-interface AttributeFormattedValueStringsSet {
-    yes: string;
-    no: string;
-}
-/*** @todo move to app */
-export declare function getAttributeFormattedValue<A extends Attribute = Attribute>(attribute: Attribute, value: InferredAttributeType<A> | null | undefined, options?: {
-    maxCount?: number;
-    strings?: AttributeFormattedValueStringsSet;
-    dateFormat?: string;
-    locale?: string;
-    currency?: string;
-    currencySign?: 'accounting' | 'standard';
-    currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code';
-}): string | null | undefined;
-export {};

package/DataGrid/getAttributeFormattedValue.js

@@ -1,92 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAttributeFormattedValue = getAttributeFormattedValue;
-const dayjs_1 = __importDefault(require("dayjs"));
-const defaultAttributeFormattedValueStrings = {
-    yes: 'Yes',
-    no: 'No',
-};
-const defaultDateFormat = 'YYYY-MM-DD';
-const defaultLocale = 'en-US';
-const defaultCurrency = 'USD';
-const defaultCurrencySign = 'accounting';
-const defaultCurrencyDisplay = 'symbol';
-/*** @todo move to app */
-function getAttributeFormattedValue(attribute, value, options) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    if (value === null || value === undefined) {
-        return null;
-    }
-    const strings = (_a = options === null || options === void 0 ? void 0 : options.strings) !== null && _a !== void 0 ? _a : defaultAttributeFormattedValueStrings;
-    const dateFormat = (_b = options === null || options === void 0 ? void 0 : options.dateFormat) !== null && _b !== void 0 ? _b : defaultDateFormat;
-    const locale = (_c = options === null || options === void 0 ? void 0 : options.locale) !== null && _c !== void 0 ? _c : defaultLocale;
-    const currency = (_d = options === null || options === void 0 ? void 0 : options.currency) !== null && _d !== void 0 ? _d : defaultCurrency;
-    const currencySign = (_e = options === null || options === void 0 ? void 0 : options.currencySign) !== null && _e !== void 0 ? _e : defaultCurrencySign;
-    const currencyDisplay = (_f = options === null || options === void 0 ? void 0 : options.currencyDisplay) !== null && _f !== void 0 ? _f : defaultCurrencyDisplay;
-    switch (attribute.type) {
-        case 'boolean':
-            return value
-                ? (_g = attribute.trueLabel) !== null && _g !== void 0 ? _g : strings.yes
-                : (_h = attribute.falseLabel) !== null && _h !== void 0 ? _h : strings.no;
-        case 'choice':
-            return ((_j = attribute.options.find((option) => option.value === value)) !== null && _j !== void 0 ? _j : {
-                label: '',
-            }).label;
-        case 'choices':
-            return value
-                .map((v) => {
-                var _a;
-                return ((_a = attribute.options.find((option) => option.value === v)) !== null && _a !== void 0 ? _a : {
-                    label: '',
-                }).label;
-            })
-                .join(', ');
-        case 'date':
-            return (0, dayjs_1.default)(value).format(dateFormat);
-        case 'daterange':
-            if (!value)
-                return null;
-            const from = value[0];
-            const to = value[1];
-            if (!from && !to) {
-                return null;
-            }
-            if (from && to) {
-                return ((0, dayjs_1.default)(from).format(dateFormat) + ' - ' + (0, dayjs_1.default)(to).format(dateFormat));
-            }
-            if (from) {
-                return 'After ' + (0, dayjs_1.default)(from).format(dateFormat);
-            }
-            if (to) {
-                return 'Before ' + (0, dayjs_1.default)(to).format(dateFormat);
-            }
-            return null;
-        case 'lookup':
-            return value === null || value === void 0 ? void 0 : value.name;
-        case 'lookups':
-            const items = value === null || value === void 0 ? void 0 : value.map((v) => v.name);
-            if ((options === null || options === void 0 ? void 0 : options.maxCount) && (items === null || items === void 0 ? void 0 : items.length) > options.maxCount) {
-                return (items.slice(0, options.maxCount).join(', ') +
-                    ` (+${items.length - options.maxCount})`);
-            }
-            else {
-                return items === null || items === void 0 ? void 0 : items.join(', ');
-            }
-        case 'money':
-            return new Intl.NumberFormat(locale, {
-                style: 'currency',
-                currency,
-                currencySign,
-                currencyDisplay,
-            }).format(value);
-        case 'number':
-            return new Intl.NumberFormat(locale).format(value);
-        default:
-            return typeof value === 'object'
-                ? JSON.stringify(value)
-                : value;
-    }
-}