@true-engineering/true-react-common-ui-kit 2.1.0 → 2.1.1

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,21 +1,19 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Tooltip } from './Tooltip';
-
-export default {
-  title: 'Tooltip',
-  component: Tooltip,
-  args: {
-    text: 'Tooltip Text',
-    view: 'tooltip',
-    type: 'info',
-  },
-  argTypes: {
-    text: { control: 'text' },
-    view: { control: 'inline-radio', options: ['tooltip', 'hint'] },
-    type: { control: 'inline-radio', options: ['info', 'error'] },
-  },
-} as ComponentMeta<typeof Tooltip>;
-
-export const Default: ComponentStory<typeof Tooltip> = (args) => (
-  <Tooltip {...args} />
-);
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+
+export default {
+  title: 'Tooltip',
+  component: Tooltip,
+  args: {
+    text: 'Tooltip Text',
+    view: 'tooltip',
+    type: 'info',
+  },
+  argTypes: {
+    text: { control: 'text' },
+    view: { control: 'inline-radio', options: ['tooltip', 'hint'] },
+    type: { control: 'inline-radio', options: ['info', 'error'] },
+  },
+} as ComponentMeta<typeof Tooltip>;
+
+export const Default: ComponentStory<typeof Tooltip> = (args) => <Tooltip {...args} />;

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

@@ -1,45 +1,45 @@
-import { colors, dimensions } from '../../theme';
-import { ComponentStyles } from '../../types';
-import { rgba } from '../../helpers';
-import { ITooltipProps } from './Tooltip';
-
-interface IStyleProps {
-  type: NonNullable<ITooltipProps['type']>;
-}
-
-export const styles = {
-  root: {
-    display: 'inline-block',
-    boxSizing: 'border-box',
-  },
-
-  tooltip: {
-    fontSize: 14,
-    padding: [18, 20],
-    letterSpacing: 0.15,
-    backgroundColor: ({ type }: IStyleProps): string =>
-      type === 'error' ? colors.RED_WARNING : colors.CLASSIC_WHITE,
-    color: ({ type }: IStyleProps): string =>
-      type === 'error' ? colors.CLASSIC_WHITE : 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: ({ type }: { type: ITooltipProps['type'] }): string =>
-      type === 'error' ? colors.RED_WARNING : colors.FONT_MEDIUM,
-    color: colors.CLASSIC_WHITE,
-    letterSpacing: 0.2,
-  },
-};
-
-export type TooltipStyles = ComponentStyles<typeof styles, IStyleProps>;
+import { rgba } from '../../helpers';
+import { colors, dimensions } from '../../theme';
+import { ComponentStyles } from '../../types';
+import { ITooltipProps } from './Tooltip';
+
+interface IStyleProps {
+  type: NonNullable<ITooltipProps['type']>;
+}
+
+export const styles = {
+  root: {
+    display: 'inline-block',
+    boxSizing: 'border-box',
+  },
+
+  tooltip: {
+    fontSize: 14,
+    padding: [18, 20],
+    letterSpacing: 0.15,
+    backgroundColor: ({ type }: IStyleProps): string =>
+      type === 'error' ? colors.RED_WARNING : colors.CLASSIC_WHITE,
+    color: ({ type }: IStyleProps): string =>
+      type === 'error' ? colors.CLASSIC_WHITE : 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: ({ type }: { type: ITooltipProps['type'] }): string =>
+      type === 'error' ? colors.RED_WARNING : colors.FONT_MEDIUM,
+    color: colors.CLASSIC_WHITE,
+    letterSpacing: 0.2,
+  },
+};
+
+export type TooltipStyles = ComponentStyles<typeof styles, IStyleProps>;

package/src/components/Tooltip/Tooltip.tsx

@@ -1,40 +1,35 @@
-import { FC, ReactNode } from 'react';
-import clsx from 'clsx';
-
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { addDataAttributes } from '../../helpers';
-
-import { styles, TooltipStyles } from './Tooltip.styles';
-
-export interface ITooltipProps extends ICommonProps {
-  tweakStyles?: TooltipStyles;
-  text: ReactNode;
-  /**
-   * @default `tooltip`
-   */
-  view?: 'tooltip' | 'hint';
-  /**
-   * @default `info`
-   */
-  type?: 'info' | 'error';
-}
-
-export const Tooltip: FC<ITooltipProps> = ({
-  text,
-  view = 'tooltip',
-  type = 'info',
-  data,
-  tweakStyles,
-}) => {
-  const { classes } = useTheme('Tooltip', styles, tweakStyles, { type });
-
-  return (
-    <div
-      className={clsx(classes.root, classes[view])}
-      {...addDataAttributes(data)}
-    >
-      {text}
-    </div>
-  );
-};
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import { addDataAttributes } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { styles, TooltipStyles } from './Tooltip.styles';
+
+export interface ITooltipProps extends ICommonProps {
+  tweakStyles?: TooltipStyles;
+  text: ReactNode;
+  /**
+   * @default `tooltip`
+   */
+  view?: 'tooltip' | 'hint';
+  /**
+   * @default `info`
+   */
+  type?: 'info' | 'error';
+}
+
+export const Tooltip: FC<ITooltipProps> = ({
+  text,
+  view = 'tooltip',
+  type = 'info',
+  data,
+  tweakStyles,
+}) => {
+  const { classes } = useTheme('Tooltip', styles, tweakStyles, { type });
+
+  return (
+    <div className={clsx(classes.root, classes[view])} {...addDataAttributes(data)}>
+      {text}
+    </div>
+  );
+};

package/src/components/Tooltip/index.ts

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

package/src/components/Tooltip/types.ts

@@ -1 +1 @@
-export type ITooltipType = 'info' | 'warning';
+export type ITooltipType = 'info' | 'warning';

package/src/components/index.ts

@@ -1,36 +1,36 @@
-export * from './AccountInfo';
-export * from './AddButton';
-export * from './Button';
-export * from './Checkbox';
-export * from './CloseButton';
-export * from './Colors';
-export * from './CssBaseline';
-export * from './DateInput';
-export * from './DatePicker';
-export * from './Description';
-export * from './FiltersPane';
-export * from './Flag';
-export * from './FlexibleTable';
-export * from './Icon';
-export * from './IncrementInput';
-export * from './Input';
-export * from './List';
-export * from './Modal';
-export * from './MoreMenu';
-export * from './MultiSelect';
-export * from './MultiSelectList';
-export * from './Notification';
-export * from './NumberInput';
-export * from './SearchInput';
-export * from './SmartInput';
-export * from './PhoneInput';
-export * from './RadioButton';
-export * from './Select';
-export * from './Switch';
-export * from './TextArea';
-export * from './TextWithInfo';
-export * from './TextWithTooltip';
-export * from './ThemedPreloader';
-export * from './Toaster';
-export * from './Tooltip';
-export * from './ScrollIntoViewIfNeeded';
+export * from './AccountInfo';
+export * from './AddButton';
+export * from './Button';
+export * from './Checkbox';
+export * from './CloseButton';
+export * from './Colors';
+export * from './CssBaseline';
+export * from './DateInput';
+export * from './DatePicker';
+export * from './Description';
+export * from './FiltersPane';
+export * from './Flag';
+export * from './FlexibleTable';
+export * from './Icon';
+export * from './IncrementInput';
+export * from './Input';
+export * from './List';
+export * from './Modal';
+export * from './MoreMenu';
+export * from './MultiSelect';
+export * from './MultiSelectList';
+export * from './Notification';
+export * from './NumberInput';
+export * from './SearchInput';
+export * from './SmartInput';
+export * from './PhoneInput';
+export * from './RadioButton';
+export * from './Select';
+export * from './Switch';
+export * from './TextArea';
+export * from './TextWithInfo';
+export * from './TextWithTooltip';
+export * from './ThemedPreloader';
+export * from './Toaster';
+export * from './Tooltip';
+export * from './ScrollIntoViewIfNeeded';

package/src/helpers/colors.ts

@@ -1,2 +1,3 @@
-import hexToRgba from 'hex-to-rgba';
-export const rgba = hexToRgba;
+import hexToRgba from 'hex-to-rgba';
+
+export const rgba = hexToRgba;

package/src/helpers/dateHelpers/date-helpers.ts

@@ -1,9 +1,9 @@
-import { parse, isValid } from 'date-fns';
-
-export const DATE_FORMAT = 'dd.MM.yyyy';
-
-export const isDateValid = (value: string): boolean =>
-  isValid(parse(value, DATE_FORMAT, new Date()));
-
-export const parseStringToDate = (value: string): Date =>
-  parse(value, DATE_FORMAT, new Date()) || null;
+import { parse, isValid } from 'date-fns';
+
+export const DATE_FORMAT = 'dd.MM.yyyy';
+
+export const isDateValid = (value: string): boolean =>
+  isValid(parse(value, DATE_FORMAT, new Date()));
+
+export const parseStringToDate = (value: string): Date =>
+  parse(value, DATE_FORMAT, new Date()) || null;

package/src/helpers/index.ts

@@ -1,4 +1,4 @@
-export * from './colors';
-export * from './utils';
-export * from './popper-helpers';
-export * from './phone';
+export * from './colors';
+export * from './utils';
+export * from './popper-helpers';
+export * from './phone';

package/src/helpers/phone.ts

@@ -1,106 +1,87 @@
-import { phoneInfo, IPhoneInfo, IPhoneValue } from '../components';
-import { isNotEmpty } from './utils';
-
-export const findCountryByCode = (
-  countryCode?: string,
-  countriesList = phoneInfo,
-): IPhoneInfo | undefined =>
-  countryCode !== undefined
-    ? countriesList.find((info) => info.countryCode === countryCode)
-    : undefined;
-
-export const findCountryIndexByCode = (
-  countryCode?: string,
-  countriesList = phoneInfo,
-): number =>
-  countryCode !== undefined
-    ? countriesList.findIndex((info) => info.countryCode === countryCode)
-    : -1;
-
-export const getCountryTextByLocale = (
-  country: IPhoneInfo,
-  locale: string,
-): string =>
-  locale.toLowerCase() === 'ru' ? country.countryRu : country.countryEn;
-
-export const sortCountriesByLocale = (
-  countriesList: IPhoneInfo[],
-  locale: string,
-) =>
-  countriesList.sort((countryA, countryB) =>
-    getCountryTextByLocale(countryA, locale).localeCompare(
-      getCountryTextByLocale(countryB, locale),
-    ),
-  );
-
-export const checkSearchStringInCountry = (
-  country: IPhoneInfo,
-  searchString: string,
-): boolean => {
-  const checkValue = searchString.toLowerCase().trim().replace('+', '');
-
-  const possibleValues = [
-    country.countryRu,
-    country.countryEn,
-    ...country.countryRu.split(' '),
-    ...country.countryEn.split(' '),
-    country.dialCode,
-  ].map((part) => part.toLowerCase());
-
-  return possibleValues.some((v) => v.startsWith(checkValue));
-};
-
-export const getFullPhone = (phone?: IPhoneValue): string =>
-  (phone?.dialCode ?? '') + (phone?.phoneNumber ?? '');
-
-export const getCountryCodeFromPhone = (
-  phoneWithCode: string,
-): string | undefined => {
-  // попробуем найти уникальный код страны fullCode (dialCode + arealCode)
-  let countryCode = phoneInfo.find((info) =>
-    info.fullCodes.some((code) => phoneWithCode.startsWith(code)),
-  )?.countryCode;
-
-  if (countryCode === undefined && isNotEmpty(phoneWithCode)) {
-    // если не нашли уникальный fullCode (dialCode + arealCode),
-    // то пробуем найти dialCode и выбираем с наименьшим Priority
-    countryCode = phoneInfo
-      .filter((info) => phoneWithCode.startsWith(info.dialCode))
-      .sort(
-        (infoA, infoB) =>
-          (infoA.dialCodePriority ?? 1000) - (infoB.dialCodePriority ?? 1000),
-      )[0]?.countryCode;
-  }
-
-  return countryCode;
-};
-
-export const getPhoneObjFromString = (
-  fullPhone: string,
-  countryCode?: string,
-): IPhoneValue => {
-  const newCountryCode = countryCode ?? getCountryCodeFromPhone(fullPhone);
-  const dialCode = findCountryByCode(newCountryCode)?.dialCode;
-  const phoneNumber = fullPhone.slice(dialCode?.length);
-
-  return { dialCode, phoneNumber, countryCode: newCountryCode };
-};
-
-export const DEFAULT_PHONE_MASK = '+ 9 999 999 999 999 99';
-
-export const getPhoneMask = (countryCode?: string): string => {
-  let mask = DEFAULT_PHONE_MASK;
-  if (countryCode !== undefined) {
-    const countrySettings = findCountryByCode(countryCode);
-
-    if (countrySettings !== undefined) {
-      const dialCodeLength = countrySettings.dialCode.length;
-      const areaAndPhoneMask =
-        countrySettings.phoneMask ??
-        mask.substring(2, mask.length - dialCodeLength);
-      mask = `+ ${'9'.repeat(dialCodeLength)} ${areaAndPhoneMask}`;
-    }
-  }
-
-  return mask;
-};
+import { phoneInfo, IPhoneInfo, IPhoneValue } from '../components';
+import { isNotEmpty } from './utils';
+
+export const findCountryByCode = (
+  countryCode?: string,
+  countriesList = phoneInfo,
+): IPhoneInfo | undefined =>
+  countryCode !== undefined
+    ? countriesList.find((info) => info.countryCode === countryCode)
+    : undefined;
+
+export const findCountryIndexByCode = (countryCode?: string, countriesList = phoneInfo): number =>
+  countryCode !== undefined
+    ? countriesList.findIndex((info) => info.countryCode === countryCode)
+    : -1;
+
+export const getCountryTextByLocale = (country: IPhoneInfo, locale: string): string =>
+  locale.toLowerCase() === 'ru' ? country.countryRu : country.countryEn;
+
+export const sortCountriesByLocale = (countriesList: IPhoneInfo[], locale: string) =>
+  countriesList.sort((countryA, countryB) =>
+    getCountryTextByLocale(countryA, locale).localeCompare(
+      getCountryTextByLocale(countryB, locale),
+    ),
+  );
+
+export const checkSearchStringInCountry = (country: IPhoneInfo, searchString: string): boolean => {
+  const checkValue = searchString.toLowerCase().trim().replace('+', '');
+
+  const possibleValues = [
+    country.countryRu,
+    country.countryEn,
+    ...country.countryRu.split(' '),
+    ...country.countryEn.split(' '),
+    country.dialCode,
+  ].map((part) => part.toLowerCase());
+
+  return possibleValues.some((v) => v.startsWith(checkValue));
+};
+
+export const getFullPhone = (phone?: IPhoneValue): string =>
+  (phone?.dialCode ?? '') + (phone?.phoneNumber ?? '');
+
+export const getCountryCodeFromPhone = (phoneWithCode: string): string | undefined => {
+  // попробуем найти уникальный код страны fullCode (dialCode + arealCode)
+  let countryCode = phoneInfo.find((info) =>
+    info.fullCodes.some((code) => phoneWithCode.startsWith(code)),
+  )?.countryCode;
+
+  if (countryCode === undefined && isNotEmpty(phoneWithCode)) {
+    // если не нашли уникальный fullCode (dialCode + arealCode),
+    // то пробуем найти dialCode и выбираем с наименьшим Priority
+    countryCode = phoneInfo
+      .filter((info) => phoneWithCode.startsWith(info.dialCode))
+      .sort(
+        (infoA, infoB) => (infoA.dialCodePriority ?? 1000) - (infoB.dialCodePriority ?? 1000),
+      )[0]?.countryCode;
+  }
+
+  return countryCode;
+};
+
+export const getPhoneObjFromString = (fullPhone: string, countryCode?: string): IPhoneValue => {
+  const newCountryCode = countryCode ?? getCountryCodeFromPhone(fullPhone);
+  const dialCode = findCountryByCode(newCountryCode)?.dialCode;
+  const phoneNumber = fullPhone.slice(dialCode?.length);
+
+  return { dialCode, phoneNumber, countryCode: newCountryCode };
+};
+
+export const DEFAULT_PHONE_MASK = '+ 9 999 999 999 999 99';
+
+export const getPhoneMask = (countryCode?: string): string => {
+  let mask = DEFAULT_PHONE_MASK;
+  if (countryCode !== undefined) {
+    const countrySettings = findCountryByCode(countryCode);
+
+    if (countrySettings !== undefined) {
+      const dialCodeLength = countrySettings.dialCode.length;
+      const areaAndPhoneMask =
+        countrySettings.phoneMask ?? mask.substring(2, mask.length - dialCodeLength);
+      mask = `+ ${'9'.repeat(dialCodeLength)} ${areaAndPhoneMask}`;
+    }
+  }
+
+  return mask;
+};

package/src/helpers/popper-helpers.ts

@@ -1,17 +1,17 @@
-import { Modifier } from 'react-overlays/usePopper';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const minWidthModifier: Partial<Modifier<any, any>> = {
-  name: 'minWidth',
-  enabled: true,
-  phase: 'beforeWrite',
-  requires: ['computeStyles'],
-  fn: ({ state }) => {
-    state.styles.popper.minWidth = `${state.rects.reference.width}px`;
-  },
-  effect: ({ state }) => {
-    state.elements.popper.style.minWidth = `${
-      (state.elements.reference as HTMLElement).offsetWidth
-    }px`;
-  },
-};
+import { Modifier } from 'react-overlays/usePopper';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const minWidthModifier: Partial<Modifier<any, any>> = {
+  name: 'minWidth',
+  enabled: true,
+  phase: 'beforeWrite',
+  requires: ['computeStyles'],
+  fn: ({ state }) => {
+    state.styles.popper.minWidth = `${state.rects.reference.width}px`;
+  },
+  effect: ({ state }) => {
+    state.elements.popper.style.minWidth = `${
+      (state.elements.reference as HTMLElement).offsetWidth
+    }px`;
+  },
+};

package/src/helpers/snippets.tsx

@@ -1,5 +1,5 @@
-import { Icon, IIconType } from '../components';
-import { ReactElement, ReactNode } from 'react';
-
-export const renderIcon = (icon: IIconType | ReactElement): ReactNode =>
-  typeof icon === 'string' ? <Icon type={icon} /> : icon;
+import { ReactElement, ReactNode } from 'react';
+import { Icon, IIconType } from '../components';
+
+export const renderIcon = (icon: IIconType | ReactElement): ReactNode =>
+  typeof icon === 'string' ? <Icon type={icon} /> : icon;