Data attribute hook [copy of #921] [Updated] (#934)

Author: GoldGroove06

src/components/ui/Button/Button.tsx

@@ -3,6 +3,7 @@ import React, { ButtonHTMLAttributes, DetailedHTMLProps, PropsWithChildren } fro
 import { customClassSwitcher } from '~/core';
 import { clsx } from 'clsx';
 import ButtonPrimitive from '~/core/primitives/Button';
+import  { useCreateDataAttribute, useComposeAttributes }  from "~/core/hooks/createDataAttribute"
 
 // make the color prop default accent color
 const COMPONENT_NAME = 'Button';
@@ -18,25 +19,15 @@ const Button = ({ children, type = 'button', customRootClass = '', className = '
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
     // apply data attribute for accent color
     // apply attribute only if color is present
-    const data_attributes: Record<string, string> = {};
-
-    if (variant) {
-        data_attributes['data-button-variant'] = variant;
-    }
-
-    if (size) {
-        data_attributes['data-button-size'] = size;
-    }
-
-    if (color) {
-        data_attributes['data-accent-color'] = color;
-    }
+    const dataAttributes = useCreateDataAttribute("button", { variant, size });
+    const accentAttributes = useCreateDataAttribute("accent", { color });
+    const composedAttributes = useComposeAttributes(dataAttributes(), accentAttributes());
 
     return (
         <ButtonPrimitive
             type={type}
             className={clsx(rootClass, className)}
-            {...data_attributes}
+            {...composedAttributes()}
             {...props}
         >
             {children}

src/core/hooks/createDataAttribute/createDataAttribute.test.tsx

@@ -0,0 +1,54 @@
+import { renderHook } from "@testing-library/react";
+import { useCreateDataAttribute, useComposeAttributes } from ".";
+
+/**
+ * Test case: Verify that attributes are correctly created and applied.
+ */
+test("attributes are created and applied", () => {
+  // Render the hook for creating data attributes with the prefix "button"
+  const { result: dataAttributes } = renderHook(() =>
+    useCreateDataAttribute("button", { variant: "primary", size: "large" })
+  );
+
+  // Render the hook for creating data attributes with the prefix "accent"
+  const { result: accentAttributes } = renderHook(() =>
+    useCreateDataAttribute("accent", { color: "red" })
+  );
+
+  // Render the hook that merges the two attribute objects into a single object
+  const { result: composedAttributes } = renderHook(() =>
+    useComposeAttributes(dataAttributes.current(), accentAttributes.current())
+  );
+
+  // Assert that the composed attributes object contains the expected `data-*` attributes
+  expect(composedAttributes.current()).toEqual({
+    "data-button-variant": "primary",
+    "data-button-size": "large",
+    "data-accent-color": "red",
+  });
+});
+
+/**
+ * Test case: Verify that attributes are correctly created, ignoring undefined or empty values.
+ */
+test("attributes are created and applied with undefined and empty values", () => {
+  // Render the hook with an undefined variant and a defined size
+  const { result: dataAttributes } = renderHook(() =>
+    useCreateDataAttribute("button", { variant: undefined, size: "large" })
+  );
+
+  // Render the hook with an empty string for color (should be ignored)
+  const { result: accentAttributes } = renderHook(() =>
+    useCreateDataAttribute("accent", { color: "" })
+  );
+
+  // Merge the attributes
+  const { result: composedAttributes } = renderHook(() =>
+    useComposeAttributes(dataAttributes.current(), accentAttributes.current())
+  );
+
+  // Assert that only the valid `data-*` attributes are present
+  expect(composedAttributes.current()).toEqual({
+    "data-button-size": "large", // "variant" is ignored since it's undefined, and "color" is ignored since it's an empty string
+  });
+});

src/core/hooks/createDataAttribute/index.ts

@@ -0,0 +1,41 @@
+import { useCallback } from "react";
+
+/**
+ * Custom hook to generate `data-*` attributes dynamically.
+ * 
+ * @param {string} prefix - The prefix to be used for the data attributes (e.g., "button" for "data-button-*").
+ * @param {Record<string, any> | null} attributes - An object containing key-value pairs of attributes.
+ * @returns {Function} - A memoized function that returns an object containing formatted `data-*` attributes.
+ */
+export const useCreateDataAttribute = (
+  prefix: string,
+  attributes: Record<string, any> | null
+) => {
+  return useCallback(() => {
+    // If attributes is null, return an empty object
+    if (!attributes) return {};
+    
+    // Transform the attributes object into `data-*` attributes
+    return Object.fromEntries(
+      Object.entries(attributes)
+        .filter(([_, value]) => value !== undefined && value !== "") // Remove undefined or empty values
+        .map(([key, value]) => [`data-${prefix}-${key}`, value]) // Convert keys to `data-prefix-key`
+    );
+  }, [prefix, attributes]); // Dependencies: recompute only if prefix or attributes change
+};
+
+/**
+ * Custom hook to merge multiple attribute objects into a single object.
+ * 
+ * @param {...(Record<string, any> | null)[]} attributeObjects - Multiple attribute objects to be combined.
+ * @returns {Function} - A memoized function that returns a merged attributes object.
+ */
+export const useComposeAttributes = (
+  ...attributeObjects: (Record<string, any> | null)[]
+) => {
+  return useCallback(() => {
+    // Merge all attribute objects, ignoring null values
+    return Object.assign({}, ...attributeObjects.filter((obj) => obj !== null));
+  }, [attributeObjects]); // Dependencies: recompute only if attributeObjects change
+};
+