reactive-bulma 2.2.1 → 2.3.0

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

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

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

@@ -1,2 +1,3 @@
 export { default as ButtonGroup } from './ButtonGroup';
 export { default as ColumnGroup } from './ColumnGroup';
+export { default as Notification } from './Notification';

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { BasicProps } from './commonProps';
+import { ElementProps, ComposedElementProps } from './commonProps';
 import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType } from '../types/styleTypes';
 import { inputTypes } from '../types/domTypes';
-export interface ColumnProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
+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[];
     /** `Styling` Set column's size */
@@ -12,7 +12,7 @@ export interface ColumnProps extends BasicProps, React.ComponentPropsWithoutRef<
     /** `Styling` Set if the column only will take the space it needs */
     isNarrow?: boolean;
 }
-export interface ButtonProps extends BasicProps, React.ComponentPropsWithoutRef<'button'> {
+export interface ButtonProps extends ElementProps, React.ComponentPropsWithoutRef<'button'> {
     /** `Attribute` The text will be shown in the `Button` */
     text?: string;
     /** `Attribute` Will disable the button */
@@ -38,7 +38,7 @@ export interface ButtonProps extends BasicProps, React.ComponentPropsWithoutRef<
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
-export interface ProgressBarProps extends BasicProps, React.ComponentPropsWithoutRef<'progress'> {
+export interface ProgressBarProps extends ElementProps, React.ComponentPropsWithoutRef<'progress'> {
     /** `Attribute` Sets colored bar at the level against `max` value (`100` by default) */
     value?: number;
     /** `Attribute` Sets the entire bar length comparing with current `value` */
@@ -50,11 +50,11 @@ export interface ProgressBarProps extends BasicProps, React.ComponentPropsWithou
     /** `Styling` Will change `value` for a animated loading */
     isLoading?: boolean;
 }
-export interface BlockProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
+export interface BlockProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the block */
     children?: string | React.ReactElement | React.ReactElement[];
 }
-export interface TagProps extends BasicProps, React.ComponentPropsWithoutRef<'span'> {
+export interface TagProps extends ComposedElementProps, React.ComponentPropsWithoutRef<'span'> {
     /** `Attribute` `Required` The text will be shown in the `Tag` */
     text: string;
     /** `Attribute` Will add a delete button (for both single or addon cases) */
@@ -76,7 +76,7 @@ export interface TagProps extends BasicProps, React.ComponentPropsWithoutRef<'sp
     /** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
     onDeleteClick?: () => void;
 }
-export interface ImageProps extends BasicProps, React.ComponentPropsWithoutRef<'figure'> {
+export interface ImageProps extends ComposedElementProps, React.ComponentPropsWithoutRef<'figure'> {
     /** `Attribute` `Required` The image source that will be shown */
     src: string;
     /** `Styling` Will add round borders to image's shape */
@@ -84,11 +84,11 @@ export interface ImageProps extends BasicProps, React.ComponentPropsWithoutRef<'
     /** `Styling` Sets image size based on one of fixed ratios/fixed sizes */
     isRounded?: boolean;
 }
-export interface BoxProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
+export interface BoxProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the box */
     children?: string | React.ReactElement | React.ReactElement[];
 }
-export interface TitleSectionProps extends BasicProps, React.ComponentPropsWithoutRef<'p'> {
+export interface TitleSectionProps extends ElementProps, React.ComponentPropsWithoutRef<'p'> {
     /** `Attribute` Sets the text you want to show */
     text: string;
     /** `Styling` Set text size */
@@ -104,7 +104,7 @@ export interface TitleProps {
     /** `Attribute` Subtitle title configuration object */
     secondary?: TitleSectionProps;
 }
-export interface IconProps extends BasicProps {
+export interface IconProps extends ComposedElementProps {
     /** `Attribute` `Required` Sets the icon key work based on [Material Design icon list](https://pictogrammers.com/library/mdi/) */
     iconLabel: string;
     /** `Attribute` Sets the text you want to show next to the icon */
@@ -118,7 +118,7 @@ export interface IconProps extends BasicProps {
     /** `Styling` Animates the icon spinning 360° */
     isSpinning?: boolean;
 }
-export interface InputProps extends BasicProps {
+export interface InputProps extends ElementProps {
     /** `Attribute` `Required` What type of input will be used */
     type: inputTypes;
     /** `Attribute` The value that will be shown on the input */
@@ -150,7 +150,7 @@ export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
     /** `Styling` Will disable characteristic sizable property by removing its control on bottom-right corner */
     isFixedSize?: boolean;
 }
-export interface DeleteProps extends BasicProps {
+export interface DeleteProps extends ElementProps {
     /** `Styling` Set icons's size */
     size?: Exclude<basicSizeType, 'is-normal'>;
     /** `Function` Click function. Alone does not nothing, but can be reused for other components */
@@ -161,7 +161,7 @@ export interface SelectOption {
     name: string;
     selected?: boolean;
 }
-export interface SelectProps extends BasicProps {
+export interface SelectProps extends ComposedElementProps {
     /** `Attribute` Indicates the options contained on the select */
     options?: SelectOption[];
     /** `Attribute` Indicates how many options will be shown at first glance (before looking for the whole list */
@@ -181,7 +181,7 @@ export interface SelectProps extends BasicProps {
     /** `Function` Click function. Alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
-export interface FileProps extends BasicProps {
+export interface FileProps extends ComposedElementProps {
     /** `Attribute` The name of the file to be uploaded */
     fileName?: string;
     /** `Attribute` The icon displayed in file's button" */
@@ -201,15 +201,15 @@ export interface FileProps extends BasicProps {
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
-export interface CheckBoxProps extends BasicProps {
+export interface CheckBoxProps extends ComposedElementProps {
     /** `Attribute` Sets checkbox's text that will be shown next to its control */
-    content?: string | React.ReactElement;
+    content?: string | React.ReactElement | React.ReactElement[];
     /** `Attribute` Will disable the checkbox */
     isDisabled?: boolean;
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
-export interface RadioButtonItemProps extends Pick<BasicProps, 'testId' | 'style'> {
+export interface RadioButtonItemProps extends Pick<ElementProps, 'testId' | 'style'> {
     /** `Attribute` `Required` Sets checkbox's text*/
     label: string;
     /** `Attribute` Sets the name that will relate this checkbox with the others */
@@ -221,7 +221,7 @@ export interface RadioButtonItemProps extends Pick<BasicProps, 'testId' | 'style
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
-export interface RadioButtonProps extends BasicProps {
+export interface RadioButtonProps extends ComposedElementProps {
     /** `Attribute` `Required` Indicates the options contained to be selected */
     options: RadioButtonItemProps[];
     /** `Attribute` `Required` Sets the name that will relate this checkbox with the others */

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

@@ -1,18 +1,4 @@
 /// <reference types="react" />
-export interface BasicProps {
-    /** `Attribute` ID used to locate the element in unit test suites (like Jest) */
-    testId?: string;
-    /** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
-    containerTestId?: string;
-    /** `Attribute` Custom CSS classes, applicable for specific scenarios */
-    cssClasses?: string;
-    /** `Attribute` *For container case*. Custom CSS classes, applicable for specific scenarios */
-    containerCssClasses?: string;
-    /** `Attribute` Custom styling applicable for specific scenarios */
-    style?: React.CSSProperties;
-    /** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
-    containerStyle?: React.CSSProperties;
-}
 export interface ContainerProps {
     /** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
     containerTestId?: string;
@@ -29,5 +15,5 @@ export interface ElementProps {
     /** `Attribute` Custom styling applicable for specific scenarios */
     style?: React.CSSProperties;
 }
-export interface ComponentProps extends BasicProps, ElementProps {
+export interface ComposedElementProps extends ElementProps, ContainerProps {
 }

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

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { ElementProps } from './commonProps';
-import { ButtonProps, ColumnProps } from './atomProps';
-import { columnGapType } from '../types/styleTypes';
+import { ButtonProps, ColumnProps, DeleteProps } from './atomProps';
+import { basicColorType, columnGapType } from '../types/styleTypes';
 export interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
     buttonList: ButtonProps[];
@@ -23,3 +24,13 @@ export interface ColumnGroupProps extends ElementProps {
     /** `Styling` Will adjust the space between the columns. In case to set null, it will remove those gaps */
     gap?: columnGapType | null;
 }
+export interface NotificationProps extends ElementProps {
+    /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
+    children?: string | React.ReactElement | React.ReactElement[];
+    /** `Atribute` Includes a `Delete` config object that will be shown */
+    deleteButton?: DeleteProps;
+    /** `Styling` Color based on bulma's color tokens */
+    color?: basicColorType;
+    /** `Styling` Will adjust the selected color with a ligther style */
+    isLightColor?: boolean;
+}

package/dist/index.d.ts

@@ -1,17 +1,11 @@
 /// <reference types="react" />
 import React$1 from 'react';
 
-interface BasicProps {
-    /** `Attribute` ID used to locate the element in unit test suites (like Jest) */
-    testId?: string;
+interface ContainerProps {
     /** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
     containerTestId?: string;
-    /** `Attribute` Custom CSS classes, applicable for specific scenarios */
-    cssClasses?: string;
     /** `Attribute` *For container case*. Custom CSS classes, applicable for specific scenarios */
     containerCssClasses?: string;
-    /** `Attribute` Custom styling applicable for specific scenarios */
-    style?: React.CSSProperties;
     /** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
     containerStyle?: React.CSSProperties;
 }
@@ -23,6 +17,8 @@ interface ElementProps {
     /** `Attribute` Custom styling applicable for specific scenarios */
     style?: React.CSSProperties;
 }
+interface ComposedElementProps extends ElementProps, ContainerProps {
+}
 
 type columnSizeType = 'is-three-quarters' | 'is-two-thirds' | 'is-half' | 'is-one-third' | 'is-one-quarter' | 'is-full' | 'is-four-fifths' | 'is-three-fifths' | 'is-two-fifths' | 'is-one-fifth' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8' | 'is-9' | 'is-10' | 'is-11' | 'is-12';
 type titleSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
@@ -35,7 +31,7 @@ type columnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6
 
 type inputTypes = 'text' | 'password' | 'email' | 'tel';
 
-interface ColumnProps extends BasicProps, React$1.ComponentPropsWithoutRef<'section'> {
+interface ColumnProps extends ElementProps, React$1.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
     children?: string | React$1.ReactElement | React$1.ReactElement[];
     /** `Styling` Set column's size */
@@ -45,7 +41,7 @@ interface ColumnProps extends BasicProps, React$1.ComponentPropsWithoutRef<'sect
     /** `Styling` Set if the column only will take the space it needs */
     isNarrow?: boolean;
 }
-interface ButtonProps extends BasicProps, React$1.ComponentPropsWithoutRef<'button'> {
+interface ButtonProps extends ElementProps, React$1.ComponentPropsWithoutRef<'button'> {
     /** `Attribute` The text will be shown in the `Button` */
     text?: string;
     /** `Attribute` Will disable the button */
@@ -71,7 +67,7 @@ interface ButtonProps extends BasicProps, React$1.ComponentPropsWithoutRef<'butt
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
-interface ProgressBarProps extends BasicProps, React$1.ComponentPropsWithoutRef<'progress'> {
+interface ProgressBarProps extends ElementProps, React$1.ComponentPropsWithoutRef<'progress'> {
     /** `Attribute` Sets colored bar at the level against `max` value (`100` by default) */
     value?: number;
     /** `Attribute` Sets the entire bar length comparing with current `value` */
@@ -83,11 +79,11 @@ interface ProgressBarProps extends BasicProps, React$1.ComponentPropsWithoutRef<
     /** `Styling` Will change `value` for a animated loading */
     isLoading?: boolean;
 }
-interface BlockProps extends BasicProps, React$1.ComponentPropsWithoutRef<'section'> {
+interface BlockProps extends ElementProps, React$1.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the block */
     children?: string | React$1.ReactElement | React$1.ReactElement[];
 }
-interface TagProps extends BasicProps, React$1.ComponentPropsWithoutRef<'span'> {
+interface TagProps extends ComposedElementProps, React$1.ComponentPropsWithoutRef<'span'> {
     /** `Attribute` `Required` The text will be shown in the `Tag` */
     text: string;
     /** `Attribute` Will add a delete button (for both single or addon cases) */
@@ -109,11 +105,11 @@ interface TagProps extends BasicProps, React$1.ComponentPropsWithoutRef<'span'>
     /** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
     onDeleteClick?: () => void;
 }
-interface BoxProps extends BasicProps, React$1.ComponentPropsWithoutRef<'section'> {
+interface BoxProps extends ElementProps, React$1.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the box */
     children?: string | React$1.ReactElement | React$1.ReactElement[];
 }
-interface TitleSectionProps extends BasicProps, React$1.ComponentPropsWithoutRef<'p'> {
+interface TitleSectionProps extends ElementProps, React$1.ComponentPropsWithoutRef<'p'> {
     /** `Attribute` Sets the text you want to show */
     text: string;
     /** `Styling` Set text size */
@@ -129,7 +125,7 @@ interface TitleProps {
     /** `Attribute` Subtitle title configuration object */
     secondary?: TitleSectionProps;
 }
-interface IconProps extends BasicProps {
+interface IconProps extends ComposedElementProps {
     /** `Attribute` `Required` Sets the icon key work based on [Material Design icon list](https://pictogrammers.com/library/mdi/) */
     iconLabel: string;
     /** `Attribute` Sets the text you want to show next to the icon */
@@ -143,7 +139,7 @@ interface IconProps extends BasicProps {
     /** `Styling` Animates the icon spinning 360° */
     isSpinning?: boolean;
 }
-interface InputProps extends BasicProps {
+interface InputProps extends ElementProps {
     /** `Attribute` `Required` What type of input will be used */
     type: inputTypes;
     /** `Attribute` The value that will be shown on the input */
@@ -175,7 +171,7 @@ interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
     /** `Styling` Will disable characteristic sizable property by removing its control on bottom-right corner */
     isFixedSize?: boolean;
 }
-interface DeleteProps extends BasicProps {
+interface DeleteProps extends ElementProps {
     /** `Styling` Set icons's size */
     size?: Exclude<basicSizeType, 'is-normal'>;
     /** `Function` Click function. Alone does not nothing, but can be reused for other components */
@@ -186,7 +182,7 @@ interface SelectOption {
     name: string;
     selected?: boolean;
 }
-interface SelectProps extends BasicProps {
+interface SelectProps extends ComposedElementProps {
     /** `Attribute` Indicates the options contained on the select */
     options?: SelectOption[];
     /** `Attribute` Indicates how many options will be shown at first glance (before looking for the whole list */
@@ -206,7 +202,7 @@ interface SelectProps extends BasicProps {
     /** `Function` Click function. Alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
-interface FileProps extends BasicProps {
+interface FileProps extends ComposedElementProps {
     /** `Attribute` The name of the file to be uploaded */
     fileName?: string;
     /** `Attribute` The icon displayed in file's button" */
@@ -226,15 +222,15 @@ interface FileProps extends BasicProps {
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
-interface CheckBoxProps extends BasicProps {
+interface CheckBoxProps extends ComposedElementProps {
     /** `Attribute` Sets checkbox's text that will be shown next to its control */
-    content?: string | React$1.ReactElement;
+    content?: string | React$1.ReactElement | React$1.ReactElement[];
     /** `Attribute` Will disable the checkbox */
     isDisabled?: boolean;
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
-interface RadioButtonItemProps extends Pick<BasicProps, 'testId' | 'style'> {
+interface RadioButtonItemProps extends Pick<ElementProps, 'testId' | 'style'> {
     /** `Attribute` `Required` Sets checkbox's text*/
     label: string;
     /** `Attribute` Sets the name that will relate this checkbox with the others */
@@ -246,7 +242,7 @@ interface RadioButtonItemProps extends Pick<BasicProps, 'testId' | 'style'> {
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
-interface RadioButtonProps extends BasicProps {
+interface RadioButtonProps extends ComposedElementProps {
     /** `Attribute` `Required` Indicates the options contained to be selected */
     options: RadioButtonItemProps[];
     /** `Attribute` `Required` Sets the name that will relate this checkbox with the others */
@@ -307,9 +303,21 @@ interface ColumnGroupProps extends ElementProps {
     /** `Styling` Will adjust the space between the columns. In case to set null, it will remove those gaps */
     gap?: columnGapType | null;
 }
+interface NotificationProps extends ElementProps {
+    /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
+    children?: string | React.ReactElement | React.ReactElement[];
+    /** `Atribute` Includes a `Delete` config object that will be shown */
+    deleteButton?: DeleteProps;
+    /** `Styling` Color based on bulma's color tokens */
+    color?: basicColorType;
+    /** `Styling` Will adjust the selected color with a ligther style */
+    isLightColor?: boolean;
+}
 
 declare const ButtonGroup: React$1.FC<ButtonGroupProps>;
 
 declare const ColumnGroup: React$1.FC<ColumnGroupProps>;
 
-export { Block, Box, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, File, Icon, Input, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
+declare const Notification: React$1.FC<NotificationProps>;
+
+export { Block, Box, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, File, Icon, Input, Notification, ProgressBar, RadioButton, Select, Tag, TextArea, Title };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactive-bulma",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "A component library based on React, Bulma, Typescript and Rollup",
   "keywords": [
     "typescript",
@@ -59,7 +59,7 @@
     "@semantic-release/commit-analyzer": "^11.0.0",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^9.0.7",
+    "@semantic-release/github": "^9.2.1",
     "@semantic-release/npm": "^11.0.0",
     "@semantic-release/release-notes-generator": "^12.0.0",
     "@storybook/addon-actions": "^7.4.5",
@@ -70,13 +70,13 @@
     "@storybook/cli": "^7.4.5",
     "@storybook/react": "^7.4.5",
     "@storybook/react-webpack5": "^7.4.5",
-    "@storybook/testing-library": "^0.2.1",
+    "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.5",
-    "@types/react": "^18.2.22",
-    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^6.7.3",
+    "@types/react": "^18.2.24",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "bulma": "^0.9.4",
@@ -87,11 +87,11 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^14.0.1",
-    "postcss": "^8.4.30",
+    "postcss": "^8.4.31",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.29.3",
+    "rollup": "^3.29.4",
     "rollup-plugin-dts": "^6.0.2",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^22.0.5",