@true-engineering/true-react-common-ui-kit 2.3.2 → 2.5.0

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

@@ -1,85 +1,86 @@
-import { Icon, IIconType } from './Icon';
-import { complexIcons } from './complexIcons';
-import { icons } from './icons';
-
-const types: IIconType[] = [...Object.keys(icons), ...Object.keys(complexIcons)] as IIconType[];
-
-export default {
-  title: 'Icon',
-};
-
-export const Default = () => (
-  <div
-    style={{
-      border: '1px dotted rgba(0,0,0,.2)',
-      // color: color('Container color', colors.GREEN_FOCUS),
-      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,
-      // }),
-    }}
-  >
-    {/* <Icon type={select('type', types, types[0])} /> */}
-  </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',
-        }}
-      >
-        <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>
-    ))}
-  </div>
-);
+import { Icon } from './Icon';
+import { complexIcons } from './complexIcons';
+import { iconsList } from './icons-list';
+import { IIconType } from './types';
+
+const types: IIconType[] = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+
+export default {
+  title: 'Icon',
+};
+
+export const Default = () => (
+  <div
+    style={{
+      border: '1px dotted rgba(0,0,0,.2)',
+      // color: color('Container color', colors.GREEN_FOCUS),
+      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,
+      // }),
+    }}
+  >
+    {/* <Icon type={select('type', types, types[0])} /> */}
+  </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',
+        }}
+      >
+        <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>
+    ))}
+  </div>
+);

package/src/components/Icon/Icon.tsx

@@ -1,32 +1,27 @@
-import React from 'react';
-import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import ComplexIconBoilerplate from './ComplexIconBoilerplate';
-import { IconBoilerplate } from './IconBoilerplate';
-import { complexIcons, IComplexIcon } from './complexIcons';
-import { ICommonIcon } from './icons';
-import { IconStyles, styles } from './Icon.styles';
-
-export type IIconType = ICommonIcon | IComplexIcon;
-
-export interface IIconProps extends ICommonProps {
-  tweakStyles?: IconStyles;
-  type: IIconType;
-}
-
-const isComplexIcon = (type: IIconType): type is IComplexIcon => type in complexIcons;
-
-export const Icon: React.FC<IIconProps> = ({ type, data, tweakStyles }) => {
-  const { classes } = useTheme('Icon', styles, tweakStyles);
-
-  return (
-    <div className={classes.root} {...addDataAttributes(data)}>
-      {isComplexIcon(type) ? (
-        <ComplexIconBoilerplate type={type} />
-      ) : (
-        <IconBoilerplate type={type} />
-      )}
-    </div>
-  );
-};
+import { FC } from 'react';
+import { addDataAttributes } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { ComplexIconBoilerplate, IconBoilerplate } from './components';
+import { isComplexIcon } from './helpers';
+import { IIconType } from './types';
+import { IconStyles, styles } from './Icon.styles';
+
+export interface IIconProps extends ICommonProps {
+  tweakStyles?: IconStyles;
+  type: IIconType;
+}
+
+export const Icon: FC<IIconProps> = ({ type, data, tweakStyles }) => {
+  const { classes } = useTheme('Icon', styles, tweakStyles);
+
+  return (
+    <div className={classes.root} {...addDataAttributes(data)}>
+      {isComplexIcon(type) ? (
+        <ComplexIconBoilerplate type={type} />
+      ) : (
+        <IconBoilerplate type={type} />
+      )}
+    </div>
+  );
+};

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

@@ -1,7 +1,5 @@
-import avatarGreen from './avatarGreen.svg?raw';
-
-export const complexIcons = {
-  avatar: avatarGreen,
-};
-
-export type IComplexIcon = keyof typeof complexIcons;
+import avatarGreen from './avatarGreen.svg?raw';
+
+export const complexIcons = {
+  avatar: avatarGreen,
+};

package/src/components/Icon/{ComplexIconBoilerplate.tsx → components/ComplexIconBoilerplate/ComplexIconBoilerplate.tsx}

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

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

package/src/components/Icon/{IconBoilerplate.tsx → components/IconBolerplate/IconBoilerplate.tsx}

@@ -1,42 +1,43 @@
-import { FC, useContext, useMemo } from 'react';
-import { ThemeContext } from '../../hooks';
-import { ICommonIcon, icons as commonIcons } from './icons';
-
-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>
-  );
-};
+import { FC, useContext, useMemo } from 'react';
+import { ThemeContext } from '../../../../hooks';
+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

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

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

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

package/src/components/Icon/helpers.ts

@@ -0,0 +1,9 @@
+import { complexIcons } from './complexIcons';
+import { 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>) => ico;