@pushwoosh/dumb-components 0.0.11 → 0.0.13

package/StatisticCard/StatisticCard.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type StatisticCardProps } from './types';
+export declare const StatisticCard: ({ title, value, valueSubtext, footer, active, selectable, rightSlot, width, isLoading, onClick, ...rest }: StatisticCardProps) => React.JSX.Element;

package/StatisticCard/StatisticCard.js

@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react';
+import { Spacing } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Spinner } from '@pushwoosh/kit-spinner';
+import { Container, RightSlotContainer, StatValue, Title } from './styles';
+import { LockedText } from '../common';
+import { formatNumberWithSpaces } from './helpers';
+export const StatisticCard = ({
+  title,
+  value,
+  valueSubtext,
+  footer,
+  active,
+  selectable,
+  rightSlot,
+  width,
+  isLoading,
+  onClick,
+  ...rest
+}) => {
+  const statisticValue = useMemo(() => {
+    if (isLoading) {
+      return React.createElement(Spinner, {
+        size: "small"
+      });
+    }
+    if (valueSubtext) {
+      return React.createElement(Horizontal, {
+        "$alignItems": "start",
+        "$gap": Spacing.S1
+      }, React.createElement(StatValue, null, formatNumberWithSpaces(value)), React.createElement(LockedText, {
+        "$small": true
+      }, valueSubtext));
+    }
+    return React.createElement(StatValue, null, formatNumberWithSpaces(value));
+  }, [isLoading, value, valueSubtext]);
+  return React.createElement(Container, {
+    "$active": active,
+    "$selectable": selectable,
+    "$width": width,
+    onClick: onClick,
+    ...rest
+  }, React.createElement(Title, null, title), rightSlot && React.createElement(RightSlotContainer, {
+    onClick: e => e.stopPropagation()
+  }, rightSlot), statisticValue, footer && React.createElement(LockedText, {
+    "$small": true
+  }, footer));
+};

package/StatisticCard/helpers.d.ts

@@ -0,0 +1 @@
+export declare const formatNumberWithSpaces: (number: number) => string;

package/StatisticCard/helpers.js

@@ -0,0 +1 @@
+export const formatNumberWithSpaces = number => number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');

package/StatisticCard/index.d.ts

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

package/StatisticCard/index.js

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

package/StatisticCard/styles.d.ts

@@ -0,0 +1,9 @@
+import { H2, H5 } from '@pushwoosh/kit-typography';
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    $active?: boolean;
+    $selectable?: boolean;
+    $width?: string;
+}, never>;
+export declare const Title: import("styled-components").StyledComponent<typeof H5, any, {}, never>;
+export declare const StatValue: import("styled-components").StyledComponent<typeof H2, any, {}, never>;
+export declare const RightSlotContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/StatisticCard/styles.js

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { Color, FontWeight, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
+import { H2, H5 } from '@pushwoosh/kit-typography';
+export const Container = styled.div.withConfig({
+  displayName: "Container",
+  componentId: "sc-12f82mq-0"
+})(["position:relative;display:flex;flex-direction:column;align-items:flex-start;border-radius:", ";width:", ";background:", ";padding:", ";border:", ";cursor:", ";"], ShapeRadius.SECTION, ({
+  $width
+}) => $width || 'fit-content', ({
+  $selectable
+}) => $selectable ? Color.CLEAR : Color.SOFT_LIGHT, Spacing.S5, ({
+  $active,
+  $selectable
+}) => {
+  if ($active) {
+    return `3px solid ${Color.BRIGHT}`;
+  }
+  return $selectable ? `1px solid ${Color.DIVIDER}` : 'none';
+}, ({
+  $selectable
+}) => $selectable ? 'pointer' : 'auto');
+export const Title = styled(H5).withConfig({
+  displayName: "Title",
+  componentId: "sc-12f82mq-1"
+})(["text-transform:uppercase;color:", ";text-overflow:ellipsis;"], Color.MAIN);
+export const StatValue = styled(H2).withConfig({
+  displayName: "StatValue",
+  componentId: "sc-12f82mq-2"
+})(["font-weight:", ";"], FontWeight.BOLD);
+export const RightSlotContainer = styled.div.withConfig({
+  displayName: "RightSlotContainer",
+  componentId: "sc-12f82mq-3"
+})(["position:absolute;right:", ";top:", ";"], Spacing.S5, Spacing.S4);

package/StatisticCard/types.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+export type StatisticCardProps = CommonProps & (SelectableProps | NonSelectableProps);
+export type CommonProps = {
+    title: string;
+    value: number;
+    valueSubtext?: string;
+    rightSlot?: ReactNode;
+    footer?: string;
+    isLoading?: boolean;
+    width?: string;
+};
+export type SelectableProps = {
+    selectable: true;
+    onClick: () => void;
+    active?: boolean;
+};
+export type NonSelectableProps = {
+    selectable?: false;
+    onClick?: never;
+    active?: never;
+};

package/StatisticCard/types.js

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

package/common.d.ts

@@ -0,0 +1,8 @@
+import { H5 } from '@pushwoosh/kit-typography';
+export declare const LockedTitle: import("styled-components").StyledComponent<typeof H5, any, {
+    $uppercase?: boolean;
+}, never>;
+export declare const LockedText: import("styled-components").StyledComponent<"div", any, {
+    $uppercase?: boolean;
+    $small?: boolean;
+}, never>;

package/common.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { Color, FontSize } from '@pushwoosh/kit-constants';
+import { H5 } from '@pushwoosh/kit-typography';
+export const LockedTitle = styled(H5).withConfig({
+  displayName: "LockedTitle",
+  componentId: "sc-88o871-0"
+})(["text-transform:", ";color:", ";text-overflow:ellipsis;"], ({
+  $uppercase
+}) => $uppercase ? 'uppercase' : 'initial', Color.LOCKED);
+export const LockedText = styled.div.withConfig({
+  displayName: "LockedText",
+  componentId: "sc-88o871-1"
+})(["text-transform:", ";font-size:", ";color:", ";"], ({
+  $uppercase
+}) => $uppercase ? 'uppercase' : 'initial', ({
+  $small
+}) => $small ? FontSize.SMALL : 'initial', Color.LOCKED);

package/index.d.ts

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

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -18,6 +18,7 @@
   "devDependencies": {
     "@pushwoosh/frontend-builder-engine": "^1.0.8",
     "@pushwoosh/kit-constants": "^1.6.7",
+    "@pushwoosh/kit-dropdown-menu": "^1.6.8",
     "@types/lodash": "^4.17.13",
     "@types/react": "^18.2.69",
     "@types/react-dom": "^18.2.22",