@headless-adminapp/fluent 0.0.17-alpha.3 → 0.0.17-alpha.30

package/form/controls/utils.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fileToObject = fileToObject;
+exports.dataUrlToFile = dataUrlToFile;
+exports.urlToFileObject = urlToFileObject;
+// TODO: Move to core
+function fileToObject(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            resolve({
+                name: file.name,
+                type: file.type,
+                size: file.size,
+                url: reader.result,
+            });
+        };
+        reader.onerror = (error) => {
+            reject(error);
+        };
+        reader.readAsDataURL(file);
+    });
+}
+function dataUrlToFile(dataUrl, name) {
+    const byteString = atob(dataUrl.split(',')[1]);
+    const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0];
+    const ab = new ArrayBuffer(byteString.length);
+    const ia = new Uint8Array(ab);
+    for (let i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+    }
+    return new File([ab], name, { type: mimeString });
+}
+function urlToFileObject(url, name) {
+    const fileName = name || url.split('/').pop() || 'file';
+    return {
+        name: fileName,
+        size: 0,
+        type: '',
+        url,
+    };
+}

package/form/layout/FormSection/FormSection.js

@@ -11,7 +11,7 @@ const FormSectionLoading_1 = require("./FormSectionLoading");
 function determineItemCount(availableWidth, itemWidth, gap, padding) {
     return Math.floor((availableWidth + gap - 2 * padding) / (itemWidth + gap));
 }
-const FormSection = ({ title, children, columnCount, fullHeight, labelPosition, noPadding, hideLabel, }) => {
+const FormSection = ({ title, children, columnCount, labelPosition, noPadding, hideLabel }) => {
     // const columnCount = 2;
     const divRef = (0, react_1.useRef)(null);
     const divSize = (0, hooks_1.useElementSize)(divRef, 100);

package/form/layout/FormSection/FormSectionColumn.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormSectionColumn = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const FormSectionColumn = ({ children, span }) => {
+const FormSectionColumn = ({ children }) => {
     return ((0, jsx_runtime_1.jsx)("div", { 
         // md={span}
         // xs={12}

package/form/layout/FormSection/FormSectionLoading.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormSectionLoading = void 0;
-const FormSectionLoading = ({ controlCount, }) => {
+const FormSectionLoading = () => {
     return null;
 };
 exports.FormSectionLoading = FormSectionLoading;

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");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.3",
+  "version": "0.0.17-alpha.30",
   "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",
@@ -26,5 +27,25 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "gitHead": "f6ce162167fabc3cbac101038b157ddd22455a4f"
+  "dependencies": {
+    "@fluentui/react-components": "9.54.4",
+    "@fluentui/react-datepicker-compat": "^0.4.43",
+    "@fluentui/react-nav-preview": "^0.5.1",
+    "@hookform/resolvers": "^3.9.0",
+    "@tanstack/react-query": "5.51.1",
+    "@tanstack/react-table": "^8.20.1",
+    "@tanstack/react-virtual": "^3.8.6",
+    "dayjs": "^1.11.13",
+    "dnd-core": "^16.0.1",
+    "immutability-helper": "^3.1.1",
+    "lodash": "^4.17.21",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-hook-form": "7.52.2",
+    "react-quill": "^2.0.0",
+    "sass": "1.81.0",
+    "uuid": "11.0.3",
+    "yup": "^1.4.0"
+  },
+  "gitHead": "713f5087ad8c942449ac5e043de6cb1f4df9766a"
 }

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

@@ -16,6 +16,7 @@ declare module '@headless-adminapp/icons/types' {
         Add: Icon;
         Edit: Icon;
         Delete: Icon;
+        Save: Icon;
         Refresh: Icon;
         MoreVertical: Icon;
         MoreHorizontal: Icon;
@@ -27,6 +28,17 @@ 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;
     }
 }
 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;
-    }
-}