@true-engineering/true-react-common-ui-kit 2.6.0 → 2.7.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.
- package/LICENSE +201 -201
- package/README.md +26 -0
- package/dist/components/Flag/augment.d.ts +1 -1
- package/dist/components/Icon/complexIcons/augment.d.ts +1 -1
- package/dist/components/Icon/icons-list.d.ts +1 -1
- package/dist/components/List/List.d.ts +1 -1
- package/dist/components/List/List.styles.d.ts +0 -28
- package/dist/components/List/index.d.ts +0 -1
- package/dist/components/ListItem/ListItem.d.ts +6 -0
- package/dist/components/ListItem/ListItem.styles.d.ts +35 -0
- package/dist/components/ListItem/constants.d.ts +1 -0
- package/dist/components/ListItem/index.d.ts +3 -0
- package/dist/components/{List → ListItem}/types.d.ts +5 -0
- package/dist/components/MoreMenu/MoreMenu.d.ts +2 -2
- package/dist/components/index.d.ts +1 -0
- package/dist/helpers/index.d.ts +1 -0
- package/dist/true-react-common-ui-kit.js +231 -131
- package/dist/true-react-common-ui-kit.js.map +1 -1
- package/dist/true-react-common-ui-kit.umd.cjs +232 -132
- package/dist/true-react-common-ui-kit.umd.cjs.map +1 -1
- package/dist/types.d.ts +1 -1
- package/dist/vite-env.d.ts +1 -1
- package/package.json +93 -93
- package/src/components/AccountInfo/AccountInfo.stories.tsx +32 -32
- package/src/components/AccountInfo/AccountInfo.styles.ts +55 -55
- package/src/components/AccountInfo/AccountInfo.tsx +76 -76
- package/src/components/AccountInfo/constants.ts +1 -1
- package/src/components/AccountInfo/index.ts +2 -2
- package/src/components/AddButton/AddButton.stories.tsx +21 -21
- package/src/components/AddButton/AddButton.styles.ts +34 -34
- package/src/components/AddButton/AddButton.tsx +48 -48
- package/src/components/AddButton/index.ts +2 -2
- package/src/components/Button/Button.stories.tsx +56 -56
- package/src/components/Button/Button.styles.ts +196 -196
- package/src/components/Button/Button.tsx +153 -154
- package/src/components/Button/constants.ts +9 -9
- package/src/components/Button/index.ts +3 -3
- package/src/components/Button/types.ts +5 -5
- package/src/components/Checkbox/Checkbox.stories.tsx +32 -32
- package/src/components/Checkbox/Checkbox.styles.ts +62 -62
- package/src/components/Checkbox/Checkbox.tsx +105 -105
- package/src/components/Checkbox/index.ts +2 -2
- package/src/components/CloseButton/CloseButton.styles.ts +34 -34
- package/src/components/CloseButton/CloseButton.tsx +35 -35
- package/src/components/CloseButton/index.ts +2 -2
- package/src/components/Colors/Colors.stories.tsx +7 -7
- package/src/components/Colors/Colors.styles.ts +38 -38
- package/src/components/Colors/Colors.tsx +26 -26
- package/src/components/Colors/index.ts +2 -2
- package/src/components/CssBaseline/CssBaseline.styles.ts +15 -15
- package/src/components/CssBaseline/CssBaseline.tsx +15 -15
- package/src/components/CssBaseline/index.ts +2 -2
- package/src/components/DateInput/DateInput.stories.tsx +61 -61
- package/src/components/DateInput/DateInput.styles.ts +14 -14
- package/src/components/DateInput/DateInput.tsx +82 -82
- package/src/components/DateInput/constants.ts +2 -2
- package/src/components/DateInput/index.ts +3 -3
- package/src/components/DatePicker/DatePicker.stories.tsx +87 -87
- package/src/components/DatePicker/DatePicker.styles.ts +44 -44
- package/src/components/DatePicker/DatePicker.tsx +309 -309
- package/src/components/DatePicker/components/DatePickerHeader/DatePickerHeader.styles.ts +84 -84
- package/src/components/DatePicker/components/DatePickerHeader/DatePickerHeader.tsx +79 -79
- package/src/components/DatePicker/components/DatePickerHeader/index.ts +2 -2
- package/src/components/DatePicker/components/PopperContainer/PopperContainer.tsx +6 -6
- package/src/components/DatePicker/components/PopperContainer/index.ts +1 -1
- package/src/components/DatePicker/components/index.ts +2 -2
- package/src/components/DatePicker/constants.ts +6 -6
- package/src/components/DatePicker/helpers.ts +23 -23
- package/src/components/DatePicker/index.ts +4 -4
- package/src/components/DatePicker/types.ts +45 -45
- package/src/components/Description/Description.stories.tsx +27 -27
- package/src/components/Description/Description.styles.ts +31 -31
- package/src/components/Description/Description.tsx +59 -59
- package/src/components/Description/constants.ts +1 -1
- package/src/components/Description/index.ts +2 -2
- package/src/components/FiltersPane/FiltersPane.stories.tsx +295 -295
- package/src/components/FiltersPane/FiltersPane.styles.ts +71 -71
- package/src/components/FiltersPane/FiltersPane.tsx +150 -150
- package/src/components/FiltersPane/components/Filter/Filter.tsx +203 -203
- package/src/components/FiltersPane/components/Filter/index.ts +1 -1
- package/src/components/FiltersPane/components/FilterInterval/FilterInterval.styles.ts +64 -64
- package/src/components/FiltersPane/components/FilterInterval/FilterInterval.tsx +141 -141
- package/src/components/FiltersPane/components/FilterInterval/index.ts +2 -2
- package/src/components/FiltersPane/components/FilterMultiSelect/FilterMultiSelect.tsx +10 -10
- package/src/components/FiltersPane/components/FilterMultiSelect/index.ts +1 -1
- package/src/components/FiltersPane/components/FilterSelect/FilterSelect.styles.ts +143 -143
- package/src/components/FiltersPane/components/FilterSelect/FilterSelect.tsx +346 -346
- package/src/components/FiltersPane/components/FilterSelect/index.ts +2 -2
- package/src/components/FiltersPane/components/FilterValueView/FilterValueView.styles.tsx +15 -15
- package/src/components/FiltersPane/components/FilterValueView/FilterValueView.tsx +163 -163
- package/src/components/FiltersPane/components/FilterValueView/index.tsx +2 -2
- package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.styles.ts +60 -60
- package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.tsx +181 -181
- package/src/components/FiltersPane/components/FilterWithDates/index.ts +2 -2
- package/src/components/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.styles.ts +17 -17
- package/src/components/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.tsx +174 -174
- package/src/components/FiltersPane/components/FilterWithPeriod/index.ts +2 -2
- package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.styles.ts +110 -110
- package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx +149 -149
- package/src/components/FiltersPane/components/FilterWrapper/index.ts +2 -2
- package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.styles.ts +109 -109
- package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.tsx +155 -155
- package/src/components/FiltersPane/components/FiltersPaneSearch/index.ts +2 -2
- package/src/components/FiltersPane/components/index.ts +9 -9
- package/src/components/FiltersPane/constants.ts +137 -137
- package/src/components/FiltersPane/helpers.ts +26 -26
- package/src/components/FiltersPane/index.ts +5 -5
- package/src/components/FiltersPane/types.ts +156 -156
- package/src/components/Flag/Flag.stories.tsx +29 -29
- package/src/components/Flag/Flag.styles.ts +18 -18
- package/src/components/Flag/Flag.tsx +27 -27
- package/src/components/Flag/augment.d.ts +1 -1
- package/src/components/Flag/index.ts +2 -2
- package/src/components/FlexibleTable/FlexibleTable.stories.tsx +338 -338
- package/src/components/FlexibleTable/FlexibleTable.styles.ts +131 -131
- package/src/components/FlexibleTable/FlexibleTable.tsx +205 -205
- package/src/components/FlexibleTable/components/TableRow/TableRow.tsx +152 -152
- package/src/components/FlexibleTable/components/TableRow/index.ts +1 -1
- package/src/components/FlexibleTable/components/TableValue/TableValue.tsx +74 -74
- package/src/components/FlexibleTable/components/TableValue/index.ts +1 -1
- package/src/components/FlexibleTable/components/index.ts +2 -2
- package/src/components/FlexibleTable/constants.ts +1 -1
- package/src/components/FlexibleTable/index.ts +3 -3
- package/src/components/FlexibleTable/types.ts +52 -52
- package/src/components/Icon/Icon.stories.tsx +86 -86
- package/src/components/Icon/Icon.styles.ts +10 -10
- package/src/components/Icon/Icon.tsx +27 -27
- package/src/components/Icon/complexIcons/augment.d.ts +1 -1
- package/src/components/Icon/complexIcons/avatarGreen.svg +57 -57
- package/src/components/Icon/complexIcons/icons.ts +5 -5
- package/src/components/Icon/complexIcons/index.ts +1 -1
- package/src/components/Icon/components/ComplexIconBoilerplate/ComplexIconBoilerplate.tsx +16 -16
- package/src/components/Icon/components/ComplexIconBoilerplate/index.ts +1 -1
- package/src/components/Icon/components/IconBolerplate/IconBoilerplate.tsx +43 -43
- package/src/components/Icon/components/IconBolerplate/index.ts +1 -1
- package/src/components/Icon/components/index.ts +2 -2
- package/src/components/Icon/helpers.ts +9 -9
- package/src/components/Icon/icons-list.ts +856 -826
- package/src/components/Icon/index.ts +4 -4
- package/src/components/Icon/types.ts +16 -16
- package/src/components/IncrementInput/IncrementInput.stories.tsx +31 -31
- package/src/components/IncrementInput/IncrementInput.styles.ts +77 -77
- package/src/components/IncrementInput/IncrementInput.tsx +80 -80
- package/src/components/IncrementInput/components/ChangeButton/ChangeButton.tsx +33 -33
- package/src/components/IncrementInput/components/ChangeButton/index.ts +1 -1
- package/src/components/IncrementInput/components/index.ts +1 -1
- package/src/components/IncrementInput/index.ts +2 -2
- package/src/components/Input/Input.stories.tsx +86 -86
- package/src/components/Input/Input.styles.ts +307 -307
- package/src/components/Input/Input.tsx +308 -309
- package/src/components/Input/constants.ts +1 -1
- package/src/components/Input/index.ts +3 -3
- package/src/components/Input/types.ts +6 -6
- package/src/components/List/List.stories.tsx +63 -63
- package/src/components/List/List.styles.ts +14 -52
- package/src/components/List/List.tsx +36 -54
- package/src/components/List/index.ts +2 -3
- package/src/components/ListItem/ListItem.stories.tsx +67 -0
- package/src/components/ListItem/ListItem.styles.ts +48 -0
- package/src/components/ListItem/ListItem.tsx +44 -0
- package/src/components/ListItem/constants.ts +5 -0
- package/src/components/ListItem/index.ts +3 -0
- package/src/components/{List → ListItem}/types.ts +19 -13
- package/src/components/Modal/Modal.stories.tsx +105 -105
- package/src/components/Modal/Modal.styles.ts +305 -305
- package/src/components/Modal/Modal.tsx +184 -184
- package/src/components/Modal/index.ts +3 -3
- package/src/components/Modal/types.ts +17 -17
- package/src/components/MoreMenu/MoreMenu.stories.tsx +46 -46
- package/src/components/MoreMenu/MoreMenu.styles.ts +70 -70
- package/src/components/MoreMenu/MoreMenu.tsx +90 -90
- package/src/components/MoreMenu/index.ts +2 -2
- package/src/components/MultiSelect/MultiSelect.stories.tsx +46 -46
- package/src/components/MultiSelect/MultiSelect.styles.ts +55 -55
- package/src/components/MultiSelect/MultiSelect.tsx +92 -92
- package/src/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.styles.ts +73 -73
- package/src/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.tsx +51 -51
- package/src/components/MultiSelect/components/MultiSelectInput/index.ts +2 -2
- package/src/components/MultiSelect/components/index.ts +1 -1
- package/src/components/MultiSelect/index.ts +4 -4
- package/src/components/MultiSelect/types.ts +1 -1
- package/src/components/MultiSelectList/MultiSelectList.styles.ts +124 -124
- package/src/components/MultiSelectList/MultiSelectList.tsx +441 -441
- package/src/components/MultiSelectList/constants.ts +21 -21
- package/src/components/MultiSelectList/helpers.ts +11 -11
- package/src/components/MultiSelectList/index.ts +3 -3
- package/src/components/MultiSelectList/types.ts +15 -15
- package/src/components/Notification/Notification.stories.tsx +46 -46
- package/src/components/Notification/Notification.styles.ts +50 -50
- package/src/components/Notification/Notification.tsx +78 -78
- package/src/components/Notification/index.ts +3 -3
- package/src/components/Notification/types.ts +1 -1
- package/src/components/NumberInput/NumberInput.stories.tsx +35 -35
- package/src/components/NumberInput/NumberInput.tsx +133 -133
- package/src/components/NumberInput/helpers.ts +86 -86
- package/src/components/NumberInput/index.ts +1 -1
- package/src/components/PhoneInput/PhoneInput.stories.tsx +70 -70
- package/src/components/PhoneInput/PhoneInput.styles.ts +84 -84
- package/src/components/PhoneInput/PhoneInput.tsx +193 -193
- package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.stories.tsx +21 -21
- package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.styles.ts +100 -100
- package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.tsx +145 -145
- package/src/components/PhoneInput/components/PhoneInputCountryList/index.ts +2 -2
- package/src/components/PhoneInput/components/index.ts +1 -1
- package/src/components/PhoneInput/constants.ts +3 -3
- package/src/components/PhoneInput/index.ts +5 -5
- package/src/components/PhoneInput/phone-info.ts +2147 -2147
- package/src/components/PhoneInput/types.ts +16 -16
- package/src/components/RadioButton/RadioButton.stories.tsx +46 -46
- package/src/components/RadioButton/RadioButton.styles.ts +37 -37
- package/src/components/RadioButton/RadioButton.tsx +55 -55
- package/src/components/RadioButton/index.ts +2 -2
- package/src/components/ScrollIntoViewIfNeeded/ScrollIntoViewIfNeeded.ts +54 -54
- package/src/components/ScrollIntoViewIfNeeded/constants.ts +12 -12
- package/src/components/ScrollIntoViewIfNeeded/index.ts +1 -1
- package/src/components/SearchInput/SearchInput.stories.tsx +23 -23
- package/src/components/SearchInput/SearchInput.styles.ts +50 -50
- package/src/components/SearchInput/SearchInput.tsx +51 -51
- package/src/components/SearchInput/index.ts +2 -2
- package/src/components/Select/MultiSelect.stories.tsx +240 -240
- package/src/components/Select/Select.stories.tsx +235 -235
- package/src/components/Select/Select.styles.ts +96 -96
- package/src/components/Select/Select.tsx +574 -575
- package/src/components/Select/components/SelectList/SelectList.styles.ts +72 -72
- package/src/components/Select/components/SelectList/SelectList.tsx +158 -158
- package/src/components/Select/components/SelectList/index.ts +2 -2
- package/src/components/Select/components/SelectListItem/SelectListItem.styles.ts +14 -14
- package/src/components/Select/components/SelectListItem/SelectListItem.tsx +68 -68
- package/src/components/Select/components/SelectListItem/index.ts +1 -1
- package/src/components/Select/components/index.ts +2 -2
- package/src/components/Select/constants.ts +2 -2
- package/src/components/Select/helpers.ts +26 -26
- package/src/components/Select/index.ts +4 -4
- package/src/components/Select/types.ts +1 -1
- package/src/components/SmartInput/SmartInput.stories.tsx +51 -51
- package/src/components/SmartInput/SmartInput.tsx +124 -124
- package/src/components/SmartInput/constants.ts +84 -84
- package/src/components/SmartInput/helpers.ts +13 -13
- package/src/components/SmartInput/index.ts +2 -2
- package/src/components/SmartInput/types.ts +11 -11
- package/src/components/Switch/Switch.stories.tsx +40 -40
- package/src/components/Switch/Switch.styles.ts +75 -75
- package/src/components/Switch/Switch.tsx +79 -79
- package/src/components/Switch/index.ts +3 -3
- package/src/components/Switch/types.ts +4 -4
- package/src/components/TextArea/TextArea.stories.tsx +35 -35
- package/src/components/TextArea/TextArea.styles.ts +153 -153
- package/src/components/TextArea/TextArea.tsx +174 -174
- package/src/components/TextArea/index.ts +2 -2
- package/src/components/TextWithInfo/TextWithInfo.stories.tsx +53 -53
- package/src/components/TextWithInfo/TextWithInfo.styles.ts +60 -60
- package/src/components/TextWithInfo/TextWithInfo.tsx +60 -60
- package/src/components/TextWithInfo/index.ts +2 -2
- package/src/components/TextWithTooltip/TextWithTooltip.stories.tsx +58 -58
- package/src/components/TextWithTooltip/TextWithTooltip.styles.ts +19 -19
- package/src/components/TextWithTooltip/TextWithTooltip.tsx +143 -143
- package/src/components/TextWithTooltip/index.ts +2 -2
- package/src/components/ThemedPreloader/ThemedPreloader.stories.tsx +41 -41
- package/src/components/ThemedPreloader/ThemedPreloader.styles.ts +21 -21
- package/src/components/ThemedPreloader/ThemedPreloader.tsx +47 -47
- package/src/components/ThemedPreloader/components/DefaultPreloader/DefaultPreloader.tsx +29 -29
- package/src/components/ThemedPreloader/components/DefaultPreloader/index.ts +1 -1
- package/src/components/ThemedPreloader/components/DotsPreloader/DotsPreloader.styles.ts +54 -54
- package/src/components/ThemedPreloader/components/DotsPreloader/DotsPreloader.tsx +18 -18
- package/src/components/ThemedPreloader/components/DotsPreloader/index.ts +2 -2
- package/src/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.styles.ts +11 -11
- package/src/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.tsx +25 -25
- package/src/components/ThemedPreloader/components/SvgPreloader/index.ts +2 -2
- package/src/components/ThemedPreloader/components/index.ts +3 -3
- package/src/components/ThemedPreloader/constants.ts +1 -1
- package/src/components/ThemedPreloader/index.ts +4 -4
- package/src/components/ThemedPreloader/types.ts +3 -3
- package/src/components/Toaster/Toaster.stories.tsx +30 -30
- package/src/components/Toaster/Toaster.styles.ts +59 -59
- package/src/components/Toaster/Toaster.tsx +108 -108
- package/src/components/Toaster/constants.ts +1 -1
- package/src/components/Toaster/index.ts +3 -3
- package/src/components/Toaster/types.ts +1 -1
- package/src/components/Tooltip/Tooltip.stories.tsx +19 -19
- package/src/components/Tooltip/Tooltip.styles.ts +45 -45
- package/src/components/Tooltip/Tooltip.tsx +35 -35
- package/src/components/Tooltip/index.ts +3 -3
- package/src/components/Tooltip/types.ts +1 -1
- package/src/components/index.ts +37 -36
- package/src/helpers/deprecated.ts +23 -23
- package/src/helpers/index.ts +5 -4
- package/src/helpers/misc.ts +158 -158
- package/src/helpers/phone.ts +87 -87
- package/src/helpers/popper-helpers.ts +17 -17
- package/src/helpers/snippets.tsx +6 -6
- package/src/hooks/index.ts +6 -6
- package/src/hooks/use-did-mount-effect.ts +18 -18
- package/src/hooks/use-dropdown.ts +82 -82
- package/src/hooks/use-is-mounted.ts +15 -15
- package/src/hooks/use-on-click-outside.ts +77 -77
- package/src/hooks/use-theme.ts +32 -32
- package/src/hooks/use-tweak-styles.ts +13 -13
- package/src/index.ts +6 -6
- package/src/theme.ts +149 -149
- package/src/types.ts +109 -108
- package/src/vite-env.d.ts +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export * from './Toaster';
|
|
2
|
-
export * from './types';
|
|
3
|
-
export type { ToasterStyles } from './Toaster.styles';
|
|
1
|
+
export * from './Toaster';
|
|
2
|
+
export * from './types';
|
|
3
|
+
export type { ToasterStyles } from './Toaster.styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type ToasterType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';
|
|
1
|
+
export type ToasterType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
2
|
-
import { Tooltip } from './Tooltip';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: '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: '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,45 +1,45 @@
|
|
|
1
|
-
import { rgba } from '../../helpers';
|
|
2
|
-
import { colors, dimensions } from '../../theme';
|
|
3
|
-
import { ComponentStyles } from '../../types';
|
|
4
|
-
import { ITooltipProps } from './Tooltip';
|
|
5
|
-
|
|
6
|
-
interface IStyleProps {
|
|
7
|
-
type: NonNullable<ITooltipProps['type']>;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export const styles = {
|
|
11
|
-
root: {
|
|
12
|
-
display: 'inline-block',
|
|
13
|
-
boxSizing: 'border-box',
|
|
14
|
-
},
|
|
15
|
-
|
|
16
|
-
tooltip: {
|
|
17
|
-
fontSize: 14,
|
|
18
|
-
padding: [18, 20],
|
|
19
|
-
letterSpacing: 0.15,
|
|
20
|
-
backgroundColor: ({ type }: IStyleProps): string =>
|
|
21
|
-
type === 'error' ? colors.RED_WARNING : colors.CLASSIC_WHITE,
|
|
22
|
-
color: ({ type }: IStyleProps): string =>
|
|
23
|
-
type === 'error' ? colors.CLASSIC_WHITE : colors.FONT_MAIN,
|
|
24
|
-
boxShadow: `0 0 1px ${rgba(colors.FONT_MAIN, 0.4)}, 0 -2px 6px ${rgba(
|
|
25
|
-
colors.FONT_MAIN,
|
|
26
|
-
0.06,
|
|
27
|
-
)}, 0 8px 32px -8px ${rgba(colors.FONT_MAIN, 0.3)}`,
|
|
28
|
-
borderRadius: 12,
|
|
29
|
-
lineHeight: 1.4,
|
|
30
|
-
maxWidth: 320,
|
|
31
|
-
},
|
|
32
|
-
|
|
33
|
-
hint: {
|
|
34
|
-
whiteSpace: 'nowrap',
|
|
35
|
-
fontSize: 12,
|
|
36
|
-
padding: [8, 12],
|
|
37
|
-
borderRadius: dimensions.BORDER_RADIUS_SMALL,
|
|
38
|
-
backgroundColor: ({ type }: { type: ITooltipProps['type'] }): string =>
|
|
39
|
-
type === 'error' ? colors.RED_WARNING : colors.FONT_MEDIUM,
|
|
40
|
-
color: colors.CLASSIC_WHITE,
|
|
41
|
-
letterSpacing: 0.2,
|
|
42
|
-
},
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
export type TooltipStyles = ComponentStyles<typeof styles, IStyleProps>;
|
|
1
|
+
import { rgba } from '../../helpers';
|
|
2
|
+
import { colors, dimensions } from '../../theme';
|
|
3
|
+
import { ComponentStyles } from '../../types';
|
|
4
|
+
import { ITooltipProps } from './Tooltip';
|
|
5
|
+
|
|
6
|
+
interface IStyleProps {
|
|
7
|
+
type: NonNullable<ITooltipProps['type']>;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export const styles = {
|
|
11
|
+
root: {
|
|
12
|
+
display: 'inline-block',
|
|
13
|
+
boxSizing: 'border-box',
|
|
14
|
+
},
|
|
15
|
+
|
|
16
|
+
tooltip: {
|
|
17
|
+
fontSize: 14,
|
|
18
|
+
padding: [18, 20],
|
|
19
|
+
letterSpacing: 0.15,
|
|
20
|
+
backgroundColor: ({ type }: IStyleProps): string =>
|
|
21
|
+
type === 'error' ? colors.RED_WARNING : colors.CLASSIC_WHITE,
|
|
22
|
+
color: ({ type }: IStyleProps): string =>
|
|
23
|
+
type === 'error' ? colors.CLASSIC_WHITE : colors.FONT_MAIN,
|
|
24
|
+
boxShadow: `0 0 1px ${rgba(colors.FONT_MAIN, 0.4)}, 0 -2px 6px ${rgba(
|
|
25
|
+
colors.FONT_MAIN,
|
|
26
|
+
0.06,
|
|
27
|
+
)}, 0 8px 32px -8px ${rgba(colors.FONT_MAIN, 0.3)}`,
|
|
28
|
+
borderRadius: 12,
|
|
29
|
+
lineHeight: 1.4,
|
|
30
|
+
maxWidth: 320,
|
|
31
|
+
},
|
|
32
|
+
|
|
33
|
+
hint: {
|
|
34
|
+
whiteSpace: 'nowrap',
|
|
35
|
+
fontSize: 12,
|
|
36
|
+
padding: [8, 12],
|
|
37
|
+
borderRadius: dimensions.BORDER_RADIUS_SMALL,
|
|
38
|
+
backgroundColor: ({ type }: { type: ITooltipProps['type'] }): string =>
|
|
39
|
+
type === 'error' ? colors.RED_WARNING : colors.FONT_MEDIUM,
|
|
40
|
+
color: colors.CLASSIC_WHITE,
|
|
41
|
+
letterSpacing: 0.2,
|
|
42
|
+
},
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export type TooltipStyles = ComponentStyles<typeof styles, IStyleProps>;
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
import { FC, ReactNode } from 'react';
|
|
2
|
-
import clsx from 'clsx';
|
|
3
|
-
import { addDataAttributes } from '../../helpers';
|
|
4
|
-
import { useTheme } from '../../hooks';
|
|
5
|
-
import { ICommonProps } from '../../types';
|
|
6
|
-
import { styles, TooltipStyles } from './Tooltip.styles';
|
|
7
|
-
|
|
8
|
-
export interface ITooltipProps extends ICommonProps {
|
|
9
|
-
tweakStyles?: TooltipStyles;
|
|
10
|
-
text: ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* @default `tooltip`
|
|
13
|
-
*/
|
|
14
|
-
view?: 'tooltip' | 'hint';
|
|
15
|
-
/**
|
|
16
|
-
* @default `info`
|
|
17
|
-
*/
|
|
18
|
-
type?: 'info' | 'error';
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export const Tooltip: FC<ITooltipProps> = ({
|
|
22
|
-
text,
|
|
23
|
-
view = 'tooltip',
|
|
24
|
-
type = 'info',
|
|
25
|
-
data,
|
|
26
|
-
tweakStyles,
|
|
27
|
-
}) => {
|
|
28
|
-
const { classes } = useTheme('Tooltip', styles, tweakStyles, { type });
|
|
29
|
-
|
|
30
|
-
return (
|
|
31
|
-
<div className={clsx(classes.root, classes[view])} {...addDataAttributes(data)}>
|
|
32
|
-
{text}
|
|
33
|
-
</div>
|
|
34
|
-
);
|
|
35
|
-
};
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { addDataAttributes } from '../../helpers';
|
|
4
|
+
import { useTheme } from '../../hooks';
|
|
5
|
+
import { ICommonProps } from '../../types';
|
|
6
|
+
import { styles, TooltipStyles } from './Tooltip.styles';
|
|
7
|
+
|
|
8
|
+
export interface ITooltipProps extends ICommonProps {
|
|
9
|
+
tweakStyles?: TooltipStyles;
|
|
10
|
+
text: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* @default `tooltip`
|
|
13
|
+
*/
|
|
14
|
+
view?: 'tooltip' | 'hint';
|
|
15
|
+
/**
|
|
16
|
+
* @default `info`
|
|
17
|
+
*/
|
|
18
|
+
type?: 'info' | 'error';
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export const Tooltip: FC<ITooltipProps> = ({
|
|
22
|
+
text,
|
|
23
|
+
view = 'tooltip',
|
|
24
|
+
type = 'info',
|
|
25
|
+
data,
|
|
26
|
+
tweakStyles,
|
|
27
|
+
}) => {
|
|
28
|
+
const { classes } = useTheme('Tooltip', styles, tweakStyles, { type });
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<div className={clsx(classes.root, classes[view])} {...addDataAttributes(data)}>
|
|
32
|
+
{text}
|
|
33
|
+
</div>
|
|
34
|
+
);
|
|
35
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export * from './Tooltip';
|
|
2
|
-
export * from './types';
|
|
3
|
-
export type { TooltipStyles } from './Tooltip.styles';
|
|
1
|
+
export * from './Tooltip';
|
|
2
|
+
export * from './types';
|
|
3
|
+
export type { TooltipStyles } from './Tooltip.styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type ITooltipType = 'info' | 'warning';
|
|
1
|
+
export type ITooltipType = 'info' | 'warning';
|
package/src/components/index.ts
CHANGED
|
@@ -1,36 +1,37 @@
|
|
|
1
|
-
export * from './AccountInfo';
|
|
2
|
-
export * from './AddButton';
|
|
3
|
-
export * from './Button';
|
|
4
|
-
export * from './Checkbox';
|
|
5
|
-
export * from './CloseButton';
|
|
6
|
-
export * from './Colors';
|
|
7
|
-
export * from './CssBaseline';
|
|
8
|
-
export * from './DateInput';
|
|
9
|
-
export * from './DatePicker';
|
|
10
|
-
export * from './Description';
|
|
11
|
-
export * from './FiltersPane';
|
|
12
|
-
export * from './Flag';
|
|
13
|
-
export * from './FlexibleTable';
|
|
14
|
-
export * from './Icon';
|
|
15
|
-
export * from './IncrementInput';
|
|
16
|
-
export * from './Input';
|
|
17
|
-
export * from './List';
|
|
18
|
-
export * from './
|
|
19
|
-
export * from './
|
|
20
|
-
export * from './
|
|
21
|
-
export * from './
|
|
22
|
-
export * from './
|
|
23
|
-
export * from './
|
|
24
|
-
export * from './
|
|
25
|
-
export * from './
|
|
26
|
-
export * from './
|
|
27
|
-
export * from './
|
|
28
|
-
export * from './
|
|
29
|
-
export * from './
|
|
30
|
-
export * from './
|
|
31
|
-
export * from './
|
|
32
|
-
export * from './
|
|
33
|
-
export * from './
|
|
34
|
-
export * from './
|
|
35
|
-
export * from './
|
|
36
|
-
export * from './
|
|
1
|
+
export * from './AccountInfo';
|
|
2
|
+
export * from './AddButton';
|
|
3
|
+
export * from './Button';
|
|
4
|
+
export * from './Checkbox';
|
|
5
|
+
export * from './CloseButton';
|
|
6
|
+
export * from './Colors';
|
|
7
|
+
export * from './CssBaseline';
|
|
8
|
+
export * from './DateInput';
|
|
9
|
+
export * from './DatePicker';
|
|
10
|
+
export * from './Description';
|
|
11
|
+
export * from './FiltersPane';
|
|
12
|
+
export * from './Flag';
|
|
13
|
+
export * from './FlexibleTable';
|
|
14
|
+
export * from './Icon';
|
|
15
|
+
export * from './IncrementInput';
|
|
16
|
+
export * from './Input';
|
|
17
|
+
export * from './List';
|
|
18
|
+
export * from './ListItem';
|
|
19
|
+
export * from './Modal';
|
|
20
|
+
export * from './MoreMenu';
|
|
21
|
+
export * from './MultiSelect';
|
|
22
|
+
export * from './MultiSelectList';
|
|
23
|
+
export * from './Notification';
|
|
24
|
+
export * from './NumberInput';
|
|
25
|
+
export * from './SearchInput';
|
|
26
|
+
export * from './SmartInput';
|
|
27
|
+
export * from './PhoneInput';
|
|
28
|
+
export * from './RadioButton';
|
|
29
|
+
export * from './Select';
|
|
30
|
+
export * from './Switch';
|
|
31
|
+
export * from './TextArea';
|
|
32
|
+
export * from './TextWithInfo';
|
|
33
|
+
export * from './TextWithTooltip';
|
|
34
|
+
export * from './ThemedPreloader';
|
|
35
|
+
export * from './Toaster';
|
|
36
|
+
export * from './Tooltip';
|
|
37
|
+
export * from './ScrollIntoViewIfNeeded';
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import {
|
|
2
|
-
addClickHandler as addClickHandlerHelper,
|
|
3
|
-
addDataTestId as addDataTestIdHelper,
|
|
4
|
-
createFilter as createFilterHelper,
|
|
5
|
-
getSelectKeyHandler as getSelectKeyHandlerHelper,
|
|
6
|
-
getTestId as getTestIdHelper,
|
|
7
|
-
isEmpty as isEmptyHelper,
|
|
8
|
-
isNotEmpty as isNotEmptyHelper,
|
|
9
|
-
isNumberInteger,
|
|
10
|
-
isString,
|
|
11
|
-
isStringNotEmpty as isStringNotEmptyHelper,
|
|
12
|
-
} from '@true-engineering/true-react-platform-helpers';
|
|
13
|
-
|
|
14
|
-
export const isInt = isNumberInteger;
|
|
15
|
-
export const addClickHandler = addClickHandlerHelper;
|
|
16
|
-
export const addDataTestId = addDataTestIdHelper;
|
|
17
|
-
export const createFilter = createFilterHelper;
|
|
18
|
-
export const getSelectKeyHandler = getSelectKeyHandlerHelper;
|
|
19
|
-
export const getTestId = getTestIdHelper;
|
|
20
|
-
export const isStringNotEmpty = isStringNotEmptyHelper;
|
|
21
|
-
export const isEmpty = isEmptyHelper;
|
|
22
|
-
export const isNotEmpty = <T>(val: T | null | undefined): val is T =>
|
|
23
|
-
(isString(val) && isStringNotEmptyHelper(val)) || isNotEmptyHelper(val);
|
|
1
|
+
import {
|
|
2
|
+
addClickHandler as addClickHandlerHelper,
|
|
3
|
+
addDataTestId as addDataTestIdHelper,
|
|
4
|
+
createFilter as createFilterHelper,
|
|
5
|
+
getSelectKeyHandler as getSelectKeyHandlerHelper,
|
|
6
|
+
getTestId as getTestIdHelper,
|
|
7
|
+
isEmpty as isEmptyHelper,
|
|
8
|
+
isNotEmpty as isNotEmptyHelper,
|
|
9
|
+
isNumberInteger,
|
|
10
|
+
isString,
|
|
11
|
+
isStringNotEmpty as isStringNotEmptyHelper,
|
|
12
|
+
} from '@true-engineering/true-react-platform-helpers';
|
|
13
|
+
|
|
14
|
+
export const isInt = isNumberInteger;
|
|
15
|
+
export const addClickHandler = addClickHandlerHelper;
|
|
16
|
+
export const addDataTestId = addDataTestIdHelper;
|
|
17
|
+
export const createFilter = createFilterHelper;
|
|
18
|
+
export const getSelectKeyHandler = getSelectKeyHandlerHelper;
|
|
19
|
+
export const getTestId = getTestIdHelper;
|
|
20
|
+
export const isStringNotEmpty = isStringNotEmptyHelper;
|
|
21
|
+
export const isEmpty = isEmptyHelper;
|
|
22
|
+
export const isNotEmpty = <T>(val: T | null | undefined): val is T =>
|
|
23
|
+
(isString(val) && isStringNotEmptyHelper(val)) || isNotEmptyHelper(val);
|
package/src/helpers/index.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
export * from './popper-helpers';
|
|
2
|
-
export * from './phone';
|
|
3
|
-
export * from './misc';
|
|
4
|
-
export * from './deprecated';
|
|
1
|
+
export * from './popper-helpers';
|
|
2
|
+
export * from './phone';
|
|
3
|
+
export * from './misc';
|
|
4
|
+
export * from './deprecated';
|
|
5
|
+
export * from './snippets';
|