@true-engineering/true-react-common-ui-kit 3.41.0 → 3.43.0

package/src/components/Toaster/Toaster.tsx

@@ -1,96 +1,96 @@
-import { FC, ReactNode, useEffect } from 'react';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  isEmpty,
-  isNotEmpty,
-  isReactNodeNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { IconButton } from '../IconButton';
-import { DEFAULT_TIMEOUT } from './constants';
-import { IToasterType } from './types';
-import { IToasterStyles, useStyles } from './Toaster.styles';
-
-export interface IToasterProps extends ICommonProps<IToasterStyles> {
-  /** @default 'error' */
-  type?: IToasterType;
-  title?: ReactNode;
-  text?: ReactNode;
-  children?: ReactNode;
-  /**
-   * Время автоматического закрытия тостера в миллисекундах
-   * @default 7000
-   */
-  timeout?: number;
-  /** @default false */
-  hasCloseButton?: boolean;
-  /** @default false */
-  shouldCloseOnClick?: boolean;
-  onClose?: () => void;
-  onTimeEnd?: () => void;
-}
-
-export const Toaster: FC<IToasterProps> = ({
-  type = 'error',
-  title,
-  text,
-  children,
-  timeout = DEFAULT_TIMEOUT,
-  hasCloseButton = false,
-  shouldCloseOnClick = false,
-  data,
-  testId,
-  tweakStyles,
-  onClose,
-  onTimeEnd,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakCloseButtonStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakCloseButton',
-    currentComponentName: 'Toaster',
-  });
-
-  useEffect(() => {
-    if (!Number.isFinite(timeout) || isEmpty(onTimeEnd)) {
-      return;
-    }
-
-    const timeoutId = window.setTimeout(() => onTimeEnd(), timeout);
-
-    return () => window.clearTimeout(timeoutId);
-  }, []);
-
-  return (
-    <div
-      className={classes.root}
-      onClick={shouldCloseOnClick ? onClose : undefined}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <div className={clsx(classes.iconContainer, classes[type])}>
-        <Icon type={`status-${type}`} />
-      </div>
-      <div>
-        {isReactNodeNotEmpty(title) && <div className={classes.title}>{title}</div>}
-        {isReactNodeNotEmpty(text) && <div className={classes.text}>{text}</div>}
-        {isReactNodeNotEmpty(children) && <div className={classes.content}>{children}</div>}
-      </div>
-      {hasCloseButton && isNotEmpty(onClose) && (
-        <div className={classes.close}>
-          <IconButton
-            view="cancel-light"
-            icon="close-window"
-            tweakStyles={tweakCloseButtonStyles}
-            onClick={onClose}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
+import { FC, ReactNode, useEffect } from 'react';
+import clsx from 'clsx';
+import {
+  addDataTestId,
+  isEmpty,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { DEFAULT_TIMEOUT } from './constants';
+import { IToasterType } from './types';
+import { IToasterStyles, useStyles } from './Toaster.styles';
+
+export interface IToasterProps extends ICommonProps<IToasterStyles> {
+  /** @default 'error' */
+  type?: IToasterType;
+  title?: ReactNode;
+  text?: ReactNode;
+  children?: ReactNode;
+  /**
+   * Время автоматического закрытия тостера в миллисекундах
+   * @default 7000
+   */
+  timeout?: number;
+  /** @default false */
+  hasCloseButton?: boolean;
+  /** @default false */
+  shouldCloseOnClick?: boolean;
+  onClose?: () => void;
+  onTimeEnd?: () => void;
+}
+
+export const Toaster: FC<IToasterProps> = ({
+  type = 'error',
+  title,
+  text,
+  children,
+  timeout = DEFAULT_TIMEOUT,
+  hasCloseButton = false,
+  shouldCloseOnClick = false,
+  data,
+  testId,
+  tweakStyles,
+  onClose,
+  onTimeEnd,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakCloseButtonStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakCloseButton',
+    currentComponentName: 'Toaster',
+  });
+
+  useEffect(() => {
+    if (!Number.isFinite(timeout) || isEmpty(onTimeEnd)) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => onTimeEnd(), timeout);
+
+    return () => window.clearTimeout(timeoutId);
+  }, []);
+
+  return (
+    <div
+      className={classes.root}
+      onClick={shouldCloseOnClick ? onClose : undefined}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <div className={clsx(classes.iconContainer, classes[type])}>
+        <Icon type={`status-${type}`} />
+      </div>
+      <div>
+        {isReactNodeNotEmpty(title) && <div className={classes.title}>{title}</div>}
+        {isReactNodeNotEmpty(text) && <div className={classes.text}>{text}</div>}
+        {isReactNodeNotEmpty(children) && <div className={classes.content}>{children}</div>}
+      </div>
+      {hasCloseButton && isNotEmpty(onClose) && (
+        <div className={classes.close}>
+          <IconButton
+            view="cancel-light"
+            icon="close-window"
+            tweakStyles={tweakCloseButtonStyles}
+            onClick={onClose}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Toaster/constants.ts

@@ -1 +1 @@
-export const DEFAULT_TIMEOUT = 7 * 1000; // 7 seconds
+export const DEFAULT_TIMEOUT = 7 * 1000; // 7 seconds

package/src/components/Toaster/index.ts

@@ -1,3 +1,3 @@
-export * from './Toaster';
-export * from './types';
-export type { IToasterStyles } from './Toaster.styles';
+export * from './Toaster';
+export * from './types';
+export type { IToasterStyles } from './Toaster.styles';

package/src/components/Toaster/types.ts

@@ -1 +1 @@
-export type IToasterType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';
+export type IToasterType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';

package/src/components/Tooltip/Tooltip.styles.ts

@@ -1,49 +1,49 @@
-import { rgba } from '../../helpers';
-import { colors, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('Tooltip', {
-  root: {
-    display: 'inline-block',
-    boxSizing: 'border-box',
-  },
-
-  tooltip: {
-    fontSize: 14,
-    padding: [18, 20],
-    letterSpacing: 0.15,
-    backgroundColor: colors.CLASSIC_WHITE,
-    color: colors.FONT_MAIN,
-    boxShadow: `0 0 1px ${rgba(colors.FONT_MAIN, 0.4)}, 0 -2px 6px ${rgba(
-      colors.FONT_MAIN,
-      0.06,
-    )}, 0 8px 32px -8px ${rgba(colors.FONT_MAIN, 0.3)}`,
-    borderRadius: 12,
-    lineHeight: 1.4,
-    maxWidth: 320,
-  },
-
-  hint: {
-    whiteSpace: 'nowrap',
-    fontSize: 12,
-    padding: [8, 12],
-    borderRadius: dimensions.BORDER_RADIUS_SMALL,
-    backgroundColor: colors.FONT_MEDIUM,
-    color: colors.CLASSIC_WHITE,
-    letterSpacing: 0.2,
-  },
-
-  info: {},
-
-  error: {
-    '&$tooltip': {
-      backgroundColor: colors.RED_WARNING,
-      color: colors.CLASSIC_WHITE,
-    },
-
-    '&$hint': {
-      backgroundColor: colors.RED_WARNING,
-    },
-  },
-});
-
-export type ITooltipStyles = ITweakStyles<typeof useStyles>;
+import { rgba } from '../../helpers';
+import { colors, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Tooltip', {
+  root: {
+    display: 'inline-block',
+    boxSizing: 'border-box',
+  },
+
+  tooltip: {
+    fontSize: 14,
+    padding: [18, 20],
+    letterSpacing: 0.15,
+    backgroundColor: colors.CLASSIC_WHITE,
+    color: colors.FONT_MAIN,
+    boxShadow: `0 0 1px ${rgba(colors.FONT_MAIN, 0.4)}, 0 -2px 6px ${rgba(
+      colors.FONT_MAIN,
+      0.06,
+    )}, 0 8px 32px -8px ${rgba(colors.FONT_MAIN, 0.3)}`,
+    borderRadius: 12,
+    lineHeight: 1.4,
+    maxWidth: 320,
+  },
+
+  hint: {
+    whiteSpace: 'nowrap',
+    fontSize: 12,
+    padding: [8, 12],
+    borderRadius: dimensions.BORDER_RADIUS_SMALL,
+    backgroundColor: colors.FONT_MEDIUM,
+    color: colors.CLASSIC_WHITE,
+    letterSpacing: 0.2,
+  },
+
+  info: {},
+
+  error: {
+    '&$tooltip': {
+      backgroundColor: colors.RED_WARNING,
+      color: colors.CLASSIC_WHITE,
+    },
+
+    '&$hint': {
+      backgroundColor: colors.RED_WARNING,
+    },
+  },
+});
+
+export type ITooltipStyles = ITweakStyles<typeof useStyles>;

package/src/components/Tooltip/index.ts

@@ -1,3 +1,3 @@
-export * from './Tooltip';
-export * from './types';
-export type { ITooltipStyles } from './Tooltip.styles';
+export * from './Tooltip';
+export * from './types';
+export type { ITooltipStyles } from './Tooltip.styles';

package/src/components/WithPopup/WithPopup.stories.tsx

@@ -1,100 +1,100 @@
-import { doNothing } from '@true-engineering/true-react-platform-helpers';
-import { ComponentStory } from '@storybook/react';
-import { Button } from '../Button';
-import { IListItem, List } from '../List';
-import { Tooltip } from '../Tooltip';
-import { WithPopup } from './WithPopup';
-
-const positions = [
-  undefined,
-  'top',
-  'bottom',
-  'right',
-  'left',
-  'top-start',
-  'top-end',
-  'bottom-start',
-  'bottom-end',
-  'right-start',
-  'right-end',
-  'left-start',
-  'left-end',
-];
-
-export default {
-  title: 'Data Display/WithPopup',
-  component: WithPopup,
-  argTypes: {
-    placement: { control: 'select', options: positions },
-    eventType: { control: 'inline-radio', options: ['hover', 'click'] },
-  },
-};
-
-const items: IListItem[] = [
-  {
-    item: 'Copy',
-    onClick: doNothing,
-  },
-  {
-    item: 'Paste',
-    onClick: doNothing,
-  },
-  {
-    item: 'Remove',
-    onClick: doNothing,
-  },
-];
-
-const Template: ComponentStory<typeof WithPopup> = (args) => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexDirection: 'column',
-      gap: 32,
-      width: 600,
-      height: 400,
-    }}
-  >
-    <div onClick={() => console.log('parent onclick')}>
-      <WithPopup
-        {...args}
-        trigger={({ triggerProps }) => (
-          <Button icon="plus" isFullWidth {...triggerProps}>
-            {triggerProps.isActive ? 'Click (Active)' : 'Click (Not Active)'}
-          </Button>
-        )}
-      >
-        {({ onClose }) => <List items={items} onClick={onClose} />}
-      </WithPopup>
-    </div>
-    <WithPopup
-      {...args}
-      eventType="hover"
-      trigger={
-        <Button icon="plus" isDisabled={args.isDisabled} isFullWidth>
-          Hover
-        </Button>
-      }
-    >
-      <Tooltip text="Tooltip" />
-    </WithPopup>
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  canBeFlipped: true,
-  isDisabled: false,
-  shouldRenderInBody: true,
-  shouldHideOnScroll: false,
-  shouldStopPropagation: true,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['trigger', 'data', 'testId', 'middlewares', 'children', 'eventType'],
-  },
-};
+import { doNothing } from '@true-engineering/true-react-platform-helpers';
+import { ComponentStory } from '@storybook/react';
+import { Button } from '../Button';
+import { IListItem, List } from '../List';
+import { Tooltip } from '../Tooltip';
+import { WithPopup } from './WithPopup';
+
+const positions = [
+  undefined,
+  'top',
+  'bottom',
+  'right',
+  'left',
+  'top-start',
+  'top-end',
+  'bottom-start',
+  'bottom-end',
+  'right-start',
+  'right-end',
+  'left-start',
+  'left-end',
+];
+
+export default {
+  title: 'Data Display/WithPopup',
+  component: WithPopup,
+  argTypes: {
+    placement: { control: 'select', options: positions },
+    eventType: { control: 'inline-radio', options: ['hover', 'click'] },
+  },
+};
+
+const items: IListItem[] = [
+  {
+    item: 'Copy',
+    onClick: doNothing,
+  },
+  {
+    item: 'Paste',
+    onClick: doNothing,
+  },
+  {
+    item: 'Remove',
+    onClick: doNothing,
+  },
+];
+
+const Template: ComponentStory<typeof WithPopup> = (args) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'column',
+      gap: 32,
+      width: 600,
+      height: 400,
+    }}
+  >
+    <div onClick={() => console.log('parent onclick')}>
+      <WithPopup
+        {...args}
+        trigger={({ triggerProps }) => (
+          <Button icon="plus" isFullWidth {...triggerProps}>
+            {triggerProps.isActive ? 'Click (Active)' : 'Click (Not Active)'}
+          </Button>
+        )}
+      >
+        {({ onClose }) => <List items={items} onClick={onClose} />}
+      </WithPopup>
+    </div>
+    <WithPopup
+      {...args}
+      eventType="hover"
+      trigger={
+        <Button icon="plus" isDisabled={args.isDisabled} isFullWidth>
+          Hover
+        </Button>
+      }
+    >
+      <Tooltip text="Tooltip" />
+    </WithPopup>
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  canBeFlipped: true,
+  isDisabled: false,
+  shouldRenderInBody: true,
+  shouldHideOnScroll: false,
+  shouldStopPropagation: true,
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['trigger', 'data', 'testId', 'middlewares', 'children', 'eventType'],
+  },
+};

package/src/components/WithPopup/constants.ts

@@ -1,3 +1,3 @@
-export const DEFAULT_OFFSET = 6;
-
-export const POPUP_EVENT_TYPES = ['hover', 'click'] as const;
+export const DEFAULT_OFFSET = 6;
+
+export const POPUP_EVENT_TYPES = ['hover', 'click'] as const;

package/src/components/WithPopup/index.ts

@@ -1,2 +1,2 @@
-export * from './WithPopup';
-export type { IWithPopupStyles } from './WithPopup.styles';
+export * from './WithPopup';
+export type { IWithPopupStyles } from './WithPopup.styles';

package/src/components/WithPopup/types.ts

@@ -1,25 +1,25 @@
-import type { MouseEvent, KeyboardEvent } from 'react';
-import type { IDataAttributesProps, IDomElementInteractions } from '../../types';
-import type { POPUP_EVENT_TYPES } from './constants';
-
-export type IPopupEventType = (typeof POPUP_EVENT_TYPES)[number];
-
-export type IWithPopupToggleEvent = MouseEvent | KeyboardEvent | Event;
-
-export interface IReferenceProps extends IDomElementInteractions<HTMLElement> {
-  ref?: (node: Element | null) => void;
-}
-
-export interface IWithPopupTriggerComponentProps extends IReferenceProps, IDataAttributesProps {
-  isActive: boolean;
-  isDisabled?: boolean;
-}
-
-export interface IWithPopupTriggerProps {
-  triggerProps: IWithPopupTriggerComponentProps;
-  referenceProps?: IReferenceProps;
-}
-
-export interface IWithPopupChildrenProps {
-  onClose: (event?: IWithPopupToggleEvent) => void;
-}
+import type { MouseEvent, KeyboardEvent } from 'react';
+import type { IDataAttributesProps, IDomElementInteractions } from '../../types';
+import type { POPUP_EVENT_TYPES } from './constants';
+
+export type IPopupEventType = (typeof POPUP_EVENT_TYPES)[number];
+
+export type IWithPopupToggleEvent = MouseEvent | KeyboardEvent | Event;
+
+export interface IReferenceProps extends IDomElementInteractions<HTMLElement> {
+  ref?: (node: Element | null) => void;
+}
+
+export interface IWithPopupTriggerComponentProps extends IReferenceProps, IDataAttributesProps {
+  isActive: boolean;
+  isDisabled?: boolean;
+}
+
+export interface IWithPopupTriggerProps {
+  triggerProps: IWithPopupTriggerComponentProps;
+  referenceProps?: IReferenceProps;
+}
+
+export interface IWithPopupChildrenProps {
+  onClose: (event?: IWithPopupToggleEvent) => void;
+}

package/src/constants/index.ts

@@ -1,2 +1,2 @@
-export * from './phone-info';
-export * from './mime-types';
+export * from './phone-info';
+export * from './mime-types';