@true-engineering/true-react-common-ui-kit 2.0.0 → 2.0.1
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/true-react-common-ui-kit.js +8 -2
- package/dist/true-react-common-ui-kit.js.map +1 -1
- package/dist/true-react-common-ui-kit.umd.cjs +8 -2
- package/dist/true-react-common-ui-kit.umd.cjs.map +1 -1
- package/package.json +91 -91
- package/src/components/FlexibleTable/FlexibleTable.stories.tsx +86 -86
- package/src/components/Select/Select.tsx +634 -630
package/package.json
CHANGED
|
@@ -1,91 +1,91 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@true-engineering/true-react-common-ui-kit",
|
|
3
|
-
"version": "2.0.
|
|
4
|
-
"description": "True Engineering React UI Kit with theming support",
|
|
5
|
-
"author": "True Engineering (https://trueengineering.ru)",
|
|
6
|
-
"keywords": [
|
|
7
|
-
"TE",
|
|
8
|
-
"True Engineering",
|
|
9
|
-
"UI Kit with theming support",
|
|
10
|
-
"UI Kit"
|
|
11
|
-
],
|
|
12
|
-
"homepage": "",
|
|
13
|
-
"license": "Apache-2.0",
|
|
14
|
-
"type": "module",
|
|
15
|
-
"types": "dist/index.d.ts",
|
|
16
|
-
"main": "dist/true-react-common-ui-kit.umd.cjs",
|
|
17
|
-
"module": "./dist/true-react-common-ui-kit.js",
|
|
18
|
-
"directories": {
|
|
19
|
-
"lib": "src"
|
|
20
|
-
},
|
|
21
|
-
"publishConfig": {
|
|
22
|
-
"access": "public"
|
|
23
|
-
},
|
|
24
|
-
"files": [
|
|
25
|
-
"src",
|
|
26
|
-
"dist"
|
|
27
|
-
],
|
|
28
|
-
"exports": {
|
|
29
|
-
".": {
|
|
30
|
-
"require": "./dist/true-react-common-ui-kit.umd.cjs",
|
|
31
|
-
"import": "./dist/true-react-common-ui-kit.js"
|
|
32
|
-
},
|
|
33
|
-
"./dist/style.css": "./dist/style.css",
|
|
34
|
-
"./src": "./src/index.ts"
|
|
35
|
-
},
|
|
36
|
-
"scripts": {
|
|
37
|
-
"build": "tsc && vite build",
|
|
38
|
-
"lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
|
|
39
|
-
"format": "prettier --write \"**/*.{js,jsx,css,json,ts,tsx}\"",
|
|
40
|
-
"format:check": "prettier --check \"**/*.{js,jsx,css,json,ts,tsx}\"",
|
|
41
|
-
"full-check": "yarn format:check && yarn lint",
|
|
42
|
-
"types-check": "tsc --noEmit"
|
|
43
|
-
},
|
|
44
|
-
"dependencies": {
|
|
45
|
-
"clsx": "1.2.1",
|
|
46
|
-
"country-flag-icons": "1.5.5",
|
|
47
|
-
"date-fns": "2.29.3",
|
|
48
|
-
"hex-to-rgba": "2.0.1",
|
|
49
|
-
"jss": "10.9.2",
|
|
50
|
-
"lodash-es": "4.17.21",
|
|
51
|
-
"react": "18.2.0",
|
|
52
|
-
"react-datepicker": "4.25.0",
|
|
53
|
-
"react-dom": "18.2.0",
|
|
54
|
-
"react-input-mask": "3.0.0-alpha.2",
|
|
55
|
-
"react-jss": "10.9.2",
|
|
56
|
-
"react-overlays": "5.2.1",
|
|
57
|
-
"react-remove-scroll": "2.5.6",
|
|
58
|
-
"react-transition-group": "4.4.5",
|
|
59
|
-
"scroll-into-view-if-needed": "3.0.6",
|
|
60
|
-
"ts-debounce": "4.0.0"
|
|
61
|
-
},
|
|
62
|
-
"devDependencies": {
|
|
63
|
-
"@babel/core": "7.20.12",
|
|
64
|
-
"@storybook/addon-actions": "6.5.15",
|
|
65
|
-
"@storybook/addon-essentials": "6.5.15",
|
|
66
|
-
"@storybook/addon-interactions": "6.5.15",
|
|
67
|
-
"@storybook/addon-links": "6.5.15",
|
|
68
|
-
"@storybook/builder-vite": "0.3.0",
|
|
69
|
-
"@storybook/react": "6.5.15",
|
|
70
|
-
"@storybook/testing-library": "0.0.13",
|
|
71
|
-
"@swc/core": "^1.3.30",
|
|
72
|
-
"@types/lodash-es": "4.17.11",
|
|
73
|
-
"@types/react": "18.0.26",
|
|
74
|
-
"@types/react-datepicker": "4.19.4",
|
|
75
|
-
"@types/react-dom": "18.0.9",
|
|
76
|
-
"@types/react-input-mask": "3.0.2",
|
|
77
|
-
"@types/react-transition-group": "4.4.5",
|
|
78
|
-
"@typescript-eslint/eslint-plugin": "5.48.2",
|
|
79
|
-
"@typescript-eslint/parser": "5.48.2",
|
|
80
|
-
"@vitejs/plugin-react": "3.0.0",
|
|
81
|
-
"eslint": "8.36.0",
|
|
82
|
-
"eslint-config-prettier": "8.7.0",
|
|
83
|
-
"eslint-plugin-react": "7.32.2",
|
|
84
|
-
"prettier": "2.8.3",
|
|
85
|
-
"rollup-plugin-swc3": "0.3.0",
|
|
86
|
-
"typescript": "4.9.3",
|
|
87
|
-
"unplugin-swc": "1.3.2",
|
|
88
|
-
"vite": "4.0.0",
|
|
89
|
-
"vite-plugin-dts": "1.7.1"
|
|
90
|
-
}
|
|
91
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@true-engineering/true-react-common-ui-kit",
|
|
3
|
+
"version": "2.0.1",
|
|
4
|
+
"description": "True Engineering React UI Kit with theming support",
|
|
5
|
+
"author": "True Engineering (https://trueengineering.ru)",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"TE",
|
|
8
|
+
"True Engineering",
|
|
9
|
+
"UI Kit with theming support",
|
|
10
|
+
"UI Kit"
|
|
11
|
+
],
|
|
12
|
+
"homepage": "",
|
|
13
|
+
"license": "Apache-2.0",
|
|
14
|
+
"type": "module",
|
|
15
|
+
"types": "dist/index.d.ts",
|
|
16
|
+
"main": "dist/true-react-common-ui-kit.umd.cjs",
|
|
17
|
+
"module": "./dist/true-react-common-ui-kit.js",
|
|
18
|
+
"directories": {
|
|
19
|
+
"lib": "src"
|
|
20
|
+
},
|
|
21
|
+
"publishConfig": {
|
|
22
|
+
"access": "public"
|
|
23
|
+
},
|
|
24
|
+
"files": [
|
|
25
|
+
"src",
|
|
26
|
+
"dist"
|
|
27
|
+
],
|
|
28
|
+
"exports": {
|
|
29
|
+
".": {
|
|
30
|
+
"require": "./dist/true-react-common-ui-kit.umd.cjs",
|
|
31
|
+
"import": "./dist/true-react-common-ui-kit.js"
|
|
32
|
+
},
|
|
33
|
+
"./dist/style.css": "./dist/style.css",
|
|
34
|
+
"./src": "./src/index.ts"
|
|
35
|
+
},
|
|
36
|
+
"scripts": {
|
|
37
|
+
"build": "tsc && vite build",
|
|
38
|
+
"lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
|
|
39
|
+
"format": "prettier --write \"**/*.{js,jsx,css,json,ts,tsx}\"",
|
|
40
|
+
"format:check": "prettier --check \"**/*.{js,jsx,css,json,ts,tsx}\"",
|
|
41
|
+
"full-check": "yarn format:check && yarn lint",
|
|
42
|
+
"types-check": "tsc --noEmit"
|
|
43
|
+
},
|
|
44
|
+
"dependencies": {
|
|
45
|
+
"clsx": "1.2.1",
|
|
46
|
+
"country-flag-icons": "1.5.5",
|
|
47
|
+
"date-fns": "2.29.3",
|
|
48
|
+
"hex-to-rgba": "2.0.1",
|
|
49
|
+
"jss": "10.9.2",
|
|
50
|
+
"lodash-es": "4.17.21",
|
|
51
|
+
"react": "18.2.0",
|
|
52
|
+
"react-datepicker": "4.25.0",
|
|
53
|
+
"react-dom": "18.2.0",
|
|
54
|
+
"react-input-mask": "3.0.0-alpha.2",
|
|
55
|
+
"react-jss": "10.9.2",
|
|
56
|
+
"react-overlays": "5.2.1",
|
|
57
|
+
"react-remove-scroll": "2.5.6",
|
|
58
|
+
"react-transition-group": "4.4.5",
|
|
59
|
+
"scroll-into-view-if-needed": "3.0.6",
|
|
60
|
+
"ts-debounce": "4.0.0"
|
|
61
|
+
},
|
|
62
|
+
"devDependencies": {
|
|
63
|
+
"@babel/core": "7.20.12",
|
|
64
|
+
"@storybook/addon-actions": "6.5.15",
|
|
65
|
+
"@storybook/addon-essentials": "6.5.15",
|
|
66
|
+
"@storybook/addon-interactions": "6.5.15",
|
|
67
|
+
"@storybook/addon-links": "6.5.15",
|
|
68
|
+
"@storybook/builder-vite": "0.3.0",
|
|
69
|
+
"@storybook/react": "6.5.15",
|
|
70
|
+
"@storybook/testing-library": "0.0.13",
|
|
71
|
+
"@swc/core": "^1.3.30",
|
|
72
|
+
"@types/lodash-es": "4.17.11",
|
|
73
|
+
"@types/react": "18.0.26",
|
|
74
|
+
"@types/react-datepicker": "4.19.4",
|
|
75
|
+
"@types/react-dom": "18.0.9",
|
|
76
|
+
"@types/react-input-mask": "3.0.2",
|
|
77
|
+
"@types/react-transition-group": "4.4.5",
|
|
78
|
+
"@typescript-eslint/eslint-plugin": "5.48.2",
|
|
79
|
+
"@typescript-eslint/parser": "5.48.2",
|
|
80
|
+
"@vitejs/plugin-react": "3.0.0",
|
|
81
|
+
"eslint": "8.36.0",
|
|
82
|
+
"eslint-config-prettier": "8.7.0",
|
|
83
|
+
"eslint-plugin-react": "7.32.2",
|
|
84
|
+
"prettier": "2.8.3",
|
|
85
|
+
"rollup-plugin-swc3": "0.3.0",
|
|
86
|
+
"typescript": "4.9.3",
|
|
87
|
+
"unplugin-swc": "1.3.2",
|
|
88
|
+
"vite": "4.0.0",
|
|
89
|
+
"vite-plugin-dts": "1.7.1"
|
|
90
|
+
}
|
|
91
|
+
}
|
|
@@ -1,86 +1,86 @@
|
|
|
1
|
-
import { ComponentStory } from '@storybook/react';
|
|
2
|
-
import { FC } from 'react';
|
|
3
|
-
import { FlexibleTable } from './FlexibleTable';
|
|
4
|
-
import { FlexibleTableConfigType } from './types';
|
|
5
|
-
import content from './fixture-test';
|
|
6
|
-
|
|
7
|
-
export default {
|
|
8
|
-
title: 'Table/FlexibleTable',
|
|
9
|
-
component: FlexibleTable,
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
interface ITableContent {
|
|
13
|
-
contractCode: string;
|
|
14
|
-
validFrom: Date;
|
|
15
|
-
validTo: Date;
|
|
16
|
-
title: string;
|
|
17
|
-
signDate: Date;
|
|
18
|
-
partner: string;
|
|
19
|
-
partnerDescription: string;
|
|
20
|
-
parentContract: string;
|
|
21
|
-
currency: string;
|
|
22
|
-
status: string;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
const Temp: FC<{ value: string | undefined }> = ({ value }) => <>{value}</>;
|
|
26
|
-
const Temp1: FC<{ value: string }> = ({ value }) => <>{value}</>;
|
|
27
|
-
|
|
28
|
-
const config: FlexibleTableConfigType<ITableContent> = {
|
|
29
|
-
contractCode: {
|
|
30
|
-
title: 'Contract Code',
|
|
31
|
-
},
|
|
32
|
-
title: {
|
|
33
|
-
component: Temp,
|
|
34
|
-
title: 'Title',
|
|
35
|
-
minWidth: 320,
|
|
36
|
-
},
|
|
37
|
-
validFrom: {
|
|
38
|
-
title: 'Valid From',
|
|
39
|
-
},
|
|
40
|
-
validTo: {
|
|
41
|
-
title: 'Valid From',
|
|
42
|
-
},
|
|
43
|
-
signDate: {
|
|
44
|
-
title: 'Sign Date',
|
|
45
|
-
},
|
|
46
|
-
partner: {
|
|
47
|
-
component: Temp1,
|
|
48
|
-
title: 'Partner',
|
|
49
|
-
},
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (
|
|
53
|
-
args,
|
|
54
|
-
) => (
|
|
55
|
-
<FlexibleTable<ITableContent>
|
|
56
|
-
{...args}
|
|
57
|
-
uniqueField="contractCode"
|
|
58
|
-
expandableRowComponent={(item, _, close) =>
|
|
59
|
-
item.contractCode === 'OB_UT_M119' ? (
|
|
60
|
-
<div onClick={close}>всем привет :) {item.contractCode}</div>
|
|
61
|
-
) : null
|
|
62
|
-
}
|
|
63
|
-
content={content}
|
|
64
|
-
config={config}
|
|
65
|
-
/>
|
|
66
|
-
);
|
|
67
|
-
|
|
68
|
-
export const Default = Template.bind({});
|
|
69
|
-
|
|
70
|
-
Default.args = {
|
|
71
|
-
isHorizontallyScrollable: true,
|
|
72
|
-
isFirstColumnSticky: true,
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
Default.parameters = {
|
|
76
|
-
controls: {
|
|
77
|
-
exclude: [
|
|
78
|
-
'data',
|
|
79
|
-
'testId',
|
|
80
|
-
'onHeadClick',
|
|
81
|
-
'onRowClick',
|
|
82
|
-
'onRowHover',
|
|
83
|
-
'expandableRowComponent',
|
|
84
|
-
],
|
|
85
|
-
},
|
|
86
|
-
};
|
|
1
|
+
import { ComponentStory } from '@storybook/react';
|
|
2
|
+
import { FC } from 'react';
|
|
3
|
+
import { FlexibleTable } from './FlexibleTable';
|
|
4
|
+
import { FlexibleTableConfigType } from './types';
|
|
5
|
+
import content from './fixture-test';
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: 'Table/FlexibleTable',
|
|
9
|
+
component: FlexibleTable,
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
interface ITableContent {
|
|
13
|
+
contractCode: string;
|
|
14
|
+
validFrom: Date;
|
|
15
|
+
validTo: Date;
|
|
16
|
+
title: string;
|
|
17
|
+
signDate: Date;
|
|
18
|
+
partner: string;
|
|
19
|
+
partnerDescription: string;
|
|
20
|
+
parentContract: string;
|
|
21
|
+
currency: string;
|
|
22
|
+
status: string;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const Temp: FC<{ value: string | undefined }> = ({ value }) => <>{value}</>;
|
|
26
|
+
const Temp1: FC<{ value: string }> = ({ value }) => <>{value}</>;
|
|
27
|
+
|
|
28
|
+
const config: FlexibleTableConfigType<ITableContent> = {
|
|
29
|
+
contractCode: {
|
|
30
|
+
title: 'Contract Code',
|
|
31
|
+
},
|
|
32
|
+
title: {
|
|
33
|
+
component: Temp,
|
|
34
|
+
title: 'Title',
|
|
35
|
+
minWidth: 320,
|
|
36
|
+
},
|
|
37
|
+
validFrom: {
|
|
38
|
+
title: 'Valid From',
|
|
39
|
+
},
|
|
40
|
+
validTo: {
|
|
41
|
+
title: 'Valid From',
|
|
42
|
+
},
|
|
43
|
+
signDate: {
|
|
44
|
+
title: 'Sign Date',
|
|
45
|
+
},
|
|
46
|
+
partner: {
|
|
47
|
+
component: Temp1,
|
|
48
|
+
title: 'Partner',
|
|
49
|
+
},
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (
|
|
53
|
+
args,
|
|
54
|
+
) => (
|
|
55
|
+
<FlexibleTable<ITableContent>
|
|
56
|
+
{...args}
|
|
57
|
+
uniqueField="contractCode"
|
|
58
|
+
expandableRowComponent={(item, _, close) =>
|
|
59
|
+
item.contractCode === 'OB_UT_M119' ? (
|
|
60
|
+
<div onClick={close}>всем привет :) {item.contractCode}</div>
|
|
61
|
+
) : null
|
|
62
|
+
}
|
|
63
|
+
content={content}
|
|
64
|
+
config={config}
|
|
65
|
+
/>
|
|
66
|
+
);
|
|
67
|
+
|
|
68
|
+
export const Default = Template.bind({});
|
|
69
|
+
|
|
70
|
+
Default.args = {
|
|
71
|
+
isHorizontallyScrollable: true,
|
|
72
|
+
isFirstColumnSticky: true,
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
Default.parameters = {
|
|
76
|
+
controls: {
|
|
77
|
+
exclude: [
|
|
78
|
+
'data',
|
|
79
|
+
'testId',
|
|
80
|
+
'onHeadClick',
|
|
81
|
+
'onRowClick',
|
|
82
|
+
'onRowHover',
|
|
83
|
+
'expandableRowComponent',
|
|
84
|
+
],
|
|
85
|
+
},
|
|
86
|
+
};
|