@true-engineering/true-react-common-ui-kit 4.0.0-alpha35 → 4.0.0-alpha36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/FileItem/constants.d.ts +3 -4
- package/dist/components/FileItem/helpers.d.ts +3 -2
- package/dist/components/FileItem/types.d.ts +1 -2
- package/dist/components/Flag/customFlags/customFlags.d.ts +2 -2
- package/dist/components/Icon/icons/index.d.ts +31 -0
- package/dist/components/Icon/index.d.ts +1 -1
- package/dist/components/Icon/types.d.ts +7 -11
- package/dist/components/Modal/Modal.d.ts +1 -1
- package/dist/components/ScrollIntoViewIfNeeded/ScrollIntoViewIfNeeded.d.ts +2 -2
- package/dist/helpers/misc.d.ts +1 -2
- package/dist/theme/types.d.ts +2 -3
- package/dist/true-react-common-ui-kit.js +230 -1175
- package/dist/true-react-common-ui-kit.js.map +1 -1
- package/dist/true-react-common-ui-kit.umd.cjs +349 -1295
- package/dist/true-react-common-ui-kit.umd.cjs.map +1 -1
- package/package.json +1 -1
- package/src/components/Button/Button.stories.tsx +2 -3
- package/src/components/Colors/Colors.tsx +3 -3
- package/src/components/ControlWrapper/ControlWrapper.stories.tsx +3 -3
- package/src/components/FileItem/FileItem.stories.tsx +2 -3
- package/src/components/FileItem/constants.ts +3 -14
- package/src/components/FileItem/helpers.ts +3 -2
- package/src/components/FileItem/types.ts +1 -3
- package/src/components/Icon/Icon.stories.tsx +72 -63
- package/src/components/Icon/Icon.styles.ts +1 -1
- package/src/components/Icon/Icon.tsx +17 -12
- package/src/components/Icon/icons/calendar.svg +1 -0
- package/src/components/Icon/icons/check.svg +1 -0
- package/src/components/Icon/icons/chevron-down-small.svg +1 -0
- package/src/components/Icon/icons/chevron-down.svg +1 -0
- package/src/components/Icon/icons/chevron-left.svg +1 -0
- package/src/components/Icon/icons/chevron-right.svg +1 -0
- package/src/components/Icon/icons/close-large.svg +1 -0
- package/src/components/Icon/icons/close-window.svg +1 -0
- package/src/components/Icon/icons/close.svg +1 -0
- package/src/components/Icon/icons/filter.svg +1 -0
- package/src/components/Icon/icons/index.ts +62 -0
- package/src/components/Icon/icons/information.svg +1 -0
- package/src/components/Icon/icons/menu.svg +1 -0
- package/src/components/Icon/icons/minus.svg +1 -0
- package/src/components/Icon/icons/plus.svg +1 -0
- package/src/components/Icon/icons/search.svg +1 -0
- package/src/components/Icon/icons/status-error.svg +1 -0
- package/src/components/Icon/icons/status-info.svg +1 -0
- package/src/components/Icon/icons/status-not-ok.svg +1 -0
- package/src/components/Icon/icons/status-ok.svg +1 -0
- package/src/components/Icon/icons/status-warning.svg +1 -0
- package/src/components/Icon/icons/trash-can.svg +1 -0
- package/src/components/Icon/index.ts +1 -1
- package/src/components/Icon/types.ts +7 -13
- package/src/components/IconButton/IconButton.stories.tsx +2 -3
- package/src/components/Input/Input.stories.tsx +2 -2
- package/src/components/Modal/Modal.tsx +1 -1
- package/src/components/Notification/Notification.stories.tsx +2 -3
- package/src/components/PhoneInput/PhoneInput.stories.tsx +2 -2
- package/src/components/Status/Status.stories.tsx +3 -4
- package/src/components/TextButton/TextButton.stories.tsx +2 -3
- package/src/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.tsx +4 -4
- package/src/helpers/misc.ts +1 -2
- package/src/theme/types.ts +2 -4
- package/dist/components/Icon/complexIcons/icons.d.ts +0 -10
- package/dist/components/Icon/complexIcons/index.d.ts +0 -1
- package/dist/components/Icon/components/ComplexIconBoilerplate/ComplexIconBoilerplate.d.ts +0 -6
- package/dist/components/Icon/components/ComplexIconBoilerplate/index.d.ts +0 -1
- package/dist/components/Icon/components/IconBolerplate/IconBoilerplate.d.ts +0 -6
- package/dist/components/Icon/components/IconBolerplate/index.d.ts +0 -1
- package/dist/components/Icon/components/index.d.ts +0 -2
- package/dist/components/Icon/helpers.d.ts +0 -6
- package/dist/components/Icon/icons-list.d.ts +0 -1
- package/src/components/Flag/augment.d.ts +0 -1
- package/src/components/Icon/complexIcons/augment.d.ts +0 -1
- package/src/components/Icon/complexIcons/icons.ts +0 -19
- package/src/components/Icon/complexIcons/index.ts +0 -1
- package/src/components/Icon/components/ComplexIconBoilerplate/ComplexIconBoilerplate.tsx +0 -16
- package/src/components/Icon/components/ComplexIconBoilerplate/index.ts +0 -1
- package/src/components/Icon/components/IconBolerplate/IconBoilerplate.tsx +0 -43
- package/src/components/Icon/components/IconBolerplate/index.ts +0 -1
- package/src/components/Icon/components/index.ts +0 -2
- package/src/components/Icon/helpers.tsx +0 -9
- package/src/components/Icon/icons-list.ts +0 -855
- package/src/vite-env.d.ts +0 -1
- /package/src/components/Icon/{complexIcons/avatarGreen.svg → icons/avatar.svg} +0 -0
- /package/src/components/Icon/{complexIcons/fileExcel.svg → icons/file-excel.svg} +0 -0
- /package/src/components/Icon/{complexIcons/fileImage.svg → icons/file-image.svg} +0 -0
- /package/src/components/Icon/{complexIcons/fileOther.svg → icons/file-other.svg} +0 -0
- /package/src/components/Icon/{complexIcons/filePdf.svg → icons/file-pdf.svg} +0 -0
- /package/src/components/Icon/{complexIcons/fileWord.svg → icons/file-word.svg} +0 -0
- /package/src/components/Icon/{complexIcons/fileXml.svg → icons/file-xml.svg} +0 -0
- /package/src/components/Icon/{complexIcons/fileZip.svg → icons/file-zip.svg} +0 -0
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
2
|
-
import {
|
|
3
|
-
import { complexIcons } from '../Icon/complexIcons';
|
|
2
|
+
import { iconsMap } from '../Icon';
|
|
4
3
|
import { TextButton } from './TextButton';
|
|
5
4
|
import { TEXT_BUTTON_SIZES, TEXT_BUTTON_VIEWS } from './constants';
|
|
6
5
|
|
|
7
|
-
const icons = [undefined, ...Object.keys(
|
|
6
|
+
const icons = [undefined, ...Object.keys(iconsMap)];
|
|
8
7
|
|
|
9
8
|
export default {
|
|
10
9
|
title: 'Buttons/TextButton',
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { FC
|
|
2
|
-
import {
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { useTheme } from '../../../../theme';
|
|
3
3
|
import { ICommonProps } from '../../../../types';
|
|
4
4
|
import { IPreloaderSvgType } from '../../types';
|
|
5
5
|
import { DefaultPreloader } from '../DefaultPreloader';
|
|
6
|
-
import {
|
|
6
|
+
import { ISvgPreloaderStyles, useStyles } from './SvgPreloader.styles';
|
|
7
7
|
|
|
8
8
|
export interface ISvgPreloaderProps extends Pick<ICommonProps<ISvgPreloaderStyles>, 'tweakStyles'> {
|
|
9
9
|
type: IPreloaderSvgType;
|
|
@@ -12,7 +12,7 @@ export interface ISvgPreloaderProps extends Pick<ICommonProps<ISvgPreloaderStyle
|
|
|
12
12
|
export const SvgPreloader: FC<ISvgPreloaderProps> = ({ type = 'default', tweakStyles }) => {
|
|
13
13
|
const classes = useStyles({ theme: tweakStyles });
|
|
14
14
|
|
|
15
|
-
const
|
|
15
|
+
const theme = useTheme();
|
|
16
16
|
const PreloaderIcon = theme.preloaders?.[type] ?? DefaultPreloader;
|
|
17
17
|
const isInlineSvg = typeof PreloaderIcon === 'string';
|
|
18
18
|
|
package/src/helpers/misc.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import hexToRgba from 'hex-to-rgba';
|
|
2
1
|
import {
|
|
3
2
|
isNotEmpty,
|
|
4
3
|
isString,
|
|
@@ -6,7 +5,7 @@ import {
|
|
|
6
5
|
} from '@true-engineering/true-react-platform-helpers';
|
|
7
6
|
import { IDataAttributes } from '../types';
|
|
8
7
|
|
|
9
|
-
export
|
|
8
|
+
export { default as rgba } from 'hex-to-rgba';
|
|
10
9
|
|
|
11
10
|
/** @deprecated Используйте `toKebabCase` из `true-react-platform-helpers` */
|
|
12
11
|
export const transformToKebab = (string: string): string => {
|
package/src/theme/types.ts
CHANGED
|
@@ -6,8 +6,6 @@ import type {
|
|
|
6
6
|
IButtonStyles,
|
|
7
7
|
ICheckboxStyles,
|
|
8
8
|
ICloseButtonStyles,
|
|
9
|
-
ICommonIcon,
|
|
10
|
-
IComplexIcon,
|
|
11
9
|
IControlWrapperStyles,
|
|
12
10
|
ICssBaselineStyles,
|
|
13
11
|
IDateInputStyles,
|
|
@@ -31,6 +29,7 @@ import type {
|
|
|
31
29
|
IFlexibleTableStyles,
|
|
32
30
|
IIconButtonStyles,
|
|
33
31
|
IIconStyles,
|
|
32
|
+
IIconType,
|
|
34
33
|
IIncrementInputStyles,
|
|
35
34
|
IInputStyles,
|
|
36
35
|
IListItemStyles,
|
|
@@ -153,8 +152,7 @@ export type IUiKitHelpers = Record<string, Styles | (() => Styles)>;
|
|
|
153
152
|
|
|
154
153
|
export interface IUiKitTheme {
|
|
155
154
|
components?: Partial<IComponentStyles>;
|
|
156
|
-
icons?: Partial<Record<
|
|
157
|
-
complexIcons?: Partial<Record<IComplexIcon, string>>;
|
|
155
|
+
icons?: Partial<Record<IIconType, ISvgIcon>>;
|
|
158
156
|
preloaders?: Partial<Record<IPreloaderSvgType, string>>; // TODO: заменить string
|
|
159
157
|
animations?: IUiKitAnimations;
|
|
160
158
|
colors?: Record<string, string>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './icons';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './ComplexIconBoilerplate';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './IconBoilerplate';
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { IIconType, ISvgIcon } from './types';
|
|
2
|
-
export declare const isComplexIcon: (type: IIconType) => type is "avatar" | "file-excel" | "file-image" | "file-other" | "file-pdf" | "file-word" | "file-xml" | "file-zip";
|
|
3
|
-
/**
|
|
4
|
-
* Эта функция позволяет корректно определить ключи в типе
|
|
5
|
-
*/
|
|
6
|
-
export declare const checkIcons: <P extends string>(ico: Record<P, ISvgIcon>) => Record<P, ISvgIcon>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
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>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
declare module 'country-flag-icons/react/3x2';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
declare module '*.svg?raw';
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import avatarGreen from './avatarGreen.svg?raw';
|
|
2
|
-
import fileExcel from './fileExcel.svg?raw';
|
|
3
|
-
import fileImage from './fileImage.svg?raw';
|
|
4
|
-
import fileOther from './fileOther.svg?raw';
|
|
5
|
-
import filePdf from './filePdf.svg?raw';
|
|
6
|
-
import fileWord from './fileWord.svg?raw';
|
|
7
|
-
import fileXml from './fileXml.svg?raw';
|
|
8
|
-
import fileZip from './fileZip.svg?raw';
|
|
9
|
-
|
|
10
|
-
export const complexIcons = {
|
|
11
|
-
avatar: avatarGreen,
|
|
12
|
-
'file-excel': fileExcel,
|
|
13
|
-
'file-image': fileImage,
|
|
14
|
-
'file-other': fileOther,
|
|
15
|
-
'file-pdf': filePdf,
|
|
16
|
-
'file-word': fileWord,
|
|
17
|
-
'file-xml': fileXml,
|
|
18
|
-
'file-zip': fileZip,
|
|
19
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './icons';
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { FC, useContext, useMemo } from 'react';
|
|
2
|
-
import { ThemeContext } from '../../../../theme';
|
|
3
|
-
import { complexIcons } from '../../complexIcons';
|
|
4
|
-
import { IComplexIcon } from '../../types';
|
|
5
|
-
|
|
6
|
-
export interface IComplexIconBoilerplateProps {
|
|
7
|
-
type: IComplexIcon;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export const ComplexIconBoilerplate: FC<IComplexIconBoilerplateProps> = ({ type }) => {
|
|
11
|
-
const { theme } = useContext(ThemeContext);
|
|
12
|
-
const icons = useMemo(() => ({ ...complexIcons, ...theme.complexIcons }), []);
|
|
13
|
-
const ComplexIcon = icons[type];
|
|
14
|
-
|
|
15
|
-
return <div dangerouslySetInnerHTML={{ __html: ComplexIcon }} />;
|
|
16
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './ComplexIconBoilerplate';
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { FC, useContext, useMemo } from 'react';
|
|
2
|
-
import { ThemeContext } from '../../../../theme';
|
|
3
|
-
import { iconsList as commonIcons } from '../../icons-list';
|
|
4
|
-
import { ICommonIcon } from '../../types';
|
|
5
|
-
|
|
6
|
-
export interface IIconBoilerplateProps {
|
|
7
|
-
type: ICommonIcon;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export const IconBoilerplate: FC<IIconBoilerplateProps> = ({ type }) => {
|
|
11
|
-
const { theme } = useContext(ThemeContext);
|
|
12
|
-
const icons = useMemo(() => ({ ...commonIcons, ...theme.icons }), []);
|
|
13
|
-
const icon = icons[type];
|
|
14
|
-
|
|
15
|
-
return (
|
|
16
|
-
<svg
|
|
17
|
-
width="100%"
|
|
18
|
-
height="100%"
|
|
19
|
-
viewBox={icon.viewBox ?? '0 0 20 20'}
|
|
20
|
-
fill="none"
|
|
21
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
22
|
-
>
|
|
23
|
-
{icon.paths?.map((path, index) => (
|
|
24
|
-
<path
|
|
25
|
-
fillRule="evenodd"
|
|
26
|
-
clipRule="evenodd"
|
|
27
|
-
fill={path.fill ?? 'currentColor'}
|
|
28
|
-
stroke={path.stroke ?? 'none'}
|
|
29
|
-
key={index}
|
|
30
|
-
{...path}
|
|
31
|
-
/>
|
|
32
|
-
))}
|
|
33
|
-
|
|
34
|
-
{icon.rects?.map((rect, index) => (
|
|
35
|
-
<rect {...rect} key={index} />
|
|
36
|
-
))}
|
|
37
|
-
|
|
38
|
-
{icon.circles?.map((circle, index) => (
|
|
39
|
-
<circle {...circle} key={index} />
|
|
40
|
-
))}
|
|
41
|
-
</svg>
|
|
42
|
-
);
|
|
43
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './IconBoilerplate';
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { complexIcons } from './complexIcons';
|
|
2
|
-
import type { IComplexIcon, IIconType, ISvgIcon } from './types';
|
|
3
|
-
|
|
4
|
-
export const isComplexIcon = (type: IIconType): type is IComplexIcon => type in complexIcons;
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Эта функция позволяет корректно определить ключи в типе
|
|
8
|
-
*/
|
|
9
|
-
export const checkIcons = <P extends string>(ico: Record<P, ISvgIcon>): Record<P, ISvgIcon> => ico;
|