Merge pull request #838 from vinaayakh-aot/feature/storybook-integration

Feature/storybook integration

Author: arun-s-aot

forms-flow-components/.storybook/main.js

@@ -27,6 +27,7 @@ module.exports = {
       alias: {
         ...(config.resolve && config.resolve.alias ? config.resolve.alias : {}),
         bootstrap: bootstrapPath,
+        '@formsflow/service': resolve(__dirname, '../src/mocks/formsflow-service.js'),
       },
       extensions: Array.from(new Set([...(config.resolve?.extensions || []), '.ts', '.tsx'])),
     };

forms-flow-components/src/components/CustomComponents/CollapsibleSearch.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { AngleRightIcon, AngleLeftIcon, PencilIcon } from "../SvgIcons";
 import { useTranslation } from "react-i18next";
-import { ButtonDropdown, FormInput } from "@formsflow/components";
+import { ButtonDropdown } from "./ButtonDropdown";
+import { FormInput } from "./FormInput";
 import { CustomButton } from "./Button";
 import { CustomInfo } from "./CustomInfo";
 

forms-flow-components/src/components/CustomComponents/CustomButton.tsx

@@ -6,11 +6,12 @@ import { useTranslation } from "react-i18next";
  * 
  * Usage:
  * <CustomButton variant="primary" label="submit" onClick={...} loading={...} icon={<Icon />} />
+ * <CustomButton variant="secondary" label="cancel" onClick={...} />
  * <CustomButton icon={<Icon />} iconOnly ariaLabel="Search" />
  */
 
 type ButtonVariant = "primary" | "secondary";
-type ButtonSize = "small" | "medium" | "large";
+type ButtonSize = "small" | "medium" | "large"; // Size prop not implemented correctly.CSS missing for this.
 type ButtonType = "button" | "submit" | "reset";
 
 interface CustomButtonProps extends Omit<React.ComponentPropsWithoutRef<"button">, 'onClick' | 'disabled' | 'type'> {

forms-flow-components/src/components/CustomComponents/CustomDropdownButton.tsx

@@ -1,28 +1,72 @@
-import React, { useState } from "react";
+import React, { useState, useCallback, useMemo, forwardRef, memo } from "react";
 import Dropdown from "react-bootstrap/Dropdown";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
 import { ChevronIcon } from "../SvgIcons/index";
 
-interface DropdownItemConfig {
+/**
+ * Dropdown item descriptor for `V8CustomDropdownButton`.
+ */
+export interface DropdownItemConfig {
+  /** Text label or translation key for the item */
   label: string;
+  /** Value associated with this item */
   value?: string;
+  /** Called when this item is clicked */
   onClick?: () => void;
+  /** Test ID for automated testing */
   dataTestId?: string;
+  /** Accessible label for screen readers */
   ariaLabel?: string;
 }
 
-interface V8CustomDropdownButtonProps {
+/**
+ * Props for `V8CustomDropdownButton` component.
+ * Optimized, accessible dropdown button with separate label and dropdown actions.
+ */
+export interface V8CustomDropdownButtonProps
+  extends Omit<React.ComponentPropsWithoutRef<"div">, "onClick"> {
+  /** Button label text */
   label?: string;
+  /** Array of dropdown menu items */
   dropdownItems: DropdownItemConfig[];
+  /** Visual style variant */
   variant?: "primary" | "secondary";
+  /** Disables the entire dropdown button */
   disabled?: boolean;
+  /** Additional CSS classes */
   className?: string;
+  /** Test ID for automated testing */
   dataTestId?: string;
+  /** Accessible label for screen readers */
   ariaLabel?: string;
-  menuPosition?: "left" | "right"; // controls dropdown menu alignment
+  /** Dropdown menu alignment */
+  menuPosition?: "left" | "right";
+  /** Called when the label is clicked (separate from dropdown) */
+  onLabelClick?: () => void;
 }
 
-export const V8CustomDropdownButton: React.FC<V8CustomDropdownButtonProps> = ({
+/**
+ * Utility function to build className string
+ */
+const buildClassNames = (...classes: (string | boolean | undefined)[]): string => {
+  return classes.filter(Boolean).join(" ");
+};
+
+/**
+ * V8CustomDropdownButton: Accessible, memoized dropdown button with separate label and dropdown actions.
+ * 
+ * Usage:
+ * <V8CustomDropdownButton
+ *   label="Actions"
+ *   dropdownItems={[
+ *     { label: 'Edit', value: 'edit', onClick: handleEdit },
+ *     { label: 'Delete', value: 'delete', onClick: handleDelete }
+ *   ]}
+ *   onLabelClick={handlePrimaryAction}
+ *   variant="primary"
+ * />
+ */
+const V8CustomDropdownButtonComponent = forwardRef<HTMLDivElement, V8CustomDropdownButtonProps>(({
   label = "Edit",
   dropdownItems,
   variant = "primary",
@@ -31,65 +75,145 @@ export const V8CustomDropdownButton: React.FC<V8CustomDropdownButtonProps> = ({
   dataTestId = "v8-dropdown",
   ariaLabel = "Custom dropdown",
   menuPosition = "left",
-}) => {
+  onLabelClick,
+  ...restProps
+}, ref) => {
+  // State management
   const [open, setOpen] = useState(false);
   const [selectedValue, setSelectedValue] = useState<string | null>(null);
 
-  const handleItemClick = (item: DropdownItemConfig) => {
+  // Memoized dropdown items to prevent unnecessary re-renders
+  const memoizedDropdownItems = useMemo(() => dropdownItems, [dropdownItems]);
+
+  // Memoized click handlers for better performance
+  const handleItemClick = useCallback((item: DropdownItemConfig) => {
     setSelectedValue(item.value || item.label);
     item.onClick?.();
-    setOpen(false); // close after selecting
-  };
+    setOpen(false); // Close dropdown after selection
+  }, []);
+
+  const handleLabelClick = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled && onLabelClick) {
+      onLabelClick();
+    }
+  }, [disabled, onLabelClick]);
+
+  const handleDropdownIconClick = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled) {
+      setOpen(!open);
+    }
+  }, [disabled, open]);
+
+  // Memoized dropdown toggle handler
+  const handleDropdownToggle = useCallback((isOpen: boolean) => {
+    if (!disabled) {
+      setOpen(isOpen);
+    }
+  }, [disabled]);
+
+  // Memoized container className
+  const containerClassName = useMemo(() => buildClassNames(
+    "v8-custom-dropdown",
+    `menu-${menuPosition}`,
+    className
+  ), [menuPosition, className]);
+
+  // Memoized toggle button className
+  const toggleClassName = useMemo(() => buildClassNames(
+    "v8-dropdown-toggle",
+    open && "open"
+  ), [open]);
 
   return (
     <Dropdown
       as={ButtonGroup}
       show={open}
-      onToggle={(isOpen) => setOpen(isOpen)}
-      className={`v8-custom-dropdown menu-${menuPosition} ${className}`}
+      onToggle={handleDropdownToggle}
+      className={containerClassName}
+      ref={ref}
       {...(dataTestId ? { "data-testid": dataTestId } : {})}
+      {...restProps}
     >
       <Dropdown.Toggle
         variant={variant}
         disabled={disabled}
-        className={`v8-dropdown-toggle ${open ? "open" : ""}`}
+        className={toggleClassName}
         aria-haspopup="listbox"
         aria-expanded={open}
         {...(ariaLabel ? { "aria-label": ariaLabel } : {})}
         {...(dataTestId ? { "data-testid": `${dataTestId}-toggle` } : {})}
       >
-        <div className="label-div">
+        {/* Label section - triggers separate action */}
+        <div 
+          className="label-div" 
+          onClick={handleLabelClick}
+          data-testid={`${dataTestId}-label`}
+          role="button"
+          tabIndex={disabled ? -1 : 0}
+          aria-label={`${label} action`}
+        >
           <span className="dropdown-label">{label}</span>
         </div>
+        
+        {/* Visual divider */}
         <span className="v8-dropdown-divider" aria-hidden="true" />
-        <div className="dropdown-icon">
+        
+        {/* Dropdown icon section - toggles menu */}
+        <div 
+          className="dropdown-icon"
+          onClick={handleDropdownIconClick}
+          data-testid={`${dataTestId}-icon`}
+          role="button"
+          tabIndex={disabled ? -1 : 0}
+          aria-label="Toggle dropdown menu"
+        >
           <span className="chevron-icon">
             <ChevronIcon />
           </span>
         </div>
       </Dropdown.Toggle>
 
+      {/* Dropdown menu */}
       <Dropdown.Menu
         className="v8-dropdown-menu"
         role="listbox"
         {...(dataTestId ? { "data-testid": `${dataTestId}-menu` } : {})}
       >
-        {dropdownItems.map((item) => (
-          <Dropdown.Item
-            key={item.value || item.label}
-            onClick={() => handleItemClick(item)}
-            className={`v8-dropdown-item ${
-              selectedValue === (item.value || item.label) ? "selected" : ""
-            }`}
-            role="option"
-            aria-selected={selectedValue === (item.value || item.label)}
-            {...(item.ariaLabel ? { "aria-label": item.ariaLabel } : {})}
-            {...(item.dataTestId ? { "data-testid": item.dataTestId } : {})}
-          >
-            {item.label}
-          </Dropdown.Item>
-        ))}
+        {memoizedDropdownItems.map((item, index) => {
+          const itemKey = item.value || item.label || index;
+          const isSelected = selectedValue === (item.value || item.label);
+          
+          return (
+            <Dropdown.Item
+              key={itemKey}
+              onClick={() => handleItemClick(item)}
+              className={buildClassNames(
+                "v8-dropdown-item",
+                isSelected && "selected"
+              )}
+              role="option"
+              aria-selected={isSelected}
+              {...(item.ariaLabel ? { "aria-label": item.ariaLabel } : {})}
+              {...(item.dataTestId ? { "data-testid": item.dataTestId } : {})}
+            >
+              {item.label}
+            </Dropdown.Item>
+          );
+        })}
       </Dropdown.Menu>
     </Dropdown>
   );
-};
+});
+
+// Set display name for better debugging
+V8CustomDropdownButtonComponent.displayName = "V8CustomDropdownButton";
+
+// Export memoized component for performance optimization
+export const V8CustomDropdownButton = memo(V8CustomDropdownButtonComponent);
+
+// Export types for consumers
+export type { V8CustomDropdownButtonProps };

forms-flow-components/src/components/CustomComponents/CustomTextArea.tsx

@@ -29,9 +29,9 @@ export const CustomTextArea: FC<CustomTextAreaProps> = ({
   return (
     <div className={containerClass}>
       {/* Hidden label for accessibility */}
-      <label htmlFor={inputId} className="sr-only">
+      {/* <label htmlFor={inputId} className="sr-only">
         {ariaLabel || t(placeholder)}
-      </label>
+      </label> */}
 
       <textarea
         id={inputId}

forms-flow-components/src/components/CustomComponents/CustomTextInput.tsx

@@ -25,9 +25,9 @@ export const CustomTextInput: FC<CustomTextInputProps> = ({
   return (
     <div className="text-input-container">
       {/* Hidden label for accessibility */}
-      <label htmlFor={inputId} className="sr-only">
+      {/* <label htmlFor={inputId} className="sr-only">
         {ariaLabel || t(placeholder)}
-      </label>
+      </label> */}
 
       <input
         id={inputId}