@pixelated-tech/components 3.11.9 → 3.13.0

package/dist/components/integrations/gravatar.components.js

@@ -32,32 +32,80 @@ import './gravatar.css';
     avatarSize?: number; // in pixels
     compact?: boolean; // compact variant
 }; */
+/**
+ * GravatarCard — Render a profile card using Gravatar profile data, with optional prop overrides.
+ *
+ * @param {shape} [props.profile] - Gravatar profile object (fetched server-side) including profile fields and accounts.
+ * @param {string} [props.hash] - Gravatar hash for the avatar.
+ * @param {string} [props.requestHash] - Optional request hash used when fetching the profile.
+ * @param {string} [props.profileUrl] - Direct URL to the Gravatar profile.
+ * @param {string} [props.preferredUsername] - Preferred username from the profile.
+ * @param {string} [props.thumbnailUrl] - Avatar image URL.
+ * @param {string} [props.displayName] - Display name to show on the card.
+ * @param {string} [props.pronouns] - Display pronouns (if available).
+ * @param {string} [props.aboutMe] - Short bio or about text.
+ * @param {string} [props.currentLocation] - Location string for the profile.
+ * @param {string} [props.job_title] - Job title from the profile.
+ * @param {string} [props.company] - Company name from the profile.
+ * @param {arrayOf} [props.accounts] - Array of social account objects (domain, url, username, etc.).
+ * @param {arrayOf} [props.emails] - Email objects associated with the profile.
+ * @param {string} [props.customRole] - Optional custom role to use instead of job_title.
+ * @param {shape} [props.socialLinks] - Override object for social links (github, linkedin, twitter, instagram, website).
+ * @param {oneOf} [props.layout] - Layout style: 'horizontal' or 'vertical'.
+ * @param {oneOf} [props.direction] - Photo position for horizontal layout: 'left' or 'right'.
+ * @param {number} [props.avatarSize] - Avatar size in pixels.
+ * @param {boolean} [props.compact] - Render a compact variant of the card.
+ */
 GravatarCard.propTypes = {
     // Gravatar profile data (fetched server-side)
+    /** Gravatar profile object with common fields */
     profile: PropTypes.shape({
+        /** Gravatar hash used to construct avatar URLs */
         hash: PropTypes.string,
+        /** Optional request identifier used when fetching the profile */
         requestHash: PropTypes.string,
+        /** Direct URL to the Gravatar profile */
         profileUrl: PropTypes.string,
+        /** Preferred username from the Gravatar profile */
         preferredUsername: PropTypes.string,
+        /** Avatar thumbnail URL from the profile */
         thumbnailUrl: PropTypes.string,
+        /** Display name from profile */
         displayName: PropTypes.string,
+        /** Pronouns string */
         pronouns: PropTypes.string,
+        /** Short bio / about text */
         aboutMe: PropTypes.string,
+        /** Current location string */
         currentLocation: PropTypes.string,
+        /** Job title from profile */
         job_title: PropTypes.string,
+        /** Company name from profile */
         company: PropTypes.string,
+        /** Social accounts array */
         accounts: PropTypes.arrayOf(PropTypes.shape({
+            /** Account domain (e.g., 'github.com') */
             domain: PropTypes.string,
+            /** Display label for the account */
             display: PropTypes.string,
+            /** URL for the account */
             url: PropTypes.string,
+            /** Icon URL for the account */
             iconUrl: PropTypes.string,
+            /** Account username */
             username: PropTypes.string,
+            /** Whether the account is verified */
             verified: PropTypes.bool,
+            /** Full name associated with the account */
             name: PropTypes.string,
+            /** Shortname used to identify the service (e.g., 'github') */
             shortname: PropTypes.string,
         })),
+        /** Email addresses associated with the profile */
         emails: PropTypes.arrayOf(PropTypes.shape({
+            /** Email primary flag (if applicable) */
             primary: PropTypes.string,
+            /** Email address value */
             value: PropTypes.string,
         })),
     }),
@@ -71,18 +119,29 @@ GravatarCard.propTypes = {
     pronouns: PropTypes.string,
     profileUrl: PropTypes.string,
     // Additional custom fields not in Gravatar
+    /** Optional custom role to display instead of job_title */
     customRole: PropTypes.string, // Alternative to job_title
+    /** Overrides for social links (preferred over profile accounts) */
     socialLinks: PropTypes.shape({
+        /** GitHub profile URL */
         github: PropTypes.string,
+        /** LinkedIn profile URL */
         linkedin: PropTypes.string,
+        /** Twitter profile URL */
         twitter: PropTypes.string,
+        /** Instagram profile URL */
         instagram: PropTypes.string,
+        /** Personal website URL */
         website: PropTypes.string,
     }),
     // Layout options
+    /** Layout style: 'horizontal' or 'vertical' */
     layout: PropTypes.oneOf(['horizontal', 'vertical']),
+    /** Photo position when horizontal: 'left' or 'right' */
     direction: PropTypes.oneOf(['left', 'right']), // photo position (for horizontal layout)
+    /** Avatar size in pixels */
     avatarSize: PropTypes.number, // in pixels
+    /** Compact card variant */
     compact: PropTypes.bool, // compact variant
 };
 export function GravatarCard(props) {

package/dist/components/integrations/hubspot.components.js

@@ -16,11 +16,25 @@ export function initializeHubSpotScript(region, portalId) {
     script.defer = true;
     document.head.appendChild(script);
 }
+/**
+ * HubSpotForm — Embed a HubSpot form by injecting the HubSpot script and creating a form instance.
+ *
+ * @param {string} [props.region] - HubSpot region code (e.g., 'na1').
+ * @param {string} [props.portalId] - HubSpot portal ID (account identifier).
+ * @param {string} [props.formId] - HubSpot form GUID to render.
+ * @param {string} [props.target] - CSS selector target for where the form will be injected (overrides containerId).
+ * @param {string} [props.containerId] - ID of the container element to mount the form into (default: 'hubspot-form-container').
+ */
 HubSpotForm.propTypes = {
+    /** HubSpot region code */
     region: PropTypes.string,
+    /** HubSpot portal/account ID */
     portalId: PropTypes.string,
+    /** HubSpot form GUID */
     formId: PropTypes.string,
+    /** CSS selector or target element for the form */
     target: PropTypes.string,
+    /** DOM ID of the container element for the form */
     containerId: PropTypes.string,
 };
 export function HubSpotForm({ region, portalId, formId, target, containerId = 'hubspot-form-container' }) {
@@ -48,15 +62,31 @@ export function HubSpotForm({ region, portalId, formId, target, containerId = 'h
     }, [finalRegion, finalPortalId, finalFormId, formTarget]);
     return _jsx("div", { className: "hs-form-frame", "data-region": finalRegion, "data-form-id": finalFormId, "data-portal-id": finalPortalId });
 }
+/**
+ * HubspotTrackingCode — Inject the HubSpot tracking script for the given portal ID.
+ *
+ * @param {string} [props.hubID] - HubSpot portal ID used to load the tracking script.
+ */
 HubspotTrackingCode.propTypes = {
+    /** HubSpot portal ID for tracking script injection */
     hubID: PropTypes.string.isRequired,
 };
 export function HubspotTrackingCode(props) {
     return (_jsx(_Fragment, { children: _jsx("script", { type: "text/javascript", id: "hs-script-loader", async: true, defer: true, src: `//js-na2.hs-scripts.com/${props.hubID}.js` }) }));
 }
+/**
+ * getHubspotFormSubmissions — Retrieve submissions for a HubSpot form via the HubSpot Forms API (proxied).
+ *
+ * @param {string} [props.proxyURL] - Proxy base URL used to avoid CORS (must include trailing slash if required by proxy).
+ * @param {string} [props.formGUID] - HubSpot form GUID to fetch submissions for.
+ * @param {string} [props.apiToken] - HubSpot API token used for authorization.
+ */
 getHubspotFormSubmissions.propTypes = {
+    /** Proxy base URL to route the request through */
     proxyURL: PropTypes.string.isRequired,
+    /** HubSpot form GUID */
     formGUID: PropTypes.string.isRequired,
+    /** Bearer API token for HubSpot requests */
     apiToken: PropTypes.string.isRequired,
 };
 export async function getHubspotFormSubmissions(props) {

package/dist/components/integrations/instagram.components.js

@@ -5,13 +5,31 @@ import PropTypes from 'prop-types';
 import { getInstagramTiles } from './instagram.functions';
 import { usePixelatedConfig } from "../config/config.client";
 import { Tiles } from '../general/tiles';
+/**
+ * InstagramTiles — Fetch Instagram media and render as tiles.
+ *
+ * @param {string} [props.accessToken] - Instagram user access token with required permissions.
+ * @param {string} [props.userId] - Instagram user ID to fetch media from.
+ * @param {number} [props.limit] - Maximum number of media items to fetch (default: 12).
+ * @param {number} [props.rowCount] - Number of columns/rows to use in the tiles layout.
+ * @param {boolean} [props.useThumbnails] - Whether to prefer thumbnail images over full-size media.
+ * @param {boolean} [props.includeVideos] - Include video posts in results when true.
+ * @param {boolean} [props.includeCaptions] - Include captions in the returned tile metadata.
+ */
 InstagramTiles.propTypes = {
+    /** Instagram access token */
     accessToken: PropTypes.string,
+    /** Instagram user ID */
     userId: PropTypes.string,
+    /** Max number of media items to fetch */
     limit: PropTypes.number,
+    /** Number of columns/rows used by Tiles layout */
     rowCount: PropTypes.number,
+    /** Prefer thumbnails when available */
     useThumbnails: PropTypes.bool,
+    /** Include video posts */
     includeVideos: PropTypes.bool,
+    /** Include captions in tile metadata */
     includeCaptions: PropTypes.bool,
 };
 export function InstagramTiles(props) {

package/dist/components/integrations/lipsum.js

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+// https://www.outsystems.com/forge/component-documentation/12204/lorem-ipsum-lipsum-com-o11/0
+/**
+ * getLipsum — Fetch placeholder text from lipsum.com and return an array of paragraphs.
+ *
+ * @param {oneOf} [props.LipsumTypeId] - Type of content to request ('Paragraph', 'Word', 'Char').
+ * @param {number} [props.Amount] - Quantity to request (number of paragraphs/words/chars).
+ * @param {boolean} [props.StartWithLoremIpsum] - Whether the text should start with the classic Lorem Ipsum opening.
+ */
+getLipsum.propTypes = {
+    /** Type of lipsum content to request */
+    LipsumTypeId: PropTypes.oneOf(['Paragraph', 'Word', 'Char']).isRequired,
+    /** Number of items to request */
+    Amount: PropTypes.number.isRequired,
+    /** Start with the canonical Lorem Ipsum text */
+    StartWithLoremIpsum: PropTypes.bool,
+};
+export async function getLipsum(props) {
+    const { LipsumTypeId, Amount, StartWithLoremIpsum } = props;
+    const proxyURL = "https://proxy.pixelated.tech/prod/proxy?url=";
+    const baseURL = "https://www.lipsum.com/feed/html";
+    const qs = `?LipsumTypeId=${LipsumTypeId}&amount=${Amount}&StartWithLoremIpsum=${StartWithLoremIpsum}`;
+    const fulURL = `${proxyURL}${baseURL}${qs}`;
+    const res = await fetch(fulURL)
+        .then((response) => {
+        return response.text();
+    })
+        .then((html) => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        const lipsum = doc.getElementById('lipsum');
+        // const lipsums = doc.getElementById('lipsum')?.innerHTML || "";
+        const paragraphs = lipsum?.querySelectorAll('p');
+        const strings = [];
+        paragraphs?.forEach((p) => {
+            strings.push(p.textContent.trim());
+        });
+        return strings;
+    })
+        .catch(error => {
+        console.error('Failed to fetch page: ', error);
+        return [];
+    });
+    return res;
+}

package/dist/components/integrations/loremipsum.js

@@ -4,10 +4,22 @@ import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { usePixelatedConfig } from '../config/config.client';
 const debug = false;
+/**
+ * LoremIpsum — Fetch and render placeholder paragraphs via an external API (with optional proxy fallback).
+ *
+ * @param {number} [props.paragraphs] - Number of paragraphs to fetch.
+ * @param {string} [props.seed] - Optional seed to generate deterministic content.
+ * @param {string} [props.proxyBase] - Optional proxy base URL to use when direct fetch fails due to CORS.
+ * @param {string} [props.className] - CSS class name(s) applied to the wrapper element.
+ */
 LoremIpsum.propTypes = {
+    /** Paragraph count to request */
     paragraphs: PropTypes.number,
+    /** Optional deterministic seed for content */
     seed: PropTypes.string,
+    /** Proxy base URL used as a fallback */
     proxyBase: PropTypes.string,
+    /** Wrapper CSS class name */
     className: PropTypes.string,
 };
 export function LoremIpsum({ paragraphs = 1, seed = '', proxyBase, className = '' }) {

package/dist/components/integrations/socialcard.js

@@ -31,7 +31,13 @@ function removeDeadHrefs(element) {
     return doc.body.innerHTML;
 }
 /* ========== SOCIALCARD ========== */
+/**
+ * SocialCards — Aggregate feeds from configured sources (RSS, APIs) and render as social cards.
+ *
+ * @param {object} [props.sources] - Map of source configurations (url/userID/entryCount/iconSrc/iconSrcAlt) keyed by source name.
+ */
 SocialCards.propTypes = {
+    /** Map of feed source configurations (e.g., { instagram: { userID, entryCount }, blog: { url, entryCount }, ... }) */
     sources: PropTypes.object.isRequired
 };
 export function SocialCards(props) {
@@ -289,9 +295,19 @@ export function SocialCards(props) {
         return (state.mySocialCards);
     }
 }
+/**
+ * SocialCard — Render a single social feed item as a card with icon, title, description, and date.
+ *
+ * @param {string} [props.iconSrc] - URL/path to the source icon image.
+ * @param {string} [props.iconSrcAlt] - Alt text for the source icon.
+ * @param {any} [props.card] - Feed item object containing title, link, description and pubDate.
+ */
 SocialCard.propTypes = {
+    /** Source icon image URL */
     iconSrc: PropTypes.string.isRequired,
+    /** Alt text for the icon */
     iconSrcAlt: PropTypes.string.isRequired,
+    /** Feed item object with title/link/description/pubDate */
     card: PropTypes.any.isRequired
 };
 export function SocialCard(props) {
@@ -299,7 +315,10 @@ export function SocialCard(props) {
     return (_jsx("div", { className: "masonryItem", children: _jsxs("div", { className: "card", children: [_jsx("div", { className: "cardTitle", children: _jsxs("a", { href: props.card.link, target: "_blank", rel: "noopener noreferrer", children: [_jsx(SmartImage, { className: "cardIcon", src: props.iconSrc, title: props.iconSrcAlt, alt: props.iconSrcAlt, cloudinaryEnv: config?.cloudinary?.product_env, cloudinaryDomain: config?.cloudinary?.baseUrl, cloudinaryTransforms: config?.cloudinary?.transforms }), props.card.title] }) }), _jsx("div", { className: "cardBody", dangerouslySetInnerHTML: { __html: removeDeadHrefs(props.card.description) } }), _jsx("div", { className: "cardDate", children: props.card.pubDate })] }) }, props.card.guid));
 }
 /* ========== SPINNER ========== */
-SocialCardsLoading.propTypes = {};
+/** SocialCardsLoading.propTypes — No props (simple loading indicator).
+ * @param {any} [props] - No props are accepted by SocialCardsLoading.
+ */
+SocialCardsLoading.propTypes = { /** no props */};
 export function SocialCardsLoading() {
     return (_jsx("div", { className: "cardsLoading", children: _jsx("div", { children: "Loading..." }) }));
 }

package/dist/components/integrations/wordpress.components.js

@@ -14,11 +14,25 @@ function decodeString(str) {
     textarea.innerHTML = str;
     return textarea.value;
 }
+/**
+ * BlogPostList — Render a list of WordPress posts. If `posts` are provided they are used directly; otherwise the component will fetch posts from the configured WordPress endpoint.
+ *
+ * @param {string} [props.site] - WordPress site identifier (overrides provider config).
+ * @param {string} [props.baseURL] - Base URL for WordPress API if not using site config.
+ * @param {number} [props.count] - Maximum number of posts to fetch/display.
+ * @param {array} [props.posts] - Optional pre-fetched posts to render (bypasses remote fetch).
+ * @param {boolean} [props.showCategories] - Whether to show category icons for each post.
+ */
 BlogPostList.propTypes = {
+    /** WordPress site identifier */
     site: PropTypes.string,
+    /** Optional WordPress base URL */
     baseURL: PropTypes.string,
+    /** Max number of posts to fetch/display */
     count: PropTypes.number,
+    /** Optional array of pre-fetched posts */
     posts: PropTypes.array,
+    /** Show category icons next to posts */
     showCategories: PropTypes.bool,
 };
 export function BlogPostList(props) {
@@ -55,14 +69,34 @@ export function BlogPostList(props) {
     }, [site, baseURL, count, cachedPosts]);
     return (_jsxs(_Fragment, { children: [_jsx(Loading, {}), posts.map((post) => (_jsx(PageGridItem, { children: _jsx(BlogPostSummary, { ID: post.ID, title: post.title, date: post.date, excerpt: post.excerpt, URL: post.URL, categories: post.categories, featured_image: post.featured_image, showCategories: showCategories }) }, post.ID)))] }));
 }
+/**
+ * BlogPostSummary — Render a compact summary card for a single WordPress post.
+ *
+ * @param {oneOfType} [props.ID] - Post ID (string or number).
+ * @param {string} [props.title] - Post title.
+ * @param {string} [props.date] - Post publish date (ISO string).
+ * @param {string} [props.excerpt] - HTML excerpt to display as the summary.
+ * @param {string} [props.URL] - Canonical URL for the post.
+ * @param {object} [props.categories] - Categories object (keys -> category name) used to derive icons.
+ * @param {string} [props.featured_image] - URL of the post's featured image.
+ * @param {boolean} [props.showCategories] - Whether to render category icons beneath the summary.
+ */
 BlogPostSummary.propTypes = {
+    /** Post ID (string or number) */
     ID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Post title */
     title: PropTypes.string,
+    /** Post publish date (ISO string) */
     date: PropTypes.string,
+    /** HTML excerpt */
     excerpt: PropTypes.string,
+    /** Canonical URL for the post */
     URL: PropTypes.string,
+    /** Categories object used for icons */
     categories: PropTypes.object,
+    /** Featured image URL */
     featured_image: PropTypes.string,
+    /** Show categories flag */
     showCategories: PropTypes.bool,
 };
 export function BlogPostSummary(props) {
@@ -72,7 +106,13 @@ export function BlogPostSummary(props) {
     return (_jsx("div", { className: "blog-post-summary", children: _jsxs("article", { className: "h-entry", children: [_jsx("h2", { className: "p-name", children: _jsx("a", { className: "u-url blog-post-url", href: props.URL || '', target: "_blank", rel: "noopener noreferrer", children: props.title ? decodeString(props.title) : '' }) }), _jsxs("div", { className: "dt-published", children: ["Published: ", props.date ? new Date(props.date).toLocaleDateString() : ''] }), props.featured_image ? (_jsxs("div", { className: "article-body row-12col", children: [_jsx("div", { className: "article-featured-image grid-s1-e4", children: _jsx(SmartImage, { className: "u-photo", src: props.featured_image, alt: props.title ? decodeString(props.title) : '', title: props.title ? decodeString(props.title) : '', style: {}, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }), _jsx("div", { className: "article-excerpt grid-s4-e13", children: _jsx("div", { className: "p-summary", dangerouslySetInnerHTML: { __html: myExcerpt } }) })] })) :
                     _jsx("div", { className: "article-excerpt grid-s1-e13", children: _jsx("div", { className: "p-summary", dangerouslySetInnerHTML: { __html: myExcerpt } }) }), props.showCategories !== false && (_jsxs("div", { children: ["Categories:", myCategoryImages.map(([categoryImg, index]) => (_jsx("span", { className: "p-category", children: _jsx(SmartImage, { src: `/images/icons/${categoryImg}.png`, title: String(categoryImg), alt: String(categoryImg), cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }, categoryImg + "-" + index)))] }))] }) }, props.ID));
 }
+/**
+ * BlogPostCategories — Render a compact list of category names or icons for a post.
+ *
+ * @param {arrayOf} [props.categories] - Array of category strings to render.
+ */
 BlogPostCategories.propTypes = {
+    /** Array of category names */
     categories: PropTypes.arrayOf(PropTypes.string),
 };
 export function BlogPostCategories(props) {

package/dist/components/integrations/wordpress.functions.js

@@ -4,9 +4,19 @@ import PropTypes from "prop-types";
 // const wpSite = "blog.pixelated.tech";
 const wpApiURL = "https://public-api.wordpress.com/rest/v1/sites/";
 const wpCategoriesPath = "/categories";
+/**
+ * getWordPressItems — Fetch posts from the WordPress REST API for a given site.
+ *
+ * @param {string} [props.site] - WordPress site identifier (site slug or domain).
+ * @param {number} [props.count] - Optional number of posts to fetch (omit to fetch all available).
+ * @param {string} [props.baseURL] - Optional base URL for the WordPress API (defaults to public WordPress API URL).
+ */
 getWordPressItems.propTypes = {
+    /** WordPress site identifier (slug or domain) */
     site: PropTypes.string.isRequired,
+    /** Number of posts to fetch (optional) */
     count: PropTypes.number,
+    /** Base URL for WordPress API (optional) */
     baseURL: PropTypes.string,
 };
 export async function getWordPressItems(props) {
@@ -43,7 +53,13 @@ export async function getWordPressItems(props) {
     }
     return posts;
 }
+/**
+ * getWordPressItemImages — Extract image objects from a WordPress post for use in sitemaps and galleries.
+ *
+ * @param {object} [props.item] - WordPress post object to extract image URLs from.
+ */
 getWordPressItemImages.propTypes = {
+    /** WordPress post object */
     item: PropTypes.object.isRequired,
 };
 export function getWordPressItemImages(item) {
@@ -87,8 +103,16 @@ export function getWordPressItemImages(item) {
     }
     return images;
 }
+/**
+ * getWordPressCategories — Retrieve categories for a WordPress site.
+ *
+ * @param {string} [props.site] - WordPress site identifier (slug or domain).
+ * @param {string} [props.baseURL] - Optional base URL for the WordPress API.
+ */
 getWordPressCategories.propTypes = {
+    /** WordPress site identifier (slug or domain) */
     site: PropTypes.string.isRequired,
+    /** Base URL for WordPress API (optional) */
     baseURL: PropTypes.string,
 };
 export async function getWordPressCategories(props) {

package/dist/components/integrations/yelp.js

@@ -13,8 +13,16 @@ https://www.google.com/search?q=yelp+reviews+react+component&oq=yelp+reviews+rea
 https://www.reddit.com/r/nextjs/comments/16smhqa/next_js_fetching_data_from_yelp_api/
 https://helloputnam.medium.com/easiest-way-to-include-business-reviews-on-a-web-app-google-facebook-yelp-etc-de3e243bbe75
 */
+/**
+ * YelpReviews — Fetch and display Yelp reviews for a given business ID (note: Yelp API access may require paid plan).
+ *
+ * @param {string} [props.businessID] - Yelp business ID used to fetch reviews (required).
+ * @param {string} [props.key] - Optional API key (not used by the demo placeholder implementation).
+ */
 YelpReviews.propTypes = {
+    /** Yelp business identifier */
     businessID: PropTypes.string.isRequired,
+    /** Optional Yelp API key */
     key: PropTypes.string,
 };
 export function YelpReviews(props) {

package/dist/components/shoppingcart/ebay.components.js

@@ -14,8 +14,16 @@ import "../../css/pixelated.grid.scss";
 import "./ebay.css";
 const debug = false;
 /* ========== EBAY ITEMS PAGE ========== */
+/**
+ * EbayItems — Fetch and display eBay items using the configured API parameters and optional Cloudinary transforms.
+ *
+ * @param {object} [props.apiProps] - eBay API configuration and query parameters.
+ * @param {string} [props.cloudinaryProductEnv] - Optional Cloudinary cloud name used to transform image URLs.
+ */
 EbayItems.propTypes = {
+    /** eBay API configuration and query params */
     apiProps: PropTypes.object.isRequired,
+    /** Optional Cloudinary product environment for image transforms */
     cloudinaryProductEnv: PropTypes.string,
 };
 export function EbayItems(props) {
@@ -24,8 +32,16 @@ export function EbayItems(props) {
     const [items, setItems] = useState([]);
     const [aspects, setAspects] = useState([]);
     const apiProps = { ...(config?.ebay || {}), ...props.apiProps };
+    /**
+     * paintItems — Map raw eBay item data into rendered `EbayListItem` elements.
+     *
+     * @param {array} [props.items] - Array of eBay item objects returned by the API.
+ * @param {string} [props.cloudinaryProductEnv] - Optional Cloudinary cloud name for image URL transformations.
+     */
     paintItems.propTypes = {
+        /** Array of eBay item objects */
         items: PropTypes.array.isRequired,
+        /** Optional Cloudinary product environment */
         cloudinaryProductEnv: PropTypes.string,
     };
     function paintItems(props) {
@@ -39,8 +55,16 @@ export function EbayItems(props) {
         }
         return newItems;
     }
+    /**
+     * fetchItems — Perform a search query against eBay and update component state with results.
+     *
+     * @param {string} [props.aspectName] - Optional aspect name to filter search results.
+ * @param {string} [props.aspectValue] - Optional aspect value corresponding to `aspectName` to filter results.
+     */
     fetchItems.propTypes = {
+        /** Filter aspect name for the search (optional) */
         aspectName: PropTypes.string,
+        /** Filter aspect value for the search (optional) */
         aspectValue: PropTypes.string,
     };
     async function fetchItems(props) {
@@ -80,8 +104,16 @@ export function EbayItems(props) {
         return (_jsx("div", { className: "section-container", children: _jsx("div", { id: "ebayItems", className: "ebayItems", children: _jsx(Loading, {}) }) }));
     }
 }
+/**
+ * EbayListFilter — UI for filtering eBay item lists by aspect values.
+ *
+ * @param {any} [props.aspects] - Aspect distributions returned by eBay used to build filter controls.
+ * @param {function} [props.callback] - Callback invoked when a filter selection changes; receives filter criteria.
+ */
 EbayListFilter.propTypes = {
+    /** Aspect distributions used to render filter controls */
     aspects: PropTypes.any.isRequired,
+    /** Callback to fetch filtered results */
     callback: PropTypes.func.isRequired,
 };
 export function EbayListFilter(props) {
@@ -124,9 +156,19 @@ export function EbayListFilter(props) {
     }
     return (_jsxs("form", { name: "ebayItemsFilter", id: "ebayItemsFilter", children: [_jsxs("span", { className: "filterInput", children: [_jsx("label", { htmlFor: "aspectName", children: "Aspect:" }), _jsxs("select", { id: "aspectName", onChange: onAspectNameChange, children: [_jsx("option", { value: "" }), aspectNames.map((aspectName, index) => _jsx("option", { value: aspectName, children: aspectName }, index))] })] }), _jsxs("span", { className: "filterInput", children: [_jsx("label", { htmlFor: "aspectValue", onChange: onAspectValueChange, children: "Value:" }), _jsx("select", { id: "aspectValue", children: _jsx("option", { value: "" }) })] }), _jsx("span", { className: "filterInput", children: _jsx("button", { type: "button", onClick: handleAspectFilter, children: "Filter" }) })] }));
 }
+/**
+ * EbayListItem — Render a single eBay item with thumbnail, metadata and add-to-cart actions.
+ *
+ * @param {any} [props.item] - eBay item object returned by the API.
+ * @param {string} [props.cloudinaryProductEnv] - Optional Cloudinary cloud name to transform image URLs.
+ * @param {any} [props.apiProps] - eBay API properties (for link generation or calls).
+ */
 EbayListItem.propTypes = {
+    /** eBay item object */
     item: PropTypes.any.isRequired,
+    /** Optional Cloudinary product environment */
     cloudinaryProductEnv: PropTypes.string,
+    /** eBay API properties */
     apiProps: PropTypes.any,
 };
 export function EbayListItem(props) {
@@ -151,9 +193,19 @@ export function EbayListItem(props) {
                             ? _jsxs("a", { href: itemURL, target: itemURLTarget, rel: "noreferrer", children: ["$", thisItem.price.value + " " + thisItem.price.currency] })
                             : "$" + thisItem.price.value + " " + thisItem.price.currency }), _jsx("br", {}), _jsxs("div", { className: "ebayItemAddToCart", children: [_jsx(ViewItemDetails, { href: "/store", itemID: thisItem.legacyItemId }), _jsx(AddToCartButton, { handler: addToShoppingCart, item: shoppingCartItem, itemID: thisItem.legacyItemId })] })] })] }));
 }
+/**
+ * EbayItemHeader — Render a heading for an eBay item; optionally wrap in a link when a `url` is provided.
+ *
+ * @param {string} [props.title] - The item title to display.
+ * @param {string} [props.url] - Optional URL to link the title to (opens in `props.target`).
+ * @param {string} [props.target] - Link target attribute (e.g., '_blank').
+ */
 EbayItemHeader.propTypes = {
+    /** The item title text */
     title: PropTypes.string.isRequired,
+    /** Optional link URL for the title */
     url: PropTypes.string,
+    /** Link target attribute (e.g., '_blank') */
     target: PropTypes.string,
 };
 export function EbayItemHeader(props) {
@@ -162,9 +214,19 @@ export function EbayItemHeader(props) {
             : _jsx("h2", { className: "", children: props.title }) }));
 }
 /* ========== EBAY ITEM DETAIL PAGE ========== */
+/**
+ * EbayItemDetail — Display detailed information for a single eBay item fetched via the API.
+ *
+ * @param {object} [props.apiProps] - eBay API configuration used to fetch the item.
+ * @param {string} [props.itemID] - eBay item identifier to fetch details for.
+ * @param {string} [props.cloudinaryProductEnv] - Optional Cloudinary product environment for image transforms.
+ */
 EbayItemDetail.propTypes = {
+    /** eBay API configuration */
     apiProps: PropTypes.object.isRequired,
+    /** eBay item ID to fetch details for */
     itemID: PropTypes.string.isRequired, // currently not used
+    /** Cloudinary product env for image transforms */
     cloudinaryProductEnv: PropTypes.string,
 };
 export function EbayItemDetail(props) {
@@ -209,8 +271,16 @@ export function EbayItemDetail(props) {
     }
 }
 /* ========== EBAY RATE LIMITS VISUALIZER ========== */
+/**
+ * EbayRateLimitsVisualizer — Visualize eBay API rate limit information for debugging and monitoring.
+ *
+ * @param {string} [props.token] - OAuth access token used to authorize analytics requests.
+ * @param {object} [props.apiProps] - eBay analytics API configuration (baseAnalyticsURL, proxyURL).
+ */
 EbayRateLimitsVisualizer.propTypes = {
+    /** OAuth access token for analytics endpoints */
     token: PropTypes.string,
+    /** eBay analytics API configuration */
     apiProps: PropTypes.object,
 };
 export function EbayRateLimitsVisualizer(props) {