reactive-bulma 4.2.0 → 4.3.0

package/dist/components/atoms/Checkbox/index.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { CheckBoxProps } from '../../../interfaces/atomProps';
-declare const CheckBox: React.FC<CheckBoxProps>;
-export default CheckBox;
+declare const Checkbox: React.FC<CheckBoxProps>;
+export default Checkbox;

package/dist/components/atoms/Checkbox/index.js

@@ -1,47 +1,47 @@
-import { jsxs as C, jsx as f } from "react/jsx-runtime";
-import { parseClasses as m, parseTestId as l } from "../../../functions/parsers.js";
-const a = (s) => typeof s == "string" ? `-${s == null ? void 0 : s.toString()}` : s !== null ? "-with-component" : "", I = ({
+import { jsxs as C, jsx as m } from "react/jsx-runtime";
+import { parseClasses as f, parseTestId as l } from "../../../functions/parsers.js";
+const t = (s) => s ? "-with-component" : "", v = ({
   testId: s = null,
-  containerTestId: r = null,
-  cssClasses: t = null,
-  containerCssClasses: o = null,
-  style: i = null,
-  containerStyle: c = null,
+  containerTestId: a = null,
+  cssClasses: o = null,
+  containerCssClasses: c = null,
+  style: n = null,
+  containerStyle: d = null,
   content: e = null,
-  name: d,
-  isDisabled: n = null,
-  onClick: u,
-  onChange: p,
+  name: r,
+  isDisabled: i = null,
+  onClick: p,
+  onChange: u,
   onBlur: x
 }) => {
-  const h = m([
+  const b = f([
     "checkbox",
-    o
-  ]), b = r ?? l({
+    c
+  ]), h = a ?? l({
     tag: "checkbox-container",
-    parsedClasses: a(e)
+    parsedClasses: t(e)
   }), k = s ?? l({
     tag: "checkbox",
-    parsedClasses: a(e)
+    parsedClasses: t(e)
   });
   return /* @__PURE__ */ C(
     "label",
     {
-      "data-testid": b,
-      className: h,
-      style: c ?? void 0,
+      "data-testid": h,
+      className: b,
+      style: d ?? void 0,
       children: [
-        /* @__PURE__ */ f(
+        /* @__PURE__ */ m(
           "input",
           {
             "data-testid": k,
             type: "checkbox",
-            name: d,
-            className: t ?? void 0,
-            style: i ?? void 0,
-            disabled: n ?? !1,
-            onClick: u,
-            onChange: p,
+            name: r,
+            className: o ?? void 0,
+            style: n ?? void 0,
+            disabled: i ?? !1,
+            onClick: p,
+            onChange: u,
             onBlur: x
           }
         ),
@@ -51,5 +51,5 @@ const a = (s) => typeof s == "string" ? `-${s == null ? void 0 : s.toString()}`
   );
 };
 export {
-  I as default
+  v as default
 };

package/dist/components/atoms/Checkbox/index.stories.d.ts

@@ -1,9 +1,6 @@
 import { Meta } from '@storybook/react';
-import { default as CheckBox } from '.';
-import { CheckBoxProps } from '../../../interfaces/atomProps';
-declare const _default: Meta<typeof CheckBox>;
+import { default as Checkbox } from '.';
+declare const _default: Meta<typeof Checkbox>;
 export default _default;
-export declare const BasicExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckBoxProps>;
-export declare const WithTextContent: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckBoxProps>;
-export declare const WithComponentContent: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckBoxProps>;
-export declare const Disabled: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckBoxProps>;
+export declare const BasicExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').CheckBoxProps>;
+export declare const Disabled: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').CheckBoxProps>;

package/dist/components/organisms/FormField/index.js

@@ -1,76 +1,150 @@
-import { jsxs as u, jsx as s } from "react/jsx-runtime";
-import A from "react";
-import m from "../../molecules/InputControl/index.js";
-import { parseClasses as N, parseTestId as b } from "../../../functions/parsers.js";
-import { generateKey as n } from "../../../functions/generators.js";
-const f = (e) => e ? /* @__PURE__ */ s(
-  "label",
-  {
-    "data-testid": "test-form-field-label",
-    className: "label",
-    children: e
-  }
-) : null, p = (e, l) => l ? Array.isArray(e) ? e.map((a, c) => /* @__PURE__ */ s(
-  m,
-  {
-    testId: `test-grouped-input-control-${c}`,
-    ...a
-  },
-  `grouped-input-control-${n()}`
-)) : /* @__PURE__ */ s(m, { ...e }) : Array.isArray(e) ? /* @__PURE__ */ s(m, { ...e[0] }) : /* @__PURE__ */ s(m, { ...e }), I = (e) => {
+import { jsx as t, jsxs as c, Fragment as a } from "react/jsx-runtime";
+import B, { useMemo as F } from "react";
+import E from "../../molecules/InputControl/index.js";
+import { parseClasses as T, parseTestId as I } from "../../../functions/parsers.js";
+import $ from "../../atoms/TextArea/index.js";
+import x from "../../atoms/Select/index.js";
+import S from "../../atoms/Checkbox/index.js";
+import K from "../../atoms/RadioButton/index.js";
+import { FormFieldType as n } from "../../../interfaces/organismProps.js";
+import { generateKey as h } from "../../../functions/generators.js";
+const m = (e) => {
   if (!e) return null;
-  const l = N(["help", e.color]), a = b({
+  const s = T(["help", e.color]), l = I({
     tag: "form-field-help",
-    parsedClasses: l,
+    parsedClasses: s,
     rules: [{ regExp: /help|is/gm, replacer: "" }]
   });
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ t(
     "p",
     {
-      "data-testid": a,
-      className: l,
+      "data-testid": l,
+      className: s,
       children: e.text
     }
   );
-}, B = ({
+}, f = (e, s, l) => {
+  const r = {
+    key: s,
+    testId: l ?? `test-form-field-${e.type}`,
+    containerTestId: l ?? `test-form-field-container-${e.type}`
+  };
+  switch (e.type) {
+    case n.INPUT:
+      return /* @__PURE__ */ c(a, { children: [
+        /* @__PURE__ */ t(
+          E,
+          {
+            ...e.config,
+            ...r
+          }
+        ),
+        m(e.helper)
+      ] });
+    case n.SELECT:
+      return /* @__PURE__ */ c(a, { children: [
+        /* @__PURE__ */ t(
+          x,
+          {
+            ...e.config,
+            ...r
+          }
+        ),
+        m(e.helper)
+      ] });
+    case n.CHECKBOX:
+      return /* @__PURE__ */ c(a, { children: [
+        /* @__PURE__ */ t(
+          S,
+          {
+            ...e.config,
+            ...r
+          }
+        ),
+        m(e.helper)
+      ] });
+    case n.RADIOBUTTON:
+      return /* @__PURE__ */ c(a, { children: [
+        /* @__PURE__ */ t(
+          K,
+          {
+            ...e.config,
+            ...r
+          }
+        ),
+        m(e.helper)
+      ] });
+    case n.TEXTAREA:
+      return /* @__PURE__ */ c(a, { children: [
+        /* @__PURE__ */ t(
+          $,
+          {
+            ...e.config,
+            ...r
+          }
+        ),
+        m(e.helper)
+      ] });
+    default:
+      return null;
+  }
+}, R = (e, s) => {
+  const l = s ? `grouped-input-control-body-${h()}` : `input-control-body-${h()}`;
+  return s ? Array.isArray(e) ? e.map(
+    (r, i) => f(
+      r,
+      l,
+      `test-grouped-input-control-${i}`
+    )
+  ) : f(e) : Array.isArray(e) ? f(e[0], l) : f(e, l);
+}, M = ({
   testId: e = null,
-  cssClasses: l = null,
-  style: a = null,
-  labelText: c = null,
-  inputControlConfig: r,
-  helperConfig: d = null,
-  isHorizontal: i = !1,
-  isGrouped: t = !1
+  cssClasses: s = null,
+  style: l = null,
+  labelText: r = null,
+  inputControlConfig: i,
+  isHorizontal: o = !1,
+  isGrouped: p = !1
 }) => {
-  var F;
-  const y = N([
+  const y = T([
     "field",
-    i ? "is-horizontal" : null,
-    t ? "is-grouped" : null,
-    l
-  ]), h = e ?? b({ tag: "field", parsedClasses: y });
-  return !t && ((F = r == null ? void 0 : r.inputConfig) != null && F.color) && d && (d = {
-    ...d,
-    color: r.inputConfig.color
-  }), /* @__PURE__ */ u(
+    o ? "is-horizontal" : null,
+    p ? "is-grouped" : null,
+    s
+  ]), b = e ?? I({ tag: "field", parsedClasses: y }), A = F(() => {
+    const d = r !== null ? /* @__PURE__ */ t(
+      "label",
+      {
+        "data-testid": "test-form-field-label",
+        className: "label",
+        children: r
+      }
+    ) : null;
+    return o ? /* @__PURE__ */ t("section", { className: "field-label", children: d }) : d;
+  }, [o, r]), N = F(() => {
+    const d = R(i, p), u = `input-control-container-${h()}`;
+    return o ? /* @__PURE__ */ t(
+      "section",
+      {
+        className: "field-body",
+        children: d
+      },
+      u
+    ) : /* @__PURE__ */ t(B.Fragment, { children: d }, u);
+  }, [o, i, p]);
+  return /* @__PURE__ */ c(
     "section",
     {
-      "data-testid": h,
+      "data-testid": b,
       className: y,
-      style: a ?? void 0,
+      style: l ?? void 0,
       children: [
-        i ? /* @__PURE__ */ s("section", { className: "field-label", children: f(c) }) : f(c),
-        i ? /* @__PURE__ */ u("section", { className: "field-body", children: [
-          p(r, t),
-          I(d)
-        ] }) : /* @__PURE__ */ u(A.Fragment, { children: [
-          p(r, t),
-          I(d)
-        ] })
+        A,
+        N
       ]
     }
   );
 };
 export {
-  B as default
+  M as default
 };

package/dist/components/organisms/FormField/index.stories.d.ts

@@ -7,5 +7,8 @@ export declare const WithLabel: import('@storybook/csf').AnnotatedStoryFn<import
 export declare const WithLabelAndHelper: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/organismProps').FormFieldProps>;
 export declare const ErrorCase: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/organismProps').FormFieldProps>;
 export declare const GroupedInputs: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/organismProps').FormFieldProps>;
-export declare const ExpandedAndGroupedInputs: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/organismProps').FormFieldProps>;
 export declare const Horizontal: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/organismProps').FormFieldProps>;
+export declare const SelectCase: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/organismProps').FormFieldProps>;
+export declare const CheckboxCase: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/organismProps').FormFieldProps>;
+export declare const RadiobuttonCase: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/organismProps').FormFieldProps>;
+export declare const TextareaCase: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/organismProps').FormFieldProps>;

package/dist/interfaces/atomProps.d.ts

@@ -161,7 +161,7 @@ export interface SelectOption {
     name: string;
     selected?: boolean;
 }
-export interface SelectProps extends ComposedElementProps, InteractiveProps, NamedInputProps {
+export interface SelectProps extends ComposedElementProps, InteractiveOnChangeProps, NamedInputProps {
     /** `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 */
@@ -199,7 +199,7 @@ export interface FileProps extends ComposedElementProps, InteractiveProps, Named
 }
 export interface CheckBoxProps extends ComposedElementProps, InteractiveOnChangeProps, NamedInputProps {
     /** `Attribute` Sets checkbox's text that will be shown next to its control */
-    content?: ChildrenType;
+    content?: string;
     /** `Attribute` Will disable the checkbox */
     isDisabled?: boolean;
 }

package/dist/interfaces/commonProps.d.ts

@@ -18,21 +18,21 @@ export interface ComposedElementProps extends ElementProps, ContainerProps {
 }
 export interface ClickeableProps {
     /** `Function` Reffers to each time the user click the element. Alone does not nothing, but can be reused for other components */
-    onClick?: () => void;
+    onClick?: (event: React.MouseEvent) => void;
 }
 export interface ChangeableProps {
     /** `Function` Reffers to each time the user press a key. Alone does not nothing, but can be reused for other components */
-    onChange?: () => void;
+    onChange?: (event: React.ChangeEvent) => void;
 }
 export interface BlureableProps {
     /** `Function` Reffers to each time the user focus out the element. Alone does not nothing, but can be reused for other components */
-    onBlur?: () => void;
+    onBlur?: (event: React.FocusEvent) => void;
 }
 export interface InteractiveProps extends ClickeableProps, ChangeableProps, BlureableProps {
 }
 export interface InteractiveOnChangeProps extends Omit<InteractiveProps, 'onChange'> {
     /** `Function` Reffers to each time the user click the element (I recommend using this one rather than the `onClick` method). Alone does not nothing, but can be reused for other components */
-    onChange?: () => void;
+    onChange?: (event: React.ChangeEvent | React.FormEvent) => void;
 }
 export interface NamedInputProps {
     /** `Attribute` Used to reference the input in a form */

package/dist/interfaces/organismProps.d.ts

@@ -1,19 +1,30 @@
 import { ClickeableProps, ElementProps } from './commonProps';
 import { InputControlProps, LevelItemProps, NavBarBrandProps, NavBarDropdownProps, PanelBlockProps, PanelTabsProps, TableRowProps } from './moleculeProps';
-import { ImageProps, NavBarItemProps, TableHeadCellProps, TileProps } from './atomProps';
+import { CheckBoxProps, ImageProps, NavBarItemProps, RadioButtonProps, SelectProps, TableHeadCellProps, TextAreaProps, TileProps } from './atomProps';
 import { BasicColorType, SizeWithHeightType } from '../types/styleTypes';
 import { ChildrenType, NavBarFixedPositionType } from '../types/domTypes';
-export interface FormFieldHelperProps {
+export declare enum FormFieldType {
+    INPUT = "input",
+    SELECT = "select",
+    CHECKBOX = "checkbox",
+    RADIOBUTTON = "radiobutton",
+    TEXTAREA = "textarea"
+}
+export type FormFieldConfig = InputControlProps | SelectProps | CheckBoxProps | RadioButtonProps | TextAreaProps;
+export interface FormFieldHelper {
     text?: string;
     color?: BasicColorType;
 }
+export interface FormFieldInputProps {
+    type: FormFieldType;
+    config: FormFieldConfig;
+    helper?: FormFieldHelper;
+}
 export interface FormFieldProps extends ElementProps {
-    /** `Attribute` `Required` Single or multiple `InputControlProps` config objects which will be wrapped around the `FormField` */
-    inputControlConfig: InputControlProps | InputControlProps[];
+    /** `Attribute` `Required` Single or multiple `FormFieldConfig` config objects which will be wrapped around the `FormField` */
+    inputControlConfig: FormFieldInputProps | FormFieldInputProps[];
     /** `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) */

package/dist/interfaces/organismProps.js

@@ -1 +1,4 @@
-
+var E = /* @__PURE__ */ ((t) => (t.INPUT = "input", t.SELECT = "select", t.CHECKBOX = "checkbox", t.RADIOBUTTON = "radiobutton", t.TEXTAREA = "textarea", t))(E || {});
+export {
+  E as FormFieldType
+};

package/dist/types/domTypes.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 export type ButtonType = 'submit' | 'reset' | 'button';
-export type InputType = 'text' | 'password' | 'email' | 'tel';
+export type InputType = 'text' | 'password' | 'email' | 'tel' | 'number';
 export type DropdownItemType = 'item' | 'link' | 'divider';
 export type PanelBlockItemType = 'icon' | 'control' | 'button';
 export type ChildrenType = string | React.ReactElement | React.ReactElement[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactive-bulma",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "type": "module",
   "description": "A component library based on React, Bulma, Typescript and Vite",
   "keywords": [
@@ -63,7 +63,7 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@eslint/compat": "^1.2.4",
-    "@eslint/js": "^9.16.0",
+    "@eslint/js": "^9.17.0",
     "@mdi/font": "^7.4.47",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^13.0.0",
@@ -71,7 +71,7 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^11.0.1",
     "@semantic-release/npm": "^12.0.1",
-    "@semantic-release/release-notes-generator": "^14.0.1",
+    "@semantic-release/release-notes-generator": "^14.0.2",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-links": "^8.4.7",
@@ -85,16 +85,16 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/css-modules": "^1.0.5",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.10.1",
+    "@types/node": "^22.10.2",
     "@types/react": "^19.0.1",
-    "@types/react-dom": "^19.0.1",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
+    "@types/react-dom": "^19.0.2",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
     "@vitejs/plugin-react": "^4.3.4",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.2.1",
     "bulma": "^0.9.4",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.1.0",
@@ -106,7 +106,7 @@
     "hygen": "^6.2.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^15.2.10",
+    "lint-staged": "^15.2.11",
     "npm-check-updates": "^17.1.11",
     "prettier": "^3.4.2",
     "react": "^18.3.1",
@@ -115,7 +115,7 @@
     "storybook": "^8.4.7",
     "tslib": "^2.8.1",
     "typescript": "~5.7.2",
-    "typescript-eslint": "^8.17.0",
+    "typescript-eslint": "^8.18.1",
     "vite": "^6.0.3",
     "vite-plugin-dts": "^4.3.0"
   },