reactive-bulma 2.9.0 → 2.11.0

package/dist/cjs/types/components/atoms/TabItem/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TabItemProps } from '../../../interfaces/atomProps';
+declare const TabItem: React.FC<TabItemProps>;
+export default TabItem;

package/dist/cjs/types/components/atoms/index.d.ts

@@ -19,3 +19,4 @@ export { default as DropdownItem } from './DropdownItem';
 export { default as MenuItem } from './MenuItem';
 export { default as Image } from './Image';
 export { default as PaginationItem } from './PaginationItem';
+export { default as TabItem } from './TabItem';

package/dist/cjs/types/components/molecules/FormField/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FormFieldProps } from '../../../interfaces/moleculeProps';
+declare const FormField: React.FC<FormFieldProps>;
+export default FormField;

package/dist/cjs/types/components/molecules/InputControl/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { InputControlProps } from '../../../interfaces/moleculeProps';
+declare const InputControl: React.FC<InputControlProps>;
+export default InputControl;

package/dist/cjs/types/components/molecules/Tabs/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TabsProps } from '../../../interfaces/moleculeProps';
+declare const Tabs: React.FC<TabsProps>;
+export default Tabs;

package/dist/cjs/types/components/molecules/index.d.ts

@@ -8,3 +8,6 @@ export { default as Menu } from './Menu';
 export { default as MenuList } from './MenuList';
 export { default as Pagination } from './Pagination';
 export { default as Modal } from './Modal';
+export { default as Tabs } from './Tabs';
+export { default as InputControl } from './InputControl';
+export { default as FormField } from './FormField';

package/dist/cjs/types/functions/parsers.d.ts

@@ -1,4 +1,5 @@
-import { ParseTestIdProps } from '../interfaces/functionProps';
+import { GenericObjectProps } from '../interfaces/commonProps';
+import { CreateObjArrayProps, ParseTestIdProps } from '../interfaces/functionProps';
 /**
  * @param { Array<string | null> } _classes `Required`. Array of classNames on `string` (or `null`) values
  * @returns { string } A single string product of merge all classNames, separated by spaces
@@ -13,3 +14,4 @@ export declare const parseClasses: (_classes: Array<string | null | undefined>)
  */
 export declare const parseTestId: (config: ParseTestIdProps) => string;
 export declare const parseKey: (max?: number, min?: number) => string;
+export declare const createObjArray: <ImportedProps>({ numberOfItems, externalParser }?: CreateObjArrayProps) => ImportedProps[] | GenericObjectProps[];

package/dist/cjs/types/interfaces/atomProps.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ElementProps, ComposedElementProps, ClickeableProps } from './commonProps';
-import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType, reducedSizeType } from '../types/styleTypes';
+import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, elementSizeType, sizeWithoutNormalType, textColorType, titleSizeType, rightLeftAlignType } from '../types/styleTypes';
 import { DropdownItemType, inputTypes } from '../types/domTypes';
 export interface ColumnProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
@@ -27,14 +27,14 @@ export interface ButtonProps extends ElementProps, React.ComponentPropsWithoutRe
     isOutlined?: boolean;
     /** `Styling` Will add round borders to button's shape */
     isRounded?: boolean;
-    /** `Styling` Will change `text` for a animated spinner, but will remain clickeable */
+    /** `Styling` Will change `text` for an animated spinner, but will remain clickeable */
     isLoading?: boolean;
     /** `Styling` Similar to `isDisabled`, but will remove any color style */
     isStatic?: boolean;
     /** `Styling` Sets the button style when a User selects it (useful for an attached `ButtonGroup`) */
     isSelected?: boolean;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: basicSizeType;
+    size?: elementSizeType;
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
@@ -46,8 +46,8 @@ export interface ProgressBarProps extends ElementProps, React.ComponentPropsWith
     /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
     /** `Styling` Set progress bar's size */
-    size?: basicSizeType;
-    /** `Styling` Will change `value` for a animated loading */
+    size?: elementSizeType;
+    /** `Styling` Will change `value` for an animated loading */
     isLoading?: boolean;
 }
 export interface BlockProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
@@ -70,7 +70,7 @@ export interface TagProps extends ComposedElementProps, React.ComponentPropsWith
     /** `Styling` Will add round borders to tag's shape */
     isRounded?: boolean;
     /** `Styling` Set tag's size */
-    size?: reducedSizeType;
+    size?: sizeWithoutNormalType;
     /** `Styling` Color on tag's addon based on bulma's color tokens */
     addonColor?: basicColorType;
     /** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
@@ -79,6 +79,8 @@ export interface TagProps extends ComposedElementProps, React.ComponentPropsWith
 export interface ImageProps extends ComposedElementProps, React.ComponentPropsWithoutRef<'figure'> {
     /** `Attribute` `Required` The image source that will be shown */
     src: string;
+    /** `Attribute` A description text for the image, useful for accessibility purposes */
+    alt?: string;
     /** `Styling` Will add round borders to image's shape */
     fixedSize?: fixedImageSizeType;
     /** `Styling` Sets image size based on one of fixed ratios/fixed sizes */
@@ -112,17 +114,21 @@ export interface IconProps extends ComposedElementProps {
     /** `Styling` Color based on bulma's text color tokens */
     color?: textColorType;
     /** `Styling` Set icons's size */
-    size?: reducedSizeType;
+    size?: sizeWithoutNormalType;
     /** `Styling` Special usage in case you want to set as dark or light mode */
     colorMode?: iconColorModeType;
     /** `Styling` Animates the icon spinning 360° */
     isSpinning?: boolean;
+    /** `Styling` Used for `InputControl` styling purpose only. Will move the Icon itself to control's Input side */
+    position?: rightLeftAlignType;
 }
 export interface InputProps extends ElementProps, ClickeableProps {
     /** `Attribute` `Required` What type of input will be used */
     type: inputTypes;
     /** `Attribute` The value that will be shown on the input */
     text?: string;
+    /** `Attribute` The text that will be shown if the user does not type any value */
+    placeholder?: string;
     /** `Attribute` Will disable the input */
     isDisabled?: boolean;
     /** `Attribute` Will show the input as a normal one, but is not editable and has no shadow */
@@ -130,7 +136,7 @@ export interface InputProps extends ElementProps, ClickeableProps {
     /** `Styling` Color based on bulma's text color tokens */
     color?: basicColorType;
     /** `Styling` Set input's size */
-    size?: basicSizeType;
+    size?: sizeWithoutNormalType;
     /** `Styling` Will add round borders to input's shape */
     isRounded?: boolean;
     /** `Styling` Will add a specific border when the input is hovered by the user */
@@ -150,7 +156,7 @@ export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
 }
 export interface DeleteProps extends ElementProps, ClickeableProps {
     /** `Styling` Set icons's size */
-    size?: reducedSizeType;
+    size?: sizeWithoutNormalType;
 }
 export interface SelectOption {
     id: string | number;
@@ -167,7 +173,7 @@ export interface SelectProps extends ComposedElementProps, ClickeableProps {
     /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
     /** `Styling` Set select's size */
-    size?: basicSizeType;
+    size?: elementSizeType;
     /** `Styling`Will add round borders to input's shape */
     isRounded?: boolean;
     /** `Styling`Will add a specific border when the input is hovered by the user */
@@ -191,7 +197,7 @@ export interface FileProps extends ComposedElementProps, ClickeableProps {
     /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
     /** `Styling` Set button's size */
-    size?: basicSizeType;
+    size?: elementSizeType;
 }
 export interface CheckBoxProps extends ComposedElementProps {
     /** `Attribute` Sets checkbox's text that will be shown next to its control */
@@ -250,10 +256,18 @@ export interface MenuItemProps extends ElementProps, ClickeableProps {
 export interface PaginationItemProps extends ElementProps, ClickeableProps {
     /** `Attribute` `Required` Sets the number string that will be shown in the item and in its title when user hovers it */
     text: string | number;
-    /** `Attribute` Sets the custom text before the `text` when user hovers the item */
+    /** `Attribute` Sets a custom text before the `text` when user hovers the item */
     labelText?: string;
-    /** `Attribute` Sets the custom text before the `text` when user hovers the item if is the current one */
+    /** `Attribute` Sets a custom text before the `text` when user hovers the item if is the current one */
     currentLabelText?: string;
     /** `Styling` Makes the item the selected one, changing its background to blue */
     isSelected?: boolean;
 }
+export interface TabItemProps extends ComposedElementProps, ClickeableProps {
+    /** `Attribute` `Required` The text will be shown in the `TabItem` */
+    text: string;
+    /** `Attribute` Adds an `Icon` component before the text */
+    icon?: IconProps;
+    /** `Styling` Used for `Tabs` styling purpose only. Will mark the tab as the one selected among its group */
+    isActive?: boolean;
+}

package/dist/cjs/types/interfaces/commonProps.d.ts

@@ -21,3 +21,6 @@ export interface ClickeableProps {
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
+export interface GenericObjectProps {
+    [key: string]: string | number | boolean | object;
+}

package/dist/cjs/types/interfaces/functionProps.d.ts

@@ -1,3 +1,4 @@
+import { GenericObjectProps } from './commonProps';
 interface RegExpRule {
     regExp?: RegExp;
     replacer?: string;
@@ -8,4 +9,8 @@ export interface ParseTestIdProps {
     rules?: RegExpRule[];
     separator?: string;
 }
+export interface CreateObjArrayProps {
+    numberOfItems?: number;
+    externalParser?: (i: number) => GenericObjectProps;
+}
 export {};

package/dist/cjs/types/interfaces/moleculeProps.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
-import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, MenuItemProps, PaginationItemProps } from './atomProps';
-import { basicColorType, elementAlignType, breadcrumbSeparatorType, columnGapType, reducedSizeType } from '../types/styleTypes';
+import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, InputProps, MenuItemProps, PaginationItemProps, TabItemProps } from './atomProps';
+import { basicColorType, rightCenteredAlignType, breadcrumbSeparatorType, columnGapType, sizeWithoutNormalType, tabsFormatType } from '../types/styleTypes';
 export interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
     buttonList: ButtonProps[];
@@ -38,11 +38,11 @@ export interface BreadcrumbsProps extends ComposedElementProps {
     /** `Atribute` `Required` Array of `BreadcrumbItems` objects that will be shown */
     items: BreadcrumbItemProps[];
     /** `Styling` Will adjust element position on screen */
-    alignment?: elementAlignType | null;
+    alignment?: rightCenteredAlignType | null;
     /** `Styling` Will adjust element position on screen */
     separator?: breadcrumbSeparatorType | null;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: reducedSizeType;
+    size?: sizeWithoutNormalType;
 }
 export interface DropdownProps extends ElementProps {
     /** `Atribute` `Required` Sets the name will be shown on the dropdown input */
@@ -62,7 +62,7 @@ export interface MessageProps extends ElementProps {
     /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: reducedSizeType;
+    size?: sizeWithoutNormalType;
 }
 interface MenuSubListProps {
     subListTitle: MenuItemProps;
@@ -105,9 +105,9 @@ export interface PaginationProps extends ComposedElementProps {
     /** `Styling` Will add round borders to each page's shape */
     isRounded?: boolean;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: reducedSizeType;
+    size?: sizeWithoutNormalType;
     /** `Styling` Will adjust the pages position on screen */
-    alignment?: elementAlignType | null;
+    alignment?: rightCenteredAlignType | null;
 }
 export interface ModalProps extends ComposedElementProps {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
@@ -115,4 +115,48 @@ export interface ModalProps extends ComposedElementProps {
     /** `Function` Custom function related to the modal's close button to inject custom code if needed */
     onCloseClick?: () => void;
 }
+export interface TabsProps extends ElementProps {
+    /** `Attribute` `Required` List of tabs that will be shown in order */
+    tabs: TabItemProps[];
+    /** `Styling` Will adjust the tabs position on screen */
+    alignment?: rightCenteredAlignType;
+    /** `Styling` Set tab's size on bulma's size tokens */
+    size?: sizeWithoutNormalType;
+    /** `Styling` Set tab's size on bulma's size tokens */
+    format?: tabsFormatType;
+    /** `Styling` Will add round tabs borders. Only visible if `format` is set to `is-toggle` */
+    isRounded?: boolean;
+    /** `Styling` The whole container will occupy its parent container width */
+    isFullWidth?: boolean;
+}
+export interface InputControlProps extends ElementProps {
+    /** `Attribute` `Required` control's input configuration which will be wrapped */
+    inputConfig: InputProps;
+    /** `Attribute` `Icon` configuration that will be shown in Input's left side */
+    leftIcon?: IconProps;
+    /** `Attribute` `Icon` configuration that will be shown in Input's right side */
+    rightIcon?: IconProps;
+    /** `Styling` Set control and its input size on bulma's size tokens */
+    size?: sizeWithoutNormalType;
+    /** `Styling` Will add an animated spinner on input's right side */
+    isLoading?: boolean;
+    /** `Styling` Used for `FormField` styling purpose only. Will strech the input and its container in full-width */
+    isExpanded?: boolean;
+}
+export interface FormFieldHelperProps {
+    text?: string;
+    color?: basicColorType;
+}
+export interface FormFieldProps extends ElementProps {
+    /** `Attribute` Sets a custom text before the wrapped input to indicate its usage */
+    labelText?: string;
+    /** `Attribute` `Required` Single or multiple `InputControlProps` config objects which will be wrapped around the `FormField` */
+    inputControlConfig: InputControlProps | InputControlProps[];
+    /** `Attribute` Adds a helper text below the wrapped paragraph to provide context information */
+    helperConfig?: FormFieldHelperProps;
+    /** `Styling` Will adjust field's sections (label, input/s and helper) in horizontal position */
+    isHorizontal?: boolean;
+    /** `Styling` Will group the list of inputs in a same wrapper (useful for several inputs with same usage, as a complex address) */
+    isGrouped?: boolean;
+}
 export {};

package/dist/cjs/types/types/styleTypes.d.ts

@@ -4,9 +4,12 @@ export type columnOffsetType = 'is-offset-1' | 'is-offset-2' | 'is-offset-3' | '
 export 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';
 export 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';
 export 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';
-export type basicSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
-export type reducedSizeType = Exclude<basicSizeType, 'is-normal'>;
+export type elementSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
+export type sizeWithoutNormalType = Exclude<elementSizeType, 'is-normal'>;
 export type iconColorModeType = 'light' | 'dark';
 export type columnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
-export type elementAlignType = 'is-centered' | 'is-right';
+export type elementAlignType = 'is-centered' | 'is-right' | 'is-left';
+export type rightCenteredAlignType = Exclude<elementAlignType, 'is-left'>;
+export type rightLeftAlignType = Exclude<elementAlignType, 'is-centered'>;
 export type breadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
+export type tabsFormatType = 'is-boxed' | 'is-toggle';