@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.
@@ -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,8 @@
1
+ export declare enum SelectableTileThemes {
2
+ primary = "primary"
3
+ }
4
+ export declare const getSelectableTileThemeClass: ({ theme }: {
5
+ theme: SelectableTileThemes;
6
+ }) => string;
7
+ export * from './SelectableTile';
8
+ export * from './SelectableTileGroup';
@@ -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,7 @@
1
+ export declare enum TableThemes {
2
+ primary = "primary"
3
+ }
4
+ export declare const getTableThemeClass: ({ theme }: {
5
+ theme: TableThemes;
6
+ }) => string;
7
+ export * from './Table';
@@ -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>;
@@ -0,0 +1,8 @@
1
+ export declare enum TabsVariants {
2
+ iconTab = "iconTab",
3
+ segmented = "segmented"
4
+ }
5
+ export declare const getTabsVariantClass: ({ variant }: {
6
+ variant: TabsVariants;
7
+ }) => string;
8
+ export * from './Tabs';
@@ -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
- "name": "@aleleba/ro-ut-ui",
3
- "version": "4.4.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
- ]
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
  }