@uxf/cms 10.0.0-beta.68 → 10.0.0-beta.69

package/lib/menu/mobile-bar.js

@@ -9,8 +9,9 @@ const link_1 = __importDefault(require("next/link"));
 const icon_1 = require("@uxf/ui/icon");
 const sub_menu_mobile_1 = require("./ui/sub-menu/sub-menu-mobile");
 const config_1 = require("../../config");
-const avatar_1 = require("@uxf/ui/avatar");
+const avatar_1 = require("../../ui/avatar");
 const cx_1 = require("@uxf/core/utils/cx");
+const get_avatar_user_letters_1 = require("../../ui/avatar/get-avatar-user-letters");
 const MobileBar = (props) => {
     const useLoggedUser = config_1.container.get("useLoggedUser");
     const loggedUser = useLoggedUser();
@@ -36,8 +37,7 @@ const MobileBar = (props) => {
             var _a, _b, _c, _d;
             if (item.children.length) {
                 return (react_1.default.createElement(sub_menu_mobile_1.SubMenuMobile, { key: index, content: item.children, title: item.title },
-                    react_1.default.createElement("button", { type: "button", className: buttonClassName }, item.userMenuData ? (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(avatar_1.Avatar, { className: "uxf-cms-mobile-bar__avatar", src: item.userMenuData.avatar }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("button", { type: "button", className: buttonClassName }, item.userMenuData ? (react_1.default.createElement(avatar_1.Avatar, { className: "uxf-cms-mobile-bar__avatar", letters: (0, get_avatar_user_letters_1.getAvatarUserLetters)(item.userMenuData.name), size: "sm", src: item.userMenuData.avatar, variant: "rounded" })) : (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(icon_1.Icon, { name: (_a = item.icon) !== null && _a !== void 0 ? _a : "", size: 24 }),
                         react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16, className: "uxf-cms-mobile-bar__caret" }))))));
             }

package/lib/menu/model.d.ts

@@ -3,9 +3,10 @@ import { Resolver } from "./types";
 import { NextRouter } from "next/router";
 import { IconName } from "@uxf/ui/icon/types";
 import { ReactElement, ReactNode } from "react";
+import { ImageSource } from "@uxf/core/utils/resizer";
 type ItemType = "custom" | "super-section" | "section" | "link";
 export type UserMenuData = {
-    avatar?: string;
+    avatar?: ImageSource;
     name: string;
     roles: string;
 };

package/lib/menu/ui/user-menu.js

@@ -25,17 +25,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserMenu = void 0;
 const react_1 = __importStar(require("react"));
-const avatar_1 = require("@uxf/ui/avatar");
 const icon_1 = require("@uxf/ui/icon");
 const list_item_1 = require("./list-item");
 const classes_1 = require("@uxf/core/constants/classes");
+const avatar_1 = require("../../../ui/avatar");
+const get_avatar_user_letters_1 = require("../../../ui/avatar/get-avatar-user-letters");
 const Component = (props) => {
     const [isSubmenuOpen, setIsSubmenuOpen] = (0, react_1.useState)(false);
     const hasSubmenu = props.submenu.length > 0;
     const toggle = hasSubmenu ? () => setIsSubmenuOpen((prev) => !prev) : undefined;
     return (react_1.default.createElement("div", { className: `uxf-cms-user-menu ${isSubmenuOpen ? classes_1.CLASSES.IS_OPEN : ""}` },
         react_1.default.createElement("button", { className: "uxf-cms-user-menu__button", onClick: toggle },
-            react_1.default.createElement(avatar_1.Avatar, { className: "uxf-cms-user-menu__avatar", src: props.avatar }),
+            react_1.default.createElement(avatar_1.Avatar, { className: "uxf-cms-user-menu__avatar", letters: (0, get_avatar_user_letters_1.getAvatarUserLetters)(props.name), size: "sm", src: props.avatar, variant: "rounded" }),
             react_1.default.createElement("div", { className: "uxf-cms-user-menu__label-wrapper" },
                 react_1.default.createElement("div", { className: "uxf-cms-user-menu__name" }, props.name),
                 react_1.default.createElement("div", { className: "uxf-cms-user-menu__roles" }, props.roles)),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/cms",
-  "version": "10.0.0-beta.68",
+  "version": "10.0.0-beta.69",
   "description": "UXF Cms",
   "author": "UXFans <dev@uxf.cz>",
   "homepage": "https://gitlab.com/uxf-npm/cms#readme",
@@ -41,12 +41,12 @@
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
     "@uxf/core": "10.0.0-beta.37",
-    "@uxf/data-grid": "10.0.0-beta.68",
-    "@uxf/form": "10.0.0-beta.68",
+    "@uxf/data-grid": "10.0.0-beta.69",
+    "@uxf/form": "10.0.0-beta.69",
     "@uxf/icons-generator": "10.0.0-beta.19",
     "@uxf/router": "10.0.0-beta.15",
-    "@uxf/ui": "10.0.0-beta.68",
-    "@uxf/wysiwyg": "10.0.0-beta.68",
+    "@uxf/ui": "10.0.0-beta.69",
+    "@uxf/wysiwyg": "10.0.0-beta.69",
     "axios": "^1.4.0",
     "axios-hooks": "^4.0.0",
     "coordinate-parser": "1.0.7",
@@ -59,10 +59,10 @@
   },
   "peerDependencies": {
     "@uxf/core": "10.0.0-beta.37",
-    "@uxf/data-grid": "10.0.0-beta.68",
-    "@uxf/form": "10.0.0-beta.68",
-    "@uxf/ui": "10.0.0-beta.68",
-    "@uxf/wysiwyg": "10.0.0-beta.68",
+    "@uxf/data-grid": "10.0.0-beta.69",
+    "@uxf/form": "10.0.0-beta.69",
+    "@uxf/ui": "10.0.0-beta.69",
+    "@uxf/wysiwyg": "10.0.0-beta.69",
     "axios": "^1.4.0",
     "axios-hooks": "^4.0.0",
     "dayjs": "^1.11.7",

package/ui/avatar/avatar.d.ts

@@ -0,0 +1,11 @@
+import { ImageSource } from "@uxf/core/utils/resizer";
+import React, { HTMLAttributes } from "react";
+import { AvatarSize, AvatarVariant } from "./theme";
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, "src"> {
+    alt?: string;
+    size?: AvatarSize;
+    src?: ImageSource | null;
+    letters?: string;
+    variant?: AvatarVariant;
+}
+export declare const Avatar: React.MemoExoticComponent<React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>>;

package/ui/avatar/avatar.js

@@ -0,0 +1,47 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const raster_image_1 = require("@uxf/ui/raster-image");
+const react_1 = __importStar(require("react"));
+const AVATAR_SIZES = {
+    sm: 40,
+    default: 88,
+    lg: 120,
+};
+const Component = (props, ref) => {
+    // eslint-disable-next-line react/destructuring-assignment
+    const { alt, className, size = "default", src, letters, variant = "default", ...restProps } = props;
+    const avatarClassName = (0, cx_1.cx)("cms-avatar", `cms-avatar--size-${size}`, `cms-avatar--variant-${variant}`, className);
+    const imgAlt = alt !== null && alt !== void 0 ? alt : "";
+    if (src) {
+        return (react_1.default.createElement("span", { className: avatarClassName, ref: ref, ...restProps },
+            react_1.default.createElement(raster_image_1.RasterImage, { alt: imgAlt, className: "cms-avatar__image", height: AVATAR_SIZES[size], loading: "lazy", mode: "cover", src: src, width: AVATAR_SIZES[size] })));
+    }
+    return (react_1.default.createElement("div", { className: avatarClassName, ...restProps }, letters));
+};
+exports.Avatar = (0, react_1.memo)((0, react_1.forwardRef)(Component));
+exports.Avatar.displayName = "CmsAvatar";

package/ui/avatar/get-avatar-user-letters.d.ts

@@ -0,0 +1 @@
+export declare function getAvatarUserLetters(name: string): string;

package/ui/avatar/get-avatar-user-letters.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAvatarUserLetters = void 0;
+function getAvatarUserLetters(name) {
+    let letters = name
+        .split(" ")
+        .slice(0, 2)
+        .filter((i) => i);
+    if (letters.length === 1) {
+        letters = letters[0].slice(0, 2);
+    }
+    else {
+        letters = letters.map((i) => i.slice(0, 1)).join("");
+    }
+    return letters.toUpperCase();
+}
+exports.getAvatarUserLetters = getAvatarUserLetters;

package/ui/avatar/index.d.ts

@@ -0,0 +1,3 @@
+export { Avatar } from "./avatar";
+export type { AvatarProps } from "./avatar";
+export type { AvatarSize, AvatarVariant } from "./theme";

package/ui/avatar/index.js

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

package/ui/avatar/theme.d.ts

@@ -0,0 +1,11 @@
+export interface AvatarVariants {
+    default: true;
+    rounded: true;
+}
+export type AvatarVariant = keyof AvatarVariants;
+export interface AvatarSizes {
+    sm: true;
+    default: true;
+    lg: true;
+}
+export type AvatarSize = keyof AvatarSizes;

package/ui/avatar/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ui/styles/avatar.css

@@ -0,0 +1,50 @@
+.cms-avatar {
+    --bg-color: theme("colors.primary.DEFAULT");
+
+    align-items: center;
+    background-color: var(--bg-color);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border-radius: var(--border-radius);
+    color: theme("colors.white");
+    display: inline-flex;
+    flex-shrink: 0;
+    height: var(--size);
+    justify-content: center;
+    position: relative;
+    text-transform: uppercase;
+    width: var(--size);
+
+    &__image {
+        border-radius: inherit;
+        height: 100%;
+        width: 100%;
+    }
+
+    .uxf-raster-image__img {
+        border-radius: inherit;
+    }
+
+    &--variant-rounded {
+        --border-radius: 999px;
+    }
+
+    &--size-sm {
+        --size: theme("avatarSize.sm");
+
+        font-size: theme("fontSize.body");
+    }
+
+    &--size-default {
+        --size: theme("avatarSize.default");
+
+        font-size: 20px;
+    }
+
+    &--size-lg {
+        --size: theme("avatarSize.lg");
+
+        font-size: theme("fontSize.desktopH3");
+    }
+}

package/utils/styles.css

@@ -1,3 +1,4 @@
+@import url("./../ui/styles/avatar.css");
 @import url("./../ui/styles/layout.css");
 @import url("./../ui/styles/login-layout.css");
 @import url("./../ui/styles/sidebar.css");

package/utils/tailwind.config.js

@@ -3,6 +3,11 @@ module.exports = {
     presets: [require("@uxf/ui/utils/tailwind-config")],
     content: [],
     theme: {
+        avatarSize: {
+            sm: "40px",
+            default: "88px",
+            lg: "120px",
+        },
         extend: {
             colors: {
                 dataGridPrimary: "#140939",