reactive-bulma 2.10.0 → 2.12.0

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/PanelBlock/index.d.ts

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

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

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

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

@@ -9,3 +9,6 @@ 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 PanelBlock } from './PanelBlock';
+export { default as PanelTabs } from './PanelTabs';

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

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

package/dist/cjs/types/components/organisms/Panel/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default as FormField } from './FormField';
+export { default as Panel } from './Panel';

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

@@ -0,0 +1,4 @@
+import { GenericObjectProps } from '../interfaces/commonProps';
+import { CreateObjArrayProps } from '../interfaces/functionProps';
+export declare const generateKey: (max?: number, min?: number) => string;
+export declare const createObjArray: <ImportedProps>({ numberOfItems, externalParser }?: CreateObjArrayProps) => ImportedProps[] | GenericObjectProps[];

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

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

package/dist/cjs/types/functions/tests/generators.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -2,3 +2,4 @@ import '../node_modules/bulma/css/bulma.min.css';
 import '../node_modules/@mdi/font/css/materialdesignicons.min.css';
 export * from './components/atoms';
 export * from './components/molecules';
+export * from './components/organisms';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ElementProps, ComposedElementProps, ClickeableProps } from './commonProps';
-import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType, reducedSizeType } from '../types/styleTypes';
-import { DropdownItemType, inputTypes } from '../types/domTypes';
+import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, elementSizeType, sizeWithoutNormalType, textColorType, titleSizeType, rightLeftAlignType } from '../types/styleTypes';
+import { DropdownItemType, InputType } 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 */
     children?: string | React.ReactElement | React.ReactElement[];
@@ -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;
+    type: InputType;
     /** `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,9 +256,9 @@ 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;
@@ -262,6 +268,6 @@ export interface TabItemProps extends ComposedElementProps, ClickeableProps {
     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 */
+    /** `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

@@ -22,5 +22,5 @@ export interface ClickeableProps {
     onClick?: () => void;
 }
 export interface GenericObjectProps {
-    [key: string]: string | number | boolean;
+    [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,8 @@
 /// <reference types="react" />
 import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
-import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, MenuItemProps, PaginationItemProps, TabItemProps } from './atomProps';
-import { basicColorType, elementAlignType, breadcrumbSeparatorType, columnGapType, reducedSizeType, tabsFormatType } 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';
+import { PanelBlockItemType } from '../types/domTypes';
 export interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
     buttonList: ButtonProps[];
@@ -38,11 +39,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 +63,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 +106,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 */
@@ -119,9 +120,9 @@ 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?: elementAlignType;
+    alignment?: rightCenteredAlignType;
     /** `Styling` Set tab's size on bulma's size tokens */
-    size?: reducedSizeType;
+    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` */
@@ -129,4 +130,42 @@ export interface TabsProps extends ElementProps {
     /** `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 PanelBlockItemProps {
+    /** `Attribute` `Required` Indicates to component's parser which type of component will be rendered based on its option */
+    type: PanelBlockItemType;
+    /** `Attribute` `Required` The component properties that will configure that specific instance */
+    props: InputControlProps | IconProps | ButtonProps;
+}
+export interface PanelBlockProps extends ComposedElementProps, ClickeableProps {
+    /** `Attribute` `Required` Configuration object with a type and a set of props based on the available components that could be rendered in each `PanelBlock` */
+    config: PanelBlockItemProps;
+    /** `Attribute` Usable when config's U is `icon` only. It will display a text next to mentioned icon (for user purposes) */
+    blockText?: string;
+    /** `Styling` Used for `PanelBlock` styling purpose only. Will mark its rendered component as the one selected among its group */
+    isActive?: boolean;
+}
+export interface PanelTabItem extends ClickeableProps {
+    /** `Attribute` `Required` Will show the text to the user in shape of tab */
+    text: string;
+    /** `Styling` Used for `PanelTab` styling purpose only. Will mark its rendered component as the one selected among its group */
+    isActive?: boolean;
+}
+export interface PanelTabsProps extends ElementProps {
+    /** `Attribute` `Required` A list of configuration objects that will render a set of tabs */
+    tabList: PanelTabItem[];
+}
 export {};

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

@@ -0,0 +1,29 @@
+import { ElementProps } from './commonProps';
+import { InputControlProps, PanelBlockProps, PanelTabsProps } from './moleculeProps';
+import { basicColorType } from '../types/styleTypes';
+export interface FormFieldHelperProps {
+    text?: string;
+    color?: basicColorType;
+}
+export interface FormFieldProps extends ElementProps {
+    /** `Attribute` `Required` Single or multiple `InputControlProps` config objects which will be wrapped around the `FormField` */
+    inputControlConfig: InputControlProps | InputControlProps[];
+    /** `Attribute` Sets a custom text before the wrapped input to indicate its usage */
+    labelText?: string;
+    /** `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 interface PanelProps extends ElementProps {
+    /** `Attribute` `Required` Will display Panel's header text */
+    headerText: string;
+    /** `Attribute` A configuration object that will render a set of tabs based on `PanelTab` component */
+    panelTabs?: PanelTabsProps;
+    /** `Attribute` `Required` A list of configuration objects that will render a list of block with different components, based on `PanelBlockList` component */
+    blockList: PanelBlockProps[];
+    /** `Styling` Color based on bulma's text color tokens */
+    color?: basicColorType;
+}

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

@@ -1,3 +1,4 @@
-export type buttonType = 'submit' | 'reset' | 'button';
-export type inputTypes = 'text' | 'password' | 'email' | 'tel';
+export type ButtonType = 'submit' | 'reset' | 'button';
+export type InputType = 'text' | 'password' | 'email' | 'tel';
 export type DropdownItemType = 'item' | 'link' | 'divider';
+export type PanelBlockItemType = 'icon' | 'control' | 'button';

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

@@ -4,10 +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';