@pushwoosh/dumb-components 1.1.13 → 1.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/EmailTemplatePreview/EmailTemplatePreview.js +4 -6
  2. package/EmailTemplatePreview/helpers.d.ts +1 -0
  3. package/EmailTemplatePreview/helpers.js +10 -2
  4. package/Radio/Radio.js +5 -3
  5. package/Radio/mappers.d.ts +5 -0
  6. package/Radio/mappers.js +11 -0
  7. package/Radio/styles.d.ts +3 -2
  8. package/Radio/styles.js +30 -10
  9. package/Radio/types.d.ts +3 -3
  10. package/package.json +1 -1
  11. package/Radio/maps.d.ts +0 -3
  12. package/Radio/maps.js +0 -8
package/EmailTemplatePreview/EmailTemplatePreview.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Liquid } from 'liquidjs';
2
2
  import React, { useMemo, useState } from 'react';
3
- import { replacePlaceholders } from './helpers';
3
+ import { replaceLocalization, replacePlaceholders } from './helpers';
4
4
  import { IframeStyled } from './styles';
5
5
  const createLiquidInstance = () => {
6
6
  const liquidInstance = new Liquid();
@@ -29,11 +29,9 @@ export function EmailTemplatePreview(props) {
29
29
  const [liquidInstance] = useState(createLiquidInstance);
30
30
  const src = useMemo(() => {
31
31
  try {
32
- const realValues = {
33
- ...localization,
34
- ...values
35
- };
36
- return liquidInstance.parseAndRenderSync(replacePlaceholders(template, realValues), realValues);
32
+ const withLocalization = replaceLocalization(template, localization);
33
+ const withDynamicContent = replacePlaceholders(withLocalization, values);
34
+ return liquidInstance.parseAndRenderSync(withDynamicContent, values);
37
35
  } catch (e) {
38
36
  console.error('Error in PreviewIframe', e);
39
37
  return `<body style="font-size: 24px; color: darkred">${e.message}</body>`;
package/EmailTemplatePreview/helpers.d.ts CHANGED
@@ -1 +1,2 @@
1
+ export declare function replaceLocalization(str: string, values: Record<string, string>): string;
1
2
  export declare function replacePlaceholders(str: string, values: Record<string, string>): string;
package/EmailTemplatePreview/helpers.js CHANGED
@@ -1,5 +1,13 @@
1
+ export function replaceLocalization(str, values) {
2
+ const re = /{{([0-9A-Za-z_ \-.[\]]+)\|(text|html|color)\|([^}]*)?}}/g;
3
+ return str.replace(re, (_, key, _type, defaultValue) => {
4
+ return (key in values ? values[key] : defaultValue) || '';
5
+ });
6
+ }
1
7
  export function replacePlaceholders(str, values) {
2
- return str.replace(/\{([^{|}]+)\|([^|}]+)(?:\|([^}]*))?}/g, (_, varName, _modifier, defaultValue) => {
3
- return (varName in values ? values[varName] : defaultValue) || '';
8
+ const allAvailableModifiers = ['CapitalizeFirst', 'CapitalizeAllFirst', 'UPPERCASE', 'lowercase', 'regular', 'cent', 'dollar', 'comma', 'euro', 'jpy', 'lira', 'M-d-y', 'm-d-y', 'M d y', 'M d Y', 'l', 'M d', 'H:i', 'm-d-y H:i'];
9
+ const re = new RegExp(`{([0-9A-Za-z_ \\-]{1,64})\\|(${allAvailableModifiers.join('|')})(?:\\|([^}]*))?}`, 'g');
10
+ return str.replace(re, (_, key, _modifier, defaultValue) => {
11
+ return (key in values ? values[key] : defaultValue) || '';
4
12
  });
5
13
  }
package/Radio/Radio.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { useState } from 'react';
2
+ import { Color } from '@pushwoosh/kit-constants';
2
3
  import { NativeLabel, NativeRadio } from './styles';
3
4
  let counter = 0;
4
5
  export function Radio(props) {
@@ -7,10 +8,10 @@ export function Radio(props) {
7
8
  id,
8
9
  name,
9
10
  value,
10
- color,
11
+ type = 'normal',
11
12
  isChecked,
12
13
  isDisabled,
13
- size = 'normal',
14
+ size = 'regular',
14
15
  onChange,
15
16
  onBlur
16
17
  } = props;
@@ -23,7 +24,7 @@ export function Radio(props) {
23
24
  });
24
25
  return React.createElement(NativeLabel, {
25
26
  htmlFor: localId,
26
- "$color": isDisabled ? 'locked' : color,
27
+ "$color": isDisabled ? Color.LOCKED : Color.MAIN,
27
28
  "$size": size
28
29
  }, React.createElement(NativeRadio, {
29
30
  type: "radio",
@@ -33,6 +34,7 @@ export function Radio(props) {
33
34
  checked: isChecked,
34
35
  disabled: isDisabled,
35
36
  "$size": size,
37
+ "$type": type,
36
38
  onChange: event => onChange === null || onChange === void 0 ? void 0 : onChange(event.currentTarget.value),
37
39
  onBlur: onBlur
38
40
  }), label && React.createElement("span", null, label));
package/Radio/mappers.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { type RadioType } from './types';
2
+ export declare const ColorByType: Record<RadioType, {
3
+ checked: string;
4
+ notChecked: string;
5
+ }>;
package/Radio/mappers.js ADDED
@@ -0,0 +1,11 @@
1
+ import { Color } from '@pushwoosh/kit-constants';
2
+ export const ColorByType = {
3
+ normal: {
4
+ checked: Color.PRIMARY,
5
+ notChecked: Color.PHANTOM
6
+ },
7
+ error: {
8
+ checked: Color.DANGER,
9
+ notChecked: Color.DANGER
10
+ }
11
+ };
package/Radio/styles.d.ts CHANGED
@@ -1,8 +1,9 @@
1
- import type { RadioSize, RadioTextColor } from './types';
1
+ import type { RadioSize, RadioType } from './types';
2
2
  export declare const NativeRadio: import("styled-components").StyledComponent<"input", any, {
3
3
  $size: RadioSize;
4
+ $type: RadioType;
4
5
  }, never>;
5
6
  export declare const NativeLabel: import("styled-components").StyledComponent<"label", any, {
6
- $color?: RadioTextColor;
7
+ $color: string;
7
8
  $size: RadioSize;
8
9
  }, never>;
package/Radio/styles.js CHANGED
@@ -1,23 +1,43 @@
1
+ import { rgba } from 'polished';
1
2
  import styled from 'styled-components';
2
- import { Color, Spacing, FontSize, LineHeight } from '@pushwoosh/kit-constants';
3
- import { ColorMap } from './maps';
3
+ import { Color, FontSize, LineHeight } from '@pushwoosh/kit-constants';
4
+ import { ColorByType } from './mappers';
4
5
  export const NativeRadio = styled.input.withConfig({
5
6
  displayName: "NativeRadio",
6
7
  componentId: "sc-34lgtl-0"
7
- })(["appearance:none;-webkit-appearance:none;-moz-appearance:none;width:", ";height:", ";border:", ";border-radius:50%;background-color:", ";transition:border 0.1s,background-color 0.1s;cursor:pointer;&:focus{outline:none;}&[type=radio]:hover{border-color:", ";}&[type=radio]:disabled{cursor:not-allowed;border-color:", ";background-color:", ";}&[type=radio]:checked{border:", ";}&[type=radio]:checked:hover{border-color:", ";}&[type=radio]:checked:disabled{border-color:", ";background-color:", ";}"], ({
8
+ })(["appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;width:", ";height:", ";border:", ";border-radius:50%;background-color:", ";transition:border 0.1s,background-color 0.1s;cursor:pointer;&:focus{outline:none;}&[type=radio]:checked:disabled{cursor:not-allowed;background-color:", ";border:", ";}&[type=radio]:not(:checked):disabled{cursor:not-allowed;border-color:", ";background-color:", ";}&[type=radio]:checked{border:", ";background-color:", ";}&[type=radio]:not(:checked):not(:disabled):hover::before{background:", ";content:\"\";position:absolute;top:", ";left:", ";width:", ";height:", ";border-radius:50%;transition:background 0.2s;}"], ({
8
9
  $size
9
- }) => $size === 'compact' ? '12px' : '20px', ({
10
+ }) => $size === 'compact' ? '16px' : '24px', ({
10
11
  $size
11
- }) => $size === 'compact' ? '12px' : '20px', ({
12
+ }) => $size === 'compact' ? '16px' : '24px', ({
13
+ $type
14
+ }) => `2px solid ${ColorByType[$type].notChecked}`, Color.CLEAR, Color.FORM, ({
12
15
  $size
13
- }) => `${$size === 'compact' ? '1px' : '2px'} solid ${Color.PHANTOM}`, Color.CLEAR, Color.PRIMARY_HOVER, Color.LOCKED, Color.FROZEN, ({
16
+ }) => `${$size === 'compact' ? '4px' : '7px'} solid ${Color.LOCKED}`, Color.LOCKED, Color.FORM, ({
17
+ $size,
18
+ $type
19
+ }) => `${$size === 'compact' ? '4px' : '7px'} solid ${ColorByType[$type].checked}`, Color.CLEAR, ({
20
+ $type
21
+ }) => rgba(ColorByType[$type].notChecked, 0.3), ({
14
22
  $size
15
- }) => `${$size === 'compact' ? '4px' : '6px'} solid ${Color.PRIMARY}`, Color.PRIMARY_HOVER, Color.LOCKED, Color.FROZEN);
23
+ }) => $size === 'compact' ? '3px' : '5px', ({
24
+ $size
25
+ }) => $size === 'compact' ? '3px' : '5px', ({
26
+ $size
27
+ }) => $size === 'compact' ? '6px' : '10px', ({
28
+ $size
29
+ }) => $size === 'compact' ? '6px' : '10px');
16
30
  export const NativeLabel = styled.label.withConfig({
17
31
  displayName: "NativeLabel",
18
32
  componentId: "sc-34lgtl-1"
19
- })(["display:inline-flex;align-items:center;font-size:", ";line-height:", ";user-select:none;", " & > ", "{&:not(:last-child){margin-right:", ";}}"], ({
33
+ })(["display:inline-flex;align-items:center;font-size:", ";line-height:", ";span{max-width:", ";white-space:normal;overflow-wrap:break-word;}user-select:none;", " &:has(input:disabled){cursor:not-allowed;}&:has(input:not(:disabled)){cursor:pointer;}& > ", "{&:not(:last-child){margin-right:", ";}}"], ({
20
34
  $size
21
- }) => $size === 'compact' ? FontSize.SMALL : FontSize.REGULAR, LineHeight.REGULAR, ({
35
+ }) => $size === 'compact' ? FontSize.SMALL : FontSize.REGULAR, ({
36
+ $size
37
+ }) => $size === 'compact' ? LineHeight.SMALL : LineHeight.REGULAR, ({
38
+ $size
39
+ }) => $size === 'compact' ? '600px' : '800px', ({
22
40
  $color
23
- }) => $color && `color: ${ColorMap[$color]};`, NativeRadio, Spacing.S3);
41
+ }) => `color: ${$color};`, NativeRadio, ({
42
+ $size
43
+ }) => $size === 'compact' ? '6px' : '8px');
package/Radio/types.d.ts CHANGED
@@ -1,11 +1,11 @@
1
- export type RadioTextColor = 'main' | 'primary' | 'danger' | 'current' | 'locked';
2
- export type RadioSize = 'normal' | 'compact';
1
+ export type RadioType = 'normal' | 'error';
2
+ export type RadioSize = 'regular' | 'compact';
3
3
  export type RadioProps = {
4
4
  label?: string;
5
5
  id?: string;
6
6
  name?: string;
7
7
  value?: string;
8
- color?: RadioTextColor;
8
+ type?: RadioType;
9
9
  isChecked?: boolean;
10
10
  isDisabled?: boolean;
11
11
  size?: RadioSize;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pushwoosh/dumb-components",
3
- "version": "1.1.13",
3
+ "version": "1.1.15",
4
4
  "description": "React components to build Pushwoosh products",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
package/Radio/maps.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { Color } from '@pushwoosh/kit-constants';
2
- import type { RadioTextColor } from './types';
3
- export declare const ColorMap: Record<RadioTextColor, Color>;
package/Radio/maps.js DELETED
@@ -1,8 +0,0 @@
1
- import { Color } from '@pushwoosh/kit-constants';
2
- export const ColorMap = {
3
- main: Color.MAIN,
4
- primary: Color.PRIMARY,
5
- danger: Color.DANGER,
6
- current: Color.CURRENT,
7
- locked: Color.LOCKED
8
- };