reactive-bulma 2.10.0 → 2.12.0

package/dist/index.d.ts

@@ -30,16 +30,19 @@ type columnOffsetType = 'is-offset-1' | 'is-offset-2' | 'is-offset-3' | 'is-offs
 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';
 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';
 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';
-type basicSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
-type reducedSizeType = Exclude<basicSizeType, 'is-normal'>;
+type elementSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
+type sizeWithoutNormalType = Exclude<elementSizeType, 'is-normal'>;
 type iconColorModeType = 'light' | 'dark';
 type columnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
-type elementAlignType = 'is-centered' | 'is-right';
+type elementAlignType = 'is-centered' | 'is-right' | 'is-left';
+type rightCenteredAlignType = Exclude<elementAlignType, 'is-left'>;
+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 */
@@ -66,14 +69,14 @@ interface ButtonProps extends ElementProps, React$1.ComponentPropsWithoutRef<'bu
     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;
 }
@@ -85,8 +88,8 @@ interface ProgressBarProps extends ElementProps, React$1.ComponentPropsWithoutRe
     /** `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;
 }
 interface BlockProps extends ElementProps, React$1.ComponentPropsWithoutRef<'section'> {
@@ -109,7 +112,7 @@ interface TagProps extends ComposedElementProps, React$1.ComponentPropsWithoutRe
     /** `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 */
@@ -118,6 +121,8 @@ interface TagProps extends ComposedElementProps, React$1.ComponentPropsWithoutRe
 interface ImageProps extends ComposedElementProps, React$1.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 */
@@ -151,17 +156,21 @@ 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;
 }
 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 */
@@ -169,7 +178,7 @@ 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 */
@@ -189,7 +198,7 @@ interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
 }
 interface DeleteProps extends ElementProps, ClickeableProps {
     /** `Styling` Set icons's size */
-    size?: reducedSizeType;
+    size?: sizeWithoutNormalType;
 }
 interface SelectOption {
     id: string | number;
@@ -206,7 +215,7 @@ 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 */
@@ -230,7 +239,7 @@ interface FileProps extends ComposedElementProps, ClickeableProps {
     /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
     /** `Styling` Set button's size */
-    size?: basicSizeType;
+    size?: elementSizeType;
 }
 interface CheckBoxProps extends ComposedElementProps {
     /** `Attribute` Sets checkbox's text that will be shown next to its control */
@@ -289,9 +298,9 @@ interface MenuItemProps extends ElementProps, ClickeableProps {
 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;
@@ -301,7 +310,7 @@ 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;
 }
 
@@ -385,11 +394,11 @@ 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;
 }
 interface DropdownProps extends ElementProps {
     /** `Atribute` `Required` Sets the name will be shown on the dropdown input */
@@ -409,7 +418,7 @@ 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;
@@ -452,9 +461,9 @@ 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;
 }
 interface ModalProps extends ComposedElementProps {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
@@ -466,9 +475,9 @@ 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` */
@@ -476,6 +485,44 @@ interface TabsProps extends ElementProps {
     /** `Styling` The whole container will occupy its parent container width */
     isFullWidth?: boolean;
 }
+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;
+}
+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 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>;
 
@@ -499,4 +546,41 @@ declare const Modal: React$1.FC<ModalProps>;
 
 declare const Tabs: React$1.FC<TabsProps>;
 
-export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Icon, Image, Input, Menu, MenuItem, MenuList, Message, Modal, Notification, Pagination, PaginationItem, ProgressBar, RadioButton, Select, TabItem, Tabs, Tag, TextArea, Title };
+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>;
+
+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.10.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"
   },