@hh.ru/magritte-ui-rating-review 1.0.1

package/RatingReview.d.ts

@@ -0,0 +1,37 @@
+export type RatingReviewSize = 'small' | 'medium';
+export interface RatingReviewProps {
+    'data-qa'?: string;
+    /** Значение */
+    value: number | null;
+    'aria-describedby'?: string;
+    /** Размер */
+    size: RatingReviewSize;
+}
+export declare const ICON_BY_SIZE: {
+    readonly small: {
+        readonly filled: import("../../icon/src").IconWrapperComponentSize16<null> & {
+            Skeleton: import("../../icon/src").IconWrapperComponentSize16<{
+                loading?: boolean;
+            }>;
+        };
+        readonly outline: import("../../icon/src").IconWrapperComponentSize16<null> & {
+            Skeleton: import("../../icon/src").IconWrapperComponentSize16<{
+                loading?: boolean;
+            }>;
+        };
+    };
+    readonly medium: {
+        readonly filled: import("../../icon/src").IconWrapperComponentSize24<null> & {
+            Skeleton: import("../../icon/src").IconWrapperComponentSize24<{
+                loading?: boolean;
+            }>;
+        };
+        readonly outline: import("../../icon/src").IconWrapperComponentSize24<null> & {
+            Skeleton: import("../../icon/src").IconWrapperComponentSize24<{
+                loading?: boolean;
+            }>;
+        };
+    };
+};
+export declare const normalizeRatingValue: (value: number | null) => number;
+export declare const RatingReview: import("react").ForwardRefExoticComponent<RatingReviewProps & import("react").RefAttributes<HTMLElement>>;

package/RatingReview.js

@@ -0,0 +1,39 @@
+import './index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import classnames from 'classnames';
+import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
+import { StarFilledSize16, StarOutlinedSize16, StarFilledSize24, StarOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { Text } from '@hh.ru/magritte-ui-typography';
+
+var styles = {"rating-review":"magritte-rating-review___X1HDg_1-0-1","ratingReview":"magritte-rating-review___X1HDg_1-0-1","internal-container":"magritte-internal-container___Tutx7_1-0-1","internalContainer":"magritte-internal-container___Tutx7_1-0-1","size-medium":"magritte-size-medium___wVwww_1-0-1","sizeMedium":"magritte-size-medium___wVwww_1-0-1","disabled":"magritte-disabled___uGGmU_1-0-1","has-rating":"magritte-has-rating___BoybH_1-0-1","hasRating":"magritte-has-rating___BoybH_1-0-1"};
+
+const ICON_BY_SIZE = {
+    small: {
+        filled: StarFilledSize16,
+        outline: StarOutlinedSize16,
+    },
+    medium: {
+        filled: StarFilledSize24,
+        outline: StarOutlinedSize24,
+    },
+};
+const normalizeRatingValue = (value) => value ? Math.round(Math.min(Math.max(value, 0), 5) * 2) / 2 : 0;
+const RatingReview = forwardRef(({ 'data-qa': dataQa, value, 'aria-describedby': describedBy, size = 'small' }, ref) => {
+    const normalizedValue = normalizeRatingValue(value);
+    const isDisabled = useDisabled();
+    const fractionDigits = normalizedValue === 0 ? 0 : 1;
+    const Icon = ICON_BY_SIZE[size][normalizedValue > 0 ? 'filled' : 'outline'];
+    return (jsx("div", { role: "img", "aria-label": normalizedValue.toLocaleString(), "data-qa": dataQa, "aria-describedby": describedBy, ref: ref, className: classnames(styles.ratingReview, {
+            [styles.sizeMedium]: size === 'medium',
+            [styles.hasRating]: normalizedValue > 0,
+            [styles.disabled]: isDisabled,
+        }), children: jsxs("div", { className: styles.internalContainer, "aria-hidden": true, children: [jsx(Icon, {}), jsx(Text, { typography: size === 'small' ? 'subtitle-4-semibold' : 'title-4-semibold', children: normalizedValue.toLocaleString(undefined, {
+                        maximumFractionDigits: fractionDigits,
+                        minimumFractionDigits: fractionDigits,
+                    }) })] }) }));
+});
+RatingReview.displayName = 'RatingReview';
+
+export { ICON_BY_SIZE, RatingReview, normalizeRatingValue };
+//# sourceMappingURL=RatingReview.js.map

package/RatingReview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingReview.js","sources":["../src/RatingReview.tsx"],"sourcesContent":["import { forwardRef, type LegacyRef } from 'react';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport {\n    StarFilledSize16,\n    StarOutlinedSize16,\n    StarFilledSize24,\n    StarOutlinedSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './rating-review.less';\n\nexport type RatingReviewSize = 'small' | 'medium';\n\nexport interface RatingReviewProps {\n    'data-qa'?: string;\n    /** Значение */\n    value: number | null;\n    'aria-describedby'?: string;\n    /** Размер */\n    size: RatingReviewSize;\n}\n\nexport const ICON_BY_SIZE = {\n    small: {\n        filled: StarFilledSize16,\n        outline: StarOutlinedSize16,\n    },\n    medium: {\n        filled: StarFilledSize24,\n        outline: StarOutlinedSize24,\n    },\n} as const;\n\nexport const normalizeRatingValue = (value: number | null): number =>\n    value ? Math.round(Math.min(Math.max(value, 0), 5) * 2) / 2 : 0;\n\nexport const RatingReview = forwardRef<HTMLElement, RatingReviewProps>(\n    ({ 'data-qa': dataQa, value, 'aria-describedby': describedBy, size = 'small' }, ref) => {\n        const normalizedValue = normalizeRatingValue(value);\n        const isDisabled = useDisabled();\n        const fractionDigits = normalizedValue === 0 ? 0 : 1;\n        const Icon = ICON_BY_SIZE[size][normalizedValue > 0 ? 'filled' : 'outline'];\n\n        return (\n            <div\n                role=\"img\"\n                aria-label={normalizedValue.toLocaleString()}\n                data-qa={dataQa}\n                aria-describedby={describedBy}\n                ref={ref as LegacyRef<HTMLDivElement>}\n                className={classnames(styles.ratingReview, {\n                    [styles.sizeMedium]: size === 'medium',\n                    [styles.hasRating]: normalizedValue > 0,\n                    [styles.disabled]: isDisabled,\n                })}\n            >\n                <div className={styles.internalContainer} aria-hidden>\n                    <Icon />\n                    <Text typography={size === 'small' ? 'subtitle-4-semibold' : 'title-4-semibold'}>\n                        {normalizedValue.toLocaleString(undefined, {\n                            maximumFractionDigits: fractionDigits,\n                            minimumFractionDigits: fractionDigits,\n                        })}\n                    </Text>\n                </div>\n            </div>\n        );\n    }\n);\n\nRatingReview.displayName = 'RatingReview';\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;AAyBa,MAAA,YAAY,GAAG;AACxB,IAAA,KAAK,EAAE;AACH,QAAA,MAAM,EAAE,gBAAgB;AACxB,QAAA,OAAO,EAAE,kBAAkB;AAC9B,KAAA;AACD,IAAA,MAAM,EAAE;AACJ,QAAA,MAAM,EAAE,gBAAgB;AACxB,QAAA,OAAO,EAAE,kBAAkB;AAC9B,KAAA;EACM;AAEE,MAAA,oBAAoB,GAAG,CAAC,KAAoB,KACrD,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE;AAEvD,MAAA,YAAY,GAAG,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,IAAI,GAAG,OAAO,EAAE,EAAE,GAAG,KAAI;AACnF,IAAA,MAAM,eAAe,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;AACpD,IAAA,MAAM,UAAU,GAAG,WAAW,EAAE,CAAC;AACjC,IAAA,MAAM,cAAc,GAAG,eAAe,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACrD,IAAA,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,eAAe,GAAG,CAAC,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC;IAE5E,QACIA,GACI,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,KAAK,EACE,YAAA,EAAA,eAAe,CAAC,cAAc,EAAE,EAAA,SAAA,EACnC,MAAM,EAAA,kBAAA,EACG,WAAW,EAC7B,GAAG,EAAE,GAAgC,EACrC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE;AACvC,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI,KAAK,QAAQ;AACtC,YAAA,CAAC,MAAM,CAAC,SAAS,GAAG,eAAe,GAAG,CAAC;AACvC,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,UAAU;AAChC,SAAA,CAAC,EAEF,QAAA,EAAAC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,EACpC,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,CAAAD,GAAA,CAAC,IAAI,EAAG,EAAA,CAAA,EACRA,GAAC,CAAA,IAAI,IAAC,UAAU,EAAE,IAAI,KAAK,OAAO,GAAG,qBAAqB,GAAG,kBAAkB,YAC1E,eAAe,CAAC,cAAc,CAAC,SAAS,EAAE;AACvC,wBAAA,qBAAqB,EAAE,cAAc;AACrC,wBAAA,qBAAqB,EAAE,cAAc;AACxC,qBAAA,CAAC,EACC,CAAA,CAAA,EAAA,CACL,EACJ,CAAA,EACR;AACN,CAAC,EACH;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/index.css

@@ -0,0 +1,42 @@
+:root{
+  --magritte-color-text-primary-v21-4-6:#000000;
+  --magritte-color-text-state-primary-disabled-v21-4-6:#0000007a;
+  --magritte-color-icon-tertiary-v21-4-6:#AABBCA;
+  --magritte-color-icon-warning-v21-4-6:#ff9900;
+  --magritte-color-icon-state-tertiary-disabled-v21-4-6:#aabbca7a;
+  --magritte-color-icon-state-warning-disabled-v21-4-6:#ff99007a;
+}
+.magritte-night-theme{
+  --magritte-color-text-primary-v21-4-6:#ffffff;
+  --magritte-color-text-state-primary-disabled-v21-4-6:#ababab7a;
+  --magritte-color-icon-tertiary-v21-4-6:#767676;
+  --magritte-color-icon-warning-v21-4-6:#EB8D05;
+  --magritte-color-icon-state-tertiary-disabled-v21-4-6:#767676;
+  --magritte-color-icon-state-warning-disabled-v21-4-6:#eb8d057a;
+}
+.magritte-rating-review___X1HDg_1-0-1{
+  display:inline-block;
+  --magritte-ui-icon-color-override:var(--magritte-color-icon-tertiary-v21-4-6);
+  --magritte-ui-text-color-override:var(--magritte-color-text-primary-v21-4-6);
+}
+.magritte-internal-container___Tutx7_1-0-1{
+  display:inline-flex;
+  flex-wrap:nowrap;
+  gap:6px;
+  align-items:center;
+  justify-content:center;
+  height:22px;
+}
+.magritte-size-medium___wVwww_1-0-1 .magritte-internal-container___Tutx7_1-0-1{
+  height:32px;
+}
+.magritte-disabled___uGGmU_1-0-1{
+  --magritte-ui-icon-color-override:var(--magritte-color-icon-state-tertiary-disabled-v21-4-6);
+  --magritte-ui-text-color-override:var(--magritte-color-text-state-primary-disabled-v21-4-6);
+}
+.magritte-disabled___uGGmU_1-0-1.magritte-has-rating___BoybH_1-0-1{
+  --magritte-ui-icon-color-override:var(--magritte-color-icon-state-warning-disabled-v21-4-6);
+}
+.magritte-has-rating___BoybH_1-0-1{
+  --magritte-ui-icon-color-override:var(--magritte-color-icon-warning-v21-4-6);
+}

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@hh.ru/magritte-ui-theme-provider';
+export * from '@hh.ru/magritte-ui-rating-review/RatingReview';

package/index.js

@@ -0,0 +1,10 @@
+import './index.css';
+export * from '@hh.ru/magritte-ui-theme-provider';
+export { ICON_BY_SIZE, RatingReview, normalizeRatingValue } from './RatingReview.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '@hh.ru/magritte-common-use-disabled';
+import '@hh.ru/magritte-ui-icon/icon';
+import '@hh.ru/magritte-ui-typography';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/index.mock.d.ts

@@ -0,0 +1,5 @@
+import { ForwardRefExoticComponent } from 'react';
+export { type RatingReviewProps, type RatingReviewSize, normalizeRatingValue, } from '@hh.ru/magritte-ui-rating-review/RatingReview';
+declare const ThemeProvider: any;
+export { ThemeProvider };
+export declare const RatingReview: ForwardRefExoticComponent<Record<string, unknown>>;

package/index.mock.js

@@ -0,0 +1,16 @@
+import './index.css';
+import { mockComponent } from '@hh.ru/magritte-ui-mock-component';
+export { normalizeRatingValue } from './RatingReview.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '@hh.ru/magritte-common-use-disabled';
+import '@hh.ru/magritte-ui-icon/icon';
+import '@hh.ru/magritte-ui-typography';
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const { ThemeProvider } = jest.requireActual('@hh.ru/magritte-ui-theme-provider/index');
+const RatingReview = mockComponent('RatingReview');
+
+export { RatingReview, ThemeProvider };
+//# sourceMappingURL=index.mock.js.map

package/index.mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mock.js","sources":["../src/index.mock.ts"],"sourcesContent":["import { ForwardRefExoticComponent } from 'react';\n\nimport { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport {\n    type RatingReviewProps,\n    type RatingReviewSize,\n    normalizeRatingValue,\n} from '@hh.ru/magritte-ui-rating-review/RatingReview';\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nconst { ThemeProvider } = jest.requireActual('@hh.ru/magritte-ui-theme-provider/index');\n\nexport { ThemeProvider };\n\nexport const RatingReview: ForwardRefExoticComponent<Record<string, unknown>> = mockComponent('RatingReview');\n"],"names":[],"mappings":";;;;;;;;;AAUA;AACM,MAAA,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,yCAAyC,EAAE;MAI3E,YAAY,GAAuD,aAAa,CAAC,cAAc;;;;"}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@hh.ru/magritte-ui-rating-review",
+  "version": "1.0.1",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "index.css"
+  ],
+  "scripts": {
+    "build": "yarn root:build $(pwd)",
+    "build-test-branch": "yarn root:build-test-branch $(pwd)",
+    "prepack": "yarn root:prepack $(pwd)",
+    "postpublish": "yarn root:postpublish $(pwd)",
+    "stylelint-check": "yarn root:stylelint-check $(pwd)",
+    "eslint-check": "yarn root:eslint-check $(pwd)",
+    "ts-config": "yarn root:ts-config $(pwd)",
+    "ts-check": "yarn root:ts-check $(pwd)",
+    "test": "yarn root:test $(pwd)",
+    "watch": "yarn root:watch $(pwd)"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "classnames": ">=2.3.2",
+    "react": ">=18.2.0"
+  },
+  "dependencies": {
+    "@hh.ru/magritte-common-use-disabled": "1.0.12",
+    "@hh.ru/magritte-design-tokens": "21.4.6",
+    "@hh.ru/magritte-ui-icon": "11.0.9",
+    "@hh.ru/magritte-ui-mock-component": "1.1.4",
+    "@hh.ru/magritte-ui-theme-provider": "1.1.48",
+    "@hh.ru/magritte-ui-typography": "3.0.43"
+  },
+  "gitHead": "fd604c1be8a7af9fe6b04eb309317bd1d20235b6"
+}