@snack-uikit/counter 0.6.4 → 0.6.5-preview-d96c83e8.0

package/dist/cjs/components/Counter.js

@@ -0,0 +1,52 @@
+"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.Counter = Counter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("./constants");
+const styles_module_scss_1 = __importDefault({});
+const utils_2 = require("./utils");
+/** Компонент счетчик */
+function Counter(_a) {
+  var {
+      value,
+      appearance = constants_1.APPEARANCE.Primary,
+      variant = constants_1.VARIANT.Count,
+      size = constants_1.SIZE.S,
+      plusLimit = constants_1.DEFAULT_PLUS_LIMIT,
+      color = constants_1.COLOR.Accent,
+      className
+    } = _a,
+    rest = __rest(_a, ["value", "appearance", "variant", "size", "plusLimit", "color", "className"]);
+  const formattedValue = (0, utils_2.formatValue)({
+    value,
+    variant,
+    plusLimit
+  });
+  return (0, jsx_runtime_1.jsx)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.counter, className)
+  }, (0, utils_1.extractSupportProps)(rest), {
+    "data-size": size,
+    "data-variant": variant,
+    "data-appearance": appearance,
+    "data-color": color,
+    children: formattedValue
+  }));
+}

package/dist/cjs/components/constants.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_KEY_POSTFIX = exports.DEFAULT_KEY_LIMIT = exports.DEFAULT_PLUS_LIMIT = exports.COLOR = exports.SIZE = exports.VARIANT = exports.APPEARANCE = void 0;
+exports.APPEARANCE = {
+  Primary: 'primary',
+  Neutral: 'neutral',
+  Red: 'red'
+};
+exports.VARIANT = {
+  Count: 'count',
+  CountPlus: 'count-plus',
+  CountK: 'count-k'
+};
+exports.SIZE = {
+  S: 's',
+  M: 'm'
+};
+exports.COLOR = {
+  Accent: 'accent',
+  Decor: 'decor'
+};
+exports.DEFAULT_PLUS_LIMIT = 10;
+exports.DEFAULT_KEY_LIMIT = 1000;
+exports.DEFAULT_KEY_POSTFIX = 'K';

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("./Counter"), 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,40 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatValue = formatValue;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("./constants");
+const styles_module_scss_1 = __importDefault({});
+function formatValue(_ref) {
+  let {
+    value,
+    variant,
+    plusLimit
+  } = _ref;
+  if (variant === constants_1.VARIANT.Count) {
+    return value;
+  }
+  if (variant === constants_1.VARIANT.CountPlus) {
+    return value < plusLimit ? value : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+      children: [plusLimit - 1, (0, jsx_runtime_1.jsx)("span", {
+        className: styles_module_scss_1.default.plus,
+        children: "+"
+      })]
+    });
+  }
+  if (variant === constants_1.VARIANT.CountK) {
+    return value < constants_1.DEFAULT_KEY_LIMIT ? value : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+      children: [Math.round(value / constants_1.DEFAULT_KEY_LIMIT), (0, jsx_runtime_1.jsx)("span", {
+        className: styles_module_scss_1.default.key,
+        children: constants_1.DEFAULT_KEY_POSTFIX
+      })]
+    });
+  }
+}

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/Counter.d.ts

@@ -0,0 +1,20 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Appearance, Color, Size, Variant } from './types';
+export type CounterProps = WithSupportProps<{
+    /** Значение */
+    value: number;
+    /** Внешний вид */
+    appearance?: Appearance;
+    /** Вариант */
+    variant?: Variant;
+    /** Размер */
+    size?: Size;
+    /** Порог сокращения значения в формат v+. Например `1500` -> `999+` для 1000 */
+    plusLimit?: number;
+    /** CSS-класс */
+    className?: string;
+    /** Семантический цвет */
+    color?: Color;
+}>;
+/** Компонент счетчик */
+export declare function Counter({ value, appearance, variant, size, plusLimit, color, className, ...rest }: CounterProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+export declare const APPEARANCE: {
+    readonly Primary: "primary";
+    readonly Neutral: "neutral";
+    readonly Red: "red";
+};
+export declare const VARIANT: {
+    readonly Count: "count";
+    readonly CountPlus: "count-plus";
+    readonly CountK: "count-k";
+};
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+};
+export declare const COLOR: {
+    readonly Accent: "accent";
+    readonly Decor: "decor";
+};
+export declare const DEFAULT_PLUS_LIMIT = 10;
+export declare const DEFAULT_KEY_LIMIT = 1000;
+export declare const DEFAULT_KEY_POSTFIX = "K";

package/dist/esm/components/index.js

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

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

@@ -0,0 +1,6 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { APPEARANCE, COLOR, SIZE, VARIANT } from './constants';
+export type Appearance = ValueOf<typeof APPEARANCE>;
+export type Size = ValueOf<typeof SIZE>;
+export type Variant = ValueOf<typeof VARIANT>;
+export type Color = ValueOf<typeof COLOR>;

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { Variant } from './types';
+export declare function formatValue({ value, variant, plusLimit, }: {
+    value: number;
+    variant: Variant;
+    plusLimit: number;
+}): ReactNode;

package/dist/esm/index.js

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

package/package.json

@@ -4,15 +4,16 @@
     "access": "public"
   },
   "title": "Counter",
-  "version": "0.6.4",
+  "version": "0.6.5-preview-d96c83e8.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "Компонент для отображения количесвта уведомлений (доступен в 3 вариантах: 9, 9+, 9K)",
-  "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/counter",
   "repository": {
     "type": "git",
@@ -24,7 +25,8 @@
     "Anna Kozlova <apkozlova@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -32,8 +34,8 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/utils": "3.4.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,100 +0,0 @@
-.counter{
-  display:inline-flex;
-  flex-shrink:0;
-  align-items:center;
-  justify-content:center;
-  box-sizing:border-box;
-  width:-moz-max-content;
-  width:max-content;
-  border:0 solid transparent;
-}
-.counter[data-color=accent][data-appearance=primary]{
-  color:var(--sys-primary-on-accent, #fdfbff);
-  background-color:var(--sys-primary-accent-default, #794ed3);
-  border-color:var(--sys-neutral-background1-level, #fdfdfd);
-}
-.counter[data-color=accent][data-appearance=neutral]{
-  color:var(--sys-neutral-on-accent, #ffffff);
-  background-color:var(--sys-neutral-accent-default, #787b8a);
-  border-color:var(--sys-neutral-background1-level, #fdfdfd);
-}
-.counter[data-color=accent][data-appearance=red]{
-  color:var(--sys-red-on-accent, #fffbf9);
-  background-color:var(--sys-red-accent-default, #cb3f3e);
-  border-color:var(--sys-neutral-background1-level, #fdfdfd);
-}
-.counter[data-color=decor][data-appearance=primary]{
-  color:var(--sys-primary-text-main, #382a62);
-  background-color:var(--sys-primary-decor-default, #ebdefd);
-  border-color:var(--sys-neutral-background1-level, #fdfdfd);
-}
-.counter[data-color=decor][data-appearance=neutral]{
-  color:var(--sys-neutral-text-main, #41424e);
-  background-color:var(--sys-neutral-decor-default, #dde0ea);
-  border-color:var(--sys-neutral-background1-level, #fdfdfd);
-}
-.counter[data-color=decor][data-appearance=red]{
-  color:var(--sys-red-text-main, #7a2d2d);
-  background-color:var(--sys-red-decor-default, #fdd6cd);
-  border-color:var(--sys-neutral-background1-level, #fdfdfd);
-}
-.counter[data-size=s]{
-  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);
-  border-radius:var(--radius-counter-s, 8px);
-  height:var(--size-counter-s-height, 16px);
-  min-width:var(--size-counter-s-minimal-width, 16px);
-  padding-right:var(--space-counter-s, 2.5px);
-  padding-left:var(--space-counter-s, 2.5px);
-  border-width:var(--border-width-counter-single, 1.5px);
-}
-.counter[data-size=s] .plus{
-  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);
-}
-.counter[data-size=s] .key{
-  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);
-}
-.counter[data-size=m]{
-  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);
-  border-radius:var(--radius-counter-m, 16px);
-  height:var(--size-counter-m-height, 24px);
-  min-width:var(--size-counter-m-minimal-width, 24px);
-  padding-right:var(--space-counter-m, 4.5px);
-  padding-left:var(--space-counter-m, 4.5px);
-  border-width:var(--border-width-counter-single, 1.5px);
-}
-.counter[data-size=m] .plus{
-  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);
-}
-.counter[data-size=m] .key{
-  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);
-}