@headless-adminapp/fluent 0.0.17-alpha.1

package/PageEntityView/FormSubgridContainer.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSubgridContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
+const icons_1 = require("@headless-adminapp/icons");
+const AppStringContext_1 = require("../App/AppStringContext");
+const FormSubgridCommandContainer_1 = require("../DataGrid/FormSubgridCommandContainer");
+const FormSubgridViewSelector_1 = require("../DataGrid/FormSubgridViewSelector");
+const GridPaginationContainer_1 = require("../DataGrid/GridPaginationContainer");
+const GridTableContainer_1 = require("../DataGrid/GridTableContainer");
+const FormSubgridContainer = ({ hideCommandBar, hideSearch, }) => {
+    const appStrings = (0, AppStringContext_1.useAppStrings)();
+    const [searchText, setSearchText] = (0, hooks_1.useSearchText)();
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            gap: 8,
+            // backgroundColor: tokens.colorNeutralBackground2,
+            // padding: 2,
+            overflow: 'hidden',
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                // gap: 12,
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                // overflow: 'hidden',
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        height: 40,
+                    }, children: (0, jsx_runtime_1.jsx)(FormSubgridViewSelector_1.FormSubgridViewSelector, {}) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) }), (!hideCommandBar || !hideSearch) && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        gap: 40,
+                        overflow: 'hidden',
+                        width: '100%',
+                        paddingBlock: 4,
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: !hideCommandBar && (0, jsx_runtime_1.jsx)(FormSubgridCommandContainer_1.FormSubgridCommandContainer, {}) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), !hideSearch && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'end',
+                                flexShrink: 0,
+                                paddingInline: 8,
+                            }, children: (0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, appearance: "filled-darker", value: searchText, onChange: (e) => setSearchText(e.target.value) }) }))] })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                gap: 16,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                flex: 1,
+                            }, children: (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: 'flex', minHeight: 300 }, children: (0, jsx_runtime_1.jsx)(GridTableContainer_1.GridTableContainer, {}) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                paddingInline: 8,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 8,
+                                paddingBottom: 8,
+                            }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.5 } }), (0, jsx_runtime_1.jsx)(GridPaginationContainer_1.GridPaginationContainer, {})] })] })] }) }));
+};
+exports.FormSubgridContainer = FormSubgridContainer;

package/PageEntityView/PageEntityView.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface PageEntityViewProps {
+    logicalName: string;
+    viewId?: string;
+    onChangeView?: (viewId: string) => void;
+}
+export declare const PageEntityView: FC<PageEntityViewProps>;
+export {};

package/PageEntityView/PageEntityView.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEntityView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const datagrid_1 = require("@headless-adminapp/app/datagrid");
+const PageEntityViewProvider_1 = require("@headless-adminapp/app/providers/PageEntityViewProvider");
+const icons_1 = require("@headless-adminapp/icons");
+const PageBroken_1 = require("../components/PageBroken");
+const PageLoading_1 = require("../components/PageLoading");
+const PageEntityViewDesktopContainer_1 = require("./PageEntityViewDesktopContainer");
+const PageEntityView = ({ logicalName, viewId, onChangeView, }) => {
+    const result = (0, datagrid_1.useLoadMainGridPage)(logicalName, viewId);
+    if (result.loading) {
+        return (0, jsx_runtime_1.jsx)(PageLoading_1.PageLoading, {});
+    }
+    if (result.error) {
+        return ((0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { Icon: icons_1.Icons.Error, title: result.title, message: result.message }));
+    }
+    const { schema, commands, viewLookup, view } = result;
+    return ((0, jsx_runtime_1.jsx)(PageEntityViewProvider_1.PageEntityViewProvider, { schema: schema, view: view, availableViews: viewLookup, commands: commands, onChangeView: onChangeView, children: (0, jsx_runtime_1.jsx)(PageEntityViewDesktopContainer_1.PageEntityViewDesktopContainer, {}) }));
+};
+exports.PageEntityView = PageEntityView;

package/PageEntityView/PageEntityViewDesktopContainer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const PageEntityViewDesktopContainer: FC;

package/PageEntityView/PageEntityViewDesktopContainer.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEntityViewDesktopContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CommandContainer_1 = require("../DataGrid/CommandContainer");
+const GridHeaderContainer_1 = require("../DataGrid/GridHeaderContainer");
+const GridPaginationContainer_1 = require("../DataGrid/GridPaginationContainer");
+const GridTableContainer_1 = require("../DataGrid/GridTableContainer");
+const PageEntityViewDesktopFrame_1 = require("./PageEntityViewDesktopFrame");
+const PageEntityViewDesktopContainer = () => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PageEntityViewDesktopFrame_1.PageEntityViewDesktopFrame, { commandBar: (0, jsx_runtime_1.jsx)(CommandContainer_1.CommandContainer, {}), header: (0, jsx_runtime_1.jsx)(GridHeaderContainer_1.GridHeaderContainer, {}), content: (0, jsx_runtime_1.jsx)(GridTableContainer_1.GridTableContainer, {}), footer: (0, jsx_runtime_1.jsx)(GridPaginationContainer_1.GridPaginationContainer, {}) }) }));
+};
+exports.PageEntityViewDesktopContainer = PageEntityViewDesktopContainer;

package/PageEntityView/PageEntityViewDesktopFrame.d.ts

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+interface PageEntityViewDesktopFrameProps {
+    commandBar: React.ReactNode;
+    header: React.ReactNode;
+    content: React.ReactNode;
+    footer: React.ReactNode;
+}
+export declare const PageEntityViewDesktopFrame: FC<PageEntityViewDesktopFrameProps>;
+export {};

package/PageEntityView/PageEntityViewDesktopFrame.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEntityViewDesktopFrame = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const PageEntityViewDesktopFrame = ({ commandBar, header, content, footer }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            gap: 8,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+            padding: 12,
+            overflow: 'hidden',
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                gap: 12,
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                // overflow: 'hidden',
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        // padding: 4,
+                        boxShadow: react_components_1.tokens.shadow2,
+                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        background: react_components_1.tokens.colorNeutralBackground1,
+                        display: 'flex',
+                        // overflow: 'hidden',
+                    }, children: commandBar }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        boxShadow: react_components_1.tokens.shadow2,
+                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        background: react_components_1.tokens.colorNeutralBackground1,
+                        paddingBlock: 8,
+                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                gap: 16,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                flex: 1,
+                            }, children: [header, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: 'flex' }, children: content })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                paddingInline: 8,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 8,
+                            }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), footer] })] })] }) }));
+};
+exports.PageEntityViewDesktopFrame = PageEntityViewDesktopFrame;

package/PageEntityView/PageEntityViewStringContext.d.ts

@@ -0,0 +1,23 @@
+export interface PageEntityViewStringSet {
+    editColumns: string;
+    addColumns: string;
+    records: string;
+    loaded: string;
+    selected: string;
+    add: string;
+    apply: string;
+    cancel: string;
+    reset: string;
+    close: string;
+    moveUp: string;
+    moveDown: string;
+    remove: string;
+    sortByAscending: string;
+    sortByDescending: string;
+    filter: string;
+    clearFilter: string;
+    filterBy: string;
+}
+export declare const defaultPageEntityViewStrings: PageEntityViewStringSet;
+export declare const PageEntityViewStringContext: import("react").Context<PageEntityViewStringSet>;
+export declare function usePageEntityViewStrings(): PageEntityViewStringSet;

package/PageEntityView/PageEntityViewStringContext.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEntityViewStringContext = exports.defaultPageEntityViewStrings = void 0;
+exports.usePageEntityViewStrings = usePageEntityViewStrings;
+const react_1 = require("react");
+exports.defaultPageEntityViewStrings = {
+    add: 'Add',
+    addColumns: 'Add columns',
+    apply: 'Apply',
+    cancel: 'Cancel',
+    close: 'Close',
+    editColumns: 'Edit columns',
+    moveDown: 'Move down',
+    moveUp: 'Move up',
+    loaded: 'Loaded',
+    records: 'Records',
+    remove: 'Remove',
+    reset: 'Reset',
+    selected: 'Selected',
+    sortByAscending: 'Sort by ascending',
+    clearFilter: 'Clear filter',
+    filter: 'Filter',
+    sortByDescending: 'Sort by descending',
+    filterBy: 'Filter by',
+};
+exports.PageEntityViewStringContext = (0, react_1.createContext)(exports.defaultPageEntityViewStrings);
+function usePageEntityViewStrings() {
+    const context = (0, react_1.useContext)(exports.PageEntityViewStringContext);
+    return context;
+}

package/PageEntityView/index.d.ts

@@ -0,0 +1 @@
+export { PageEntityView } from './PageEntityView';

package/PageEntityView/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEntityView = void 0;
+var PageEntityView_1 = require("./PageEntityView");
+Object.defineProperty(exports, "PageEntityView", { enumerable: true, get: function () { return PageEntityView_1.PageEntityView; } });

package/ProgressIndicatorContainer/index.d.ts

@@ -0,0 +1 @@
+export declare const ProgressIndicatorContainer: () => import("react/jsx-runtime").JSX.Element;

package/ProgressIndicatorContainer/index.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressIndicatorContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/progress-indicator/hooks");
+const ProgressIndicatorContainer = () => {
+    const state = (0, hooks_1.useProgressIndicator)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state.overlayVisible && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    position: 'fixed',
+                    top: 0,
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    zIndex: 1000,
+                } })), (0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: state.visible, onOpenChange: () => {
+                    // do nothing
+                }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 320 }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogBody, { children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Spinner, {}), !!state.message && ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: {
+                                        textAlign: 'center',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        marginTop: react_components_1.tokens.spacingVerticalL,
+                                    }, children: state.message })), (0, jsx_runtime_1.jsx)("button", { style: {
+                                        position: 'absolute',
+                                        opacity: 0,
+                                        pointerEvents: 'none',
+                                    } })] }) }) }) })] }));
+};
+exports.ProgressIndicatorContainer = ProgressIndicatorContainer;

package/ToastNotificationContainer/index.d.ts

@@ -0,0 +1 @@
+export declare const ToastNotificationContainer: () => import("react/jsx-runtime").JSX.Element;

package/ToastNotificationContainer/index.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastNotificationContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/toast-notification/hooks");
+const react_1 = require("react");
+const ToastNotificationContainer = () => {
+    const items = (0, hooks_1.useToastNotificationItems)();
+    const toasterId = (0, react_components_1.useId)('toaster');
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Toaster, { toasterId: toasterId }), items.map((item) => {
+                return (0, jsx_runtime_1.jsx)(Item, { item: item, toasterId: toasterId }, item.id);
+            })] }));
+};
+exports.ToastNotificationContainer = ToastNotificationContainer;
+const Item = ({ item, toasterId, }) => {
+    const { dispatchToast, dismissToast } = (0, react_components_1.useToastController)(toasterId);
+    const closeToastNotification = (0, hooks_1.useCloseToastNotification)();
+    const opened = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!item.isOpen) {
+            dismissToast(item.id);
+            return;
+        }
+        if (opened.current) {
+            return;
+        }
+        opened.current = true;
+        dispatchToast((0, jsx_runtime_1.jsxs)(react_components_1.Toast, { children: [(0, jsx_runtime_1.jsx)(react_components_1.ToastTitle, { children: item.title }), (0, jsx_runtime_1.jsx)(react_components_1.ToastBody, { children: item.text }), !!((_a = item.actions) === null || _a === void 0 ? void 0 : _a.length) && ((0, jsx_runtime_1.jsx)(react_components_1.ToastFooter, { children: item.actions.map((action, index) => ((0, jsx_runtime_1.jsx)(react_components_1.Link, { onClick: action.onClick, children: action.text }, index))) }))] }), {
+            timeout: 2000,
+            intent: item.type,
+            pauseOnHover: true,
+            pauseOnWindowBlur: true,
+            position: 'top-end',
+            onStatusChange: (event, data) => {
+                if (data.status === 'dismissed') {
+                    closeToastNotification(item.id);
+                }
+            },
+        });
+    }, [dispatchToast, closeToastNotification, item, dismissToast]);
+    return null;
+};

package/components/BodyLoading.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface BodyLoadingProps {
+    loading: boolean;
+}
+export declare const BodyLoading: FC<BodyLoadingProps>;
+export {};

package/components/BodyLoading.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyLoading = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const BodyLoading = ({ loading }) => {
+    if (!loading) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'rgba(255, 255, 255, 0.5)',
+        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, {}) }));
+};
+exports.BodyLoading = BodyLoading;

package/components/DialogLogin.d.ts

@@ -0,0 +1,6 @@
+interface LoginFormProps {
+    logoImageUrl?: string;
+    onLogin: (username: string, password: string) => Promise<void>;
+}
+export declare function DialogLogin(props: LoginFormProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/DialogLogin.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogLogin = DialogLogin;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const LoginForm_1 = require("./LoginForm");
+function DialogLogin(props) {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: true, onOpenChange: () => { }, modalType: "non-modal", children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 360 }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogBody, { children: (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(LoginForm_1.LoginForm, { onLogin: props.onLogin, logoImageUrl: props.logoImageUrl }) }) }) }) }));
+}

package/components/LoginForm.d.ts

@@ -0,0 +1,6 @@
+interface LoginFormProps {
+    logoImageUrl?: string;
+    onLogin: (username: string, password: string) => Promise<void>;
+}
+export declare function LoginForm(props: LoginFormProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/LoginForm.js

@@ -0,0 +1,101 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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.LoginForm = LoginForm;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const yup_1 = require("@hookform/resolvers/yup");
+const react_hook_form_1 = require("react-hook-form");
+const yup = __importStar(require("yup"));
+const SectionControl_1 = require("../DataForm/SectionControl");
+const PasswordControl_1 = require("../form/controls/PasswordControl");
+const TextControl_1 = require("../form/controls/TextControl");
+const validationSchema = yup
+    .object()
+    .shape({
+    username: yup.string().required('Username is required'),
+    password: yup.string().required('Password is required'),
+});
+const initialValues = {
+    username: '',
+    password: '',
+};
+function LoginForm(props) {
+    const form = (0, react_hook_form_1.useForm)({
+        defaultValues: initialValues,
+        resolver: (0, yup_1.yupResolver)(validationSchema),
+    });
+    const handleOnSubmit = (values) => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        form.clearErrors();
+        try {
+            yield props.onLogin((_a = values.username) === null || _a === void 0 ? void 0 : _a.toLowerCase().trim(), values.password);
+        }
+        catch (error) {
+            form.setError('root', {
+                type: 'manual',
+                message: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : 'An error occurred',
+            });
+        }
+    });
+    return ((0, jsx_runtime_1.jsx)("form", { onSubmit: form.handleSubmit(handleOnSubmit), children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'stretch',
+                justifyContent: 'flex-start',
+                gap: 16,
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        width: 80,
+                        height: 80,
+                    }, children: !!props.logoImageUrl && ((0, jsx_runtime_1.jsx)("img", { src: props.logoImageUrl, style: {
+                            width: 80,
+                            height: 80,
+                            aspectRatio: 'auto 80 / 80',
+                        }, alt: "logo" })) }), (0, jsx_runtime_1.jsx)(react_components_1.Subtitle1, { children: "Log in to your account" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'stretch',
+                        justifyContent: 'flex-start',
+                        gap: 16,
+                    }, children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "username", render: ({ field, fieldState, formState }) => {
+                                var _a, _b, _c;
+                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Username", labelPosition: "top", required: true, isError: !!((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) && formState.isSubmitted, errorMessage: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message, children: (0, jsx_runtime_1.jsx)(TextControl_1.TextControl, { placeholder: "Username", appearance: "outline", name: field.name, value: field.value, onChange: field.onChange, onBlur: field.onBlur, autoCapitalize: "none", autoCorrect: "off", error: !!((_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) && formState.isSubmitted }) }));
+                            } }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "password", render: ({ field, fieldState, formState }) => {
+                                var _a, _b, _c;
+                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Password", labelPosition: "top", required: true, isError: !!((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) && formState.isSubmitted, errorMessage: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message, children: (0, jsx_runtime_1.jsx)(PasswordControl_1.PasswordControl, { placeholder: "Password", name: field.name, appearance: "outline", error: !!((_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) && formState.isSubmitted, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) }));
+                            } }), !!form.formState.errors.root && ((0, jsx_runtime_1.jsx)(react_components_1.MessageBar, { intent: "error", children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: form.formState.errors.root.message }) })), (0, jsx_runtime_1.jsxs)(react_components_1.Button, { appearance: "primary", type: "submit", style: {
+                                marginTop: 8,
+                                pointerEvents: form.formState.isSubmitting ? 'none' : 'auto',
+                            }, children: [form.formState.isSubmitting && ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny", appearance: "inverted", style: { marginRight: 4 } })), "Login"] })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 80 } })] }) }));
+}

package/components/PageBroken.d.ts

@@ -0,0 +1,8 @@
+import { Icon } from '@headless-adminapp/icons';
+interface PageBrokenProps {
+    title: string;
+    message?: string;
+    Icon?: Icon;
+}
+export declare function PageBroken({ title, message, Icon }: PageBrokenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/PageBroken.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageBroken = PageBroken;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function PageBroken({ title, message, Icon }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 16,
+        }, children: [!!Icon && (0, jsx_runtime_1.jsx)(Icon, { size: 64 }), (0, jsx_runtime_1.jsx)(react_components_1.Title2, { children: title }), !!message && (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: message }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => window.history.back(), children: "Go back" })] }));
+}

package/components/PageLoading.d.ts

@@ -0,0 +1,5 @@
+interface PageLoadingProps {
+    message?: string;
+}
+export declare function PageLoading({ message }: PageLoadingProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/PageLoading.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLoading = PageLoading;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function PageLoading({ message }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            gap: 16,
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Spinner, {}), !!message && (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: message })] }));
+}

package/components/PageLogin.d.ts

@@ -0,0 +1,7 @@
+interface LoginPageProps {
+    logoImageUrl?: string;
+    illustrationImageUrl?: string;
+    onLogin: (username: string, password: string) => Promise<void>;
+}
+export declare function PageLogin(props: LoginPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/PageLogin.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLogin = PageLogin;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @next/next/no-img-element */
+const react_components_1 = require("@fluentui/react-components");
+const LoginForm_1 = require("./LoginForm");
+function PageLogin(props) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            height: '100vh',
+            width: '100vw',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: react_components_1.tokens.colorNeutralBackground2,
+        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                boxShadow: react_components_1.tokens.shadow4,
+                maxWidth: 992,
+                width: '100%',
+                overflow: 'hidden',
+                borderRadius: react_components_1.tokens.borderRadiusMedium,
+                background: react_components_1.tokens.colorNeutralBackground1,
+            }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', minHeight: 'calc(-200px + 100vh)' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 16,
+                            flex: 1,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'stretch',
+                                justifyContent: 'flex-start',
+                                gap: 16,
+                                minWidth: 300,
+                            }, children: (0, jsx_runtime_1.jsx)(LoginForm_1.LoginForm, { logoImageUrl: props.logoImageUrl, onLogin: props.onLogin }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 16,
+                            flex: 1,
+                            alignItems: 'stretch',
+                            justifyContent: 'center',
+                            overflow: 'hidden',
+                        }, children: (0, jsx_runtime_1.jsx)("img", { src: props.illustrationImageUrl, alt: "Login", style: { width: '100%', height: '100%', objectFit: 'contain' } }) })] }) }) }));
+}

package/form/FormControl.d.ts

@@ -0,0 +1,6 @@
+import { FormControlProps } from './types';
+declare function FormControl<T>(props: FormControlProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace FormControl {
+    var Loading: import("react").FC;
+}
+export default FormControl;