reactive-bulma 1.21.0 → 2.1.0

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

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

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

@@ -0,0 +1 @@
+export { default as ButtonGroup } from './ButtonGroup';

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

@@ -1,3 +1,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';

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

@@ -1,20 +1,7 @@
 import React from 'react';
+import { BasicProps } from './commonProps';
 import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType } from '../types/styleTypes';
 import { inputTypes } from '../types/domTypes';
-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 ColumnProps extends BasicProps, 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[];
@@ -44,6 +31,8 @@ export interface ButtonProps extends BasicProps, React.ComponentPropsWithoutRef<
     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;
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
@@ -240,4 +229,3 @@ export interface RadioButtonProps extends BasicProps {
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
-export {};

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

@@ -0,0 +1,33 @@
+/// <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;
+    /** `Attribute` *For container case*. Custom CSS classes, applicable for specific scenarios */
+    containerCssClasses?: string;
+    /** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
+    containerStyle?: React.CSSProperties;
+}
+export interface ElementProps {
+    /** `Attribute` ID used to locate the element in unit test suites (like Jest) */
+    testId?: string;
+    /** `Attribute` Custom CSS classes, applicable for specific scenarios */
+    cssClasses?: string;
+    /** `Attribute` Custom styling applicable for specific scenarios */
+    style?: React.CSSProperties;
+}
+export interface ComponentProps extends BasicProps, ElementProps {
+}

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

@@ -0,0 +1,10 @@
+import { ElementProps } from './commonProps';
+import { ButtonProps } from './atomProps';
+export interface ButtonGroupProps extends ElementProps {
+    /** `Atribute` Array of button objects that will be shown */
+    buttonList: ButtonProps[];
+    /** `Styling` Will group the list of buttonList in a single line */
+    isAttached?: boolean;
+    /** `Styling` Sets group position on the container */
+    position?: 'left' | 'centered' | 'right';
+}

package/dist/index.d.ts

@@ -1,14 +1,5 @@
-import React from 'react';
-
-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';
-type columnOffsetType = 'is-offset-1' | 'is-offset-2' | 'is-offset-3' | 'is-offset-4' | 'is-offset-5' | 'is-offset-6' | 'is-offset-7' | 'is-offset-8' | 'is-offset-9' | 'is-offset-10' | 'is-offset-11' | 'is-offset-12';
-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 basicSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
-type iconColorModeType = 'light' | 'dark';
-
-type inputTypes = 'text' | 'password' | 'email' | 'tel';
+/// <reference types="react" />
+import React$1 from 'react';
 
 interface BasicProps {
     /** `Attribute` ID used to locate the element in unit test suites (like Jest) */
@@ -24,9 +15,28 @@ interface BasicProps {
     /** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
     containerStyle?: React.CSSProperties;
 }
-interface ColumnProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
+interface ElementProps {
+    /** `Attribute` ID used to locate the element in unit test suites (like Jest) */
+    testId?: string;
+    /** `Attribute` Custom CSS classes, applicable for specific scenarios */
+    cssClasses?: string;
+    /** `Attribute` Custom styling applicable for specific scenarios */
+    style?: React.CSSProperties;
+}
+
+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';
+type columnOffsetType = 'is-offset-1' | 'is-offset-2' | 'is-offset-3' | 'is-offset-4' | 'is-offset-5' | 'is-offset-6' | 'is-offset-7' | 'is-offset-8' | 'is-offset-9' | 'is-offset-10' | 'is-offset-11' | 'is-offset-12';
+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 basicSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
+type iconColorModeType = 'light' | 'dark';
+
+type inputTypes = 'text' | 'password' | 'email' | 'tel';
+
+interface ColumnProps extends BasicProps, React$1.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
-    children?: string | React.ReactElement | React.ReactElement[];
+    children?: string | React$1.ReactElement | React$1.ReactElement[];
     /** `Styling` Set column's size */
     size?: columnSizeType;
     /** `Styling` Set column's offset (moving it as you set its size */
@@ -34,7 +44,7 @@ interface ColumnProps extends BasicProps, React.ComponentPropsWithoutRef<'sectio
     /** `Styling` Set if the column only will take the space it needs */
     isNarrow?: boolean;
 }
-interface ButtonProps extends BasicProps, React.ComponentPropsWithoutRef<'button'> {
+interface ButtonProps extends BasicProps, React$1.ComponentPropsWithoutRef<'button'> {
     /** `Attribute` The text will be shown in the `Button` */
     text?: string;
     /** `Attribute` Will disable the button */
@@ -53,12 +63,14 @@ interface ButtonProps extends BasicProps, React.ComponentPropsWithoutRef<'button
     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;
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
-interface ProgressBarProps extends BasicProps, React.ComponentPropsWithoutRef<'progress'> {
+interface ProgressBarProps extends BasicProps, 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` */
@@ -70,11 +82,11 @@ interface ProgressBarProps extends BasicProps, React.ComponentPropsWithoutRef<'p
     /** `Styling` Will change `value` for a animated loading */
     isLoading?: boolean;
 }
-interface BlockProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
+interface BlockProps extends BasicProps, React$1.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the block */
-    children?: string | React.ReactElement | React.ReactElement[];
+    children?: string | React$1.ReactElement | React$1.ReactElement[];
 }
-interface TagProps extends BasicProps, React.ComponentPropsWithoutRef<'span'> {
+interface TagProps extends BasicProps, 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) */
@@ -96,11 +108,11 @@ interface TagProps extends BasicProps, React.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.ComponentPropsWithoutRef<'section'> {
+interface BoxProps extends BasicProps, React$1.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the box */
-    children?: string | React.ReactElement | React.ReactElement[];
+    children?: string | React$1.ReactElement | React$1.ReactElement[];
 }
-interface TitleSectionProps extends BasicProps, React.ComponentPropsWithoutRef<'p'> {
+interface TitleSectionProps extends BasicProps, React$1.ComponentPropsWithoutRef<'p'> {
     /** `Attribute` Sets the text you want to show */
     text: string;
     /** `Styling` Set text size */
@@ -215,7 +227,7 @@ interface FileProps extends BasicProps {
 }
 interface CheckBoxProps extends BasicProps {
     /** `Attribute` Sets checkbox's text that will be shown next to its control */
-    content?: string | React.ReactElement;
+    content?: string | React$1.ReactElement;
     /** `Attribute` Will disable the checkbox */
     isDisabled?: boolean;
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
@@ -242,34 +254,45 @@ interface RadioButtonProps extends BasicProps {
     onChange?: () => void;
 }
 
-declare const Button: React.FC<ButtonProps>;
+declare const Button: React$1.FC<ButtonProps>;
 
-declare const Column: React.FC<ColumnProps>;
+declare const Column: React$1.FC<ColumnProps>;
 
-declare const ProgressBar: React.FC<ProgressBarProps>;
+declare const ProgressBar: React$1.FC<ProgressBarProps>;
 
-declare const Block: React.FC<BlockProps>;
+declare const Block: React$1.FC<BlockProps>;
 
-declare const Tag: React.FC<TagProps>;
+declare const Tag: React$1.FC<TagProps>;
 
-declare const Box: React.FC<BoxProps>;
+declare const Box: React$1.FC<BoxProps>;
 
-declare const Title: React.FC<TitleProps>;
+declare const Title: React$1.FC<TitleProps>;
 
-declare const Icon: React.FC<IconProps>;
+declare const Icon: React$1.FC<IconProps>;
 
-declare const Input: React.FC<InputProps>;
+declare const Input: React$1.FC<InputProps>;
 
-declare const TextArea: React.FC<TextAreaProps>;
+declare const TextArea: React$1.FC<TextAreaProps>;
 
-declare const Delete: React.FC<DeleteProps>;
+declare const Delete: React$1.FC<DeleteProps>;
 
-declare const Select: React.FC<SelectProps>;
+declare const Select: React$1.FC<SelectProps>;
 
-declare const File: React.FC<FileProps>;
+declare const File: React$1.FC<FileProps>;
 
-declare const CheckBox: React.FC<CheckBoxProps>;
+declare const CheckBox: React$1.FC<CheckBoxProps>;
+
+declare const RadioButton: React$1.FC<RadioButtonProps>;
+
+interface ButtonGroupProps extends ElementProps {
+    /** `Atribute` Array of button objects that will be shown */
+    buttonList: ButtonProps[];
+    /** `Styling` Will group the list of buttonList in a single line */
+    isAttached?: boolean;
+    /** `Styling` Sets group position on the container */
+    position?: 'left' | 'centered' | 'right';
+}
 
-declare const RadioButton: React.FC<RadioButtonProps>;
+declare const ButtonGroup: React$1.FC<ButtonGroupProps>;
 
-export { Block, Box, Button, CheckBox as Checkbox, Column, Delete, File, Icon, Input, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
+export { Block, Box, Button, ButtonGroup, CheckBox as Checkbox, Column, Delete, File, Icon, Input, ProgressBar, RadioButton, Select, Tag, TextArea, Title };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactive-bulma",
-  "version": "1.21.0",
+  "version": "2.1.0",
   "description": "A component library based on React, Bulma, Typescript and Rollup",
   "keywords": [
     "typescript",
@@ -35,8 +35,10 @@
     "start:cli": "npm start -- --no-open",
     "test": "jest --watchAll=false --verbose",
     "test:ci": "npm test -- --coverage",
+    "test:diff": "npm run test:ci -- -o",
     "lint": "eslint src/**/*.tsx",
     "prettier": "prettier src/**/*.{tsx,ts} --write",
+    "prettier:ci": "prettier src/**/*.{tsx,ts} --check",
     "lint-staged": "lint-staged -v",
     "setup": "npm i && husky install",
     "prepare": "npm run build",
@@ -45,57 +47,57 @@
     "semantic-release": "semantic-release"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
+    "@babel/core": "^7.22.20",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.22.15",
     "@mdi/font": "^7.2.96",
-    "@rollup/plugin-commonjs": "^25.0.3",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-typescript": "^11.1.2",
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-typescript": "^11.1.3",
     "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/commit-analyzer": "^10.0.1",
+    "@semantic-release/commit-analyzer": "^11.0.0",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^9.0.4",
-    "@semantic-release/npm": "^10.0.4",
-    "@semantic-release/release-notes-generator": "^11.0.4",
-    "@storybook/addon-actions": "^7.1.0",
-    "@storybook/addon-essentials": "^7.1.0",
-    "@storybook/addon-interactions": "^7.1.0",
-    "@storybook/addon-links": "^7.1.0",
-    "@storybook/addon-mdx-gfm": "^7.1.0",
-    "@storybook/cli": "^7.1.0",
-    "@storybook/react": "^7.1.0",
-    "@storybook/react-webpack5": "^7.1.0",
-    "@storybook/testing-library": "^0.2.0",
-    "@testing-library/jest-dom": "^5.17.0",
+    "@semantic-release/github": "^9.0.6",
+    "@semantic-release/npm": "^11.0.0",
+    "@semantic-release/release-notes-generator": "^12.0.0",
+    "@storybook/addon-actions": "^7.4.2",
+    "@storybook/addon-essentials": "^7.4.2",
+    "@storybook/addon-interactions": "^7.4.2",
+    "@storybook/addon-links": "^7.4.2",
+    "@storybook/addon-mdx-gfm": "^7.4.2",
+    "@storybook/cli": "^7.4.2",
+    "@storybook/react": "^7.4.2",
+    "@storybook/react-webpack5": "^7.4.2",
+    "@storybook/testing-library": "^0.2.1",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.3",
-    "@types/react": "^18.2.15",
-    "@typescript-eslint/eslint-plugin": "^6.1.0",
-    "@typescript-eslint/parser": "^6.1.0",
-    "babel-jest": "^29.6.1",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^6.7.2",
+    "@typescript-eslint/parser": "^6.7.2",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "bulma": "^0.9.4",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-react": "^7.33.0",
+    "eslint": "^8.49.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-react": "^7.33.2",
     "husky": "^8.0.3",
-    "jest": "^29.6.1",
-    "jest-environment-jsdom": "^29.6.1",
-    "lint-staged": "^13.2.3",
-    "postcss": "^8.4.26",
-    "prettier": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^14.0.1",
+    "postcss": "^8.4.29",
+    "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.26.3",
-    "rollup-plugin-dts": "^5.3.0",
+    "rollup": "^3.29.2",
+    "rollup-plugin-dts": "^6.0.2",
     "rollup-plugin-postcss": "^4.0.2",
-    "semantic-release": "^21.0.7",
-    "storybook": "^7.1.0",
-    "tslib": "^2.6.0",
-    "typescript": "^5.1.6"
+    "semantic-release": "^22.0.0",
+    "storybook": "^7.4.2",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2"
   },
   "lint-staged": {
     "src/**/*.(ts|tsx)": [