@pushwoosh/dumb-components 2.8.1 → 2.9.0

package/InboxPreview/InboxPreview.d.ts

@@ -7,6 +7,8 @@ import type { InboxPreviewProps } from './types';
  * a carousel shows at most five valid slides. Content without a single filled
  * field renders the dashed placeholder of the requested layout.
  *
+ * @deprecated Use `InboxCellPreview` from `@pushwoosh/websdk-common/inbox`, the renderer the WebSDK widget shares.
+ *
  * @example
  * <InboxPreview platform="ios" localizedContent={preset.localizedContent} language="en" />
  */

package/InboxPreview/InboxPreview.js

@@ -21,6 +21,8 @@ const CELL_BY_PLATFORM = {
  * a carousel shows at most five valid slides. Content without a single filled
  * field renders the dashed placeholder of the requested layout.
  *
+ * @deprecated Use `InboxCellPreview` from `@pushwoosh/websdk-common/inbox`, the renderer the WebSDK widget shares.
+ *
  * @example
  * <InboxPreview platform="ios" localizedContent={preset.localizedContent} language="en" />
  */

package/InboxPreview/constants.d.ts

@@ -1,5 +1,8 @@
 import type { InboxAvatarShape, InboxLayoutType, InboxPreviewPlatform } from './types';
-/** The SDK renders at most this many carousel slides and silently drops the rest. */
+/**
+ * The SDK renders at most this many carousel slides and silently drops the rest.
+ * @deprecated Use `INBOX_MAX_CAROUSEL_SLIDES` from `@pushwoosh/websdk-common/inbox`.
+ */
 export declare const MAX_CAROUSEL_SLIDES = 5;
 /** Layouts the SDK knows; anything else falls back to the heuristic. */
 export declare const KNOWN_LAYOUTS: readonly InboxLayoutType[];

package/InboxPreview/constants.js

@@ -1,5 +1,8 @@
 import { ShapeRadius } from '@pushwoosh/kit-constants';
-/** The SDK renders at most this many carousel slides and silently drops the rest. */
+/**
+ * The SDK renders at most this many carousel slides and silently drops the rest.
+ * @deprecated Use `INBOX_MAX_CAROUSEL_SLIDES` from `@pushwoosh/websdk-common/inbox`.
+ */
 export const MAX_CAROUSEL_SLIDES = 5;
 /** Layouts the SDK knows; anything else falls back to the heuristic. */
 export const KNOWN_LAYOUTS = ['classic', 'captioned', 'banner', 'carousel'];

package/InboxPreview/helpers.d.ts

@@ -11,6 +11,7 @@ export declare const getHeroUrl: (content: InboxPreviewContent) => string;
 /**
  * Resolves the layout the SDK would actually draw: the requested one when it can render,
  * the SDK heuristic for unknown/absent layouts, and the classic degradation otherwise.
+ * @deprecated Use `resolveInboxLayout` from `@pushwoosh/websdk-common/inbox`.
  */
 export declare const resolveInboxLayout: (content: InboxPreviewContent) => InboxLayoutType;
 /** True when the content has nothing to render yet, so the preview shows the layout placeholder. */

package/InboxPreview/helpers.js

@@ -22,6 +22,7 @@ export const getHeroUrl = content => content.bannerUrl || content.iconUrl || '';
 /**
  * Resolves the layout the SDK would actually draw: the requested one when it can render,
  * the SDK heuristic for unknown/absent layouts, and the classic degradation otherwise.
+ * @deprecated Use `resolveInboxLayout` from `@pushwoosh/websdk-common/inbox`.
  */
 export const resolveInboxLayout = content => {
   const hasTitle = !!content.title;

package/InboxPreview/types.d.ts

@@ -1,15 +1,24 @@
 import type { ReactNode } from 'react';
 import type { TypographyVariant } from '@pushwoosh/kit-typography';
-/** Cell layout of an Inbox message. */
+/**
+ * Cell layout of an Inbox message.
+ * @deprecated Use `InboxLayout` from `@pushwoosh/websdk-common/inbox`.
+ */
 export type InboxLayoutType = 'classic' | 'captioned' | 'banner' | 'carousel';
-/** One carousel slide of an Inbox message. */
+/**
+ * One carousel slide of an Inbox message.
+ * @deprecated Use `InboxSlide` from `@pushwoosh/websdk-common/inbox`.
+ */
 export interface InboxPreviewSlide {
     /** Slide image URL; a slide without it is dropped, like in the SDK. */
     imageUrl?: string;
     /** Caption overlaid at the bottom of the slide. */
     caption?: string;
 }
-/** One localized Inbox content (mirrors the rpc-v2 `AppInboxPresetLocale` shape). */
+/**
+ * One localized Inbox content (mirrors the rpc-v2 `AppInboxPresetLocale` shape).
+ * @deprecated Use `InboxCellContent` from `@pushwoosh/websdk-common/inbox`.
+ */
 export interface InboxPreviewContent {
     /** Cell title. */
     title?: string;
@@ -24,7 +33,10 @@ export interface InboxPreviewContent {
     /** Carousel slides; only the first five valid ones are rendered. */
     carousel?: InboxPreviewSlide[];
 }
-/** Platform skin of {@link InboxPreview}: each OS draws the inbox cell differently. */
+/**
+ * Platform skin of {@link InboxPreview}: each OS draws the inbox cell differently.
+ * @deprecated Use `InboxCellPlatform` from `@pushwoosh/websdk-common/inbox`.
+ */
 export type InboxPreviewPlatform = 'ios' | 'android' | 'web';
 /** Inbox icon geometry of one platform. */
 export interface InboxAvatarShape {
@@ -49,7 +61,10 @@ export interface InboxCellProps {
     /** Draw the unread dot. */
     unread: boolean;
 }
-/** Props of {@link InboxPreview}. */
+/**
+ * Props of {@link InboxPreview}.
+ * @deprecated Use `InboxCellPreviewProps` from `@pushwoosh/websdk-common/inbox`.
+ */
 export interface InboxPreviewProps {
     /** Platform skin to render (default `ios`); the editor switches it with platform chips. */
     platform?: InboxPreviewPlatform;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "2.8.1",
+  "version": "2.9.0",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/polyglot/__tests__/filters.test.js

@@ -72,6 +72,35 @@ describe('filters', () => {
       expect(filters.pluralize('not a number', [scalar('a'), scalar('b')], createContext())).toBe('not a number');
     });
   });
+  describe('pluralize with CLDR forms', () => {
+    const arabic = ['صفر', 'صف', 'صفان', 'صفوف', 'صفًا', 'صف*'].map(scalar);
+    test('picks each of the six Arabic forms', () => {
+      const ctx = createContext('ar');
+      expect(filters.pluralize(0, arabic, ctx)).toBe('صفر');
+      expect(filters.pluralize(1, arabic, ctx)).toBe('صف');
+      expect(filters.pluralize(2, arabic, ctx)).toBe('صفان');
+      expect(filters.pluralize(3, arabic, ctx)).toBe('صفوف');
+      expect(filters.pluralize(10, arabic, ctx)).toBe('صفوف');
+      expect(filters.pluralize(11, arabic, ctx)).toBe('صفًا');
+      expect(filters.pluralize(99, arabic, ctx)).toBe('صفًا');
+      expect(filters.pluralize(100, arabic, ctx)).toBe('صف*');
+      expect(filters.pluralize(103, arabic, ctx)).toBe('صفوف');
+    });
+    test('keeps the legacy one/other split when fewer forms are given', () => {
+      const ctx = createContext('ar');
+      expect(filters.pluralize(1, [scalar('صف'), scalar('صفوف')], ctx)).toBe('صف');
+      expect(filters.pluralize(0, [scalar('صف'), scalar('صفوف')], ctx)).toBe('صفوف');
+      expect(filters.pluralize(2, [scalar('صف'), scalar('صفوف')], ctx)).toBe('صفوف');
+    });
+    test('Russian three-form rule matches CLDR one/few/many for integers', () => {
+      const ctx = createContext('ru');
+      const forms = [scalar('one'), scalar('few'), scalar('many')];
+      const rules = new Intl.PluralRules('ru');
+      for (let n = 0; n <= 1000; n += 1) {
+        expect(filters.pluralize(n, forms, ctx)).toBe(rules.select(n));
+      }
+    });
+  });
   describe('formatNumber', () => {
     test('formats integer with spaces', () => {
       expect(filters.formatNumber('1000000', [], createContext())).toBe('1 000 000');

package/polyglot/liquid/filters.js

@@ -15,6 +15,20 @@ const pluralizers = {
   de: universalPluralize,
   es: universalPluralize
 };
+const CLDR_CATEGORY_ORDER = ['zero', 'one', 'two', 'few', 'many', 'other'];
+const cldrPluralize = (language, num, plurals) => {
+  let rules;
+  try {
+    rules = new Intl.PluralRules(language);
+  } catch {
+    return undefined;
+  }
+  const categories = CLDR_CATEGORY_ORDER.filter(c => rules.resolvedOptions().pluralCategories.includes(c));
+  if (categories.length < 2 || plurals.length < categories.length) {
+    return undefined;
+  }
+  return plurals[categories.indexOf(rules.select(num))];
+};
 export const filters = {
   capitalize: value => typeof value === 'string' ? value.charAt(0).toUpperCase() + value.slice(1) : value,
   upperCase: value => typeof value === 'string' ? value.toUpperCase() : value,
@@ -24,6 +38,10 @@ export const filters = {
       return value;
     }
     const variants = args.map(arg => unpackScalarOrValue(arg, context));
+    const cldr = cldrPluralize(context.language, value, variants);
+    if (cldr !== undefined) {
+      return cldr;
+    }
     const pluralizer = pluralizers[context.language] || universalPluralize;
     return pluralizer(value, variants);
   },