@pushwoosh/dumb-components 0.0.16 → 0.0.18

package/EmailTemplatePreview/components/NoEmailTemplatePreview/NoEmailTemplatePreview.js

@@ -3,7 +3,7 @@ import { Spacing } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
 import pwLogo from './assets/PW_logo.svg';
 import { Container, PreviewMock } from './styled';
-import { LockedText, LockedTitle } from '../../../styles';
+import { LockedText, LockedTitle } from '../../../common';
 export const NoEmailTemplatePreview = () => {
   return React.createElement(Container, {
     "$gap": Spacing.S4,

package/NumberPicker/AutosizeInput.constants.d.ts

@@ -0,0 +1 @@
+export declare const minimalWidth = 12;

package/NumberPicker/AutosizeInput.constants.js

@@ -0,0 +1 @@
+export const minimalWidth = 12; // pixels

package/NumberPicker/AutosizeInput.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { AutosizeInputProps } from './AutosizeInput.types';
+export declare function AutosizeInput(props: AutosizeInputProps): ReactElement;

package/NumberPicker/AutosizeInput.js

@@ -0,0 +1,37 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { minimalWidth } from './AutosizeInput.constants';
+import { Hidden } from './AutosizeInput.styled';
+import { InputStyled } from './styled';
+export function AutosizeInput(props) {
+  const {
+    value,
+    placeholder,
+    isDisabled,
+    onChange,
+    onKeyUp,
+    onKeyDown,
+    onBlur
+  } = props;
+  const hiddenRef = useRef(null);
+  const [width, setWidth] = useState(minimalWidth);
+  useEffect(() => {
+    const {
+      offsetWidth: hiddenWidth
+    } = hiddenRef.current;
+    setWidth(hiddenWidth + minimalWidth);
+  }, [value]);
+  return React.createElement(React.Fragment, null, React.createElement(InputStyled, {
+    style: {
+      width
+    },
+    value: value,
+    placeholder: placeholder,
+    disabled: isDisabled,
+    onChange: onChange,
+    onKeyUp: onKeyUp,
+    onKeyDown: onKeyDown,
+    onBlur: onBlur
+  }), React.createElement(Hidden, {
+    ref: hiddenRef
+  }, value || placeholder));
+}

package/NumberPicker/AutosizeInput.styled.d.ts

@@ -0,0 +1 @@
+export declare const Hidden: import("styled-components").StyledComponent<"span", any, {}, never>;

package/NumberPicker/AutosizeInput.styled.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const Hidden = styled.span.withConfig({
+  displayName: "Hidden",
+  componentId: "sc-dce14p-0"
+})(["position:absolute;visibility:hidden;"]);

package/NumberPicker/AutosizeInput.types.d.ts

@@ -0,0 +1,10 @@
+import type { ChangeEvent, KeyboardEvent, FocusEvent } from 'react';
+export interface AutosizeInputProps {
+    value: string;
+    placeholder?: string;
+    isDisabled?: boolean;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onKeyUp: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+}

package/NumberPicker/AutosizeInput.types.js

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

package/NumberPicker/NumberPicker.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NumberPickerProps } from './types';
+export declare function NumberPicker(props: NumberPickerProps): ReactElement;

package/NumberPicker/NumberPicker.js

@@ -0,0 +1,126 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { Vertical, useMount, usePersistentFunction } from '@pushwoosh/kit-helpers';
+import { ChevronIcon } from '@pushwoosh/kit-icons';
+import { AutosizeInput } from './AutosizeInput';
+import { intVal, isStringInteger } from './helpers';
+import { Hint, SingleInputFrame, InputStyled } from './styled';
+export function NumberPicker(props) {
+  const {
+    value,
+    hint,
+    step = 1,
+    placeholder,
+    focusOnMount,
+    minValue,
+    maxValue,
+    autoSize,
+    isDisabled,
+    onChange,
+    onSubmit
+  } = props;
+  const ref = useRef(null);
+  const [autoDiff, setAutoDiff] = useState(0);
+  const [localValue, setLocalValue] = useState('');
+  const onChangeDiff = usePersistentFunction(diff => {
+    const newValue = intVal(value) + diff;
+    const minValueValid = minValue === undefined || newValue >= minValue;
+    const maxValueValid = maxValue === undefined || newValue <= maxValue;
+    if (minValueValid && maxValueValid) {
+      onChange(newValue);
+    }
+  });
+  useEffect(() => {
+    setLocalValue(value !== undefined ? value.toString() : '');
+  }, [value]);
+  useEffect(() => {
+    if (!autoDiff) {
+      return;
+    }
+    const interval = setInterval(() => {
+      onChangeDiff(autoDiff);
+    }, 250);
+    return () => clearInterval(interval);
+  }, [autoDiff, onChangeDiff]);
+  useMount(() => {
+    if (focusOnMount && ref.current) {
+      ref.current.children[0].focus();
+    }
+  });
+  const handleChange = event => {
+    const val = event.target.value;
+    if (val === '' || val === '-') {
+      setLocalValue(val);
+      return;
+    }
+    const parsedValue = intVal(val);
+    if (parsedValue === 0 && val !== '0') {
+      return;
+    }
+    setLocalValue(val);
+    const minValueValid = minValue === undefined || parsedValue >= minValue;
+    const maxValueValid = maxValue === undefined || parsedValue <= maxValue;
+    if (isStringInteger(val) && minValueValid && maxValueValid) {
+      onChange(parsedValue);
+    }
+  };
+  const handleKeyDown = event => {
+    if (onSubmit && event.key === 'Enter' && isStringInteger(localValue)) {
+      onSubmit();
+    }
+    if (event.key === 'ArrowUp') {
+      onChangeDiff(1);
+      setAutoDiff(1);
+    }
+    if (event.key === 'ArrowDown') {
+      onChangeDiff(-1);
+      setAutoDiff(-1);
+    }
+  };
+  const resetAutoDiff = () => setAutoDiff(0);
+  const InputComponent = autoSize ? AutosizeInput : InputStyled;
+  return React.createElement(SingleInputFrame, {
+    ref: ref,
+    "$hasHint": !!hint,
+    "$isDisabled": isDisabled
+  }, React.createElement(InputComponent, {
+    value: localValue,
+    placeholder: placeholder,
+    isDisabled: isDisabled,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onKeyUp: resetAutoDiff,
+    onBlur: event => {
+      if (!event.target.value && value === undefined) {
+        return;
+      }
+      let blurValue = intVal(event.target.value);
+      const minValueValid = minValue === undefined || blurValue >= minValue;
+      const maxValueValid = maxValue === undefined || blurValue <= maxValue;
+      if (!maxValueValid) {
+        blurValue = maxValue;
+      } else if (!minValueValid) {
+        blurValue = minValue;
+      }
+      onChange(blurValue);
+      setLocalValue(`${blurValue}`);
+    }
+  }), hint && React.createElement(Hint, null, hint), React.createElement(Vertical, {
+    "$gap": 1
+  }, React.createElement("div", null, React.createElement(ChevronIcon, {
+    direction: "up",
+    size: "small",
+    "aria-disabled": "true",
+    onClick: () => onChangeDiff(step),
+    onMouseDown: () => setAutoDiff(step),
+    onMouseUp: resetAutoDiff,
+    onMouseLeave: resetAutoDiff
+  })), React.createElement("div", null, React.createElement(ChevronIcon, {
+    size: "small",
+    direction: "down",
+    "aria-disabled": isDisabled,
+    onClick: () => onChangeDiff(-1 * step),
+    onMouseDown: () => setAutoDiff(-1 * step),
+    onMouseUp: resetAutoDiff,
+    onMouseLeave: resetAutoDiff
+  }))));
+}

package/NumberPicker/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const intVal: (value: any) => number;
+export declare const isStringInteger: (value: string) => boolean;

package/NumberPicker/helpers.js

@@ -0,0 +1,5 @@
+export const intVal = value => {
+  const num = parseInt(value, 10);
+  return Number.isNaN(num) ? 0 : num;
+};
+export const isStringInteger = value => /^-?\d+$/.test(value);

package/NumberPicker/index.d.ts

@@ -0,0 +1 @@
+export { NumberPicker } from './NumberPicker';

package/NumberPicker/index.js

@@ -0,0 +1 @@
+export { NumberPicker } from './NumberPicker';

package/NumberPicker/styled.d.ts

@@ -0,0 +1,10 @@
+export declare const InputStyled: import("styled-components").StyledComponent<"input", any, {
+    type: "text";
+}, "type">;
+export declare const Hint: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SingleInputFrame: import("styled-components").StyledComponent<"div", any, {
+    $empty?: boolean;
+    $error?: boolean;
+    $hasHint: boolean;
+    $isDisabled?: boolean;
+}, never>;

package/NumberPicker/styled.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { Color, ShapeRadius, Spacing, UnitSize } from '@pushwoosh/kit-constants';
+export const InputStyled = styled.input.attrs({
+  type: 'text'
+}).withConfig({
+  displayName: "InputStyled",
+  componentId: "sc-6ibrwh-0"
+})(["&:disabled{background-color:", ";}"], Color.FROZEN);
+export const Hint = styled.div.withConfig({
+  displayName: "Hint",
+  componentId: "sc-6ibrwh-1"
+})(["display:flex;align-items:center;font-size:100%;line-height:initial;padding-right:", ";color:", ";pointer-events:none;"], Spacing.S3, Color.PHANTOM);
+export const SingleInputFrame = styled.div.withConfig({
+  displayName: "SingleInputFrame",
+  componentId: "sc-6ibrwh-2"
+})(["display:inline-grid;grid-template-columns:", ";box-sizing:border-box;align-items:center;height:", ";position:relative;padding-left:", ";color:", ";border:1px solid ", ";border-radius:", ";background-color:", ";cursor:pointer;pointer-events:", ";&:focus-within{border-color:", ";}& > input{color:", ";height:34px;border:none;padding:0;outline:none;line-height:140%;}& > div:last-of-type{height:34px;padding-left:1px;background-color:", ";border-radius:0 ", " ", " 0;& > div{display:flex;justify-content:center;align-items:center;color:", ";background-color:", ";cursor:pointer;&:hover > *{transform:scale(1.3);}&:first-of-type{border-top-right-radius:", ";}&:last-of-type{border-bottom-right-radius:", ";}}}"], ({
+  $hasHint
+}) => $hasHint ? '1fr max-content 21px' : '1fr 21px', UnitSize.FIELD_HEIGHT, Spacing.S4, ({
+  $empty
+}) => $empty ? Color.BRIGHT : Color.MAIN, ({
+  $error
+}) => $error ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, ({
+  $isDisabled
+}) => $isDisabled ? Color.FROZEN : Color.CLEAR, ({
+  $isDisabled
+}) => $isDisabled ? 'none' : 'auto', Color.BRIGHT, Color.MAIN, Color.FORM, ShapeRadius.CONTROL, ShapeRadius.CONTROL, Color.MAIN, Color.FROZEN, ShapeRadius.CONTROL, ShapeRadius.CONTROL);

package/NumberPicker/types.d.ts

@@ -0,0 +1,13 @@
+export interface NumberPickerProps {
+    value: number | undefined;
+    hint?: string;
+    step?: number;
+    placeholder?: string;
+    focusOnMount?: boolean;
+    minValue?: number;
+    maxValue?: number;
+    autoSize?: boolean;
+    isDisabled?: boolean;
+    onChange: (value: number) => void;
+    onSubmit?: () => void;
+}

package/NumberPicker/types.js

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

package/index.d.ts

@@ -1,6 +1,8 @@
 export { ProgressBar } from './ProgressBar';
 export * from './Tabs';
 export { StatisticCard } from './StatisticCard';
-export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
+export { EmailTemplatePreview, NoEmailTemplatePreview, } from './EmailTemplatePreview';
 export { PushPreview } from './PushPreview';
 export { ExportResult } from './ExportResult';
+export { NativeInput, NativeTextarea, NativeSelect, } from './native';
+export { NumberPicker } from './NumberPicker';

package/index.js

@@ -3,4 +3,6 @@ export * from './Tabs';
 export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
 export { PushPreview } from './PushPreview';
-export { ExportResult } from './ExportResult';
+export { ExportResult } from './ExportResult';
+export { NativeInput, NativeTextarea, NativeSelect } from './native';
+export { NumberPicker } from './NumberPicker';

package/native/Input.d.ts

@@ -0,0 +1,3 @@
+export declare const NativeInput: import("styled-components").StyledComponent<"input", any, {
+    $isErrored?: boolean;
+}, never>;

package/native/Input.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Color, FontSize, LineHeight, Spacing, ShapeRadius, UnitSize } from '@pushwoosh/kit-constants';
+export const NativeInput = styled.input.withConfig({
+  displayName: "NativeInput",
+  componentId: "sc-oqkcxd-0"
+})(["height:", ";padding:0 calc(", " - 1px);border:1px solid ", ";border-radius:", ";font-size:", ";line-height:", ";background-color:", ";&:focus{outline:none;border-color:", ";}&:disabled{background-color:", ";}&::placeholder{color:", ";}"], UnitSize.FIELD_HEIGHT, Spacing.S4, ({
+  $isErrored
+}) => $isErrored ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, FontSize.REGULAR, LineHeight.REGULAR, Color.CLEAR, Color.BRIGHT, Color.FROZEN, Color.PHANTOM);

package/native/Select.d.ts

@@ -0,0 +1,3 @@
+export declare const NativeSelect: import("styled-components").StyledComponent<"select", any, {
+    $isErrored?: boolean;
+}, never>;

package/native/Select.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { Color, FontSize, ShapeRadius, Spacing, UnitSize } from '@pushwoosh/kit-constants';
+export const NativeSelect = styled.select.withConfig({
+  displayName: "NativeSelect",
+  componentId: "sc-1fsh619-0"
+})(["height:", ";padding:0 ", " 0 ", ";border:1px solid ", ";border-radius:", ";font-size:", ";color:", ";background-color:", ";background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 16px) calc(1em + 1px),calc(100% - 11px) calc(1em + 1px);background-size:5px 5px;background-repeat:no-repeat;appearance:none;&:hover{border-color:", ";}&:focus{outline:none;border:1px solid ", ";}&:read-only{border:1px solid ", ";}&:disabled{background-color:", ";cursor:not-allowed;}&:read-only{border:1px solid ", ";}&:read-only:hover{border-color:", ";}&::placeholder{color:", ";}"], UnitSize.FIELD_HEIGHT, Spacing.S7, Spacing.S4, Color.FORM, ShapeRadius.CONTROL, FontSize.REGULAR, Color.MAIN, Color.CLEAR, Color.PHANTOM, Color.BRIGHT, Color.FORM, Color.FROZEN, ({
+  $isErrored
+}) => $isErrored ? Color.DANGER : Color.FORM, ({
+  $isErrored
+}) => $isErrored ? Color.DANGER : Color.PHANTOM, Color.PHANTOM);

package/native/Textarea.d.ts

@@ -0,0 +1,3 @@
+export declare const NativeTextarea: import("styled-components").StyledComponent<"textarea", any, {
+    $isErrored?: boolean;
+}, never>;

package/native/Textarea.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Color, FontSize, LineHeight, Spacing, ShapeRadius } from '@pushwoosh/kit-constants';
+export const NativeTextarea = styled.textarea.withConfig({
+  displayName: "NativeTextarea",
+  componentId: "sc-1xe83i4-0"
+})(["min-height:56px;padding:", " ", ";border:1px solid ", ";border-radius:", ";font-size:", ";line-height:", ";background-color:", ";&:focus{outline:none;border-color:", ";}&:disabled{background-color:", ";}&::placeholder{color:", ";}"], Spacing.S3, Spacing.S4, ({
+  $isErrored
+}) => $isErrored ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, FontSize.REGULAR, LineHeight.REGULAR, Color.CLEAR, Color.BRIGHT, Color.FROZEN, Color.PHANTOM);

package/native/index.d.ts

@@ -0,0 +1,3 @@
+export { NativeInput } from './Input';
+export { NativeTextarea } from './Textarea';
+export { NativeSelect } from './Select';

package/native/index.js

@@ -0,0 +1,3 @@
+export { NativeInput } from './Input';
+export { NativeTextarea } from './Textarea';
+export { NativeSelect } from './Select';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -16,7 +16,7 @@
   },
   "pre-commit": "check",
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^1.0.8",
+    "@pushwoosh/frontend-builder-engine": "^1.0.11",
     "@pushwoosh/kit-constants": "^1.6.7",
     "@pushwoosh/kit-dropdown-menu": "^1.6.8",
     "@types/lodash": "^4.17.13",

package/styles.d.ts

@@ -1,8 +0,0 @@
-import { H5 } from '@pushwoosh/kit-typography';
-export declare const LockedTitle: import("styled-components").StyledComponent<typeof H5, any, {
-    $uppercase?: boolean;
-}, never>;
-export declare const LockedText: import("styled-components").StyledComponent<"div", any, {
-    $uppercase?: boolean;
-    $small?: boolean;
-}, never>;

package/styles.js

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-import { Color, FontSize } from '@pushwoosh/kit-constants';
-import { H5 } from '@pushwoosh/kit-typography';
-export const LockedTitle = styled(H5).withConfig({
-  displayName: "LockedTitle",
-  componentId: "sc-86bd6t-0"
-})(["text-transform:", ";color:", ";text-overflow:ellipsis;"], ({
-  $uppercase
-}) => $uppercase ? 'uppercase' : 'initial', Color.LOCKED);
-export const LockedText = styled.div.withConfig({
-  displayName: "LockedText",
-  componentId: "sc-86bd6t-1"
-})(["text-transform:", ";font-size:", ";color:", ";"], ({
-  $uppercase
-}) => $uppercase ? 'uppercase' : 'initial', ({
-  $small
-}) => $small ? FontSize.SMALL : 'initial', Color.LOCKED);