reactive-bulma 2.4.0 → 2.6.0

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

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

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

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

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

@@ -14,3 +14,5 @@ export { default as File } from './File';
 export { default as Checkbox } from './Checkbox';
 export { default as RadioButton } from './RadioButton';
 export { default as BreadcrumbItem } from './BreadcrumbItem';
+export { default as DropdownTrigger } from './DropdownTrigger';
+export { default as DropdownItem } from './DropdownItem';

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

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

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

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

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

@@ -2,3 +2,5 @@ export { default as ButtonGroup } from './ButtonGroup';
 export { default as ColumnGroup } from './ColumnGroup';
 export { default as Notification } from './Notification';
 export { default as Breadcrumbs } from './Breadcrumbs';
+export { default as Dropdown } from './Dropdown';
+export { default as Message } from './Message';

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ElementProps, ComposedElementProps } from './commonProps';
+import { ElementProps, ComposedElementProps, ClickeableProps } from './commonProps';
 import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType } from '../types/styleTypes';
-import { inputTypes } from '../types/domTypes';
+import { DropdownItemType, inputTypes } 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[];
@@ -118,7 +118,7 @@ export interface IconProps extends ComposedElementProps {
     /** `Styling` Animates the icon spinning 360° */
     isSpinning?: boolean;
 }
-export interface InputProps extends ElementProps {
+export interface InputProps extends ElementProps, ClickeableProps {
     /** `Attribute` `Required` What type of input will be used */
     type: inputTypes;
     /** `Attribute` The value that will be shown on the input */
@@ -137,8 +137,6 @@ export interface InputProps extends ElementProps {
     isHovered?: boolean;
     /** `Styling` Will add a specific border when the input is focused by the user */
     isFocused?: boolean;
-    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
-    onClick?: () => void;
     /** `Function` Reffers to each time the user press a key. Alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
@@ -150,18 +148,16 @@ 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 ElementProps {
+export interface DeleteProps extends ElementProps, ClickeableProps {
     /** `Styling` Set icons's size */
     size?: Exclude<basicSizeType, 'is-normal'>;
-    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
-    onClick?: () => void;
 }
 export interface SelectOption {
     id: string | number;
     name: string;
     selected?: boolean;
 }
-export interface SelectProps extends ComposedElementProps {
+export interface SelectProps extends ComposedElementProps, ClickeableProps {
     /** `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 */
@@ -178,10 +174,8 @@ export interface SelectProps extends ComposedElementProps {
     isHovered?: boolean;
     /** `Styling`Will add a specific border when the input is focused by the user */
     isFocused?: boolean;
-    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
-    onClick?: () => void;
 }
-export interface FileProps extends ComposedElementProps {
+export interface FileProps extends ComposedElementProps, ClickeableProps {
     /** `Attribute` The name of the file to be uploaded */
     fileName?: string;
     /** `Attribute` The icon displayed in file's button" */
@@ -198,8 +192,6 @@ export interface FileProps extends ComposedElementProps {
     color?: basicColorType;
     /** `Styling` Set button's size */
     size?: basicSizeType;
-    /** `Function` Click function, alone does not nothing, but can be reused for other components */
-    onClick?: () => void;
 }
 export interface CheckBoxProps extends ComposedElementProps {
     /** `Attribute` Sets checkbox's text that will be shown next to its control */
@@ -229,11 +221,23 @@ export interface RadioButtonProps extends ComposedElementProps {
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
-export interface BreadcrumbItemProps extends ComposedElementProps {
+export interface BreadcrumbItemProps extends ComposedElementProps, ClickeableProps {
     /** `Attribute` `Required` Indicates item text that will be shown */
     text: string;
     /** `Styling` Marks the item as the one where user is located (based on breadcrumb hierarchy) */
     isActiveItem?: boolean;
-    /** `Function` Click function, alone does not nothing, but can be reused for other components */
-    onClick?: () => void;
+}
+export interface DropdownTriggerProps extends ComposedElementProps, ClickeableProps {
+    /** `Attribute` `Required` Sets the name will be shown on the dropdown input */
+    menuText: string;
+    /** `Attribute` Sets a relationship between trigger's button and dropdown's menu to toggle display */
+    dropdownPointer?: string;
+}
+export interface DropdownItemProps extends ElementProps, ClickeableProps {
+    /** `Attribute` `Required` Sets the name will be shown on the item */
+    itemText: string;
+    /** `Attribute` Changes item's composition into a `<hr>`, a `<a>` or a `<div>` depending its type */
+    type?: DropdownItemType;
+    /** `Styling` Marks the item as the one where user is located (based on dropdown hierarchy) */
+    isActiveItem?: boolean;
 }

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

@@ -17,3 +17,7 @@ export interface ElementProps {
 }
 export interface ComposedElementProps extends ElementProps, ContainerProps {
 }
+export interface ClickeableProps {
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
+    onClick?: () => void;
+}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ComposedElementProps, ElementProps } from './commonProps';
-import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps } from './atomProps';
+import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps } from './atomProps';
 import { basicColorType, basicSizeType, breadcrumbAlignType, breadcrumbSeparatorType, columnGapType } from '../types/styleTypes';
 export interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
@@ -44,3 +44,23 @@ export interface BreadcrumbsProps extends ComposedElementProps {
     /** `Styling` Set button's size on bulma's size tokens */
     size?: Exclude<basicSizeType, 'is-normal'>;
 }
+export interface DropdownProps extends ElementProps {
+    /** `Atribute` `Required` Sets the name will be shown on the dropdown input */
+    inputText: string;
+    /** `Attribute` Sets a relationship between dropdown trigger's button and dropdown's menu to toggle display */
+    dropdownPointer?: string;
+    /** `Atribute` `Required` Array of `DropdownItem` objects that will be shown on its menu */
+    listOfItems: DropdownItemProps[];
+}
+export interface MessageProps extends ElementProps {
+    /** `Atribute` Sets the header's text that will be shown on message's darker zone */
+    headerText?: string;
+    /** `Atribute` `Required` Sets the body's text that will be shown on message's lighter zone */
+    bodyText: string;
+    /** `Atribute` Includes a `Delete` config object that will be shown */
+    deleteButton?: DeleteProps;
+    /** `Styling` Color based on bulma's color tokens */
+    color?: basicColorType;
+    /** `Styling` Set button's size on bulma's size tokens */
+    size?: Exclude<basicSizeType, 'is-normal'>;
+}

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

@@ -1,2 +1,3 @@
 export type buttonType = 'submit' | 'reset' | 'button';
 export type inputTypes = 'text' | 'password' | 'email' | 'tel';
+export type DropdownItemType = 'item' | 'link' | 'divider';

package/dist/index.d.ts

@@ -19,6 +19,10 @@ interface ElementProps {
 }
 interface ComposedElementProps extends ElementProps, ContainerProps {
 }
+interface ClickeableProps {
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
+    onClick?: () => void;
+}
 
 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';
@@ -32,6 +36,7 @@ type breadcrumbAlignType = 'is-centered' | 'is-right';
 type breadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
 
 type inputTypes = 'text' | 'password' | 'email' | 'tel';
+type DropdownItemType = 'item' | 'link' | 'divider';
 
 interface ColumnProps extends ElementProps, React$1.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
@@ -141,7 +146,7 @@ interface IconProps extends ComposedElementProps {
     /** `Styling` Animates the icon spinning 360° */
     isSpinning?: boolean;
 }
-interface InputProps extends ElementProps {
+interface InputProps extends ElementProps, ClickeableProps {
     /** `Attribute` `Required` What type of input will be used */
     type: inputTypes;
     /** `Attribute` The value that will be shown on the input */
@@ -160,8 +165,6 @@ interface InputProps extends ElementProps {
     isHovered?: boolean;
     /** `Styling` Will add a specific border when the input is focused by the user */
     isFocused?: boolean;
-    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
-    onClick?: () => void;
     /** `Function` Reffers to each time the user press a key. Alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
@@ -173,18 +176,16 @@ 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 ElementProps {
+interface DeleteProps extends ElementProps, ClickeableProps {
     /** `Styling` Set icons's size */
     size?: Exclude<basicSizeType, 'is-normal'>;
-    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
-    onClick?: () => void;
 }
 interface SelectOption {
     id: string | number;
     name: string;
     selected?: boolean;
 }
-interface SelectProps extends ComposedElementProps {
+interface SelectProps extends ComposedElementProps, ClickeableProps {
     /** `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 */
@@ -201,10 +202,8 @@ interface SelectProps extends ComposedElementProps {
     isHovered?: boolean;
     /** `Styling`Will add a specific border when the input is focused by the user */
     isFocused?: boolean;
-    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
-    onClick?: () => void;
 }
-interface FileProps extends ComposedElementProps {
+interface FileProps extends ComposedElementProps, ClickeableProps {
     /** `Attribute` The name of the file to be uploaded */
     fileName?: string;
     /** `Attribute` The icon displayed in file's button" */
@@ -221,8 +220,6 @@ interface FileProps extends ComposedElementProps {
     color?: basicColorType;
     /** `Styling` Set button's size */
     size?: basicSizeType;
-    /** `Function` Click function, alone does not nothing, but can be reused for other components */
-    onClick?: () => void;
 }
 interface CheckBoxProps extends ComposedElementProps {
     /** `Attribute` Sets checkbox's text that will be shown next to its control */
@@ -252,13 +249,25 @@ interface RadioButtonProps extends ComposedElementProps {
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
-interface BreadcrumbItemProps extends ComposedElementProps {
+interface BreadcrumbItemProps extends ComposedElementProps, ClickeableProps {
     /** `Attribute` `Required` Indicates item text that will be shown */
     text: string;
     /** `Styling` Marks the item as the one where user is located (based on breadcrumb hierarchy) */
     isActiveItem?: boolean;
-    /** `Function` Click function, alone does not nothing, but can be reused for other components */
-    onClick?: () => void;
+}
+interface DropdownTriggerProps extends ComposedElementProps, ClickeableProps {
+    /** `Attribute` `Required` Sets the name will be shown on the dropdown input */
+    menuText: string;
+    /** `Attribute` Sets a relationship between trigger's button and dropdown's menu to toggle display */
+    dropdownPointer?: string;
+}
+interface DropdownItemProps extends ElementProps, ClickeableProps {
+    /** `Attribute` `Required` Sets the name will be shown on the item */
+    itemText: string;
+    /** `Attribute` Changes item's composition into a `<hr>`, a `<a>` or a `<div>` depending its type */
+    type?: DropdownItemType;
+    /** `Styling` Marks the item as the one where user is located (based on dropdown hierarchy) */
+    isActiveItem?: boolean;
 }
 
 declare const Button: React$1.FC<ButtonProps>;
@@ -293,6 +302,10 @@ declare const RadioButton: React$1.FC<RadioButtonProps>;
 
 declare const BreadcrumbItem: React$1.FC<BreadcrumbItemProps>;
 
+declare const DropdownTrigger: React$1.FC<DropdownTriggerProps>;
+
+declare const DropdownItem: React$1.FC<DropdownItemProps>;
+
 interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
     buttonList: ButtonProps[];
@@ -335,6 +348,26 @@ interface BreadcrumbsProps extends ComposedElementProps {
     /** `Styling` Set button's size on bulma's size tokens */
     size?: Exclude<basicSizeType, 'is-normal'>;
 }
+interface DropdownProps extends ElementProps {
+    /** `Atribute` `Required` Sets the name will be shown on the dropdown input */
+    inputText: string;
+    /** `Attribute` Sets a relationship between dropdown trigger's button and dropdown's menu to toggle display */
+    dropdownPointer?: string;
+    /** `Atribute` `Required` Array of `DropdownItem` objects that will be shown on its menu */
+    listOfItems: DropdownItemProps[];
+}
+interface MessageProps extends ElementProps {
+    /** `Atribute` Sets the header's text that will be shown on message's darker zone */
+    headerText?: string;
+    /** `Atribute` `Required` Sets the body's text that will be shown on message's lighter zone */
+    bodyText: string;
+    /** `Atribute` Includes a `Delete` config object that will be shown */
+    deleteButton?: DeleteProps;
+    /** `Styling` Color based on bulma's color tokens */
+    color?: basicColorType;
+    /** `Styling` Set button's size on bulma's size tokens */
+    size?: Exclude<basicSizeType, 'is-normal'>;
+}
 
 declare const ButtonGroup: React$1.FC<ButtonGroupProps>;
 
@@ -344,4 +377,8 @@ declare const Notification: React$1.FC<NotificationProps>;
 
 declare const Breadcrumbs: React$1.FC<BreadcrumbsProps>;
 
-export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, File, Icon, Input, Notification, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
+declare const Dropdown: React$1.FC<DropdownProps>;
+
+declare const Message: React$1.FC<MessageProps>;
+
+export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Icon, Input, Message, Notification, ProgressBar, RadioButton, Select, Tag, TextArea, Title };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactive-bulma",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "description": "A component library based on React, Bulma, Typescript and Rollup",
   "keywords": [
     "typescript",
@@ -40,12 +40,16 @@
     "prettier": "prettier src/**/*.{tsx,ts} --write",
     "prettier:ci": "prettier src/**/*.{tsx,ts} --check",
     "lint-staged": "lint-staged -v",
-    "setup": "npm i && husky install",
+    "setup": "npm i && npm i -g npm-check-updates && husky install",
     "prepare": "npm run build",
     "build": "rollup -c --bundleConfigAsCjs",
     "build:storybook": "storybook build",
     "semantic-release": "semantic-release",
-    "create": "hygen component new"
+    "create": "hygen component new",
+    "update": "npm run update:deps && npm run update:doctor && npm run update:storybook",
+    "update:deps": "ncu -i --format group",
+    "update:storybook": "npx storybook@latest upgrade && npm run build:storybook",
+    "update:doctor": "npm run lint && npm run test && npm run build"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
@@ -57,47 +61,49 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
     "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/commit-analyzer": "^11.0.0",
+    "@semantic-release/commit-analyzer": "^11.1.0",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@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.6",
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-interactions": "^7.4.6",
-    "@storybook/addon-links": "^7.4.6",
-    "@storybook/addon-mdx-gfm": "^7.4.6",
-    "@storybook/cli": "^7.4.6",
-    "@storybook/react": "^7.4.6",
-    "@storybook/react-webpack5": "^7.4.6",
+    "@semantic-release/npm": "^11.0.1",
+    "@semantic-release/release-notes-generator": "^12.1.0",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-mdx-gfm": "^7.5.3",
+    "@storybook/cli": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.5",
-    "@types/react": "^18.2.28",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.7.5",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.7",
+    "@types/react": "^18.2.36",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "bulma": "^0.9.4",
-    "eslint": "^8.51.0",
+    "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-react": "^7.33.2",
     "husky": "^8.0.3",
     "hygen": "^6.2.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^15.0.1",
+    "lint-staged": "^15.0.2",
+    "npm-check-updates": "^16.14.6",
     "postcss": "^8.4.31",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^4.1.4",
+    "rollup": "^4.3.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "semantic-release": "^22.0.5",
-    "storybook": "^7.4.6",
+    "semantic-release": "^22.0.7",
+    "storybook": "^7.5.3",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2"
   },