@abstraks-dev/ui-library 1.0.1

package/dist/utils/heroUtils.js

@@ -0,0 +1,316 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateHeroAccessibility = exports.useResponsiveHeight = exports.useMotionPreference = exports.useHighContrast = exports.useBackgroundImage = exports.heroTestingUtils = exports.generateHeroAccessibility = exports.default = void 0;
+var _react = require("react");
+/**
+ * Hero Component Utilities
+ * Provides helper functions and hooks for Hero component functionality
+ */
+
+/**
+ * Hook to detect user's motion preference and apply appropriate settings
+ * @returns {Object} Motion preference settings
+ */
+const useMotionPreference = () => {
+  const [prefersReducedMotion, setPrefersReducedMotion] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (typeof window !== 'undefined') {
+      const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+      setPrefersReducedMotion(mediaQuery.matches);
+      const handleChange = e => {
+        setPrefersReducedMotion(e.matches);
+      };
+      mediaQuery.addEventListener('change', handleChange);
+      return () => mediaQuery.removeEventListener('change', handleChange);
+    }
+  }, []);
+  return {
+    prefersReducedMotion,
+    backgroundAttachment: prefersReducedMotion ? 'scroll' : 'fixed',
+    transitionDuration: prefersReducedMotion ? '0s' : '0.3s'
+  };
+};
+
+/**
+ * Hook to detect high contrast mode preference
+ * @returns {boolean} Whether high contrast mode is enabled
+ */
+exports.useMotionPreference = useMotionPreference;
+const useHighContrast = () => {
+  const [highContrast, setHighContrast] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (typeof window !== 'undefined') {
+      const mediaQuery = window.matchMedia('(prefers-contrast: high)');
+      setHighContrast(mediaQuery.matches);
+      const handleChange = e => {
+        setHighContrast(e.matches);
+      };
+      mediaQuery.addEventListener('change', handleChange);
+      return () => mediaQuery.removeEventListener('change', handleChange);
+    }
+  }, []);
+  return highContrast;
+};
+
+/**
+ * Hook for responsive hero height based on viewport
+ * @param {Object} options - Configuration options
+ * @param {string} options.minHeight - Minimum height (default: '400px')
+ * @param {string} options.maxHeight - Maximum height (default: '100vh')
+ * @returns {Object} Height settings and viewport info
+ */
+exports.useHighContrast = useHighContrast;
+const useResponsiveHeight = ({
+  minHeight = '400px',
+  maxHeight = '100vh'
+} = {}) => {
+  const [viewportHeight, setViewportHeight] = (0, _react.useState)(typeof window !== 'undefined' ? window.innerHeight : 800);
+  const [isMobile, setIsMobile] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const updateHeight = () => {
+      setViewportHeight(window.innerHeight);
+      setIsMobile(window.innerWidth < 768);
+    };
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+    return () => window.removeEventListener('resize', updateHeight);
+  }, []);
+  const calculatedHeight = Math.max(parseInt(minHeight), Math.min(viewportHeight * 0.7, parseInt(maxHeight)));
+  return {
+    height: `${calculatedHeight}px`,
+    viewportHeight,
+    isMobile,
+    isLandscape: viewportHeight < window.innerWidth
+  };
+};
+
+/**
+ * Hook for managing background image loading and optimization
+ * @param {string} imageUrl - URL of the background image
+ * @returns {Object} Image loading state and optimized URL
+ */
+exports.useResponsiveHeight = useResponsiveHeight;
+const useBackgroundImage = imageUrl => {
+  const [isLoaded, setIsLoaded] = (0, _react.useState)(false);
+  const [hasError, setHasError] = (0, _react.useState)(false);
+  const [optimizedUrl, setOptimizedUrl] = (0, _react.useState)(imageUrl);
+  (0, _react.useEffect)(() => {
+    if (!imageUrl) return;
+    setIsLoaded(false);
+    setHasError(false);
+    const img = new Image();
+    img.onload = () => setIsLoaded(true);
+    img.onerror = () => setHasError(true);
+    img.src = imageUrl;
+
+    // Basic URL optimization for common image services
+    if (imageUrl.includes('unsplash.com')) {
+      const size = window.innerWidth > 1200 ? '2070' : window.innerWidth > 768 ? '1536' : '1024';
+      setOptimizedUrl(`${imageUrl}&w=${size}&auto=format&fit=crop&q=80`);
+    } else {
+      setOptimizedUrl(imageUrl);
+    }
+  }, [imageUrl]);
+  return {
+    isLoaded,
+    hasError,
+    optimizedUrl
+  };
+};
+
+/**
+ * Generates accessible hero props based on content and configuration
+ * @param {Object} config - Configuration object
+ * @returns {Object} Accessibility props
+ */
+exports.useBackgroundImage = useBackgroundImage;
+const generateHeroAccessibility = ({
+  hasHeading = true,
+  hasCallToAction = false,
+  isLandingPage = false,
+  customRole = null,
+  customLabel = null
+}) => {
+  const role = customRole || (isLandingPage ? 'banner' : 'region');
+  const ariaLabel = customLabel || (hasCallToAction ? 'Hero section with call-to-action' : 'Hero content section');
+  const props = {
+    role,
+    'aria-label': ariaLabel
+  };
+
+  // Add landmark navigation hints
+  if (hasHeading && !customLabel) {
+    delete props['aria-label']; // Let heading provide the label
+  }
+  return props;
+};
+
+/**
+ * Validates hero content for accessibility compliance
+ * @param {Object} content - Content configuration
+ * @returns {Array} Array of accessibility warnings
+ */
+exports.generateHeroAccessibility = generateHeroAccessibility;
+const validateHeroAccessibility = ({
+  hasBackground = false,
+  backgroundAlt = '',
+  hasHeading = false,
+  headingLevel = null,
+  hasCallToAction = false,
+  textContrast = 'unknown'
+}) => {
+  const warnings = [];
+
+  // Background image validation
+  if (hasBackground && !backgroundAlt) {
+    warnings.push({
+      type: 'error',
+      message: 'Background images must have alt text for accessibility',
+      recommendation: 'Add backgroundAlt prop with descriptive text'
+    });
+  }
+
+  // Heading validation
+  if (!hasHeading) {
+    warnings.push({
+      type: 'warning',
+      message: 'Hero sections should typically include a heading',
+      recommendation: 'Add an h1 or h2 element to provide section context'
+    });
+  }
+  if (hasHeading && headingLevel && headingLevel > 2) {
+    warnings.push({
+      type: 'warning',
+      message: `Hero heading level h${headingLevel} may be too deep`,
+      recommendation: 'Consider using h1 or h2 for hero sections'
+    });
+  }
+
+  // Call-to-action validation
+  if (hasCallToAction) {
+    warnings.push({
+      type: 'info',
+      message: 'Ensure CTA buttons have descriptive aria-label attributes',
+      recommendation: 'Use aria-label to describe the action, not just "Click here"'
+    });
+  }
+
+  // Contrast validation
+  if (hasBackground && textContrast === 'low') {
+    warnings.push({
+      type: 'error',
+      message: 'Text contrast may be insufficient over background image',
+      recommendation: 'Add overlay or adjust text colors to meet WCAG contrast requirements'
+    });
+  }
+  return warnings;
+};
+
+/**
+ * Hero testing utilities for automated and manual testing
+ */
+exports.validateHeroAccessibility = validateHeroAccessibility;
+const heroTestingUtils = exports.heroTestingUtils = {
+  /**
+   * Simulates keyboard navigation through hero content
+   */
+  async simulateKeyboardNavigation() {
+    const focusableElements = document.querySelectorAll('[role="banner"] a, [role="banner"] button, [role="banner"] input, [role="banner"] [tabindex="0"]');
+    const results = [];
+    for (let element of focusableElements) {
+      element.focus();
+      const isVisible = this.isFocusVisible(element);
+      const hasAriaLabel = element.getAttribute('aria-label') || element.getAttribute('aria-labelledby');
+      results.push({
+        element: element.tagName,
+        isFocusVisible: isVisible,
+        hasAriaLabel: !!hasAriaLabel,
+        textContent: element.textContent?.trim().substring(0, 50)
+      });
+
+      // Small delay to simulate real user interaction
+      await new Promise(resolve => setTimeout(resolve, 100));
+    }
+    return results;
+  },
+  /**
+   * Checks if focus indicators are visible
+   */
+  isFocusVisible(element) {
+    const styles = window.getComputedStyle(element, ':focus-visible');
+    return styles.outlineWidth !== '0px' || styles.boxShadow !== 'none';
+  },
+  /**
+   * Validates screen reader announcements
+   */
+  validateScreenReaderContent() {
+    const hero = document.querySelector('[role="banner"], [role="region"]');
+    if (!hero) return {
+      valid: false,
+      message: 'No hero section found'
+    };
+    const hasAriaLabel = hero.getAttribute('aria-label') || hero.getAttribute('aria-labelledby');
+    const hasHeading = hero.querySelector('h1, h2, h3, h4, h5, h6');
+    const backgroundDescription = hero.querySelector('[id*="bg-description"]');
+    return {
+      valid: hasAriaLabel || hasHeading,
+      hasAriaLabel: !!hasAriaLabel,
+      hasHeading: !!hasHeading,
+      hasBackgroundDescription: !!backgroundDescription,
+      recommendations: [...(!(hasAriaLabel || hasHeading) ? ['Add aria-label or heading for screen readers'] : []), ...(!backgroundDescription && hero.style.backgroundImage ? ['Add background image description'] : [])]
+    };
+  },
+  /**
+   * Tests responsive behavior
+   */
+  testResponsiveBehavior() {
+    const viewports = [{
+      width: 320,
+      height: 568,
+      name: 'Mobile Portrait'
+    }, {
+      width: 768,
+      height: 1024,
+      name: 'Tablet'
+    }, {
+      width: 1200,
+      height: 800,
+      name: 'Desktop'
+    }, {
+      width: 1920,
+      height: 1080,
+      name: 'Large Desktop'
+    }];
+    const hero = document.querySelector('.hero-wrapper');
+    if (!hero) return {
+      valid: false,
+      message: 'Hero wrapper not found'
+    };
+    const results = viewports.map(viewport => {
+      // Note: In real testing, you'd actually resize the viewport
+      // This is a simulation for documentation purposes
+      return {
+        viewport: viewport.name,
+        dimensions: `${viewport.width}x${viewport.height}`,
+        minHeight: window.getComputedStyle(hero).minHeight,
+        backgroundAttachment: window.getComputedStyle(hero).backgroundAttachment
+      };
+    });
+    return {
+      valid: true,
+      results
+    };
+  }
+};
+var _default = exports.default = {
+  useMotionPreference,
+  useHighContrast,
+  useResponsiveHeight,
+  useBackgroundImage,
+  generateHeroAccessibility,
+  validateHeroAccessibility,
+  heroTestingUtils
+};

package/dist/utils/index.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ScrollHandler = require("./ScrollHandler");
+Object.keys(_ScrollHandler).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ScrollHandler[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ScrollHandler[key];
+    }
+  });
+});
+var _useWindowSize = require("./useWindowSize");
+Object.keys(_useWindowSize).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useWindowSize[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useWindowSize[key];
+    }
+  });
+});
+var _accessibility = require("./accessibility");
+Object.keys(_accessibility).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _accessibility[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _accessibility[key];
+    }
+  });
+});
+var _validation = require("./validation");
+Object.keys(_validation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _validation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _validation[key];
+    }
+  });
+});
+var _keyboardNavigation = require("./keyboardNavigation");
+Object.keys(_keyboardNavigation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _keyboardNavigation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _keyboardNavigation[key];
+    }
+  });
+});
+var _useHeadingAccessibility = require("./useHeadingAccessibility");
+Object.keys(_useHeadingAccessibility).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useHeadingAccessibility[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useHeadingAccessibility[key];
+    }
+  });
+});
+var _useTypographyAccessibility = require("./useTypographyAccessibility");
+Object.keys(_useTypographyAccessibility).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useTypographyAccessibility[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useTypographyAccessibility[key];
+    }
+  });
+});
+var _useRadioGroup = require("./useRadioGroup");
+Object.keys(_useRadioGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useRadioGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useRadioGroup[key];
+    }
+  });
+});
+var _useSelectAccessibility = require("./useSelectAccessibility");
+Object.keys(_useSelectAccessibility).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useSelectAccessibility[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useSelectAccessibility[key];
+    }
+  });
+});

package/dist/utils/inputValidation.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateEmail = validateEmail;
+exports.validateLength = validateLength;
+exports.validatePhone = validatePhone;
+exports.validateRequired = validateRequired;
+var _isEmail = _interopRequireDefault(require("validator/lib/isEmail"));
+var _libphonenumberJs = require("libphonenumber-js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// inputValidation.js
+// Utility functions for input validation
+
+function validateEmail(value) {
+  return (0, _isEmail.default)(value);
+}
+function validatePhone(value, country = 'US') {
+  return (0, _libphonenumberJs.isValidPhoneNumber)(value, country);
+}
+function validateLength(value, minLength, maxLength) {
+  if (minLength && value.length < minLength) return false;
+  if (maxLength && value.length > maxLength) return false;
+  return true;
+}
+function validateRequired(value) {
+  return value.trim().length > 0;
+}