reactive-bulma 4.0.29 → 4.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (154) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +250 -252
  3. package/package.json +47 -36
  4. package/dist/cjs/index.js +0 -4089
  5. package/dist/cjs/index.js.map +0 -1
  6. package/dist/cjs/types/components/atoms/Block/index.d.ts +0 -4
  7. package/dist/cjs/types/components/atoms/Box/index.d.ts +0 -4
  8. package/dist/cjs/types/components/atoms/BreadcrumbItem/index.d.ts +0 -4
  9. package/dist/cjs/types/components/atoms/Button/index.d.ts +0 -4
  10. package/dist/cjs/types/components/atoms/Checkbox/index.d.ts +0 -4
  11. package/dist/cjs/types/components/atoms/Column/index.d.ts +0 -4
  12. package/dist/cjs/types/components/atoms/Delete/index.d.ts +0 -4
  13. package/dist/cjs/types/components/atoms/DropdownItem/index.d.ts +0 -4
  14. package/dist/cjs/types/components/atoms/DropdownTrigger/index.d.ts +0 -4
  15. package/dist/cjs/types/components/atoms/File/index.d.ts +0 -4
  16. package/dist/cjs/types/components/atoms/Icon/index.d.ts +0 -4
  17. package/dist/cjs/types/components/atoms/Image/index.d.ts +0 -4
  18. package/dist/cjs/types/components/atoms/Input/index.d.ts +0 -4
  19. package/dist/cjs/types/components/atoms/LevelHeader/index.d.ts +0 -4
  20. package/dist/cjs/types/components/atoms/MenuItem/index.d.ts +0 -4
  21. package/dist/cjs/types/components/atoms/NavBarItem/index.d.ts +0 -4
  22. package/dist/cjs/types/components/atoms/PaginationItem/index.d.ts +0 -4
  23. package/dist/cjs/types/components/atoms/ProgressBar/index.d.ts +0 -4
  24. package/dist/cjs/types/components/atoms/RadioButton/index.d.ts +0 -4
  25. package/dist/cjs/types/components/atoms/Select/index.d.ts +0 -4
  26. package/dist/cjs/types/components/atoms/TabItem/index.d.ts +0 -4
  27. package/dist/cjs/types/components/atoms/TableCell/index.d.ts +0 -4
  28. package/dist/cjs/types/components/atoms/TableHeadCell/index.d.ts +0 -4
  29. package/dist/cjs/types/components/atoms/Tag/index.d.ts +0 -4
  30. package/dist/cjs/types/components/atoms/TextArea/index.d.ts +0 -4
  31. package/dist/cjs/types/components/atoms/Tile/index.d.ts +0 -4
  32. package/dist/cjs/types/components/atoms/Title/index.d.ts +0 -4
  33. package/dist/cjs/types/components/atoms/index.d.ts +0 -27
  34. package/dist/cjs/types/components/molecules/Breadcrumbs/index.d.ts +0 -4
  35. package/dist/cjs/types/components/molecules/ButtonGroup/index.d.ts +0 -4
  36. package/dist/cjs/types/components/molecules/ColumnGroup/index.d.ts +0 -4
  37. package/dist/cjs/types/components/molecules/Dropdown/index.d.ts +0 -4
  38. package/dist/cjs/types/components/molecules/Footer/index.d.ts +0 -4
  39. package/dist/cjs/types/components/molecules/InputControl/index.d.ts +0 -4
  40. package/dist/cjs/types/components/molecules/LevelItem/index.d.ts +0 -4
  41. package/dist/cjs/types/components/molecules/Media/index.d.ts +0 -4
  42. package/dist/cjs/types/components/molecules/Menu/index.d.ts +0 -4
  43. package/dist/cjs/types/components/molecules/MenuList/index.d.ts +0 -4
  44. package/dist/cjs/types/components/molecules/Message/index.d.ts +0 -4
  45. package/dist/cjs/types/components/molecules/Modal/index.d.ts +0 -4
  46. package/dist/cjs/types/components/molecules/NavBarBrand/index.d.ts +0 -4
  47. package/dist/cjs/types/components/molecules/NavBarDropdown/index.d.ts +0 -4
  48. package/dist/cjs/types/components/molecules/Notification/index.d.ts +0 -4
  49. package/dist/cjs/types/components/molecules/Pagination/index.d.ts +0 -4
  50. package/dist/cjs/types/components/molecules/PanelBlock/index.d.ts +0 -4
  51. package/dist/cjs/types/components/molecules/PanelTabs/index.d.ts +0 -4
  52. package/dist/cjs/types/components/molecules/Section/index.d.ts +0 -4
  53. package/dist/cjs/types/components/molecules/TableRow/index.d.ts +0 -4
  54. package/dist/cjs/types/components/molecules/Tabs/index.d.ts +0 -4
  55. package/dist/cjs/types/components/molecules/TileBox/index.d.ts +0 -4
  56. package/dist/cjs/types/components/molecules/index.d.ts +0 -22
  57. package/dist/cjs/types/components/organisms/Card/index.d.ts +0 -4
  58. package/dist/cjs/types/components/organisms/FormField/index.d.ts +0 -4
  59. package/dist/cjs/types/components/organisms/Hero/index.d.ts +0 -4
  60. package/dist/cjs/types/components/organisms/Level/index.d.ts +0 -4
  61. package/dist/cjs/types/components/organisms/NavBar/index.d.ts +0 -4
  62. package/dist/cjs/types/components/organisms/Panel/index.d.ts +0 -4
  63. package/dist/cjs/types/components/organisms/Table/index.d.ts +0 -4
  64. package/dist/cjs/types/components/organisms/TileGroup/index.d.ts +0 -4
  65. package/dist/cjs/types/components/organisms/index.d.ts +0 -8
  66. package/dist/cjs/types/functions/generators.d.ts +0 -4
  67. package/dist/cjs/types/functions/jest.d.ts +0 -2
  68. package/dist/cjs/types/functions/parsers.d.ts +0 -14
  69. package/dist/cjs/types/functions/tests/generators.test.d.ts +0 -1
  70. package/dist/cjs/types/functions/tests/parsers.test.d.ts +0 -1
  71. package/dist/cjs/types/index.d.ts +0 -5
  72. package/dist/cjs/types/interfaces/atomProps.d.ts +0 -305
  73. package/dist/cjs/types/interfaces/commonProps.d.ts +0 -25
  74. package/dist/cjs/types/interfaces/functionProps.d.ts +0 -16
  75. package/dist/cjs/types/interfaces/moleculeProps.d.ts +0 -231
  76. package/dist/cjs/types/interfaces/organismProps.d.ts +0 -112
  77. package/dist/cjs/types/types/domTypes.d.ts +0 -16
  78. package/dist/cjs/types/types/styleTypes.d.ts +0 -19
  79. package/dist/esm/index.js +0 -4031
  80. package/dist/esm/index.js.map +0 -1
  81. package/dist/esm/types/components/atoms/Block/index.d.ts +0 -4
  82. package/dist/esm/types/components/atoms/Box/index.d.ts +0 -4
  83. package/dist/esm/types/components/atoms/BreadcrumbItem/index.d.ts +0 -4
  84. package/dist/esm/types/components/atoms/Button/index.d.ts +0 -4
  85. package/dist/esm/types/components/atoms/Checkbox/index.d.ts +0 -4
  86. package/dist/esm/types/components/atoms/Column/index.d.ts +0 -4
  87. package/dist/esm/types/components/atoms/Delete/index.d.ts +0 -4
  88. package/dist/esm/types/components/atoms/DropdownItem/index.d.ts +0 -4
  89. package/dist/esm/types/components/atoms/DropdownTrigger/index.d.ts +0 -4
  90. package/dist/esm/types/components/atoms/File/index.d.ts +0 -4
  91. package/dist/esm/types/components/atoms/Icon/index.d.ts +0 -4
  92. package/dist/esm/types/components/atoms/Image/index.d.ts +0 -4
  93. package/dist/esm/types/components/atoms/Input/index.d.ts +0 -4
  94. package/dist/esm/types/components/atoms/LevelHeader/index.d.ts +0 -4
  95. package/dist/esm/types/components/atoms/MenuItem/index.d.ts +0 -4
  96. package/dist/esm/types/components/atoms/NavBarItem/index.d.ts +0 -4
  97. package/dist/esm/types/components/atoms/PaginationItem/index.d.ts +0 -4
  98. package/dist/esm/types/components/atoms/ProgressBar/index.d.ts +0 -4
  99. package/dist/esm/types/components/atoms/RadioButton/index.d.ts +0 -4
  100. package/dist/esm/types/components/atoms/Select/index.d.ts +0 -4
  101. package/dist/esm/types/components/atoms/TabItem/index.d.ts +0 -4
  102. package/dist/esm/types/components/atoms/TableCell/index.d.ts +0 -4
  103. package/dist/esm/types/components/atoms/TableHeadCell/index.d.ts +0 -4
  104. package/dist/esm/types/components/atoms/Tag/index.d.ts +0 -4
  105. package/dist/esm/types/components/atoms/TextArea/index.d.ts +0 -4
  106. package/dist/esm/types/components/atoms/Tile/index.d.ts +0 -4
  107. package/dist/esm/types/components/atoms/Title/index.d.ts +0 -4
  108. package/dist/esm/types/components/atoms/index.d.ts +0 -27
  109. package/dist/esm/types/components/molecules/Breadcrumbs/index.d.ts +0 -4
  110. package/dist/esm/types/components/molecules/ButtonGroup/index.d.ts +0 -4
  111. package/dist/esm/types/components/molecules/ColumnGroup/index.d.ts +0 -4
  112. package/dist/esm/types/components/molecules/Dropdown/index.d.ts +0 -4
  113. package/dist/esm/types/components/molecules/Footer/index.d.ts +0 -4
  114. package/dist/esm/types/components/molecules/InputControl/index.d.ts +0 -4
  115. package/dist/esm/types/components/molecules/LevelItem/index.d.ts +0 -4
  116. package/dist/esm/types/components/molecules/Media/index.d.ts +0 -4
  117. package/dist/esm/types/components/molecules/Menu/index.d.ts +0 -4
  118. package/dist/esm/types/components/molecules/MenuList/index.d.ts +0 -4
  119. package/dist/esm/types/components/molecules/Message/index.d.ts +0 -4
  120. package/dist/esm/types/components/molecules/Modal/index.d.ts +0 -4
  121. package/dist/esm/types/components/molecules/NavBarBrand/index.d.ts +0 -4
  122. package/dist/esm/types/components/molecules/NavBarDropdown/index.d.ts +0 -4
  123. package/dist/esm/types/components/molecules/Notification/index.d.ts +0 -4
  124. package/dist/esm/types/components/molecules/Pagination/index.d.ts +0 -4
  125. package/dist/esm/types/components/molecules/PanelBlock/index.d.ts +0 -4
  126. package/dist/esm/types/components/molecules/PanelTabs/index.d.ts +0 -4
  127. package/dist/esm/types/components/molecules/Section/index.d.ts +0 -4
  128. package/dist/esm/types/components/molecules/TableRow/index.d.ts +0 -4
  129. package/dist/esm/types/components/molecules/Tabs/index.d.ts +0 -4
  130. package/dist/esm/types/components/molecules/TileBox/index.d.ts +0 -4
  131. package/dist/esm/types/components/molecules/index.d.ts +0 -22
  132. package/dist/esm/types/components/organisms/Card/index.d.ts +0 -4
  133. package/dist/esm/types/components/organisms/FormField/index.d.ts +0 -4
  134. package/dist/esm/types/components/organisms/Hero/index.d.ts +0 -4
  135. package/dist/esm/types/components/organisms/Level/index.d.ts +0 -4
  136. package/dist/esm/types/components/organisms/NavBar/index.d.ts +0 -4
  137. package/dist/esm/types/components/organisms/Panel/index.d.ts +0 -4
  138. package/dist/esm/types/components/organisms/Table/index.d.ts +0 -4
  139. package/dist/esm/types/components/organisms/TileGroup/index.d.ts +0 -4
  140. package/dist/esm/types/components/organisms/index.d.ts +0 -8
  141. package/dist/esm/types/functions/generators.d.ts +0 -4
  142. package/dist/esm/types/functions/jest.d.ts +0 -2
  143. package/dist/esm/types/functions/parsers.d.ts +0 -14
  144. package/dist/esm/types/functions/tests/generators.test.d.ts +0 -1
  145. package/dist/esm/types/functions/tests/parsers.test.d.ts +0 -1
  146. package/dist/esm/types/index.d.ts +0 -5
  147. package/dist/esm/types/interfaces/atomProps.d.ts +0 -305
  148. package/dist/esm/types/interfaces/commonProps.d.ts +0 -25
  149. package/dist/esm/types/interfaces/functionProps.d.ts +0 -16
  150. package/dist/esm/types/interfaces/moleculeProps.d.ts +0 -231
  151. package/dist/esm/types/interfaces/organismProps.d.ts +0 -112
  152. package/dist/esm/types/types/domTypes.d.ts +0 -16
  153. package/dist/esm/types/types/styleTypes.d.ts +0 -19
  154. package/dist/index.d.ts +0 -805
@@ -1,305 +0,0 @@
1
- import React from 'react';
2
- import { ElementProps, ComposedElementProps, ClickeableProps } from './commonProps';
3
- import { BasicColorType, ColumnOffsetType, ColumnSizeType, FixedImageSizeType, IconColorModeType, ElementSizeType, SizeWithoutNormalType, TextColorType, TitleSizeType, RightLeftAlignType, CommonSizeType } from '../types/styleTypes';
4
- import { DropdownItemType, InputType, ChildrenType, TileContextType, SingleChildType } from '../types/domTypes';
5
- export interface ColumnProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
6
- /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
7
- children?: ChildrenType;
8
- /** `Styling` Set column's size */
9
- size?: ColumnSizeType;
10
- /** `Styling` Set column's offset (moving it as you set its size */
11
- offset?: ColumnOffsetType;
12
- /** `Styling` Set if the column only will take the space it needs */
13
- isNarrow?: boolean;
14
- }
15
- export interface ButtonProps extends ElementProps, React.ComponentPropsWithoutRef<'button'> {
16
- /** `Attribute` The text will be shown in the `Button` */
17
- text?: string;
18
- /** `Attribute` Will disable the button */
19
- isDisabled?: boolean;
20
- /** `Styling` Color based on bulma's color tokens */
21
- color?: BasicColorType;
22
- /** `Styling` Will adjust the selected color with a ligther style */
23
- isLightColor?: boolean;
24
- /** `Styling` Will invert button's colors (typography in color and background in white or black) */
25
- isInvertedColor?: boolean;
26
- /** `Styling` Similar to `isInvertedColor`, but button's border will be colored */
27
- isOutlined?: boolean;
28
- /** `Styling` Will add round borders to button's shape */
29
- isRounded?: boolean;
30
- /** `Styling` Will change `text` for an animated spinner, but will remain clickeable */
31
- isLoading?: boolean;
32
- /** `Styling` Similar to `isDisabled`, but will remove any color style */
33
- isStatic?: boolean;
34
- /** `Styling` Sets the button style when a User selects it (useful for an attached `ButtonGroup`) */
35
- isSelected?: boolean;
36
- /** `Styling` Set button's size on bulma's size tokens */
37
- size?: ElementSizeType;
38
- /** `Function` Click function, alone does not nothing, but can be reused for other components */
39
- onClick?: () => void;
40
- }
41
- export interface ProgressBarProps extends ElementProps, React.ComponentPropsWithoutRef<'progress'> {
42
- /** `Attribute` Sets colored bar at the level against `max` value (`100` by default) */
43
- value?: number;
44
- /** `Attribute` Sets the entire bar length comparing with current `value` */
45
- max?: number;
46
- /** `Styling` Color based on bulma's color tokens */
47
- color?: BasicColorType;
48
- /** `Styling` Set progress bar's size */
49
- size?: ElementSizeType;
50
- /** `Styling` Will change `value` for an animated loading */
51
- isLoading?: boolean;
52
- }
53
- export interface BlockProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
54
- /** `Attribute` Reffers to the component or array of components that will be shown inside the block */
55
- children?: ChildrenType;
56
- }
57
- export interface TagProps extends ComposedElementProps, React.ComponentPropsWithoutRef<'span'> {
58
- /** `Attribute` `Required` The text will be shown in the `Tag` */
59
- text: string;
60
- /** `Attribute` Will add a delete button (for both single or addon cases) */
61
- withDelete?: boolean;
62
- /** `Attribute` Will add a second tag element (that could have its own text, color and delete) */
63
- withAddon?: boolean;
64
- /** `Attribute` The text will be shown in the tag's addon */
65
- addonText?: string;
66
- /** `Styling` Color based on bulma's color tokens */
67
- color?: BasicColorType;
68
- /** `Styling` Will adjust the selected color with a ligther style */
69
- isLight?: boolean;
70
- /** `Styling` Will add round borders to tag's shape */
71
- isRounded?: boolean;
72
- /** `Styling` Set tag's size */
73
- size?: SizeWithoutNormalType;
74
- /** `Styling` Color on tag's addon based on bulma's color tokens */
75
- addonColor?: BasicColorType;
76
- /** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
77
- onDeleteClick?: () => void;
78
- }
79
- export interface ImageProps extends ComposedElementProps, React.ComponentPropsWithoutRef<'figure'> {
80
- /** `Attribute` `Required` The image source that will be shown */
81
- src: string;
82
- /** `Attribute` A description text for the image, useful for accessibility purposes */
83
- alt?: string;
84
- /** `Styling` Will add round borders to image's shape */
85
- fixedSize?: FixedImageSizeType;
86
- /** `Styling` Sets image size based on one of fixed ratios/fixed sizes */
87
- isRounded?: boolean;
88
- }
89
- export interface BoxProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
90
- /** `Attribute` Reffers to the component or array of components that will be shown inside the box */
91
- children?: ChildrenType;
92
- }
93
- export interface TitleSectionProps extends ElementProps, React.ComponentPropsWithoutRef<'p'> {
94
- /** `Attribute` Sets the text you want to show */
95
- text: string;
96
- /** `Styling` Set text size */
97
- size?: TitleSizeType;
98
- /** `Styling` Set type of title (`title` at top, `subtitle` at below) */
99
- type: 'title' | 'subtitle';
100
- /** `Styling` Set text spacing at default or maximun length */
101
- isSpaced?: boolean;
102
- }
103
- export interface TitleProps {
104
- /** `Attribute` Main title configuration object */
105
- main?: TitleSectionProps;
106
- /** `Attribute` Subtitle title configuration object */
107
- secondary?: TitleSectionProps;
108
- }
109
- export interface IconProps extends ComposedElementProps {
110
- /** `Attribute` `Required` Sets the icon key work based on [Material Design icon list](https://pictogrammers.com/library/mdi/) */
111
- iconLabel: string;
112
- /** `Attribute` Sets the text you want to show next to the icon */
113
- text?: string;
114
- /** `Styling` Color based on bulma's text color tokens */
115
- color?: TextColorType;
116
- /** `Styling` Set icons's size */
117
- size?: SizeWithoutNormalType;
118
- /** `Styling` Special usage in case you want to set as dark or light mode */
119
- colorMode?: IconColorModeType;
120
- /** `Styling` Animates the icon spinning 360° */
121
- isSpinning?: boolean;
122
- /** `Styling` Used for `InputControl` styling purpose only. Will move the Icon itself to control's Input side */
123
- position?: RightLeftAlignType;
124
- }
125
- export interface InputProps extends ElementProps, ClickeableProps {
126
- /** `Attribute` `Required` What type of input will be used */
127
- type: InputType;
128
- /** `Attribute` The value that will be shown on the input */
129
- text?: string;
130
- /** `Attribute` The text that will be shown if the user does not type any value */
131
- placeholder?: string;
132
- /** `Attribute` Will disable the input */
133
- isDisabled?: boolean;
134
- /** `Attribute` Will show the input as a normal one, but is not editable and has no shadow */
135
- isReadonly?: boolean;
136
- /** `Styling` Color based on bulma's text color tokens */
137
- color?: BasicColorType;
138
- /** `Styling` Set input's size */
139
- size?: SizeWithoutNormalType;
140
- /** `Styling` Will add round borders to input's shape */
141
- isRounded?: boolean;
142
- /** `Styling` Will add a specific border when the input is hovered by the user */
143
- isHovered?: boolean;
144
- /** `Styling` Will add a specific border when the input is focused by the user */
145
- isFocused?: boolean;
146
- /** `Function` Reffers to each time the user press a key. Alone does not nothing, but can be reused for other components */
147
- onChange?: () => void;
148
- }
149
- export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
150
- /** `Attribute` Text area's columns value that sets its width */
151
- cols?: number;
152
- /** `Attribute` Text area's rows value that sets its height */
153
- rows?: number;
154
- /** `Styling` Will disable characteristic sizable property by removing its control on bottom-right corner */
155
- isFixedSize?: boolean;
156
- }
157
- export interface DeleteProps extends ElementProps, ClickeableProps {
158
- /** `Styling` Set icons's size */
159
- size?: SizeWithoutNormalType;
160
- }
161
- export interface SelectOption {
162
- id: string | number;
163
- name: string;
164
- selected?: boolean;
165
- }
166
- export interface SelectProps extends ComposedElementProps, ClickeableProps {
167
- /** `Attribute` Indicates the options contained on the select */
168
- options?: SelectOption[];
169
- /** `Attribute` Indicates how many options will be shown at first glance (before looking for the whole list */
170
- showOptions?: number;
171
- /** `Attribute` Will allow multiple selection */
172
- isMultiple?: boolean;
173
- /** `Styling` Color based on bulma's color tokens */
174
- color?: BasicColorType;
175
- /** `Styling` Set select's size */
176
- size?: ElementSizeType;
177
- /** `Styling`Will add round borders to input's shape */
178
- isRounded?: boolean;
179
- /** `Styling`Will add a specific border when the input is hovered by the user */
180
- isHovered?: boolean;
181
- /** `Styling`Will add a specific border when the input is focused by the user */
182
- isFocused?: boolean;
183
- }
184
- export interface FileProps extends ComposedElementProps, ClickeableProps {
185
- /** `Attribute` The name of the file to be uploaded */
186
- fileName?: string;
187
- /** `Attribute` The icon displayed in file's button" */
188
- uploadIcon?: IconProps;
189
- /** `Attribute` The text displayed in file's button */
190
- uploadText?: string;
191
- /** `Styling` Changes button's position to its right */
192
- buttonOnRight?: boolean;
193
- /** `Styling` The whole container (button and file name) will occupy its parent container width */
194
- isFullWidth?: boolean;
195
- /** `Styling` Changes styling to a box style, making the button bigger and file name's position below the button */
196
- isBoxed?: boolean;
197
- /** `Styling` Color based on bulma's color tokens */
198
- color?: BasicColorType;
199
- /** `Styling` Set button's size */
200
- size?: ElementSizeType;
201
- }
202
- export interface CheckBoxProps extends ComposedElementProps {
203
- /** `Attribute` Sets checkbox's text that will be shown next to its control */
204
- content?: ChildrenType;
205
- /** `Attribute` Will disable the checkbox */
206
- isDisabled?: boolean;
207
- /** `Function` Click function, alone does not nothing, but can be reused for other components */
208
- onChange?: () => void;
209
- }
210
- export interface RadioButtonItemProps extends Pick<ElementProps, 'testId' | 'style'> {
211
- /** `Attribute` `Required` Sets checkbox's text*/
212
- label: string;
213
- /** `Attribute` Sets the name that will relate this checkbox with the others */
214
- name?: string;
215
- /** `Attribute` Shows the checkbox as checked or unchecked */
216
- isChecked?: boolean;
217
- /** `Attribute` Will disable the checkbox */
218
- isDisabled?: boolean;
219
- /** `Function` Click function, alone does not nothing, but can be reused for other components */
220
- onChange?: () => void;
221
- }
222
- export interface RadioButtonProps extends ComposedElementProps {
223
- /** `Attribute` `Required` Indicates the options contained to be selected */
224
- options: RadioButtonItemProps[];
225
- /** `Attribute` `Required` Sets the name that will relate this checkbox with the others */
226
- name: string;
227
- /** `Function` Click function, alone does not nothing, but can be reused for other components */
228
- onChange?: () => void;
229
- }
230
- export interface BreadcrumbItemProps extends ComposedElementProps, ClickeableProps {
231
- /** `Attribute` `Required` Indicates item text that will be shown */
232
- text: string;
233
- /** `Styling` Marks the item as the one where user is located (based on breadcrumb hierarchy) */
234
- isActiveItem?: boolean;
235
- }
236
- export interface DropdownTriggerProps extends ComposedElementProps, ClickeableProps {
237
- /** `Attribute` `Required` Sets the name will be shown on the dropdown input */
238
- menuText: string;
239
- /** `Attribute` Sets a relationship between trigger's button and dropdown's menu to toggle display */
240
- dropdownPointer?: string;
241
- }
242
- export interface DropdownItemProps extends ElementProps, ClickeableProps {
243
- /** `Attribute` `Required` Sets the name will be shown on the item */
244
- itemText: string;
245
- /** `Attribute` Changes item's composition into a `<hr>`, a `<a>` or a `<div>` depending its type */
246
- type?: DropdownItemType;
247
- /** `Styling` Marks the item as the one where user is located (based on dropdown hierarchy) */
248
- isActiveItem?: boolean;
249
- }
250
- export interface MenuItemProps extends ElementProps, ClickeableProps {
251
- /** `Attribute` `Required` Sets the text will be shown on the menu item */
252
- text: string;
253
- /** `Styling` Generates a blue background to mark the item as the active one in the `MenuList` */
254
- isActive?: boolean;
255
- }
256
- export interface PaginationItemProps extends ElementProps, ClickeableProps {
257
- /** `Attribute` `Required` Sets the number string that will be shown in the item and in its title when user hovers it */
258
- text: string | number;
259
- /** `Attribute` Sets a custom text before the `text` when user hovers the item */
260
- labelText?: string;
261
- /** `Attribute` Sets a custom text before the `text` when user hovers the item if is the current one */
262
- currentLabelText?: string;
263
- /** `Styling` Makes the item the selected one, changing its background to blue */
264
- isSelected?: boolean;
265
- }
266
- export interface TabItemProps extends ComposedElementProps, ClickeableProps {
267
- /** `Attribute` `Required` The text will be shown in the `TabItem` */
268
- text: string;
269
- /** `Attribute` Adds an `Icon` component before the text */
270
- icon?: IconProps;
271
- /** `Styling` Used for `Tabs` styling purpose only. Will mark the tab as the one selected among its group */
272
- isActive?: boolean;
273
- }
274
- export interface LevelHeaderProps extends ElementProps {
275
- /** `Attribute` `Required` A title in smaller size */
276
- header: string;
277
- /** `Attribute` `Required` Main value (numeric or text) to be shown in a bigger scale below `header` */
278
- value: string | number;
279
- }
280
- export interface TileProps extends ElementProps {
281
- /** `Attribute` Reffers to the component or array of components that will be shown inside the tile */
282
- children?: ChildrenType;
283
- /** `Attribute` Indicates its hierarchy level based on [Bulma documantation](https://bulma.io/documentation/layout/tiles/#nesting-requirements). Selection any level besides `is-child` will invalidate any `color` you select */
284
- context?: TileContextType;
285
- /** `Styling` Set tile's size */
286
- size?: CommonSizeType;
287
- /** `Styling` Color based on bulma's color tokens */
288
- color?: BasicColorType;
289
- /** `Styling` Used for hierarchy level as ancestor or parent. It selects its children in a vertical format (like a column) */
290
- isVertical?: boolean;
291
- }
292
- export interface NavBarItemProps extends ElementProps, ClickeableProps {
293
- /** `Attribute` `Required` Reffers to the component or string that will be shown inside the item */
294
- children: SingleChildType;
295
- /** `Styling` Used for `NavBarDropdown` styling purpose only. Will mark the item as the one selected among its group */
296
- isActive?: boolean;
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,25 +0,0 @@
1
- export interface ContainerProps {
2
- /** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
3
- containerTestId?: string;
4
- /** `Attribute` *For container case*. Custom CSS classes, applicable for specific scenarios */
5
- containerCssClasses?: string;
6
- /** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
7
- containerStyle?: React.CSSProperties;
8
- }
9
- export interface ElementProps {
10
- /** `Attribute` ID used to locate the element in unit test suites (like Jest) */
11
- testId?: string;
12
- /** `Attribute` Custom CSS classes, applicable for specific scenarios */
13
- cssClasses?: string;
14
- /** `Attribute` Custom styling applicable for specific scenarios */
15
- style?: React.CSSProperties;
16
- }
17
- export interface ComposedElementProps extends ElementProps, ContainerProps {
18
- }
19
- export interface ClickeableProps {
20
- /** `Function` Click function, alone does not nothing, but can be reused for other components */
21
- onClick?: () => void;
22
- }
23
- export interface GenericObjectProps {
24
- [key: string]: string | number | boolean | object;
25
- }
@@ -1,16 +0,0 @@
1
- import { GenericObjectProps } from './commonProps';
2
- interface RegExpRule {
3
- regExp?: RegExp;
4
- replacer?: string;
5
- }
6
- export interface ParseTestIdProps {
7
- tag: string;
8
- parsedClasses: string;
9
- rules?: RegExpRule[];
10
- separator?: string;
11
- }
12
- export interface CreateObjArrayProps {
13
- numberOfItems?: number;
14
- externalParser?: (i: number) => GenericObjectProps;
15
- }
16
- export {};
@@ -1,231 +0,0 @@
1
- import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
2
- import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, ImageProps, InputProps, MenuItemProps, NavBarItemProps, PaginationItemProps, TabItemProps, TableCellProps, TableHeadCellProps, TileProps } from './atomProps';
3
- import { BasicColorType, RightCenteredAlignType, BreadcrumbSeparatorType, ColumnGapType, SizeWithoutNormalType, TabsFormatType, MediumAndLargeSizeType, RightLeftAlignType } from '../types/styleTypes';
4
- import { ChildrenType, SingleChildType, PanelBlockItemType } from '../types/domTypes';
5
- export interface ButtonGroupProps extends ElementProps {
6
- /** `Atribute` `Required` Array of `Button` objects that will be shown */
7
- buttonList: ButtonProps[];
8
- /** `Styling` Will group the list of buttonList in a single line */
9
- isAttached?: boolean;
10
- /** `Styling` Sets group position on the container */
11
- position?: 'left' | 'centered' | 'right';
12
- }
13
- export interface ColumnGroupProps extends ElementProps {
14
- /** `Atribute` `Required` Array of `Column` objects that will be shown */
15
- listOfColumns: ColumnProps[];
16
- /** `Styling` Will adjust column structure display layout in case you want to work on mobiles */
17
- isMobileLayout?: boolean;
18
- /** `Styling` Will reorder column display in multiple lines each time exceeds viewport width */
19
- isMultiline?: boolean;
20
- /** `Styling` Will center the list of columns vertically */
21
- isVerticallyCentered?: boolean;
22
- /** `Styling` Will center the list of columns horizontally */
23
- isHorizontallyCentered?: boolean;
24
- /** `Styling` Will adjust the space between the columns. In case to set null, it will remove those gaps */
25
- gap?: ColumnGapType | null;
26
- }
27
- export interface NotificationProps extends ElementProps {
28
- /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
29
- children?: ChildrenType;
30
- /** `Atribute` Includes a `Delete` config object that will be shown */
31
- deleteButton?: DeleteProps;
32
- /** `Styling` Color based on bulma's color tokens */
33
- color?: BasicColorType;
34
- /** `Styling` Will adjust the selected color with a ligther style */
35
- isLightColor?: boolean;
36
- }
37
- export interface BreadcrumbsProps extends ComposedElementProps {
38
- /** `Atribute` `Required` Array of `BreadcrumbItems` objects that will be shown */
39
- items: BreadcrumbItemProps[];
40
- /** `Styling` Will adjust element position on screen */
41
- alignment?: RightCenteredAlignType | null;
42
- /** `Styling` Will adjust element position on screen */
43
- separator?: BreadcrumbSeparatorType | null;
44
- /** `Styling` Set breadcrumb's size on bulma's size tokens */
45
- size?: SizeWithoutNormalType;
46
- }
47
- export interface DropdownProps extends ElementProps {
48
- /** `Atribute` `Required` Sets the name will be shown on the dropdown input */
49
- inputText: string;
50
- /** `Attribute` Sets a relationship between dropdown trigger's button and dropdown's menu to toggle display */
51
- dropdownPointer?: string;
52
- /** `Atribute` `Required` Array of `DropdownItem` objects that will be shown on its menu */
53
- listOfItems: DropdownItemProps[];
54
- }
55
- export interface MessageProps extends ElementProps {
56
- /** `Atribute` Sets the header's text that will be shown on message's darker zone */
57
- headerText?: string;
58
- /** `Atribute` `Required` Sets the body's text that will be shown on message's lighter zone */
59
- bodyText: string;
60
- /** `Atribute` Includes a `Delete` config object that will be shown */
61
- deleteButton?: DeleteProps;
62
- /** `Styling` Color based on bulma's color tokens */
63
- color?: BasicColorType;
64
- /** `Styling` Set button's size on bulma's size tokens */
65
- size?: SizeWithoutNormalType;
66
- }
67
- interface MenuSubListProps {
68
- subListTitle: MenuItemProps;
69
- subItems: MenuItemProps[];
70
- }
71
- type MenuListItemType = MenuItemProps | MenuSubListProps;
72
- export interface MenuListProps extends ElementProps {
73
- /** `Attribute` `Required` List of menu items that can be used as single ones or in a list/sublist format */
74
- itemList: Array<MenuListItemType>;
75
- }
76
- interface MenuSectionProps {
77
- /** `Attribute` `Required` Label that will be show at the beginning of each section */
78
- label: string;
79
- /** `Attribute` `Required` List of menu items that can be used as single ones or in a list/sublist format */
80
- itemList: Array<MenuListItemType>;
81
- }
82
- export interface MenuProps extends ElementProps {
83
- /** `Attribute` `Required` List of sections that can be single or second level MenuItems */
84
- menuSections: MenuSectionProps[];
85
- }
86
- export interface PaginationNavigationButtonProps extends ClickeableProps {
87
- /** `Attribute` `Required` Text that will be shown on the button */
88
- text: string;
89
- /** `Attribute` Will disable the button */
90
- isDisabled?: boolean;
91
- /** `Attribute` Custom CSS classes, applicable for specific scenarios */
92
- cssClasses?: string;
93
- }
94
- export interface PaginationProps extends ComposedElementProps {
95
- /** `Attribute` `Required` List of sections that can be single or second level MenuItems */
96
- pages: PaginationItemProps[];
97
- /** `Attribute` Adds a couple of ellipsis between the first and last item */
98
- hasEllipsis?: boolean;
99
- /** `Attribute` Number of items that will be hidden if `hasEllipsis` is `true` */
100
- ellipsisItems?: number;
101
- /** `Attribute` Toogle `Previous` and `Next page` buttons next to the selectable pages */
102
- showPreviousPageButton?: PaginationNavigationButtonProps | null;
103
- /** `Attribute` Toogle `Previous` and `Next page` buttons next to the selectable pages */
104
- showNextPageButton?: PaginationNavigationButtonProps | null;
105
- /** `Styling` Will add round borders to each page's shape */
106
- isRounded?: boolean;
107
- /** `Styling` Set button's size on bulma's size tokens */
108
- size?: SizeWithoutNormalType;
109
- /** `Styling` Will adjust the pages position on screen */
110
- alignment?: RightCenteredAlignType | null;
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?: ChildrenType | 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?: RightCenteredAlignType;
123
- /** `Styling` Set tab's size on bulma's size tokens */
124
- size?: SizeWithoutNormalType;
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
- }
132
- export interface InputControlProps extends ElementProps {
133
- /** `Attribute` `Required` control's input configuration which will be wrapped */
134
- inputConfig: InputProps;
135
- /** `Attribute` `Icon` configuration that will be shown in Input's left side */
136
- leftIcon?: IconProps;
137
- /** `Attribute` `Icon` configuration that will be shown in Input's right side */
138
- rightIcon?: IconProps;
139
- /** `Styling` Set control and its input size on bulma's size tokens */
140
- size?: SizeWithoutNormalType;
141
- /** `Styling` Will add an animated spinner on input's right side */
142
- isLoading?: boolean;
143
- /** `Styling` Used for `FormField` styling purpose only. Will strech the input and its container in full-width */
144
- isExpanded?: boolean;
145
- }
146
- export interface PanelBlockItemProps {
147
- /** `Attribute` `Required` Indicates to component's parser which type of component will be rendered based on its option */
148
- type: PanelBlockItemType;
149
- /** `Attribute` `Required` The component properties that will configure that specific instance */
150
- props: InputControlProps | IconProps | ButtonProps;
151
- }
152
- export interface PanelBlockProps extends ComposedElementProps, ClickeableProps {
153
- /** `Attribute` `Required` Configuration object with a type and a set of props based on the available components that could be rendered in each `PanelBlock` */
154
- config: PanelBlockItemProps;
155
- /** `Attribute` Usable when config's U is `icon` only. It will display a text next to mentioned icon (for user purposes) */
156
- blockText?: string;
157
- /** `Styling` Used for `PanelBlock` styling purpose only. Will mark its rendered component as the one selected among its group */
158
- isActive?: boolean;
159
- }
160
- export interface PanelTabItem extends ClickeableProps {
161
- /** `Attribute` `Required` Will show the text to the user in shape of tab */
162
- text: string;
163
- /** `Styling` Used for `PanelTab` styling purpose only. Will mark its rendered component as the one selected among its group */
164
- isActive?: boolean;
165
- }
166
- export interface PanelTabsProps extends ElementProps {
167
- /** `Attribute` `Required` A list of configuration objects that will render a set of tabs */
168
- tabList: PanelTabItem[];
169
- }
170
- export interface LevelItemProps extends ElementProps {
171
- /** `Attribute` `Required` Reffers to the component or string content that will be shown inside the level */
172
- content: SingleChildType;
173
- /** `Styling` Centers item's content horizontally */
174
- isCentered?: boolean;
175
- }
176
- export interface TileBoxProps extends TileProps {
177
- }
178
- export interface FooterProps extends ComposedElementProps {
179
- /** `Attribute` `Required` Reffers to the component, list of components or string content that will be shown inside the footer */
180
- content: ChildrenType;
181
- /** `Styling` Centers footer¿s content horizontally */
182
- isContentCentered?: boolean;
183
- }
184
- export interface MediaProps extends ElementProps {
185
- /** `Attribute` Reffers to the component or string content that will be shown inside the component's left side */
186
- leftContent?: SingleChildType;
187
- /** `Attribute` Reffers to the component or string content that will be shown inside the component's center */
188
- centerContent?: SingleChildType;
189
- /** `Attribute` Reffers to the component or string content that will be shown inside the component's right side */
190
- rightContent?: SingleChildType;
191
- }
192
- export interface SectionProps extends ElementProps {
193
- /** `Attribute` `Required` Reffers to the component or string content that will be shown inside the section */
194
- content: SingleChildType;
195
- /** `Styling` Set button's size on bulma's size tokens */
196
- size?: MediumAndLargeSizeType;
197
- }
198
- export interface NavBarDropdownProps extends ComposedElementProps {
199
- /** `Attribute` `Required` It will show the presentation text to be clicked or hovered in order to display its menu */
200
- text: string;
201
- /** `Attribute` `Required` A list of configuration objects that will render in dropdown's menu. Those can be items or dividers */
202
- items: Array<NavBarItemProps | 'divider'>;
203
- /** `Styling` Used for `NavBar` styling purpose only. Will set the dropdown on a specific position based on the proveded value */
204
- position?: RightLeftAlignType;
205
- /** `Styling` Used to display dropdown's menu when user clicks on its text */
206
- isActive?: boolean;
207
- /** `Styling` Similar to `isActive`, but will display when user hovers its pointer on its text */
208
- isHoverable?: boolean;
209
- /** `Styling` Sets dropdown's menu on top of the text instead default styling */
210
- hasDropdownUp?: boolean;
211
- /** `Styling` Sets dropdown's menu design like a box, also adds some animation when its diplayed */
212
- hasBoxedMenu?: boolean;
213
- }
214
- interface BrandConfigProps extends Omit<NavBarItemProps, 'children'> {
215
- children: ImageProps;
216
- }
217
- export interface NavBarBrandProps extends ElementProps {
218
- /** `Attribute` `Required` Configuration object to inject a `NavBarItem` with a Image configuration as its children */
219
- brandConfig: BrandConfigProps;
220
- /** `Styling` It sets brand's burger button as active (changing looks from a burger to a cross) */
221
- isBurgerActive?: boolean;
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
- }
231
- export {};