@bodynarf/react.components 1.13.5 → 1.13.7

package/utils/styles.js

@@ -1,20 +1,54 @@
-import { ElementPosition, ElementSize } from "../types";
 import { isNullish } from "@bodynarf/utils";
-/** Element position to bulma class name map */
+import { ElementColor, ElementPosition, ElementSize } from "../types";
+/**
+ * Map of element positions to their corresponding Bulma CSS class names.
+ * Used to convert ElementPosition enum values to CSS classes.
+ *
+ * @example
+ * // Returns "is-centered"
+ * positionToClassMap.get(ElementPosition.Center);
+ *
+ * @example
+ * // Returns "is-right"
+ * positionToClassMap.get(ElementPosition.Right);
+ */
 const positionToClassMap = new Map([
     [ElementPosition.Left, ""],
     [ElementPosition.Center, "is-centered"],
     [ElementPosition.Right, "is-right"]
 ]);
 /**
- * Get class name for element position
- * @param position Position of element value
- * @returns Related class name
+ * Get the Bulma CSS class name for a given element position.
+ *
+ * This function maps ElementPosition enum values to their corresponding
+ * Bulma CSS classes for positioning elements.
+ *
+ * @param position - The position of the element (ElementPosition enum value)
+ * @returns The corresponding Bulma CSS class name or empty string for default position
+ *
+ * @example
+ * // Returns "is-centered"
+ * getPositionClassName(ElementPosition.Center);
+ *
+ * @example
+ * // Returns ""
+ * getPositionClassName(ElementPosition.Left);
  */
 export const getPositionClassName = (position) => {
     return positionToClassMap.get(position) ?? "";
 };
-/** Element size to bulma class name map */
+/**
+ * Map of element sizes to their corresponding Bulma CSS class names.
+ * Used to convert ElementSize enum values to CSS classes.
+ *
+ * @example
+ * // Returns "is-small"
+ * sizeToClassMap.get(ElementSize.Small);
+ *
+ * @example
+ * // Returns "is-large"
+ * sizeToClassMap.get(ElementSize.Large);
+ */
 const sizeToClassMap = new Map([
     [ElementSize.Small, "is-small"],
     [ElementSize.Normal, "is-normal"],
@@ -22,12 +56,60 @@ const sizeToClassMap = new Map([
     [ElementSize.Large, "is-large"],
 ]);
 /**
- * Get class name for element size
- * @param position Size of element value
- * @returns Related class name
+ * Get the Bulma CSS class name for a given element size.
+ *
+ * This function maps ElementSize enum values to their corresponding
+ * Bulma CSS classes for sizing elements. Returns empty string if size is nullish
+ * or if size equals to skipValue parameter.
+ *
+ * @param size - The size of the element (ElementSize enum value)
+ * @param skipValue - Size value that should be ignored and return empty string
+ * @returns The corresponding Bulma CSS class name or empty string if size is nullish or equals skipValue
+ *
+ * @example
+ * // Returns "is-medium"
+ * getSizeClassName(ElementSize.Medium);
+ *
+ * @example
+ * // Returns ""
+ * getSizeClassName(null);
+ *
+ * @example
+ * // Returns ""
+ * getSizeClassName(undefined);
+ *
+ * @example
+ * // Returns ""
+ * getSizeClassName(ElementSize.Small, ElementSize.Small);
  */
-export const getSizeClassName = (size) => {
+export const getSizeClassName = (size, skipValue) => {
     return isNullish(size)
         ? ""
-        : sizeToClassMap.get(size) ?? "";
+        : size === skipValue
+            ? ""
+            : sizeToClassMap.get(size) ?? "";
+};
+/**
+ * Get the Bulma CSS class name for a given element color.
+ *
+ * This function converts ElementColor enum values to their corresponding
+ * Bulma CSS classes for coloring elements. Returns empty string for Default color.
+ *
+ * @param color - The color of the element (ElementColor enum value)
+ * @returns The corresponding Bulma CSS class name or empty string for default color
+ *
+ * @example
+ * // Returns "is-primary"
+ * getElementColorClassName(ElementColor.Primary);
+ *
+ * @example
+ * // Returns ""
+ * getElementColorClassName(ElementColor.Default);
+ *
+ * @example
+ * // Returns ""
+ * getElementColorClassName(null);
+ */
+export const getElementColorClassName = (color) => {
+    return color === ElementColor.Default ? "" : `is-${color}`;
 };

package/utils/validation.js

@@ -1,4 +1,4 @@
-import { isNullOrUndefined } from "@bodynarf/utils";
+import { isNullish } from "@bodynarf/utils";
 import { ValidationStatus } from "../types";
 /**
  * Get className component prop based on current validation state and style
@@ -9,8 +9,8 @@ import { ValidationStatus } from "../types";
  * @returns Style className
  */
 export const getStyleClassName = (style, validationState) => {
-    if (isNullOrUndefined(validationState) || validationState.status === ValidationStatus.None) {
-        return isNullOrUndefined(style)
+    if (isNullish(validationState) || validationState.status === ValidationStatus.None) {
+        return isNullish(style)
             ? ""
             : `is-${style}`;
     }