@true-engineering/true-react-common-ui-kit 3.41.0 → 3.42.0

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.
Files changed (101) hide show
  1. package/LICENSE +201 -201
  2. package/README.md +7 -0
  3. package/dist/components/FiltersPane/FiltersPane.stories.d.ts +2 -1
  4. package/dist/components/FiltersPane/components/FilterWrapper/FilterWrapper.styles.d.ts +1 -1
  5. package/dist/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.styles.d.ts +1 -1
  6. package/dist/components/FiltersPane/types.d.ts +1 -0
  7. package/dist/components/Input/Input.styles.d.ts +1 -1
  8. package/dist/components/SearchInput/SearchInput.stories.d.ts +1 -1
  9. package/dist/components/Select/Select.styles.d.ts +3 -3
  10. package/dist/true-react-common-ui-kit.js +74 -59
  11. package/dist/true-react-common-ui-kit.js.map +1 -1
  12. package/dist/true-react-common-ui-kit.umd.cjs +74 -59
  13. package/dist/true-react-common-ui-kit.umd.cjs.map +1 -1
  14. package/package.json +99 -98
  15. package/src/components/AccountInfo/AccountInfo.stories.tsx +32 -32
  16. package/src/components/AccountInfo/AccountInfo.tsx +80 -80
  17. package/src/components/AddButton/AddButton.stories.tsx +21 -21
  18. package/src/components/AddButton/AddButton.tsx +52 -52
  19. package/src/components/Colors/Colors.stories.tsx +7 -7
  20. package/src/components/DateInput/DateInput.tsx +90 -90
  21. package/src/components/DateInput/constants.ts +2 -2
  22. package/src/components/Description/Description.stories.tsx +27 -27
  23. package/src/components/Description/Description.tsx +61 -61
  24. package/src/components/FiltersPane/FiltersPane.stories.tsx +12 -0
  25. package/src/components/FiltersPane/components/FilterValueView/FilterValueView.tsx +166 -166
  26. package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.tsx +210 -210
  27. package/src/components/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.tsx +177 -177
  28. package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.styles.ts +4 -0
  29. package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx +20 -2
  30. package/src/components/FiltersPane/types.ts +1 -0
  31. package/src/components/Flag/Flag.stories.tsx +29 -29
  32. package/src/components/Flag/Flag.tsx +26 -26
  33. package/src/components/Flag/augment.d.ts +1 -1
  34. package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.styles.ts +25 -25
  35. package/src/components/Icon/Icon.stories.tsx +86 -86
  36. package/src/components/Icon/complexIcons/augment.d.ts +1 -1
  37. package/src/components/Icon/complexIcons/avatarGreen.svg +57 -57
  38. package/src/components/Icon/complexIcons/index.ts +1 -1
  39. package/src/components/IncrementInput/IncrementInput.tsx +105 -105
  40. package/src/components/Input/types.ts +32 -32
  41. package/src/components/Modal/Modal.stories.tsx +105 -105
  42. package/src/components/MoreMenu/MoreMenu.tsx +93 -93
  43. package/src/components/MultiSelect/MultiSelect.stories.tsx +46 -46
  44. package/src/components/MultiSelect/MultiSelect.tsx +106 -106
  45. package/src/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.tsx +53 -53
  46. package/src/components/Notification/Notification.stories.tsx +55 -55
  47. package/src/components/Notification/Notification.styles.ts +57 -57
  48. package/src/components/Notification/Notification.tsx +77 -77
  49. package/src/components/Notification/types.ts +1 -1
  50. package/src/components/NumberInput/NumberInput.tsx +137 -137
  51. package/src/components/NumberInput/index.ts +1 -1
  52. package/src/components/PhoneInput/PhoneInput.tsx +214 -214
  53. package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.tsx +155 -155
  54. package/src/components/PhoneInput/types.ts +16 -16
  55. package/src/components/RadioButton/RadioButton.stories.tsx +46 -46
  56. package/src/components/RadioButton/RadioButton.tsx +57 -57
  57. package/src/components/ScrollIntoViewIfNeeded/index.ts +1 -1
  58. package/src/components/Select/constants.ts +2 -2
  59. package/src/components/Select/types.ts +1 -1
  60. package/src/components/Selector/Selector.stories.tsx +62 -62
  61. package/src/components/Selector/Selector.tsx +115 -115
  62. package/src/components/Selector/index.ts +2 -2
  63. package/src/components/Selector/types.ts +12 -12
  64. package/src/components/Skeleton/Skeleton.stories.tsx +19 -19
  65. package/src/components/SmartInput/SmartInput.stories.tsx +52 -52
  66. package/src/components/SmartInput/SmartInput.tsx +116 -116
  67. package/src/components/SmartInput/constants.ts +91 -91
  68. package/src/components/SmartInput/helpers.ts +26 -26
  69. package/src/components/SmartInput/types.ts +18 -18
  70. package/src/components/Status/Status.stories.tsx +73 -73
  71. package/src/components/Status/Status.styles.ts +143 -143
  72. package/src/components/Status/Status.tsx +49 -49
  73. package/src/components/Status/constants.ts +11 -11
  74. package/src/components/Status/index.ts +3 -3
  75. package/src/components/Status/types.ts +5 -5
  76. package/src/components/Switch/Switch.stories.tsx +40 -40
  77. package/src/components/Switch/Switch.tsx +75 -75
  78. package/src/components/TextWithInfo/TextWithInfo.stories.tsx +53 -53
  79. package/src/components/TextWithInfo/TextWithInfo.tsx +62 -62
  80. package/src/components/TextWithTooltip/TextWithTooltip.stories.tsx +58 -58
  81. package/src/components/TextWithTooltip/TextWithTooltip.tsx +156 -156
  82. package/src/components/ThemedPreloader/ThemedPreloader.stories.tsx +41 -41
  83. package/src/components/ThemedPreloader/ThemedPreloader.tsx +54 -54
  84. package/src/components/ThemedPreloader/components/DefaultPreloader/index.ts +1 -1
  85. package/src/components/Toaster/Toaster.stories.tsx +30 -30
  86. package/src/components/Tooltip/Tooltip.stories.tsx +19 -19
  87. package/src/components/Tooltip/Tooltip.tsx +35 -35
  88. package/src/components/Tooltip/types.ts +1 -1
  89. package/src/components/WithPopup/WithPopup.styles.ts +45 -45
  90. package/src/components/WithPopup/WithPopup.tsx +184 -184
  91. package/src/components/WithTooltip/WithTooltip.stories.tsx +56 -56
  92. package/src/components/WithTooltip/WithTooltip.styles.ts +7 -7
  93. package/src/components/WithTooltip/WithTooltip.tsx +67 -67
  94. package/src/components/WithTooltip/index.ts +2 -2
  95. package/src/components/index.ts +46 -46
  96. package/src/helpers/popper-helpers.ts +17 -17
  97. package/src/hooks/use-dropdown.ts +84 -84
  98. package/src/hooks/use-is-mounted.ts +15 -15
  99. package/src/theme/helpers.ts +76 -76
  100. package/src/theme/types.ts +158 -158
  101. package/src/vite-env.d.ts +1 -1
@@ -1,41 +1,41 @@
1
- import { FC } from 'react';
2
- import { ComponentStory } from '@storybook/react';
3
- import { colors } from '../../theme';
4
- import { IThemedPreloaderProps, ThemedPreloader } from './ThemedPreloader';
5
-
6
- interface IThemedPreloaderWithCustomProps extends IThemedPreloaderProps {
7
- currentColor: string;
8
- }
9
-
10
- const ThemedPreloaderWithCustomProps: FC<IThemedPreloaderWithCustomProps> = ({
11
- currentColor,
12
- ...args
13
- }) => (
14
- <div style={{ color: currentColor }}>
15
- <ThemedPreloader {...args} />
16
- </div>
17
- );
18
-
19
- export default {
20
- title: 'Feedback/ThemedPreloader',
21
- component: ThemedPreloaderWithCustomProps,
22
- argTypes: {
23
- type: { options: ['default', 'logo', 'dots'], control: 'inline-radio' },
24
- },
25
- };
26
-
27
- const Template: ComponentStory<typeof ThemedPreloaderWithCustomProps> = (args) => (
28
- <ThemedPreloaderWithCustomProps {...args} />
29
- );
30
-
31
- export const Default = Template.bind({});
32
- Default.args = {
33
- type: 'dots',
34
- useCurrentColor: false,
35
- currentColor: colors.GREEN_FOCUS,
36
- };
37
- Default.parameters = {
38
- controls: {
39
- exclude: ['data'],
40
- },
41
- };
1
+ import { FC } from 'react';
2
+ import { ComponentStory } from '@storybook/react';
3
+ import { colors } from '../../theme';
4
+ import { IThemedPreloaderProps, ThemedPreloader } from './ThemedPreloader';
5
+
6
+ interface IThemedPreloaderWithCustomProps extends IThemedPreloaderProps {
7
+ currentColor: string;
8
+ }
9
+
10
+ const ThemedPreloaderWithCustomProps: FC<IThemedPreloaderWithCustomProps> = ({
11
+ currentColor,
12
+ ...args
13
+ }) => (
14
+ <div style={{ color: currentColor }}>
15
+ <ThemedPreloader {...args} />
16
+ </div>
17
+ );
18
+
19
+ export default {
20
+ title: 'Feedback/ThemedPreloader',
21
+ component: ThemedPreloaderWithCustomProps,
22
+ argTypes: {
23
+ type: { options: ['default', 'logo', 'dots'], control: 'inline-radio' },
24
+ },
25
+ };
26
+
27
+ const Template: ComponentStory<typeof ThemedPreloaderWithCustomProps> = (args) => (
28
+ <ThemedPreloaderWithCustomProps {...args} />
29
+ );
30
+
31
+ export const Default = Template.bind({});
32
+ Default.args = {
33
+ type: 'dots',
34
+ useCurrentColor: false,
35
+ currentColor: colors.GREEN_FOCUS,
36
+ };
37
+ Default.parameters = {
38
+ controls: {
39
+ exclude: ['data'],
40
+ },
41
+ };
@@ -1,54 +1,54 @@
1
- import { FC } from 'react';
2
- import clsx from 'clsx';
3
- import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
4
- import { addDataAttributes } from '../../helpers';
5
- import { useTweakStyles } from '../../hooks';
6
- import { ICommonProps } from '../../types';
7
- import { SvgPreloader, DotsPreloader } from './components';
8
- import { IPreloaderSvgType } from './types';
9
- import { useStyles, IThemedPreloaderStyles } from './ThemedPreloader.styles';
10
-
11
- export interface IThemedPreloaderProps extends ICommonProps<IThemedPreloaderStyles> {
12
- /** @default 'default' */
13
- type?: 'dots' | IPreloaderSvgType;
14
- /** @default false */
15
- useCurrentColor?: boolean;
16
- }
17
-
18
- export const ThemedPreloader: FC<IThemedPreloaderProps> = ({
19
- type = 'default',
20
- useCurrentColor = false,
21
- data,
22
- testId,
23
- tweakStyles,
24
- }) => {
25
- const classes = useStyles({ theme: tweakStyles });
26
-
27
- const tweakDotsPreloaderStyles = useTweakStyles({
28
- tweakStyles,
29
- className: 'tweakDotsPreloader',
30
- currentComponentName: 'ThemedPreloader',
31
- });
32
-
33
- const tweakSvgPreloaderStyles = useTweakStyles({
34
- tweakStyles,
35
- className: 'tweakSvgPreloader',
36
- currentComponentName: 'ThemedPreloader',
37
- });
38
-
39
- return (
40
- <div
41
- className={clsx(classes.root, classes[type], {
42
- [classes.currentColor]: useCurrentColor,
43
- })}
44
- {...addDataTestId(testId)}
45
- {...addDataAttributes(data)}
46
- >
47
- {type === 'dots' ? (
48
- <DotsPreloader tweakStyles={tweakDotsPreloaderStyles} />
49
- ) : (
50
- <SvgPreloader type={type} tweakStyles={tweakSvgPreloaderStyles} />
51
- )}
52
- </div>
53
- );
54
- };
1
+ import { FC } from 'react';
2
+ import clsx from 'clsx';
3
+ import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
4
+ import { addDataAttributes } from '../../helpers';
5
+ import { useTweakStyles } from '../../hooks';
6
+ import { ICommonProps } from '../../types';
7
+ import { SvgPreloader, DotsPreloader } from './components';
8
+ import { IPreloaderSvgType } from './types';
9
+ import { useStyles, IThemedPreloaderStyles } from './ThemedPreloader.styles';
10
+
11
+ export interface IThemedPreloaderProps extends ICommonProps<IThemedPreloaderStyles> {
12
+ /** @default 'default' */
13
+ type?: 'dots' | IPreloaderSvgType;
14
+ /** @default false */
15
+ useCurrentColor?: boolean;
16
+ }
17
+
18
+ export const ThemedPreloader: FC<IThemedPreloaderProps> = ({
19
+ type = 'default',
20
+ useCurrentColor = false,
21
+ data,
22
+ testId,
23
+ tweakStyles,
24
+ }) => {
25
+ const classes = useStyles({ theme: tweakStyles });
26
+
27
+ const tweakDotsPreloaderStyles = useTweakStyles({
28
+ tweakStyles,
29
+ className: 'tweakDotsPreloader',
30
+ currentComponentName: 'ThemedPreloader',
31
+ });
32
+
33
+ const tweakSvgPreloaderStyles = useTweakStyles({
34
+ tweakStyles,
35
+ className: 'tweakSvgPreloader',
36
+ currentComponentName: 'ThemedPreloader',
37
+ });
38
+
39
+ return (
40
+ <div
41
+ className={clsx(classes.root, classes[type], {
42
+ [classes.currentColor]: useCurrentColor,
43
+ })}
44
+ {...addDataTestId(testId)}
45
+ {...addDataAttributes(data)}
46
+ >
47
+ {type === 'dots' ? (
48
+ <DotsPreloader tweakStyles={tweakDotsPreloaderStyles} />
49
+ ) : (
50
+ <SvgPreloader type={type} tweakStyles={tweakSvgPreloaderStyles} />
51
+ )}
52
+ </div>
53
+ );
54
+ };
@@ -1 +1 @@
1
- export * from './DefaultPreloader';
1
+ export * from './DefaultPreloader';
@@ -1,30 +1,30 @@
1
- import { ComponentStory, ComponentMeta } from '@storybook/react';
2
- import { Button } from '../Button';
3
- import { Toaster } from './Toaster';
4
-
5
- const types = ['error', 'info', 'warning', 'ok', 'not-ok'];
6
-
7
- export default {
8
- title: 'Feedback/Toaster',
9
- component: Toaster,
10
- args: {
11
- title: 'Произошла очень страшная ошибка',
12
- text: 'Мы даже не знаем, чем вам помочь!',
13
- type: types[0],
14
- timeout: 7000,
15
- hasCloseButton: false,
16
- shouldCloseOnClick: false,
17
- },
18
- argTypes: {
19
- type: { control: 'inline-radio', options: types },
20
- },
21
- parameters: {
22
- controls: { exclude: ['onTimeEnd', 'onClose', 'data', 'tweakStyles'] },
23
- },
24
- } as ComponentMeta<typeof Toaster>;
25
-
26
- export const Default: ComponentStory<typeof Toaster> = (args) => (
27
- <Toaster {...args} onTimeEnd={() => console.log(1)} onClose={() => alert('closed')}>
28
- <Button size="m">Нажмите</Button>
29
- </Toaster>
30
- );
1
+ import { ComponentStory, ComponentMeta } from '@storybook/react';
2
+ import { Button } from '../Button';
3
+ import { Toaster } from './Toaster';
4
+
5
+ const types = ['error', 'info', 'warning', 'ok', 'not-ok'];
6
+
7
+ export default {
8
+ title: 'Feedback/Toaster',
9
+ component: Toaster,
10
+ args: {
11
+ title: 'Произошла очень страшная ошибка',
12
+ text: 'Мы даже не знаем, чем вам помочь!',
13
+ type: types[0],
14
+ timeout: 7000,
15
+ hasCloseButton: false,
16
+ shouldCloseOnClick: false,
17
+ },
18
+ argTypes: {
19
+ type: { control: 'inline-radio', options: types },
20
+ },
21
+ parameters: {
22
+ controls: { exclude: ['onTimeEnd', 'onClose', 'data', 'tweakStyles'] },
23
+ },
24
+ } as ComponentMeta<typeof Toaster>;
25
+
26
+ export const Default: ComponentStory<typeof Toaster> = (args) => (
27
+ <Toaster {...args} onTimeEnd={() => console.log(1)} onClose={() => alert('closed')}>
28
+ <Button size="m">Нажмите</Button>
29
+ </Toaster>
30
+ );
@@ -1,19 +1,19 @@
1
- import { ComponentStory, ComponentMeta } from '@storybook/react';
2
- import { Tooltip } from './Tooltip';
3
-
4
- export default {
5
- title: 'Data Display/Tooltip',
6
- component: Tooltip,
7
- args: {
8
- text: 'Tooltip Text',
9
- view: 'tooltip',
10
- type: 'info',
11
- },
12
- argTypes: {
13
- text: { control: 'text' },
14
- view: { control: 'inline-radio', options: ['tooltip', 'hint'] },
15
- type: { control: 'inline-radio', options: ['info', 'error'] },
16
- },
17
- } as ComponentMeta<typeof Tooltip>;
18
-
19
- export const Default: ComponentStory<typeof Tooltip> = (args) => <Tooltip {...args} />;
1
+ import { ComponentStory, ComponentMeta } from '@storybook/react';
2
+ import { Tooltip } from './Tooltip';
3
+
4
+ export default {
5
+ title: 'Data Display/Tooltip',
6
+ component: Tooltip,
7
+ args: {
8
+ text: 'Tooltip Text',
9
+ view: 'tooltip',
10
+ type: 'info',
11
+ },
12
+ argTypes: {
13
+ text: { control: 'text' },
14
+ view: { control: 'inline-radio', options: ['tooltip', 'hint'] },
15
+ type: { control: 'inline-radio', options: ['info', 'error'] },
16
+ },
17
+ } as ComponentMeta<typeof Tooltip>;
18
+
19
+ export const Default: ComponentStory<typeof Tooltip> = (args) => <Tooltip {...args} />;
@@ -1,35 +1,35 @@
1
- import { FC, ReactNode } from 'react';
2
- import clsx from 'clsx';
3
- import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
4
- import { addDataAttributes } from '../../helpers';
5
- import { ICommonProps } from '../../types';
6
- import { useStyles, ITooltipStyles } from './Tooltip.styles';
7
-
8
- export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
9
- text: ReactNode;
10
- /** @default 'tooltip' */
11
- view?: 'tooltip' | 'hint';
12
- /** @default 'info' */
13
- type?: 'info' | 'error';
14
- }
15
-
16
- export const Tooltip: FC<ITooltipProps> = ({
17
- text,
18
- view = 'tooltip',
19
- type = 'info',
20
- data,
21
- testId,
22
- tweakStyles,
23
- }) => {
24
- const classes = useStyles({ theme: tweakStyles });
25
-
26
- return (
27
- <div
28
- className={clsx(classes.root, classes[view], classes[type])}
29
- {...addDataTestId(testId)}
30
- {...addDataAttributes(data)}
31
- >
32
- {text}
33
- </div>
34
- );
35
- };
1
+ import { FC, ReactNode } from 'react';
2
+ import clsx from 'clsx';
3
+ import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
4
+ import { addDataAttributes } from '../../helpers';
5
+ import { ICommonProps } from '../../types';
6
+ import { useStyles, ITooltipStyles } from './Tooltip.styles';
7
+
8
+ export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
9
+ text: ReactNode;
10
+ /** @default 'tooltip' */
11
+ view?: 'tooltip' | 'hint';
12
+ /** @default 'info' */
13
+ type?: 'info' | 'error';
14
+ }
15
+
16
+ export const Tooltip: FC<ITooltipProps> = ({
17
+ text,
18
+ view = 'tooltip',
19
+ type = 'info',
20
+ data,
21
+ testId,
22
+ tweakStyles,
23
+ }) => {
24
+ const classes = useStyles({ theme: tweakStyles });
25
+
26
+ return (
27
+ <div
28
+ className={clsx(classes.root, classes[view], classes[type])}
29
+ {...addDataTestId(testId)}
30
+ {...addDataAttributes(data)}
31
+ >
32
+ {text}
33
+ </div>
34
+ );
35
+ };
@@ -1 +1 @@
1
- export type ITooltipType = 'info' | 'warning';
1
+ export type ITooltipType = 'info' | 'warning';
@@ -1,45 +1,45 @@
1
- import { createThemedStyles, ITweakStyles } from '../../theme';
2
-
3
- export const useStyles = createThemedStyles('WithPopup', {
4
- trigger: {
5
- width: 'fit-content',
6
- },
7
-
8
- clickable: {
9
- cursor: 'pointer',
10
- },
11
-
12
- active: {},
13
-
14
- disabled: {
15
- cursor: 'auto',
16
- },
17
-
18
- popup: {
19
- zIndex: 5,
20
- outline: 'none',
21
- },
22
-
23
- animationEnd: {},
24
-
25
- animationStart: {},
26
-
27
- 'dropdown-initial': {
28
- extend: 'animationEnd',
29
- },
30
-
31
- 'dropdown-open': {
32
- extend: 'animationStart',
33
- },
34
-
35
- 'dropdown-close': {
36
- visibility: 'hidden',
37
- extend: 'animationEnd',
38
- },
39
-
40
- 'dropdown-unmounted': {
41
- extend: 'animationEnd',
42
- },
43
- });
44
-
45
- export type IWithPopupStyles = ITweakStyles<typeof useStyles>;
1
+ import { createThemedStyles, ITweakStyles } from '../../theme';
2
+
3
+ export const useStyles = createThemedStyles('WithPopup', {
4
+ trigger: {
5
+ width: 'fit-content',
6
+ },
7
+
8
+ clickable: {
9
+ cursor: 'pointer',
10
+ },
11
+
12
+ active: {},
13
+
14
+ disabled: {
15
+ cursor: 'auto',
16
+ },
17
+
18
+ popup: {
19
+ zIndex: 5,
20
+ outline: 'none',
21
+ },
22
+
23
+ animationEnd: {},
24
+
25
+ animationStart: {},
26
+
27
+ 'dropdown-initial': {
28
+ extend: 'animationEnd',
29
+ },
30
+
31
+ 'dropdown-open': {
32
+ extend: 'animationStart',
33
+ },
34
+
35
+ 'dropdown-close': {
36
+ visibility: 'hidden',
37
+ extend: 'animationEnd',
38
+ },
39
+
40
+ 'dropdown-unmounted': {
41
+ extend: 'animationEnd',
42
+ },
43
+ });
44
+
45
+ export type IWithPopupStyles = ITweakStyles<typeof useStyles>;