@pushwoosh/dumb-components 0.0.14 → 0.0.15

package/ExportResult/ExportResult.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type ExportResultProps } from './types';
+export declare function ExportResult({ type, title, subtitle, leftSlotIcon, rightSlot, handleClose, }: ExportResultProps): React.JSX.Element;

package/ExportResult/ExportResult.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Button } from '@pushwoosh/kit-button';
+import { Spacing } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { CloseIcon, CSVIcon } from '@pushwoosh/kit-icons';
+import { LeftSlot, MainInfoContainer, RightSlotContainer, Subtitle, Title } from './styled';
+export function ExportResult({
+  type,
+  title,
+  subtitle,
+  leftSlotIcon,
+  rightSlot,
+  handleClose
+}) {
+  return React.createElement(Horizontal, {
+    "$justifyContent": "space-between",
+    "$alignItems": "center",
+    "$gap": Spacing.S4
+  }, React.createElement(Horizontal, {
+    "$gap": Spacing.S4
+  }, React.createElement(LeftSlot, {
+    "$type": type,
+    "$alignItems": "center",
+    "$padding": Spacing.S1
+  }, leftSlotIcon || React.createElement(CSVIcon, {
+    size: "medium",
+    view: "filled"
+  })), React.createElement(MainInfoContainer, null, React.createElement(Title, null, title), React.createElement(Subtitle, null, subtitle))), React.createElement(RightSlotContainer, {
+    "$gap": Spacing.S3,
+    "$alignItems": "center"
+  }, rightSlot, React.createElement(Button, {
+    color: "secondary",
+    onClick: handleClose,
+    size: "compact",
+    icon: React.createElement(CloseIcon, {
+      size: "small"
+    })
+  })));
+}

package/ExportResult/index.d.ts

@@ -0,0 +1 @@
+export * from './ExportResult';

package/ExportResult/index.js

@@ -0,0 +1 @@
+export * from './ExportResult';

package/ExportResult/styled.d.ts

@@ -0,0 +1,46 @@
+import { H5 } from '@pushwoosh/kit-typography';
+export declare const MainInfoContainer: 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;
+    $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 | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+}, "$gridAutoFlow">;
+export declare const Title: import("styled-components").StyledComponent<typeof H5, any, {}, never>;
+export declare const Subtitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface LeftSlotProps {
+    $type: 'error' | 'warning' | 'info' | 'success';
+}
+export declare const LeftSlot: 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;
+    $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 | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & LeftSlotProps, "$gridAutoFlow">;
+export declare const RightSlotContainer: 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;
+    $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 | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+}, "$gridAutoFlow">;
+export {};

package/ExportResult/styled.js

@@ -0,0 +1,75 @@
+import styled, { css } from 'styled-components';
+import { Color, FontSize, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { H5 } from '@pushwoosh/kit-typography';
+const colorMixin = css(["color:", ";background:", ";"], ({
+  $type
+}) => {
+  switch ($type) {
+    case 'success':
+      {
+        return Color.SUCCESS;
+      }
+    case 'warning':
+      {
+        return Color.WARNING;
+      }
+    case 'error':
+      {
+        return Color.DANGER;
+      }
+    case 'info':
+      {
+        return Color.BRIGHT;
+      }
+    default:
+      {
+        return Color.BRIGHT;
+      }
+  }
+}, ({
+  $type
+}) => {
+  switch ($type) {
+    case 'success':
+      {
+        return Color.SUCCESS_LIGHT;
+      }
+    case 'warning':
+      {
+        return Color.WARNING_LIGHT;
+      }
+    case 'error':
+      {
+        return Color.DANGER_LIGHT;
+      }
+    case 'info':
+      {
+        return Color.BRIGHT_LIGHT;
+      }
+    default:
+      {
+        return Color.BRIGHT_LIGHT;
+      }
+  }
+});
+export const MainInfoContainer = styled(Vertical).withConfig({
+  displayName: "MainInfoContainer",
+  componentId: "sc-1ekol67-0"
+})(["flex:1;overflow:hidden;"]);
+export const Title = styled(H5).withConfig({
+  displayName: "Title",
+  componentId: "sc-1ekol67-1"
+})(["font-size:", ";text-transform:uppercase;"], FontSize.SMALL);
+export const Subtitle = styled.div.withConfig({
+  displayName: "Subtitle",
+  componentId: "sc-1ekol67-2"
+})(["font-size:", ";color:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], FontSize.SMALL, Color.LOCKED);
+export const LeftSlot = styled(Horizontal).withConfig({
+  displayName: "LeftSlot",
+  componentId: "sc-1ekol67-3"
+})(["border-radius:", ";", ";"], ShapeRadius.CONTROL, colorMixin);
+export const RightSlotContainer = styled(Horizontal).withConfig({
+  displayName: "RightSlotContainer",
+  componentId: "sc-1ekol67-4"
+})(["flex-shrink:0;"]);

package/ExportResult/types.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+export type ExportResultProps = {
+    title: string;
+    subtitle: string;
+    leftSlotIcon?: ReactNode;
+    rightSlot?: ReactNode;
+    type: 'error' | 'warning' | 'info' | 'success';
+    handleClose: () => void;
+};

package/ExportResult/types.js

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

package/index.d.ts

@@ -3,3 +3,4 @@ export * from './Tabs';
 export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
 export { PushPreview } from './PushPreview';
+export { ExportResult } from './ExportResult';

package/index.js

@@ -2,4 +2,5 @@ export { ProgressBar } from './ProgressBar';
 export * from './Tabs';
 export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
-export { PushPreview } from './PushPreview';
+export { PushPreview } from './PushPreview';
+export { ExportResult } from './ExportResult';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -39,6 +39,7 @@
     "npm": ">= 7"
   },
   "dependencies": {
+    "@pushwoosh/kit-button": "^2.3.5",
     "@pushwoosh/kit-helpers": "^4.6.2",
     "@pushwoosh/kit-icons": "^2.0.25",
     "@pushwoosh/kit-spinner": "^1.5.1",