@pixelated-tech/components 3.2.12 → 3.2.13

package/README.md

@@ -168,106 +168,11 @@ npm run storybook
 **Access locally at:** `http://localhost:6006`
 
 
-
-## 🧪 Testing
-
-### Overview
-
-**Current Status**: ✅ 2,184 tests passing across 59 test files (7 skipped)
-
-| Metric | Value |
-|--------|-------|
-| Test Files | 59 |
-| Total Tests | 2,184 |
-| Skipped Tests | 7 |
-| Coverage (Statements) | 79.26% |
-| Coverage (Lines) | 82.73% |
-| Coverage (Functions) | 84.73% |
-| Coverage (Branches) | 67.19% |
-| Test Framework | Vitest 4.x |
-| Testing Library | @testing-library/react + jsdom |
-
-### Quick Start
-
-```bash
-npm run test              # Watch mode
-npm run test:ui          # Interactive UI dashboard
-npm run test:coverage    # Generate coverage reports
-npm run test:run         # Single run (for CI)
-```
-
-### Component Coverage
-
-**52 of 52 Frontend Components + 2 Utility Modules Fully Tested (100%)**
-
-#### Component Coverage (Sorted by Statement Coverage)
-- **sitemap.ts**: 100% statements 
-- **google.reviews.functions.ts**: 100% statements
-- **googlesearch.tsx**: 100% statements
-- **formvalidations.tsx**: 100% statements
-- **tiles.tsx**: 100% statements
-- **markdown.tsx**: 100% statements
-- **buzzwordbingo.tsx**: 100% statements
-- **timeline.tsx**: 100% statements
-- **config.server.tsx**: 100% statements
-- **modal.tsx**: 100% statements
-- **google.reviews.components.tsx**: 100% statements
-- **recipe.tsx**: 98.8% statements
-- **sidepanel.tsx**: 97.5% statements
-- **resume.tsx**: 94.38% statements
-- **callout.tsx**: 93.75% statements
-- **contentful.delivery.ts**: 92.5% statements
-- **css.tsx**: 91.42% statements
-- **functions.ts**: 90.9% statements
-- **config.client.tsx**: 90% statements
-- **api.ts**: 87.5% statements
-- **loading.tsx**: 85.71% statements
-- **table.tsx**: 84.48% statements
-- **cloudinary.ts**: 83.33% statements
-- **shoppingcart.functions.ts**: 81.69% statements
-- **carousel.tsx**: 76.19% statements
-- **nerdjoke.tsx**: 70.58% statements
-- **menu-accordion.tsx**: 68.13% statements
-- **carousel.tsx**: 58.49% statements
-- **config.ts**: 55.17% statements
-
-### Test Configuration
-
-**Coverage Summary (latest run)**:
-- **Statements**: 79.26%
-- **Lines**: 82.73%
-- **Functions**: 84.73%
-- **Branches**: 67.19%
-
-**Coverage Targets** (configured in `vitest.config.ts`):
-- **Statements**: 70% threshold
-- **Lines**: 70% threshold
-- **Functions**: 70% threshold
-- **Branches**: 60% threshold
-
-**Coverage Thresholds in vitest.config.ts**:
-- Lines: 70% threshold
-- Functions: 70% threshold
-- Branches: 60% threshold
-- Statements: 70% threshold
-
-**Test Environment**: jsdom with @testing-library/react  
-**Test Pattern**: Data-focused validation + behavioral testing
-
-### Tools & Dependencies
-
-| Tool | Purpose |
-|------|---------|
-| Vitest 4.x | Test runner |
-| @testing-library/react | Component testing utilities |
-| jsdom | DOM environment for tests |
-| v8 | Coverage reporting |
-
-
 <!-- ROADMAP -->
 ## Roadmap
 
 ### New Components
+- [ ] **IN PROGRESS** - Testimonial Block (Nextdoor/Yelp/Google): ingest review feeds + render carousel/grid.
 - [ ] **ON HOLD** LinkedIn Recommendations Integration (Not possible with current LinkedIn API)
 - [ ] **ON HOLD** eBay Feedback Integration - requires user OAuth login
 - [ ] **ON HOLD** Yelp Recommendations integration (Cost Prohibitive)
@@ -277,7 +182,6 @@ npm run test:run         # Single run (for CI)
 - [ ] Buffer Integration (or Sendible, Sprout Social, Hootsuite)
 - [ ] Zapier Integration
 - [ ] Hero Banner: headline, subtext, CTA, background image/video, overlay.
-- [ ] **IN PROGRESS** - Testimonial Block (Nextdoor/Yelp/Google): ingest review feeds + render carousel/grid.
 
 ### CI / CD Improvements
 - [ ] Add CI workflow to run tests and lints on pull requests.
@@ -344,7 +248,7 @@ Distributed under the MIT License. See `LICENSE.txt` for more information.
 <!-- CONTACT -->
 ## Contact
 
-Your Name - [@brianwhaley](https://twitter.com/@brianwhaley) - brian.whaley@gmail.com
+Brian Whaley - [@brianwhaley](https://twitter.com/@brianwhaley) - brian.whaley@gmail.com
 
 Project Link: [https://github.com/brianwhaley/pixelated-components](https://github.com/brianwhaley/pixelated-components)
 
@@ -353,6 +257,113 @@ Project Link: [https://github.com/brianwhaley/pixelated-components](https://gith
 
 
 
+## 🧪 Testing
+
+### Overview
+
+**Current Status**: ✅ 2,184 tests passing across 59 test files
+
+| Metric | Value |
+|--------|-------|
+| Test Files | 59 |
+| Total Tests | 2,184 |
+| Coverage (Statements) | 79.27% |
+| Coverage (Lines) | 82.74% |
+| Coverage (Functions) | 84.74% |
+| Coverage (Branches) | 67.19% |
+| Test Framework | Vitest 4.x |
+| Testing Library | @testing-library/react + jsdom |
+
+### Quick Start
+
+```bash
+npm run test              # Watch mode
+npm run test:ui          # Interactive UI dashboard
+npm run test:coverage    # Generate coverage reports
+npm run test:run         # Single run (for CI)
+```
+
+### Component Coverage
+
+**Component Coverage Summary**
+
+#### Component Coverage (Sorted by Statement Coverage)
+- **google.reviews.functions.ts**: 100% statements
+- **googlesearch.tsx**: 100% statements
+- **formvalidations.tsx**: 100% statements
+- **tiles.tsx**: 100% statements
+- **markdown.tsx**: 100% statements
+- **buzzwordbingo.tsx**: 100% statements
+- **timeline.tsx**: 100% statements
+- **config.server.tsx**: 100% statements
+- **modal.tsx**: 100% statements
+- **recipe.tsx**: 98.8% statements
+- **sidepanel.tsx**: 97.5% statements
+- **google.reviews.components.tsx**: 95.83% statements
+- **resume.tsx**: 94.38% statements
+- **contentful.delivery.ts**: 92.5% statements
+- **css.tsx**: 91.42% statements
+- **functions.ts**: 90.9% statements
+- **config.client.tsx**: 90% statements
+- **api.ts**: 87.5% statements
+- **loading.tsx**: 85.71% statements
+- **table.tsx**: 84.48% statements
+- **cloudinary.ts**: 83.33% statements
+- **shoppingcart.functions.ts**: 81.69% statements
+- **callout.tsx**: 80.00% statements
+- **sitemap.ts**: 76.38% statements
+- **carousel.tsx**: 71.70% statements
+- **nerdjoke.tsx**: 70.58% statements
+- **menu-accordion.tsx**: 68.13% statements
+- **semantic.tsx**: 60.81% statements
+- **config.ts**: 55.17% statements
+- **socialcard.tsx**: 29.5% statements
+- **ComponentPropertiesForm.tsx**: 0% statements (no tests)
+- **ComponentSelector.tsx**: 0% statements (no tests)
+- **ComponentTree.tsx**: 0% statements (no tests)
+- **PageBuilderUI.tsx**: 0% statements (no tests)
+- **PageEngine.tsx**: 0% statements (no tests)
+- **SaveLoadSection.tsx**: 0% statements (no tests)
+
+### Testing Next Steps
+
+#### Integration Testing Gaps
+- [ ] **Cross-component interactions** - Test how components work together (e.g., forms with validation, carousels with loading states)
+- [ ] **Form validation edge cases** - Test URL validation, required fields, and complex validation rules under various conditions
+- [ ] **CMS API integrations** - Test API failures, rate limiting, authentication errors, and network timeouts
+- [ ] **Responsive design breakpoints** - Test component behavior across different screen sizes and device types
+- [ ] **Accessibility (a11y) compliance** - Test keyboard navigation, screen reader compatibility, and ARIA attributes
+
+### Test Configuration
+
+
+**Coverage Targets** (configured in `vitest.config.ts`):
+- **Statements**: 70% threshold
+- **Lines**: 70% threshold
+- **Functions**: 70% threshold
+- **Branches**: 60% threshold
+
+**Coverage Thresholds in vitest.config.ts**:
+- Lines: 70% threshold
+- Functions: 70% threshold
+- Branches: 60% threshold
+- Statements: 70% threshold
+
+**Test Environment**: jsdom with @testing-library/react  
+**Test Pattern**: Data-focused validation + behavioral testing
+
+### Tools & Dependencies
+
+| Tool | Purpose |
+|------|---------|
+| Vitest 4.x | Test runner |
+| @testing-library/react | Component testing utilities |
+| jsdom | DOM environment for tests |
+| v8 | Coverage reporting |
+
+
+
+
 
 <!-- MARKDOWN LINKS & IMAGES -->
 <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->

package/dist/components/cms/wordpress.components.js

@@ -45,7 +45,7 @@ export function BlogPostSummary(props) {
     const myCategoryImages = Object.entries(props.categories).map(([category, index]) => [category.trim().toLowerCase().replace(/[ /]+/g, '-'), index]).sort();
     const config = usePixelatedConfig();
     const myExcerpt = decodeString(props.excerpt).replace(/\[…\]/g, '<a href="' + props.URL + '" target="_blank" rel="noopener noreferrer">[…]</a>');
-    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: decodeString(props.title) }) }), _jsxs("div", { className: "dt-published", children: ["Published: ", 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: decodeString(props.title), title: decodeString(props.title), style: { borderRadius: '20px' }, 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 } }) })] })) :
+    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: decodeString(props.title) }) }), _jsxs("div", { className: "dt-published", children: ["Published: ", 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: decodeString(props.title), 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));
 }
 export function BlogPostCategories(props) {

package/dist/components/cms/wordpress.css

@@ -44,6 +44,13 @@
         hyphens: auto;
     }
 
+	.article-featured-image img {
+		/* border-radius: 20px; */
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
 }
 
     .blog-post-summary .p-category img,

package/dist/components/pagebuilder/components/ComponentPropertiesForm.js

@@ -7,7 +7,7 @@ import { FormEngine } from '../form/form';
  * Shows FormEngine when component is selected, placeholder otherwise
  */
 ComponentPropertiesForm.propTypes = {
-    editableComponent: PropTypes.object.isRequired,
+    editableComponent: PropTypes.object,
     onSubmit: PropTypes.func.isRequired,
 };
 export function ComponentPropertiesForm({ editableComponent, onSubmit }) {

package/dist/types/components/pagebuilder/components/ComponentPropertiesForm.d.ts

@@ -3,7 +3,7 @@ type ComponentPropertiesFormProps = InferProps<typeof ComponentPropertiesForm.pr
 export declare function ComponentPropertiesForm({ editableComponent, onSubmit }: ComponentPropertiesFormProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ComponentPropertiesForm {
     var propTypes: {
-        editableComponent: PropTypes.Validator<object>;
+        editableComponent: PropTypes.Requireable<object>;
         onSubmit: PropTypes.Validator<(...args: any[]) => any>;
     };
 }

package/dist/types/tests/component-properties-form.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=component-properties-form.test.d.ts.map

package/dist/types/tests/component-properties-form.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-properties-form.test.d.ts","sourceRoot":"","sources":["../../../src/tests/component-properties-form.test.tsx"],"names":[],"mappings":""}

package/dist/types/tests/component-selector.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=component-selector.test.d.ts.map

package/dist/types/tests/component-selector.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-selector.test.d.ts","sourceRoot":"","sources":["../../../src/tests/component-selector.test.tsx"],"names":[],"mappings":""}

package/dist/types/tests/component-tree.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=component-tree.test.d.ts.map

package/dist/types/tests/component-tree.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-tree.test.d.ts","sourceRoot":"","sources":["../../../src/tests/component-tree.test.tsx"],"names":[],"mappings":""}

package/dist/types/tests/page-builder-ui.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=page-builder-ui.test.d.ts.map

package/dist/types/tests/page-builder-ui.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-builder-ui.test.d.ts","sourceRoot":"","sources":["../../../src/tests/page-builder-ui.test.tsx"],"names":[],"mappings":""}

package/dist/types/tests/page-engine.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=page-engine.test.d.ts.map

package/dist/types/tests/page-engine.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-engine.test.d.ts","sourceRoot":"","sources":["../../../src/tests/page-engine.test.tsx"],"names":[],"mappings":""}

package/dist/types/tests/save-load-section.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=save-load-section.test.d.ts.map

package/dist/types/tests/save-load-section.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"save-load-section.test.d.ts","sourceRoot":"","sources":["../../../src/tests/save-load-section.test.tsx"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pixelated-tech/components",
-	"version": "3.2.12",
+	"version": "3.2.13",
 	"private": false,
 	"author": {
 		"name": "Pixelated Technologies",
@@ -91,7 +91,7 @@
 		"@eslint/markdown": "^7.5.1",
 		"@storybook/addon-webpack5-compiler-babel": "^4.0.0",
 		"@storybook/preset-scss": "^1.0.3",
-		"@storybook/react-webpack5": "^10.1.9",
+		"@storybook/react-webpack5": "^10.1.10",
 		"@testing-library/dom": "^10.4.1",
 		"@testing-library/react": "^16.3.1",
 		"@testing-library/user-event": "^14.6.1",
@@ -117,7 +117,7 @@
 		"eslint-plugin-n": "^17.23.1",
 		"eslint-plugin-promise": "^7.2.1",
 		"eslint-plugin-react": "^7.37.4",
-		"eslint-plugin-storybook": "^10.1.9",
+		"eslint-plugin-storybook": "^10.1.10",
 		"file-loader": "^6.2.0",
 		"happy-dom": "^20.0.11",
 		"jsdom": "^27.3.0",
@@ -131,7 +131,7 @@
 		"react-test-renderer": "^19.2.3",
 		"sass": "^1.97.0",
 		"sass-loader": "^16.0.6",
-		"storybook": "^10.1.9",
+		"storybook": "^10.1.10",
 		"style-loader": "^4.0.0",
 		"ts-loader": "^9.5.4",
 		"typescript": "^5.9.3",