@deix/rossini-core 0.1.0

package/README.md

@@ -0,0 +1,3 @@
+# Rossini Core
+
+Rossini helps you build UI fast by providing a series of components and utilities featuring the Deix style.

package/lib/package.json

@@ -0,0 +1,73 @@
+{
+    "name": "@deix/rossini-core",
+    "version": "0.1.0",
+    "main": "lib/index.js",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/deixsrl/rossini-core.git"
+    },
+    "license": "UNLICENSED",
+    "private": false,
+    "author": {
+        "name": "Jacopo Corno"
+    },
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint",
+        "build-lib": "tsc -p tsconfig-lib.json",
+        "storybook": "start-storybook -p 6006",
+        "build-storybook": "build-storybook"
+    },
+    "peerDependencies": {
+        "@types/react": "^18.0.25",
+        "@types/react-dom": "^18.0.8",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.20.7",
+        "@storybook/addon-actions": "^6.5.15",
+        "@storybook/addon-essentials": "^6.5.15",
+        "@storybook/addon-interactions": "^6.5.15",
+        "@storybook/addon-links": "^6.5.15",
+        "@storybook/builder-webpack5": "^6.5.15",
+        "@storybook/manager-webpack5": "^6.5.15",
+        "@storybook/react": "^6.5.15",
+        "@storybook/testing-library": "^0.0.13",
+        "@types/node": "18.11.18",
+        "@types/react": "18.0.26",
+        "@types/react-dom": "18.0.10",
+        "@typescript-eslint/eslint-plugin": "^5.47.1",
+        "babel-loader": "^8.3.0",
+        "eslint": "8.31.0",
+        "eslint-config-next": "^13.1.1",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-storybook": "^0.6.8",
+        "next": "13.1.1",
+        "react": "18.2.0",
+        "react-docgen-typescript": "^2.2.2",
+        "react-dom": "18.2.0",
+        "storybook-addon-locale": "^0.3.6",
+        "storybook-addon-next-router": "^4.0.2",
+        "typescript": "4.9.4"
+    },
+    "dependencies": {
+        "@emotion/react": "^11.10.5",
+        "@emotion/styled": "^11.10.5",
+        "@fontsource/raleway": "^4.5.11",
+        "@material-ui/icons": "^4.11.3",
+        "@mui/icons-material": "^5.11.0",
+        "@mui/material": "^5.11.2",
+        "@uiball/loaders": "^1.2.6",
+        "axios": "^1.2.2",
+        "flag-icons": "^6.6.6",
+        "next-themes": "^0.2.1",
+        "react-query": "^3.39.2"
+    },
+    "files": [
+        "lib/**/*"
+    ]
+}

package/lib/src/components/buttons/Avatar/Avatar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface AvatarProps {
+    logoutUrl?: string;
+    accountSettingsUrl?: string;
+}
+declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;
+//# sourceMappingURL=Avatar.d.ts.map

package/lib/src/components/buttons/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/components/buttons/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAiBxC,UAAU,WAAW;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyEjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/src/components/buttons/Avatar/Avatar.js

@@ -0,0 +1,52 @@
+import Link from 'next/link';
+import React, { useState } from 'react';
+import FaceIcon from '@mui/icons-material/Face';
+import LogoutIcon from '@mui/icons-material/Logout';
+import { Avatar as MUIAvatar, ListItemIcon, ListItemText, Menu, MenuItem, Tooltip, useTheme, } from '@mui/material';
+import { useAPI } from '../../../utils/hooks/useAPI';
+import { useUserInfo } from '../../../utils/hooks/useKeycloak';
+var Avatar = function (_a) {
+    var logoutUrl = _a.logoutUrl, accountSettingsUrl = _a.accountSettingsUrl;
+    var muiTheme = useTheme();
+    // Menu
+    var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var open = Boolean(anchorEl);
+    var handleClick = function (event) {
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function () {
+        setAnchorEl(null);
+    };
+    // User data
+    var apiClient = useAPI(accountSettingsUrl);
+    var userInfo = useUserInfo(apiClient).data;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { title: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.preferredUserName) || 'Anonymous User' },
+            React.createElement(MUIAvatar, { alt: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.preferredUserName) || 'user-name', sx: {
+                    bgcolor: muiTheme.palette.primary.main,
+                    width: 24,
+                    height: 24,
+                }, onClick: handleClick })),
+        React.createElement(Menu, { anchorEl: anchorEl, open: open, onClose: handleClose, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'right',
+            }, transformOrigin: {
+                vertical: 'top',
+                horizontal: 'right',
+            }, PaperProps: {
+                sx: {
+                    padding: '4px',
+                },
+            } },
+            accountSettingsUrl && (React.createElement(Link, { href: accountSettingsUrl },
+                React.createElement(MenuItem, { onClick: handleClose },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(FaceIcon, { fontSize: 'small' })),
+                    React.createElement(ListItemText, null, "Account")))),
+            logoutUrl && (React.createElement(Link, { href: logoutUrl },
+                React.createElement(MenuItem, { onClick: handleClose },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(LogoutIcon, { fontSize: 'small' })),
+                    React.createElement(ListItemText, null, "Logout")))))));
+};
+export default Avatar;

package/lib/src/components/buttons/LanguageSelect/LanguageSelect.d.ts

@@ -0,0 +1,16 @@
+import { FunctionComponent } from 'react';
+import 'flag-icons/css/flag-icons.min.css';
+import { Language, Locale } from '../../../types/languages';
+export interface LanguageSelectProps {
+    /**
+     * Internationalization locale.
+     */
+    locale?: Locale;
+    /**
+     * List of language options
+     */
+    languages?: Language[];
+}
+export declare const LanguageSelect: FunctionComponent<LanguageSelectProps>;
+export default LanguageSelect;
+//# sourceMappingURL=LanguageSelect.d.ts.map

package/lib/src/components/buttons/LanguageSelect/LanguageSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/buttons/LanguageSelect/LanguageSelect.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAejD,OAAO,mCAAmC,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAG5D,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CA6EjE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/src/components/buttons/LanguageSelect/LanguageSelect.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import LanguageIcon from '@mui/icons-material/Language';
+import { IconButton, ListItemIcon, ListItemText, Menu, MenuItem, MenuList, Tooltip, } from '@mui/material';
+import 'flag-icons/css/flag-icons.min.css';
+import t from './translations.json';
+export var LanguageSelect = function (_a) {
+    var _b = _a.locale, locale = _b === void 0 ? 'en' : _b, _c = _a.languages, languages = _c === void 0 ? [
+        {
+            id: 'en',
+            label: 'English',
+            countryCode: 'us',
+            MUILocale: 'enUS',
+        },
+    ] : _c;
+    // Menu controls
+    var _d = React.useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
+    var open = Boolean(anchorEl);
+    var openOptions = function (evt) {
+        setAnchorEl(evt.currentTarget);
+    };
+    var closeOptions = function () {
+        setAnchorEl(null);
+    };
+    // Set the current language
+    var setLocale = function (locale) {
+        document.cookie = "NEXT_LOCALE=".concat(locale, "; max-age=31536000; path=/");
+    };
+    var router = useRouter();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { title: t['tooltip'][locale] },
+            React.createElement(IconButton, { component: 'span', "aria-label": 'language', onClick: openOptions },
+                React.createElement(LanguageIcon, null))),
+        React.createElement(Menu, { anchorEl: anchorEl, id: 'language-menu', open: open, onClose: closeOptions, onClick: closeOptions, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'right',
+            }, transformOrigin: {
+                vertical: 'top',
+                horizontal: 'right',
+            }, PaperProps: {
+                sx: {
+                    padding: '4px',
+                },
+            } },
+            React.createElement(MenuList, { dense: true }, languages === null || languages === void 0 ? void 0 : languages.map(function (lang) { return (React.createElement(Link, { key: lang.id, href: router.asPath, locale: lang.id },
+                React.createElement(MenuItem, { selected: lang.id === locale, onClick: function () { return setLocale(lang.id); } },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement("span", { className: "fi fi-".concat(lang.countryCode) })),
+                    React.createElement(ListItemText, null, lang.label)))); })))));
+};
+export default LanguageSelect;

package/lib/src/components/buttons/LanguageSelect/translations.json

@@ -0,0 +1,9 @@
+{
+    "tooltip": {
+        "de": "Sprache",
+        "en": "Language",
+        "fr": "Langue",
+        "it": "Lingua",
+        "es": "Idioma"
+    }
+}

package/lib/src/components/buttons/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { StringTranslation } from '../../../types/languages';
+export interface ButtonGroupOption {
+    /**
+     * Option unique identifier.
+     */
+    id: string;
+    /**
+     * The label to be shown
+     */
+    label: StringTranslation;
+    /**
+     * A description for the option to appear in the tooltip
+     */
+    tooltip?: StringTranslation;
+    /**
+     * Whether the option is disabled
+     */
+    disabled?: boolean;
+}
+interface ToggleButtonGroupProps {
+    /**
+     * A list of options.
+     */
+    options: ButtonGroupOption[];
+    /**
+     * Function to be called when a button is clicked.
+     */
+    onChange: (newValue: string) => void;
+    /**
+     * Size of the buttons.
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The controlled value.
+     */
+    value: string;
+}
+declare const ToggleButtonGroup: React.FC<ToggleButtonGroupProps>;
+export default ToggleButtonGroup;
+//# sourceMappingURL=ToggleButtonGroup.d.ts.map

package/lib/src/components/buttons/ToggleButtonGroup/ToggleButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/buttons/ToggleButtonGroup/ToggleButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAG7D,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,sBAAsB;IAC9B;;OAEG;IACH,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B;;OAEG;IACH,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAoCvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/src/components/buttons/ToggleButtonGroup/ToggleButtonGroup.js

@@ -0,0 +1,20 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Tooltip } from '@mui/material';
+import { useLocale } from '../../../utils/hooks/useLocale';
+var ToggleButtonGroup = function (_a) {
+    var onChange = _a.onChange, options = _a.options, _b = _a.size, size = _b === void 0 ? 'small' : _b, value = _a.value;
+    var locale = useLocale();
+    // Handle selection
+    var _c = useState(''), selected = _c[0], setSelected = _c[1];
+    useEffect(function () {
+        if (value) {
+            setSelected(value);
+        }
+    }, [value]);
+    return (React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, options.map(function (opt) {
+        var _a;
+        return (React.createElement(Tooltip, { key: opt.id, title: ((_a = opt.tooltip) === null || _a === void 0 ? void 0 : _a[locale]) || '' },
+            React.createElement(Button, { key: opt.id, size: size, color: 'primary', disabled: opt.disabled, variant: opt.id === selected ? 'contained' : 'outlined', onClick: function () { return onChange(opt.id); } }, opt.label[locale])));
+    })));
+};
+export default ToggleButtonGroup;

package/lib/src/components/buttons/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Avatar } from './Avatar/Avatar';
+export { default as LanguageSelect } from './LanguageSelect/LanguageSelect';
+export { default as ToggleButtonGroup } from './ToggleButtonGroup/ToggleButtonGroup';
+//# sourceMappingURL=index.d.ts.map

package/lib/src/components/buttons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/buttons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uCAAuC,CAAC"}

package/lib/src/components/buttons/index.js

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar/Avatar';
+export { default as LanguageSelect } from './LanguageSelect/LanguageSelect';
+export { default as ToggleButtonGroup } from './ToggleButtonGroup/ToggleButtonGroup';

package/lib/src/components/layout/MinimalLayout/MinimalLayout.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { ImageProps } from 'next/image';
+interface MinimalLayoutProps {
+    isLoading?: boolean;
+    isError?: boolean;
+    error?: Error;
+    logoSource?: ImageProps['src'];
+    children?: ReactNode;
+}
+declare const MinimalLayout: React.FC<MinimalLayoutProps>;
+export default MinimalLayout;
+//# sourceMappingURL=MinimalLayout.d.ts.map

package/lib/src/components/layout/MinimalLayout/MinimalLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalLayout.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/MinimalLayout/MinimalLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAc,EAAE,UAAU,EAAmB,MAAM,YAAY,CAAC;AAUhE,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,UAAU,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuF/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/src/components/layout/MinimalLayout/MinimalLayout.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Box, Typography, useTheme as useMUITheme } from '@mui/material';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import { DotWaveLoading } from '../../progress';
+import Footer from '../components/Footer/Footer';
+import TopLine from '../components/Topline/TopLine';
+import t from './translations.json';
+var MinimalLayout = function (_a) {
+    var isLoading = _a.isLoading, isError = _a.isError, error = _a.error, logoSource = _a.logoSource, children = _a.children;
+    var theme = useMUITheme();
+    var router = useRouter();
+    var locale = router.locale || 'en';
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TopLine, null),
+        React.createElement(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                paddingBottom: '10px',
+                minHeight: '100vh',
+                width: '100%',
+                background: theme.palette.background.default,
+            } },
+            isLoading && React.createElement(DotWaveLoading, { locale: locale }),
+            !isLoading && isError && (React.createElement(Box, { sx: {
+                    flexGrow: 1,
+                    maxWidth: '100%',
+                    overflowX: 'hidden',
+                    paddingTop: '10px',
+                    paddingBottom: '10px',
+                    paddingLeft: '27px',
+                    paddingRight: '27px',
+                } },
+                React.createElement("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: '100vh',
+                    } },
+                    React.createElement(Image, { src: '/images/illustrations/undraw_server_down.svg', alt: 'error-page', width: 300, height: 300 }),
+                    React.createElement(Typography, { variant: 'h4', color: 'error', align: 'center' }, t['errorPageLoad'][locale]),
+                    error && (React.createElement(Typography, { variant: 'body1', color: 'error', align: 'center' },
+                        "Error: ",
+                        error.message))))),
+            !isLoading && (React.createElement(Box, { sx: {
+                    flexGrow: 1,
+                    maxWidth: '100%',
+                    overflowX: 'hidden',
+                    paddingTop: '10px',
+                    paddingBottom: '10px',
+                    paddingLeft: '27px',
+                    paddingRight: '27px',
+                } }, children)),
+            React.createElement(Footer, { logoSource: logoSource, text: 'Deix Srl', textURL: 'https://deixsrl.com' }))));
+};
+export default MinimalLayout;

package/lib/src/components/layout/MinimalLayout/translations.json

@@ -0,0 +1,8 @@
+{
+    "errorPageLoad": {
+        "de": "Ups! Beim Abrufen der Seiteninformationen ist ein Fehler aufgetreten.",
+        "en": "Oops! Something went wrong retrieving page information.",
+        "fr": "Oups! Quelque chose s'est mal passé lors de la récupération des informations de la page.",
+        "it": "Oops! Qualcosa è andato storto nel recupero delle informazioni sulla pagina."
+    }
+}

package/lib/src/components/layout/StandardLayout/StandardLayout.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import { ImageProps } from 'next/image';
+import { SidebarLink } from '../components/Sidebar/Sidebar';
+interface StandardLayoutProps {
+    isLoading?: boolean;
+    isError?: boolean;
+    error?: Error;
+    children?: ReactNode;
+    logoSource?: ImageProps['src'];
+    sidebarLinks?: SidebarLink[];
+    logoutUrl?: string;
+    accountSettingsUrl?: string;
+}
+declare const StandardLayout: React.FC<StandardLayoutProps>;
+export default StandardLayout;
+//# sourceMappingURL=StandardLayout.d.ts.map

package/lib/src/components/layout/StandardLayout/StandardLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StandardLayout.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/StandardLayout/StandardLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASzC,OAAc,EAAE,UAAU,EAAmB,MAAM,YAAY,CAAC;AAMhE,OAAgB,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAQrE,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC/B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwHjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/src/components/layout/StandardLayout/StandardLayout.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Box, Typography, useMediaQuery, useTheme as useMUITheme } from '@mui/material';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import { DotWaveLoading } from '../../progress';
+import AppLogo from '../components/AppLogo/AppLogo';
+import Footer from '../components/Footer/Footer';
+import Sidebar from '../components/Sidebar/Sidebar';
+import Topbar from '../components/Topbar/Topbar';
+import TopLine from '../components/Topline/TopLine';
+import { usePersistedState } from '../../../utils/hooks/usePersistedState';
+import t from './translations.json';
+var StandardLayout = function (_a) {
+    var isLoading = _a.isLoading, isError = _a.isError, error = _a.error, logoSource = _a.logoSource, _b = _a.sidebarLinks, sidebarLinks = _b === void 0 ? [] : _b, logoutUrl = _a.logoutUrl, accountSettingsUrl = _a.accountSettingsUrl, children = _a.children;
+    var theme = useMUITheme();
+    var router = useRouter();
+    var locale = router.locale || 'en';
+    // Get if we are dealing with mobile client
+    var isMobile = !useMediaQuery(theme.breakpoints.up('lg'));
+    // Persist user preference about the sidebar
+    var _c = usePersistedState('sidebarOpen', isMobile ? false : true), sidebarOpen = _c[0], setSidebarOpen = _c[1];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TopLine, null),
+        React.createElement(Sidebar, { links: sidebarLinks, onClose: function () { return setSidebarOpen(false); }, open: sidebarOpen, isMobile: isMobile, logo: React.createElement(AppLogo, { logoSource: logoSource, open: sidebarOpen }), locale: locale }),
+        React.createElement(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                paddingBottom: '10px',
+                minHeight: '100vh',
+                width: '100%',
+                background: theme.palette.background.default,
+            } },
+            React.createElement(Topbar, { onClose: function () { return setSidebarOpen(false); }, onOpen: function () { return setSidebarOpen(true); }, open: sidebarOpen, locale: locale, logoutUrl: logoutUrl, accountSettingsUrl: accountSettingsUrl }),
+            isLoading && React.createElement(DotWaveLoading, { locale: locale }),
+            !isLoading && isError && (React.createElement(Box, { sx: {
+                    flexGrow: 1,
+                    maxWidth: '100%',
+                    overflowX: 'hidden',
+                    paddingTop: '10px',
+                    paddingBottom: '10px',
+                    paddingLeft: '27px',
+                    paddingRight: '27px',
+                } },
+                React.createElement("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: '100vh',
+                    } },
+                    React.createElement(Image, { src: '/images/illustrations/undraw_server_down.svg', alt: 'error-page', width: 300, height: 300 }),
+                    React.createElement(Typography, { variant: 'h4', color: 'error', align: 'center' }, t['errorPageLoad'][locale]),
+                    error && (React.createElement(Typography, { variant: 'body1', color: 'error', align: 'center' },
+                        "Error: ",
+                        error.message))))),
+            !isLoading && (React.createElement(Box, { sx: {
+                    flexGrow: 1,
+                    maxWidth: '100%',
+                    overflowX: 'hidden',
+                    paddingTop: '10px',
+                    paddingBottom: '10px',
+                    paddingLeft: '27px',
+                    paddingRight: '27px',
+                } }, children)),
+            React.createElement(Footer, { logoSource: logoSource, text: 'Deix Srl', textURL: 'https://deixsrl.com' }))));
+};
+export default StandardLayout;

package/lib/src/components/layout/StandardLayout/translations.json

@@ -0,0 +1,8 @@
+{
+    "errorPageLoad": {
+        "de": "Ups! Beim Abrufen der Seiteninformationen ist ein Fehler aufgetreten.",
+        "en": "Oops! Something went wrong retrieving page information.",
+        "fr": "Oups! Quelque chose s'est mal passé lors de la récupération des informations de la page.",
+        "it": "Oops! Qualcosa è andato storto nel recupero delle informazioni sulla pagina."
+    }
+}

package/lib/src/components/layout/components/AppLogo/AppLogo.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ImageProps } from 'next/image';
+interface LogoProps {
+    /**
+     * Name of the app to be shown next to the logo.
+     */
+    name?: string;
+    /**
+     * Logo image source.
+     */
+    logoSource: ImageProps['src'];
+    /**
+     * Whether the sidebar is open or not.
+     */
+    open: boolean;
+}
+declare const AppLogo: React.FC<LogoProps>;
+export default AppLogo;
+//# sourceMappingURL=AppLogo.d.ts.map

package/lib/src/components/layout/components/AppLogo/AppLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppLogo.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/components/AppLogo/AppLogo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAO/C,UAAU,SAAS;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;CACf;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAqChC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/src/components/layout/components/AppLogo/AppLogo.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Image from 'next/image';
+import { Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import packageInfo from '../../../../../package.json';
+var AppLogo = function (_a) {
+    var _b = _a.name, name = _b === void 0 ? packageInfo.name.charAt(0).toUpperCase() + packageInfo.name.slice(1) : _b, open = _a.open, logoSource = _a.logoSource;
+    var muiTheme = useTheme();
+    return (React.createElement("div", { style: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            justifyContent: 'center',
+        } },
+        logoSource && (React.createElement(Image, { src: logoSource, alt: 'logo', width: 36, height: 36 })),
+        open && (React.createElement(React.Fragment, null,
+            React.createElement(Typography, { variant: 'h4', sx: {
+                    background: muiTheme.palette.gradient.main,
+                    backgroundClip: 'text',
+                    WebkitBackgroundClip: 'text',
+                    WebkitTextFillColor: 'transparent',
+                    marginLeft: '8px',
+                } }, name)))));
+};
+export default AppLogo;

package/lib/src/components/layout/components/Footer/Footer.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ImageProps } from 'next/image';
+export interface FooterProps {
+    /**
+     * Logo image source.
+     */
+    logoSource?: ImageProps['src'];
+    /**
+     * Text to be shown next to the logo.
+     */
+    text?: string;
+    /**
+     * Link to be rerouted to when the text is clicked.
+     */
+    textURL?: string;
+    /**
+     * The URL for the backend API. This will send a request to /info for the name and version of the API and show this information. If this is not provided or if the fetch fails nothing is shown in the footer.
+     */
+    apiURL?: string;
+    /**
+     * A React component to be shown underneath the main footer.
+     */
+    children?: unknown;
+}
+declare const Footer: React.FC<FooterProps>;
+export default Footer;
+//# sourceMappingURL=Footer.d.ts.map

package/lib/src/components/layout/components/Footer/Footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/components/Footer/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAc/C,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+EjC,CAAC;AAEF,eAAe,MAAM,CAAC"}