@pushwoosh/dumb-components 1.0.0 → 1.0.1

package/Tooltip/maps.d.ts

@@ -0,0 +1,48 @@
+import type { TooltipPosition } from './types';
+export declare const TooltipPositionToTippyPlacementMap: {
+    'top-start': "top-start";
+    'top-middle': "top";
+    'top-end': "top-end";
+    'right-start': "right-start";
+    'right-middle': "right";
+    'right-end': "right-end";
+    'bottom-start': "bottom-start";
+    'bottom-middle': "bottom";
+    'bottom-end': "bottom-end";
+    'left-start': "left-start";
+    'left-middle': "left";
+    'left-end': "left-end";
+};
+export declare const TooltipPositionToTippyOffsetMap: {
+    'top-start': number[];
+    'top-middle': number[];
+    'top-end': number[];
+    'right-start': number[];
+    'right-middle': number[];
+    'right-end': number[];
+    'bottom-start': number[];
+    'bottom-middle': number[];
+    'bottom-end': number[];
+    'left-start': number[];
+    'left-middle': number[];
+    'left-end': number[];
+};
+export declare const TooltipPositionToArrowOffsetMap: {
+    'top-start': string;
+    'top-middle': string;
+    'top-end': string;
+    'right-start': string;
+    'right-middle': string;
+    'right-end': string;
+    'bottom-start': string;
+    'bottom-middle': string;
+    'bottom-end': string;
+    'left-start': string;
+    'left-middle': string;
+    'left-end': string;
+};
+export declare function getTransform(position: TooltipPosition): "none" | "translateX(-50%) translateY(50%) rotate(45deg);" | "translateX(50%) translateY(50%) rotate(45deg);" | "translateX(-50%) translateY(-50%) rotate(45deg);" | "translateX(50%) translateY(-50%) rotate(45deg);";
+export declare function getTopPosition(position: TooltipPosition, offset: string): string;
+export declare function getRightPosition(position: TooltipPosition, offset: string): string;
+export declare function getBottomPosition(position: TooltipPosition, offset: string): string;
+export declare function getLeftPosition(position: TooltipPosition, offset: string): string;

package/Tooltip/maps.js

@@ -0,0 +1,161 @@
+export const TooltipPositionToTippyPlacementMap = {
+  'top-start': 'top-start',
+  'top-middle': 'top',
+  'top-end': 'top-end',
+  'right-start': 'right-start',
+  'right-middle': 'right',
+  'right-end': 'right-end',
+  'bottom-start': 'bottom-start',
+  'bottom-middle': 'bottom',
+  'bottom-end': 'bottom-end',
+  'left-start': 'left-start',
+  'left-middle': 'left',
+  'left-end': 'left-end'
+};
+export const TooltipPositionToTippyOffsetMap = {
+  'top-start': [-6, 8],
+  'top-middle': [0, 8],
+  'top-end': [6, 8],
+  'right-start': [-6, 8],
+  'right-middle': [0, 8],
+  'right-end': [6, 8],
+  'bottom-start': [-6, 8],
+  'bottom-middle': [0, 8],
+  'bottom-end': [6, 8],
+  'left-start': [-6, 8],
+  'left-middle': [0, 8],
+  'left-end': [6, 8]
+};
+export const TooltipPositionToArrowOffsetMap = {
+  'top-start': '24px',
+  'top-middle': '50%',
+  'top-end': '24px',
+  'right-start': '24px',
+  'right-middle': '50%',
+  'right-end': '24px',
+  'bottom-start': '24px',
+  'bottom-middle': '50%',
+  'bottom-end': '24px',
+  'left-start': '24px',
+  'left-middle': '50%',
+  'left-end': '24px'
+};
+export function getTransform(position) {
+  switch (position) {
+    case 'top-start':
+      return 'translateX(-50%) translateY(50%) rotate(45deg);';
+    case 'top-middle':
+      return 'translateX(-50%) translateY(50%) rotate(45deg);';
+    case 'top-end':
+      return 'translateX(50%) translateY(50%) rotate(45deg);';
+    case 'right-start':
+      return 'translateX(-50%) translateY(-50%) rotate(45deg);';
+    case 'right-middle':
+      return 'translateX(-50%) translateY(-50%) rotate(45deg);';
+    case 'right-end':
+      return 'translateX(-50%) translateY(50%) rotate(45deg);';
+    case 'bottom-start':
+      return 'translateX(-50%) translateY(-50%) rotate(45deg);';
+    case 'bottom-middle':
+      return 'translateX(-50%) translateY(-50%) rotate(45deg);';
+    case 'bottom-end':
+      return 'translateX(50%) translateY(-50%) rotate(45deg);';
+    case 'left-start':
+      return 'translateX(50%) translateY(-50%) rotate(45deg);';
+    case 'left-middle':
+      return 'translateX(50%) translateY(-50%) rotate(45deg);';
+    case 'left-end':
+      return 'translateX(50%) translateY(50%) rotate(45deg);';
+    default:
+      console.error(`[Tooltip]: unknown position: ${position}!`);
+      return 'none';
+  }
+}
+export function getTopPosition(position, offset) {
+  switch (position) {
+    case 'top-start':
+    case 'top-middle':
+    case 'top-end':
+    case 'right-end':
+    case 'left-end':
+      return 'auto';
+    case 'right-start':
+    case 'right-middle':
+    case 'left-start':
+    case 'left-middle':
+      return offset;
+    case 'bottom-start':
+    case 'bottom-middle':
+    case 'bottom-end':
+      return '0';
+    default:
+      console.error(`[Tooltip]: unknown position: ${position}!`);
+      return 'auto';
+  }
+}
+export function getRightPosition(position, offset) {
+  switch (position) {
+    case 'top-start':
+    case 'top-middle':
+    case 'right-start':
+    case 'right-middle':
+    case 'right-end':
+    case 'bottom-start':
+    case 'bottom-middle':
+      return 'auto';
+    case 'top-end':
+    case 'bottom-end':
+      return offset;
+    case 'left-end':
+    case 'left-start':
+    case 'left-middle':
+      return '0';
+    default:
+      console.error(`[Tooltip]: unknown position: ${position}!`);
+      return 'auto';
+  }
+}
+export function getBottomPosition(position, offset) {
+  switch (position) {
+    case 'top-start':
+    case 'top-middle':
+    case 'top-end':
+      return '0';
+    case 'right-end':
+    case 'left-end':
+      return offset;
+    case 'bottom-start':
+    case 'bottom-middle':
+    case 'bottom-end':
+    case 'right-start':
+    case 'right-middle':
+    case 'left-start':
+    case 'left-middle':
+      return 'auto';
+    default:
+      console.error(`[Tooltip]: unknown position: ${position}!`);
+      return 'auto';
+  }
+}
+export function getLeftPosition(position, offset) {
+  switch (position) {
+    case 'top-start':
+    case 'top-middle':
+    case 'bottom-start':
+    case 'bottom-middle':
+      return offset;
+    case 'top-end':
+    case 'bottom-end':
+    case 'left-end':
+    case 'left-start':
+    case 'left-middle':
+      return 'auto';
+    case 'right-start':
+    case 'right-end':
+    case 'right-middle':
+      return '0';
+    default:
+      console.error(`[Tooltip]: unknown position: ${position}!`);
+      return 'auto';
+  }
+}

package/Tooltip/styles.d.ts

@@ -0,0 +1,5 @@
+import type { TooltipPosition } from './types';
+export declare const TooltipBox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@tippyjs/react").TippyProps>, any, {
+    $arrowOffset: string;
+    $position: TooltipPosition;
+}, never>;

package/Tooltip/styles.js

@@ -0,0 +1,22 @@
+import Tippy from '@tippyjs/react';
+import styled from 'styled-components';
+import { Color, FontSize, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
+import { getBottomPosition, getLeftPosition, getRightPosition, getTopPosition, getTransform } from './maps';
+export const TooltipBox = styled(Tippy).withConfig({
+  displayName: "TooltipBox",
+  componentId: "sc-1hariht-0"
+})(["&::after{content:\"\";position:absolute;top:", ";right:", ";bottom:", ";left:", ";width:10px;height:10px;margin:auto;border-radius:2px;background-color:", ";transform:", ";}&.tippy-box{position:static;display:block;padding:", ";color:", ";background-color:", ";border-radius:", ";font-size:", ";line-height:inherit;outline:0;transition:none;}.tippy-content{position:static;padding:0;z-index:auto;}.tippy-arrow{display:none;}"], ({
+  $position,
+  $arrowOffset
+}) => getTopPosition($position, $arrowOffset), ({
+  $position,
+  $arrowOffset
+}) => getRightPosition($position, $arrowOffset), ({
+  $position,
+  $arrowOffset
+}) => getBottomPosition($position, $arrowOffset), ({
+  $position,
+  $arrowOffset
+}) => getLeftPosition($position, $arrowOffset), Color.MAIN, ({
+  $position
+}) => getTransform($position), Spacing.S4, Color.CLEAR, Color.MAIN, ShapeRadius.DIALOG, FontSize.REGULAR);

package/Tooltip/types.d.ts

@@ -0,0 +1,14 @@
+import type { RefObject, ReactElement, ReactNode } from 'react';
+export type TooltipPosition = 'top-start' | 'top-middle' | 'top-end' | 'right-start' | 'right-middle' | 'right-end' | 'bottom-start' | 'bottom-middle' | 'bottom-end' | 'left-start' | 'left-middle' | 'left-end';
+export type TooltipProps = {
+    readonly content: ReactNode;
+    readonly position?: TooltipPosition;
+    readonly offset?: [number, number];
+    readonly arrowOffset?: string;
+    readonly maxWidth?: number | 'none';
+    readonly zIndex?: number;
+    readonly isDisabled?: boolean;
+    readonly isVisible?: boolean;
+    readonly reference?: RefObject<Element>;
+    readonly children?: ReactElement<unknown>;
+};

package/Tooltip/types.js

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

package/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useOnClickOutside';
+export * from './useElementWidth';

package/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useOnClickOutside';
+export * from './useElementWidth';

package/hooks/useElementWidth.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+type ForceUpdate = () => void;
+type ElementWidth = number | null;
+/**
+ * Хук для получения размера элемента
+ *
+ * @param { RefObject<HTMLElement> } ref - ссылка на элемент
+ * @return { [ElementWidth, ForceUpdate] } - размер элемента и функция для принудительного пересчета
+ */
+export declare function useElementWidth(ref: RefObject<HTMLElement>): [ElementWidth, ForceUpdate];
+export {};

package/hooks/useElementWidth.js

@@ -0,0 +1,27 @@
+import { useCallback, useEffect, useState } from 'react';
+/**
+ * Хук для получения размера элемента
+ *
+ * @param { RefObject<HTMLElement> } ref - ссылка на элемент
+ * @return { [ElementWidth, ForceUpdate] } - размер элемента и функция для принудительного пересчета
+ */
+export function useElementWidth(ref) {
+  const [elementWidth, setElementWidth] = useState(null);
+  useEffect(() => {
+    if (ref.current) {
+      const {
+        width
+      } = ref.current.getBoundingClientRect();
+      setElementWidth(width);
+    }
+  }, [ref]);
+  const forceUpdate = useCallback(() => {
+    if (ref.current) {
+      const {
+        width
+      } = ref.current.getBoundingClientRect();
+      setElementWidth(width);
+    }
+  }, [ref]);
+  return [elementWidth, forceUpdate];
+}

package/hooks/useOnClickOutside.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from 'react';
+type Ref = RefObject<HTMLElement> | RefObject<HTMLElement>[];
+export declare function useOnClickOutside(ref: Ref, handler: () => void): void;
+export {};

package/hooks/useOnClickOutside.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+export function useOnClickOutside(ref, handler) {
+  useEffect(() => {
+    const references = Array.isArray(ref) ? ref : [ref];
+    function listener({
+      target
+    }) {
+      const isClickInArea = references.some(reference => {
+        var _reference$current;
+        return (_reference$current = reference.current) === null || _reference$current === void 0 ? void 0 : _reference$current.contains(target);
+      });
+      if (!isClickInArea) {
+        handler();
+      }
+    }
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler]);
+}

package/index.d.ts

@@ -1,9 +1,20 @@
+export { ActionsGroup } from './ActionsGroup';
+export { Badge, type BadgeColor } from './Badge';
+export { Banner, type BannerType } from './Banner';
+export { Button, GhostButton } from './Button';
+export { CardMetric } from './CardMetric';
+export { Checkbox } from './Checkbox';
+export { EditableField } from './EditableField';
 export { ProgressBar } from './ProgressBar';
-export * from './Tabs';
+export { Popover } from './Popover';
+export { Radio } from './Radio';
+export { Spinner } from './Spinner';
+export { Tooltip, type TooltipPosition } from './Tooltip';
+export { Tab, TabBar, TabPanel, Tabs, type TabCode } from './Tabs';
 export { StatisticCard } from './StatisticCard';
-export { EmailTemplatePreview, NoEmailTemplatePreview, } from './EmailTemplatePreview';
+export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
 export { PushPreview } from './PushPreview';
 export { ExportResult } from './ExportResult';
-export { NativeInput, NativeTextarea, NativeSelect, } from './native';
+export { NativeInput, NativeTextarea, NativeSelect } from './native';
 export { FieldBox } from './FieldBox';
 export { NumberPicker } from './NumberPicker';

package/index.js

@@ -1,5 +1,16 @@
+export { ActionsGroup } from './ActionsGroup';
+export { Badge } from './Badge';
+export { Banner } from './Banner';
+export { Button, GhostButton } from './Button';
+export { CardMetric } from './CardMetric';
+export { Checkbox } from './Checkbox';
+export { EditableField } from './EditableField';
 export { ProgressBar } from './ProgressBar';
-export * from './Tabs';
+export { Popover } from './Popover';
+export { Radio } from './Radio';
+export { Spinner } from './Spinner';
+export { Tooltip } from './Tooltip';
+export { Tab, TabBar, TabPanel, Tabs } 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": "1.0.0",
+  "version": "1.0.1",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -11,7 +11,7 @@
     "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:lint": "echo \"Run check:lint\" && eslint src",
     "check:types": "echo \"Run check:types\" && pushwoosh-engine lib:check-types"
   },
   "pre-commit": "check",
@@ -22,6 +22,7 @@
     "@types/lodash": "^4.17.13",
     "@types/react": "^18.2.69",
     "@types/react-dom": "^18.2.22",
+    "@types/react-transition-group": "^4.4.12",
     "@types/styled-components": "^5.1.34",
     "pre-commit": "^1.2.2",
     "react": "^18.2.0",
@@ -45,6 +46,8 @@
     "@pushwoosh/kit-spinner": "^1.5.1",
     "@pushwoosh/kit-typography": "^1.7.1",
     "liquidjs": "^10.18.0",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "polished": "^4.3.1",
+    "react-transition-group": "^4.4.5"
   }
 }

package/Tabs/tab/index.d.ts

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

package/Tabs/tab/index.js

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

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

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

package/Tabs/tab-bar/index.js

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

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

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

package/Tabs/tab-base/index.js

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

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

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

package/Tabs/tab-panel/index.js

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

package/Tabs/tabs/index.d.ts

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

package/Tabs/tabs/index.js

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

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

@@ -1,3 +0,0 @@
-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

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

package/Tabs/{tab-base/tab-base.d.ts → components/TabBase/TabBase.d.ts}

@@ -4,6 +4,6 @@ export declare const TabBase: React.ForwardRefExoticComponent<Omit<React.Detaile
     isDisabled?: boolean;
     isNew?: boolean;
     icon?: React.ReactNode;
-    onClick: () => void;
     className?: string;
+    onClick: () => void;
 }> & React.RefAttributes<HTMLDivElement>>;

package/Tabs/{tab-base/tab-base.types.d.ts → components/TabBase/types.d.ts}

@@ -4,6 +4,6 @@ export type TabBaseProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & Readonly<
     isDisabled?: boolean;
     isNew?: boolean;
     icon?: ReactNode;
-    onClick: () => void;
     className?: string;
+    onClick: () => void;
 }>;