@pushwoosh/dumb-components 1.1.73 → 1.1.75

package/EditableField/EditableField.js

@@ -1,5 +1,6 @@
 import React, { useRef } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
 import { DropdownIcon, EditIcon } from '@pushwoosh/kit-icons';
 import { Button } from '../Button';
 import { useOnClickOutside } from '../hooks';
@@ -42,6 +43,8 @@ export function EditableField({
     internalWindowRef: rootRef,
     loading: loading,
     zIndex: zIndex
+  }, React.createElement(Vertical, {
+    "$padding": 16
   }, title && React.createElement(TitleBox, null, title), children, React.createElement(ButtonsGroup, {
     "$isLoading": loading
   }, React.createElement(Button, {
@@ -56,5 +59,5 @@ export function EditableField({
     size: "compact",
     isDisabled: loading,
     onClick: onCancel
-  }, "Cancel"))));
+  }, "Cancel")))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.73",
+  "version": "1.1.75",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -13,7 +13,8 @@
     "check": "npm run check:lint && npm run check:types",
     "check:lint": "echo \"Run check:lint\" && eslint src",
     "check:lint-fix": "echo \"Run check:lint\" && eslint src --fix",
-    "check:types": "echo \"Run check:types\" && pushwoosh-engine lib:check-types"
+    "check:types": "echo \"Run check:types\" && pushwoosh-engine lib:check-types",
+    "test": "jest"
   },
   "pre-commit": "check",
   "engines": {
@@ -23,16 +24,22 @@
   "devDependencies": {
     "@pushwoosh/frontend-builder-engine": "^1.0.21",
     "@svgr/webpack": "^8.1.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^30.0.0",
     "@types/lodash": "^4.17.13",
     "@types/react": "^18.2.69",
     "@types/react-dom": "^18.2.22",
     "@types/react-transition-group": "^4.4.12",
     "@types/styled-components": "^5.1.34",
     "glob": "^11.0.3",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "pre-commit": "^1.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "styled-components": "^5.3.11"
+    "styled-components": "^5.3.11",
+    "ts-jest": "^29.4.6"
   },
   "dependencies": {
     "@codemirror/lang-html": "^6.4.9",

package/polyglot/__tests__/filters.test.d.ts

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

package/polyglot/__tests__/filters.test.js

@@ -0,0 +1,123 @@
+import { filters } from '../liquid/filters';
+const createContext = (language = 'en', timezone = 'UTC') => ({
+  values: {},
+  language,
+  timezone
+});
+const scalar = value => ({
+  type: 'Scalar',
+  value
+});
+describe('filters', () => {
+  describe('capitalize', () => {
+    test('capitalizes first letter', () => {
+      expect(filters.capitalize('hello', [], createContext())).toBe('Hello');
+    });
+    test('handles empty string', () => {
+      expect(filters.capitalize('', [], createContext())).toBe('');
+    });
+    test('returns non-string as is', () => {
+      expect(filters.capitalize(42, [], createContext())).toBe(42);
+    });
+  });
+  describe('upperCase', () => {
+    test('converts to uppercase', () => {
+      expect(filters.upperCase('hello', [], createContext())).toBe('HELLO');
+    });
+    test('returns non-string as is', () => {
+      expect(filters.upperCase(42, [], createContext())).toBe(42);
+    });
+  });
+  describe('lowerCase', () => {
+    test('converts to lowercase', () => {
+      expect(filters.lowerCase('HELLO', [], createContext())).toBe('hello');
+    });
+    test('returns non-string as is', () => {
+      expect(filters.lowerCase(42, [], createContext())).toBe(42);
+    });
+  });
+  describe('pluralize', () => {
+    describe('English', () => {
+      const ctx = createContext('en');
+      test('returns singular for 1', () => {
+        expect(filters.pluralize(1, [scalar('item'), scalar('items')], ctx)).toBe('item');
+      });
+      test('returns plural for 0', () => {
+        expect(filters.pluralize(0, [scalar('item'), scalar('items')], ctx)).toBe('items');
+      });
+      test('returns plural for 2+', () => {
+        expect(filters.pluralize(5, [scalar('item'), scalar('items')], ctx)).toBe('items');
+      });
+    });
+    describe('Russian', () => {
+      const ctx = createContext('ru');
+      test('returns first form for 1', () => {
+        expect(filters.pluralize(1, [scalar('яблоко'), scalar('яблока'), scalar('яблок')], ctx)).toBe('яблоко');
+      });
+      test('returns second form for 2-4', () => {
+        expect(filters.pluralize(2, [scalar('яблоко'), scalar('яблока'), scalar('яблок')], ctx)).toBe('яблока');
+        expect(filters.pluralize(3, [scalar('яблоко'), scalar('яблока'), scalar('яблок')], ctx)).toBe('яблока');
+        expect(filters.pluralize(4, [scalar('яблоко'), scalar('яблока'), scalar('яблок')], ctx)).toBe('яблока');
+      });
+      test('returns third form for 5-20', () => {
+        expect(filters.pluralize(5, [scalar('яблоко'), scalar('яблока'), scalar('яблок')], ctx)).toBe('яблок');
+        expect(filters.pluralize(11, [scalar('яблоко'), scalar('яблока'), scalar('яблок')], ctx)).toBe('яблок');
+        expect(filters.pluralize(20, [scalar('яблоко'), scalar('яблока'), scalar('яблок')], ctx)).toBe('яблок');
+      });
+      test('returns first form for 21', () => {
+        expect(filters.pluralize(21, [scalar('яблоко'), scalar('яблока'), scalar('яблок')], ctx)).toBe('яблоко');
+      });
+    });
+    test('returns value as is for non-number', () => {
+      expect(filters.pluralize('not a number', [scalar('a'), scalar('b')], createContext())).toBe('not a number');
+    });
+  });
+  describe('formatNumber', () => {
+    test('formats integer with spaces', () => {
+      expect(filters.formatNumber('1000000', [], createContext())).toBe('1 000 000');
+    });
+    test('formats with decimal places', () => {
+      expect(filters.formatNumber('1234.5', [scalar(2)], createContext())).toBe('1 234,50');
+    });
+    test('truncates excess decimal places', () => {
+      expect(filters.formatNumber('1234.5678', [scalar(2)], createContext())).toBe('1 234,56');
+    });
+    test('handles integer without decimal', () => {
+      expect(filters.formatNumber('1234', [], createContext())).toBe('1 234');
+    });
+  });
+  describe('formatDate', () => {
+    const testDate = '2024-06-15T12:30:00Z';
+    test('formats date with context timezone', () => {
+      const result = filters.formatDate(testDate, [], createContext('en', 'UTC'));
+      expect(result).toBe('Jun 15, 2024');
+    });
+    test('formats date with short format', () => {
+      const result = filters.formatDate(testDate, [scalar('short')], createContext('en', 'UTC'));
+      expect(result).toMatch(/\d{1,2}\/\d{1,2}\/\d{2,4}/);
+    });
+    test('formats date with long format', () => {
+      const result = filters.formatDate(testDate, [scalar('long')], createContext('en', 'UTC'));
+      expect(result).toContain('June');
+      expect(result).toContain('2024');
+    });
+    test('formats date with different locale', () => {
+      const result = filters.formatDate(testDate, [], createContext('ru', 'UTC'));
+      expect(result).toContain('2024');
+    });
+  });
+  describe('formatDateTime', () => {
+    const testDate = '2024-06-15T12:30:00Z';
+    test('formats date and time with context timezone', () => {
+      const result = filters.formatDateTime(testDate, [], createContext('en', 'UTC'));
+      expect(result).toContain('Jun');
+      expect(result).toContain('2024');
+      expect(result).toContain('12:30');
+    });
+    test('formats date and time with short format', () => {
+      const result = filters.formatDateTime(testDate, [scalar('short')], createContext('en', 'UTC'));
+      expect(result).toMatch(/\d{1,2}\/\d{1,2}\/\d{2,4}/);
+      expect(result).toContain(':');
+    });
+  });
+});

package/polyglot/__tests__/helpers.test.d.ts

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

package/polyglot/__tests__/helpers.test.js

@@ -0,0 +1,176 @@
+import { smartSplit, smartSplitAtFirstDelimiter, ensureNumber, ensureString, parseScalarOrVariable, addSpaceAroundOperators, unpackScalarOrValue, decodeHtmlEntities } from '../liquid/helpers';
+describe('smartSplit', () => {
+  test('splits simple string by delimiter', () => {
+    expect(smartSplit('a,b,c', ',')).toEqual(['a', 'b', 'c']);
+  });
+  test('preserves quoted strings', () => {
+    expect(smartSplit('"a,b",c', ',')).toEqual(['"a,b"', 'c']);
+  });
+  test('handles escaped quotes in strings', () => {
+    expect(smartSplit('"a\\"b",c', ',')).toEqual(['"a\\"b"', 'c']);
+  });
+  test('handles empty string', () => {
+    expect(smartSplit('', ',')).toEqual([]);
+  });
+  test('handles single element', () => {
+    expect(smartSplit('abc', ',')).toEqual(['abc']);
+  });
+});
+describe('smartSplitAtFirstDelimiter', () => {
+  test('splits at first delimiter', () => {
+    expect(smartSplitAtFirstDelimiter('a:b:c', ':')).toEqual(['a', 'b:c']);
+  });
+  test('returns original string when no delimiter', () => {
+    expect(smartSplitAtFirstDelimiter('abc', ':')).toEqual(['abc']);
+  });
+  test('preserves quoted strings before delimiter', () => {
+    expect(smartSplitAtFirstDelimiter('"a:b":c', ':')).toEqual(['"a:b"', 'c']);
+  });
+});
+describe('ensureNumber', () => {
+  test('returns number as is', () => {
+    expect(ensureNumber(42)).toBe(42);
+  });
+  test('parses string number', () => {
+    expect(ensureNumber('42')).toBe(42);
+  });
+  test('parses float', () => {
+    expect(ensureNumber('3.14')).toBe(3.14);
+  });
+  test('returns 0 for NaN', () => {
+    expect(ensureNumber('not a number')).toBe(0);
+  });
+  test('returns 0 for undefined', () => {
+    expect(ensureNumber(undefined)).toBe(0);
+  });
+});
+describe('ensureString', () => {
+  test('returns string as is', () => {
+    expect(ensureString('hello')).toBe('hello');
+  });
+  test('converts number to string', () => {
+    expect(ensureString(42)).toBe('42');
+  });
+  test('returns empty string for null', () => {
+    expect(ensureString(null)).toBe('');
+  });
+  test('returns empty string for undefined', () => {
+    expect(ensureString(undefined)).toBe('');
+  });
+});
+describe('parseScalarOrVariable', () => {
+  test('parses quoted string as scalar', () => {
+    expect(parseScalarOrVariable('"hello"')).toEqual({
+      type: 'Scalar',
+      value: 'hello'
+    });
+  });
+  test('parses boolean true', () => {
+    expect(parseScalarOrVariable('true')).toEqual({
+      type: 'Scalar',
+      value: true
+    });
+  });
+  test('parses boolean false', () => {
+    expect(parseScalarOrVariable('false')).toEqual({
+      type: 'Scalar',
+      value: false
+    });
+  });
+  test('parses integer as scalar', () => {
+    expect(parseScalarOrVariable('42')).toEqual({
+      type: 'Scalar',
+      value: 42
+    });
+  });
+  test('parses float as scalar', () => {
+    expect(parseScalarOrVariable('3.14')).toEqual({
+      type: 'Scalar',
+      value: 3.14
+    });
+  });
+  test('parses identifier as variable', () => {
+    expect(parseScalarOrVariable('name')).toEqual({
+      type: 'Variable',
+      name: 'name'
+    });
+  });
+});
+describe('addSpaceAroundOperators', () => {
+  test('adds spaces around ==', () => {
+    expect(addSpaceAroundOperators('a==b')).toBe('a == b');
+  });
+  test('adds spaces around !=', () => {
+    expect(addSpaceAroundOperators('a!=b')).toBe('a != b');
+  });
+  test('adds spaces around >=', () => {
+    expect(addSpaceAroundOperators('a>=b')).toBe('a >= b');
+  });
+});
+describe('unpackScalarOrValue', () => {
+  const context = {
+    values: {
+      name: 'John'
+    },
+    language: 'en',
+    timezone: 'UTC'
+  };
+  test('returns scalar value directly', () => {
+    expect(unpackScalarOrValue({
+      type: 'Scalar',
+      value: 'hello'
+    }, context)).toBe('hello');
+  });
+  test('returns variable value from context', () => {
+    expect(unpackScalarOrValue({
+      type: 'Variable',
+      name: 'name'
+    }, context)).toBe('John');
+  });
+});
+describe('decodeHtmlEntities', () => {
+  describe('named entities', () => {
+    test('decodes   to non-breaking space', () => {
+      expect(decodeHtmlEntities('Hello World')).toBe('Hello\u00A0World');
+    });
+    test('decodes & to ampersand', () => {
+      expect(decodeHtmlEntities('A&B')).toBe('A&B');
+    });
+    test('decodes < and >', () => {
+      expect(decodeHtmlEntities('&lt;div&gt;')).toBe('<div>');
+    });
+    test('decodes &quot; and &apos;', () => {
+      expect(decodeHtmlEntities('&quot;hello&apos;')).toBe('"hello\'');
+    });
+    test('leaves unknown named entities as is', () => {
+      expect(decodeHtmlEntities('&unknown;')).toBe('&unknown;');
+    });
+  });
+  describe('decimal numeric entities', () => {
+    test('decodes &#160; to non-breaking space', () => {
+      expect(decodeHtmlEntities('Hello&#160;World')).toBe('Hello\u00A0World');
+    });
+    test('decodes &#60; and &#62;', () => {
+      expect(decodeHtmlEntities('&#60;div&#62;')).toBe('<div>');
+    });
+  });
+  describe('hex numeric entities', () => {
+    test('decodes &#x00A0; to non-breaking space', () => {
+      expect(decodeHtmlEntities('Hello&#x00A0;World')).toBe('Hello\u00A0World');
+    });
+    test('decodes &#xA0; (short form)', () => {
+      expect(decodeHtmlEntities('Hello&#xA0;World')).toBe('Hello\u00A0World');
+    });
+    test('decodes &#x3C; and &#x3E;', () => {
+      expect(decodeHtmlEntities('&#x3C;div&#x3E;')).toBe('<div>');
+    });
+  });
+  describe('mixed entities', () => {
+    test('decodes multiple different entity types', () => {
+      expect(decodeHtmlEntities('&lt;div&gt;&nbsp;&#60;span&#62;&#x00A0;')).toBe('<div>\u00A0<span>\u00A0');
+    });
+    test('returns text without entities unchanged', () => {
+      expect(decodeHtmlEntities('Hello World')).toBe('Hello World');
+    });
+  });
+});

package/polyglot/__tests__/parser.test.d.ts

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

package/polyglot/__tests__/parser.test.js

@@ -0,0 +1,108 @@
+import { stringToAst } from '../liquid/parser';
+describe('stringToAst', () => {
+  describe('text parsing', () => {
+    test('parses plain text', () => {
+      const ast = stringToAst('Hello World');
+      expect(ast).toHaveLength(1);
+      expect(ast[0].type).toBe('Text');
+      expect(ast[0].content).toBe('Hello World');
+    });
+    test('parses empty string', () => {
+      const ast = stringToAst('');
+      expect(ast).toHaveLength(0);
+    });
+  });
+  describe('variable parsing', () => {
+    test('parses simple variable', () => {
+      const ast = stringToAst('{{ name }}');
+      expect(ast).toHaveLength(1);
+      const node = ast[0];
+      expect(node.type).toBe('Variable');
+      expect(node.value).toEqual({
+        type: 'Variable',
+        name: 'name'
+      });
+    });
+    test('parses variable with filter', () => {
+      const ast = stringToAst('{{ name | capitalize }}');
+      expect(ast).toHaveLength(1);
+      const node = ast[0];
+      expect(node.type).toBe('Variable');
+      expect(node.filters).toHaveLength(1);
+      expect(node.filters[0].name).toBe('capitalize');
+    });
+    test('parses variable with multiple filters', () => {
+      const ast = stringToAst('{{ name | capitalize | upperCase }}');
+      expect(ast).toHaveLength(1);
+      const node = ast[0];
+      expect(node.filters).toHaveLength(2);
+      expect(node.filters[0].name).toBe('capitalize');
+      expect(node.filters[1].name).toBe('upperCase');
+    });
+    test('parses variable mixed with text', () => {
+      const ast = stringToAst('Hello {{ name }}!');
+      expect(ast).toHaveLength(3);
+      expect(ast[0].content).toBe('Hello ');
+      expect(ast[1].type).toBe('Variable');
+      expect(ast[2].content).toBe('!');
+    });
+  });
+  describe('if control parsing', () => {
+    test('parses simple if block', () => {
+      const ast = stringToAst('{% if count == 1 %}one{% endif %}');
+      expect(ast).toHaveLength(1);
+      const node = ast[0];
+      expect(node.type).toBe('Control');
+      expect(node.name).toBe('if');
+      expect(node.condition[1]).toBe('==');
+    });
+    test('parses if-else block', () => {
+      const ast = stringToAst('{% if active == true %}yes{% else %}no{% endif %}');
+      expect(ast).toHaveLength(1);
+      const node = ast[0];
+      expect(node.children).toHaveLength(1);
+      expect(node.elseChildren).toHaveLength(1);
+    });
+  });
+  describe('for control parsing', () => {
+    test('parses for loop', () => {
+      const ast = stringToAst('{% for item in items %}{{ item }}{% endfor %}');
+      expect(ast).toHaveLength(1);
+      const node = ast[0];
+      expect(node.type).toBe('Control');
+      expect(node.name).toBe('for');
+      expect(node.varName).toBe('item');
+    });
+  });
+  describe('HTML tag parsing', () => {
+    test('parses self-closing br tag', () => {
+      const ast = stringToAst('line1<br/>line2');
+      expect(ast).toHaveLength(3);
+      expect(ast[0].content).toBe('line1');
+      expect(ast[1].type).toBe('Tag');
+      expect(ast[1].name).toBe('br');
+      expect(ast[2].content).toBe('line2');
+    });
+    test('parses void hr tag', () => {
+      const ast = stringToAst('before<hr>after');
+      expect(ast).toHaveLength(3);
+      expect(ast[1].name).toBe('hr');
+    });
+    test('parses img tag with attributes', () => {
+      const ast = stringToAst('<img src="test.png" alt="test">');
+      expect(ast).toHaveLength(1);
+      const node = ast[0];
+      expect(node.name).toBe('img');
+      expect(node.params).toHaveProperty('src');
+      expect(node.params).toHaveProperty('alt');
+    });
+    test('parses nested tags', () => {
+      const ast = stringToAst('<strong>bold text</strong>');
+      expect(ast).toHaveLength(1);
+      const node = ast[0];
+      expect(node.name).toBe('strong');
+      expect(node.children).toHaveLength(1);
+      expect(node.children[0].content).toBe('bold text');
+    });
+  });
+});

package/polyglot/__tests__/render.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/polyglot/__tests__/render.test.js

@@ -0,0 +1,255 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { stringToAst } from '../liquid/parser';
+import { renderToString, renderToReact } from '../liquid/render';
+const renderString = (template, values = {}, language = 'en') => {
+  const ast = stringToAst(template);
+  const context = {
+    values,
+    language,
+    timezone: 'UTC'
+  };
+  return renderToString(ast, context);
+};
+const renderReactNodes = (template, values = {}, language = 'en') => {
+  const ast = stringToAst(template);
+  const context = {
+    values,
+    language,
+    timezone: 'UTC'
+  };
+  return renderToReact(ast, context);
+};
+describe('renderToString', () => {
+  describe('text rendering', () => {
+    test('renders plain text', () => {
+      expect(renderString('Hello World')).toBe('Hello World');
+    });
+    test('renders empty string', () => {
+      expect(renderString('')).toBe('');
+    });
+  });
+  describe('variable rendering', () => {
+    test('renders simple variable', () => {
+      expect(renderString('Hello {{ name }}', {
+        name: 'John'
+      })).toBe('Hello John');
+    });
+    test('renders multiple variables', () => {
+      expect(renderString('{{ greeting }} {{ name }}', {
+        greeting: 'Hi',
+        name: 'Jane'
+      })).toBe('Hi Jane');
+    });
+    test('renders variable with filter', () => {
+      expect(renderString('{{ name | upperCase }}', {
+        name: 'john'
+      })).toBe('JOHN');
+    });
+    test('renders variable with multiple filters', () => {
+      expect(renderString('{{ name | capitalize }}', {
+        name: 'john'
+      })).toBe('John');
+    });
+  });
+  describe('if control rendering', () => {
+    test('renders if block when true', () => {
+      expect(renderString('{% if active == true %}yes{% endif %}', {
+        active: true
+      })).toBe('yes');
+    });
+    test('renders nothing when false', () => {
+      expect(renderString('{% if active == true %}yes{% endif %}', {
+        active: false
+      })).toBe('');
+    });
+    test('renders else block when false', () => {
+      expect(renderString('{% if active == true %}yes{% else %}no{% endif %}', {
+        active: false
+      })).toBe('no');
+    });
+    test('handles numeric comparison', () => {
+      expect(renderString('{% if count > 0 %}positive{% endif %}', {
+        count: 5
+      })).toBe('positive');
+    });
+    test('handles != operator', () => {
+      expect(renderString('{% if status != "done" %}pending{% endif %}', {
+        status: 'active'
+      })).toBe('pending');
+    });
+  });
+  describe('for control rendering', () => {
+    test('renders for loop', () => {
+      expect(renderString('{% for item in items %}{{ item }},{% endfor %}', {
+        items: ['a', 'b', 'c']
+      })).toBe('a,b,c,');
+    });
+    test('renders empty for empty array', () => {
+      expect(renderString('{% for item in items %}{{ item }}{% endfor %}', {
+        items: []
+      })).toBe('');
+    });
+  });
+  describe('HTML tag rendering', () => {
+    test('renders self-closing tags', () => {
+      expect(renderString('line1<br/>line2')).toBe('line1<br/>line2');
+    });
+    test('renders void tags', () => {
+      expect(renderString('before<hr>after')).toBe('before<hr/>after');
+    });
+    test('renders tags with attributes', () => {
+      expect(renderString('<img src="test.png">')).toBe('<img src="test.png"/>');
+    });
+    test('renders nested tags', () => {
+      expect(renderString('<strong>bold</strong>')).toBe('<strong>bold</strong>');
+    });
+  });
+  describe('complex templates', () => {
+    test('renders template with variable in tag', () => {
+      const template = '{% if count > 0 %}<strong>{{ count }}</strong>{% endif %}';
+      expect(renderString(template, {
+        count: 5
+      })).toBe('<strong>5</strong>');
+    });
+    test('renders pluralized message', () => {
+      const template = '{{ count }} {{ count | pluralize: "item", "items" }}';
+      expect(renderString(template, {
+        count: 1
+      })).toBe('1 item');
+      expect(renderString(template, {
+        count: 5
+      })).toBe('5 items');
+    });
+  });
+  describe('HTML entities', () => {
+    test('decodes &nbsp; to non-breaking space', () => {
+      expect(renderString('Hello&nbsp;World')).toBe('Hello\u00A0World');
+    });
+    test('decodes numeric entities', () => {
+      expect(renderString('Hello&#160;World')).toBe('Hello\u00A0World');
+    });
+    test('decodes hex entities', () => {
+      expect(renderString('Hello&#x00A0;World')).toBe('Hello\u00A0World');
+    });
+  });
+});
+describe('renderToReact', () => {
+  describe('text rendering', () => {
+    test('renders plain text', () => {
+      const result = renderReactNodes('Hello World');
+      render(React.createElement(React.Fragment, null, result));
+      expect(screen.getByText('Hello World')).toBeInTheDocument();
+    });
+  });
+  describe('variable rendering', () => {
+    test('renders simple variable', () => {
+      const result = renderReactNodes('Hello {{ name }}', {
+        name: 'John'
+      });
+      render(React.createElement(React.Fragment, null, result));
+      expect(screen.getByText(/Hello/)).toBeInTheDocument();
+      expect(screen.getByText(/John/)).toBeInTheDocument();
+    });
+    test('renders variable with filter', () => {
+      const result = renderReactNodes('{{ name | upperCase }}', {
+        name: 'john'
+      });
+      render(React.createElement(React.Fragment, null, result));
+      expect(screen.getByText('JOHN')).toBeInTheDocument();
+    });
+  });
+  describe('HTML tag rendering', () => {
+    test('renders strong tag', () => {
+      const result = renderReactNodes('<strong>bold text</strong>');
+      render(React.createElement(React.Fragment, null, result));
+      const element = screen.getByText('bold text');
+      expect(element.tagName).toBe('STRONG');
+    });
+    test('renders br tag', () => {
+      const result = renderReactNodes('line1<br/>line2');
+      const {
+        container
+      } = render(React.createElement(React.Fragment, null, result));
+      expect(container.querySelector('br')).toBeInTheDocument();
+    });
+    test('renders img tag with attributes', () => {
+      const result = renderReactNodes('<img src="test.png" alt="test image">');
+      render(React.createElement(React.Fragment, null, result));
+      const img = screen.getByAltText('test image');
+      expect(img).toHaveAttribute('src', 'test.png');
+    });
+    test('renders anchor tag with href', () => {
+      const result = renderReactNodes('<a href="https://example.com">Link</a>');
+      render(React.createElement(React.Fragment, null, result));
+      const link = screen.getByText('Link');
+      expect(link.tagName).toBe('A');
+      expect(link).toHaveAttribute('href', 'https://example.com');
+    });
+    test('renders anchor tag with multiple attributes', () => {
+      const result = renderReactNodes('<a href="https://example.com" target="_blank" rel="noreferrer">External Link</a>');
+      render(React.createElement(React.Fragment, null, result));
+      const link = screen.getByText('External Link');
+      expect(link).toHaveAttribute('href', 'https://example.com');
+      expect(link).toHaveAttribute('target', '_blank');
+      expect(link).toHaveAttribute('rel', 'noreferrer');
+    });
+    test('renders anchor tag with variable in href', () => {
+      const result = renderReactNodes('<a href=linkUrl>Custom Link</a>', {
+        linkUrl: 'https://custom.com'
+      });
+      render(React.createElement(React.Fragment, null, result));
+      const link = screen.getByText('Custom Link');
+      expect(link).toHaveAttribute('href', 'https://custom.com');
+    });
+  });
+  describe('control structures', () => {
+    test('renders if block when true', () => {
+      const result = renderReactNodes('{% if active == true %}visible{% endif %}', {
+        active: true
+      });
+      render(React.createElement(React.Fragment, null, result));
+      expect(screen.getByText('visible')).toBeInTheDocument();
+    });
+    test('renders else block when false', () => {
+      const result = renderReactNodes('{% if active == true %}yes{% else %}no{% endif %}', {
+        active: false
+      });
+      render(React.createElement(React.Fragment, null, result));
+      expect(screen.getByText('no')).toBeInTheDocument();
+    });
+    test('renders for loop', () => {
+      const result = renderReactNodes('{% for item in items %}<span>{{ item }}</span>{% endfor %}', {
+        items: ['a', 'b', 'c']
+      });
+      render(React.createElement(React.Fragment, null, result));
+      expect(screen.getByText('a')).toBeInTheDocument();
+      expect(screen.getByText('b')).toBeInTheDocument();
+      expect(screen.getByText('c')).toBeInTheDocument();
+    });
+  });
+  describe('text tag with styles', () => {
+    test('renders text tag', () => {
+      const result = renderReactNodes('<text>styled text</text>');
+      render(React.createElement(React.Fragment, null, result));
+      expect(screen.getByText('styled text')).toBeInTheDocument();
+    });
+  });
+  describe('HTML entities', () => {
+    test('decodes &nbsp; in React rendering', () => {
+      const result = renderReactNodes('Hello&nbsp;World');
+      const {
+        container
+      } = render(React.createElement(React.Fragment, null, result));
+      expect(container.textContent).toBe('Hello\u00A0World');
+    });
+    test('decodes numeric entities in React rendering', () => {
+      const result = renderReactNodes('Hello&#160;World');
+      const {
+        container
+      } = render(React.createElement(React.Fragment, null, result));
+      expect(container.textContent).toBe('Hello\u00A0World');
+    });
+  });
+});

package/polyglot/liquid/filters.js

@@ -40,5 +40,22 @@ export const filters = {
       }
     }
     return decimalPart ? `${integerPart},${decimalPart}` : integerPart;
+  },
+  formatDate: (value, args, context) => {
+    const date = new Date(value);
+    const format = args[0] ? ensureString(unpackScalarOrValue(args[0], context)) : 'medium';
+    return new Intl.DateTimeFormat(context.language, {
+      timeZone: context.timezone,
+      dateStyle: format
+    }).format(date);
+  },
+  formatDateTime: (value, args, context) => {
+    const date = new Date(value);
+    const format = args[0] ? ensureString(unpackScalarOrValue(args[0], context)) : 'medium';
+    return new Intl.DateTimeFormat(context.language, {
+      timeZone: context.timezone,
+      dateStyle: format,
+      timeStyle: 'short'
+    }).format(date);
   }
 };

package/polyglot/liquid/helpers.d.ts

@@ -7,3 +7,4 @@ export declare function addSpaceAroundOperators(expression: string): string;
 export declare function parseScalarOrVariable(value: string): ScalarOrVariable;
 export declare function stringifyScalarOrVariable(scalarOrVariable: ScalarOrVariable): string;
 export declare function unpackScalarOrValue(scalarOrVariable: ScalarOrVariable, context: Context): ScalarValue;
+export declare function decodeHtmlEntities(text: string): string;

package/polyglot/liquid/helpers.js

@@ -108,4 +108,21 @@ export function unpackScalarOrValue(scalarOrVariable, context) {
     return scalarOrVariable.value;
   }
   return context.values[scalarOrVariable.name];
+}
+const namedHtmlEntities = {
+  ' ': '\u00A0',
+  '&': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&quot;': '"',
+  '&apos;': '\''
+};
+export function decodeHtmlEntities(text) {
+  return text
+  // Named entities: &nbsp; &amp; etc.
+  .replace(/&[a-zA-Z]+;/g, entity => namedHtmlEntities[entity] || entity)
+  // Decimal numeric: &#160;
+  .replace(/&#(\d+);/g, (_, code) => String.fromCharCode(parseInt(code, 10)))
+  // Hex numeric: &#x00A0;
+  .replace(/&#x([0-9a-fA-F]+);/g, (_, code) => String.fromCharCode(parseInt(code, 16)));
 }

package/polyglot/liquid/render.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { Color } from '@pushwoosh/kit-constants';
 import { variants } from '@pushwoosh/kit-typography/map';
 import { filters } from './filters';
-import { stringifyScalarOrVariable, unpackScalarOrValue } from './helpers';
+import { decodeHtmlEntities, stringifyScalarOrVariable, unpackScalarOrValue } from './helpers';
 import { ifOperatorFns, voidTags } from './parser';
 // Applies a filter to a value.
 // @param filterName The name of the filter to apply.
@@ -57,7 +57,7 @@ function renderNodesToArray(ast, context, renderTag) {
   for (let i = 0; i < ast.length; i++) {
     const node = ast[i];
     if (node.type === 'Text') {
-      output.push(node.content);
+      output.push(decodeHtmlEntities(node.content));
     } else if (node.type === 'Variable') {
       const variableNode = node;
       const value = variableNode.filters.reduce((acc, filter) => applyFilter(filter.name, acc, filter.args, context), unpackScalarOrValue(variableNode.value, context));

package/polyglot/liquid/types.d.ts

@@ -69,4 +69,5 @@ export type IfOperator = '==' | '!=' | '>' | '<' | '>=' | '<=' | 'contains' | 's
 export type Context = {
     values: any;
     language: string;
+    timezone: string;
 };

package/polyglot/react.d.ts

@@ -1,6 +1,7 @@
 import { type FC, type PropsWithChildren } from 'react';
 import { type LangMessages } from './types';
 type LangProviderProps = {
+    timezone: string;
     language: string;
     languages: Record<string, LangMessages<any>>;
 };

package/polyglot/react.js

@@ -3,6 +3,7 @@ import { stringToAst } from './liquid/parser';
 import { renderToReact, renderToString } from './liquid/render';
 const LangContext = createContext(null);
 export const LangProvider = ({
+  timezone,
   language,
   languages,
   children
@@ -34,7 +35,8 @@ export const LangProvider = ({
         const ast = getAst(message);
         return renderToString(ast, {
           values,
-          language
+          language,
+          timezone
         });
       },
       langReact: allProps => {
@@ -45,11 +47,12 @@ export const LangProvider = ({
         const ast = getAst(message);
         return renderToReact(ast, {
           values,
-          language
+          language,
+          timezone
         });
       }
     };
-  }, [languages, language]);
+  }, [languages, language, timezone]);
   return React.createElement(LangContext.Provider, {
     value: langFnPack
   }, children);