@pushwoosh/dumb-components 1.0.3 → 1.0.5

package/Button/colors.js

@@ -123,7 +123,7 @@ export function createColors(buttonColors) {
     if ($isOpen) {
       return Color.MAIN;
     }
-    return $isDisabled ? disabled.color : base.bgColor;
+    return $isDisabled ? disabled.color : base.borderColor;
   }, disabled.color, disabled.bgColor, disabled.borderColor, ({
     $isOpen
   }) => $isOpen ? '' : hoverCss /* sc-custom "display: none;" */, hover.color, hover.bgColor, hover.borderColor);

package/Button/styles.js

@@ -30,7 +30,7 @@ const dangerGhostColors = createColors(colors.danger.ghost);
 export const ButtonBoxDangerGhostCompact = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxDangerGhostCompact",
   componentId: "sc-qltvdl-4"
-})(["height:16px;padding:0;font-size:", ";font-weight:", ";text-transform:uppercase;& ", "{padding:0;}& ", " + ", "{padding:0 0 0 ", ";}", ";--danger-ghost-hover-bg-color:transparent;"], FontSize.SMALL, FontWeight.BOLD, /* sc-selector */ButtonContent, /* sc-selector */ButtonIcon, /* sc-selector */ButtonContent, Spacing.S1, /* sc-custom "display: none;" */dangerGhostColors);
+})(["height:16px;padding:0;font-size:", ";font-weight:", ";text-transform:uppercase;& ", "{padding:0;}", ";--danger-ghost-hover-bg-color:transparent;"], FontSize.SMALL, FontWeight.BOLD, /* sc-selector */ButtonContent, /* sc-custom "display: none;" */dangerGhostColors);
 export const ButtonBoxDangerGhostField = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxDangerGhostField",
   componentId: "sc-qltvdl-5"
@@ -60,7 +60,7 @@ const primaryGhostColors = createColors(colors.primary.ghost);
 export const ButtonBoxPrimaryGhostCompact = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxPrimaryGhostCompact",
   componentId: "sc-qltvdl-10"
-})(["height:16px;padding:0;font-size:", ";font-weight:", ";text-transform:uppercase;& ", "{padding:0;}& ", " + ", "{padding:0 0 0 ", ";}", ";--primary-ghost-hover-bg-color:transparent;"], FontSize.SMALL, FontWeight.BOLD, /* sc-selector */ButtonContent, /* sc-selector */ButtonIcon, /* sc-selector */ButtonContent, Spacing.S1, /* sc-custom "display: none;" */primaryGhostColors);
+})(["height:16px;padding:0;font-size:", ";font-weight:", ";text-transform:uppercase;& ", "{padding:0;}", ";--primary-ghost-hover-bg-color:transparent;"], FontSize.SMALL, FontWeight.BOLD, /* sc-selector */ButtonContent, /* sc-custom "display: none;" */primaryGhostColors);
 export const ButtonBoxPrimaryGhostField = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxPrimaryGhostField",
   componentId: "sc-qltvdl-11"

package/Drawer/components/Drawer/index.d.ts

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

package/Drawer/components/Drawer/index.js

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

package/Drawer/{styles.js → components/Drawer/styles.js}

@@ -5,13 +5,13 @@ const animationTimeout = 300;
 export const LockBody = createGlobalStyle(["body{overflow:hidden;position:relative;height:100%;}"]);
 export const DrawerBox = styled.div.withConfig({
   displayName: "DrawerBox",
-  componentId: "sc-1c6sp83-0"
+  componentId: "sc-n2uxwd-0"
 })(["position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:all;z-index:", ";"], ({
   $zIndex
 }) => $zIndex);
 export const DrawerInner = styled.div.withConfig({
   displayName: "DrawerInner",
-  componentId: "sc-1c6sp83-1"
+  componentId: "sc-n2uxwd-1"
 })(["display:flex;justify-content:flex-end;width:100vw;height:100vh;padding:0 0 0 280px;"]);
 const DrawerBoxBase = props => {
   const {
@@ -31,7 +31,7 @@ const DrawerBoxBase = props => {
 };
 export const DrawerBoxTrans = styled(DrawerBoxBase).withConfig({
   displayName: "DrawerBoxTrans",
-  componentId: "sc-1c6sp83-2"
+  componentId: "sc-n2uxwd-2"
 })(["&-appear{background-color:", ";transition:background-color ", "ms;", "{opacity:0;transform:translateX(100%);}}&-appear-active{background-color:", ";", "{opacity:0.99;transform:translateX(.1%);transition:opacity ", "ms,transform ", "ms;}}&-appear-done{background-color:", ";", "{opacity:1;transform:translateX(0);}}&-enter{background-color:", ";transition:background-color ", "ms;", "{opacity:0;transform:translateX(100%);}}&-enter-active{background-color:", ";", "{opacity:0.99;transform:translateX(.1%);transition:opacity ", "ms,transform ", "ms;}}&-enter-done{background-color:", ";", "{opacity:1;transform:translateX(0);}}&-exit{background-color:", ";", "{opacity:1;transform:translateX(0);transition:opacity ", "ms,transform ", "ms;}}&-exit-active{transition:background-color ", "ms;background-color:", ";", "{opacity:0;transform:translateX(100%);}}"], ({
   withoutLockScreen = false
 }) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 0%)', animationTimeout, DrawerInner, ({
@@ -51,7 +51,7 @@ export const DrawerBoxTrans = styled(DrawerBoxBase).withConfig({
 }) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 0%)', DrawerInner);
 export const DrawerContainer = styled.div.withConfig({
   displayName: "DrawerContainer",
-  componentId: "sc-1c6sp83-3"
+  componentId: "sc-n2uxwd-3"
 })(["position:relative;display:inline-flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:", ";height:100vh;z-index:10;box-shadow:0 10px 16px 0 rgba(27,31,36,0.1);"], ({
   $width
 }) => $width);

package/Drawer/components/DrawerContent/index.d.ts

@@ -0,0 +1 @@
+export { DrawerHeader, DrawerTitle, DrawerBody } from './styles';

package/Drawer/components/DrawerContent/index.js

@@ -0,0 +1 @@
+export { DrawerHeader, DrawerTitle, DrawerBody } from './styles';

package/Drawer/components/DrawerContent/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const DrawerHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DrawerTitle: import("styled-components").StyledComponent<"h2", any, {}, never>;
+export declare const DrawerBody: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Drawer/components/DrawerContent/styles.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { Color, Spacing, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
+export const DrawerHeader = styled.div.withConfig({
+  displayName: "DrawerHeader",
+  componentId: "sc-1jmui00-0"
+})(["padding:", " ", " ", ";background:", ";"], Spacing.S11, Spacing.S11, Spacing.S3, Color.CLEAR);
+export const DrawerTitle = styled.h2.withConfig({
+  displayName: "DrawerTitle",
+  componentId: "sc-1jmui00-1"
+})(["display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;font-size:", ";font-weight:", ";line-height:", ";letter-spacing:0;margin:0;"], FontSize.HEADING2, FontWeight.BOLD, LineHeight.HEADING2);
+export const DrawerBody = styled.div.withConfig({
+  displayName: "DrawerBody",
+  componentId: "sc-1jmui00-2"
+})(["flex:1;padding:0 ", " ", ";background:", ";overflow-y:auto;"], Spacing.S11, Spacing.S11, Color.CLEAR);

package/Drawer/components/DrawerDocs/DrawerDocs.d.ts

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

package/Drawer/components/DrawerDocs/DrawerDocs.js

@@ -0,0 +1,45 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Spinner } from '../../../Spinner';
+import { Drawer } from '../Drawer';
+import { DrawerBodyIframe, IframeElement, LoadingBox } from './styles';
+export function DrawerDocs(props) {
+  const {
+    isOpen,
+    url,
+    onClose
+  } = props;
+  const [drawerWidth, setDrawerWidth] = useState(0);
+  const [iframeLoaded, setIframeLoaded] = useState(false);
+  const drawerDocsRef = useRef(null);
+  const iframeRef = useRef(null);
+  useEffect(() => {
+    const updateDrawerWidth = () => {
+      var _drawerDocsRef$curren;
+      if ((_drawerDocsRef$curren = drawerDocsRef.current) !== null && _drawerDocsRef$curren !== void 0 && _drawerDocsRef$curren.parentElement) {
+        setDrawerWidth(drawerDocsRef.current.parentElement.getBoundingClientRect().width);
+      }
+    };
+    updateDrawerWidth();
+    window.addEventListener('resize', updateDrawerWidth);
+    return () => {
+      window.removeEventListener('resize', updateDrawerWidth);
+    };
+  }, [isOpen]);
+  return React.createElement(Drawer, {
+    size: "large",
+    isOpen: isOpen,
+    onClose: onClose
+  }, React.createElement(DrawerBodyIframe, {
+    ref: drawerDocsRef
+  }, !iframeLoaded && React.createElement(LoadingBox, null, React.createElement(Spinner, {
+    size: "medium"
+  }), ' ', "Loading..."), React.createElement(IframeElement, {
+    src: url,
+    ref: iframeRef,
+    title: "Pushwoosh docs",
+    width: drawerWidth,
+    height: "95%",
+    "$isLoaded": iframeLoaded,
+    onLoad: () => setIframeLoaded(true)
+  })));
+}

package/Drawer/components/DrawerDocs/hooks.d.ts

@@ -0,0 +1,5 @@
+export declare const useDocs: () => {
+    docsOpen: boolean;
+    openDocsDrawer: () => void;
+    closeDocsDrawer: () => void;
+};

package/Drawer/components/DrawerDocs/hooks.js

@@ -0,0 +1,15 @@
+import { useCallback, useState } from 'react';
+export const useDocs = () => {
+  const [docsOpen, setDocsOpen] = useState(false);
+  const openDocsDrawer = useCallback(() => {
+    setDocsOpen(true);
+  }, []);
+  const closeDocsDrawer = useCallback(() => {
+    setDocsOpen(false);
+  }, []);
+  return {
+    docsOpen,
+    openDocsDrawer,
+    closeDocsDrawer
+  };
+};

package/Drawer/components/DrawerDocs/index.d.ts

@@ -0,0 +1,2 @@
+export { DrawerDocs } from './DrawerDocs';
+export { useDocs } from './hooks';

package/Drawer/components/DrawerDocs/index.js

@@ -0,0 +1,2 @@
+export { DrawerDocs } from './DrawerDocs';
+export { useDocs } from './hooks';

package/Drawer/components/DrawerDocs/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const DrawerBodyIframe: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LoadingBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IframeElement: import("styled-components").StyledComponent<"iframe", any, {
+    $isLoaded: boolean;
+}, never>;

package/Drawer/components/DrawerDocs/styles.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { DrawerBody } from '../DrawerContent';
+export const DrawerBodyIframe = styled(DrawerBody).withConfig({
+  displayName: "DrawerBodyIframe",
+  componentId: "sc-m4omzd-0"
+})(["padding:0;iframe > header{display:none;}"]);
+export const LoadingBox = styled.div.withConfig({
+  displayName: "LoadingBox",
+  componentId: "sc-m4omzd-1"
+})(["display:flex;flex-direction:column;gap:16px;justify-content:center;align-items:center;height:100%;"]);
+export const IframeElement = styled.iframe.withConfig({
+  displayName: "IframeElement",
+  componentId: "sc-m4omzd-2"
+})(["display:", ";border:none;"], ({
+  $isLoaded
+}) => $isLoaded ? 'block' : 'none');

package/Drawer/components/DrawerDocs/types.d.ts

@@ -0,0 +1,5 @@
+export interface DrawerPlatformsProps {
+    url: string;
+    isOpen: boolean;
+    onClose: () => void;
+}

package/Drawer/components/DrawerDocs/types.js

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

package/Drawer/index.d.ts

@@ -1 +1,3 @@
-export { Drawer } from './Drawer';
+export { Drawer } from './components/Drawer';
+export { DrawerHeader, DrawerTitle, DrawerBody } from './components/DrawerContent';
+export { DrawerDocs, useDocs } from './components/DrawerDocs';

package/Drawer/index.js

@@ -1 +1,3 @@
-export { Drawer } from './Drawer';
+export { Drawer } from './components/Drawer';
+export { DrawerHeader, DrawerTitle, DrawerBody } from './components/DrawerContent';
+export { DrawerDocs, useDocs } from './components/DrawerDocs';

package/DropdownMenu/components/DropdownMenuContainer/DropdownMenuContainer.js

@@ -1,6 +1,6 @@
 import React, { useLayoutEffect, useRef } from 'react';
-import { useOnClickOutside, useElementWidth } from '@pushwoosh/kit-hooks';
 import { DropdownIcon as Icon } from '@pushwoosh/kit-icons';
+import { useOnClickOutside, useElementWidth } from '../../../hooks';
 import { useDropdownMenuContext } from '../DropdownMenu';
 import { DropdownMenuContainerButtonMap } from './maps';
 import { DropdownMenuContainerBox, DropdownMenuContainerChevron, DropdownMenuContainerIcon, DropdownMenuContainerPortal, DropdownMenuContainerTitle, DropdownMenuContainerWindow } from './styles';

package/DropdownMenu/components/DropdownMenuItemCheckbox/DropdownMenuItemCheckbox.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
-import { type CheckboxProps } from '@pushwoosh/kit-checkbox';
+import { type CheckboxProps } from '../../../Checkbox';
 export declare function DropdownMenuItemCheckbox(props: CheckboxProps): ReactElement;

package/DropdownMenu/components/DropdownMenuItemCheckbox/DropdownMenuItemCheckbox.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Checkbox } from '@pushwoosh/kit-checkbox';
 import { DropdownMenuItemCheckboxBox } from './styles';
+import { Checkbox } from '../../../Checkbox';
 export function DropdownMenuItemCheckbox(props) {
   return React.createElement(DropdownMenuItemCheckboxBox, null, React.createElement(Checkbox, {
     color: "main",

package/EmailTemplatePreview/components/NoEmailTemplatePreview/NoEmailTemplatePreview.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Spacing } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
-import pwLogo from './assets/PW_logo.svg';
+import PwLogo from './assets/PW_logo.svg';
 import { Container, PreviewMock } from './styles';
 import { LockedText, LockedTitle } from '../../../common';
 export function NoEmailTemplatePreview() {
@@ -11,10 +11,7 @@ export function NoEmailTemplatePreview() {
   }, React.createElement(PreviewMock, {
     "$alignItems": "center",
     "$justifyContent": "center"
-  }, React.createElement("img", {
-    src: pwLogo,
-    alt: "Application logo"
-  })), React.createElement(Vertical, null, React.createElement(LockedTitle, null, "Content missed..."), React.createElement(LockedText, {
+  }, React.createElement(PwLogo, null)), React.createElement(Vertical, null, React.createElement(LockedTitle, null, "Content missed..."), React.createElement(LockedText, {
     "$small": true
   }, "Might be old data or deleted presets")));
 }

package/Spinner/Spinner.js

@@ -7,8 +7,8 @@ export function Spinner(props) {
     size,
     ...rest
   } = props;
-  const icon = AssetsMap[size];
-  if (!icon) {
+  const Icon = AssetsMap[size];
+  if (!Icon) {
     console.error(`[Spinner]: incorrect size: ${size}!`);
     return null;
   }
@@ -16,8 +16,5 @@ export function Spinner(props) {
     ...rest,
     size: size,
     ref: boxRef
-  }, React.createElement(SpinnerAnimate, null, React.createElement("img", {
-    src: icon,
-    alt: `${size} spinner`
-  })));
+  }, React.createElement(SpinnerAnimate, null, React.createElement(Icon, null)));
 }

package/Spinner/assets/spinner.medium.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><circle cx="12" cy="12" r="7" stroke="#00A2FF" stroke-width="3" opacity=".2"/><path stroke="#00A2FF" stroke-linecap="round" stroke-width="3" d="M19 12a7 7 0 0 0-7-7"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><circle cx="12" cy="12" r="7" stroke="currentColor" stroke-width="3" opacity=".2"/><path stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M19 12a7 7 0 0 0-7-7"/></svg>

package/Spinner/assets/spinner.small.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><circle cx="8" cy="8" r="5" stroke="#00A2FF" stroke-width="2" opacity=".2"/><path stroke="#00A2FF" stroke-linecap="round" stroke-width="2" d="M13 8a5 5 0 0 0-5-5"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><circle cx="8" cy="8" r="5" stroke="currentColor" stroke-width="2" opacity=".2"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M13 8a5 5 0 0 0-5-5"/></svg>

package/index.d.ts

@@ -4,6 +4,7 @@ export { Banner, type BannerType } from './Banner';
 export { Button, GhostButton } from './Button';
 export { CardMetric } from './CardMetric';
 export { Checkbox } from './Checkbox';
+export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs, } from './Drawer';
 export { DropdownMenu, DropdownMenuProvider, useDropdownMenuContext, DropdownMenuContainer, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemBox, DropdownMenuItemCheckbox, DropdownMenuItemPick, DropdownMenuItemRadio, DropdownMenuNested, DropdownMenuWindow, } from './DropdownMenu';
 export { EditableField } from './EditableField';
 export { InputFile } from './InputFile';
@@ -16,6 +17,7 @@ export { ReCaptcha, useRecaptcha, asyncScriptLoad } from './ReCaptcha';
 export { Spinner } from './Spinner';
 export { SortButton } from './SortButton';
 export { Switch } from './Switch';
+export { TextSkeleton, RectangularSkeleton, CircularSkeleton } from './Skeleton';
 export { Tooltip, type TooltipPosition } from './Tooltip';
 export { Tab, TabBar, TabPanel, Tabs, type TabCode } from './Tabs';
 export { Link } from './Link';

package/index.js

@@ -4,6 +4,7 @@ export { Banner } from './Banner';
 export { Button, GhostButton } from './Button';
 export { CardMetric } from './CardMetric';
 export { Checkbox } from './Checkbox';
+export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs } from './Drawer';
 export { DropdownMenu, DropdownMenuProvider, useDropdownMenuContext, DropdownMenuContainer, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemBox, DropdownMenuItemCheckbox, DropdownMenuItemPick, DropdownMenuItemRadio, DropdownMenuNested, DropdownMenuWindow } from './DropdownMenu';
 export { EditableField } from './EditableField';
 export { InputFile } from './InputFile';
@@ -16,6 +17,7 @@ export { ReCaptcha, useRecaptcha, asyncScriptLoad } from './ReCaptcha';
 export { Spinner } from './Spinner';
 export { SortButton } from './SortButton';
 export { Switch } from './Switch';
+export { TextSkeleton, RectangularSkeleton, CircularSkeleton } from './Skeleton';
 export { Tooltip } from './Tooltip';
 export { Tab, TabBar, TabPanel, Tabs } from './Tabs';
 export { Link } from './Link';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -16,9 +16,9 @@
   },
   "pre-commit": "check",
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^1.0.11",
+    "@pushwoosh/frontend-builder-engine": "^1.0.12",
     "@pushwoosh/kit-constants": "^1.6.7",
-    "@pushwoosh/kit-dropdown-menu": "^1.6.8",
+    "@svgr/webpack": "^8.1.0",
     "@types/lodash": "^4.17.13",
     "@types/react": "^18.2.69",
     "@types/react-dom": "^18.2.22",
@@ -43,6 +43,7 @@
     "@pushwoosh/kit-helpers": "^4.6.2",
     "@pushwoosh/kit-icons": "^2.1.1",
     "@pushwoosh/kit-typography": "^1.7.1",
+    "@tippyjs/react": "^4.2.6",
     "liquidjs": "^10.18.0",
     "lodash": "^4.17.21",
     "polished": "^4.3.1",