@aleleba/ro-ut-ui 4.4.0 → 4.6.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/dist/index.css +13 -4
- package/dist/index.js +1 -1
- package/dist/types/components/Calendars/Calendar/index.d.ts +47 -0
- package/dist/types/components/Calendars/index.d.ts +7 -0
- package/dist/types/components/Carousels/Carousel/index.d.ts +57 -0
- package/dist/types/components/Carousels/index.d.ts +7 -0
- package/dist/types/components/DropdownMenus/DropdownMenu/index.d.ts +60 -0
- package/dist/types/components/DropdownMenus/index.d.ts +11 -0
- package/dist/types/components/EventCards/EventCard/index.d.ts +37 -0
- package/dist/types/components/EventCards/index.d.ts +7 -0
- package/dist/types/components/IconButtons/index.d.ts +2 -1
- package/dist/types/components/Icons/index.d.ts +3 -1
- package/dist/types/components/RouteCards/RouteCard/index.d.ts +53 -0
- package/dist/types/components/RouteCards/index.d.ts +7 -0
- package/dist/types/components/SelectableTiles/SelectableTile/index.d.ts +46 -0
- package/dist/types/components/SelectableTiles/SelectableTileGroup/index.d.ts +79 -0
- package/dist/types/components/SelectableTiles/index.d.ts +8 -0
- package/dist/types/components/Tables/Table/index.d.ts +60 -0
- package/dist/types/components/Tables/index.d.ts +7 -0
- package/dist/types/components/Tabs/Tabs/index.d.ts +52 -0
- package/dist/types/components/Tabs/index.d.ts +8 -0
- package/dist/types/components/index.d.ts +8 -0
- package/package.json +124 -124
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { IconNames } from '@components';
|
|
2
|
+
import { SelectableTileThemes } from '..';
|
|
3
|
+
export declare enum SelectableTileGroupDirections {
|
|
4
|
+
horizontal = "horizontal",
|
|
5
|
+
vertical = "vertical"
|
|
6
|
+
}
|
|
7
|
+
export type TSelectableTileOption = {
|
|
8
|
+
/**
|
|
9
|
+
* Is this the icon shown inside the tile
|
|
10
|
+
*/
|
|
11
|
+
icon: IconNames;
|
|
12
|
+
/**
|
|
13
|
+
* Is this the value of the tile
|
|
14
|
+
*/
|
|
15
|
+
value: string;
|
|
16
|
+
/**
|
|
17
|
+
* Is this the label shown under the icon
|
|
18
|
+
*/
|
|
19
|
+
label?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Is this the secondary label shown under the label
|
|
22
|
+
*/
|
|
23
|
+
sublabel?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Is this the disabled state of the tile
|
|
26
|
+
*/
|
|
27
|
+
disabled?: boolean;
|
|
28
|
+
};
|
|
29
|
+
export type TSelectableTileGroupProps = {
|
|
30
|
+
/**
|
|
31
|
+
* Is this the id of the selectable tile group.
|
|
32
|
+
*/
|
|
33
|
+
id?: string;
|
|
34
|
+
/**
|
|
35
|
+
* Is this the classes that you want to add
|
|
36
|
+
*/
|
|
37
|
+
className?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Is this the theme you want to add to the tiles
|
|
40
|
+
*/
|
|
41
|
+
theme?: SelectableTileThemes;
|
|
42
|
+
/**
|
|
43
|
+
* Is this the list of options of the group
|
|
44
|
+
*/
|
|
45
|
+
options?: TSelectableTileOption[];
|
|
46
|
+
/**
|
|
47
|
+
* Is this the value if the group allows selecting several tiles at once
|
|
48
|
+
*/
|
|
49
|
+
multiple?: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Is this the selected value of the group (controlled, single mode)
|
|
52
|
+
*/
|
|
53
|
+
value?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Is this the initial selected value of the group (uncontrolled, single mode)
|
|
56
|
+
*/
|
|
57
|
+
defaultValue?: string;
|
|
58
|
+
/**
|
|
59
|
+
* Is this the list of selected values of the group (controlled, multiple mode)
|
|
60
|
+
*/
|
|
61
|
+
values?: string[];
|
|
62
|
+
/**
|
|
63
|
+
* Is this the initial list of selected values of the group (uncontrolled, multiple mode)
|
|
64
|
+
*/
|
|
65
|
+
defaultValues?: string[];
|
|
66
|
+
/**
|
|
67
|
+
* Is this the layout direction of the group
|
|
68
|
+
*/
|
|
69
|
+
direction?: SelectableTileGroupDirections;
|
|
70
|
+
/**
|
|
71
|
+
* Is this the disabled state of the whole group
|
|
72
|
+
*/
|
|
73
|
+
disabled?: boolean;
|
|
74
|
+
/**
|
|
75
|
+
* Is this the onChange event of the group, called with the selected value (single mode) or the list of selected values (multiple mode)
|
|
76
|
+
*/
|
|
77
|
+
onChange?: (value: string | string[]) => void;
|
|
78
|
+
};
|
|
79
|
+
export declare const SelectableTileGroup: ({ id, className, theme, options, multiple, value, defaultValue, values, defaultValues, direction, disabled, onChange, }: TSelectableTileGroupProps) => import("react").JSX.Element;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
|
+
import { TableThemes } from '..';
|
|
3
|
+
export type TTableAlign = 'left' | 'center' | 'right';
|
|
4
|
+
export type TTableColumn<T> = {
|
|
5
|
+
/**
|
|
6
|
+
* Is this the unique key of the column
|
|
7
|
+
*/
|
|
8
|
+
key: string;
|
|
9
|
+
/**
|
|
10
|
+
* Is this the content shown in the header cell of the column
|
|
11
|
+
*/
|
|
12
|
+
header: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Is this the custom renderer for the cell of the column; receives the row
|
|
15
|
+
*/
|
|
16
|
+
render?: (row: T) => ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Is this the horizontal alignment of the column cells
|
|
19
|
+
*/
|
|
20
|
+
align?: TTableAlign;
|
|
21
|
+
/**
|
|
22
|
+
* Is this the fixed width of the column (px number or any CSS width)
|
|
23
|
+
*/
|
|
24
|
+
width?: string | number;
|
|
25
|
+
};
|
|
26
|
+
export type TTableProps<T> = {
|
|
27
|
+
/**
|
|
28
|
+
* Is this the id of the table.
|
|
29
|
+
*/
|
|
30
|
+
id?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Is this the classes that you want to add
|
|
33
|
+
*/
|
|
34
|
+
className?: string;
|
|
35
|
+
/**
|
|
36
|
+
* Is this the theme you want to add to the table
|
|
37
|
+
*/
|
|
38
|
+
theme?: TableThemes;
|
|
39
|
+
/**
|
|
40
|
+
* Is this the list of columns of the table
|
|
41
|
+
*/
|
|
42
|
+
columns: TTableColumn<T>[];
|
|
43
|
+
/**
|
|
44
|
+
* Is this the list of rows of the table
|
|
45
|
+
*/
|
|
46
|
+
data: T[];
|
|
47
|
+
/**
|
|
48
|
+
* Is this the function that returns the unique key of a row
|
|
49
|
+
*/
|
|
50
|
+
rowKey: (row: T) => string;
|
|
51
|
+
/**
|
|
52
|
+
* Is this the onClick event of a row, called with the clicked row
|
|
53
|
+
*/
|
|
54
|
+
onRowClick?: (row: T) => void;
|
|
55
|
+
/**
|
|
56
|
+
* Is this the message shown when there are no rows
|
|
57
|
+
*/
|
|
58
|
+
emptyMessage?: string;
|
|
59
|
+
};
|
|
60
|
+
export declare const Table: <T>({ id, className, theme, columns, data, rowKey, onRowClick, emptyMessage, }: TTableProps<T>) => ReactElement;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { IconNames } from '@components';
|
|
3
|
+
import { TabsVariants } from '..';
|
|
4
|
+
export type TTab = {
|
|
5
|
+
/**
|
|
6
|
+
* Is this the value of the tab
|
|
7
|
+
*/
|
|
8
|
+
value: string;
|
|
9
|
+
/**
|
|
10
|
+
* Is this the visible label of the tab
|
|
11
|
+
*/
|
|
12
|
+
label: string;
|
|
13
|
+
/**
|
|
14
|
+
* Is this the icon shown in the tab
|
|
15
|
+
*/
|
|
16
|
+
icon?: IconNames;
|
|
17
|
+
/**
|
|
18
|
+
* Is this the disabled state of the tab
|
|
19
|
+
*/
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
};
|
|
22
|
+
export type TTabsProps = {
|
|
23
|
+
/**
|
|
24
|
+
* Is this the id of the tabs.
|
|
25
|
+
*/
|
|
26
|
+
id?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Is this the classes that you want to add
|
|
29
|
+
*/
|
|
30
|
+
className?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Is this the variant of the tabs
|
|
33
|
+
*/
|
|
34
|
+
variant?: TabsVariants;
|
|
35
|
+
/**
|
|
36
|
+
* Is this the list of tabs
|
|
37
|
+
*/
|
|
38
|
+
tabs: TTab[];
|
|
39
|
+
/**
|
|
40
|
+
* Is this the value of the active tab (controlled)
|
|
41
|
+
*/
|
|
42
|
+
active?: string;
|
|
43
|
+
/**
|
|
44
|
+
* Is this the value of the initially active tab (uncontrolled)
|
|
45
|
+
*/
|
|
46
|
+
defaultActive?: string;
|
|
47
|
+
/**
|
|
48
|
+
* Is this the onChange event of the tabs, called with the value of the selected tab
|
|
49
|
+
*/
|
|
50
|
+
onChange?: (value: string) => void;
|
|
51
|
+
};
|
|
52
|
+
export declare const Tabs: FC<TTabsProps>;
|
|
@@ -16,3 +16,11 @@ export * from './Tags';
|
|
|
16
16
|
export * from './IconButtons';
|
|
17
17
|
export * from './Links';
|
|
18
18
|
export * from './Ratings';
|
|
19
|
+
export * from './Tables';
|
|
20
|
+
export * from './SelectableTiles';
|
|
21
|
+
export * from './Carousels';
|
|
22
|
+
export * from './DropdownMenus';
|
|
23
|
+
export * from './Tabs';
|
|
24
|
+
export * from './RouteCards';
|
|
25
|
+
export * from './EventCards';
|
|
26
|
+
export * from './Calendars';
|
package/package.json
CHANGED
|
@@ -1,126 +1,126 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
2
|
+
"name": "@aleleba/ro-ut-ui",
|
|
3
|
+
"version": "4.6.0",
|
|
4
|
+
"description": "UI Component for Ro-ut App",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"types": "dist/types/components/index.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"types": "./dist/types/components/index.d.ts",
|
|
10
|
+
"import": "./dist/index.js",
|
|
11
|
+
"require": "./dist/index.js"
|
|
12
|
+
},
|
|
13
|
+
"./dist/index.css": "./dist/index.css"
|
|
14
|
+
},
|
|
15
|
+
"scripts": {
|
|
16
|
+
"start": "npm run build:icons && npm run storybook",
|
|
17
|
+
"build": "npm run build:icons && webpack",
|
|
18
|
+
"build:icons": "webpack --config webpack.icons.config.ts",
|
|
19
|
+
"lint": "eslint .",
|
|
20
|
+
"lint:fix": "eslint . --fix",
|
|
21
|
+
"test": "npm run build:icons && jest",
|
|
22
|
+
"test:watch": "npm run build:icons && jest --watch",
|
|
23
|
+
"storybook": "storybook dev -p 3000",
|
|
24
|
+
"build-storybook": "storybook build",
|
|
25
|
+
"check-updates": "npx npm-check-updates -u && npm i",
|
|
26
|
+
"cy:open": "npm run build:icons && npx cypress open",
|
|
27
|
+
"cy:run": "npm run build:icons && cypress install && cypress run --headless --component"
|
|
28
|
+
},
|
|
29
|
+
"repository": {
|
|
30
|
+
"type": "git",
|
|
31
|
+
"url": "git+https://github.com/aleleba/create-react-component-library.git"
|
|
32
|
+
},
|
|
33
|
+
"keywords": [
|
|
34
|
+
"create",
|
|
35
|
+
"react",
|
|
36
|
+
"component",
|
|
37
|
+
"library",
|
|
38
|
+
"typescript"
|
|
39
|
+
],
|
|
40
|
+
"author": "Alejandro Lembke Barrientos",
|
|
41
|
+
"license": "MIT",
|
|
42
|
+
"bugs": {
|
|
43
|
+
"url": "https://github.com/aleleba/create-react-component-library/issues"
|
|
44
|
+
},
|
|
45
|
+
"homepage": "https://github.com/aleleba/create-react-component-library#readme",
|
|
46
|
+
"engines": {
|
|
47
|
+
"node": ">=22.11.0"
|
|
48
|
+
},
|
|
49
|
+
"devDependencies": {
|
|
50
|
+
"@babel/core": "^7.29.7",
|
|
51
|
+
"@babel/preset-env": "^7.29.7",
|
|
52
|
+
"@babel/preset-react": "^7.29.7",
|
|
53
|
+
"@babel/preset-typescript": "^7.29.7",
|
|
54
|
+
"@babel/register": "^7.29.7",
|
|
55
|
+
"@eslint/js": "^9.39.4",
|
|
56
|
+
"@mdx-js/react": "^3.1.1",
|
|
57
|
+
"@storybook/addon-docs": "^10.4.3",
|
|
58
|
+
"@storybook/addon-links": "^10.4.3",
|
|
59
|
+
"@storybook/addon-styling-webpack": "^3.0.2",
|
|
60
|
+
"@storybook/addon-webpack5-compiler-babel": "^4.0.1",
|
|
61
|
+
"@storybook/cli": "^10.4.3",
|
|
62
|
+
"@storybook/preset-scss": "^1.0.3",
|
|
63
|
+
"@storybook/react-webpack5": "^10.4.3",
|
|
64
|
+
"@tailwindcss/postcss": "^4.3.0",
|
|
65
|
+
"@testing-library/dom": "^10.4.1",
|
|
66
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
67
|
+
"@testing-library/react": "^16.3.2",
|
|
68
|
+
"@testing-library/user-event": "^14.6.1",
|
|
69
|
+
"@types/jest": "^30.0.0",
|
|
70
|
+
"@types/node": "^25.9.2",
|
|
71
|
+
"@types/react": "^19.2.17",
|
|
72
|
+
"@types/react-dom": "^19.2.3",
|
|
73
|
+
"@types/webpack": "^5.28.5",
|
|
74
|
+
"babel-loader": "^10.1.1",
|
|
75
|
+
"clean-webpack-plugin": "^4.0.0",
|
|
76
|
+
"css-loader": "^7.1.4",
|
|
77
|
+
"css-minimizer-webpack-plugin": "^8.0.0",
|
|
78
|
+
"cypress": "^15.17.0",
|
|
79
|
+
"dotenv": "^17.4.2",
|
|
80
|
+
"eslint": "^9.39.4",
|
|
81
|
+
"eslint-plugin-react": "^7.37.5",
|
|
82
|
+
"eslint-plugin-storybook": "^10.4.3",
|
|
83
|
+
"eslint-webpack-plugin": "^6.0.0",
|
|
84
|
+
"globals": "^17.6.0",
|
|
85
|
+
"html-webpack-plugin": "^5.6.7",
|
|
86
|
+
"identity-obj-proxy": "^3.0.0",
|
|
87
|
+
"jest": "^30.4.2",
|
|
88
|
+
"jest-environment-jsdom": "^30.4.1",
|
|
89
|
+
"jest-fetch-mock": "^3.0.3",
|
|
90
|
+
"mini-css-extract-plugin": "^2.10.2",
|
|
91
|
+
"postcss": "^8.5.15",
|
|
92
|
+
"postcss-loader": "^8.2.1",
|
|
93
|
+
"react": "^19.2.7",
|
|
94
|
+
"react-dom": "^19.2.7",
|
|
95
|
+
"react-router-dom": "^7.17.0",
|
|
96
|
+
"resolve-ts-aliases": "^1.0.1",
|
|
97
|
+
"sass": "^1.100.0",
|
|
98
|
+
"sass-loader": "^17.0.0",
|
|
99
|
+
"storybook": "^10.4.3",
|
|
100
|
+
"style-loader": "^4.0.0",
|
|
101
|
+
"tailwindcss": "^4.3.0",
|
|
102
|
+
"terser-webpack-plugin": "^5.6.1",
|
|
103
|
+
"ts-jest": "^29.4.11",
|
|
104
|
+
"ts-loader": "^9.6.0",
|
|
105
|
+
"tsconfig-paths-webpack-plugin": "^4.2.0",
|
|
106
|
+
"typescript": "^6.0.3",
|
|
107
|
+
"typescript-eslint": "^8.61.0",
|
|
108
|
+
"url-loader": "^4.1.1",
|
|
109
|
+
"webfonts-loader": "^8.1.1",
|
|
110
|
+
"webpack": "^5.107.2",
|
|
111
|
+
"webpack-cli": "^7.0.3",
|
|
112
|
+
"webpack-node-externals": "^3.0.0"
|
|
113
|
+
},
|
|
114
|
+
"peerDependencies": {
|
|
115
|
+
"react": "^19.1.0",
|
|
116
|
+
"react-dom": "^19.1.0",
|
|
117
|
+
"react-router-dom": "^7.0.0"
|
|
118
|
+
},
|
|
119
|
+
"overrides": {
|
|
120
|
+
"node-gyp": "^12.4.0",
|
|
121
|
+
"tar": "^7.5.16"
|
|
122
|
+
},
|
|
123
|
+
"files": [
|
|
124
|
+
"./dist"
|
|
125
|
+
]
|
|
126
126
|
}
|