@true-engineering/true-react-common-ui-kit 4.0.0-alpha34 → 4.0.0-alpha36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha34",
+  "version": "4.0.0-alpha36",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -12,8 +12,8 @@
   "homepage": "",
   "license": "Apache-2.0",
   "type": "module",
-  "types": "dist/index.d.ts",
-  "main": "dist/true-react-common-ui-kit.umd.cjs",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/true-react-common-ui-kit.umd.cjs",
   "module": "./dist/true-react-common-ui-kit.js",
   "directories": {
     "lib": "src"
@@ -30,6 +30,7 @@
   },
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "require": "./dist/true-react-common-ui-kit.umd.cjs",
       "import": "./dist/true-react-common-ui-kit.js"
     },

package/src/components/Button/Button.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 { Button, IButtonProps } from './Button';
 import { BUTTON_SIZES, BUTTON_VIEWS } from './constants';
 
-const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+const icons = [undefined, ...Object.keys(iconsMap)];
 
 const preloaderTypes: Array<IButtonProps['preloaderType']> = ['dots', 'default', 'logo'];
 

package/src/components/Colors/Colors.tsx

@@ -1,12 +1,12 @@
-import { FC, useContext } from 'react';
-import { ThemeContext } from '../../theme';
+import { FC } from 'react';
+import { useTheme } from '../../theme';
 import { useStyles } from './Colors.styles';
 
 // TODO: А зачем нужен то этот компонент кроме как ради сторис?????? мб его толкьо в сторис оформить?
 
 export const Colors: FC = () => {
   const classes = useStyles();
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const { colors = {} } = theme;
 
   return (

package/src/components/ControlWrapper/ControlWrapper.stories.tsx

@@ -1,6 +1,6 @@
 import { doNothing } from '@true-engineering/true-react-platform-helpers';
 import { ComponentStory } from '@storybook/react';
-import { Icon, iconsList } from '../Icon';
+import { Icon, iconsMap } from '../Icon';
 import { ControlWrapper } from './ControlWrapper';
 
 export default {
@@ -26,13 +26,13 @@ Default.args = {
   hasValue: false,
   icon: [
     { iconComponent: <div>Бу</div>, onClick: () => console.log('close'), shouldResetSize: true },
-    { iconComponent: <Icon type="question" /> },
+    { iconComponent: <Icon type="plus" /> },
     { iconComponent: 'search', onClick: () => console.log('search') },
   ],
 };
 
 Default.argTypes = {
-  icon: { control: 'select', options: [undefined, ...Object.keys(iconsList)] },
+  icon: { control: 'select', options: [undefined, ...Object.keys(iconsMap)] },
   groupPlacement: {
     control: 'select',
     options: [

package/src/components/FileItem/FileItem.stories.tsx

@@ -2,8 +2,7 @@ import { format } from 'date-fns';
 import { ru } from 'date-fns/locale';
 import { ComponentStory } from '@storybook/react';
 import { FILE_ITEM_SIZES } from '../FileItem/constants';
-import { iconsList, IIconType } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
+import { iconsMap } from '../Icon';
 import { FileItem, IFileItemProps } from './FileItem';
 
 export default {
@@ -11,7 +10,7 @@ export default {
   component: FileItem,
 };
 
-const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+const icons = [undefined, ...Object.keys(iconsMap)];
 
 const preloaderTypes: Array<IFileItemProps['preloaderType']> = ['dots', 'default', 'logo'];
 

package/src/components/FileItem/constants.ts

@@ -1,20 +1,9 @@
 import { mimeTypes } from '../../constants';
-import { IComplexIcon } from '../Icon';
-import { type IFileIcon } from './types';
+import { IIconType } from '../Icon';
 
-export const FILE_ICONS = [
-  'file-excel',
-  'file-image',
-  'file-pdf',
-  'file-word',
-  'file-xml',
-  'file-zip',
-  'file-other',
-] satisfies IComplexIcon[];
+export const FILE_ICON_DEFAULT: IIconType = 'file-other';
 
-export const FILE_ICON_DEFAULT: IFileIcon = 'file-other';
-
-export const iconTypeMap: Record<string, IFileIcon> = {
+export const iconTypeMap: Record<string, IIconType> = {
   [mimeTypes.xls]: 'file-excel',
   [mimeTypes.xlsx]: 'file-excel',
   [mimeTypes.jpeg]: 'file-image',

package/src/components/FileItem/helpers.ts

@@ -1,7 +1,8 @@
 import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { IMimeType, mimeTypes } from '../../constants';
+import { IIconType } from '../Icon';
 import { FILE_ICON_DEFAULT, iconTypeMap } from './constants';
-import { IFileIcon, IFileInfo } from './types';
+import { IFileInfo } from './types';
 
 export const getFileExtensionByFilename = (fileName: string): string | undefined => {
   const splitFileName = fileName.split('.');
@@ -13,7 +14,7 @@ export const getMimeTypeByFilename = (fileName: string): string | undefined => {
   return isNotEmpty(ext) ? mimeTypes[ext as IMimeType] : undefined;
 };
 
-export const getFileIcon = ({ type, name }: IFileInfo): IFileIcon => {
+export const getFileIcon = ({ type, name }: IFileInfo): IIconType => {
   if (isNotEmpty(type) && type in iconTypeMap) {
     return iconTypeMap[type];
   }

package/src/components/FileItem/types.ts

@@ -1,4 +1,4 @@
-import { FILE_ICONS, FILE_ITEM_SIZES } from './constants';
+import { FILE_ITEM_SIZES } from './constants';
 
 export interface IFileInfo {
   name: File['name'];
@@ -6,6 +6,4 @@ export interface IFileInfo {
   size?: File['size'];
 }
 
-export type IFileIcon = (typeof FILE_ICONS)[number];
-
 export type IFileItemSize = (typeof FILE_ITEM_SIZES)[number];

package/src/components/Icon/Icon.stories.tsx

@@ -1,86 +1,95 @@
+import { FC } from 'react';
+import { isArrayNotEmpty, isEmpty } from '@true-engineering/true-react-platform-helpers';
+import { useTheme } from '../../theme';
 import { Icon } from './Icon';
-import { complexIcons } from './complexIcons';
-import { iconsList } from './icons-list';
+import { iconsMap } from './icons';
 import { IIconType } from './types';
 
-const types: IIconType[] = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
-
 export default {
   title: 'Data Display/Icon',
 };
 
-export const Default = () => (
+const GalleryIcon: FC<{ type: IIconType }> = ({ type }) => (
   <div
+    key={type}
     style={{
-      border: '1px dotted rgba(0,0,0,.2)',
-      // color: color('Container color', colors.GREEN_FOCUS),
+      width: 100,
+      height: 100,
+      margin: 1,
+      background: '#f7f7f7',
       display: 'flex',
-      // width: number('Container width', 40, {
-      //   range: true,
-      //   min: 0,
-      //   max: 200,
-      //   step: 10,
-      // }),
-      // height: number('Container height', 40, {
-      //   range: true,
-      //   min: 0,
-      //   max: 200,
-      //   step: 10,
-      // }),
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'column',
     }}
   >
-    {/* <Icon type={select('type', types, types[0])} /> */}
+    <div
+      style={{
+        width: 32,
+        height: 32,
+        margin: '10px 0',
+        display: 'flex',
+        alignItems: 'center',
+        color: '#888',
+      }}
+    >
+      <Icon type={type} />
+    </div>
+    <div
+      style={{
+        fontFamily: 'Arial',
+        fontSize: 13,
+        color: '#747679',
+        overflow: 'hidden',
+        padding: '0 5px',
+      }}
+    >
+      {type}
+    </div>
   </div>
 );
 
-export const Gallery = () => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexWrap: 'wrap',
-      width: '80vw',
-    }}
-  >
-    {types.map((type) => (
-      <div
-        key={type}
-        style={{
-          width: 100,
-          height: 100,
-          margin: 1,
-          background: '#f7f7f7',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexDirection: 'column',
-        }}
-      >
+export const Gallery = () => {
+  const theme = useTheme();
+  const notCustomizedIcons = Object.keys(iconsMap).filter((icon) =>
+    isEmpty(theme.icons?.[icon]),
+  ) as IIconType[];
+  const customizedIcons = Object.keys(theme.icons ?? {}) as IIconType[];
+
+  return (
+    <div>
+      {isArrayNotEmpty(notCustomizedIcons) && (
+        <div>
+          <h1>Китовые иконки</h1>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+              width: '80vw',
+            }}
+          >
+            {notCustomizedIcons.map((type) => (
+              <GalleryIcon type={type} key={type} />
+            ))}
+          </div>
+        </div>
+      )}
+      <div>
+        <h1>Кастомизированные иконки</h1>
         <div
           style={{
-            width: 32,
-            height: 32,
-            margin: '10px 0',
             display: 'flex',
             alignItems: 'center',
-            color: '#888',
-          }}
-        >
-          <Icon type={type} />
-        </div>
-        <div
-          style={{
-            fontFamily: 'Arial',
-            fontSize: 13,
-            color: '#747679',
-            overflow: 'hidden',
-            padding: '0 5px',
+            flexWrap: 'wrap',
+            width: '80vw',
           }}
         >
-          {type}
+          {customizedIcons.map((type) => (
+            <GalleryIcon type={type} key={type} />
+          ))}
         </div>
       </div>
-    ))}
-  </div>
-);
+    </div>
+  );
+};

package/src/components/Icon/Icon.styles.ts

@@ -1,4 +1,4 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
+import { createThemedStyles, ITweakStyles } from '../../theme';
 
 export const useStyles = createThemedStyles('Icon', {
   root: {

package/src/components/Icon/Icon.tsx

@@ -1,11 +1,10 @@
 import { FC } from 'react';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes, isEmpty } from '@true-engineering/true-react-platform-helpers';
+import { useTheme } from '../../theme';
 import { ICommonProps } from '../../types';
-import { ComplexIconBoilerplate, IconBoilerplate } from './components';
-import { isComplexIcon } from './helpers';
+import { iconsMap } from './icons';
 import { IIconType } from './types';
-import { useStyles, IIconStyles } from './Icon.styles';
+import { IIconStyles, useStyles } from './Icon.styles';
 
 export interface IIconProps extends ICommonProps<IIconStyles> {
   type: IIconType;
@@ -13,14 +12,20 @@ export interface IIconProps extends ICommonProps<IIconStyles> {
 
 export const Icon: FC<IIconProps> = ({ type, data, testId, tweakStyles }) => {
   const classes = useStyles({ theme: tweakStyles });
+  const theme = useTheme();
+
+  const icon = theme.icons?.[type] ?? iconsMap[type];
+
+  if (isEmpty(icon)) {
+    console.error(`Иконки ${type} не существует`);
+    return null;
+  }
 
   return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {isComplexIcon(type) ? (
-        <ComplexIconBoilerplate type={type} />
-      ) : (
-        <IconBoilerplate type={type} />
-      )}
-    </div>
+    <div
+      className={classes.root}
+      {...addDataAttributes(data, testId)}
+      dangerouslySetInnerHTML={{ __html: icon }}
+    />
   );
 };

package/src/components/Icon/icons/calendar.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M6 12h3V9H6v3zm-2 4V7h12l.002 9H4zM16 4h-1V3c0-.552-.448-1-1-1s-1 .448-1 1v1H7V3c0-.552-.448-1-1-1s-1 .448-1 1v1H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2z"></path></svg>

package/src/components/Icon/icons/check.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="m7.5 13.086 7.793-7.793a1 1 0 1 1 1.414 1.414l-8.5 8.5a1 1 0 0 1-1.414 0l-3.5-3.5a1 1 0 1 1 1.414-1.414L7.5 13.086Z"></path></svg>

package/src/components/Icon/icons/chevron-down-small.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M8.24512 8.84751L11.038 6.05461C11.4285 5.66409 12.0617 5.66409 12.4522 6.05461C12.8427 6.44514 12.8427 7.0783 12.4522 7.46883L8.95222 10.9688C8.5617 11.3593 7.92853 11.3593 7.53801 10.9688L4.03801 7.46883C3.64749 7.0783 3.64749 6.44514 4.03801 6.05461C4.42853 5.66409 5.0617 5.66409 5.45222 6.05461L8.24512 8.84751Z"></path></svg>

package/src/components/Icon/icons/chevron-down.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M10.0029 11.6053L5.71004 7.31242C5.31951 6.9219 4.68635 6.9219 4.29582 7.31242C3.9053 7.70295 3.9053 8.33611 4.29582 8.72664L9.29582 13.7266C9.68635 14.1172 10.3195 14.1172 10.71 13.7266L15.71 8.72664C16.1006 8.33611 16.1006 7.70295 15.71 7.31242C15.3195 6.9219 14.6863 6.9219 14.2958 7.31242L10.0029 11.6053Z"></path></svg>

package/src/components/Icon/icons/chevron-left.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M8.41421 10L12.7071 5.70711C13.0976 5.31658 13.0976 4.68342 12.7071 4.29289C12.3166 3.90237 11.6834 3.90237 11.2929 4.29289L6.29289 9.29289C5.90237 9.68342 5.90237 10.3166 6.29289 10.7071L11.2929 15.7071C11.6834 16.0976 12.3166 16.0976 12.7071 15.7071C13.0976 15.3166 13.0976 14.6834 12.7071 14.2929L8.41421 10Z"></path></svg>

package/src/components/Icon/icons/chevron-right.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M11.5858 10L7.29289 5.70711C6.90237 5.31658 6.90237 4.68342 7.29289 4.29289C7.68342 3.90237 8.31658 3.90237 8.70711 4.29289L13.7071 9.29289C14.0976 9.68342 14.0976 10.3166 13.7071 10.7071L8.70711 15.7071C8.31658 16.0976 7.68342 16.0976 7.29289 15.7071C6.90237 15.3166 6.90237 14.6834 7.29289 14.2929L11.5858 10Z"></path></svg>

package/src/components/Icon/icons/close-large.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M6.102 4.709c-.446-.36-1.055-.373-1.415-.012-.39.39-.342 1.072.108 1.523l3.783 3.782-3.783 3.782-.096.108c-.36.446-.373 1.055-.012 1.415.39.391 1.072.342 1.523-.108l3.782-3.783 3.782 3.783.108.097c.446.358 1.055.372 1.415.011.39-.39.342-1.072-.108-1.523l-3.783-3.782L15.19 6.22l.097-.108c.358-.446.372-1.055.011-1.415-.39-.39-1.072-.342-1.523.108L9.992 8.588 6.21 4.805l-.108-.096Z"></path></svg>

package/src/components/Icon/icons/close-window.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="currentColor" d="M4.5 4.5l11 11m0-11l-11 11" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path></svg>

package/src/components/Icon/icons/close.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M11.985 10l2.407-2.293c.41-.39.41-1.023 0-1.414-.41-.39-1.074-.39-1.485 0L10.5 8.586 8.093 6.293c-.411-.39-1.075-.39-1.485 0-.41.391-.41 1.023 0 1.414L9.015 10l-2.407 2.293c-.41.391-.41 1.023 0 1.414.205.195.473.293.742.293s.538-.098.743-.293l2.407-2.293 2.407 2.293c.205.195.474.293.743.293s.537-.098.742-.293c.41-.391.41-1.023 0-1.414L11.985 10z"></path></svg>

package/src/components/Icon/icons/filter.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M12 11c1.306 0 2.417.834 2.829 2H17c.552 0 1 .448 1 1s-.448 1-1 1h-2.17c-.412 1.165-1.524 2-2.83 2s-2.418-.835-2.83-2H3c-.552 0-1-.448-1-1s.448-1 1-1h6.171c.412-1.166 1.523-2 2.829-2zM5 3c1.306 0 2.417.834 2.829 2H17c.552 0 1 .448 1 1s-.448 1-1 1H7.83C7.417 8.165 6.305 9 5 9 3.343 9 2 7.657 2 6s1.343-3 3-3z"></path></svg>

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

@@ -0,0 +1,62 @@
+import type { ISvgIcon } from '../types';
+import avatar from './avatar.svg?raw';
+import calendar from './calendar.svg?raw';
+import check from './check.svg?raw';
+import chevronDownSmall from './chevron-down-small.svg?raw';
+import chevronDown from './chevron-down.svg?raw';
+import chevronLeft from './chevron-left.svg?raw';
+import chevronRight from './chevron-right.svg?raw';
+import closeLarge from './close-large.svg?raw';
+import closeWindow from './close-window.svg?raw';
+import close from './close.svg?raw';
+import fileExcel from './file-excel.svg?raw';
+import fileImage from './file-image.svg?raw';
+import fileOther from './file-other.svg?raw';
+import filePdf from './file-pdf.svg?raw';
+import fileWord from './file-word.svg?raw';
+import fileXml from './file-xml.svg?raw';
+import fileZip from './file-zip.svg?raw';
+import filter from './filter.svg?raw';
+import information from './information.svg?raw';
+import menu from './menu.svg?raw';
+import minus from './minus.svg?raw';
+import plus from './plus.svg?raw';
+import search from './search.svg?raw';
+import statusError from './status-error.svg?raw';
+import statusInfo from './status-info.svg?raw';
+import statusNotOk from './status-not-ok.svg?raw';
+import statusOk from './status-ok.svg?raw';
+import statusWarning from './status-warning.svg?raw';
+import trashCan from './trash-can.svg?raw';
+
+export const iconsMap = {
+  avatar,
+  calendar,
+  check,
+  'chevron-down-small': chevronDownSmall,
+  'chevron-down': chevronDown,
+  'chevron-left': chevronLeft,
+  'chevron-right': chevronRight,
+  'close-large': closeLarge,
+  'close-window': closeWindow,
+  close,
+  'file-excel': fileExcel,
+  'file-image': fileImage,
+  'file-other': fileOther,
+  'file-pdf': filePdf,
+  'file-word': fileWord,
+  'file-xml': fileXml,
+  'file-zip': fileZip,
+  filter,
+  information,
+  menu,
+  minus,
+  plus,
+  search,
+  'status-error': statusError,
+  'status-info': statusInfo,
+  'status-not-ok': statusNotOk,
+  'status-ok': statusOk,
+  'status-warning': statusWarning,
+  'trash-can': trashCan,
+} satisfies Record<string, ISvgIcon>;

package/src/components/Icon/icons/information.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M10 8c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm0 8c3.307 0 6-2.693 6-6 0-3.308-2.693-6-6-6-3.308 0-6 2.692-6 6 0 3.307 2.692 6 6 6zm0-14c2.122 0 4.157.843 5.657 2.343S18 7.878 18 10s-.843 4.157-2.343 5.657S12.122 18 10 18s-4.157-.843-5.657-2.343S2 12.122 2 10c0-4.418 3.582-8 8-8zm0 12c-.552 0-1-.448-1-1v-3c0-.552.448-1 1-1s1 .448 1 1v3c0 .552-.448 1-1 1z"></path></svg>

package/src/components/Icon/icons/menu.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="1 1 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M5.08154 9.02148C5.08154 8.77083 5.16211 8.55778 5.32324 8.38232C5.48438 8.20687 5.70817 8.11914 5.99463 8.11914C6.28109 8.11914 6.50667 8.20687 6.67139 8.38232C6.8361 8.55778 6.91846 8.77083 6.91846 9.02148C6.91846 9.27214 6.8361 9.47803 6.67139 9.63916C6.50667 9.80029 6.28109 9.88086 5.99463 9.88086C5.70817 9.88086 5.48438 9.80029 5.32324 9.63916C5.16211 9.47803 5.08154 9.27214 5.08154 9.02148ZM8.08154 9.02148C8.08154 8.77083 8.16211 8.55778 8.32324 8.38232C8.48438 8.20687 8.70817 8.11914 8.99463 8.11914C9.28109 8.11914 9.50667 8.20687 9.67139 8.38232C9.8361 8.55778 9.91846 8.77083 9.91846 9.02148C9.91846 9.27214 9.8361 9.47803 9.67139 9.63916C9.50667 9.80029 9.28109 9.88086 8.99463 9.88086C8.70817 9.88086 8.48438 9.80029 8.32324 9.63916C8.16211 9.47803 8.08154 9.27214 8.08154 9.02148ZM11.0815 9.02148C11.0815 8.77083 11.1621 8.55778 11.3232 8.38232C11.4844 8.20687 11.7082 8.11914 11.9946 8.11914C12.2811 8.11914 12.5067 8.20687 12.6714 8.38232C12.8361 8.55778 12.9185 8.77083 12.9185 9.02148C12.9185 9.27214 12.8361 9.47803 12.6714 9.63916C12.5067 9.80029 12.2811 9.88086 11.9946 9.88086C11.7082 9.88086 11.4844 9.80029 11.3232 9.63916C11.1621 9.47803 11.0815 9.27214 11.0815 9.02148Z"></path></svg>

package/src/components/Icon/icons/minus.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M16 11H4a1 1 0 1 1 0-2h12a1 1 0 1 1 0 2Z"></path></svg>

package/src/components/Icon/icons/plus.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M16 11h-5v5a1 1 0 1 1-2 0v-5H4a1 1 0 1 1 0-2h5V4a1 1 0 0 1 2 0v5h5a1 1 0 1 1 0 2Z"></path></svg>

package/src/components/Icon/icons/search.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M9 2c3.866 0 7 3.134 7 7 0 1.7-.606 3.259-1.614 4.472l2.589 2.59c.39.39.39 1.023 0 1.414-.39.39-1.024.39-1.414 0l-2.662-2.661C11.785 15.563 10.443 16 9 16c-3.866 0-7-3.134-7-7s3.134-7 7-7zm0 2C6.239 4 4 6.239 4 9s2.239 5 5 5 5-2.239 5-5-2.239-5-5-5z"></path></svg>

package/src/components/Icon/icons/status-error.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0z"></path><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" stroke="none" d="M14 11H6c-.552 0-1-.448-1-1s.448-1 1-1h8c.552 0 1 .448 1 1s-.448 1-1 1z"></path></svg>

package/src/components/Icon/icons/status-info.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0z"></path><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" stroke="none" d="M10 15c-.552 0-1-.448-1-1v-4c0-.552.448-1 1-1s1 .448 1 1v4c0 .552-.448 1-1 1zM10 7c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1z"></path></svg>

package/src/components/Icon/icons/status-not-ok.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0z"></path><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" stroke="none" d="M11.414 10l2.293-2.293c.391-.391.391-1.023 0-1.414-.39-.391-1.023-.391-1.414 0L10 8.586 7.707 6.293c-.39-.391-1.023-.391-1.414 0-.39.391-.39 1.023 0 1.414L8.586 10l-2.293 2.293c-.39.391-.39 1.023 0 1.414.195.195.451.293.707.293.256 0 .512-.098.707-.293L10 11.414l2.293 2.293c.195.195.451.293.707.293.256 0 .512-.098.707-.293.391-.391.391-1.023 0-1.414L11.414 10z"></path></svg>

package/src/components/Icon/icons/status-ok.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0z"></path><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" stroke="none" d="M8.333 11.252l4.96-4.96c.39-.39 1.024-.39 1.414 0 .39.391.39 1.025 0 1.415L9.04 13.374c-.39.39-1.023.39-1.414 0L5.293 11.04c-.39-.39-.39-1.023 0-1.414.39-.39 1.024-.39 1.414 0l1.626 1.626z"></path></svg>

package/src/components/Icon/icons/status-warning.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0z"></path><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" stroke="none" d="M10 5c-.552 0-1 .448-1 1v4c0 .552.448 1 1 1s1-.448 1-1V6c0-.552-.448-1-1-1zM10 13c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z"></path></svg>

package/src/components/Icon/icons/trash-can.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M16 6v10c0 1.105-.895 2-2 2H6c-1.105 0-2-.895-2-2V6h12zM8 8c-.552 0-1 .448-1 1v6c0 .552.448 1 1 1s1-.448 1-1V9c0-.552-.448-1-1-1zm4 0c-.552 0-1 .448-1 1v6c0 .552.448 1 1 1s1-.448 1-1V9c0-.552-.448-1-1-1zm0-6l1 1h3c.552 0 1 .448 1 1s-.448 1-1 1H4c-.552 0-1-.448-1-1s.448-1 1-1h3l1-1h4z"></path></svg>

package/src/components/Icon/index.ts

@@ -1,5 +1,5 @@
 export * from './Icon';
 export * from './types';
-export { iconsList } from './icons-list';
+export * from './icons';
 export type { IIconStyles } from './Icon.styles';
 export * from './snippet';

package/src/components/Icon/types.ts

@@ -1,18 +1,12 @@
-import { ReactElement, SVGAttributes } from 'react';
-import { complexIcons } from './complexIcons';
-import { iconsList } from './icons-list';
+import { ReactElement } from 'react';
+import { iconsMap } from './icons';
 
-export interface ISvgIcon {
-  viewBox?: string;
-  paths?: Array<SVGAttributes<never>>;
-  circles?: Array<SVGAttributes<never>>;
-  rects?: Array<SVGAttributes<never>>;
-}
+export type ISvgIcon = string;
 
-export type ICommonIcon = keyof typeof iconsList;
+type IUiKitIconsMap = typeof iconsMap;
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface IIconsMap extends IUiKitIconsMap {}
 
-export type IComplexIcon = keyof typeof complexIcons;
-
-export type IIconType = ICommonIcon | IComplexIcon;
+export type IIconType = keyof IIconsMap;
 
 export type IIcon = IIconType | ReactElement;

package/src/components/IconButton/IconButton.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 { IconButton } from './IconButton';
 import { ICON_BUTTON_SIZES, ICON_BUTTON_VIEWS } from './constants';
 
-const icons = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+const icons = Object.keys(iconsMap);
 
 export default {
   title: 'Buttons/IconButton',

package/src/components/Input/Input.stories.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { ComponentStory } from '@storybook/react';
-import { iconsList } from '../Icon';
+import { iconsMap } from '../Icon';
 import { IInputProps, Input } from './Input';
 
 const types: Array<IInputProps['type']> = ['text', 'password', 'email', 'number'];
@@ -17,7 +17,7 @@ const groupPositions = [
   'middle',
 ];
 const masks = [undefined, '99/99', 'aaa-aaa', '***+***'];
-const icons = [undefined, ...Object.keys(iconsList)];
+const icons = [undefined, ...Object.keys(iconsMap)];
 
 export default {
   title: 'Inputs/Input',

package/src/components/Modal/Modal.tsx

@@ -17,7 +17,7 @@ import { useStyles, IModalStyles, closeButtonStyles } from './Modal.styles';
 
 export interface IModalProps extends ICommonProps<IModalStyles>, IModalTransitionProps {
   title?: ReactNode;
-  /** @default 'l */
+  /** @default 'l' */
   size?: 'l' | 'm' | 's';
   /** @default false */
   isFooterSticky?: boolean;

package/src/components/Notification/Notification.stories.tsx

@@ -1,9 +1,8 @@
 import { Meta, Story } from '@storybook/react';
-import { iconsList, IIconType } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
+import { iconsMap } from '../Icon';
 import { INotificationProps, Notification } from './Notification';
 
-const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+const icons = [undefined, ...Object.keys(iconsMap)];
 
 const lorem = 'Lorem ipsum dolor, sit amet consectetur adipisicing';
 

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { ComponentStory } from '@storybook/react';
 import { phoneInfo } from '../../constants';
-import { iconsList } from '../Icon';
+import { iconsMap } from '../Icon';
 import { PhoneInput } from './PhoneInput';
 import { IPhoneValue } from './types';
 
-const icons = [undefined, ...Object.keys(iconsList)];
+const icons = [undefined, ...Object.keys(iconsMap)];
 const groupPlacements = [undefined, 'left', 'right', 'middle'];
 const borders = [undefined, 'left', 'top', 'right', 'bottom'];
 const errorPositions = ['bottom', 'top'];