@abstraks-dev/ui-library 1.0.1

package/dist/components/Crud.js

@@ -0,0 +1,564 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Crud = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireWildcard(require("prop-types"));
+var _Button = require("./Button");
+var _TextInput = require("./TextInput");
+var _Select = require("./Select");
+var _Paragraph = require("./Paragraph");
+var _icons = require("../icons");
+var _Prompt = _interopRequireDefault(require("./Prompt"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * CRUD Component - A completely stateless, accessible list management component
+ *
+ * This component provides Create, Read, Update, Delete functionality with:
+ * - Full accessibility support (ARIA, keyboard navigation, screen reader)
+ * - Smooth animations for add/remove operations (compatible with drag-and-drop)
+ * - Drag and drop reordering capability with proper event handling
+ * - Support for both input and select elements
+ * - Flexible animation system that works seamlessly with drag operations
+ *
+ * All state management and business logic should be handled by parent components.
+ * This ensures maximum flexibility and reusability.
+ *
+ * ## Accessibility Features
+ * - Full keyboard navigation (Tab, Enter, Space, Delete, Escape)
+ * - Screen reader announcements via ARIA live regions
+ * - Proper ARIA labeling and descriptions
+ * - Focus management and indicators
+ * - High contrast mode support
+ * - Reduced motion preferences respected
+ *
+ * ## Technical Implementation
+ * - When animations are enabled, drag events are applied to the CSSTransition wrapper
+ * - When animations are disabled, drag events are applied directly to items
+ * - This dual approach ensures reliable drag-and-drop in both modes
+ *
+ * @component
+ * @example
+ * // Basic usage (stateless)
+ * <Crud
+ *   items={items}
+ *   onItemAdd={handleAdd}
+ *   onItemEdit={handleEdit}
+ *   onItemSave={handleSave}
+ *   onItemDelete={handleDelete}
+ *   enableAnimations={true}
+ *   enableDragDrop={false}
+ *   ariaLabel="Task list management"
+ * />
+ *
+ * @param {Object} props - Component props
+ * @param {string} [props.componentName='crud'] - Base CSS class name
+ * @param {string} [props.additionalClassName=''] - Additional CSS classes
+ * @param {string} [props.placeholder='Type here...'] - Placeholder text for input fields
+ * @param {string} props.addBtnText - Text for the add button (required)
+ * @param {Array} props.items - Array of CRUD items with {id, content, editable, checked} (required)
+ * @param {string} [props.element='input'] - Input element type ('input' or 'select')
+ * @param {string} [props.optionValue='Select an option'] - Default option text for select elements
+ * @param {Array} [props.selectOptions=[]] - Options for select elements
+ * @param {Function} props.onItemAdd - Callback for adding new items (required)
+ * @param {Function} props.onItemEdit - Callback for editing items (required)
+ * @param {Function} props.onItemSave - Callback for saving items (required)
+ * @param {Function} props.onItemDelete - Callback for deleting items (required)
+ * @param {Function} [props.onItemChange] - Callback for input changes
+ * @param {Function} [props.onDragStart] - Callback for drag start events
+ * @param {Function} [props.onDragOver] - Callback for drag over events
+ * @param {Function} [props.onDragEnter] - Callback for drag enter events
+ * @param {Function} [props.onDragLeave] - Callback for drag leave events
+ * @param {Function} [props.onDrop] - Callback for drop events
+ * @param {Function} [props.onKeyDown] - Callback for keyboard events
+ * @param {boolean} [props.enableAnimations=true] - Enable/disable animations (compatible with drag-drop)
+ * @param {boolean} [props.enableDragDrop=false] - Enable/disable drag and drop
+ * @param {boolean} [props.showAddButton=true] - Show/hide add button
+ * @param {string} [props.ariaLabel='CRUD list management'] - Accessible label for the component
+ * @param {string} [props.ariaDescribedBy] - ID of element describing the component
+ * @param {Object} [props.dragState] - Current drag and drop state
+ * @param {boolean} [props.dragState.isDragging=false] - Whether an item is being dragged
+ * @param {number|string} [props.dragState.draggedFrom] - Index of item being dragged
+ * @param {number|string} [props.dragState.draggedTo] - Index of drop target
+ */
+const Crud = exports.Crud = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  id,
+  className = '',
+  // Content props
+  items = [],
+  placeholder = 'Type here...',
+  addBtnText = 'Add',
+  element = 'input',
+  optionValue = 'Select an option',
+  selectOptions = [],
+  // Behavior props
+  enableAnimations = true,
+  enableDragDrop = false,
+  showAddButton = true,
+  // Event props
+  onItemAdd = null,
+  onItemEdit = null,
+  onItemSave = null,
+  onItemDelete = null,
+  onItemChange = null,
+  onDragStart = null,
+  onDragOver = null,
+  onDragEnter = null,
+  onDragLeave = null,
+  onDrop = null,
+  onKeyDown = null,
+  // Accessibility props
+  'aria-label': ariaLabel = 'CRUD list management',
+  'aria-describedby': ariaDescribedBy = null,
+  // Drag and drop state
+  dragState = {
+    isDragging: false,
+    draggedFrom: null,
+    draggedTo: null
+  },
+  // Animation control
+  lastEditedId = null,
+  // Legacy props (for backward compatibility - internal use only)
+  componentName = 'crud',
+  additionalClassName = '',
+  // Prompt props
+  promptOpen = false,
+  promptMessage = 'Are you sure you want to delete this item?',
+  onPromptConfirm,
+  onPromptCancel,
+  onPromptDelete,
+  ...props
+}, ref) => {
+  // Handle legacy prop mapping
+  const finalId = id || componentName || `crud-${Math.random().toString(36).substr(2, 9)}`;
+  const finalClassName = className || additionalClassName;
+
+  /**
+   * ========================
+   * State (fully controlled by parent)
+   * ========================
+   *
+   * All state (items, inputValue, selectInputValue) must be managed by the parent.
+   * This component is now fully stateless.
+   */
+
+  /**
+   * Handles keyboard events for each item
+   */
+  const handleItemKeyDown = (event, item, index) => {
+    const {
+      key
+    } = event;
+
+    // Delete key to delete item
+    if (key === 'Delete' && !item.editable) {
+      event.preventDefault();
+      onItemDelete?.(item, index);
+    }
+
+    // Escape to cancel editing
+    if (key === 'Escape' && item.editable) {
+      event.preventDefault();
+      onItemEdit?.(item, index, false); // Cancel edit
+    }
+    onKeyDown?.(event, item, index);
+  };
+
+  /**
+   * Handles input changes (delegated to parent)
+   */
+  const handleChange = (event, item, index) => {
+    const {
+      name,
+      value
+    } = event.target;
+    onItemChange?.(event, item, index, {
+      [name]: value
+    });
+  };
+
+  /**
+   * Handles drag and drop events
+   */
+  const handleDragStart = (event, item, index) => {
+    if (!enableDragDrop) return;
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData('text/html', '');
+    event.stopPropagation(); // Prevent event from bubbling
+    onDragStart?.(event, item, index);
+  };
+  const handleDragOver = (event, item, index) => {
+    if (!enableDragDrop) return;
+    event.preventDefault();
+    event.stopPropagation(); // Prevent event from bubbling
+    event.dataTransfer.dropEffect = 'move';
+    onDragOver?.(event, item, index);
+  };
+  const handleDragEnter = (event, item, index) => {
+    if (!enableDragDrop) return;
+    event.preventDefault();
+    onDragEnter?.(event, item, index);
+  };
+  const handleDragLeave = (event, item, index) => {
+    if (!enableDragDrop) return;
+    onDragLeave?.(event, item, index);
+  };
+  const handleDrop = (event, item, index) => {
+    if (!enableDragDrop) return;
+    event.preventDefault();
+    event.stopPropagation(); // Prevent event from bubbling
+    onDrop?.(event, item, index);
+  };
+  const handleDragEnd = (event, item, index) => {
+    if (!enableDragDrop) return;
+
+    // Reset any drag-related styling or state
+  };
+
+  /**
+   * Renders a single CRUD item
+   */
+  const renderItem = (item, index, applyDragEvents = true) => {
+    const isDragging = dragState.isDragging && dragState.draggedFrom === index;
+    const isDropTarget = dragState.draggedTo === index;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: item.id,
+      className: `item ${isDragging ? 'dragging' : ''} ${isDropTarget ? 'drop-target' : ''}`,
+      "data-position": applyDragEvents ? index : undefined,
+      draggable: applyDragEvents && enableDragDrop && !item.editable,
+      onDragStart: applyDragEvents && enableDragDrop && !item.editable ? e => handleDragStart(e, item, index) : undefined,
+      onDragOver: applyDragEvents && enableDragDrop ? e => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = 'move';
+        handleDragOver(e, item, index);
+      } : undefined,
+      onDragEnter: applyDragEvents && enableDragDrop ? e => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleDragEnter(e, item, index);
+      } : undefined,
+      onDragLeave: applyDragEvents && enableDragDrop ? e => handleDragLeave(e, item, index) : undefined,
+      onDrop: applyDragEvents && enableDragDrop ? e => handleDrop(e, item, index) : undefined,
+      onDragEnd: applyDragEvents && enableDragDrop && !item.editable ? e => handleDragEnd(e, item, index) : undefined,
+      style: {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        minHeight: '40px',
+        cursor: applyDragEvents && enableDragDrop && !item.editable ? 'grab' : 'default',
+        // Only apply drag styling when drag events are applied to this element
+        ...(applyDragEvents && {
+          // Ensure no CSS is blocking drag events
+          pointerEvents: 'auto',
+          touchAction: 'none',
+          userSelect: 'none',
+          // Add a background to make sure the drop zone is visible
+          backgroundColor: isDropTarget ? '#e3f2fd' : 'transparent',
+          border: isDropTarget ? '1px solid #2196f3' : enableDragDrop && !item.editable ? '1px solid transparent' : 'none'
+        })
+      },
+      role: "listitem",
+      "aria-describedby": item.editable ? `item-${item.id}-editing` : undefined
+    }, enableDragDrop && !item.editable && /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: '20px',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#f0f0f0',
+        borderRight: '1px solid #ddd',
+        userSelect: 'none',
+        pointerEvents: 'none' // Don't interfere with drag events
+      },
+      "aria-hidden": "true"
+    }, "\u22EE\u22EE"), /*#__PURE__*/_react.default.createElement("div", {
+      className: "item-content-wrapper",
+      style: {
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        minHeight: '40px',
+        // Disable pointer events on children when dragging to ensure drag events reach parent
+        pointerEvents: isDragging ? 'none' : 'auto'
+      },
+      tabIndex: item.editable ? -1 : 0,
+      onKeyDown: e => handleItemKeyDown(e, item, index)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "input-container"
+    }, item.editable ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, element === 'input' && /*#__PURE__*/_react.default.createElement(_TextInput.TextInput, {
+      id: `crud-input-${item.id}`,
+      name: "content",
+      type: "text",
+      value: item.content || '',
+      placeholder: placeholder,
+      onChange: e => handleChange(e, item, index),
+      className: "input text-input",
+      "data-testid": "crud-input",
+      "aria-label": `Edit item ${index + 1}`,
+      "aria-describedby": `item-${item.id}-editing`,
+      autoFocus: true
+    }), element === 'select' && /*#__PURE__*/_react.default.createElement(_Select.Select, {
+      id: `crud-select-${item.id}`,
+      name: "content",
+      value: item.content || '',
+      placeholder: optionValue,
+      onChange: e => handleChange(e, item, index),
+      options: selectOptions,
+      className: "input select-input",
+      hideLabel: true,
+      "data-testid": "crud-select",
+      "aria-label": `Select option for item ${index + 1}`,
+      "aria-describedby": `item-${item.id}-editing`
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      id: `item-${item.id}-editing`,
+      className: "sr-only",
+      "aria-live": "polite"
+    }, "Currently editing item ", index + 1, ". Press Enter to save, Escape to cancel.")) : /*#__PURE__*/_react.default.createElement(_Paragraph.Paragraph, {
+      componentName: "item-content",
+      role: "text",
+      "aria-label": `Item ${index + 1}: ${item.content}`
+    }, item.content)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "inside-btns",
+      role: "group",
+      "aria-label": `Actions for item ${index + 1}`
+    }, item.editable ?
+    /*#__PURE__*/
+    // Editing mode buttons
+    _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      className: "btn-icon save-btn",
+      onClick: () => onItemSave?.(item, index),
+      "aria-label": `Save changes to item ${index + 1}`,
+      title: "Save changes"
+    }, /*#__PURE__*/_react.default.createElement(_icons.CheckCircle, {
+      fill: "#57F500"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "text"
+    }, "Save")), /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      className: "btn-icon delete-btn",
+      onClick: () => onPromptDelete?.(item, index),
+      "aria-label": `Delete item ${index + 1}`,
+      title: "Delete item"
+    }, /*#__PURE__*/_react.default.createElement(_icons.TrashX, {
+      fill: "red"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "text"
+    }, "Delete"))) :
+    /*#__PURE__*/
+    // View mode buttons
+    _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      className: "btn-icon edit-btn",
+      onClick: () => onItemEdit?.(item, index),
+      "aria-label": `Edit item ${index + 1}`,
+      title: "Edit item"
+    }, /*#__PURE__*/_react.default.createElement(_icons.EditSquare, {
+      fill: "#333"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "text"
+    }, "Edit")), /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      className: "btn-icon delete-btn",
+      onClick: () => onPromptDelete?.(item, index),
+      "aria-label": `Delete item ${index + 1}`,
+      title: "Delete item"
+    }, /*#__PURE__*/_react.default.createElement(_icons.TrashX, {
+      fill: "red"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "text"
+    }, "Delete"))))));
+  };
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    id: finalId,
+    className: `crud ${finalClassName}`.trim(),
+    "data-testid": finalId,
+    role: "region",
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy
+  }, props), /*#__PURE__*/_react.default.createElement("div", {
+    className: "list",
+    role: "list",
+    "aria-label": `List of ${items.length} items`,
+    "aria-live": "polite"
+  }, items.map((item, index) => renderItem(item, index))), showAddButton && /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    additionalClassName: "add-btn",
+    onClick: onItemAdd,
+    "aria-label": "Add new item to list",
+    title: "Add new item",
+    variant: "primary"
+  }, /*#__PURE__*/_react.default.createElement(_icons.PlusCircle, {
+    fill: "#fff"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "text"
+  }, addBtnText)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sr-only",
+    "aria-live": "assertive",
+    "aria-atomic": "true"
+  }), /*#__PURE__*/_react.default.createElement(_Prompt.default, {
+    open: promptOpen,
+    message: promptMessage,
+    onConfirm: onPromptConfirm,
+    onCancel: onPromptCancel
+  }));
+});
+
+// Set display name for better debugging
+Crud.displayName = 'Crud';
+Crud.propTypes = {
+  // ============================================================================
+  // CORE PROPS
+  // ============================================================================
+
+  /**
+   * Unique identifier for the component
+   */
+  id: _propTypes.string,
+  /**
+   * Additional CSS classes to apply to the component
+   */
+  className: _propTypes.string,
+  // ============================================================================
+  // CONTENT PROPS
+  // ============================================================================
+
+  /**
+   * Array of CRUD items with structure: {id, content, editable, checked} (REQUIRED)
+   */
+  items: _propTypes.array.isRequired,
+  /**
+   * Placeholder text for input fields
+   */
+  placeholder: _propTypes.string,
+  /**
+   * Text for the add button (REQUIRED)
+   */
+  addBtnText: _propTypes.string.isRequired,
+  /**
+   * Input element type ('input' or 'select')
+   */
+  element: _propTypes.string,
+  /**
+   * Default option text for select elements
+   */
+  optionValue: _propTypes.string,
+  /**
+   * Array of option elements for select inputs
+   */
+  selectOptions: _propTypes.array,
+  // ============================================================================
+  // BEHAVIOR PROPS
+  // ============================================================================
+
+  /**
+   * Enable/disable animations for add/remove operations
+   */
+  enableAnimations: _propTypes.bool,
+  /**
+   * Enable/disable drag and drop functionality
+   */
+  enableDragDrop: _propTypes.bool,
+  /**
+   * Show/hide the add button
+   */
+  showAddButton: _propTypes.bool,
+  // ============================================================================
+  // EVENT PROPS
+  // ============================================================================
+
+  /**
+   * Callback function for adding new items (REQUIRED)
+   */
+  onItemAdd: _propTypes.func.isRequired,
+  /**
+   * Callback function for editing items (REQUIRED)
+   */
+  onItemEdit: _propTypes.func.isRequired,
+  /**
+   * Callback function for saving item changes (REQUIRED)
+   */
+  onItemSave: _propTypes.func.isRequired,
+  /**
+   * Callback function for deleting items (REQUIRED)
+   */
+  onItemDelete: _propTypes.func.isRequired,
+  /**
+   * Callback function for input value changes
+   */
+  onItemChange: _propTypes.func,
+  /**
+   * Callback function for drag start events
+   */
+  onDragStart: _propTypes.func,
+  /**
+   * Callback function for drag over events
+   */
+  onDragOver: _propTypes.func,
+  /**
+   * Callback function for drag enter events
+   */
+  onDragEnter: _propTypes.func,
+  /**
+   * Callback function for drag leave events
+   */
+  onDragLeave: _propTypes.func,
+  /**
+   * Callback function for drop events
+   */
+  onDrop: _propTypes.func,
+  /**
+   * Callback function for keyboard events
+   */
+  onKeyDown: _propTypes.func,
+  // ============================================================================
+  // ACCESSIBILITY PROPS
+  // ============================================================================
+
+  /**
+   * Accessible label for the entire component
+   */
+  'aria-label': _propTypes.string,
+  /**
+   * ID of element that describes the component
+   */
+  'aria-describedby': _propTypes.string,
+  // ============================================================================
+  // INTERNAL STATE PROPS
+  // ============================================================================
+
+  /**
+   * Current drag and drop state object
+   */
+  dragState: (0, _propTypes.shape)({
+    isDragging: _propTypes.bool,
+    draggedFrom: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
+    draggedTo: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
+    originalOrder: _propTypes.array,
+    updatedOrder: _propTypes.array
+  }),
+  /**
+   * Use 'id' instead. Base CSS class name for the component
+   */
+  componentName: _propTypes.string,
+  /**
+   * Use 'className' instead. Additional CSS classes to apply
+   */
+  additionalClassName: _propTypes.string,
+  /**
+   * Use 'aria-label' instead. Accessible label for the component
+   */
+  ariaLabel: _propTypes.string,
+  /**
+   * Use 'aria-describedby' instead. ID of element that describes the component
+   */
+  ariaDescribedBy: _propTypes.string
+};
+var _default = exports.default = Crud;