reactive-bulma 2.11.0 → 2.13.0

package/dist/esm/types/components/atoms/LevelHeader/index.d.ts

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

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

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

package/dist/esm/types/components/molecules/LevelItem/index.d.ts

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

package/dist/esm/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/esm/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/esm/types/components/molecules/index.d.ts

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

package/dist/esm/types/components/{molecules → organisms}/FormField/index.d.ts

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

package/dist/esm/types/components/organisms/Level/index.d.ts

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

package/dist/esm/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/esm/types/components/organisms/index.d.ts

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

package/dist/esm/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/esm/types/functions/parsers.d.ts

@@ -1,5 +1,4 @@
-import { GenericObjectProps } from '../interfaces/commonProps';
-import { CreateObjArrayProps, ParseTestIdProps } from '../interfaces/functionProps';
+import { 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,5 +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;
-export declare const createObjArray: <ImportedProps>({ numberOfItems, externalParser }?: CreateObjArrayProps) => ImportedProps[] | GenericObjectProps[];

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

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

package/dist/esm/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/esm/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, elementSizeType, sizeWithoutNormalType, textColorType, titleSizeType, rightLeftAlignType } from '../types/styleTypes';
-import { DropdownItemType, inputTypes } from '../types/domTypes';
+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[];
@@ -124,7 +124,7 @@ export interface IconProps extends ComposedElementProps {
 }
 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 */
@@ -271,3 +271,9 @@ export interface TabItemProps extends ComposedElementProps, ClickeableProps {
     /** `Styling` Used for `Tabs` styling purpose only. Will mark the tab as the one selected among its group */
     isActive?: boolean;
 }
+export interface LevelHeaderProps extends ElementProps {
+    /** `Attribute` `Required` A title in smaller size */
+    header: string;
+    /** `Attribute` `Required` Main value (numeric or text) to be shown in a bigger scale below `header` */
+    value: string | number;
+}

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

@@ -2,6 +2,7 @@
 import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
 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[];
@@ -143,20 +144,34 @@ export interface InputControlProps extends ElementProps {
     /** `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 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 interface LevelItemProps extends ElementProps {
+    /** `Attribute` `Required` Reffers to the component or string content that will be shown inside the level */
+    content: string | React.ReactElement;
+    /** `Styling` Centers item's content horizontally */
+    isCentered?: boolean;
 }
 export {};

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

@@ -0,0 +1,39 @@
+import { ElementProps } from './commonProps';
+import { InputControlProps, LevelItemProps, 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;
+}
+export interface LevelProps extends ElementProps {
+    /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's left side */
+    leftSide?: LevelItemProps[];
+    /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's center */
+    centerSide?: LevelItemProps[];
+    /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's right side */
+    rightSide?: LevelItemProps[];
+    /** `Styling` Will adjust the navigator on horizontal on mobile as well */
+    isMobile?: boolean;
+}

package/dist/esm/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/index.d.ts

@@ -40,8 +40,9 @@ type rightLeftAlignType = Exclude<elementAlignType, 'is-centered'>;
 type breadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
 type tabsFormatType = 'is-boxed' | 'is-toggle';
 
-type inputTypes = 'text' | 'password' | 'email' | 'tel';
+type InputType = 'text' | 'password' | 'email' | 'tel';
 type DropdownItemType = 'item' | 'link' | 'divider';
+type PanelBlockItemType = 'icon' | 'control' | 'button';
 
 interface ColumnProps extends ElementProps, React$1.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
@@ -165,7 +166,7 @@ interface IconProps extends ComposedElementProps {
 }
 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 */
@@ -312,6 +313,12 @@ interface TabItemProps extends ComposedElementProps, ClickeableProps {
     /** `Styling` Used for `Tabs` styling purpose only. Will mark the tab as the one selected among its group */
     isActive?: boolean;
 }
+interface LevelHeaderProps extends ElementProps {
+    /** `Attribute` `Required` A title in smaller size */
+    header: string;
+    /** `Attribute` `Required` Main value (numeric or text) to be shown in a bigger scale below `header` */
+    value: string | number;
+}
 
 declare const Button: React$1.FC<ButtonProps>;
 
@@ -357,6 +364,8 @@ declare const PaginationItem: React$1.FC<PaginationItemProps>;
 
 declare const TabItem: React$1.FC<TabItemProps>;
 
+declare const LevelHeader: React$1.FC<LevelHeaderProps>;
+
 interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
     buttonList: ButtonProps[];
@@ -498,21 +507,35 @@ interface InputControlProps extends ElementProps {
     /** `Styling` Used for `FormField` styling purpose only. Will strech the input and its container in full-width */
     isExpanded?: boolean;
 }
-interface FormFieldHelperProps {
-    text?: string;
-    color?: basicColorType;
+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;
+}
+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;
 }
-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;
+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;
+}
+interface PanelTabsProps extends ElementProps {
+    /** `Attribute` `Required` A list of configuration objects that will render a set of tabs */
+    tabList: PanelTabItem[];
+}
+interface LevelItemProps extends ElementProps {
+    /** `Attribute` `Required` Reffers to the component or string content that will be shown inside the level */
+    content: string | React.ReactElement;
+    /** `Styling` Centers item's content horizontally */
+    isCentered?: boolean;
 }
 
 declare const ButtonGroup: React$1.FC<ButtonGroupProps>;
@@ -539,6 +562,53 @@ declare const Tabs: React$1.FC<TabsProps>;
 
 declare const InputControl: React$1.FC<InputControlProps>;
 
+declare const PanelBlock: React$1.FC<PanelBlockProps>;
+
+declare const PanelTabs: React$1.FC<PanelTabsProps>;
+
+declare const LevelItem: React$1.FC<LevelItemProps>;
+
+interface FormFieldHelperProps {
+    text?: string;
+    color?: basicColorType;
+}
+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;
+}
+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;
+}
+interface LevelProps extends ElementProps {
+    /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's left side */
+    leftSide?: LevelItemProps[];
+    /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's center */
+    centerSide?: LevelItemProps[];
+    /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's right side */
+    rightSide?: LevelItemProps[];
+    /** `Styling` Will adjust the navigator on horizontal on mobile as well */
+    isMobile?: boolean;
+}
+
 declare const FormField: React$1.FC<FormFieldProps>;
 
-export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, FormField, Icon, Image, Input, InputControl, Menu, MenuItem, MenuList, Message, Modal, Notification, Pagination, PaginationItem, ProgressBar, RadioButton, Select, TabItem, Tabs, Tag, TextArea, Title };
+declare const Panel: React$1.FC<PanelProps>;
+
+declare const Level: React$1.FC<LevelProps>;
+
+export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, FormField, Icon, Image, Input, InputControl, Level, LevelHeader, LevelItem, Menu, MenuItem, MenuList, Message, Modal, Notification, Pagination, PaginationItem, Panel, PanelBlock, PanelTabs, ProgressBar, RadioButton, Select, TabItem, Tabs, Tag, TextArea, Title };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactive-bulma",
-  "version": "2.11.0",
+  "version": "2.13.0",
   "description": "A component library based on React, Bulma, Typescript and Rollup",
   "keywords": [
     "typescript",
@@ -67,14 +67,14 @@
     "@semantic-release/github": "^9.2.6",
     "@semantic-release/npm": "^11.0.2",
     "@semantic-release/release-notes-generator": "^12.1.0",
-    "@storybook/addon-actions": "^7.6.8",
-    "@storybook/addon-essentials": "^7.6.8",
-    "@storybook/addon-interactions": "^7.6.8",
-    "@storybook/addon-links": "^7.6.8",
-    "@storybook/addon-mdx-gfm": "^7.6.8",
-    "@storybook/cli": "^7.6.8",
-    "@storybook/react": "^7.6.8",
-    "@storybook/react-webpack5": "^7.6.8",
+    "@storybook/addon-actions": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/addon-mdx-gfm": "^7.6.10",
+    "@storybook/cli": "^7.6.10",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-webpack5": "^7.6.10",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
@@ -96,14 +96,14 @@
     "lint-staged": "^15.2.0",
     "npm-check-updates": "^16.14.12",
     "postcss": "^8.4.33",
-    "prettier": "^3.2.2",
+    "prettier": "^3.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^4.9.5",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^23.0.0",
-    "storybook": "^7.6.8",
+    "storybook": "^7.6.10",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3"
   },