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

package/navigation/hooks/useOpenForm.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOpenForm = useOpenForm;
+const defaultParameters_1 = require("@headless-adminapp/app/dataform/utils/defaultParameters");
 const app_1 = require("@headless-adminapp/core/experience/app");
 const react_1 = require("react");
 const hooks_1 = require("../../route/hooks/");
@@ -8,9 +9,16 @@ const useRouteResolver_1 = require("../../route/hooks/useRouteResolver");
 function useOpenForm() {
     const routeResolver = (0, useRouteResolver_1.useRouteResolver)();
     const router = (0, hooks_1.useRouter)();
-    return (0, react_1.useCallback)((formOptions, navigationOptions) => {
-        const path = routeResolver(Object.assign({ type: app_1.PageType.EntityForm }, formOptions));
-        if (navigationOptions.replace) {
+    return (0, react_1.useCallback)((options) => {
+        const path = routeResolver({
+            logicalName: options.logicalName,
+            type: app_1.PageType.EntityForm,
+            id: options.id,
+        });
+        if (options.parameters) {
+            (0, defaultParameters_1.setFormDefaultParameters)(options.logicalName, options.parameters);
+        }
+        if (options.replace) {
             router.replace(path);
         }
         else {

package/navigation/index.d.ts

@@ -0,0 +1 @@
+export * from './hooks';

package/{appearance → navigation}/index.js

@@ -14,7 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppearanceContext = void 0;
-var context_1 = require("./context");
-Object.defineProperty(exports, "AppearanceContext", { enumerable: true, get: function () { return context_1.AppearanceContext; } });
 __exportStar(require("./hooks"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/app",
-  "version": "0.0.17-alpha.5",
+  "version": "0.0.17-alpha.52",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -18,6 +18,7 @@
   },
   "scripts": {
     "build": "tsc",
+    "clean": "rm -rf dist && rm -f tsconfig.tsbuildinfo",
     "ts-check": "tsc --noEmit",
     "copy-files": "cp package.json dist && cp src/index.css dist",
     "prepublishOnly": "pnpm run build && pnpm run copy-files",
@@ -31,10 +32,13 @@
     "@tanstack/react-query": "5.51.1",
     "clsx": "2.1.1",
     "dayjs": "^1.11.13",
+    "exceljs": "^4.4.0",
+    "json-to-csv-export": "^2.1.1",
     "lodash": "^4.17.21",
     "react-custom-scrollbars-2": "^4.5.0",
     "react-hook-form": "7.52.2",
+    "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "ce1cd9d647ff147098bed887326ab0b0f73017ce"
+  "gitHead": "d51866b6ef09087e30a44a6a63f099075c6aea89"
 }

package/recordset/RecordSetProvider.js

@@ -35,6 +35,6 @@ const CardViewSetter = () => {
             });
         })
             .catch(console.error);
-    }, [experienceStore, logicalName]);
+    }, [experienceStore, logicalName, setValue]);
     return null;
 };

package/recordset/hooks/useRecordSetResult.js

@@ -26,7 +26,7 @@ function useRecordSetResult() {
             return null;
         }
         return schemaStore.getSchema(context.logicalName);
-    }, [context.logicalName]);
+    }, [context.logicalName, schemaStore]);
     const cardView = context.cardView;
     const columns = (0, react_1.useMemo)(() => {
         var _a;

package/route/RouteProvider.d.ts

@@ -7,7 +7,7 @@ export interface RouteProviderProps {
     pathname: string;
     searchParams: ReadonlyURLSearchParams;
     basePath?: string;
-    routeResolver: RouteResolver;
-    isRouteActive: IsRouteActive;
+    routeResolver?: RouteResolver;
+    isRouteActive?: IsRouteActive;
 }
 export declare const RouteProvider: FC<PropsWithChildren<RouteProviderProps>>;

package/route/RouteProvider.js

@@ -2,9 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RouteProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const route_1 = require("@headless-adminapp/core/experience/route");
 const react_1 = require("react");
 const context_1 = require("./context");
-const RouteProvider = ({ children, pathname, router, searchParams, basePath, routeResolver, isRouteActive, }) => {
+const defaultRouteResolver = (0, route_1.createRouteResolver)(route_1.defaultRouteInfo);
+const defaultIsRouteActive = (0, route_1.createIsRouteActive)(route_1.defaultRouteInfo);
+const RouteProvider = ({ children, pathname, router, searchParams, basePath, routeResolver = defaultRouteResolver, isRouteActive = defaultIsRouteActive, }) => {
     const basePathRef = (0, react_1.useRef)(basePath);
     basePathRef.current = basePath;
     const routeResolverRef = (0, react_1.useRef)(routeResolver);

package/store/ComponentStore.d.ts

@@ -2,5 +2,5 @@ import { IComponentStore } from '@headless-adminapp/core/store';
 export declare class ComponentStore implements IComponentStore {
     private components;
     registerComponent<T>(name: string, component: T): void;
-    resolveComponent<T>(name: string): T;
+    getComponent<T>(name: string): T | null;
 }

package/store/ComponentStore.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentStore = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
 class ComponentStore {
     constructor() {
         this.components = {};
@@ -9,15 +8,12 @@ class ComponentStore {
     registerComponent(name, component) {
         this.components[name] = component;
     }
-    resolveComponent(name) {
+    getComponent(name) {
         const self = this;
-        return function (props) {
-            if (!self.components[name]) {
-                throw new Error(`Component ${name} is not registered`);
-            }
-            const Component = self.components[name];
-            return (0, jsx_runtime_1.jsx)(Component, Object.assign({}, props));
-        };
+        if (!self.components[name]) {
+            return null;
+        }
+        return self.components[name];
     }
 }
 exports.ComponentStore = ComponentStore;

package/store/SchemaExperienceStore.d.ts

@@ -23,9 +23,9 @@ export declare class SchemaExperienceStore implements ISchemaExperienceStore {
     getDefaultViewLookupId(logicalName: string): Promise<string>;
     getForm<S extends SchemaAttributes = SchemaAttributes>(logicalName: string, formId: string): Promise<Form<S>>;
     getQuickCreateForm<S extends SchemaAttributes = SchemaAttributes>(logicalName: string, formId: string): Promise<QuickCreateForm<S>>;
-    getViewCommands(logicalName: string): Promise<EntityMainGridCommandItemExperience[][]>;
-    getFormCommands(logicalName: string): Promise<EntityMainFormCommandItemExperience[][]>;
-    getSubgridCommands(logicalName: string): Promise<SubGridCommandItemExperience[][]>;
+    getViewCommands(logicalName: string): Promise<EntityMainGridCommandItemExperience[][] | undefined>;
+    getFormCommands(logicalName: string): Promise<EntityMainFormCommandItemExperience[][] | undefined>;
+    getSubgridCommands(logicalName: string): Promise<SubGridCommandItemExperience[][] | undefined>;
     getSchemaMetadataList(): SchemaMetadata[];
     getExperienceSchemaMetadatList(): Promise<SchemaExperienceMetadata[]>;
 }

package/toast-notification/hooks/useCloseToastNotification.js

@@ -4,26 +4,28 @@ exports.useCloseToastNotification = useCloseToastNotification;
 const react_1 = require("react");
 const context_1 = require("../../mutable/context");
 const context_2 = require("../context");
+function markToastNotificationAsClosed(items, id) {
+    return items.map((item) => {
+        if (item.id === id) {
+            return Object.assign(Object.assign({}, item), { isOpen: false });
+        }
+        return item;
+    });
+}
+function excludeToastNotificationItemById(items, id) {
+    return items.filter((item) => item.id !== id);
+}
 function useCloseToastNotification() {
     const setValue = (0, context_1.useContextSetValue)(context_2.ToastNotificationContext);
     const closeDialog = (0, react_1.useCallback)((id) => {
-        setValue((state) => {
-            return {
-                items: state.items.map((item) => {
-                    if (item.id === id) {
-                        return Object.assign(Object.assign({}, item), { isOpen: false });
-                    }
-                    return item;
-                }),
-            };
-        });
+        setValue((state) => ({
+            items: markToastNotificationAsClosed(state.items, id),
+        }));
         // Simulate a delay to show the dialog closing animation
         setTimeout(() => {
-            setValue((state) => {
-                return {
-                    items: state.items.filter((item) => item.id !== id),
-                };
-            });
+            setValue((state) => ({
+                items: excludeToastNotificationItemById(state.items, id),
+            }));
         }, 1000);
     }, [setValue]);
     return closeDialog;

package/toast-notification/hooks/useOpenToastNotification.js

@@ -2,17 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOpenToastNotification = useOpenToastNotification;
 const react_1 = require("react");
+const uuid_1 = require("uuid");
 const context_1 = require("../../mutable/context");
 const context_2 = require("../context");
 const useCloseToastNotification_1 = require("./useCloseToastNotification");
-function randomId() {
-    return Math.random().toString(36).substring(2);
-}
 function useOpenToastNotification() {
     const setValue = (0, context_1.useContextSetValue)(context_2.ToastNotificationContext);
     const closeDialog = (0, useCloseToastNotification_1.useCloseToastNotification)();
     const openToastNotification = (0, react_1.useCallback)((options) => {
-        const id = randomId();
+        const id = (0, uuid_1.v4)();
         setValue((state) => {
             return {
                 items: [

package/transport/RestDataService/index.d.ts

@@ -3,11 +3,11 @@ import { RetriveRecordsFnOptions, RetriveRecordsResult } from '@headless-adminap
 interface RestDataServiceOptions {
     endpoint: string;
 }
+export declare function handleResponseError(response: Response): Promise<void>;
 export declare class RestDataService implements IDataService {
     protected readonly options: RestDataServiceOptions;
     constructor(options: RestDataServiceOptions);
     protected readonly headers: Record<string, string>;
-    protected handleResponseError(response: Response): Promise<void>;
     private getHeaders;
     setHeader(name: string, value: string): void;
     removeHeader(name: string): void;

package/transport/RestDataService/index.js

@@ -10,27 +10,28 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RestDataService = void 0;
+exports.handleResponseError = handleResponseError;
 const transport_1 = require("@headless-adminapp/core/transport");
+function handleResponseError(response) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        if (response.ok) {
+            return;
+        }
+        if ((_a = response.headers.get('content-type')) === null || _a === void 0 ? void 0 : _a.includes('application/json')) {
+            const data = yield response.json();
+            if (data.error) {
+                throw new transport_1.HttpError(response.status, data.error);
+            }
+        }
+        throw new transport_1.HttpError(response.status, response.statusText);
+    });
+}
 class RestDataService {
     constructor(options) {
         this.options = options;
         this.headers = {};
     }
-    handleResponseError(response) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            if (response.ok) {
-                return;
-            }
-            if ((_a = response.headers.get('content-type')) === null || _a === void 0 ? void 0 : _a.includes('application/json')) {
-                const data = yield response.json();
-                if (data.error) {
-                    throw new transport_1.HttpError(response.status, data.error);
-                }
-            }
-            throw new transport_1.HttpError(response.status, response.statusText);
-        });
-    }
     getHeaders() {
         return Object.assign({ 'content-type': 'application/json' }, this.headers);
     }
@@ -47,7 +48,7 @@ class RestDataService {
                 method: 'POST',
                 body: JSON.stringify(data),
             });
-            yield this.handleResponseError(response);
+            yield handleResponseError(response);
             return response.json();
         });
     }

package/transport/context.d.ts

@@ -1,2 +1,4 @@
-import { IDataService } from '@headless-adminapp/core/transport';
+import { IDataService, IFileService } from '@headless-adminapp/core/transport';
 export declare const DataServiceContext: import("react").Context<IDataService | undefined>;
+export declare const noopFileService: IFileService;
+export declare const FileServiceContext: import("react").Context<IFileService>;

package/transport/context.js

@@ -1,5 +1,20 @@
 "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.DataServiceContext = void 0;
+exports.FileServiceContext = exports.noopFileService = exports.DataServiceContext = void 0;
 const react_1 = require("react");
 exports.DataServiceContext = (0, react_1.createContext)(undefined);
+exports.noopFileService = {
+    uploadFile: () => __awaiter(void 0, void 0, void 0, function* () {
+        throw new Error('File service not implemented');
+    }),
+};
+exports.FileServiceContext = (0, react_1.createContext)(exports.noopFileService);

package/transport/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from './useDataService';
+export * from './useFileService';

package/transport/hooks/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useDataService"), exports);
+__exportStar(require("./useFileService"), exports);

package/transport/hooks/useFileService.d.ts

@@ -0,0 +1 @@
+export declare function useFileService(): import("@headless-adminapp/core/transport").IFileService;

package/transport/hooks/useFileService.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFileService = useFileService;
+const react_1 = require("react");
+const context_1 = require("../context");
+function useFileService() {
+    const context = (0, react_1.useContext)(context_1.FileServiceContext);
+    if (!context) {
+        throw new Error('FileServiceContext must be used within a FileServiceProvider');
+    }
+    return context;
+}

package/transport/hooks/useRetriveRecords.d.ts

@@ -0,0 +1,32 @@
+import { SortingState } from '@headless-adminapp/core/experience/view';
+import { InferredSchemaType, Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { Filter } from '@headless-adminapp/core/transport';
+import { QueryKey } from '@tanstack/react-query';
+interface UseRetriveRecordProps<S extends SchemaAttributes = SchemaAttributes> {
+    schema: Schema<S>;
+    search: string;
+    filter: Filter | null;
+    sorting: SortingState<S>;
+    columns: string[];
+    expand?: Partial<Record<string, string[]>>;
+    maxRecords: number;
+}
+export declare function useRetrieveRecordsKey<S extends SchemaAttributes = SchemaAttributes>({ schema, search, filter, sorting, columns, expand, maxRecords, }: UseRetriveRecordProps<S>): (string | number | string[] | Filter | Partial<Record<string, string[]>> | SortingState<S> | null | undefined)[];
+export declare function useClearDataExceptFirstPage(queryKey: QueryKey): void;
+export declare function useRetriveRecords<S extends SchemaAttributes = SchemaAttributes>(queryKey: QueryKey, { columns, expand, filter, maxRecords, schema, search, sorting, }: UseRetriveRecordProps): {
+    data: {
+        logicalName: string;
+        count: number;
+        records: import("@headless-adminapp/core/transport").Data<InferredSchemaType<S>>[];
+    } | null;
+    isFetching: boolean;
+    hasNextPage: boolean;
+    fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<{
+        params: {
+            pageIndex: number;
+        };
+        data: import("@headless-adminapp/core/transport").RetriveRecordsResult<InferredSchemaType<S>>;
+    }, unknown>, Error>>;
+    isFetchingNextPage: boolean;
+};
+export {};

package/transport/hooks/useRetriveRecords.js

@@ -0,0 +1,120 @@
+"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.useRetrieveRecordsKey = useRetrieveRecordsKey;
+exports.useClearDataExceptFirstPage = useClearDataExceptFirstPage;
+exports.useRetriveRecords = useRetriveRecords;
+const transport_1 = require("@headless-adminapp/app/transport");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const ROWS_PER_PAGE = 100;
+function useRetrieveRecordsKey({ schema, search, filter, sorting, columns, expand, maxRecords, }) {
+    const queryKey = (0, react_1.useMemo)(() => [
+        'data',
+        'retriveRecords',
+        schema.logicalName,
+        search,
+        filter,
+        sorting,
+        columns,
+        expand,
+        maxRecords,
+    ], [schema.logicalName, search, filter, sorting, columns, expand, maxRecords]);
+    return queryKey;
+}
+function useClearDataExceptFirstPage(queryKey) {
+    const queryClient = (0, react_query_1.useQueryClient)();
+    (0, react_1.useEffect)(() => {
+        return () => {
+            // Clear all pages except the first one when the component is unmounted
+            queryClient.setQueryData(queryKey, (oldData) => {
+                if (!oldData) {
+                    return oldData;
+                }
+                if (!oldData.pageParams.length || !oldData.pages.length) {
+                    return oldData;
+                }
+                return {
+                    pageParams: [oldData.pageParams[0]],
+                    pages: [oldData.pages[0]],
+                };
+            });
+        };
+    }, [queryClient, queryKey]);
+}
+function useRetriveRecords(queryKey, { columns, expand, filter, maxRecords, schema, search, sorting, }) {
+    const dataService = (0, transport_1.useDataService)();
+    const { data, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage } = (0, react_query_1.useInfiniteQuery)({
+        queryKey: queryKey,
+        queryFn: (queryContext) => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const params = (_a = queryContext.pageParam) !== null && _a !== void 0 ? _a : {
+                pageIndex: 0,
+            };
+            const skip = params.pageIndex * ROWS_PER_PAGE;
+            const limit = Math.min(ROWS_PER_PAGE, Math.max(0, maxRecords - skip));
+            if (limit <= 0) {
+                return {
+                    params: params,
+                    data: {
+                        logicalName: schema.logicalName,
+                        count: 0,
+                        records: [],
+                    },
+                };
+            }
+            const result = yield dataService.retriveRecords({
+                logicalName: schema.logicalName,
+                search,
+                columns: columns,
+                expand,
+                filter,
+                skip,
+                limit,
+                sort: sorting,
+            });
+            return {
+                params: params,
+                data: result,
+            };
+        }),
+        getNextPageParam: (lastPage) => {
+            if (lastPage.data.count <
+                ROWS_PER_PAGE * (lastPage.params.pageIndex + 1)) {
+                return undefined;
+            }
+            return {
+                pageIndex: lastPage.params.pageIndex + 1,
+            };
+        },
+        initialPageParam: {
+            pageIndex: 0,
+        },
+    });
+    const finalData = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d;
+        if (!(data === null || data === void 0 ? void 0 : data.pages.length)) {
+            return null;
+        }
+        return {
+            logicalName: (_a = data === null || data === void 0 ? void 0 : data.pages) === null || _a === void 0 ? void 0 : _a[0].data.logicalName,
+            count: (_c = (_b = data === null || data === void 0 ? void 0 : data.pages) === null || _b === void 0 ? void 0 : _b[0].data.count) !== null && _c !== void 0 ? _c : 0,
+            records: (_d = data === null || data === void 0 ? void 0 : data.pages.map((x) => x.data.records).flat()) !== null && _d !== void 0 ? _d : [],
+        };
+    }, [data]);
+    return {
+        data: finalData,
+        isFetching,
+        hasNextPage,
+        fetchNextPage,
+        isFetchingNextPage,
+    };
+}

package/utils/color.d.ts

@@ -0,0 +1 @@
+export declare function isColorDark(color: string): boolean;

package/utils/color.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isColorDark = isColorDark;
+function isColorDark(color) {
+    if (color.startsWith('#')) {
+        color = color.substring(1);
+    }
+    const rgb = parseInt(color, 16);
+    const r = (rgb >> 16) & 0xff;
+    const g = (rgb >> 8) & 0xff;
+    const b = (rgb >> 0) & 0xff;
+    const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    return luma < 128;
+}

package/utils/getAttributeFormattedValue.d.ts

@@ -7,9 +7,11 @@ export declare function getAttributeFormattedValue<A extends Attribute = Attribu
     maxCount?: number;
     strings?: AttributeFormattedValueStringsSet;
     dateFormat?: string;
+    timeFormat?: string;
     locale?: string;
     currency?: string;
     currencySign?: 'accounting' | 'standard';
     currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code';
-}): string | null | undefined;
+    timezone?: string;
+}): string | null;
 export {};