@pushwoosh/dumb-components 1.0.69 → 1.0.71

package/GetStartedPage/GetStartedPage.d.ts

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

package/GetStartedPage/GetStartedPage.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { CheckRoundIcon, LockIcon } from '@pushwoosh/kit-icons';
+import { H1, Paragraph } from '@pushwoosh/kit-typography';
+import { Banner } from '../Banner';
+import { GradientBackground, Wrapper, ContentBox, UnorderedList, UnorderedListItem, UnorderedListIcon, UnorderedListText, Image } from './styles';
+export function GetStartedPage(props) {
+  const {
+    title,
+    description,
+    image,
+    helpText,
+    checkList = [],
+    actions = null
+  } = props;
+  return React.createElement(GradientBackground, null, React.createElement(Wrapper, null, React.createElement(ContentBox, null, React.createElement(Vertical, {
+    "$gap": 16
+  }, React.createElement(Vertical, {
+    "$gap": 4
+  }, React.createElement(H1, null, title), React.createElement(Paragraph, null, description)), !!checkList.length && React.createElement(UnorderedList, null, checkList.map(text => React.createElement(UnorderedListItem, {
+    key: `item-${text}`
+  }, React.createElement(UnorderedListIcon, null, React.createElement(CheckRoundIcon, {
+    color: Color.SUCCESS,
+    size: "small",
+    type: "fill",
+    view: "filled"
+  })), React.createElement(UnorderedListText, null, text))))), helpText && React.createElement(Banner, {
+    type: "info",
+    view: "ghost",
+    title: helpText,
+    icon: React.createElement(LockIcon, {
+      view: "filled",
+      size: "small"
+    })
+  }), actions && !helpText && actions), React.createElement(Image, {
+    alt: title,
+    src: image
+  })));
+}

package/GetStartedPage/index.d.ts

@@ -0,0 +1,2 @@
+export { GetStartedPage } from './GetStartedPage';
+export type { GetStartedPageProps } from './types';

package/GetStartedPage/index.js

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

package/{EmptyPage → GetStartedPage}/styles.d.ts

@@ -1,6 +1,13 @@
-export declare const RootBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const GradientBackground: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentBox: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const UnorderedList: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const UnorderedListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const UnorderedListText: import("styled-components").StyledComponent<"span", any, {
+    $color?: string | undefined;
+    $uppercase?: boolean | undefined;
+    $ellipsis?: boolean | undefined;
+    $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
+}, never>;
 export declare const UnorderedListIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Image: import("styled-components").StyledComponent<"img", any, {}, never>;

package/GetStartedPage/styles.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import { Color, UnitSize } from '@pushwoosh/kit-constants';
+import { Text } from '@pushwoosh/kit-typography';
+export const GradientBackground = styled.div.withConfig({
+  displayName: "GradientBackground",
+  componentId: "sc-6jf7u0-0"
+})(["display:flex;align-items:center;justify-content:center;width:100%;height:100vh;background:linear-gradient(98.98deg,#F4F9FD 0%,#CBD7FF 100%);"]);
+export const Wrapper = styled.div.withConfig({
+  displayName: "Wrapper",
+  componentId: "sc-6jf7u0-1"
+})(["display:flex;align-items:center;justify-content:center;width:", ";gap:40px;"], UnitSize.PAGE_WIDTH);
+export const ContentBox = styled.div.withConfig({
+  displayName: "ContentBox",
+  componentId: "sc-6jf7u0-2"
+})(["display:flex;flex-direction:column;width:340px;gap:24px;"]);
+export const UnorderedList = styled.ul.withConfig({
+  displayName: "UnorderedList",
+  componentId: "sc-6jf7u0-3"
+})(["display:flex;flex-direction:column;padding:0;margin:0;list-style:none;gap:8px;"]);
+export const UnorderedListItem = styled.li.withConfig({
+  displayName: "UnorderedListItem",
+  componentId: "sc-6jf7u0-4"
+})(["display:flex;gap:8px;"]);
+export const UnorderedListText = styled(Text).withConfig({
+  displayName: "UnorderedListText",
+  componentId: "sc-6jf7u0-5"
+})(["padding:4px 0;"]);
+export const UnorderedListIcon = styled.div.withConfig({
+  displayName: "UnorderedListIcon",
+  componentId: "sc-6jf7u0-6"
+})(["display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:", ";border-radius:50%;padding:4px;"], Color.SUCCESS_LIGHT);
+export const Image = styled.img.withConfig({
+  displayName: "Image",
+  componentId: "sc-6jf7u0-7"
+})(["width:400px;"]);

package/GetStartedPage/types.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface GetStartedPageProps {
+    title: string;
+    description: string;
+    image: string;
+    helpText?: string;
+    checkList?: string[];
+    actions?: ReactNode;
+}

package/index.d.ts

@@ -6,7 +6,7 @@ export { Checkbox } from './Checkbox';
 export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs, } from './Drawer';
 export { DatePicker, DatePickerField, DateTimePicker, DateTimePickerField, } from './DateTimePicker';
 export { DropdownMenu, DropdownMenuButton, DropdownMenuSection, DropdownMenuItem, } from './DropdownMenu';
-export { EmptyPage } from './EmptyPage';
+export { GetStartedPage } from './GetStartedPage';
 export { EditableField } from './EditableField';
 export { InputFile } from './InputFile';
 export { Modal, ModalTitle, ModalConfirm, ModalConfirmProvider, useModalConfirm, ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter, } from './Modal';

package/index.js

@@ -6,7 +6,7 @@ export { Checkbox } from './Checkbox';
 export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs } from './Drawer';
 export { DatePicker, DatePickerField, DateTimePicker, DateTimePickerField } from './DateTimePicker';
 export { DropdownMenu, DropdownMenuButton, DropdownMenuSection, DropdownMenuItem } from './DropdownMenu';
-export { EmptyPage } from './EmptyPage';
+export { GetStartedPage } from './GetStartedPage';
 export { EditableField } from './EditableField';
 export { InputFile } from './InputFile';
 export { Modal, ModalTitle, ModalConfirm, ModalConfirmProvider, useModalConfirm, ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter } from './Modal';

package/package.json

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

package/polyglot/liquid/render.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import styled from 'styled-components';
 import { Color } from '@pushwoosh/kit-constants';
-import { Text } from '@pushwoosh/kit-typography';
+import { variants } from '@pushwoosh/kit-typography/map';
 import { filters } from './filters';
 import { stringifyScalarOrVariable, unpackScalarOrValue } from './helpers';
 import { ifOperatorFns } from './parser';
@@ -84,25 +85,25 @@ function getColor(color) {
   }
   return color;
 }
+const Txt = styled.span.withConfig({
+  displayName: "Txt",
+  componentId: "sc-nm71u5-0"
+})(["", " ", ""], ({
+  $color
+}) => $color && `color: ${$color};`, ({
+  $variant
+}) => $variant && variants[$variant]);
 export function renderToReact(ast, context) {
   return renderNodesToArray(ast, context, (tagNode, children, key) => {
     const TagName = tagNode.name;
     const props = Object.fromEntries(Object.entries(tagNode.params).map(([key, value]) => [key, unpackScalarOrValue(value, context)]));
     if (TagName === 'text') {
-      return [React.createElement(Text, {
+      return [React.createElement(Txt, {
         "$variant": props.variant,
         "$color": getColor(props.color),
         key: key
       }, children)];
     }
-    if (TagName === 'color') {
-      return [React.createElement("span", {
-        style: {
-          color: getColor(props.color)
-        },
-        key: key
-      }, children)];
-    }
     return [React.createElement(TagName, {
       ...props,
       key: key

package/EmptyPage/EmptyPage.d.ts

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

package/EmptyPage/EmptyPage.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Color } from '@pushwoosh/kit-constants';
-import { Vertical } from '@pushwoosh/kit-helpers';
-import { CheckRoundIcon } from '@pushwoosh/kit-icons';
-import { H1, Paragraph } from '@pushwoosh/kit-typography';
-import { RootBox, ContentBox, UnorderedList, UnorderedListItem, UnorderedListIcon, Image } from './styles';
-export function EmptyPage(props) {
-  const {
-    title,
-    description,
-    checkList = [],
-    image,
-    actions
-  } = props;
-  return React.createElement(RootBox, null, React.createElement(ContentBox, null, React.createElement(Vertical, {
-    "$gap": 16
-  }, React.createElement(Vertical, {
-    "$gap": 4
-  }, React.createElement(H1, null, title), React.createElement(Paragraph, null, description)), !!checkList.length && React.createElement(UnorderedList, null, checkList.map(text => React.createElement(UnorderedListItem, {
-    key: `item-${text}`
-  }, React.createElement(UnorderedListIcon, null, React.createElement(CheckRoundIcon, {
-    color: Color.SUCCESS,
-    size: "small",
-    type: "fill",
-    view: "filled"
-  })), text)))), actions), React.createElement(Image, {
-    alt: title,
-    src: image
-  }));
-}

package/EmptyPage/index.d.ts

@@ -1,2 +0,0 @@
-export { EmptyPage } from './EmptyPage';
-export type { EmptyPageProps } from './types';

package/EmptyPage/index.js

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

package/EmptyPage/styles.js

@@ -1,26 +0,0 @@
-import styled from 'styled-components';
-import { UnitSize } from '@pushwoosh/kit-constants';
-export const RootBox = styled.div.withConfig({
-  displayName: "RootBox",
-  componentId: "sc-rxhe82-0"
-})(["display:flex;align-items:center;justify-content:center;width:", ";gap:40px;"], UnitSize.PAGE_WIDTH);
-export const ContentBox = styled.div.withConfig({
-  displayName: "ContentBox",
-  componentId: "sc-rxhe82-1"
-})(["display:flex;flex-direction:column;width:340px;gap:24px;"]);
-export const UnorderedList = styled.ul.withConfig({
-  displayName: "UnorderedList",
-  componentId: "sc-rxhe82-2"
-})(["display:flex;flex-direction:column;padding:0;margin:0;list-style:none;gap:8px;"]);
-export const UnorderedListItem = styled.li.withConfig({
-  displayName: "UnorderedListItem",
-  componentId: "sc-rxhe82-3"
-})(["display:flex;align-items:center;gap:8px;"]);
-export const UnorderedListIcon = styled.div.withConfig({
-  displayName: "UnorderedListIcon",
-  componentId: "sc-rxhe82-4"
-})(["display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:#64DB2C24;border-radius:50%;padding:4px;"]);
-export const Image = styled.img.withConfig({
-  displayName: "Image",
-  componentId: "sc-rxhe82-5"
-})(["max-width:380px;"]);

package/EmptyPage/types.d.ts

@@ -1,8 +0,0 @@
-import type { ReactNode } from 'react';
-export interface EmptyPageProps {
-    title: string;
-    description: string;
-    checkList: string[];
-    image: string;
-    actions: ReactNode;
-}