npm - @pushwoosh/dumb-components - Versions diffs - 0.0.8 - Mend

@pushwoosh/dumb-components 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/EmailTemplatePreview/EmailTemplatePreview.d.ts +11 -0
package/EmailTemplatePreview/EmailTemplatePreview.js +32 -0
package/EmailTemplatePreview/helpers.d.ts +1 -0
package/EmailTemplatePreview/helpers.js +8 -0
package/EmailTemplatePreview/index.d.ts +1 -0
package/EmailTemplatePreview/index.js +1 -0
package/EmailTemplatePreview/styled.d.ts +5 -0
package/EmailTemplatePreview/styled.js +22 -0
package/ProgressBar/ProgressBar.d.ts +3 -0
package/ProgressBar/ProgressBar.js +19 -0
package/ProgressBar/index.d.ts +1 -0
package/ProgressBar/index.js +1 -0
package/ProgressBar/styled.d.ts +15 -0
package/ProgressBar/styled.js +45 -0
package/ProgressBar/types.d.ts +8 -0
package/ProgressBar/types.js +1 -0
package/Tabs/index.d.ts +5 -0
package/Tabs/index.js +5 -0
package/Tabs/tab/index.d.ts +2 -0
package/Tabs/tab/index.js +2 -0
package/Tabs/tab/tab.d.ts +8 -0
package/Tabs/tab/tab.js +26 -0
package/Tabs/tab/tab.types.d.ts +9 -0
package/Tabs/tab/tab.types.js +1 -0
package/Tabs/tab-bar/index.d.ts +2 -0
package/Tabs/tab-bar/index.js +2 -0
package/Tabs/tab-bar/tab-bar.d.ts +4 -0
package/Tabs/tab-bar/tab-bar.js +16 -0
package/Tabs/tab-bar/tab-bar.styles.d.ts +4 -0
package/Tabs/tab-bar/tab-bar.styles.js +12 -0
package/Tabs/tab-bar/tab-bar.types.d.ts +4 -0
package/Tabs/tab-bar/tab-bar.types.js +1 -0
package/Tabs/tab-base/index.d.ts +3 -0
package/Tabs/tab-base/index.js +3 -0
package/Tabs/tab-base/tab-base.d.ts +9 -0
package/Tabs/tab-base/tab-base.js +22 -0
package/Tabs/tab-base/tab-base.styles.d.ts +11 -0
package/Tabs/tab-base/tab-base.styles.js +41 -0
package/Tabs/tab-base/tab-base.types.d.ts +9 -0
package/Tabs/tab-base/tab-base.types.js +1 -0
package/Tabs/tab-panel/index.d.ts +2 -0
package/Tabs/tab-panel/index.js +2 -0
package/Tabs/tab-panel/styles.d.ts +1 -0
package/Tabs/tab-panel/styles.js +5 -0
package/Tabs/tab-panel/tab-panel.d.ts +3 -0
package/Tabs/tab-panel/tab-panel.js +16 -0
package/Tabs/tab-panel/tab-panel.types.d.ts +5 -0
package/Tabs/tab-panel/tab-panel.types.js +1 -0
package/Tabs/tabs/index.d.ts +2 -0
package/Tabs/tabs/index.js +2 -0
package/Tabs/tabs/styles.d.ts +1 -0
package/Tabs/tabs/styles.js +6 -0
package/Tabs/tabs/tabs.d.ts +3 -0
package/Tabs/tabs/tabs.js +17 -0
package/Tabs/tabs/tabs.types.d.ts +6 -0
package/Tabs/tabs/tabs.types.js +1 -0
package/Tabs/tabs-list-slide-frame/index.d.ts +3 -0
package/Tabs/tabs-list-slide-frame/index.js +3 -0
package/Tabs/tabs-list-slide-frame/tabs-list-slide-frame.d.ts +3 -0
package/Tabs/tabs-list-slide-frame/tabs-list-slide-frame.js +68 -0
package/Tabs/tabs-list-slide-frame/tabs-list-slide-frame.styles.d.ts +9 -0
package/Tabs/tabs-list-slide-frame/tabs-list-slide-frame.styles.js +26 -0
package/Tabs/tabs-list-slide-frame/tabs-list-slide-frame.types.d.ts +1 -0
package/Tabs/tabs-list-slide-frame/tabs-list-slide-frame.types.js +1 -0
package/Tabs/tabs.context.d.ts +4 -0
package/Tabs/tabs.context.js +9 -0
package/Tabs/tabs.helpers.d.ts +1 -0
package/Tabs/tabs.helpers.js +18 -0
package/Tabs/tabs.types.d.ts +5 -0
package/Tabs/tabs.types.js +1 -0
package/index.d.ts +3 -0
package/index.js +3 -0
package/package.json +47 -0

package/EmailTemplatePreview/EmailTemplatePreview.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { type FC } from 'react';
+type PreviewIframeProps = {
+    scale?: number;
+    width?: string;
+    height?: string;
+    template: string;
+    localization: Record<string, string>;
+    values: Record<string, any>;
+};
+export declare const EmailTemplatePreview: FC<PreviewIframeProps>;
+export {};

package/EmailTemplatePreview/EmailTemplatePreview.js ADDED Viewed

@@ -0,0 +1,32 @@
+import { Liquid } from 'liquidjs';
+import React, { useMemo, useState } from 'react';
+import { replacePlaceholders } from './helpers';
+import { IframeStyled } from './styled';
+const createLiquidInstance = () => new Liquid();
+export const EmailTemplatePreview = ({
+  scale,
+  width,
+  height,
+  template,
+  localization,
+  values
+}) => {
+  const [liquidInstance] = useState(createLiquidInstance);
+  const src = useMemo(() => {
+    try {
+      return liquidInstance.parseAndRenderSync(replacePlaceholders(template, localization), values);
+    } catch (e) {
+      console.error('Error in PreviewIframe', e);
+      return `<body style="font-size: 24px; color: darkred">${e.message}</body>`;
+    }
+  }, [template, localization, values, liquidInstance]);
+  return React.createElement(IframeStyled, {
+    "$scale": scale,
+    "$width": width,
+    "$height": height
+  }, React.createElement("iframe", {
+    srcDoc: src,
+    sandbox: "allow-same-origin",
+    title: "preview"
+  }));
+};

package/EmailTemplatePreview/helpers.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function replacePlaceholders(str: string, placeholders: Record<string, string>): string;

package/EmailTemplatePreview/helpers.js ADDED Viewed

@@ -0,0 +1,8 @@
+export function replacePlaceholders(str, placeholders) {
+  const keys = Object.keys(placeholders);
+  return keys.reduce((acc, key) => {
+    const escaped = key.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&');
+    const pattern = new RegExp(`{{${escaped}(\\|[^}]*)?}}`, 'g');
+    return acc.replace(pattern, placeholders[key]);
+  }, str);
+}

package/EmailTemplatePreview/index.d.ts ADDED Viewed

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

package/EmailTemplatePreview/index.js ADDED Viewed

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

package/EmailTemplatePreview/styled.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export declare const IframeStyled: import("styled-components").StyledComponent<"div", any, {
+    $scale?: number;
+    $width?: string;
+    $height?: string;
+}, never>;

package/EmailTemplatePreview/styled.js ADDED Viewed

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+export const IframeStyled = styled.div.withConfig({
+  displayName: "IframeStyled",
+  componentId: "sc-jqsau1-0"
+})(["", " ", " overflow:hidden;background-color:#fff;& > iframe{", " ", " ", " border:none;padding:0;}"], ({
+  $width
+}) => $width && `width: ${$width};`, ({
+  $height
+}) => $height && `height: ${$height};`, ({
+  $scale
+}) => {
+  if ($scale) {
+    const translate = -50 * ($scale - 1) / $scale;
+    return `transform: translateX(${translate}%) translateY(${translate}%) scale(${1 / $scale});`;
+  }
+}, ({
+  $scale,
+  $width
+}) => $width && `width: ${$scale ? `calc(${$scale}*${$width})` : $width};`, ({
+  $scale,
+  $height
+}) => $height && `height: ${$scale ? `calc(${$scale}*${$height})` : $height};`);

package/ProgressBar/ProgressBar.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type ProgressBoxProps } from './types';
+export declare const ProgressBar: ({ percentValue, title, rightSlot, color, backgroundColor, }: ProgressBoxProps) => React.JSX.Element;

package/ProgressBar/ProgressBar.js ADDED Viewed

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { Spinner } from '@pushwoosh/kit-spinner';
+import { Container, LoadingHeader, LoadingText, ProgressLine, ProgressBarActive, ProgressBoxContainer, RightSlotContainer, SpinnerContainer, ProgressLineContainer } from './styled';
+export const ProgressBar = ({
+  percentValue,
+  title,
+  rightSlot,
+  color = Color.BRIGHT,
+  backgroundColor = Color.BRIGHT_LIGHT
+}) => React.createElement(Container, null, React.createElement(SpinnerContainer, {
+  "$backgroundColor": backgroundColor
+}, React.createElement(Spinner, {
+  color: color,
+  size: "medium"
+})), React.createElement(ProgressBoxContainer, null, React.createElement(LoadingHeader, null, React.createElement(LoadingText, null, title, ' ', `${percentValue}%`), rightSlot && React.createElement(RightSlotContainer, null, rightSlot)), React.createElement(ProgressLineContainer, null, React.createElement(ProgressLine, null, React.createElement(ProgressBarActive, {
+  "$width": percentValue,
+  "$color": color
+})))));

package/ProgressBar/index.d.ts ADDED Viewed

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

package/ProgressBar/index.js ADDED Viewed

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

package/ProgressBar/styled.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { H5 } from '@pushwoosh/kit-typography';
+export declare const ProgressLine: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressLineContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressBarActive: import("styled-components").StyledComponent<"div", any, {
+    $width: number;
+    $color: string;
+}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SpinnerContainer: import("styled-components").StyledComponent<"div", any, {
+    $backgroundColor: string;
+}, never>;
+export declare const ProgressBoxContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LoadingHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LoadingText: import("styled-components").StyledComponent<typeof H5, any, {}, never>;
+export declare const RightSlotContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/ProgressBar/styled.js ADDED Viewed

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+import { Color, FontSize, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
+import { H5 } from '@pushwoosh/kit-typography';
+export const ProgressLine = styled.div.withConfig({
+  displayName: "ProgressLine",
+  componentId: "sc-1asyx7c-0"
+})(["display:flex;height:5px;border-radius:", ";background:", ";"], ShapeRadius.CONTROL, Color.SOFT_LIGHT);
+export const ProgressLineContainer = styled.div.withConfig({
+  displayName: "ProgressLineContainer",
+  componentId: "sc-1asyx7c-1"
+})(["padding:", " 0;"], Spacing.S1);
+export const ProgressBarActive = styled(ProgressLine).withConfig({
+  displayName: "ProgressBarActive",
+  componentId: "sc-1asyx7c-2"
+})(["width:", ";background:", ";"], ({
+  $width
+}) => `${$width}%`, ({
+  $color
+}) => $color || Color.BRIGHT);
+export const Container = styled.div.withConfig({
+  displayName: "Container",
+  componentId: "sc-1asyx7c-3"
+})(["display:flex;width:100%;gap:", ";align-items:center;"], Spacing.S4);
+export const SpinnerContainer = styled.div.withConfig({
+  displayName: "SpinnerContainer",
+  componentId: "sc-1asyx7c-4"
+})(["background-color:", ";border-radius:", ";padding:", ";"], ({
+  $backgroundColor
+}) => $backgroundColor, ShapeRadius.CONTROL, Spacing.S1);
+export const ProgressBoxContainer = styled.div.withConfig({
+  displayName: "ProgressBoxContainer",
+  componentId: "sc-1asyx7c-5"
+})(["display:flex;flex-direction:column;flex:1;"]);
+export const LoadingHeader = styled.div.withConfig({
+  displayName: "LoadingHeader",
+  componentId: "sc-1asyx7c-6"
+})(["display:flex;gap:", ";align-items:center;justify-content:space-between;"], Spacing.S2);
+export const LoadingText = styled(H5).withConfig({
+  displayName: "LoadingText",
+  componentId: "sc-1asyx7c-7"
+})(["color:", ";text-transform:uppercase;font-size:", ";"], Color.MAIN, FontSize.SMALL);
+export const RightSlotContainer = styled.div.withConfig({
+  displayName: "RightSlotContainer",
+  componentId: "sc-1asyx7c-8"
+})(["display:flex;right:0;"]);

package/ProgressBar/types.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+export type ProgressBoxProps = {
+    percentValue: number;
+    title: string;
+    rightSlot?: ReactNode;
+    color?: string;
+    backgroundColor?: string;
+};

package/ProgressBar/types.js ADDED Viewed

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

package/Tabs/index.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export * from './tabs.types';
+export * from './tab';
+export * from './tabs';
+export * from './tab-bar';
+export * from './tab-panel';

package/Tabs/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+export * from './tabs.types';
+export * from './tab';
+export * from './tabs';
+export * from './tab-bar';
+export * from './tab-panel';

package/Tabs/tab/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './tab.types';
2	+ export * from './tab';

package/Tabs/tab/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './tab.types';
2	+ export * from './tab';

package/Tabs/tab/tab.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const Tab: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "onClick"> & Readonly<{
+    code: import("..").TabCode;
+    onActivate?: (code: import("..").TabCode) => void;
+    isDisabled?: boolean;
+    isNew?: boolean;
+    icon?: React.ReactNode;
+}> & React.RefAttributes<HTMLDivElement>>;

package/Tabs/tab/tab.js ADDED Viewed

@@ -0,0 +1,26 @@
+import React, { forwardRef } from 'react';
+import { TabBase } from '../tab-base';
+import { useTabsContext } from '../tabs.context';
+export const Tab = forwardRef((props, ref) => {
+  const {
+    code,
+    children,
+    onActivate,
+    ...rest
+  } = props;
+  const {
+    activeTabCode,
+    setActiveTabCode
+  } = useTabsContext();
+  return React.createElement(TabBase, {
+    isActive: code === activeTabCode,
+    ref: ref,
+    onClick: () => {
+      if (!rest.isDisabled) {
+        setActiveTabCode(code);
+        onActivate === null || onActivate === void 0 || onActivate(code);
+      }
+    },
+    ...rest
+  }, children);
+});

package/Tabs/tab/tab.types.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { TabCode } from '../tabs.types';
+export type TabProps = Omit<JSX.IntrinsicElements['div'], 'ref' | 'onClick'> & Readonly<{
+    code: TabCode;
+    onActivate?: (code: TabCode) => void;
+    isDisabled?: boolean;
+    isNew?: boolean;
+    icon?: ReactNode;
+}>;

package/Tabs/tab/tab.types.js ADDED Viewed

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

package/Tabs/tab-bar/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './tab-bar.types';
2	+ export * from './tab-bar';

package/Tabs/tab-bar/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './tab-bar.types';
2	+ export * from './tab-bar';

package/Tabs/tab-bar/tab-bar.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const TabBar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Readonly<{
+    title?: React.ReactNode;
+}> & React.RefAttributes<HTMLDivElement>>;

package/Tabs/tab-bar/tab-bar.js ADDED Viewed

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+import { H4 } from '@pushwoosh/kit-typography';
+import { TabBarTitleBox, TabBarContainer } from './tab-bar.styles';
+import { TabBarScrollableFrame } from '../tabs-list-slide-frame';
+export const TabBar = forwardRef((props, ref) => {
+  const {
+    children,
+    title,
+    ...rest
+  } = props;
+  return React.createElement(TabBarContainer, {
+    hasTitle: !!title,
+    ref: ref,
+    ...rest
+  }, title && React.createElement(TabBarTitleBox, null, React.createElement(H4, null, title)), React.createElement(TabBarScrollableFrame, null, children));
+});

package/Tabs/tab-bar/tab-bar.styles.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export declare const TabBarContainer: import("styled-components").StyledComponent<"div", any, {
+    hasTitle: boolean;
+}, never>;
+export declare const TabBarTitleBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Tabs/tab-bar/tab-bar.styles.js ADDED Viewed

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { Color, Spacing } from '@pushwoosh/kit-constants';
+export const TabBarContainer = styled.div.withConfig({
+  displayName: "TabBarContainer",
+  componentId: "sc-1z0lfzo-0"
+})(["position:relative;display:grid;grid-template-columns:", ";width:100%;height:40px;background:", ";border-radius:8px;padding:", ";"], ({
+  hasTitle
+}) => hasTitle ? 'max-content 1fr' : '1fr', Color.SOFT_LIGHT, Spacing.S1);
+export const TabBarTitleBox = styled.div.withConfig({
+  displayName: "TabBarTitleBox",
+  componentId: "sc-1z0lfzo-1"
+})(["display:flex;align-items:center;position:relative;padding:0 ", " 0 ", ";"], Spacing.S4, Spacing.S5);

package/Tabs/tab-bar/tab-bar.types.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export type TabBarProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & Readonly<{
+    title?: ReactNode;
+}>;

package/Tabs/tab-bar/tab-bar.types.js ADDED Viewed

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

package/Tabs/tab-base/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export * from './tab-base.styles';
+export * from './tab-base.types';
+export * from './tab-base';

package/Tabs/tab-base/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export * from './tab-base.styles';
+export * from './tab-base.types';
+export * from './tab-base';

package/Tabs/tab-base/tab-base.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const TabBase: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Readonly<{
+    isActive?: boolean;
+    isDisabled?: boolean;
+    isNew?: boolean;
+    icon?: React.ReactNode;
+    onClick: () => void;
+    className?: string;
+}> & React.RefAttributes<HTMLDivElement>>;

package/Tabs/tab-base/tab-base.js ADDED Viewed

@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react';
+import { TabIconBox, TabRedDot, TabBody, TabButtonLabel } from './tab-base.styles';
+export const TabBase = forwardRef((props, ref) => {
+  const {
+    isActive,
+    isDisabled,
+    children,
+    isNew,
+    icon,
+    ...rest
+  } = props;
+  return React.createElement(TabBody, {
+    as: "span",
+    "$isActive": isActive,
+    "$isDisabled": isDisabled,
+    "$hasIcon": !!icon,
+    ref: ref,
+    ...rest
+  }, React.createElement(TabButtonLabel, {
+    "$isActive": isActive
+  }, children), icon && React.createElement(TabIconBox, null, icon), isNew && React.createElement(TabRedDot, null));
+});

package/Tabs/tab-base/tab-base.styles.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { H4 } from '@pushwoosh/kit-typography';
+export declare const TabBody: import("styled-components").StyledComponent<"div", any, {
+    $isActive?: boolean;
+    $isDisabled?: boolean;
+    $hasIcon?: boolean;
+}, never>;
+export declare const TabRedDot: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TabButtonLabel: import("styled-components").StyledComponent<typeof H4, any, {
+    $isActive?: boolean;
+}, never>;
+export declare const TabIconBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Tabs/tab-base/tab-base.styles.js ADDED Viewed

@@ -0,0 +1,41 @@
+import styled, { css } from 'styled-components';
+import { Color, Shadow, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
+import { H4 } from '@pushwoosh/kit-typography';
+const tabBodyHover = css(["&:hover{color:", ";background-color:", ";}"], Color.PRIMARY_HOVER, Color.BRIGHT_LIGHT);
+export const TabBody = styled.div.withConfig({
+  displayName: "TabBody",
+  componentId: "sc-1vksurj-0"
+})(["display:flex;justify-content:center;align-items:center;position:relative;padding:", " ", " ", " ", ";background-color:", ";border-radius:", ";box-shadow:", ";cursor:", ";user-select:none;white-space:nowrap;color:", ";", ""], Spacing.S2, ({
+  $hasIcon
+}) => $hasIcon ? Spacing.S4 : Spacing.S5, Spacing.S2, Spacing.S5, ({
+  $isActive
+}) => $isActive ? Color.CLEAR : 'transparent', ShapeRadius.CONTROL, ({
+  $isActive
+}) => $isActive ? Shadow.SMALL : 'none', ({
+  $isActive,
+  $isDisabled
+}) => {
+  if ($isDisabled) {
+    return 'not-allowed';
+  }
+  return $isActive ? 'default' : 'pointer';
+}, ({
+  $isDisabled
+}) => $isDisabled ? Color.LOCKED : Color.MAIN, ({
+  $isActive,
+  $isDisabled
+}) => !$isActive && !$isDisabled && tabBodyHover);
+export const TabRedDot = styled.div.withConfig({
+  displayName: "TabRedDot",
+  componentId: "sc-1vksurj-1"
+})(["width:4px;height:20px;position:relative;&::before{content:\"\";background-color:", ";position:absolute;top:0;left:0;width:4px;height:4px;border-radius:4px;}"], Color.DANGER);
+export const TabButtonLabel = styled(H4).withConfig({
+  displayName: "TabButtonLabel",
+  componentId: "sc-1vksurj-2"
+})(["opacity:", ";"], ({
+  $isActive
+}) => $isActive ? 1 : 0.8);
+export const TabIconBox = styled.div.withConfig({
+  displayName: "TabIconBox",
+  componentId: "sc-1vksurj-3"
+})(["margin-left:", ";"], Spacing.S1);

package/Tabs/tab-base/tab-base.types.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export type TabBaseProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & Readonly<{
+    isActive?: boolean;
+    isDisabled?: boolean;
+    isNew?: boolean;
+    icon?: ReactNode;
+    onClick: () => void;
+    className?: string;
+}>;

package/Tabs/tab-base/tab-base.types.js ADDED Viewed

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

package/Tabs/tab-panel/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './tab-panel.types';
2	+ export * from './tab-panel';

package/Tabs/tab-panel/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './tab-panel.types';
2	+ export * from './tab-panel';

package/Tabs/tab-panel/styles.d.ts ADDED Viewed

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

package/Tabs/tab-panel/styles.js ADDED Viewed

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const TabPanelContainer = styled.div.withConfig({
+  displayName: "TabPanelContainer",
+  componentId: "sc-1kewjsc-0"
+})(["overflow:auto;flex:1;"]);

package/Tabs/tab-panel/tab-panel.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import type { TabPanelProps } from './tab-panel.types';
+export declare const TabPanel: FC<TabPanelProps>;

package/Tabs/tab-panel/tab-panel.js ADDED Viewed

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TabPanelContainer } from './styles';
+import { useTabsContext } from '../tabs.context';
+export const TabPanel = props => {
+  const {
+    code,
+    children
+  } = props;
+  const {
+    activeTabCode
+  } = useTabsContext();
+  if (code !== activeTabCode) {
+    return null;
+  }
+  return React.createElement(TabPanelContainer, null, children);
+};

package/Tabs/tab-panel/tab-panel.types.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import type { PropsWithChildren } from 'react';
+import type { TabCode } from '../tabs.types';
+export type TabPanelProps = PropsWithChildren<Readonly<{
+    code: TabCode;
+}>>;

package/Tabs/tab-panel/tab-panel.types.js ADDED Viewed

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

package/Tabs/tabs/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './tabs.types';
2	+ export * from './tabs';

package/Tabs/tabs/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './tabs.types';
2	+ export * from './tabs';

package/Tabs/tabs/styles.d.ts ADDED Viewed

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

package/Tabs/tabs/styles.js ADDED Viewed

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { Spacing } from '@pushwoosh/kit-constants';
+export const TabsContainer = styled.div.withConfig({
+  displayName: "TabsContainer",
+  componentId: "sc-1z082s8-0"
+})(["display:flex;flex-direction:column;gap:", ";width:100%;height:100%;"], Spacing.S5);

package/Tabs/tabs/tabs.d.ts ADDED Viewed

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

package/Tabs/tabs/tabs.js ADDED Viewed

@@ -0,0 +1,17 @@
+import React, { useMemo } from 'react';
+import { TabsContainer } from './styles';
+import { TabContext } from '../tabs.context';
+export function Tabs(props) {
+  const {
+    activeCode: activeTabCode,
+    onChange: setActiveTabCode,
+    children
+  } = props;
+  const contextValue = useMemo(() => ({
+    activeTabCode,
+    setActiveTabCode
+  }), [activeTabCode, setActiveTabCode]);
+  return React.createElement(TabContext.Provider, {
+    value: contextValue
+  }, React.createElement(TabsContainer, null, children));
+}

package/Tabs/tabs/tabs.types.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import type { PropsWithChildren } from 'react';
+import { type TabCode } from '../tabs.types';
+export type TabsProps = PropsWithChildren<Readonly<{
+    activeCode: TabCode;
+    onChange: (code: TabCode) => void;
+}>>;

package/Tabs/tabs/tabs.types.js ADDED Viewed

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

package/Tabs/tabs-list-slide-frame/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export * from './tabs-list-slide-frame.styles';
+export * from './tabs-list-slide-frame.types';
+export * from './tabs-list-slide-frame';

package/Tabs/tabs-list-slide-frame/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export * from './tabs-list-slide-frame.styles';
+export * from './tabs-list-slide-frame.types';
+export * from './tabs-list-slide-frame';

package/Tabs/tabs-list-slide-frame/tabs-list-slide-frame.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type TabsListSlideFrameProps } from './tabs-list-slide-frame.types';
+export declare const TabBarScrollableFrame: React.ForwardRefExoticComponent<TabsListSlideFrameProps & React.RefAttributes<HTMLDivElement>>;

package/Tabs/tabs-list-slide-frame/tabs-list-slide-frame.js ADDED Viewed

@@ -0,0 +1,68 @@
+import debounce from 'lodash/debounce';
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { ChevronIcon } from '@pushwoosh/kit-icons';
+import { TabBarContent, TabBarFrame, TabBarArrowContainer, TabBarWindow } from './tabs-list-slide-frame.styles';
+import { widthObserver } from '../tabs.helpers';
+export const TabBarScrollableFrame = forwardRef(({
+  children,
+  ...props
+}, ref) => {
+  const windowRef = useRef(null);
+  const contentRef = useRef(null);
+  const [frameWidth, setFrameWidth] = useState(0);
+  const [contentWidth, setContentWidth] = useState(0);
+  const [scrollLeft, setScrollLeft] = useState(0);
+  const scrollable = contentWidth > frameWidth;
+  const minLeft = frameWidth - contentWidth;
+  const onClick = useCallback(event => {
+    const {
+      currentTarget
+    } = event;
+    setScrollLeft(curVal => {
+      if (currentTarget.dataset.left) {
+        const newVal = curVal + frameWidth * 0.75;
+        return newVal > 0 ? 0 : newVal;
+      }
+      const newVal = curVal - frameWidth * 0.75;
+      return newVal < minLeft ? minLeft : newVal;
+    });
+  }, [frameWidth, minLeft]);
+  useEffect(() => {
+    if (contentWidth > frameWidth) {
+      if (scrollLeft + contentWidth < frameWidth) {
+        setScrollLeft(frameWidth - contentWidth);
+      }
+    } else {
+      setScrollLeft(0);
+    }
+  }, [frameWidth, contentWidth, scrollLeft]);
+  useEffect(() => {
+    const stopFrameObserver = widthObserver(windowRef.current, setFrameWidth);
+    const stopContentObserver = widthObserver(contentRef.current, debounce(setContentWidth, 50));
+    return () => {
+      stopContentObserver();
+      stopFrameObserver();
+    };
+  }, [windowRef, setFrameWidth, contentRef, setContentWidth]);
+  return React.createElement(TabBarFrame, {
+    ...props,
+    ref: ref
+  }, React.createElement(TabBarWindow, {
+    ref: windowRef
+  }, React.createElement(TabBarContent, {
+    left: scrollLeft,
+    ref: contentRef
+  }, children)), scrollable && scrollLeft < 0 && React.createElement(TabBarArrowContainer, {
+    "data-left": true,
+    onClick: onClick
+  }, React.createElement(ChevronIcon, {
+    direction: "left",
+    size: "small"
+  })), scrollable && scrollLeft > minLeft && React.createElement(TabBarArrowContainer, {
+    "$right": true,
+    onClick: onClick
+  }, React.createElement(ChevronIcon, {
+    direction: "right",
+    size: "small"
+  })));
+});

package/Tabs/tabs-list-slide-frame/tabs-list-slide-frame.styles.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+export declare const TabBarArrowContainer: import("styled-components").StyledComponent<"div", any, {
+    $right?: boolean;
+}, never>;
+export declare const TabBarWindow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TabsListContentBase: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TabBarContent: import("styled-components").StyledComponent<"div", any, {
+    left: number;
+}, never>;
+export declare const TabBarFrame: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Tabs/tabs-list-slide-frame/tabs-list-slide-frame.styles.js ADDED Viewed

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { Color, Shadow, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
+export const TabBarArrowContainer = styled.div.withConfig({
+  displayName: "TabBarArrowContainer",
+  componentId: "sc-u8lb05-0"
+})(["position:absolute;top:0;", ":0;display:flex;align-items:center;height:32px;cursor:pointer;color:", ";background-color:", ";box-shadow:", ";border-radius:", ";padding:", " ", ";&:hover{color:", ";}"], ({
+  $right
+}) => $right ? 'right' : 'left', Color.MAIN, Color.CLEAR, Shadow.SMALL, ShapeRadius.CONTROL, Spacing.S3, Spacing.S1, Color.PRIMARY_HOVER);
+export const TabBarWindow = styled.div.withConfig({
+  displayName: "TabBarWindow",
+  componentId: "sc-u8lb05-1"
+})(["position:relative;height:32px;width:100%;overflow:hidden;"]);
+export const TabsListContentBase = styled.div.withConfig({
+  displayName: "TabsListContentBase",
+  componentId: "sc-u8lb05-2"
+})(["position:absolute;top:0;display:flex;align-items:center;transition:left .4s ease-in;"]);
+export const TabBarContent = styled(TabsListContentBase).withConfig({
+  displayName: "TabBarContent",
+  componentId: "sc-u8lb05-3"
+})(["left:", "px;gap:", ";"], ({
+  left
+}) => left, Spacing.S1);
+export const TabBarFrame = styled.div.withConfig({
+  displayName: "TabBarFrame",
+  componentId: "sc-u8lb05-4"
+})(["position:relative;width:100%;"]);

package/Tabs/tabs-list-slide-frame/tabs-list-slide-frame.types.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export type TabsListSlideFrameProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;

package/Tabs/tabs-list-slide-frame/tabs-list-slide-frame.types.js ADDED Viewed

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

package/Tabs/tabs.context.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { TabContextType } from './tabs.types';
+export declare const TabContext: React.Context<TabContextType>;
+export declare function useTabsContext(): TabContextType;

package/Tabs/tabs.context.js ADDED Viewed

@@ -0,0 +1,9 @@
+import React, { useContext } from 'react';
+export const TabContext = React.createContext(null);
+export function useTabsContext() {
+  const context = useContext(TabContext);
+  if (!context) {
+    throw new Error('no tabs context');
+  }
+  return context;
+}

package/Tabs/tabs.helpers.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function widthObserver(element: Element, onWidthChanged: (width: number) => void): () => void;

package/Tabs/tabs.helpers.js ADDED Viewed

@@ -0,0 +1,18 @@
+export function widthObserver(element, onWidthChanged) {
+  if (!window.ResizeObserver) {
+    let lastWidth = 0;
+    const interval = setInterval(() => {
+      const {
+        width
+      } = element.getBoundingClientRect();
+      if (width !== lastWidth) {
+        lastWidth = width;
+        onWidthChanged(width);
+      }
+    }, 999);
+    return () => clearInterval(interval);
+  }
+  const observer = new ResizeObserver(entries => onWidthChanged(entries[0].contentRect.width));
+  observer.observe(element);
+  return () => observer.disconnect();
+}

package/Tabs/tabs.types.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export type TabCode = string | number;
+export type TabContextType = {
+    activeTabCode: TabCode;
+    setActiveTabCode: (code: TabCode) => void;
+};

package/Tabs/tabs.types.js ADDED Viewed

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

package/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { ProgressBar } from './ProgressBar';
+export * from './Tabs';
+export { EmailTemplatePreview } from './EmailTemplatePreview/EmailTemplatePreview';

package/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export { ProgressBar } from './ProgressBar';
+export * from './Tabs';
+export { EmailTemplatePreview } from './EmailTemplatePreview/EmailTemplatePreview';

package/package.json ADDED Viewed

@@ -0,0 +1,47 @@
+{
+  "name": "@pushwoosh/dumb-components",
+  "version": "0.0.8",
+  "description": "React components to build Pushwoosh products",
+  "main": "index.js",
+  "module": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "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\" && eslint .",
+    "check:types": "echo \"Run check:types\" && pushwoosh-engine lib:check-types"
+  },
+  "pre-commit": "check",
+  "devDependencies": {
+    "@pushwoosh/frontend-builder-engine": "^1.0.4",
+    "@pushwoosh/kit-constants": "^1.6.0",
+    "@types/lodash": "^4.17.13",
+    "@types/react": "^18.2.69",
+    "@types/react-dom": "^18.2.22",
+    "@types/styled-components": "^5.1.34",
+    "pre-commit": "^1.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
+    "styled-components": "^5.3.11"
+  },
+  "peerDependencies": {
+    "@pushwoosh/kit-constants": "^1.6.0",
+    "react": ">= 16.14.0",
+    "styled-components": "^5.3.3 || ^6.0.0"
+  },
+  "engines": {
+    "node": ">= 18",
+    "npm": ">= 7"
+  },
+  "dependencies": {
+    "@pushwoosh/kit-icons": "^2.0.25",
+    "@pushwoosh/kit-spinner": "^1.5.1",
+    "@pushwoosh/kit-typography": "^1.7.1",
+    "liquidjs": "^10.18.0",
+    "lodash": "^4.17.21"
+  }
+}