@headless-adminapp/fluent 0.0.17-alpha.2 → 0.0.17-alpha.20

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);
@@ -60,7 +60,6 @@ const FormSection = ({ title, children, columnCount, fullHeight, labelPosition,
         spanTemplates['--section-item-spacer-1'] = 'none';
         spanTemplates['--section-item-spacer-2'] = 'none';
     }
-    // console.log('fsmm', divSize.width, minWidthRequired);
     return ((0, jsx_runtime_1.jsx)("div", { ref: divRef, style: {
             boxShadow: react_components_1.tokens.shadow2,
             borderRadius: react_components_1.tokens.borderRadiusMedium,

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");
@@ -27,7 +28,6 @@ exports.FormTab = FormTab;
 const FormTabInternal = ({ children, value, fullHeight, columnCount, columnWidths, }) => {
     const divRef = (0, react_1.useRef)(null);
     const divSize = (0, hooks_1.useElementSize)(divRef);
-    // console.log('dd', divSize.width);
     const padding = 0;
     // const columnCount = 2;
     const minSectionWidth = 392;

package/index.css

@@ -0,0 +1,27 @@
+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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.2",
+  "version": "0.0.17-alpha.20",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -18,13 +18,31 @@
   },
   "scripts": {
     "build": "tsc",
+    "clean": "rm -rf dist && rm -f tsconfig.tsbuildinfo",
     "ts-check": "tsc --noEmit",
-    "copy-files": "cp package.json dist",
+    "copy-files": "cp package.json dist && cp src/index.css dist",
     "prepublishOnly": "pnpm run build && pnpm run copy-files",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "gitHead": "bd2148cdeaf1e9f0e03336539ab02f5c9edf95c9"
+  "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",
+    "yup": "^1.4.0"
+  },
+  "gitHead": "bcc1bcddef884731f72e5e4fedb0d78ad64afbd0"
 }

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,10 @@ declare module '@headless-adminapp/icons/types' {
         FilterDismiss: Icon;
         ListLtr: Icon;
         ListRtl: Icon;
+        Export: Icon;
+        ExportCsv: Icon;
+        ExportExcel: Icon;
+        Entity: 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;
-    }
-}