@true-engineering/true-react-common-ui-kit 4.0.0-alpha35 → 4.0.0-alpha37

package/src/components/Select/Select.stories.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useEffect, useState } from 'react';
 import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { iconsList } from '../Icon';
+import { iconsMap } from '../Icon';
 import { ISelectProps, Select } from './Select';
 
 interface ObjectValue {
@@ -55,7 +55,7 @@ const objectOptions: ObjectValue[] = [
   { name: 'Artem', age: 23 },
 ];
 
-const icons = [undefined, ...Object.keys(iconsList)];
+const icons = [undefined, ...Object.keys(iconsMap)];
 
 // Максимум не включается, минимум включается
 const getRandomInt = (min: number, max: number) =>

package/src/components/Status/Status.stories.tsx

@@ -1,9 +1,8 @@
-import { Status } from '.';
 import { ComponentStory } from '@storybook/react';
 import { rgba } from '../../helpers';
 import { IExtendableProps } from '../../types';
-import { iconsList, IIconType } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
+import { iconsMap } from '../Icon';
+import { Status } from './Status';
 import { STATUS_SIZES } from './constants';
 import { IStatusStyles } from './Status.styles';
 
@@ -28,7 +27,7 @@ declare module './types' {
   export interface IStatusColors extends IExtendableProps<typeof STATUS_COLORS> {}
 }
 
-const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+const icons = [undefined, ...Object.keys(iconsMap)];
 
 const customTweakStyles: IStatusStyles = {
   green: {

package/src/components/TextButton/TextButton.stories.tsx

@@ -1,10 +1,9 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { iconsList, IIconType } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
+import { iconsMap } from '../Icon';
 import { TextButton } from './TextButton';
 import { TEXT_BUTTON_SIZES, TEXT_BUTTON_VIEWS } from './constants';
 
-const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+const icons = [undefined, ...Object.keys(iconsMap)];
 
 export default {
   title: 'Buttons/TextButton',

package/src/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.tsx

@@ -1,9 +1,9 @@
-import { FC, useContext } from 'react';
-import { ThemeContext } from '../../../../theme';
+import { FC } from 'react';
+import { useTheme } from '../../../../theme';
 import { ICommonProps } from '../../../../types';
 import { IPreloaderSvgType } from '../../types';
 import { DefaultPreloader } from '../DefaultPreloader';
-import { useStyles, ISvgPreloaderStyles } from './SvgPreloader.styles';
+import { ISvgPreloaderStyles, useStyles } from './SvgPreloader.styles';
 
 export interface ISvgPreloaderProps extends Pick<ICommonProps<ISvgPreloaderStyles>, 'tweakStyles'> {
   type: IPreloaderSvgType;
@@ -12,7 +12,7 @@ export interface ISvgPreloaderProps extends Pick<ICommonProps<ISvgPreloaderStyle
 export const SvgPreloader: FC<ISvgPreloaderProps> = ({ type = 'default', tweakStyles }) => {
   const classes = useStyles({ theme: tweakStyles });
 
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const PreloaderIcon = theme.preloaders?.[type] ?? DefaultPreloader;
   const isInlineSvg = typeof PreloaderIcon === 'string';
 

package/src/helpers/misc.ts

@@ -1,4 +1,3 @@
-import hexToRgba from 'hex-to-rgba';
 import {
   isNotEmpty,
   isString,
@@ -6,7 +5,7 @@ import {
 } from '@true-engineering/true-react-platform-helpers';
 import { IDataAttributes } from '../types';
 
-export const rgba = hexToRgba;
+export { default as rgba } from 'hex-to-rgba';
 
 /** @deprecated Используйте `toKebabCase` из `true-react-platform-helpers` */
 export const transformToKebab = (string: string): string => {

package/src/theme/types.ts

@@ -6,8 +6,6 @@ import type {
   IButtonStyles,
   ICheckboxStyles,
   ICloseButtonStyles,
-  ICommonIcon,
-  IComplexIcon,
   IControlWrapperStyles,
   ICssBaselineStyles,
   IDateInputStyles,
@@ -31,6 +29,7 @@ import type {
   IFlexibleTableStyles,
   IIconButtonStyles,
   IIconStyles,
+  IIconType,
   IIncrementInputStyles,
   IInputStyles,
   IListItemStyles,
@@ -153,8 +152,7 @@ export type IUiKitHelpers = Record<string, Styles | (() => Styles)>;
 
 export interface IUiKitTheme {
   components?: Partial<IComponentStyles>;
-  icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
-  complexIcons?: Partial<Record<IComplexIcon, string>>;
+  icons?: Partial<Record<IIconType, ISvgIcon>>;
   preloaders?: Partial<Record<IPreloaderSvgType, string>>; // TODO: заменить string
   animations?: IUiKitAnimations;
   colors?: Record<string, string>;

package/dist/components/Icon/complexIcons/icons.d.ts

@@ -1,10 +0,0 @@
-export declare const complexIcons: {
-    avatar: string;
-    'file-excel': string;
-    'file-image': string;
-    'file-other': string;
-    'file-pdf': string;
-    'file-word': string;
-    'file-xml': string;
-    'file-zip': string;
-};

package/dist/components/Icon/complexIcons/index.d.ts

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

package/dist/components/Icon/components/ComplexIconBoilerplate/ComplexIconBoilerplate.d.ts

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-import { IComplexIcon } from '../../types';
-export interface IComplexIconBoilerplateProps {
-    type: IComplexIcon;
-}
-export declare const ComplexIconBoilerplate: FC<IComplexIconBoilerplateProps>;

package/dist/components/Icon/components/ComplexIconBoilerplate/index.d.ts

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

package/dist/components/Icon/components/IconBolerplate/IconBoilerplate.d.ts

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-import { ICommonIcon } from '../../types';
-export interface IIconBoilerplateProps {
-    type: ICommonIcon;
-}
-export declare const IconBoilerplate: FC<IIconBoilerplateProps>;

package/dist/components/Icon/components/IconBolerplate/index.d.ts

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

package/dist/components/Icon/components/index.d.ts

@@ -1,2 +0,0 @@
-export * from './ComplexIconBoilerplate';
-export * from './IconBolerplate';

package/dist/components/Icon/helpers.d.ts

@@ -1,6 +0,0 @@
-import type { IIconType, ISvgIcon } from './types';
-export declare const isComplexIcon: (type: IIconType) => type is "avatar" | "file-excel" | "file-image" | "file-other" | "file-pdf" | "file-word" | "file-xml" | "file-zip";
-/**
- * Эта функция позволяет корректно определить ключи в типе
- */
-export declare const checkIcons: <P extends string>(ico: Record<P, ISvgIcon>) => Record<P, ISvgIcon>;

package/dist/components/Icon/icons-list.d.ts

@@ -1 +0,0 @@
-export declare const iconsList: Record<"direction" | "filter" | "document" | "search" | "repeat" | "link" | "copy" | "cancel" | "close" | "sort" | "size" | "menu" | "check" | "settings" | "list" | "arrow" | "vendor-service" | "aircraft-takeoff" | "archive" | "arrow-right" | "baggage" | "balloon" | "bluetooth" | "bonus" | "book" | "box" | "business" | "calendar" | "check-big" | "check-all" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chevron-down-small" | "chevron-left-small" | "chevron-right-small" | "chevron-up-small" | "circle-check" | "close-large" | "close-window" | "copy-outline" | "crane" | "danger" | "download" | "email" | "eye" | "eye-closed" | "female" | "folder" | "folder-add" | "food" | "import" | "information" | "insurance" | "lock" | "lock-open" | "male" | "minus" | "burger-menu" | "pencil" | "pin" | "plane" | "plane-circle" | "plus" | "presentation" | "print" | "question" | "refresh" | "rocket" | "round-trip" | "vendor-logo" | "scan" | "send-email" | "sign-out" | "sort-asc" | "sort-desc" | "sort-list-asc" | "sort-list-desc" | "star" | "status-error" | "status-info" | "status-not-ok" | "status-ok" | "status-warning" | "three-circles" | "ticket-revert" | "ticket" | "time" | "trash-can" | "upgrade" | "user" | "user-group" | "voucher" | "upload", import("./types").ISvgIcon>;

package/src/components/Flag/augment.d.ts

@@ -1 +0,0 @@
-declare module 'country-flag-icons/react/3x2';

package/src/components/Icon/complexIcons/augment.d.ts

@@ -1 +0,0 @@
-declare module '*.svg?raw';

package/src/components/Icon/complexIcons/icons.ts

@@ -1,19 +0,0 @@
-import avatarGreen from './avatarGreen.svg?raw';
-import fileExcel from './fileExcel.svg?raw';
-import fileImage from './fileImage.svg?raw';
-import fileOther from './fileOther.svg?raw';
-import filePdf from './filePdf.svg?raw';
-import fileWord from './fileWord.svg?raw';
-import fileXml from './fileXml.svg?raw';
-import fileZip from './fileZip.svg?raw';
-
-export const complexIcons = {
-  avatar: avatarGreen,
-  'file-excel': fileExcel,
-  'file-image': fileImage,
-  'file-other': fileOther,
-  'file-pdf': filePdf,
-  'file-word': fileWord,
-  'file-xml': fileXml,
-  'file-zip': fileZip,
-};

package/src/components/Icon/complexIcons/index.ts

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

package/src/components/Icon/components/ComplexIconBoilerplate/ComplexIconBoilerplate.tsx

@@ -1,16 +0,0 @@
-import { FC, useContext, useMemo } from 'react';
-import { ThemeContext } from '../../../../theme';
-import { complexIcons } from '../../complexIcons';
-import { IComplexIcon } from '../../types';
-
-export interface IComplexIconBoilerplateProps {
-  type: IComplexIcon;
-}
-
-export const ComplexIconBoilerplate: FC<IComplexIconBoilerplateProps> = ({ type }) => {
-  const { theme } = useContext(ThemeContext);
-  const icons = useMemo(() => ({ ...complexIcons, ...theme.complexIcons }), []);
-  const ComplexIcon = icons[type];
-
-  return <div dangerouslySetInnerHTML={{ __html: ComplexIcon }} />;
-};

package/src/components/Icon/components/ComplexIconBoilerplate/index.ts

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

package/src/components/Icon/components/IconBolerplate/IconBoilerplate.tsx

@@ -1,43 +0,0 @@
-import { FC, useContext, useMemo } from 'react';
-import { ThemeContext } from '../../../../theme';
-import { iconsList as commonIcons } from '../../icons-list';
-import { ICommonIcon } from '../../types';
-
-export interface IIconBoilerplateProps {
-  type: ICommonIcon;
-}
-
-export const IconBoilerplate: FC<IIconBoilerplateProps> = ({ type }) => {
-  const { theme } = useContext(ThemeContext);
-  const icons = useMemo(() => ({ ...commonIcons, ...theme.icons }), []);
-  const icon = icons[type];
-
-  return (
-    <svg
-      width="100%"
-      height="100%"
-      viewBox={icon.viewBox ?? '0 0 20 20'}
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      {icon.paths?.map((path, index) => (
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          fill={path.fill ?? 'currentColor'}
-          stroke={path.stroke ?? 'none'}
-          key={index}
-          {...path}
-        />
-      ))}
-
-      {icon.rects?.map((rect, index) => (
-        <rect {...rect} key={index} />
-      ))}
-
-      {icon.circles?.map((circle, index) => (
-        <circle {...circle} key={index} />
-      ))}
-    </svg>
-  );
-};

package/src/components/Icon/components/IconBolerplate/index.ts

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

package/src/components/Icon/components/index.ts

@@ -1,2 +0,0 @@
-export * from './ComplexIconBoilerplate';
-export * from './IconBolerplate';

package/src/components/Icon/helpers.tsx

@@ -1,9 +0,0 @@
-import { complexIcons } from './complexIcons';
-import type { IComplexIcon, IIconType, ISvgIcon } from './types';
-
-export const isComplexIcon = (type: IIconType): type is IComplexIcon => type in complexIcons;
-
-/**
- * Эта функция позволяет корректно определить ключи в типе
- */
-export const checkIcons = <P extends string>(ico: Record<P, ISvgIcon>): Record<P, ISvgIcon> => ico;