@pushwoosh/dumb-components 1.1.25 → 1.1.27

package/Alert/Alert.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { AlertProps } from './types';
+export declare const Alert: ({ isExpandedDefault, title, type, children }: AlertProps) => React.JSX.Element;

package/Alert/Alert.js

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { ShapeRadius } from '@pushwoosh/kit-constants';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { ChevronIcon } from '@pushwoosh/kit-icons';
+import { AlertTypeMap } from './maps';
+import { AccordionHeader, Container } from './styles';
+export const Alert = ({
+  isExpandedDefault,
+  title,
+  type,
+  children
+}) => {
+  const [isExpanded, setIsExpanded] = useState(isExpandedDefault);
+  const canCollapse = !!children;
+  const {
+    icon: Icon,
+    iconColor,
+    bgColor
+  } = AlertTypeMap[type];
+  return React.createElement(Container, {
+    "$borderRadius": ShapeRadius.SECTION,
+    "$bgColor": bgColor
+  }, React.createElement(AccordionHeader, {
+    onClick: () => canCollapse && setIsExpanded(!isExpanded),
+    "$canCollapse": canCollapse,
+    "$justifyContent": "space-between",
+    "$alignItems": "center",
+    "$gap": 8,
+    "$padding": "8px 12px 8px 16px"
+  }, React.createElement(Horizontal, {
+    "$gap": 8
+  }, React.createElement(Icon, {
+    size: "small",
+    view: "lined",
+    color: iconColor
+  }), title), canCollapse && React.createElement(Horizontal, {
+    "$justifyContent": "center"
+  }, React.createElement(ChevronIcon, {
+    size: "small",
+    direction: isExpanded ? 'up' : 'down',
+    color: iconColor
+  }))), isExpanded && React.createElement(Vertical, {
+    "$padding": "0 16px 16px"
+  }, children));
+};

package/Alert/index.d.ts

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

package/Alert/index.js

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

package/Alert/maps.d.ts

@@ -0,0 +1,10 @@
+import { Color } from '@pushwoosh/kit-constants';
+import { type DangerTriangleIconProps, type InfoRoundIconProps, type WarningRoundIconProps } from '@pushwoosh/kit-icons';
+import { type AlertType } from './types';
+type AlertData = {
+    icon: React.FC<InfoRoundIconProps | WarningRoundIconProps | DangerTriangleIconProps>;
+    iconColor: Color;
+    bgColor: Color;
+};
+export declare const AlertTypeMap: Record<AlertType, AlertData>;
+export {};

package/Alert/maps.js

@@ -0,0 +1,19 @@
+import { Color } from '@pushwoosh/kit-constants';
+import { DangerTriangleIcon, InfoRoundIcon, WarningRoundIcon } from '@pushwoosh/kit-icons';
+export const AlertTypeMap = {
+  info: {
+    icon: InfoRoundIcon,
+    iconColor: Color.BRIGHT,
+    bgColor: Color.BRIGHT_LIGHT
+  },
+  warning: {
+    icon: WarningRoundIcon,
+    iconColor: Color.WARNING,
+    bgColor: Color.WARNING_LIGHT
+  },
+  error: {
+    icon: DangerTriangleIcon,
+    iconColor: Color.DANGER,
+    bgColor: Color.DANGER_LIGHT
+  }
+};

package/Alert/styles.d.ts

@@ -0,0 +1,114 @@
+export declare const AccordionHeader: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | undefined;
+    $gap?: (string | number) | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $canCollapse?: boolean;
+}, "$gridAutoFlow">;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | undefined;
+    $gap?: (string | number) | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+}, "$gridAutoFlow">;

package/Alert/styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+export const AccordionHeader = styled(Horizontal).withConfig({
+  displayName: "AccordionHeader",
+  componentId: "sc-fpiqkp-0"
+})(["cursor:", ";"], ({
+  $canCollapse
+}) => $canCollapse ? 'pointer' : 'initial');
+export const Container = styled(Vertical).withConfig({
+  displayName: "Container",
+  componentId: "sc-fpiqkp-1"
+})(["width:100%;min-width:200px;"]);

package/Alert/types.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export type AlertType = 'info' | 'warning' | 'error';
+export type AlertProps = {
+    title: ReactNode;
+    type: AlertType;
+    isExpandedDefault?: boolean;
+    readonly children?: ReactNode;
+};

package/Alert/types.js

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

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

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { DrawerProps } from './types';
-export declare function Drawer({ size, isOpen, zIndex, onClose, children, withoutLockScreen, closeOnClickOutside, }: DrawerProps): ReactElement;
+export declare function Drawer({ size, isOpen, zIndex, onClose, children, padding, withoutLockScreen, closeOnClickOutside, }: DrawerProps): ReactElement;

package/Drawer/components/Drawer/Drawer.js

@@ -11,6 +11,7 @@ export function Drawer({
   zIndex = 10000,
   onClose,
   children,
+  padding,
   withoutLockScreen = false,
   closeOnClickOutside = true
 }) {
@@ -53,7 +54,8 @@ export function Drawer({
     ref: ref,
     "$zIndex": zIndex
   }, React.createElement(LockBody, null), React.createElement(DrawerInner, {
-    onMouseDown: handleClickOutside
+    onMouseDown: handleClickOutside,
+    "$padding": padding
   }, React.createElement(DrawerContainer, {
     "$width": drawerSizes[size],
     onClick: handleClose

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

@@ -1,10 +1,12 @@
 import React from 'react';
-import type { DrawerBoxBaseProps, IDrawerBoxTransProps } from './types';
+import type { ContentPadding, DrawerBoxBaseProps, IDrawerBoxTransProps } from './types';
 export declare const LockBody: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
 export declare const DrawerBox: import("styled-components").StyledComponent<"div", any, {
     $zIndex: number;
 }, never>;
-export declare const DrawerInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DrawerInner: import("styled-components").StyledComponent<"div", any, {
+    $padding?: ContentPadding;
+}, never>;
 export declare const DrawerBoxTrans: import("styled-components").StyledComponent<React.FC<DrawerBoxBaseProps>, any, IDrawerBoxTransProps, never>;
 export declare const DrawerContainer: import("styled-components").StyledComponent<"div", any, {
     $width: string;

package/Drawer/components/Drawer/styles.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import styled, { createGlobalStyle } from 'styled-components';
+import { ShapeRadius } from '@pushwoosh/kit-constants';
+import { DrawerBody, DrawerHeader } from '../DrawerContent';
 const animationTimeout = 300;
 export const LockBody = createGlobalStyle(["body{overflow:hidden;position:relative;height:100%;}"]);
 export const DrawerBox = styled.div.withConfig({
@@ -12,7 +14,25 @@ export const DrawerBox = styled.div.withConfig({
 export const DrawerInner = styled.div.withConfig({
   displayName: "DrawerInner",
   componentId: "sc-n2uxwd-1"
-})(["display:flex;justify-content:flex-end;width:100vw;height:100vh;padding:0 0 0 280px;"]);
+})(["display:flex;justify-content:flex-end;width:100vw;height:100vh;padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";", "{", "}", "{", "}"], ({
+  $padding
+}) => ($padding === null || $padding === void 0 ? void 0 : $padding.top) || '0px', ({
+  $padding
+}) => ($padding === null || $padding === void 0 ? void 0 : $padding.right) || '0px', ({
+  $padding
+}) => ($padding === null || $padding === void 0 ? void 0 : $padding.bottom) || '0px', ({
+  $padding
+}) => ($padding === null || $padding === void 0 ? void 0 : $padding.left) || '280px', DrawerBody, ({
+  $padding
+}) => ($padding === null || $padding === void 0 ? void 0 : $padding.bottom) && `
+        border-bottom-left-radius: ${ShapeRadius.SECTION};
+        border-bottom-right-radius: ${ShapeRadius.SECTION};
+      `, DrawerHeader, ({
+  $padding
+}) => ($padding === null || $padding === void 0 ? void 0 : $padding.top) && `
+      border-top-left-radius: ${ShapeRadius.SECTION};
+      border-top-right-radius: ${ShapeRadius.SECTION};
+    `);
 const DrawerBoxBase = props => {
   const {
     isOpen,
@@ -52,6 +72,6 @@ export const DrawerBoxTrans = styled(DrawerBoxBase).withConfig({
 export const DrawerContainer = styled.div.withConfig({
   displayName: "DrawerContainer",
   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);"], ({
+})(["position:relative;display:inline-flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:", ";z-index:10;box-shadow:0 10px 16px 0 rgba(27,31,36,0.1);"], ({
   $width
 }) => $width);

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

@@ -1,5 +1,11 @@
 import type { MutableRefObject, PropsWithChildren } from 'react';
 import type { drawerSizes } from './maps';
+export type ContentPadding = {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+};
 export type DrawerProps = PropsWithChildren<{
     readonly size: keyof typeof drawerSizes;
     readonly isOpen: boolean;
@@ -7,6 +13,7 @@ export type DrawerProps = PropsWithChildren<{
     readonly onClose?: () => any;
     readonly withoutLockScreen?: boolean;
     readonly closeOnClickOutside?: boolean;
+    readonly padding?: ContentPadding;
 }>;
 export type DrawerBoxBaseProps = PropsWithChildren<{
     className?: string;

package/index.d.ts

@@ -37,3 +37,4 @@ export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip } from './Chip';
 export { RichMessageEditor, RichMessageViewer, type DynamicContent } from './RichMessageEditor';
+export { Alert } from './Alert';

package/index.js

@@ -36,4 +36,5 @@ export { NumberPicker } from './NumberPicker';
 export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip } from './Chip';
-export { RichMessageEditor, RichMessageViewer } from './RichMessageEditor';
+export { RichMessageEditor, RichMessageViewer } from './RichMessageEditor';
+export { Alert } from './Alert';

package/package.json

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