@headless-adminapp/fluent 0.0.17-alpha.7 → 1.0.0

package/styles.css

@@ -0,0 +1,149 @@
+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;
+}
+
+.fc {
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  font-weight: var(--fontWeightRegular);
+  line-height: var(--lineHeightBase300);
+  --fc-border-color: var(--colorNeutralStroke3);
+}
+.fc .fc-button {
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+  border-color: var(--colorNeutralStroke1);
+}
+.fc .fc-button:hover {
+  background-color: var(--colorNeutralBackground1Hover);
+  border-color: var(--colorNeutralStroke1Hover);
+  color: var(--colorNeutralForeground1Hover);
+}
+.fc .fc-button.fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button.fc-button-primary:not(:disabled):active {
+  background-color: var(--colorBrandBackground);
+  color: var(--colorNeutralForegroundOnBrand);
+  border-color: var(--colorBrandBackground);
+}
+.fc .fc-daygrid-dot-event.fc-event-mirror,
+.fc .fc-daygrid-dot-event:hover {
+  background-color: transparent;
+}
+.fc .fc-day.fc-daygrid-day.fc-day-past {
+  background-color: var(--colorNeutralBackground2);
+}
+.fc .fc-timegrid-event-harness-inset .fc-timegrid-event,
+.fc .fc-timegrid-event.fc-event-mirror,
+.fc .fc-timegrid-more-link {
+  border: 0px;
+  box-shadow: none;
+}
+.fc .fc-event-main {
+  padding: 0px;
+}
+.fc .fc-col-header-cell {
+  font-weight: var(--fontWeightMedium);
+  text-align: left;
+}
+.fc .fc-timegrid-slot {
+  height: 2em;
+}
+.fc .fc-daygrid-day-top {
+  flex-direction: row;
+}

package/types/index.d.ts

@@ -6,16 +6,20 @@ declare module '@headless-adminapp/icons/types' {
         Eye: Icon;
         EyeOff: Icon;
         Calendar: Icon;
+        Clock: Icon;
         ArrowLeft: Icon;
         ArrowRight: Icon;
         ArrowDown: Icon;
         ArrowUp: Icon;
         ChevronDown: Icon;
         ChevronUp: Icon;
+        ChevronLeft: Icon;
+        ChevronRight: Icon;
         Close: Icon;
         Add: Icon;
         Edit: Icon;
         Delete: Icon;
+        Save: Icon;
         Refresh: Icon;
         MoreVertical: Icon;
         MoreHorizontal: Icon;
@@ -27,6 +31,20 @@ 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;
+        Block: Icon;
+        Grid: Icon;
     }
 }
 export {};

package/utils/avatar.d.ts

@@ -0,0 +1,2 @@
+import { type AvatarNamedColor } from '@fluentui/react-components';
+export declare function getAvatarColor(name: string | null | undefined): AvatarNamedColor | undefined;

package/utils/avatar.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAvatarColor = getAvatarColor;
+const avatarColors = [
+    'dark-red',
+    'cranberry',
+    'red',
+    'pumpkin',
+    'peach',
+    'marigold',
+    'gold',
+    'brass',
+    'brown',
+    'forest',
+    'seafoam',
+    'dark-green',
+    'light-teal',
+    'teal',
+    'steel',
+    'blue',
+    'royal-blue',
+    'cornflower',
+    'navy',
+    'lavender',
+    'purple',
+    'grape',
+    'lilac',
+    'pink',
+    'magenta',
+    'plum',
+    'beige',
+    'mink',
+    'platinum',
+    'anchor',
+];
+function getAvatarColor(name) {
+    if (!name) {
+        return;
+    }
+    const index = name
+        .split('')
+        .map((char) => char.charCodeAt(0))
+        .reduce((acc, val) => acc + val, 0);
+    return avatarColors[index % avatarColors.length];
+}

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/ScrollbarWithMoreDataRequest.d.ts

@@ -1,9 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-interface ScrollbarWithMoreDataRequest {
-    data: any;
-    hasMore: boolean;
-    onRequestMore: () => void;
-    rtl?: boolean;
-}
-export declare const ScrollbarWithMoreDataRequest: FC<PropsWithChildren<ScrollbarWithMoreDataRequest>>;
-export {};

package/DataGrid/ScrollbarWithMoreDataRequest.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollbarWithMoreDataRequest = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ScrollView_1 = require("@headless-adminapp/app/components/ScrollView");
-const react_1 = require("react");
-function getReaminingSpace(div) {
-    return div.scrollHeight - div.scrollTop - div.clientHeight;
-}
-const ScrollbarWithMoreDataRequest = ({ data, onRequestMore, hasMore, children, rtl }) => {
-    const divRef = (0, react_1.useRef)(null);
-    const onRequestMoreRef = (0, react_1.useRef)(onRequestMore);
-    onRequestMoreRef.current = onRequestMore;
-    (0, react_1.useEffect)(() => {
-        var _a;
-        const div = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
-        if (!div) {
-            return;
-        }
-        const remainingSpace = getReaminingSpace(div);
-        if (remainingSpace <= 0 && hasMore) {
-            onRequestMoreRef.current();
-        }
-    }, [data, hasMore]);
-    return ((0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { autoHide: true, rtl: rtl, onScroll: (e) => {
-            const div = e.target;
-            const remainingSpace = getReaminingSpace(div);
-            if (remainingSpace <= 0 && hasMore) {
-                onRequestMoreRef.current();
-            }
-        }, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, children: children }) }));
-};
-exports.ScrollbarWithMoreDataRequest = ScrollbarWithMoreDataRequest;

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;
-    }
-}

package/form/controls/NumberControl.d.ts

@@ -1,4 +0,0 @@
-import { ControlProps } from './types';
-export interface NumberControlProps extends ControlProps<number> {
-}
-export declare function NumberControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, }: NumberControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/NumberControl.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NumberControl = NumberControl;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable unused-imports/no-unused-vars */
-const react_components_1 = require("@fluentui/react-components");
-function NumberControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, }) {
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "number", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, 
-        // value={value ?? ''}
-        onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value ? Number(e.target.value) : null), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
-        // invalid={error}
-        // size="sm"
-        disabled: disabled, readOnly: readOnly, style: {
-            width: '100%',
-        } }));
-}