@abstraks-dev/ui-library 1.0.1

package/dist/components/DragAndDrop.js

@@ -0,0 +1,337 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragAndDrop = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _accessibility = require("../utils/accessibility.js");
+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); }
+/**
+ * DragAndDrop Component - A completely stateless, accessible drag-and-drop list component
+ *
+ * This component provides drag-and-drop functionality with:
+ * - Full accessibility support (ARIA, keyboard navigation, screen reader announcements)
+ * - Customizable item rendering and styling
+ * - Proper event handling for all drag operations
+ * - Focus management and keyboard interactions
+ * - High contrast and reduced motion support
+ * - Screen reader announcements for all drag operations
+ *
+ * All state management and business logic should be handled by parent components.
+ * This ensures maximum flexibility and reusability across different use cases.
+ *
+ * ## Accessibility Features
+ * - Full keyboard navigation with Tab, Arrow keys, Space, Enter
+ * - Screen reader announcements for drag operations and state changes
+ * - Proper ARIA labeling and live regions
+ * - Focus indicators and management
+ * - High contrast mode support
+ * - Reduced motion preferences respected
+ * - Semantic HTML structure
+ *
+ * ## Technical Implementation
+ * - Uses HTML5 drag and drop API with proper event handling
+ * - Provides callbacks for all drag events (start, over, enter, leave, drop)
+ * - Supports custom drag state management from parent
+ * - Handles keyboard interactions for accessibility
+ *
+ * @component
+ * @example
+ * // Basic usage (stateless)
+ * <DragAndDrop
+ *   items={items}
+ *   onDragStart={handleDragStart}
+ *   onDragOver={handleDragOver}
+ *   onDrop={handleDrop}
+ *   dragState={dragState}
+ *   ariaLabel="Reorderable task list"
+ * />
+ *
+ * @param {Object} props - Component props
+ * @param {string} [props.componentName='drag-and-drop'] - Base CSS class name
+ * @param {string} [props.additionalClassName=''] - Additional CSS classes
+ * @param {Array} props.items - Array of items to display and make draggable (required)
+ * @param {Function} props.onDragStart - Callback for drag start events (required)
+ * @param {Function} props.onDragOver - Callback for drag over events (required)
+ * @param {Function} props.onDragEnter - Callback for drag enter events
+ * @param {Function} props.onDragLeave - Callback for drag leave events (required)
+ * @param {Function} props.onDrop - Callback for drop events (required)
+ * @param {Function} [props.onKeyDown] - Callback for keyboard events
+ * @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
+ * @param {boolean} [props.enableKeyboardNavigation=true] - Enable keyboard navigation
+ * @param {string} [props.ariaLabel='Draggable list'] - Accessible label for the component
+ * @param {string} [props.ariaDescribedBy] - ID of element describing the component
+ * @param {Function} [props.renderItem] - Custom item renderer function
+ * @param {string} [props.itemIdKey='id'] - Key to use for item IDs
+ * @param {string} [props.itemContentKey='title'] - Key to use for item content
+ * @param {string} [props.itemNumberKey='number'] - Key to use for item numbers
+ */
+
+const DragAndDrop = exports.DragAndDrop = /*#__PURE__*/(0, _react.forwardRef)(({
+  componentName = 'drag-and-drop',
+  additionalClassName = '',
+  items = [],
+  onDragStart,
+  onDragOver,
+  onDragEnter = null,
+  onDragLeave,
+  onDrop,
+  onKeyDown = null,
+  dragState = {
+    isDragging: false,
+    draggedFrom: null,
+    draggedTo: null,
+    originalOrder: [],
+    updatedOrder: []
+  },
+  enableKeyboardNavigation = true,
+  ariaLabel = 'Draggable list',
+  ariaDescribedBy = null,
+  renderItem = null,
+  itemIdKey = 'id',
+  itemContentKey = 'title',
+  itemNumberKey = 'number'
+}, ref) => {
+  const {
+    isDragging = false,
+    draggedFrom = null,
+    draggedTo = null
+  } = dragState;
+
+  /**
+   * Handles drag start events with accessibility announcements
+   */
+  const handleDragStart = (event, item, index) => {
+    // Call parent callback
+    onDragStart?.(event, item, index);
+
+    // Set data for Firefox compatibility
+    event.dataTransfer.setData('text/html', '');
+
+    // Focus management for accessibility
+    (0, _accessibility.safeFocus)(event.currentTarget);
+  };
+
+  /**
+   * Handles drag over events
+   */
+  const handleDragOver = (event, item, index) => {
+    event.preventDefault();
+    onDragOver?.(event, item, index);
+  };
+
+  /**
+   * Handles drag enter events
+   */
+  const handleDragEnter = (event, item, index) => {
+    onDragEnter?.(event, item, index);
+  };
+
+  /**
+   * Handles drag leave events
+   */
+  const handleDragLeave = (event, item, index) => {
+    onDragLeave?.(event, item, index);
+  };
+
+  /**
+   * Handles drop events
+   */
+  const handleDrop = (event, item, index) => {
+    event.preventDefault();
+    onDrop?.(event, item, index);
+  };
+
+  /**
+   * Handles keyboard navigation for accessibility
+   */
+  const handleKeyDown = (event, item, index) => {
+    if (!enableKeyboardNavigation) return;
+
+    // Let parent handle any custom keyboard logic
+    onKeyDown?.(event, item, index);
+
+    // Basic keyboard navigation
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault();
+        if (index > 0) {
+          const prevItem = event.currentTarget.parentElement?.previousElementSibling?.querySelector('[draggable]');
+          (0, _accessibility.safeFocus)(prevItem);
+        }
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        if (index < items.length - 1) {
+          const nextItem = event.currentTarget.parentElement?.nextElementSibling?.querySelector('[draggable]');
+          (0, _accessibility.safeFocus)(nextItem);
+        }
+        break;
+      case 'Space':
+      case 'Enter':
+        // Parent can handle drag simulation for keyboard users
+        break;
+      default:
+        break;
+    }
+  };
+
+  /**
+   * Default item renderer
+   */
+  const defaultRenderItem = (item, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "true"
+  }, item[itemNumberKey] || index + 1), /*#__PURE__*/_react.default.createElement("p", null, item[itemContentKey] || item.title || `Item ${index + 1}`));
+  const itemRenderer = renderItem || defaultRenderItem;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: `${componentName} ${additionalClassName}`.trim(),
+    "data-testid": componentName,
+    role: "application",
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "unordered-list",
+    role: "list",
+    "aria-label": "Reorderable items"
+  }, items.map((item, index) => {
+    const isDropTarget = draggedTo === index;
+    const isBeingDragged = draggedFrom === index && isDragging;
+    const itemId = item[itemIdKey] || item.id || `item-${index}`;
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: itemId,
+      "data-position": index,
+      draggable: true,
+      onDragStart: e => handleDragStart(e, item, index),
+      onDragOver: e => handleDragOver(e, item, index),
+      onDragEnter: e => handleDragEnter(e, item, index),
+      onDrop: e => handleDrop(e, item, index),
+      onDragLeave: e => handleDragLeave(e, item, index),
+      onKeyDown: e => handleKeyDown(e, item, index),
+      className: `list-item ${isDropTarget ? 'dropArea' : ''} ${isBeingDragged ? 'being-dragged' : ''}`,
+      role: "listitem",
+      tabIndex: 0,
+      "aria-label": `${item[itemContentKey] || item.title}, position ${index + 1} of ${items.length}. Press space to start dragging.`,
+      "aria-describedby": `drag-instructions-${index}`,
+      "aria-grabbed": isBeingDragged,
+      "aria-dropeffect": isDropTarget ? 'move' : 'none'
+    }, itemRenderer(item, index), /*#__PURE__*/_react.default.createElement("div", {
+      id: `drag-instructions-${index}`,
+      className: "sr-only",
+      "aria-live": "polite"
+    }, isBeingDragged && 'Currently dragging this item', isDropTarget && 'Drop target area', !isBeingDragged && !isDropTarget && 'Use arrow keys to navigate, space to drag'));
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    "aria-live": "assertive",
+    "aria-atomic": "true",
+    className: "sr-only",
+    role: "status"
+  }, isDragging && draggedFrom !== null && `Item ${draggedFrom + 1} is being dragged`));
+});
+
+// Set display name for better debugging
+DragAndDrop.displayName = 'DragAndDrop';
+
+// PropTypes definition with proper required fields
+DragAndDrop.propTypes = {
+  /**
+   * Base CSS class name for the component
+   */
+  componentName: _propTypes.string,
+  /**
+   * Additional CSS classes to apply
+   */
+  additionalClassName: _propTypes.string,
+  /**
+   * Array of items to display and make draggable (REQUIRED)
+   * Each item should have at least a title/content property
+   */
+  items: _propTypes.array.isRequired,
+  /**
+   * Callback function for drag start events (REQUIRED)
+   * @param {Event} event - The drag event
+   * @param {Object} item - The item being dragged
+   * @param {number} index - The index of the item
+   */
+  onDragStart: _propTypes.func.isRequired,
+  /**
+   * Callback function for drag over events (REQUIRED)
+   * @param {Event} event - The drag event
+   * @param {Object} item - The item being dragged over
+   * @param {number} index - The index of the drop target
+   */
+  onDragOver: _propTypes.func.isRequired,
+  /**
+   * Callback function for drag enter events
+   * @param {Event} event - The drag event
+   * @param {Object} item - The item being entered
+   * @param {number} index - The index of the item
+   */
+  onDragEnter: _propTypes.func,
+  /**
+   * Callback function for drag leave events (REQUIRED)
+   * @param {Event} event - The drag event
+   * @param {Object} item - The item being left
+   * @param {number} index - The index of the item
+   */
+  onDragLeave: _propTypes.func.isRequired,
+  /**
+   * Callback function for drop events (REQUIRED)
+   * @param {Event} event - The drop event
+   * @param {Object} item - The item being dropped on
+   * @param {number} index - The index of the drop target
+   */
+  onDrop: _propTypes.func.isRequired,
+  /**
+   * Callback function for keyboard events
+   * @param {Event} event - The keyboard event
+   * @param {Object} item - The focused item
+   * @param {number} index - The index of the focused item
+   */
+  onKeyDown: _propTypes.func,
+  /**
+   * 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
+  }),
+  /**
+   * Enable/disable keyboard navigation
+   */
+  enableKeyboardNavigation: _propTypes.bool,
+  /**
+   * Accessible label for the entire component
+   */
+  ariaLabel: _propTypes.string,
+  /**
+   * ID of element that describes the component
+   */
+  ariaDescribedBy: _propTypes.string,
+  /**
+   * Custom item renderer function
+   * @param {Object} item - The item to render
+   * @param {number} index - The index of the item
+   * @returns {React.ReactNode} The rendered item content
+   */
+  renderItem: _propTypes.func,
+  /**
+   * Key to use for item IDs (for React keys)
+   */
+  itemIdKey: _propTypes.string,
+  /**
+   * Key to use for item content/title
+   */
+  itemContentKey: _propTypes.string,
+  /**
+   * Key to use for item numbers/positions
+   */
+  itemNumberKey: _propTypes.string
+};

package/dist/components/Error.js

@@ -0,0 +1,206 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Error = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+require("../styles/error.scss");
+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); }
+/**
+ * Error Component
+ *
+ * Displays error messages with proper accessibility support and multiple severity levels.
+ * Features ARIA live regions, keyboard navigation, and customizable styling.
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <Error
+ *   severity="error"
+ *   size="medium"
+ *   dismissible={true}
+ *   onDismiss={() => setShowError(false)}
+ *   aria-label="Form validation error"
+ * >
+ *   Please fill in all required fields
+ * </Error>
+ * ```
+ *
+ * @param {object} props - Component props
+ * @param {React.ReactNode} props.children - The error message content to display
+ * @param {string} [props.className=''] - Additional CSS classes to apply
+ * @param {string} [props.id] - Unique identifier for the component
+ * @param {string} [props.severity='error'] - Error severity level
+ * @param {string} [props.size='medium'] - Size variant
+ * @param {boolean} [props.dismissible=false] - Whether the error can be dismissed
+ * @param {function} [props.onDismiss] - Callback when error is dismissed
+ * @returns {JSX.Element} The Error component
+ */
+const Error = exports.Error = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  id,
+  className = '',
+  // Content props
+  children = '',
+  // Appearance props
+  severity = 'error',
+  size = 'medium',
+  // Behavior props
+  dismissible = false,
+  isLive = true,
+  // Event props
+  onDismiss = null,
+  // Accessibility props
+  'aria-label': ariaLabel = '',
+  role = '',
+  // Legacy props (for backward compatibility - internal use only)
+  componentName = 'error',
+  additionalClassName = '',
+  ...restProps
+}, ref) => {
+  // Handle legacy prop mapping
+  const finalId = id || `error-${Math.random().toString(36).substr(2, 9)}`;
+  const finalClassName = className || additionalClassName;
+
+  // Determine the appropriate ARIA role based on severity
+  const getAriaRole = () => {
+    if (role) return role;
+    switch (severity) {
+      case 'error':
+        return 'alert';
+      case 'warning':
+        return 'alert';
+      case 'info':
+        return 'status';
+      case 'success':
+        return 'status';
+      default:
+        return 'alert';
+    }
+  };
+
+  // Determine aria-live setting based on severity and isLive prop
+  const getAriaLive = () => {
+    if (!isLive) return 'off';
+    switch (severity) {
+      case 'error':
+        return 'assertive';
+      case 'warning':
+        return 'assertive';
+      case 'info':
+        return 'polite';
+      case 'success':
+        return 'polite';
+      default:
+        return 'assertive';
+    }
+  };
+
+  // Generate comprehensive class names
+  const classNames = [componentName, `${componentName}--${severity}`, `${componentName}--${size}`, finalClassName].filter(Boolean).join(' ');
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    className: classNames,
+    "data-testid": componentName,
+    id: finalId,
+    role: getAriaRole(),
+    "aria-live": getAriaLive(),
+    "aria-atomic": "true",
+    "aria-label": ariaLabel || undefined
+  }, restProps), /*#__PURE__*/_react.default.createElement("span", {
+    className: `${componentName}__icon`,
+    "aria-hidden": "true"
+  }, severity === 'error' && '⚠️', severity === 'warning' && '⚠️', severity === 'info' && 'ℹ️', severity === 'success' && '✅'), /*#__PURE__*/_react.default.createElement("span", {
+    className: `${componentName}__text`
+  }, children), dismissible && /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: `${componentName}__dismiss`,
+    onClick: onDismiss,
+    "aria-label": "Dismiss message"
+  }, "\xD7"));
+});
+Error.propTypes = {
+  // ====================
+  // Core Props
+  // ====================
+
+  /**
+   * Unique identifier for the component
+   */
+  id: _propTypes.string,
+  /**
+   * Additional CSS classes to apply to the component
+   */
+  className: _propTypes.string,
+  // ====================
+  // Content Props
+  // ====================
+
+  /**
+   * The error message content to display
+   * @required for meaningful error messages
+   */
+  children: _propTypes.node.isRequired,
+  // ====================
+  // Appearance Props
+  // ====================
+
+  /**
+   * Error severity level affecting styling and ARIA behavior
+   * @default 'error'
+   */
+  severity: (0, _propTypes.oneOf)(['error', 'warning', 'info', 'success']),
+  /**
+   * Size variant for responsive display
+   * @default 'medium'
+   */
+  size: (0, _propTypes.oneOf)(['small', 'medium', 'large']),
+  // ====================
+  // Behavior Props
+  // ====================
+
+  /**
+   * Whether the error can be dismissed by the user
+   * @default false
+   */
+  dismissible: _propTypes.bool,
+  /**
+   * Whether to use aria-live for real-time announcements
+   * @default true
+   */
+  isLive: _propTypes.bool,
+  // ====================
+  // Event Props
+  // ====================
+
+  /**
+   * Callback function when error is dismissed
+   */
+  onDismiss: _propTypes.func,
+  // ====================
+  // Accessibility Props
+  // ====================
+
+  /**
+   * ARIA label for screen readers (optional, uses children if not provided)
+   */
+  'aria-label': _propTypes.string,
+  /**
+   * ARIA role override (auto-determined from severity if not provided)
+   */
+  role: _propTypes.string,
+  /**
+   * Use `className` instead
+   * Additional CSS class names to apply
+   */
+  additionalClassName: _propTypes.string,
+  /**
+   * Internal prop for CSS class generation
+   * The base component name for CSS classes
+   */
+  componentName: _propTypes.string
+};
+var _default = exports.default = Error;

package/dist/components/Footer.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Footer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _useWindowSize = require("../utils/useWindowSize");
+var _Animation = require("./Animation");
+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); }
+/**
+ * Footer Component
+ *
+ * A responsive footer component that adapts between desktop and mobile layouts.
+ * Features navigation display and optional authentication links.
+ */
+const Footer = exports.Footer = /*#__PURE__*/(0, _react.forwardRef)(({
+  id,
+  className = '',
+  navigation = null,
+  signInLink = null,
+  signUpLink = null,
+  avatarSrc = null,
+  ellipsesList = [],
+  hasAuth = false,
+  'aria-label': ariaLabel = 'Footer',
+  componentName = 'footer',
+  additionalClassName = '',
+  ...restProps
+}, ref) => {
+  const size = (0, _useWindowSize.useWindowSize)();
+  const finalId = id || `footer-${Math.random().toString(36).substr(2, 9)}`;
+  const finalClassName = className || additionalClassName;
+  return /*#__PURE__*/_react.default.createElement("footer", _extends({
+    ref: ref,
+    id: finalId,
+    className: `${componentName} ${finalClassName}`,
+    "data-testid": componentName,
+    role: "contentinfo",
+    "aria-label": ariaLabel
+  }, restProps), /*#__PURE__*/_react.default.createElement(_Animation.AnimatedDiv, {
+    fadingEntrances: "fadeIn",
+    duration: "faster"
+  }, size.width < 768 ?
+  /*#__PURE__*/
+  // mobile
+  _react.default.createElement("div", {
+    className: "navigation",
+    role: "navigation",
+    "aria-label": "Mobile footer navigation"
+  }, !hasAuth ? /*#__PURE__*/_react.default.createElement("ul", {
+    className: "unordered-list",
+    role: "list"
+  }, navigation) : /*#__PURE__*/_react.default.createElement("ul", {
+    className: "unordered-list auth-menu",
+    role: "list",
+    "aria-label": "User navigation"
+  }, /*#__PURE__*/_react.default.createElement("li", {
+    className: "list-item",
+    role: "listitem"
+  }, "Home"), /*#__PURE__*/_react.default.createElement("li", {
+    className: "list-item",
+    role: "listitem"
+  }, "Search"), /*#__PURE__*/_react.default.createElement("li", {
+    className: "list-item",
+    role: "listitem"
+  }, "Add"), /*#__PURE__*/_react.default.createElement("li", {
+    className: "list-item",
+    role: "listitem"
+  }, "Profile"))) :
+  /*#__PURE__*/
+  // desktop
+  _react.default.createElement("div", {
+    className: "navigation",
+    "data-testid": "navigation",
+    role: "navigation",
+    "aria-label": "Desktop footer navigation"
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "unordered-list",
+    role: "list"
+  }, navigation))));
+});
+Footer.displayName = 'Footer';
+Footer.propTypes = {
+  id: _propTypes.string,
+  className: _propTypes.string,
+  navigation: _propTypes.node,
+  signInLink: _propTypes.node,
+  signUpLink: _propTypes.node,
+  avatarSrc: _propTypes.string,
+  ellipsesList: (0, _propTypes.arrayOf)(_propTypes.node),
+  hasAuth: _propTypes.bool,
+  'aria-label': _propTypes.string,
+  componentName: _propTypes.string,
+  additionalClassName: _propTypes.string
+};
+var _default = exports.default = Footer;