reactive-bulma 2.11.0 → 2.12.0

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,5 @@ 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';

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/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,2 @@
+export { default as FormField } from './FormField';
+export { default as Panel } from './Panel';

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 */

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,28 @@ 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 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 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 PanelTabsProps extends ElementProps {
+    /** `Attribute` `Required` A list of configuration objects that will render a set of tabs */
+    tabList: PanelTabItem[];
 }
 export {};

package/dist/esm/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/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 */
@@ -498,21 +499,29 @@ 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[];
 }
 
 declare const ButtonGroup: React$1.FC<ButtonGroupProps>;
@@ -539,6 +548,39 @@ 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>;
+
+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;
+}
+
 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>;
+
+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, 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.12.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"
   },