reactive-bulma 3.2.0 → 4.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +37 -28
- package/dist/cjs/index.js +45 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/atoms/TableCell/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/TableHeadCell/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/index.d.ts +2 -0
- package/dist/cjs/types/components/molecules/TableRow/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/index.d.ts +1 -0
- package/dist/cjs/types/components/organisms/Table/index.d.ts +4 -0
- package/dist/cjs/types/components/organisms/index.d.ts +1 -0
- package/dist/cjs/types/functions/jest.d.ts +2 -0
- package/dist/cjs/types/interfaces/atomProps.d.ts +8 -0
- package/dist/cjs/types/interfaces/moleculeProps.d.ts +10 -2
- package/dist/cjs/types/interfaces/organismProps.d.ts +22 -2
- package/dist/esm/index.js +42 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/atoms/TableCell/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/TableHeadCell/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/index.d.ts +2 -0
- package/dist/esm/types/components/molecules/TableRow/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/index.d.ts +1 -0
- package/dist/esm/types/components/organisms/Table/index.d.ts +4 -0
- package/dist/esm/types/components/organisms/index.d.ts +1 -0
- package/dist/esm/types/functions/jest.d.ts +2 -0
- package/dist/esm/types/interfaces/atomProps.d.ts +8 -0
- package/dist/esm/types/interfaces/moleculeProps.d.ts +10 -2
- package/dist/esm/types/interfaces/organismProps.d.ts +22 -2
- package/dist/index.d.ts +46 -2
- package/package.json +12 -12
@@ -23,3 +23,5 @@ export { default as TabItem } from './TabItem';
|
|
23
23
|
export { default as LevelHeader } from './LevelHeader';
|
24
24
|
export { default as Tile } from './Tile';
|
25
25
|
export { default as NavBarItem } from './NavBarItem';
|
26
|
+
export { default as TableHeadCell } from './TableHeadCell';
|
27
|
+
export { default as TableCell } from './TableCell';
|
@@ -19,3 +19,4 @@ export { default as Media } from './Media';
|
|
19
19
|
export { default as Section } from './Section';
|
20
20
|
export { default as NavBarBrand } from './NavBarBrand';
|
21
21
|
export { default as NavBarDropdown } from './NavBarDropdown';
|
22
|
+
export { default as TableRow } from './TableRow';
|
@@ -295,3 +295,11 @@ export interface NavBarItemProps extends ElementProps, ClickeableProps {
|
|
295
295
|
/** `Styling` Used for `NavBarDropdown` styling purpose only. Will mark the item as the one selected among its group */
|
296
296
|
isActive?: boolean;
|
297
297
|
}
|
298
|
+
export interface TableHeadCellProps extends ElementProps, ClickeableProps {
|
299
|
+
/** `Attribute` `Required` It will display cell's content, which could be text, an html tag or a custom component */
|
300
|
+
content: SingleChildType;
|
301
|
+
}
|
302
|
+
export interface TableCellProps extends ElementProps, ClickeableProps {
|
303
|
+
/** `Attribute` `Required` It will display cell's content, which could be text, an html tag or a custom component */
|
304
|
+
content: SingleChildType;
|
305
|
+
}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
|
2
|
-
import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, ImageProps, InputProps, MenuItemProps, NavBarItemProps, PaginationItemProps, TabItemProps, TileProps } from './atomProps';
|
2
|
+
import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, ImageProps, InputProps, MenuItemProps, NavBarItemProps, PaginationItemProps, TabItemProps, TableCellProps, TableHeadCellProps, TileProps } from './atomProps';
|
3
3
|
import { BasicColorType, RightCenteredAlignType, BreadcrumbSeparatorType, ColumnGapType, SizeWithoutNormalType, TabsFormatType, MediumAndLargeSizeType, RightLeftAlignType } from '../types/styleTypes';
|
4
4
|
import { ChildrenType, SingleChildType, PanelBlockItemType } from '../types/domTypes';
|
5
5
|
export interface ButtonGroupProps extends ElementProps {
|
@@ -215,9 +215,17 @@ interface BrandConfigProps extends Omit<NavBarItemProps, 'children'> {
|
|
215
215
|
children: ImageProps;
|
216
216
|
}
|
217
217
|
export interface NavBarBrandProps extends ElementProps {
|
218
|
-
/** `Attribute` `Required` Configuration object to inject a NavBarItem with a Image configuration as its children */
|
218
|
+
/** `Attribute` `Required` Configuration object to inject a `NavBarItem` with a Image configuration as its children */
|
219
219
|
brandConfig: BrandConfigProps;
|
220
220
|
/** `Styling` It sets brand's burger button as active (changing looks from a burger to a cross) */
|
221
221
|
isBurgerActive?: boolean;
|
222
222
|
}
|
223
|
+
export interface TableRowProps extends ElementProps, ClickeableProps {
|
224
|
+
/** `Attribute` Configuration object to inject a `TableHeaderCell` as row's head */
|
225
|
+
headCell?: TableHeadCellProps;
|
226
|
+
/** `Attribute` `Required` List of `TableCell` that will be rendered on the table */
|
227
|
+
listOfCells: TableCellProps[];
|
228
|
+
/** `Styling` Used for `Table` styling purpose only. Will set row's background color to indicate it has been selected by the user */
|
229
|
+
isSelected?: boolean;
|
230
|
+
}
|
223
231
|
export {};
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { ClickeableProps, ElementProps } from './commonProps';
|
2
|
-
import { InputControlProps, LevelItemProps, NavBarBrandProps, NavBarDropdownProps, PanelBlockProps, PanelTabsProps } from './moleculeProps';
|
3
|
-
import { ImageProps, NavBarItemProps, TileProps } from './atomProps';
|
2
|
+
import { InputControlProps, LevelItemProps, NavBarBrandProps, NavBarDropdownProps, PanelBlockProps, PanelTabsProps, TableRowProps } from './moleculeProps';
|
3
|
+
import { ImageProps, NavBarItemProps, TableHeadCellProps, TileProps } from './atomProps';
|
4
4
|
import { BasicColorType, SizeWithHeightType } from '../types/styleTypes';
|
5
5
|
import { ChildrenType, NavBarFixedPositionType } from '../types/domTypes';
|
6
6
|
export interface FormFieldHelperProps {
|
@@ -90,3 +90,23 @@ export interface CardProps extends ElementProps {
|
|
90
90
|
/** `Attribute` A list of footer links that will be rendered on card's bottom, below its content */
|
91
91
|
footerLinks?: CardFooterProps[];
|
92
92
|
}
|
93
|
+
export interface TableProps extends ElementProps {
|
94
|
+
/** `Attribute` `Required` Configuration object that will display table's head */
|
95
|
+
head: TableHeadCellProps[];
|
96
|
+
/** `Attribute` `Required` Configuration object that will display table's body */
|
97
|
+
body: TableRowProps[];
|
98
|
+
/** `Attribute` Configuration object that will display table's foot */
|
99
|
+
foot?: TableHeadCellProps[];
|
100
|
+
/** `Styling` It will add a Bordered styling to the table. It can be combined with other mentioned styling properties. */
|
101
|
+
isBordered?: boolean;
|
102
|
+
/** `Styling` It will add a Striped styling to the table. It can be combined with other mentioned styling properties. */
|
103
|
+
isStriped?: boolean;
|
104
|
+
/** `Styling` It will add a Narrow styling to the table. It can be combined with other mentioned styling properties. */
|
105
|
+
isNarrow?: boolean;
|
106
|
+
/** `Styling` It will add a Hoverable styling to the table. It can be combined with other mentioned styling properties. */
|
107
|
+
isHoverable?: boolean;
|
108
|
+
/** `Styling` It will add a Fullwidth styling to the table. It can be combined with other mentioned styling properties. */
|
109
|
+
isFullwidth?: boolean;
|
110
|
+
/** `Styling` Will create a container around the table in order to make it scrollable */
|
111
|
+
isContained?: boolean;
|
112
|
+
}
|
package/dist/index.d.ts
CHANGED
@@ -345,6 +345,14 @@ interface NavBarItemProps extends ElementProps, ClickeableProps {
|
|
345
345
|
/** `Styling` Used for `NavBarDropdown` styling purpose only. Will mark the item as the one selected among its group */
|
346
346
|
isActive?: boolean;
|
347
347
|
}
|
348
|
+
interface TableHeadCellProps extends ElementProps, ClickeableProps {
|
349
|
+
/** `Attribute` `Required` It will display cell's content, which could be text, an html tag or a custom component */
|
350
|
+
content: SingleChildType;
|
351
|
+
}
|
352
|
+
interface TableCellProps extends ElementProps, ClickeableProps {
|
353
|
+
/** `Attribute` `Required` It will display cell's content, which could be text, an html tag or a custom component */
|
354
|
+
content: SingleChildType;
|
355
|
+
}
|
348
356
|
|
349
357
|
declare const Button: React$1.FC<ButtonProps>;
|
350
358
|
|
@@ -396,6 +404,10 @@ declare const Tile: React$1.FC<TileProps>;
|
|
396
404
|
|
397
405
|
declare const NavBarItem: React$1.FC<NavBarItemProps>;
|
398
406
|
|
407
|
+
declare const TableHeadCell: React$1.FC<TableHeadCellProps>;
|
408
|
+
|
409
|
+
declare const TableCell: React$1.FC<TableCellProps>;
|
410
|
+
|
399
411
|
interface ButtonGroupProps extends ElementProps {
|
400
412
|
/** `Atribute` `Required` Array of `Button` objects that will be shown */
|
401
413
|
buttonList: ButtonProps[];
|
@@ -609,11 +621,19 @@ interface BrandConfigProps extends Omit<NavBarItemProps, 'children'> {
|
|
609
621
|
children: ImageProps;
|
610
622
|
}
|
611
623
|
interface NavBarBrandProps extends ElementProps {
|
612
|
-
/** `Attribute` `Required` Configuration object to inject a NavBarItem with a Image configuration as its children */
|
624
|
+
/** `Attribute` `Required` Configuration object to inject a `NavBarItem` with a Image configuration as its children */
|
613
625
|
brandConfig: BrandConfigProps;
|
614
626
|
/** `Styling` It sets brand's burger button as active (changing looks from a burger to a cross) */
|
615
627
|
isBurgerActive?: boolean;
|
616
628
|
}
|
629
|
+
interface TableRowProps extends ElementProps, ClickeableProps {
|
630
|
+
/** `Attribute` Configuration object to inject a `TableHeaderCell` as row's head */
|
631
|
+
headCell?: TableHeadCellProps;
|
632
|
+
/** `Attribute` `Required` List of `TableCell` that will be rendered on the table */
|
633
|
+
listOfCells: TableCellProps[];
|
634
|
+
/** `Styling` Used for `Table` styling purpose only. Will set row's background color to indicate it has been selected by the user */
|
635
|
+
isSelected?: boolean;
|
636
|
+
}
|
617
637
|
|
618
638
|
declare const ButtonGroup: React$1.FC<ButtonGroupProps>;
|
619
639
|
|
@@ -657,6 +677,8 @@ declare const NavBarBrand: React$1.FC<NavBarBrandProps>;
|
|
657
677
|
|
658
678
|
declare const NavBarDropdown: React$1.FC<NavBarDropdownProps>;
|
659
679
|
|
680
|
+
declare const TableRow: React$1.FC<TableRowProps>;
|
681
|
+
|
660
682
|
interface FormFieldHelperProps {
|
661
683
|
text?: string;
|
662
684
|
color?: BasicColorType;
|
@@ -744,6 +766,26 @@ interface CardProps extends ElementProps {
|
|
744
766
|
/** `Attribute` A list of footer links that will be rendered on card's bottom, below its content */
|
745
767
|
footerLinks?: CardFooterProps[];
|
746
768
|
}
|
769
|
+
interface TableProps extends ElementProps {
|
770
|
+
/** `Attribute` `Required` Configuration object that will display table's head */
|
771
|
+
head: TableHeadCellProps[];
|
772
|
+
/** `Attribute` `Required` Configuration object that will display table's body */
|
773
|
+
body: TableRowProps[];
|
774
|
+
/** `Attribute` Configuration object that will display table's foot */
|
775
|
+
foot?: TableHeadCellProps[];
|
776
|
+
/** `Styling` It will add a Bordered styling to the table. It can be combined with other mentioned styling properties. */
|
777
|
+
isBordered?: boolean;
|
778
|
+
/** `Styling` It will add a Striped styling to the table. It can be combined with other mentioned styling properties. */
|
779
|
+
isStriped?: boolean;
|
780
|
+
/** `Styling` It will add a Narrow styling to the table. It can be combined with other mentioned styling properties. */
|
781
|
+
isNarrow?: boolean;
|
782
|
+
/** `Styling` It will add a Hoverable styling to the table. It can be combined with other mentioned styling properties. */
|
783
|
+
isHoverable?: boolean;
|
784
|
+
/** `Styling` It will add a Fullwidth styling to the table. It can be combined with other mentioned styling properties. */
|
785
|
+
isFullwidth?: boolean;
|
786
|
+
/** `Styling` Will create a container around the table in order to make it scrollable */
|
787
|
+
isContained?: boolean;
|
788
|
+
}
|
747
789
|
|
748
790
|
declare const FormField: React$1.FC<FormFieldProps>;
|
749
791
|
|
@@ -759,4 +801,6 @@ declare const NavBar: React$1.FC<NavBarProps>;
|
|
759
801
|
|
760
802
|
declare const Card: React$1.FC<CardProps>;
|
761
803
|
|
762
|
-
|
804
|
+
declare const Table: React$1.FC<TableProps>;
|
805
|
+
|
806
|
+
export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, Card, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Footer, FormField, Hero, Icon, Image, Input, InputControl, Level, LevelHeader, LevelItem, Media, Menu, MenuItem, MenuList, Message, Modal, NavBar, NavBarBrand, NavBarDropdown, NavBarItem, Notification, Pagination, PaginationItem, Panel, PanelBlock, PanelTabs, ProgressBar, RadioButton, Section, Select, TabItem, Table, TableCell, TableHeadCell, TableRow, Tabs, Tag, TextArea, Tile, TileBox, TileGroup, Title };
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "reactive-bulma",
|
3
|
-
"version": "
|
3
|
+
"version": "4.0.1",
|
4
4
|
"description": "A component library based on React, Bulma, Typescript and Rollup",
|
5
5
|
"keywords": [
|
6
6
|
"typescript",
|
@@ -67,17 +67,17 @@
|
|
67
67
|
"@semantic-release/github": "^9.2.6",
|
68
68
|
"@semantic-release/npm": "^11.0.2",
|
69
69
|
"@semantic-release/release-notes-generator": "^12.1.0",
|
70
|
-
"@storybook/addon-actions": "^7.6.
|
71
|
-
"@storybook/addon-essentials": "^7.6.
|
72
|
-
"@storybook/addon-interactions": "^7.6.
|
73
|
-
"@storybook/addon-links": "^7.6.
|
74
|
-
"@storybook/addon-mdx-gfm": "^7.6.
|
75
|
-
"@storybook/cli": "^7.6.
|
76
|
-
"@storybook/react": "^7.6.
|
77
|
-
"@storybook/react-webpack5": "^7.6.
|
70
|
+
"@storybook/addon-actions": "^7.6.12",
|
71
|
+
"@storybook/addon-essentials": "^7.6.12",
|
72
|
+
"@storybook/addon-interactions": "^7.6.12",
|
73
|
+
"@storybook/addon-links": "^7.6.12",
|
74
|
+
"@storybook/addon-mdx-gfm": "^7.6.12",
|
75
|
+
"@storybook/cli": "^7.6.12",
|
76
|
+
"@storybook/react": "^7.6.12",
|
77
|
+
"@storybook/react-webpack5": "^7.6.12",
|
78
78
|
"@storybook/testing-library": "^0.2.2",
|
79
79
|
"@testing-library/jest-dom": "^6.4.0",
|
80
|
-
"@testing-library/react": "^14.
|
80
|
+
"@testing-library/react": "^14.2.0",
|
81
81
|
"@testing-library/user-event": "^14.5.2",
|
82
82
|
"@types/jest": "^29.5.11",
|
83
83
|
"@types/react": "^18.2.48",
|
@@ -93,7 +93,7 @@
|
|
93
93
|
"hygen": "^6.2.11",
|
94
94
|
"jest": "^29.7.0",
|
95
95
|
"jest-environment-jsdom": "^29.7.0",
|
96
|
-
"lint-staged": "^15.2.
|
96
|
+
"lint-staged": "^15.2.1",
|
97
97
|
"npm-check-updates": "^16.14.14",
|
98
98
|
"postcss": "^8.4.33",
|
99
99
|
"prettier": "^3.2.4",
|
@@ -103,7 +103,7 @@
|
|
103
103
|
"rollup-plugin-dts": "^6.1.0",
|
104
104
|
"rollup-plugin-postcss": "^4.0.2",
|
105
105
|
"semantic-release": "^23.0.0",
|
106
|
-
"storybook": "^7.6.
|
106
|
+
"storybook": "^7.6.12",
|
107
107
|
"tslib": "^2.6.2",
|
108
108
|
"typescript": "^5.3.3"
|
109
109
|
},
|