@headless-adminapp/app 0.0.15-alpha.0 → 0.0.17-alpha.1

package/app/AppProvider.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+interface AppProviderProps {
+    appId: string;
+    loadingComponent: React.ReactNode;
+    notFoundComponent: React.ReactNode;
+}
+export declare const AppProvider: FC<PropsWithChildren<AppProviderProps>>;
+export {};

package/app/AppProvider.js

@@ -0,0 +1,49 @@
+"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 react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const hooks_1 = require("../metadata/hooks");
+const context_1 = require("./context");
+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)(context_1.AppContext.Provider, { value: { app, schemaMetadataDic, schemaMetadataList }, children: children }));
+};
+exports.AppProvider = AppProvider;

package/app/index.d.ts

@@ -1,2 +1,3 @@
 export { AppContext } from './context';
 export { useAppContext } from './hooks';
+export { AppProvider } from './AppProvider';

package/app/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAppContext = exports.AppContext = void 0;
+exports.AppProvider = exports.useAppContext = exports.AppContext = void 0;
 var context_1 = require("./context");
 Object.defineProperty(exports, "AppContext", { enumerable: true, get: function () { return context_1.AppContext; } });
 var hooks_1 = require("./hooks");
 Object.defineProperty(exports, "useAppContext", { enumerable: true, get: function () { return hooks_1.useAppContext; } });
+var AppProvider_1 = require("./AppProvider");
+Object.defineProperty(exports, "AppProvider", { enumerable: true, get: function () { return AppProvider_1.AppProvider; } });

package/command/hooks/useBaseCommandHandlerContext.js

@@ -31,7 +31,7 @@ function useBaseCommandHandlerContext() {
     const queryClient = (0, react_query_1.useQueryClient)();
     const stores = (0, hooks_2.useMetadata)();
     const utility = useUtility();
-    const [locale] = (0, locale_1.useLocale)();
+    const locale = (0, locale_1.useLocale)();
     return {
         dataService,
         queryClient,

package/dataform/DataFormProvider/index.js

@@ -24,7 +24,7 @@ const InitialValueResolver_1 = require("./InitialValueResolver");
 const ReadonlyInfoResolver_1 = require("./ReadonlyInfoResolver");
 function DataFormProvider(props) {
     const { getSchema } = (0, useMetadata_1.useMetadata)();
-    const [{ language }] = (0, useLocale_1.useLocale)();
+    const { language } = (0, useLocale_1.useLocale)();
     const formValidationStrings = (0, FormValidationStringContext_1.useFormValidationStrings)();
     const [formReadOnly, setFormReadOnly] = (0, react_1.useState)(false); // A trick to provide readOnly info to formInstance
     const formInstance = (0, react_hook_form_1.useForm)({

package/datagrid/DataGridProvider/index.d.ts

@@ -10,7 +10,7 @@ export interface DataGridProviderProps<S extends SchemaAttributes = SchemaAttrib
     view: View<S>;
     extraFilter?: Filter;
     commands: CommandItemExperience<CommandContext>[][];
-    onChangeView: (viewId: string) => void;
+    onChangeView?: (viewId: string) => void;
     isSubGrid?: boolean;
     allowViewSelection?: boolean;
     maxRecords?: number;

package/datagrid/DataGridProvider/index.js

@@ -14,9 +14,10 @@ function DataGridProvider(props) {
     const onChangeViewRef = (0, react_1.useRef)(props.onChangeView);
     onChangeViewRef.current = props.onChangeView;
     const { schemaStore } = (0, useMetadata_1.useMetadata)();
-    const [{ language }] = (0, useLocale_1.useLocale)();
+    const { language } = (0, useLocale_1.useLocale)();
     const handleViewChange = (0, react_1.useCallback)((viewId) => {
-        onChangeViewRef.current(viewId);
+        var _a;
+        (_a = onChangeViewRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeViewRef, viewId);
     }, []);
     const contextValue = (0, context_1.useCreateContextStore)({
         schema: props.schema,

package/datagrid/context.d.ts

@@ -11,7 +11,7 @@ export interface GridContextState<S extends SchemaAttributes = SchemaAttributes,
     schema: Schema<S>;
     view: View<S>;
     viewLookup: LocalizedDataLookup[];
-    onChangeView: (viewId: string) => void;
+    onChangeView?: (viewId: string) => void;
     extraFilter?: Filter;
     commands: CommandItemExperience<CommandContext>[][];
     maxRecords?: number;

package/datagrid/hooks/useChangeView.js

@@ -7,6 +7,6 @@ const context_2 = require("../context");
 function useChangeView() {
     const onChangeView = (0, context_1.useContextSelector)(context_2.GridContext, (state) => state.onChangeView);
     return (0, react_1.useCallback)((viewId) => {
-        onChangeView(viewId);
+        onChangeView === null || onChangeView === void 0 ? void 0 : onChangeView(viewId);
     }, [onChangeView]);
 }

package/datagrid/hooks/useMainGridCommands.js

@@ -79,7 +79,7 @@ function useMainGridCommandHandlerContext() {
     const queryClient = (0, react_query_1.useQueryClient)();
     const { appStore, experienceStore, schemaStore } = (0, useMetadata_1.useMetadata)();
     const utility = useUtility();
-    const [locale] = (0, useLocale_1.useLocale)();
+    const locale = (0, useLocale_1.useLocale)();
     const primaryControl = useGridControlContext();
     return {
         dataService,

package/datagrid/hooks/useSubGridCommands.js

@@ -44,7 +44,7 @@ function useSubGridCommandHandlerContext() {
     const extraFilter = (0, useGridExtraFilter_1.useGridExtraFilter)();
     const refresh = (0, useGridRefresh_1.useGridRefresh)();
     const utility = (0, useMainGridCommands_1.useUtility)();
-    const [locale] = (0, useLocale_1.useLocale)();
+    const locale = (0, useLocale_1.useLocale)();
     const mainFormHandlerContext = (0, useMainFormCommands_1.useMainFormCommandHandlerContext)();
     // console.log('mainFormHandlerContext', mainFormHandlerContext);
     return {

package/index.css

@@ -0,0 +1,4 @@
+.hdl-scrollbar.rtl > div {
+  margin-right: 0 !important;
+  margin-left: -15px;
+}

package/locale/LocaleProvider.d.ts

@@ -0,0 +1,12 @@
+import { Locale } from '@headless-adminapp/core/experience/locale';
+import { FC, PropsWithChildren } from 'react';
+export interface LocaleProviderProps {
+    locale: string;
+    options?: {
+        direction?: Locale['direction'];
+        dateFormats?: Locale['dateFormats'];
+        timeFormats?: Locale['timeFormats'];
+        currency?: Partial<Locale['currency']>;
+    };
+}
+export declare const LocaleProvider: FC<PropsWithChildren<LocaleProviderProps>>;

package/locale/LocaleProvider.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocaleProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const locale_1 = require("@headless-adminapp/core/experience/locale");
+const react_1 = require("react");
+const context_1 = require("./context");
+const LocaleProvider = ({ children, locale, options, }) => {
+    const localeState = (0, react_1.useMemo)(() => {
+        return (0, locale_1.getLocale)(locale, options);
+    }, [locale]);
+    return ((0, jsx_runtime_1.jsx)(context_1.LocaleContext.Provider, { value: localeState, children: children }));
+};
+exports.LocaleProvider = LocaleProvider;

package/locale/context.d.ts

@@ -1,2 +1,2 @@
-import { Dispatch, SetStateAction } from 'react';
-export declare const LocaleContext: import("react").Context<[import("@headless-adminapp/core/experience/app").Locale, Dispatch<SetStateAction<import("@headless-adminapp/core/experience/app").Locale>>] | null>;
+import { Locale } from '@headless-adminapp/core/experience/locale';
+export declare const LocaleContext: import("react").Context<Locale | null>;

package/locale/index.d.ts

@@ -1,3 +1,3 @@
 export { LocaleContext } from './context';
-export * from './types';
 export * from './useLocale';
+export { type LocaleProviderProps, LocaleProvider } from './LocaleProvider';

package/locale/index.js

@@ -14,8 +14,9 @@ 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.LocaleContext = void 0;
+exports.LocaleProvider = exports.LocaleContext = void 0;
 var context_1 = require("./context");
 Object.defineProperty(exports, "LocaleContext", { enumerable: true, get: function () { return context_1.LocaleContext; } });
-__exportStar(require("./types"), exports);
 __exportStar(require("./useLocale"), exports);
+var LocaleProvider_1 = require("./LocaleProvider");
+Object.defineProperty(exports, "LocaleProvider", { enumerable: true, get: function () { return LocaleProvider_1.LocaleProvider; } });

package/locale/useLocale.d.ts

@@ -1 +1 @@
-export declare function useLocale(): [import("@headless-adminapp/core/experience/app").Locale, import("react").Dispatch<import("react").SetStateAction<import("@headless-adminapp/core/experience/app").Locale>>];
+export declare function useLocale(): import("@headless-adminapp/core/experience/locale").Locale;

package/metadata/MetadataProvider.d.ts

@@ -1,9 +1,8 @@
 import { IClientAppStore, ISchemaExperienceStore, ISchemaStore } from '@headless-adminapp/core/store';
 import { FC, PropsWithChildren } from 'react';
-interface MetadataProviderProps {
+export interface MetadataProviderProps {
     schemaStore: ISchemaStore;
     experienceStore: ISchemaExperienceStore;
     appStore: IClientAppStore;
 }
 export declare const MetadataProvider: FC<PropsWithChildren<MetadataProviderProps>>;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/app",
-  "version": "0.0.15-alpha.0",
+  "version": "0.0.17-alpha.1",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -18,14 +18,11 @@
   },
   "scripts": {
     "build": "tsc",
-    "copy-files": "cp package.json dist",
+    "ts-check": "tsc --noEmit",
+    "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"
   },
-  "peerDependencies": {
-    "@tanstack/react-query": "^5",
-    "react-hook-form": "^7"
-  },
   "keywords": [],
   "author": "",
   "license": "ISC",
@@ -33,5 +30,5 @@
     "clsx": "2.1.1",
     "react-custom-scrollbars-2": "^4.5.0"
   },
-  "gitHead": "028cf2dc8cbc616b25a44fe42a2d8256b7645cf8"
+  "gitHead": "86b3b0f6764173ba69e71d81ef613ec570ae4a35"
 }

package/providers/PageEntityViewProvider/index.d.ts

@@ -7,7 +7,7 @@ interface PageEntityViewProviderProps<S extends SchemaAttributes> {
     view: View<S>;
     commands: EntityMainGridCommandItemExperience[][];
     availableViews: LocalizedDataLookup[];
-    onChangeView: (viewId: string) => void;
+    onChangeView?: (viewId: string) => void;
 }
 export declare function PageEntityViewProvider<S extends SchemaAttributes>({ availableViews, commands, schema, view, children, onChangeView, }: PropsWithChildren<PageEntityViewProviderProps<S>>): import("react/jsx-runtime").JSX.Element;
 export {};

package/route/hooks/index.d.ts

@@ -3,3 +3,4 @@ export * from './useSearchParams';
 export * from './useRouter';
 export * from './useBasePath';
 export * from './useRouteResolver';
+export * from './useIsRouteActive';

package/route/hooks/index.js

@@ -19,3 +19,4 @@ __exportStar(require("./useSearchParams"), exports);
 __exportStar(require("./useRouter"), exports);
 __exportStar(require("./useBasePath"), exports);
 __exportStar(require("./useRouteResolver"), exports);
+__exportStar(require("./useIsRouteActive"), exports);

package/route/hooks/useIsRouteActive.d.ts

@@ -0,0 +1 @@
+export declare function useIsRouteActive(): import("../context").InternalIsRouteActive;

package/route/hooks/useIsRouteActive.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsRouteActive = useIsRouteActive;
+const react_1 = require("react");
+const context_1 = require("../context");
+function useIsRouteActive() {
+    return (0, react_1.useContext)(context_1.RouteHelperContext).isRouteActive;
+}

package/utils/getAttributeFormattedValue.d.ts

@@ -0,0 +1,15 @@
+import { Attribute, InferredAttributeType } from '@headless-adminapp/core/attributes';
+interface AttributeFormattedValueStringsSet {
+    yes: string;
+    no: string;
+}
+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/utils/getAttributeFormattedValue.js

@@ -0,0 +1,91 @@
+"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';
+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;
+    }
+}

package/utils/index.d.ts

@@ -1 +1,2 @@
 export * from './calculateColumnWidths';
+export * from './getAttributeFormattedValue';

package/utils/index.js

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