@snack-uikit/avatar 0.6.2 → 0.6.3-preview-d96c83e8.0

package/dist/cjs/components/Avatar.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Avatar = Avatar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const status_1 = require("@snack-uikit/status");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("./constants");
+const styles_module_scss_1 = __importDefault({});
+const utils_2 = require("./utils");
+const statusIndicatorSizeMap = {
+  [constants_1.SIZE.Xxs]: 'xxs',
+  [constants_1.SIZE.Xs]: 'xs',
+  [constants_1.SIZE.S]: 'xs',
+  [constants_1.SIZE.M]: 'm',
+  [constants_1.SIZE.L]: 'm',
+  [constants_1.SIZE.Xl]: 'l',
+  [constants_1.SIZE.Xxl]: 'l'
+};
+/**
+ * Компонент отображения аватара пользователя.
+ * @constructor
+ */
+function Avatar(_a) {
+  var {
+      name,
+      appearance = constants_1.APPEARANCE.Red,
+      size = constants_1.SIZE.S,
+      shape = constants_1.SHAPE.Round,
+      indicator,
+      showTwoSymbols,
+      src,
+      className
+    } = _a,
+    rest = __rest(_a, ["name", "appearance", "size", "shape", "indicator", "showTwoSymbols", "src", "className"]);
+  const [imageError, setImageError] = (0, react_1.useState)(false);
+  const numberOfSymbols = size !== constants_1.SIZE.Xxs && showTwoSymbols ? 2 : 1;
+  (0, react_1.useEffect)(() => {
+    setImageError(false);
+  }, [src]);
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.avatar, className)
+  }, (0, utils_1.extractSupportProps)(rest), {
+    "data-size": size,
+    "data-appearance": appearance,
+    "data-shape": shape,
+    children: [src && !imageError ? (0, jsx_runtime_1.jsx)("img", {
+      "data-test-id": 'image',
+      className: styles_module_scss_1.default.image,
+      src: src,
+      onError: () => setImageError(true),
+      alt: ''
+    }) : (0, jsx_runtime_1.jsx)("div", {
+      "data-test-id": 'abbreviation',
+      children: (0, utils_2.getAbbreviation)(name, numberOfSymbols)
+    }), indicator && (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.indicatorWrapper,
+      children: (0, jsx_runtime_1.jsx)(status_1.StatusIndicator, {
+        "data-test-id": 'indicator',
+        appearance: indicator,
+        size: statusIndicatorSizeMap[size]
+      })
+    })]
+  }));
+}

package/dist/cjs/components/constants.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SHAPE = exports.SIZE = exports.APPEARANCE = void 0;
+exports.APPEARANCE = {
+  Red: 'red',
+  Orange: 'orange',
+  Yellow: 'yellow',
+  Green: 'green',
+  Blue: 'blue',
+  Violet: 'violet',
+  Pink: 'pink',
+  Neutral: 'neutral'
+};
+exports.SIZE = {
+  Xxs: 'xxs',
+  Xs: 'xs',
+  S: 's',
+  M: 'm',
+  L: 'l',
+  Xl: 'xl',
+  Xxl: 'xxl'
+};
+exports.SHAPE = {
+  Round: 'round',
+  Square: 'square'
+};

package/dist/cjs/components/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Avatar"), exports);

package/dist/cjs/components/types.js

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

package/dist/cjs/components/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAbbreviation = void 0;
+const SPACE = ' ';
+const getAbbreviation = (str, abbreviationLength) => {
+  var _a;
+  const trimStr = str.replace(/[^a-zа-яё\d\s]/gi, '').trim();
+  if (!trimStr || trimStr.length < abbreviationLength) {
+    return trimStr.toUpperCase();
+  }
+  const strParts = trimStr.split(SPACE);
+  let abbreviation = trimStr;
+  if (strParts.length > 1) {
+    const firstLetter = strParts[0].charAt(0);
+    const secondLetter = (_a = strParts[strParts.length - 1]) === null || _a === void 0 ? void 0 : _a.charAt(0);
+    abbreviation = `${firstLetter}${secondLetter}`.toUpperCase();
+  }
+  return abbreviation.slice(0, abbreviationLength).toUpperCase();
+};
+exports.getAbbreviation = getAbbreviation;

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./components"), exports);

package/dist/esm/components/Avatar.d.ts

@@ -0,0 +1,26 @@
+import { StatusIndicatorProps } from '@snack-uikit/status';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Appearance, Shape, Size } from './types';
+export type AvatarProps = WithSupportProps<{
+    /** Имя */
+    name: string;
+    /** src аттрибут изображеня */
+    src?: string;
+    /** Внешний вид */
+    appearance?: Appearance;
+    /** Размер */
+    size?: Size;
+    /** Форма: круглая или квадратная */
+    shape?: Shape;
+    /** Индикатор */
+    indicator?: StatusIndicatorProps['appearance'];
+    /** Отображение двух заглавных символов имени */
+    showTwoSymbols?: boolean;
+    /** CSS-класс */
+    className?: string;
+}>;
+/**
+ * Компонент отображения аватара пользователя.
+ * @constructor
+ */
+export declare function Avatar({ name, appearance, size, shape, indicator, showTwoSymbols, src, className, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/constants.d.ts

@@ -0,0 +1,23 @@
+export declare const APPEARANCE: {
+    readonly Red: "red";
+    readonly Orange: "orange";
+    readonly Yellow: "yellow";
+    readonly Green: "green";
+    readonly Blue: "blue";
+    readonly Violet: "violet";
+    readonly Pink: "pink";
+    readonly Neutral: "neutral";
+};
+export declare const SIZE: {
+    readonly Xxs: "xxs";
+    readonly Xs: "xs";
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+    readonly Xl: "xl";
+    readonly Xxl: "xxl";
+};
+export declare const SHAPE: {
+    readonly Round: "round";
+    readonly Square: "square";
+};

package/dist/esm/components/index.js

@@ -0,0 +1 @@
+export * from './Avatar';

package/dist/esm/components/types.d.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { APPEARANCE, SHAPE, SIZE } from './constants';
+export type Appearance = ValueOf<typeof APPEARANCE>;
+export type Size = ValueOf<typeof SIZE>;
+export type Shape = ValueOf<typeof SHAPE>;

package/dist/esm/components/utils.d.ts

@@ -0,0 +1 @@
+export declare const getAbbreviation: (str: string, abbreviationLength: 1 | 2) => string;

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * from './components';

package/package.json

@@ -4,15 +4,16 @@
     "access": "public"
   },
   "title": "Avatar",
-  "version": "0.6.2",
+  "version": "0.6.3-preview-d96c83e8.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "Пользовательский автар (с инициалами либо картинкой)",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/avatar",
   "repository": {
     "type": "git",
@@ -24,16 +25,17 @@
     "Anna Kozlova <apkozlova@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@snack-uikit/status": "0.5.3",
-    "@snack-uikit/utils": "3.4.0",
+    "@snack-uikit/status": "0.5.4-preview-d96c83e8.0",
+    "@snack-uikit/utils": "3.4.1-preview-d96c83e8.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "f9212fe04b0dbba9bedea1bb3a034ab612287841"
+  "gitHead": "7ad2685e79ccef7528ade40fe4e2a5d4e609a22f"
 }

package/dist/components/styles.module.css

@@ -1,182 +0,0 @@
-.avatar{
-  position:relative;
-  display:inline-flex;
-  flex-shrink:0;
-  align-items:center;
-  justify-content:center;
-}
-.avatar[data-appearance=red]{
-  color:var(--sys-red-text-main, #7a2d2d);
-  background-color:var(--sys-red-decor-default, #fdd6cd);
-}
-.avatar[data-appearance=orange]{
-  color:var(--sys-orange-text-main, #884c23);
-  background-color:var(--sys-orange-decor-default, #fed8b8);
-}
-.avatar[data-appearance=yellow]{
-  color:var(--sys-yellow-text-main, #815f19);
-  background-color:var(--sys-yellow-decor-default, #f0dfb1);
-}
-.avatar[data-appearance=green]{
-  color:var(--sys-green-text-main, #3d6035);
-  background-color:var(--sys-green-decor-default, #d2ead0);
-}
-.avatar[data-appearance=blue]{
-  color:var(--sys-blue-text-main, #2b537e);
-  background-color:var(--sys-blue-decor-default, #d6e2f4);
-}
-.avatar[data-appearance=violet]{
-  color:var(--sys-violet-text-main, #59446a);
-  background-color:var(--sys-violet-decor-default, #e6dcf3);
-}
-.avatar[data-appearance=pink]{
-  color:var(--sys-pink-text-main, #754158);
-  background-color:var(--sys-pink-decor-default, #f5d9e1);
-}
-.avatar[data-appearance=neutral]{
-  color:var(--sys-neutral-text-main, #41424e);
-  background-color:var(--sys-neutral-decor-default, #dde0ea);
-}
-.avatar[data-size=xxs]{
-  font-family:var(--sans-label-s-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-s-font-weight, Semibold);
-  line-height:var(--sans-label-s-line-height, 14px);
-  font-size:var(--sans-label-s-font-size, 11px);
-  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
-}
-.avatar[data-size=xxs][data-shape=round]{
-  border-radius:var(--radius-avatar-round-xxs, 8px);
-  width:var(--size-avatar-xxs, 16px);
-  height:var(--size-avatar-xxs, 16px);
-}
-.avatar[data-size=xxs][data-shape=square]{
-  border-radius:var(--radius-avatar-square-xxs, 4px);
-  width:var(--size-avatar-xxs, 16px);
-  height:var(--size-avatar-xxs, 16px);
-}
-.avatar[data-size=xs]{
-  font-family:var(--sans-label-s-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-s-font-weight, Semibold);
-  line-height:var(--sans-label-s-line-height, 14px);
-  font-size:var(--sans-label-s-font-size, 11px);
-  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
-}
-.avatar[data-size=xs][data-shape=round]{
-  border-radius:var(--radius-avatar-round-xs, 16px);
-  width:var(--size-avatar-xs, 24px);
-  height:var(--size-avatar-xs, 24px);
-}
-.avatar[data-size=xs][data-shape=square]{
-  border-radius:var(--radius-avatar-square-xs, 4px);
-  width:var(--size-avatar-xs, 24px);
-  height:var(--size-avatar-xs, 24px);
-}
-.avatar[data-size=s]{
-  font-family:var(--sans-label-l-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-l-font-weight, Semibold);
-  line-height:var(--sans-label-l-line-height, 20px);
-  font-size:var(--sans-label-l-font-size, 14px);
-  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
-}
-.avatar[data-size=s][data-shape=round]{
-  border-radius:var(--radius-avatar-round-s, 24px);
-  width:var(--size-avatar-s, 32px);
-  height:var(--size-avatar-s, 32px);
-}
-.avatar[data-size=s][data-shape=square]{
-  border-radius:var(--radius-avatar-square-s, 4px);
-  width:var(--size-avatar-s, 32px);
-  height:var(--size-avatar-s, 32px);
-}
-.avatar[data-size=m]{
-  font-family:var(--sans-title-l-font-family, SB Sans Interface);
-  font-weight:var(--sans-title-l-font-weight, Semibold);
-  line-height:var(--sans-title-l-line-height, 28px);
-  font-size:var(--sans-title-l-font-size, 20px);
-  letter-spacing:var(--sans-title-l-letter-spacing, 0.15px);
-  paragraph-spacing:var(--sans-title-l-paragraph-spacing, 11px);
-}
-.avatar[data-size=m][data-shape=round]{
-  border-radius:var(--radius-avatar-round-m, 24px);
-  width:var(--size-avatar-m, 48px);
-  height:var(--size-avatar-m, 48px);
-}
-.avatar[data-size=m][data-shape=square]{
-  border-radius:var(--radius-avatar-square-m, 8px);
-  width:var(--size-avatar-m, 48px);
-  height:var(--size-avatar-m, 48px);
-}
-.avatar[data-size=l]{
-  font-family:var(--sans-headline-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-headline-m-font-weight, Semibold);
-  line-height:var(--sans-headline-m-line-height, 36px);
-  font-size:var(--sans-headline-m-font-size, 28px);
-  letter-spacing:var(--sans-headline-m-letter-spacing, -0.5px);
-  paragraph-spacing:var(--sans-headline-m-paragraph-spacing, 15.4px);
-}
-.avatar[data-size=l][data-shape=round]{
-  border-radius:var(--radius-avatar-round-l, 32px);
-  width:var(--size-avatar-l, 64px);
-  height:var(--size-avatar-l, 64px);
-}
-.avatar[data-size=l][data-shape=square]{
-  border-radius:var(--radius-avatar-square-l, 16px);
-  width:var(--size-avatar-l, 64px);
-  height:var(--size-avatar-l, 64px);
-}
-.avatar[data-size=xl]{
-  font-family:var(--sans-display-s-font-family, SB Sans Interface);
-  font-weight:var(--sans-display-s-font-weight, Semibold);
-  line-height:var(--sans-display-s-line-height, 48px);
-  font-size:var(--sans-display-s-font-size, 40px);
-  letter-spacing:var(--sans-display-s-letter-spacing, -0.5px);
-  paragraph-spacing:var(--sans-display-s-paragraph-spacing, 22px);
-}
-.avatar[data-size=xl][data-shape=round]{
-  border-radius:var(--radius-avatar-round-xl, 48px);
-  width:var(--size-avatar-xl, 88px);
-  height:var(--size-avatar-xl, 88px);
-}
-.avatar[data-size=xl][data-shape=square]{
-  border-radius:var(--radius-avatar-square-xl, 24px);
-  width:var(--size-avatar-xl, 88px);
-  height:var(--size-avatar-xl, 88px);
-}
-.avatar[data-size=xxl]{
-  font-family:var(--sans-display-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-display-m-font-weight, Semibold);
-  line-height:var(--sans-display-m-line-height, 60px);
-  font-size:var(--sans-display-m-font-size, 48px);
-  letter-spacing:var(--sans-display-m-letter-spacing, -0.5px);
-  paragraph-spacing:var(--sans-display-m-paragraph-spacing, 26.4px);
-}
-.avatar[data-size=xxl][data-shape=round]{
-  border-radius:var(--radius-avatar-round-xxl, 64px);
-  width:var(--size-avatar-xxl, 112px);
-  height:var(--size-avatar-xxl, 112px);
-}
-.avatar[data-size=xxl][data-shape=square]{
-  border-radius:var(--radius-avatar-square-xxl, 24px);
-  width:var(--size-avatar-xxl, 112px);
-  height:var(--size-avatar-xxl, 112px);
-}
-
-.image{
-  width:100%;
-  height:100%;
-  -o-object-fit:cover;
-     object-fit:cover;
-  -o-object-position:center;
-     object-position:center;
-  border-radius:inherit;
-}
-
-.indicatorWrapper{
-  position:absolute;
-  right:0;
-  bottom:0;
-  display:inline-flex;
-}