@snack-uikit/avatar 0.4.1 → 0.5.1-preview-993a9cfb.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.5.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
 ## 0.4.1 (2023-12-06)
 
 ### Only dependencies have been changed

package/README.md

@@ -8,19 +8,19 @@
 ## Example
 
 ```typescript jsx
-import {Avatar} from "@snack-uikit/avatar";
+import { Avatar } from "@snack-uikit/avatar";
 
-<Avatar 
+<Avatar
   name="Name Surname"
   src="path-to-avatar/image.jpg"
-  size={Avatar.sizes.Xl}
+  size='xl'
 />
 
 <Avatar 
   name="Name Surname"
-  appearance={Avatar.appearances.Pink}
-  indicator={Avatar.indicators.Violet}
-  shape={Avatar.shapes.Square}
+  appearance='pink'
+  indicator='violet'
+  shape='square'
   showTwoSymbols={true}
 />
 ```
@@ -34,10 +34,10 @@ import {Avatar} from "@snack-uikit/avatar";
 |------|------|---------------|-------------|
 | name* | `string` | - | Имя |
 | src | `string` | - | src аттрибут изображеня |
-| appearance | enum Appearance: `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"`, `"neutral"` | Avatar.appearances.Red | Внешний вид |
-| size | enum Size: `"xxs"`, `"xs"`, `"s"`, `"m"`, `"l"`, `"xl"`, `"xxl"` | Avatar.sizes.S | Размер |
-| shape | enum Shape: `"round"`, `"square"` | Avatar.shapes.Round | Форма: круглая или квадратная |
-| indicator | enum Appearance: `"primary"`, `"neutral"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | - | Индикатор |
+| appearance | enum Appearance: `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"`, `"neutral"` | red | Внешний вид |
+| size | enum Size: `"xxs"`, `"xs"`, `"s"`, `"m"`, `"l"`, `"xl"`, `"xxl"` | s | Размер |
+| shape | enum Shape: `"round"`, `"square"` | round | Форма: круглая или квадратная |
+| indicator | enum Appearance: `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"`, `"neutral"`, `"primary"` | - | Индикатор |
 | showTwoSymbols | `boolean` | - | Отображение двух заглавных символов имени |
 | className | `string` | - | CSS-класс |
 

package/dist/components/Avatar.d.ts

@@ -1,6 +1,6 @@
 import { StatusIndicatorProps } from '@snack-uikit/status';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Appearance, Shape, Size } from './constants';
+import { Appearance, Shape, Size } from './types';
 export type AvatarProps = WithSupportProps<{
     /** Имя */
     name: string;
@@ -24,9 +24,3 @@ export type AvatarProps = WithSupportProps<{
  * @constructor
  */
 export declare function Avatar({ name, appearance, size, shape, indicator, showTwoSymbols, src, className, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Avatar {
-    var sizes: typeof Size;
-    var appearances: typeof Appearance;
-    var shapes: typeof Shape;
-    var indicators: typeof import("@snack-uikit/status/dist/constants").Appearance;
-}

package/dist/components/Avatar.js

@@ -14,32 +14,28 @@ import cn from 'classnames';
 import { useEffect, useState } from 'react';
 import { StatusIndicator } from '@snack-uikit/status';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { Appearance, Shape, Size } from './constants';
+import { APPEARANCE, SHAPE, SIZE } from './constants';
 import styles from './styles.module.css';
 import { getAbbreviation } from './utils';
 const statusIndicatorSizeMap = {
-    [Size.Xxs]: StatusIndicator.sizes.Xxs,
-    [Size.Xs]: StatusIndicator.sizes.Xs,
-    [Size.S]: StatusIndicator.sizes.Xs,
-    [Size.M]: StatusIndicator.sizes.M,
-    [Size.L]: StatusIndicator.sizes.M,
-    [Size.Xl]: StatusIndicator.sizes.L,
-    [Size.Xxl]: StatusIndicator.sizes.L,
+    [SIZE.Xxs]: 'xxs',
+    [SIZE.Xs]: 'xs',
+    [SIZE.S]: 'xs',
+    [SIZE.M]: 'm',
+    [SIZE.L]: 'm',
+    [SIZE.Xl]: 'l',
+    [SIZE.Xxl]: 'l',
 };
 /**
  * Компонент отображения аватара пользователя.
  * @constructor
  */
 export function Avatar(_a) {
-    var { name, appearance = Avatar.appearances.Red, size = Avatar.sizes.S, shape = Avatar.shapes.Round, indicator, showTwoSymbols, src, className } = _a, rest = __rest(_a, ["name", "appearance", "size", "shape", "indicator", "showTwoSymbols", "src", "className"]);
+    var { name, appearance = APPEARANCE.Red, size = SIZE.S, shape = SHAPE.Round, indicator, showTwoSymbols, src, className } = _a, rest = __rest(_a, ["name", "appearance", "size", "shape", "indicator", "showTwoSymbols", "src", "className"]);
     const [imageError, setImageError] = useState(false);
-    const numberOfSymbols = size !== Size.Xxs && showTwoSymbols ? 2 : 1;
+    const numberOfSymbols = size !== SIZE.Xxs && showTwoSymbols ? 2 : 1;
     useEffect(() => {
         setImageError(false);
     }, [src]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.avatar, className) }, extractSupportProps(rest), { "data-size": size, "data-appearance": appearance, "data-shape": shape }, { children: [src && !imageError ? (_jsx("img", { "data-test-id": 'image', className: styles.image, src: src, onError: () => setImageError(true), alt: '' })) : (_jsx("div", Object.assign({ "data-test-id": 'abbreviation' }, { children: getAbbreviation(name, numberOfSymbols) }))), indicator && (_jsx("div", Object.assign({ className: styles.indicatorWrapper }, { children: _jsx(StatusIndicator, { "data-test-id": 'indicator', appearance: indicator, size: statusIndicatorSizeMap[size] }) })))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.avatar, className) }, extractSupportProps(rest), { "data-size": size, "data-appearance": appearance, "data-shape": shape, children: [src && !imageError ? (_jsx("img", { "data-test-id": 'image', className: styles.image, src: src, onError: () => setImageError(true), alt: '' })) : (_jsx("div", { "data-test-id": 'abbreviation', children: getAbbreviation(name, numberOfSymbols) })), indicator && (_jsx("div", { className: styles.indicatorWrapper, children: _jsx(StatusIndicator, { "data-test-id": 'indicator', appearance: indicator, size: statusIndicatorSizeMap[size] }) }))] })));
 }
-Avatar.sizes = Size;
-Avatar.appearances = Appearance;
-Avatar.shapes = Shape;
-Avatar.indicators = StatusIndicator.appearances;

package/dist/components/constants.d.ts

@@ -1,23 +1,23 @@
-export declare enum Appearance {
-    Red = "red",
-    Orange = "orange",
-    Yellow = "yellow",
-    Green = "green",
-    Blue = "blue",
-    Violet = "violet",
-    Pink = "pink",
-    Neutral = "neutral"
-}
-export declare enum Size {
-    Xxs = "xxs",
-    Xs = "xs",
-    S = "s",
-    M = "m",
-    L = "l",
-    Xl = "xl",
-    Xxl = "xxl"
-}
-export declare enum Shape {
-    Round = "round",
-    Square = "square"
-}
+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/components/constants.js

@@ -1,26 +1,23 @@
-export var Appearance;
-(function (Appearance) {
-    Appearance["Red"] = "red";
-    Appearance["Orange"] = "orange";
-    Appearance["Yellow"] = "yellow";
-    Appearance["Green"] = "green";
-    Appearance["Blue"] = "blue";
-    Appearance["Violet"] = "violet";
-    Appearance["Pink"] = "pink";
-    Appearance["Neutral"] = "neutral";
-})(Appearance || (Appearance = {}));
-export var Size;
-(function (Size) {
-    Size["Xxs"] = "xxs";
-    Size["Xs"] = "xs";
-    Size["S"] = "s";
-    Size["M"] = "m";
-    Size["L"] = "l";
-    Size["Xl"] = "xl";
-    Size["Xxl"] = "xxl";
-})(Size || (Size = {}));
-export var Shape;
-(function (Shape) {
-    Shape["Round"] = "round";
-    Shape["Square"] = "square";
-})(Shape || (Shape = {}));
+export const APPEARANCE = {
+    Red: 'red',
+    Orange: 'orange',
+    Yellow: 'yellow',
+    Green: 'green',
+    Blue: 'blue',
+    Violet: 'violet',
+    Pink: 'pink',
+    Neutral: 'neutral',
+};
+export const SIZE = {
+    Xxs: 'xxs',
+    Xs: 'xs',
+    S: 's',
+    M: 'm',
+    L: 'l',
+    Xl: 'xl',
+    Xxl: 'xxl',
+};
+export const SHAPE = {
+    Round: 'round',
+    Square: 'square',
+};

package/dist/components/styles.module.css

@@ -6,36 +6,36 @@
   justify-content:center;
 }
 .avatar[data-appearance=red]{
-  color:var(--sys-red-text-main, #621c1e);
-  background-color:var(--sys-red-decor-default, #ffd8d0);
+  color:var(--sys-red-text-main, #621c1b);
+  background-color:var(--sys-red-decor-default, #fdd6cd);
 }
 .avatar[data-appearance=orange]{
-  color:var(--sys-orange-text-main, #572212);
-  background-color:var(--sys-orange-decor-default, #fedeaf);
+  color:var(--sys-orange-text-main, #643117);
+  background-color:var(--sys-orange-decor-default, #fed8b8);
 }
 .avatar[data-appearance=yellow]{
-  color:var(--sys-yellow-text-main, #54290f);
-  background-color:var(--sys-yellow-decor-default, #f9e5ad);
+  color:var(--sys-yellow-text-main, #5e3d06);
+  background-color:var(--sys-yellow-decor-default, #f0dfb1);
 }
 .avatar[data-appearance=green]{
-  color:var(--sys-green-text-main, #1f392a);
-  background-color:var(--sys-green-decor-default, #cdebe3);
+  color:var(--sys-green-text-main, #323f27);
+  background-color:var(--sys-green-decor-default, #d2ead0);
 }
 .avatar[data-appearance=blue]{
-  color:var(--sys-blue-text-main, #1f3361);
-  background-color:var(--sys-blue-decor-default, #d5e7f6);
+  color:var(--sys-blue-text-main, #153a61);
+  background-color:var(--sys-blue-decor-default, #d6e2f4);
 }
 .avatar[data-appearance=violet]{
-  color:var(--sys-violet-text-main, #51255f);
-  background-color:var(--sys-violet-decor-default, #f8dffc);
+  color:var(--sys-violet-text-main, #502e56);
+  background-color:var(--sys-violet-decor-default, #efd9ef);
 }
 .avatar[data-appearance=pink]{
-  color:var(--sys-pink-text-main, #5e1937);
-  background-color:var(--sys-pink-decor-default, #fddde7);
+  color:var(--sys-pink-text-main, #5e2540);
+  background-color:var(--sys-pink-decor-default, #f5d9e1);
 }
 .avatar[data-appearance=neutral]{
-  color:var(--sys-neutral-text-main, #333333);
-  background-color:var(--sys-neutral-decor-default, #dedede);
+  color:var(--sys-neutral-text-main, #33333b);
+  background-color:var(--sys-neutral-decor-default, #dfe2ec);
 }
 .avatar[data-size=xxs]{
   font-family:var(--sans-label-s-font-family, SB Sans Interface);

package/dist/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/components/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Avatar",
-  "version": "0.4.1",
+  "version": "0.5.1-preview-993a9cfb.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -31,9 +31,9 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@snack-uikit/status": "0.4.1",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/status": "0.5.1-preview-993a9cfb.0",
+    "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "76a159dde7baccf49dc7b11e1fd7abc31424b42f"
+  "gitHead": "a421965dc78af63a8c292e595b3f0a8ff1be86f9"
 }

package/src/components/Avatar.tsx

@@ -4,8 +4,9 @@ import { useEffect, useState } from 'react';
 import { StatusIndicator, StatusIndicatorProps } from '@snack-uikit/status';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { Appearance, Shape, Size } from './constants';
+import { APPEARANCE, SHAPE, SIZE } from './constants';
 import styles from './styles.module.scss';
+import { Appearance, Shape, Size } from './types';
 import { getAbbreviation } from './utils';
 
 export type AvatarProps = WithSupportProps<{
@@ -27,14 +28,14 @@ export type AvatarProps = WithSupportProps<{
   className?: string;
 }>;
 
-const statusIndicatorSizeMap = {
-  [Size.Xxs]: StatusIndicator.sizes.Xxs,
-  [Size.Xs]: StatusIndicator.sizes.Xs,
-  [Size.S]: StatusIndicator.sizes.Xs,
-  [Size.M]: StatusIndicator.sizes.M,
-  [Size.L]: StatusIndicator.sizes.M,
-  [Size.Xl]: StatusIndicator.sizes.L,
-  [Size.Xxl]: StatusIndicator.sizes.L,
+const statusIndicatorSizeMap: Record<Size, StatusIndicatorProps['size']> = {
+  [SIZE.Xxs]: 'xxs',
+  [SIZE.Xs]: 'xs',
+  [SIZE.S]: 'xs',
+  [SIZE.M]: 'm',
+  [SIZE.L]: 'm',
+  [SIZE.Xl]: 'l',
+  [SIZE.Xxl]: 'l',
 };
 
 /**
@@ -43,9 +44,9 @@ const statusIndicatorSizeMap = {
  */
 export function Avatar({
   name,
-  appearance = Avatar.appearances.Red,
-  size = Avatar.sizes.S,
-  shape = Avatar.shapes.Round,
+  appearance = APPEARANCE.Red,
+  size = SIZE.S,
+  shape = SHAPE.Round,
   indicator,
   showTwoSymbols,
   src,
@@ -53,7 +54,7 @@ export function Avatar({
   ...rest
 }: AvatarProps) {
   const [imageError, setImageError] = useState(false);
-  const numberOfSymbols = size !== Size.Xxs && showTwoSymbols ? 2 : 1;
+  const numberOfSymbols = size !== SIZE.Xxs && showTwoSymbols ? 2 : 1;
 
   useEffect(() => {
     setImageError(false);
@@ -80,8 +81,3 @@ export function Avatar({
     </div>
   );
 }
-
-Avatar.sizes = Size;
-Avatar.appearances = Appearance;
-Avatar.shapes = Shape;
-Avatar.indicators = StatusIndicator.appearances;

package/src/components/constants.ts

@@ -1,25 +1,25 @@
-export enum Appearance {
-  Red = 'red',
-  Orange = 'orange',
-  Yellow = 'yellow',
-  Green = 'green',
-  Blue = 'blue',
-  Violet = 'violet',
-  Pink = 'pink',
-  Neutral = 'neutral',
-}
+export const APPEARANCE = {
+  Red: 'red',
+  Orange: 'orange',
+  Yellow: 'yellow',
+  Green: 'green',
+  Blue: 'blue',
+  Violet: 'violet',
+  Pink: 'pink',
+  Neutral: 'neutral',
+} as const;
 
-export enum Size {
-  Xxs = 'xxs',
-  Xs = 'xs',
-  S = 's',
-  M = 'm',
-  L = 'l',
-  Xl = 'xl',
-  Xxl = 'xxl',
-}
+export const SIZE = {
+  Xxs: 'xxs',
+  Xs: 'xs',
+  S: 's',
+  M: 'm',
+  L: 'l',
+  Xl: 'xl',
+  Xxl: 'xxl',
+} as const;
 
-export enum Shape {
-  Round = 'round',
-  Square = 'square',
-}
+export const SHAPE = {
+  Round: 'round',
+  Square: 'square',
+} as const;

package/src/components/types.ts

@@ -0,0 +1,9 @@
+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>;