reactive-bulma 2.8.0 → 2.10.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/cjs/index.js +75 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/atoms/TabItem/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/index.d.ts +2 -0
- package/dist/cjs/types/components/molecules/Modal/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/Tabs/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/index.d.ts +2 -0
- package/dist/cjs/types/functions/parsers.d.ts +7 -0
- package/dist/cjs/types/interfaces/atomProps.d.ts +8 -0
- package/dist/cjs/types/interfaces/commonProps.d.ts +3 -0
- package/dist/cjs/types/interfaces/moleculeProps.d.ts +22 -2
- package/dist/cjs/types/types/styleTypes.d.ts +1 -0
- package/dist/esm/index.js +72 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/atoms/TabItem/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/index.d.ts +2 -0
- package/dist/esm/types/components/molecules/Modal/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/Tabs/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/index.d.ts +2 -0
- package/dist/esm/types/functions/parsers.d.ts +7 -0
- package/dist/esm/types/interfaces/atomProps.d.ts +8 -0
- package/dist/esm/types/interfaces/commonProps.d.ts +3 -0
- package/dist/esm/types/interfaces/moleculeProps.d.ts +22 -2
- package/dist/esm/types/types/styleTypes.d.ts +1 -0
- package/dist/index.d.ts +47 -1
- package/package.json +31 -31
@@ -17,4 +17,6 @@ export { default as BreadcrumbItem } from './BreadcrumbItem';
|
|
17
17
|
export { default as DropdownTrigger } from './DropdownTrigger';
|
18
18
|
export { default as DropdownItem } from './DropdownItem';
|
19
19
|
export { default as MenuItem } from './MenuItem';
|
20
|
+
export { default as Image } from './Image';
|
20
21
|
export { default as PaginationItem } from './PaginationItem';
|
22
|
+
export { default as TabItem } from './TabItem';
|
@@ -7,3 +7,5 @@ export { default as Message } from './Message';
|
|
7
7
|
export { default as Menu } from './Menu';
|
8
8
|
export { default as MenuList } from './MenuList';
|
9
9
|
export { default as Pagination } from './Pagination';
|
10
|
+
export { default as Modal } from './Modal';
|
11
|
+
export { default as Tabs } from './Tabs';
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import { GenericObjectProps } from '../interfaces/commonProps';
|
1
2
|
import { ParseTestIdProps } from '../interfaces/functionProps';
|
2
3
|
/**
|
3
4
|
* @param { Array<string | null> } _classes `Required`. Array of classNames on `string` (or `null`) values
|
@@ -13,3 +14,9 @@ export declare const parseClasses: (_classes: Array<string | null | undefined>)
|
|
13
14
|
*/
|
14
15
|
export declare const parseTestId: (config: ParseTestIdProps) => string;
|
15
16
|
export declare const parseKey: (max?: number, min?: number) => string;
|
17
|
+
interface CreateObjArrayProps {
|
18
|
+
numberOfItems?: number;
|
19
|
+
externalParser?: (i: number) => GenericObjectProps;
|
20
|
+
}
|
21
|
+
export declare const createObjArray: <ImportedProps>({ numberOfItems, externalParser }?: CreateObjArrayProps) => ImportedProps[] | GenericObjectProps[];
|
22
|
+
export {};
|
@@ -257,3 +257,11 @@ export interface PaginationItemProps extends ElementProps, ClickeableProps {
|
|
257
257
|
/** `Styling` Makes the item the selected one, changing its background to blue */
|
258
258
|
isSelected?: boolean;
|
259
259
|
}
|
260
|
+
export interface TabItemProps extends ComposedElementProps, ClickeableProps {
|
261
|
+
/** `Attribute` `Required` The text will be shown in the `TabItem` */
|
262
|
+
text: string;
|
263
|
+
/** `Attribute` Adds an `Icon` component before the text */
|
264
|
+
icon?: IconProps;
|
265
|
+
/** `Styling` Used for Tabs styling purpose only. Will mark the tab as the one selected among its group */
|
266
|
+
isActive?: boolean;
|
267
|
+
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
|
3
|
-
import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, MenuItemProps, PaginationItemProps } from './atomProps';
|
4
|
-
import { basicColorType, elementAlignType, breadcrumbSeparatorType, columnGapType, reducedSizeType } from '../types/styleTypes';
|
3
|
+
import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, MenuItemProps, PaginationItemProps, TabItemProps } from './atomProps';
|
4
|
+
import { basicColorType, elementAlignType, breadcrumbSeparatorType, columnGapType, reducedSizeType, tabsFormatType } from '../types/styleTypes';
|
5
5
|
export interface ButtonGroupProps extends ElementProps {
|
6
6
|
/** `Atribute` `Required` Array of `Button` objects that will be shown */
|
7
7
|
buttonList: ButtonProps[];
|
@@ -109,4 +109,24 @@ export interface PaginationProps extends ComposedElementProps {
|
|
109
109
|
/** `Styling` Will adjust the pages position on screen */
|
110
110
|
alignment?: elementAlignType | null;
|
111
111
|
}
|
112
|
+
export interface ModalProps extends ComposedElementProps {
|
113
|
+
/** `Attribute` Reffers to the component or array of components that will be shown inside the column */
|
114
|
+
children?: string | React.ReactElement | React.ReactElement[] | null;
|
115
|
+
/** `Function` Custom function related to the modal's close button to inject custom code if needed */
|
116
|
+
onCloseClick?: () => void;
|
117
|
+
}
|
118
|
+
export interface TabsProps extends ElementProps {
|
119
|
+
/** `Attribute` `Required` List of tabs that will be shown in order */
|
120
|
+
tabs: TabItemProps[];
|
121
|
+
/** `Styling` Will adjust the tabs position on screen */
|
122
|
+
alignment?: elementAlignType;
|
123
|
+
/** `Styling` Set tab's size on bulma's size tokens */
|
124
|
+
size?: reducedSizeType;
|
125
|
+
/** `Styling` Set tab's size on bulma's size tokens */
|
126
|
+
format?: tabsFormatType;
|
127
|
+
/** `Styling` Will add round tabs borders. Only visible if `format` is set to `is-toggle` */
|
128
|
+
isRounded?: boolean;
|
129
|
+
/** `Styling` The whole container will occupy its parent container width */
|
130
|
+
isFullWidth?: boolean;
|
131
|
+
}
|
112
132
|
export {};
|
@@ -10,3 +10,4 @@ export type iconColorModeType = 'light' | 'dark';
|
|
10
10
|
export type columnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
|
11
11
|
export type elementAlignType = 'is-centered' | 'is-right';
|
12
12
|
export type breadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
|
13
|
+
export type tabsFormatType = 'is-boxed' | 'is-toggle';
|
package/dist/index.d.ts
CHANGED
@@ -29,12 +29,14 @@ type titleSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
|
|
29
29
|
type columnOffsetType = 'is-offset-1' | 'is-offset-2' | 'is-offset-3' | 'is-offset-4' | 'is-offset-5' | 'is-offset-6' | 'is-offset-7' | 'is-offset-8' | 'is-offset-9' | 'is-offset-10' | 'is-offset-11' | 'is-offset-12';
|
30
30
|
type basicColorType = 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 'is-ghost' | 'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
|
31
31
|
type textColorType = 'has-text-white' | 'has-text-black' | 'has-text-light' | 'has-text-dark' | 'has-text-primary' | 'has-text-link' | 'has-text-info' | 'has-text-success' | 'has-text-warning' | 'has-text-danger';
|
32
|
+
type fixedImageSizeType = 'is-16x16' | 'is-24x24' | 'is-32x32' | 'is-48x48' | 'is-64x64' | 'is-96x96' | 'is-128x128' | 'is-square' | 'is-1by1' | 'is-5by4' | 'is-4by3' | 'is-3by2' | 'is-5by3' | 'is-16by9' | 'is-2by1' | 'is-3by1' | 'is-4by5' | 'is-3by4' | 'is-2by3' | 'is-3by5' | 'is-9by16' | 'is-1by2' | 'is-1by3';
|
32
33
|
type basicSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
|
33
34
|
type reducedSizeType = Exclude<basicSizeType, 'is-normal'>;
|
34
35
|
type iconColorModeType = 'light' | 'dark';
|
35
36
|
type columnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
|
36
37
|
type elementAlignType = 'is-centered' | 'is-right';
|
37
38
|
type breadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
|
39
|
+
type tabsFormatType = 'is-boxed' | 'is-toggle';
|
38
40
|
|
39
41
|
type inputTypes = 'text' | 'password' | 'email' | 'tel';
|
40
42
|
type DropdownItemType = 'item' | 'link' | 'divider';
|
@@ -113,6 +115,14 @@ interface TagProps extends ComposedElementProps, React$1.ComponentPropsWithoutRe
|
|
113
115
|
/** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
|
114
116
|
onDeleteClick?: () => void;
|
115
117
|
}
|
118
|
+
interface ImageProps extends ComposedElementProps, React$1.ComponentPropsWithoutRef<'figure'> {
|
119
|
+
/** `Attribute` `Required` The image source that will be shown */
|
120
|
+
src: string;
|
121
|
+
/** `Styling` Will add round borders to image's shape */
|
122
|
+
fixedSize?: fixedImageSizeType;
|
123
|
+
/** `Styling` Sets image size based on one of fixed ratios/fixed sizes */
|
124
|
+
isRounded?: boolean;
|
125
|
+
}
|
116
126
|
interface BoxProps extends ElementProps, React$1.ComponentPropsWithoutRef<'section'> {
|
117
127
|
/** `Attribute` Reffers to the component or array of components that will be shown inside the box */
|
118
128
|
children?: string | React$1.ReactElement | React$1.ReactElement[];
|
@@ -286,6 +296,14 @@ interface PaginationItemProps extends ElementProps, ClickeableProps {
|
|
286
296
|
/** `Styling` Makes the item the selected one, changing its background to blue */
|
287
297
|
isSelected?: boolean;
|
288
298
|
}
|
299
|
+
interface TabItemProps extends ComposedElementProps, ClickeableProps {
|
300
|
+
/** `Attribute` `Required` The text will be shown in the `TabItem` */
|
301
|
+
text: string;
|
302
|
+
/** `Attribute` Adds an `Icon` component before the text */
|
303
|
+
icon?: IconProps;
|
304
|
+
/** `Styling` Used for Tabs styling purpose only. Will mark the tab as the one selected among its group */
|
305
|
+
isActive?: boolean;
|
306
|
+
}
|
289
307
|
|
290
308
|
declare const Button: React$1.FC<ButtonProps>;
|
291
309
|
|
@@ -325,8 +343,12 @@ declare const DropdownItem: React$1.FC<DropdownItemProps>;
|
|
325
343
|
|
326
344
|
declare const MenuItem: React$1.FC<MenuItemProps>;
|
327
345
|
|
346
|
+
declare const Image: React$1.FC<ImageProps>;
|
347
|
+
|
328
348
|
declare const PaginationItem: React$1.FC<PaginationItemProps>;
|
329
349
|
|
350
|
+
declare const TabItem: React$1.FC<TabItemProps>;
|
351
|
+
|
330
352
|
interface ButtonGroupProps extends ElementProps {
|
331
353
|
/** `Atribute` `Required` Array of `Button` objects that will be shown */
|
332
354
|
buttonList: ButtonProps[];
|
@@ -434,6 +456,26 @@ interface PaginationProps extends ComposedElementProps {
|
|
434
456
|
/** `Styling` Will adjust the pages position on screen */
|
435
457
|
alignment?: elementAlignType | null;
|
436
458
|
}
|
459
|
+
interface ModalProps extends ComposedElementProps {
|
460
|
+
/** `Attribute` Reffers to the component or array of components that will be shown inside the column */
|
461
|
+
children?: string | React.ReactElement | React.ReactElement[] | null;
|
462
|
+
/** `Function` Custom function related to the modal's close button to inject custom code if needed */
|
463
|
+
onCloseClick?: () => void;
|
464
|
+
}
|
465
|
+
interface TabsProps extends ElementProps {
|
466
|
+
/** `Attribute` `Required` List of tabs that will be shown in order */
|
467
|
+
tabs: TabItemProps[];
|
468
|
+
/** `Styling` Will adjust the tabs position on screen */
|
469
|
+
alignment?: elementAlignType;
|
470
|
+
/** `Styling` Set tab's size on bulma's size tokens */
|
471
|
+
size?: reducedSizeType;
|
472
|
+
/** `Styling` Set tab's size on bulma's size tokens */
|
473
|
+
format?: tabsFormatType;
|
474
|
+
/** `Styling` Will add round tabs borders. Only visible if `format` is set to `is-toggle` */
|
475
|
+
isRounded?: boolean;
|
476
|
+
/** `Styling` The whole container will occupy its parent container width */
|
477
|
+
isFullWidth?: boolean;
|
478
|
+
}
|
437
479
|
|
438
480
|
declare const ButtonGroup: React$1.FC<ButtonGroupProps>;
|
439
481
|
|
@@ -453,4 +495,8 @@ declare const MenuList: React$1.FC<MenuListProps>;
|
|
453
495
|
|
454
496
|
declare const Pagination: React$1.FC<PaginationProps>;
|
455
497
|
|
456
|
-
|
498
|
+
declare const Modal: React$1.FC<ModalProps>;
|
499
|
+
|
500
|
+
declare const Tabs: React$1.FC<TabsProps>;
|
501
|
+
|
502
|
+
export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Icon, Image, Input, Menu, MenuItem, MenuList, Message, Modal, Notification, Pagination, PaginationItem, ProgressBar, RadioButton, Select, TabItem, Tabs, Tag, TextArea, Title };
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "reactive-bulma",
|
3
|
-
"version": "2.
|
3
|
+
"version": "2.10.0",
|
4
4
|
"description": "A component library based on React, Bulma, Typescript and Rollup",
|
5
5
|
"keywords": [
|
6
6
|
"typescript",
|
@@ -52,60 +52,60 @@
|
|
52
52
|
"update:doctor": "npm run lint && npm run test && npm run build"
|
53
53
|
},
|
54
54
|
"devDependencies": {
|
55
|
-
"@babel/core": "^7.23.
|
56
|
-
"@babel/preset-env": "^7.23.
|
55
|
+
"@babel/core": "^7.23.7",
|
56
|
+
"@babel/preset-env": "^7.23.8",
|
57
57
|
"@babel/preset-react": "^7.23.3",
|
58
58
|
"@babel/preset-typescript": "^7.23.3",
|
59
|
-
"@mdi/font": "^7.
|
59
|
+
"@mdi/font": "^7.4.47",
|
60
60
|
"@rollup/plugin-commonjs": "^25.0.7",
|
61
61
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
62
|
-
"@rollup/plugin-typescript": "^11.1.
|
62
|
+
"@rollup/plugin-typescript": "^11.1.6",
|
63
63
|
"@semantic-release/changelog": "^6.0.3",
|
64
64
|
"@semantic-release/commit-analyzer": "^11.1.0",
|
65
65
|
"@semantic-release/exec": "^6.0.3",
|
66
66
|
"@semantic-release/git": "^10.0.1",
|
67
|
-
"@semantic-release/github": "^9.2.
|
68
|
-
"@semantic-release/npm": "^11.0.
|
67
|
+
"@semantic-release/github": "^9.2.6",
|
68
|
+
"@semantic-release/npm": "^11.0.2",
|
69
69
|
"@semantic-release/release-notes-generator": "^12.1.0",
|
70
|
-
"@storybook/addon-actions": "^7.
|
71
|
-
"@storybook/addon-essentials": "^7.
|
72
|
-
"@storybook/addon-interactions": "^7.
|
73
|
-
"@storybook/addon-links": "^7.
|
74
|
-
"@storybook/addon-mdx-gfm": "^7.
|
75
|
-
"@storybook/cli": "^7.
|
76
|
-
"@storybook/react": "^7.
|
77
|
-
"@storybook/react-webpack5": "^7.
|
70
|
+
"@storybook/addon-actions": "^7.6.8",
|
71
|
+
"@storybook/addon-essentials": "^7.6.8",
|
72
|
+
"@storybook/addon-interactions": "^7.6.8",
|
73
|
+
"@storybook/addon-links": "^7.6.8",
|
74
|
+
"@storybook/addon-mdx-gfm": "^7.6.8",
|
75
|
+
"@storybook/cli": "^7.6.8",
|
76
|
+
"@storybook/react": "^7.6.8",
|
77
|
+
"@storybook/react-webpack5": "^7.6.8",
|
78
78
|
"@storybook/testing-library": "^0.2.2",
|
79
|
-
"@testing-library/jest-dom": "^6.
|
79
|
+
"@testing-library/jest-dom": "^6.2.0",
|
80
80
|
"@testing-library/react": "^14.1.2",
|
81
|
-
"@testing-library/user-event": "^14.5.
|
82
|
-
"@types/jest": "^29.5.
|
83
|
-
"@types/react": "^18.2.
|
84
|
-
"@typescript-eslint/eslint-plugin": "^6.
|
85
|
-
"@typescript-eslint/parser": "^6.
|
81
|
+
"@testing-library/user-event": "^14.5.2",
|
82
|
+
"@types/jest": "^29.5.11",
|
83
|
+
"@types/react": "^18.2.48",
|
84
|
+
"@typescript-eslint/eslint-plugin": "^6.19.0",
|
85
|
+
"@typescript-eslint/parser": "^6.19.0",
|
86
86
|
"babel-jest": "^29.7.0",
|
87
87
|
"babel-loader": "^9.1.3",
|
88
88
|
"bulma": "^0.9.4",
|
89
|
-
"eslint": "^8.
|
90
|
-
"eslint-config-prettier": "^9.
|
89
|
+
"eslint": "^8.56.0",
|
90
|
+
"eslint-config-prettier": "^9.1.0",
|
91
91
|
"eslint-plugin-react": "^7.33.2",
|
92
92
|
"husky": "^8.0.3",
|
93
93
|
"hygen": "^6.2.11",
|
94
94
|
"jest": "^29.7.0",
|
95
95
|
"jest-environment-jsdom": "^29.7.0",
|
96
|
-
"lint-staged": "^15.
|
97
|
-
"npm-check-updates": "^16.14.
|
98
|
-
"postcss": "^8.4.
|
99
|
-
"prettier": "^3.
|
96
|
+
"lint-staged": "^15.2.0",
|
97
|
+
"npm-check-updates": "^16.14.12",
|
98
|
+
"postcss": "^8.4.33",
|
99
|
+
"prettier": "^3.2.2",
|
100
100
|
"react": "^18.2.0",
|
101
101
|
"react-dom": "^18.2.0",
|
102
|
-
"rollup": "^4.5
|
102
|
+
"rollup": "^4.9.5",
|
103
103
|
"rollup-plugin-dts": "^6.1.0",
|
104
104
|
"rollup-plugin-postcss": "^4.0.2",
|
105
|
-
"semantic-release": "^
|
106
|
-
"storybook": "^7.
|
105
|
+
"semantic-release": "^23.0.0",
|
106
|
+
"storybook": "^7.6.8",
|
107
107
|
"tslib": "^2.6.2",
|
108
|
-
"typescript": "^5.3.
|
108
|
+
"typescript": "^5.3.3"
|
109
109
|
},
|
110
110
|
"lint-staged": {
|
111
111
|
"src/**/*.(ts|tsx)": [
|