@pushwoosh/smart-components-kit 0.4.5 → 0.4.6

package/PlatformsConfigurationDrawer/PlatformsConfigurationDrawer.d.ts

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

package/PlatformsConfigurationDrawer/PlatformsConfigurationDrawer.js

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { Drawer, DrawerBody } from '@pushwoosh/kit-drawer';
+import { DesktopPage } from './components/DesktopPage';
+import { MainPage } from './components/MainPage';
+import { MobilePage } from './components/MobilePage';
+export function PlatformsConfigurationDrawer(props) {
+  const {
+    application,
+    isOpen,
+    onClose
+  } = props;
+  const [isOpenMobilePage, setIsOpenMobilePage] = useState(false);
+  const [isOpenDesktopPage, setIsOpenDesktopPage] = useState(false);
+  const toggleMobilePage = () => setIsOpenMobilePage(prev => !prev);
+  const toggleDesktopPage = () => setIsOpenDesktopPage(prev => !prev);
+  const onCloseHandler = () => {
+    setIsOpenMobilePage(false);
+    setIsOpenDesktopPage(false);
+    onClose();
+  };
+  return React.createElement(Drawer, {
+    size: "medium",
+    isOpen: isOpen,
+    onClose: onClose
+  }, React.createElement(DrawerBody, null, isOpenMobilePage && React.createElement(MobilePage, {
+    application: application,
+    onBack: toggleMobilePage,
+    onClose: onCloseHandler
+  }), isOpenDesktopPage && React.createElement(DesktopPage, {
+    application: application,
+    onBack: toggleDesktopPage,
+    onClose: onCloseHandler
+  }), !isOpenDesktopPage && !isOpenMobilePage && React.createElement(MainPage, {
+    application: application,
+    onClickMobile: toggleMobilePage,
+    onClickDesktop: toggleDesktopPage,
+    onClose: onCloseHandler
+  })));
+}

package/PlatformsConfigurationDrawer/components/DesktopPage/DesktopPage.d.ts

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

package/PlatformsConfigurationDrawer/components/DesktopPage/DesktopPage.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Button } from '@pushwoosh/kit-button';
+import { Spacing, Color, AllPlatforms } from '@pushwoosh/kit-constants';
+import { Vertical, Columns } from '@pushwoosh/kit-helpers';
+import { ArrowRoundIcon, CloseIcon, PlatformLogoIcon } from '@pushwoosh/kit-icons';
+import { H2, H4, Text } from '@pushwoosh/kit-typography';
+import { ColumnsWrapper, BreadCrumbs, Header, Close, Card, CardIcon } from '../../styled';
+export function DesktopPage(props) {
+  const {
+    application,
+    onBack,
+    onClose
+  } = props;
+  const hasWindowsPlatform = Object.hasOwn((application === null || application === void 0 ? void 0 : application.platforms) || {}, AllPlatforms.Windows);
+  const hasMacOSPlatform = Object.hasOwn((application === null || application === void 0 ? void 0 : application.platforms) || {}, AllPlatforms.OSX);
+  return React.createElement(React.Fragment, null, React.createElement(Header, null, React.createElement(ColumnsWrapper, null, React.createElement(Columns, {
+    "$sizes": "auto 1fr auto",
+    "$gap": Spacing.S2,
+    "$alignItems": "center"
+  }, React.createElement(Button, {
+    color: "primary",
+    view: "ghost",
+    onClick: onBack
+  }, React.createElement(ArrowRoundIcon, {
+    direction: "left",
+    size: "medium",
+    view: "filled"
+  })), React.createElement(H2, null, "Platform for desktop app"), React.createElement(Close, null, React.createElement(Button, {
+    view: "ghost",
+    color: "secondary",
+    icon: React.createElement(CloseIcon, {
+      size: "medium"
+    }),
+    onClick: onClose
+  }))), React.createElement(BreadCrumbs, null, React.createElement(Text, {
+    "$color": Color.LOCKED
+  }, "Channel"), React.createElement(Text, {
+    "$color": Color.LOCKED
+  }, "\u00A0\u203A\u00A0"), React.createElement(Text, {
+    "$color": Color.LOCKED
+  }, "Platform"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "\u00A0\u203A\u00A0"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "Gateway"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "\u00A0\u203A\u00A0"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "SDK"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "\u00A0\u203A\u00A0"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "Test message")))), React.createElement(Vertical, {
+    "$gap": Spacing.S3,
+    "$padding": `${Spacing.S4} 0 0`
+  }, React.createElement(H4, null, "Which platform will we configure first?"), React.createElement(Columns, {
+    "$gap": Spacing.S2,
+    "$sizes": "1fr 1fr"
+  }, hasWindowsPlatform && React.createElement(Card, {
+    as: "a",
+    href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure`
+  }, React.createElement(CardIcon, null, React.createElement(PlatformLogoIcon, {
+    type: "windows",
+    size: "medium"
+  })), React.createElement(H4, null, "Windows")), hasMacOSPlatform && React.createElement(Card, {
+    as: "a",
+    href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure/osx`
+  }, React.createElement(CardIcon, null, React.createElement(PlatformLogoIcon, {
+    type: "macos",
+    size: "medium"
+  })), React.createElement(H4, null, "MacOS")))));
+}

package/PlatformsConfigurationDrawer/components/DesktopPage/index.d.ts

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

package/PlatformsConfigurationDrawer/components/DesktopPage/index.js

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

package/PlatformsConfigurationDrawer/components/DesktopPage/types.d.ts

@@ -0,0 +1,6 @@
+import type { Application } from '@pushwoosh/rpc-v2-http-api-data/applications';
+export interface DesktopPageProps {
+    application: Application;
+    onBack: () => void;
+    onClose: () => void;
+}

package/PlatformsConfigurationDrawer/components/DesktopPage/types.js

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

package/PlatformsConfigurationDrawer/components/MainPage/MainPage.d.ts

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

package/PlatformsConfigurationDrawer/components/MainPage/MainPage.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Button } from '@pushwoosh/kit-button';
+import { Spacing, Color, AllPlatforms } from '@pushwoosh/kit-constants';
+import { Vertical, Columns } from '@pushwoosh/kit-helpers';
+import { CloseIcon, DeviceIcon, EmailIcon, WhatsappIcon, SmsIcon } from '@pushwoosh/kit-icons';
+import { H2, Paragraph, H4, Text } from '@pushwoosh/kit-typography';
+import { Header, Close, Card, CardIcon } from '../../styled';
+export function MainPage(props) {
+  const {
+    application,
+    onClickDesktop,
+    onClickMobile,
+    onClose
+  } = props;
+  const hasDesktopPlatforms = Object.hasOwn((application === null || application === void 0 ? void 0 : application.platforms) || {}, AllPlatforms.Windows) || Object.hasOwn((application === null || application === void 0 ? void 0 : application.platforms) || {}, AllPlatforms.OSX);
+  return React.createElement(React.Fragment, null, React.createElement(Header, null, React.createElement(Vertical, {
+    "$gap": Spacing.S1
+  }, React.createElement(H2, null, "Channel to configure"), React.createElement(Paragraph, null, React.createElement(Text, {
+    "$color": Color.LOCKED
+  }, "Channel"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "\u00A0\u203A\u00A0"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "Platform"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "\u00A0\u203A\u00A0"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "Gateway"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "\u00A0\u203A\u00A0"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "SDK"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "\u00A0\u203A\u00A0"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "Test message"))), React.createElement(Close, null, React.createElement(Button, {
+    view: "ghost",
+    color: "secondary",
+    icon: React.createElement(CloseIcon, {
+      size: "medium"
+    }),
+    onClick: onClose
+  }))), React.createElement(Vertical, {
+    "$gap": Spacing.S3,
+    "$padding": `${Spacing.S4} 0 0`
+  }, React.createElement(H4, null, "Where would you like to send your messages?"), React.createElement(Columns, {
+    "$gap": Spacing.S2,
+    "$sizes": "1fr 1fr"
+  }, React.createElement(Card, {
+    as: "div",
+    onClick: onClickMobile
+  }, React.createElement(CardIcon, null, React.createElement(DeviceIcon, {
+    type: "mobile",
+    size: "medium",
+    view: "filled"
+  })), React.createElement(H4, null, "Mobile application")), hasDesktopPlatforms && React.createElement(Card, {
+    as: "div",
+    onClick: onClickDesktop
+  }, React.createElement(CardIcon, null, React.createElement(DeviceIcon, {
+    type: "desktop",
+    size: "medium",
+    view: "filled"
+  })), React.createElement(H4, null, "Desktop application")), React.createElement(Card, {
+    as: "a",
+    href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure/web`
+  }, React.createElement(CardIcon, null, React.createElement(DeviceIcon, {
+    type: "web",
+    size: "medium",
+    view: "filled"
+  })), React.createElement(H4, null, "Website")), React.createElement(Card, {
+    as: "a",
+    href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure/email`
+  }, React.createElement(CardIcon, null, React.createElement(EmailIcon, {
+    size: "medium",
+    view: "filled"
+  })), React.createElement(H4, null, "Emails")), React.createElement(Card, {
+    as: "a",
+    href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure`
+  }, React.createElement(CardIcon, null, React.createElement(WhatsappIcon, {
+    size: "medium",
+    view: "filled"
+  })), React.createElement(H4, null, "Whatsapp")), React.createElement(Card, {
+    as: "a",
+    href: "https://www.pushwoosh.com/demo/",
+    target: "_blank"
+  }, React.createElement(CardIcon, null, React.createElement(SmsIcon, {
+    size: "medium",
+    view: "filled"
+  })), React.createElement(H4, null, "SMS")))));
+}

package/PlatformsConfigurationDrawer/components/MainPage/index.d.ts

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

package/PlatformsConfigurationDrawer/components/MainPage/index.js

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

package/PlatformsConfigurationDrawer/components/MainPage/types.d.ts

@@ -0,0 +1,7 @@
+import type { Application } from '@pushwoosh/rpc-v2-http-api-data/applications';
+export interface MainPageProps {
+    application: Application;
+    onClickMobile: () => void;
+    onClickDesktop: () => void;
+    onClose: () => void;
+}

package/PlatformsConfigurationDrawer/components/MainPage/types.js

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

package/PlatformsConfigurationDrawer/components/MobilePage/MobilePage.d.ts

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

package/PlatformsConfigurationDrawer/components/MobilePage/MobilePage.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Button } from '@pushwoosh/kit-button';
+import { Spacing, Color } from '@pushwoosh/kit-constants';
+import { Columns, Vertical } from '@pushwoosh/kit-helpers';
+import { ArrowRoundIcon, CloseIcon, PlatformLogoIcon } from '@pushwoosh/kit-icons';
+import { H2, H4, Text } from '@pushwoosh/kit-typography';
+import { ColumnsWrapper, BreadCrumbs, Header, Close, Card, CardIcon } from '../../styled';
+export function MobilePage(props) {
+  const {
+    application,
+    onBack,
+    onClose
+  } = props;
+  return React.createElement(React.Fragment, null, React.createElement(Header, null, React.createElement(ColumnsWrapper, null, React.createElement(Columns, {
+    "$sizes": "auto 1fr auto",
+    "$gap": Spacing.S2,
+    "$alignItems": "center"
+  }, React.createElement(Button, {
+    color: "primary",
+    view: "ghost",
+    onClick: onBack
+  }, React.createElement(ArrowRoundIcon, {
+    direction: "left",
+    size: "medium",
+    view: "filled"
+  })), React.createElement(H2, null, "Platform for mobile app"), React.createElement(Close, null, React.createElement(Button, {
+    view: "ghost",
+    color: "secondary",
+    icon: React.createElement(CloseIcon, {
+      size: "medium"
+    }),
+    onClick: onClose
+  }))), React.createElement(BreadCrumbs, null, React.createElement(Text, {
+    "$color": Color.LOCKED
+  }, "Channel"), React.createElement(Text, {
+    "$color": Color.LOCKED
+  }, "\u00A0\u203A\u00A0"), React.createElement(Text, {
+    "$color": Color.LOCKED
+  }, "Platform"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "\u00A0\u203A\u00A0"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "Gateway"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "\u00A0\u203A\u00A0"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "SDK"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "\u00A0\u203A\u00A0"), React.createElement(Text, {
+    "$color": Color.PHANTOM
+  }, "Test message")))), React.createElement(Vertical, {
+    "$gap": Spacing.S3,
+    "$padding": `${Spacing.S4} 0 0`
+  }, React.createElement(H4, null, "Which platform will we configure first?"), React.createElement(Columns, {
+    "$gap": Spacing.S2,
+    "$sizes": "1fr 1fr"
+  }, React.createElement(Card, {
+    as: "a",
+    href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure/ios`
+  }, React.createElement(CardIcon, null, React.createElement(PlatformLogoIcon, {
+    type: "apple",
+    size: "medium"
+  })), React.createElement(H4, null, "iOS")), React.createElement(Card, {
+    as: "a",
+    href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure/android`
+  }, React.createElement(CardIcon, null, React.createElement(PlatformLogoIcon, {
+    type: "android",
+    size: "medium"
+  })), React.createElement(H4, null, "Android")), React.createElement(Card, {
+    as: "a",
+    href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure/xiaomi`
+  }, React.createElement(CardIcon, null, React.createElement(PlatformLogoIcon, {
+    type: "xiaomi",
+    size: "medium"
+  })), React.createElement(H4, null, "Xiaomi")), React.createElement(Card, {
+    as: "a",
+    href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure/huawei`
+  }, React.createElement(CardIcon, null, React.createElement(PlatformLogoIcon, {
+    type: "huawei",
+    size: "medium"
+  })), React.createElement(H4, null, "Huawei")), React.createElement(Card, {
+    as: "a",
+    href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure`
+  }, React.createElement(CardIcon, null, React.createElement(PlatformLogoIcon, {
+    type: "amazon",
+    size: "medium"
+  })), React.createElement(H4, null, "Amazon")))));
+}

package/PlatformsConfigurationDrawer/components/MobilePage/index.d.ts

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

package/PlatformsConfigurationDrawer/components/MobilePage/index.js

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

package/PlatformsConfigurationDrawer/components/MobilePage/types.d.ts

@@ -0,0 +1,6 @@
+import type { Application } from '@pushwoosh/rpc-v2-http-api-data/applications';
+export interface MobilePageProps {
+    application: Application;
+    onBack: () => void;
+    onClose: () => void;
+}

package/PlatformsConfigurationDrawer/components/MobilePage/types.js

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

package/PlatformsConfigurationDrawer/index.d.ts

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

package/PlatformsConfigurationDrawer/index.js

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

package/PlatformsConfigurationDrawer/styled.d.ts

@@ -0,0 +1,7 @@
+import { Link } from '@pushwoosh/kit-link';
+export declare const Header: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Close: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ColumnsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BreadCrumbs: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Card: import("styled-components").StyledComponent<typeof Link, any, {}, never>;
+export declare const CardIcon: import("styled-components").StyledComponent<"div", any, {}, never>;

package/PlatformsConfigurationDrawer/styled.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { Color, Spacing } from '@pushwoosh/kit-constants';
+import { Link } from '@pushwoosh/kit-link';
+export const Header = styled.div.withConfig({
+  displayName: "Header",
+  componentId: "sc-1rmglxf-0"
+})(["position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;background:", ";padding:", " 0 ", ";gap:", ";"], Color.CLEAR, Spacing.S11, Spacing.S3, Spacing.S3);
+export const Close = styled.div.withConfig({
+  displayName: "Close",
+  componentId: "sc-1rmglxf-1"
+})(["display:flex;justify-content:center;align-items:center;width:", ";height:", ";cursor:pointer;"], Spacing.S10, Spacing.S10);
+export const ColumnsWrapper = styled.div.withConfig({
+  displayName: "ColumnsWrapper",
+  componentId: "sc-1rmglxf-2"
+})(["flex:1;"]);
+export const BreadCrumbs = styled.div.withConfig({
+  displayName: "BreadCrumbs",
+  componentId: "sc-1rmglxf-3"
+})(["padding-left:", ";"], Spacing.S13);
+export const Card = styled(Link).withConfig({
+  displayName: "Card",
+  componentId: "sc-1rmglxf-4"
+})(["display:flex;align-items:center;padding:", ";gap:", ";border:1px solid ", ";border-radius:8px;color:", ";cursor:pointer;&:hover,&:focus,&:active{color:", ";text-decoration:none;background-color:", ";}&:focus,&:active{opacity:.5;}"], Spacing.S5, Spacing.S5, Color.DIVIDER, Color.MAIN, Color.MAIN, Color.ROW_HOVER);
+export const CardIcon = styled.div.withConfig({
+  displayName: "CardIcon",
+  componentId: "sc-1rmglxf-5"
+})(["padding:", ";color:", ";background-color:", ";border-radius:8px;"], Spacing.S1, Color.PRIMARY, Color.BRIGHT_LIGHT);

package/PlatformsConfigurationDrawer/types.d.ts

@@ -0,0 +1,6 @@
+import type { Application } from '@pushwoosh/rpc-v2-http-api-data/applications';
+export interface PlatformsConfigurationDrawerProps {
+    application: Application;
+    isOpen: boolean;
+    onClose: () => void;
+}

package/PlatformsConfigurationDrawer/types.js

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

package/index.d.ts

@@ -1,3 +1,4 @@
 export * from './EmailTemplatePreview';
 export * from './context';
 export * from './DynamicContentPicker';
+export * from './PlatformsConfigurationDrawer';

package/index.js

@@ -1,3 +1,4 @@
 export * from './EmailTemplatePreview';
 export * from './context';
-export * from './DynamicContentPicker';
+export * from './DynamicContentPicker';
+export * from './PlatformsConfigurationDrawer';

package/package.json

@@ -5,8 +5,9 @@
   "types": "index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "start": "`pushwoosh-engine app:command:dev`",
+    "start": "npm run playground",
     "build": "pushwoosh-engine lib:build",
+    "playground": "`pushwoosh-engine lib:command:playground`",
     "check": "npm run check:lint && npm run check:types",
     "check:lint": "echo \"Run check:lint\" && NODE_ENV=production eslint ./src",
     "check:lint-fix": "echo \"Run check:lint\" && NODE_ENV=production eslint . --fix",
@@ -17,14 +18,18 @@
     "@pushwoosh/dumb-components": "^0.0.18",
     "@pushwoosh/kit-button": "^2.2.5",
     "@pushwoosh/kit-constants": "^1.6.5",
+    "@pushwoosh/kit-drawer": "^1.0.11",
     "@pushwoosh/kit-helpers": "^4.6.1",
+    "@pushwoosh/kit-icons": "^2.1.1",
+    "@pushwoosh/kit-link": "^1.5.0",
     "@pushwoosh/kit-select": "^1.1.0",
     "@pushwoosh/kit-skeleton": "^1.1.6",
     "@pushwoosh/kit-spinner": "^1.5.1",
-    "@pushwoosh/kit-text-input": "^1.5.1"
+    "@pushwoosh/kit-text-input": "^1.5.1",
+    "@pushwoosh/kit-typography": "^1.7.2"
   },
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^1.0.4",
+    "@pushwoosh/frontend-builder-engine": "^1.0.11",
     "@pushwoosh/grpc-bridge": "^1.5.36",
     "@pushwoosh/http-client": "^2.4.12",
     "@pushwoosh/session-store": "^2.5.0",
@@ -41,13 +46,13 @@
   "peerDependencies": {
     "@pushwoosh/grpc-bridge": "^1.5.36",
     "@pushwoosh/http-client": "^2.4.12",
-    "@pushwoosh/session-store": "^2.5.0",
     "@pushwoosh/rpc-v2-http-api-data": "^0.1.414",
+    "@pushwoosh/session-store": "^2.5.0",
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
   "engines": {
     "node": ">= 18"
   },
-  "version": "0.4.5"
+  "version": "0.4.6"
 }