@pixelated-tech/components 3.2.14 → 3.3.0

package/README.COMPONENTS.md

@@ -11,6 +11,7 @@ This guide provides detailed API documentation and usage examples for all Pixela
 - [Modal](#modal)
 - [SidePanel](#sidepanel)
 - [SmartImage](#smartimage)
+- [Tab](#tab)
 - [Table](#table)
 
 ### CMS Integration
@@ -34,6 +35,7 @@ This guide provides detailed API documentation and usage examples for all Pixela
 - [ComponentPropertiesForm](#componentpropertiesform)
 - [ComponentSelector](#componentselector)
 - [ComponentTree](#componenttree)
+- [ConfigBuilder](#configbuilder)
 - [PageBuilderUI](#pagebuilderui)
 - [PageEngine](#pageengine)
 - [SaveLoadSection](#saveloadsection)
@@ -554,7 +556,7 @@ const reviews = [
 
 ### Forms
 
-Dynamic form builder that generates forms from JSON configuration.
+Dynamic form builder that generates forms from JSON configuration with comprehensive validation and event handling.
 
 #### FormEngine
 
@@ -566,21 +568,39 @@ import { FormEngine } from '@pixelated-tech/components';
 const formConfig = {
   fields: [
     {
-      type: 'text',
+      component: 'FormInput',
       props: {
+        type: 'text',
+        id: 'email',
         name: 'email',
         label: 'Email Address',
         placeholder: 'Enter your email',
-        required: true
+        required: 'required',
+        validate: 'email'
       }
     },
     {
-      type: 'textarea',
+      component: 'FormTextarea',
       props: {
+        id: 'message',
         name: 'message',
         label: 'Message',
         placeholder: 'Enter your message',
-        rows: 4
+        rows: '4',
+        required: 'required'
+      }
+    },
+    {
+      component: 'FormSelect',
+      props: {
+        id: 'category',
+        name: 'category',
+        label: 'Category',
+        options: [
+          { text: 'General', value: 'general' },
+          { text: 'Support', value: 'support' },
+          { text: 'Sales', value: 'sales' }
+        ]
       }
     }
   ]
@@ -595,36 +615,171 @@ const formConfig = {
 
 #### Form Components
 
-Individual form field components for custom form building.
+Individual form field components with unified event handling and validation.
+
+##### FormInput
+Text input field with validation and accessibility features.
 
 ```tsx
-import * as FC from '@pixelated-tech/components';
+import { FormInput } from '@pixelated-tech/components';
+
+<FormInput
+  type="email"
+  id="email"
+  name="email"
+  label="Email Address"
+  placeholder="Enter your email"
+  required="required"
+  validate="email"
+  display="vertical"
+/>
+```
 
-function CustomForm() {
-  return (
-    <form>
-      <FC.TextInput
-        name="username"
-        label="Username"
-        required={true}
-        placeholder="Enter username"
-      />
-      <FC.EmailInput
-        name="email"
-        label="Email"
-        required={true}
-      />
-      <FC.TextArea
-        name="bio"
-        label="Bio"
-        rows={4}
-        placeholder="Tell us about yourself"
-      />
-    </form>
-  );
-}
+**Props:**
+- `type`: Input type (text, email, password, etc.)
+- `id`: Unique identifier
+- `name`: Form field name
+- `label`: Display label
+- `placeholder`: Input placeholder text
+- `required`: Makes field required
+- `validate`: Validation rule name
+- `display`: Layout mode (vertical/horizontal)
+
+##### FormTextarea
+Multi-line text input with validation.
+
+```tsx
+import { FormTextarea } from '@pixelated-tech/components';
+
+<FormTextarea
+  id="description"
+  name="description"
+  label="Description"
+  placeholder="Enter description"
+  rows="4"
+  required="required"
+  display="vertical"
+/>
+```
+
+##### FormSelect
+Dropdown selection with option validation.
+
+```tsx
+import { FormSelect } from '@pixelated-tech/components';
+
+<FormSelect
+  id="category"
+  name="category"
+  label="Category"
+  options={[
+    { text: 'Option 1', value: 'opt1' },
+    { text: 'Option 2', value: 'opt2' }
+  ]}
+  required="required"
+/>
 ```
 
+##### FormRadio
+Radio button group with validation.
+
+```tsx
+import { FormRadio } from '@pixelated-tech/components';
+
+<FormRadio
+  id="choice"
+  name="choice"
+  label="Choose an option"
+  options={[
+    { text: 'Option A', value: 'a' },
+    { text: 'Option B', value: 'b' }
+  ]}
+  required="required"
+/>
+```
+
+##### FormCheckbox
+Checkbox group with validation.
+
+```tsx
+import { FormCheckbox } from '@pixelated-tech/components';
+
+<FormCheckbox
+  id="preferences"
+  name="preferences"
+  label="Preferences"
+  options={[
+    { text: 'Email updates', value: 'email' },
+    { text: 'SMS updates', value: 'sms' }
+  ]}
+/>
+```
+
+##### FormButton
+Action button for form submission.
+
+```tsx
+import { FormButton } from '@pixelated-tech/components';
+
+<FormButton
+  type="submit"
+  id="submit-btn"
+  text="Submit Form"
+  onClick={handleSubmit}
+/>
+```
+
+##### FormTooltip
+Unified tooltip and validation message component with mouseover behavior and conditional styling.
+
+```tsx
+import { FormTooltip } from '@pixelated-tech/components';
+
+// Tooltip mode - displays information with black ⓘ icon
+<FormTooltip
+  mode="tooltip"
+  text={['This field is required', 'Please enter a valid email address']}
+/>
+
+// Validation mode - displays errors with red ❌ icon
+<FormTooltip
+  mode="validate"
+  text={['Email format is invalid', 'Please check your input']}
+/>
+```
+
+**Props:**
+- `mode`: Display mode ('tooltip' for info, 'validate' for errors)
+- `text`: Array of strings to display (always use array format)
+
+**Features:**
+- **Conditional Icons**: ⓘ (black) for tooltips, ❌ (red) for validation errors
+- **Mouseover Behavior**: Shows/hides content on hover for both modes
+- **Unified Styling**: Consistent appearance with mode-based color variations
+- **Array-Based Text**: Always accepts text as string array for consistency
+
+#### Form Validation
+
+Built-in validation rules available via the `validate` prop:
+
+- `email`: Email format validation
+- `url`: URL format validation
+- `phone`: Phone number format
+- `zipcode`: US zip code validation
+- `required`: Required field validation
+- Custom validation functions can be added to `formvalidations.tsx`
+
+#### Recent Improvements
+
+**Version 3.2.14+** includes major refactoring for better performance and maintainability:
+
+- **FormTooltip Unification**: Merged FormTooltip and FormValidate into single component with mode-based rendering
+- **Unified Event Handling**: All form components now use consistent `onChange` and `onInput` handlers for better test compatibility
+- **Performance Optimization**: Replaced inefficient `JSON.parse/stringify` with direct object destructuring
+- **Code Deduplication**: Custom `useFormComponent` hook eliminates repetitive validation logic
+- **Circular Reference Prevention**: Fixed memory leaks in option generation for radio/checkbox components
+- **Enhanced Test Coverage**: 2,244 tests passing across 67 test files with comprehensive form component coverage
+
 ### Menu
 
 Navigation components with multiple interaction patterns.
@@ -691,6 +846,29 @@ const menuItems = [
 <MenuExpando menuItems={menuItems} />
 ```
 
+### Tab
+
+Configurable tab component with multiple orientations and content areas.
+
+```tsx
+import { Tab } from '@pixelated-tech/components';
+
+const tabs = [
+  { id: 'tab1', label: 'Tab 1', content: <div>Content for Tab 1</div> },
+  { id: 'tab2', label: 'Tab 2', content: <div>Content for Tab 2</div> },
+  { id: 'tab3', label: 'Tab 3', content: <div>Content for Tab 3</div> },
+];
+
+<Tab tabs={tabs} orientation="top" defaultActiveTab="tab1" />
+```
+
+#### Props
+
+- `tabs`: Array of tab objects with `id`, `label`, and `content`
+- `orientation`: 'top' | 'bottom' | 'left' | 'right' (default: 'top')
+- `defaultActiveTab`: ID of the initially active tab
+- `onTabChange`: Callback function called when tab changes
+
 ### Tables
 
 Data display component with sorting and image support.
@@ -874,6 +1052,87 @@ import { SaveLoadSection } from '@pixelated-tech/components';
 | `onLoad` | `function` | - | Load handler |
 | `onNew` | `function` | - | New page handler |
 
+### ConfigBuilder
+
+Tabbed interface for managing site metadata and routes configuration.
+
+```tsx
+import { ConfigBuilder } from '@pixelated-tech/components';
+
+<ConfigBuilder
+  initialConfig={{
+    siteInfo: { name: 'My Site', description: 'Site description' },
+    routes: [
+      { path: '/home', component: 'Home', title: 'Home Page' }
+    ]
+  }}
+  onSave={(config) => console.log('Config saved:', config)}
+/>
+```
+
+#### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `initialConfig` | `SiteConfig` | - | Initial site configuration |
+| `onSave` | `function` | - | Configuration save handler |
+
+#### SiteConfig Type
+```tsx
+interface SiteConfig {
+  siteInfo: {
+    name: string;
+    author: string;
+    description: string;
+    url: string;
+    email: string;
+    favicon: string;
+    favicon_sizes: string;
+    favicon_type: string;
+    theme_color: string;
+    background_color: string;
+    default_locale: string;
+    display: string;
+    image?: string;
+    image_height?: string;
+    image_width?: string;
+    telephone?: string;
+    address?: {
+      streetAddress: string;
+      addressLocality: string;
+      addressRegion: string;
+      postalCode: string;
+      addressCountry: string;
+    };
+    priceRange?: string;
+    sameAs?: string[];
+    keywords?: string;
+  };
+  routes: Array<{
+    path: string;
+    component: string;
+    title?: string;
+    description?: string;
+  }>;
+}
+```
+
+#### Features
+- **Tabbed Interface**: Organized into "Site Info" and "Routes" tabs
+- **Comprehensive Site Info Management**: Edit all standard site metadata fields including PWA settings, contact info, and address
+- **Route Management**: Add, edit, and remove page routes with component mapping
+- **Real-time Preview**: JSON preview of current configuration
+- **Save Functionality**: Callback-based configuration persistence with form validation enforcement
+- **Form Validation**: Required field validation for essential site information with visual feedback
+
+#### Validation Behavior
+
+The "Save Config" button enforces form validation before allowing configuration saves:
+
+- **Required Fields**: Site name, author, description, URL, and email are mandatory
+- **Visual Feedback**: Invalid fields show validation errors with ❌ indicators
+- **Save Prevention**: Save action is blocked until all required validations pass
+- **Real-time Validation**: Form validates as you type with immediate feedback
+
 ---
 
 ## SEO & Schema

package/README.md

@@ -270,16 +270,16 @@ Project Link: [https://github.com/brianwhaley/pixelated-components](https://gith
 
 ### Overview
 
-**Current Status**: ✅ 2,210 tests passing across 65 test files
+**Current Status**: ✅ 2,244 tests passing across 67 test files
 
 | Metric | Value |
 |--------|-------|
-| Test Files | 65 |
-| Total Tests | 2,210 |
-| Coverage (Statements) | 77.92% |
-| Coverage (Lines) | 81.09% |
-| Coverage (Functions) | 81.27% |
-| Coverage (Branches) | 67.31% |
+| Test Files | 67 |
+| Total Tests | 2,244 |
+| Coverage (Statements) | 76.59% |
+| Coverage (Lines) | 79.45% |
+| Coverage (Functions) | 78.33% |
+| Coverage (Branches) | 66.79% |
 | Test Framework | Vitest 4.x |
 | Testing Library | @testing-library/react + jsdom |
 
@@ -297,52 +297,60 @@ npm run test:run         # Single run (for CI)
 **Component Coverage Summary**
 
 #### Component Coverage (Sorted by Statement Coverage)
+- **tiles.tsx**: 100% statements
+- **google.reviews.functions.ts**: 100% statements
 - **config.server.tsx**: 100% statements
-- **modal.tsx**: 100% statements
 - **accordion.tsx**: 100% statements
-- **tiles.tsx**: 100% statements
-- **googlesearch.tsx**: 100% statements
-- **formvalidations.tsx**: 100% statements
-- **buzzwordbingo.tsx**: 100% statements
-- **timeline.tsx**: 100% statements
-- **markdown.tsx**: 100% statements
+- **modal.tsx**: 100% statements
+- **tab.tsx**: 100% statements
 - **ComponentPropertiesForm.tsx**: 100% statements
 - **ComponentSelector.tsx**: 100% statements
 - **ComponentTree.tsx**: 100% statements
+- **formvalidations.tsx**: 100% statements
+- **componentMetadata.tsx**: 100% statements
+- **googlesearch.tsx**: 100% statements
 - **schema-localbusiness.tsx**: 100% statements
 - **schema-recipe.tsx**: 100% statements
 - **schema-services.tsx**: 100% statements
 - **schema-website.tsx**: 100% statements
-- **google.reviews.functions.ts**: 100% statements
+- **buzzwordbingo.tsx**: 100% statements
+- **markdown.tsx**: 100% statements
+- **timeline.tsx**: 100% statements
 - **sidepanel.tsx**: 97.5% statements
 - **config.ts**: 96.55% statements
 - **google.reviews.components.tsx**: 95.83% statements
-- **schema-blogposting.tsx**: 95.23% statements
+- **schema-blogposting.tsx**: 95.24% statements
 - **recipe.tsx**: 94.59% 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
+- **css.tsx**: 91.43% statements
+- **functions.ts**: 90.91% statements
 - **menu-expando.tsx**: 90.12% statements
+- **config.client.tsx**: 90% statements
+- **loading.tsx**: 85.71% statements
+- **SaveLoadSection.tsx**: 84.85% statements
+- **table.tsx**: 84.48% statements
+- **ConfigBuilder.tsx**: 83.52% statements
 - **cloudinary.ts**: 83.33% statements
+- **formcomponents.tsx**: 83.33% statements
 - **form.tsx**: 83.2% statements
-- **shoppingcart.functions.ts**: 81.69% statements
+- **shoppingcart.functions.ts**: 81.7% statements
 - **callout.tsx**: 80% statements
 - **microinteractions.tsx**: 80% statements
-- **sitemap.ts**: 76.05% statements
+- **cloudinary.image.tsx**: 78.57% statements
+- **sitemap.ts**: 76.06% statements
 - **manifest.tsx**: 75% statements
-- **carousel.tsx**: 71.69% statements
+- **carousel.tsx**: 71.7% statements
 - **nerdjoke.tsx**: 69.44% statements
 - **menu-accordion.tsx**: 68.13% statements
 - **semantic.tsx**: 63.51% statements
-- **flickr.ts**: 51.42% statements
+- **componentMap.tsx**: 60% statements
+- **propTypeIntrospection.tsx**: 60% statements
+- **wordpress.functions.ts**: 51.43% statements
 - **PageEngine.tsx**: 48% statements
-- **SaveLoadSection.tsx**: 84.84% statements
-- **table.tsx**: 84.48% statements
-- **loading.tsx**: 85.71% statements
-- **socialcard.tsx**: 29.5% statements
-- **PageBuilderUI.tsx**: 26.66% statements
+- **componentGeneration.tsx**: 38.89% statements
+- **socialcard.tsx**: 29.51% statements
+- **PageBuilderUI.tsx**: 26.67% statements
 
 ### Testing Next Steps
 

package/dist/components/general/tab.css

@@ -0,0 +1,105 @@
+/* Tab Component Styles */
+
+.tab-container {
+  display: flex;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  overflow: hidden;
+  height: 100%;
+}
+
+.tab-top {
+  flex-direction: column;
+}
+
+.tab-bottom {
+  flex-direction: column-reverse;
+}
+
+.tab-left {
+  flex-direction: row;
+}
+
+.tab-right {
+  flex-direction: row-reverse;
+}
+
+.tab-headers {
+  display: flex;
+  background-color: #f5f5f5;
+}
+
+.tab-top .tab-headers,
+.tab-bottom .tab-headers {
+  flex-direction: row;
+  width: 100%;
+}
+
+.tab-left .tab-headers,
+.tab-right .tab-headers {
+  flex-direction: column;
+  height: 100%;
+}
+
+.tab-header {
+  padding: 10px 20px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.tab-top .tab-header,
+.tab-bottom .tab-header {
+  border-right: 1px solid #ddd;
+  border-bottom: none;
+}
+
+.tab-left .tab-header,
+.tab-right .tab-header {
+  border-right: none;
+  border-bottom: 1px solid #ddd;
+  height: auto;
+  padding: 20px 10px;
+}
+
+.tab-left .tab-header {
+  transform: rotate(-90deg);
+}
+
+.tab-right .tab-header {
+  transform: rotate(90deg);
+}
+
+.tab-header:last-child {
+  border-right: none;
+}
+
+.tab-top .tab-header:last-child,
+.tab-bottom .tab-header:last-child {
+  border-right: none;
+}
+
+.tab-left .tab-header:last-child,
+.tab-right .tab-header:last-child {
+  border-bottom: none;
+}
+
+.tab-header:hover {
+  background-color: #e0e0e0;
+}
+
+.tab-header.active {
+  background-color: #fff;
+  font-weight: bold;
+}
+
+.tab-content {
+  flex: 1;
+  padding: 20px;
+  background-color: #fff;
+  min-height: 200px;
+  overflow: auto;
+}

package/dist/components/general/tab.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import './tab.css';
+const TabItemPropTypes = {
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired, //
+    content: PropTypes.node.isRequired,
+};
+// type TabItemType = InferProps<typeof TabItemPropTypes>;
+Tab.propTypes = {
+    tabs: PropTypes.arrayOf(PropTypes.shape(TabItemPropTypes).isRequired).isRequired,
+    orientation: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+    defaultActiveTab: PropTypes.string,
+    onTabChange: PropTypes.func,
+};
+export function Tab({ tabs, orientation = 'top', defaultActiveTab, onTabChange }) {
+    const [activeTab, setActiveTab] = useState(defaultActiveTab || tabs[0]?.id || '');
+    const handleTabClick = (tabId) => {
+        setActiveTab(tabId);
+        onTabChange?.(tabId);
+    };
+    const activeContent = tabs.find(tab => tab.id === activeTab)?.content;
+    const tabClass = `tab-container tab-${orientation}`;
+    return (_jsxs("div", { className: tabClass, children: [_jsx("div", { className: "tab-headers", children: tabs.map(tab => (_jsx("button", { className: `tab-header ${activeTab === tab.id ? 'active' : ''}`, onClick: () => handleTabClick(tab.id), children: tab.label }, tab.id))) }), _jsx("div", { className: "tab-content", children: activeContent })] }));
+}

package/dist/components/seo/metadata.components.js

@@ -1,23 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
-// https://gist.github.com/whitingx/3840905
-generateMetaTags.propTypes = {
-    title: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
-    keywords: PropTypes.string.isRequired,
-    site_name: PropTypes.string.isRequired,
-    email: PropTypes.string.isRequired,
-    origin: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-    image: PropTypes.string.isRequired,
-    image_height: PropTypes.string.isRequired,
-    image_width: PropTypes.string.isRequired,
-    favicon: PropTypes.string.isRequired,
-};
-export function generateMetaTags(props) {
-    const { title, description, keywords, site_name, email, origin, url, image, image_height, image_width, favicon } = props;
-    return (_jsxs(_Fragment, { children: [_jsx("title", { children: title }), _jsx("meta", { charSet: "UTF-8" }), _jsx("meta", { httpEquiv: "content-type", content: "text/html; charset=UTF-8" }), _jsx("meta", { httpEquiv: 'Expires', content: '0' }), _jsx("meta", { httpEquiv: 'Pragma', content: 'no-cache' }), _jsx("meta", { httpEquiv: 'Cache-Control', content: 'no-cache' }), _jsx("meta", { name: "application-name", content: site_name }), _jsx("meta", { name: "author", content: site_name + ", " + email }), _jsx("meta", { name: 'copyright', content: site_name }), _jsx("meta", { name: "creator", content: site_name }), _jsx("meta", { name: "description", content: description }), _jsx("meta", { name: "keywords", content: keywords }), _jsx("meta", { name: 'language', content: 'EN' }), _jsx("meta", { name: 'owner', content: site_name }), _jsx("meta", { name: "publisher", content: site_name }), _jsx("meta", { name: 'rating', content: 'General' }), _jsx("meta", { name: 'reply-to', content: email }), _jsx("meta", { name: "robots", content: "index, follow" }), _jsx("meta", { name: 'url', content: url }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0, shrink-to-fit=no" }), _jsx("meta", { property: "og:description", content: description }), _jsx("meta", { property: 'og:email', content: email }), _jsx("meta", { property: "og:image", content: image }), _jsx("meta", { property: "og:image:height", content: image_height }), _jsx("meta", { property: "og:image:width", content: image_width }), _jsx("meta", { property: "og:locale", content: "en_US" }), _jsx("meta", { property: "og:site_name", content: site_name }), _jsx("meta", { property: "og:title", content: title }), _jsx("meta", { property: "og:type", content: "website" }), _jsx("meta", { property: "og:url", content: url }), _jsx("meta", { itemProp: "name", content: site_name }), _jsx("meta", { itemProp: "url", content: url }), _jsx("meta", { itemProp: "description", content: description }), _jsx("meta", { itemProp: "thumbnailUrl", content: image }), _jsx("meta", { property: "twitter:domain", content: new URL(origin).hostname }), _jsx("meta", { property: "twitter:url", content: url }), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsx("meta", { name: "twitter:creator", content: site_name }), _jsx("meta", { name: "twitter:description", content: description }), _jsx("meta", { name: "twitter:image", content: image }), _jsx("meta", { name: "twitter:image:height", content: image_height }), _jsx("meta", { name: "twitter:image:width", content: image_width }), _jsx("meta", { name: "twitter:title", content: title }), _jsx("link", { rel: "author", href: origin }), _jsx("link", { rel: "canonical", href: url }), _jsx("link", { rel: "icon", type: "image/x-icon", href: favicon }), _jsx("link", { rel: "shortcut icon", type: "image/x-icon", href: favicon }), _jsx("link", { rel: "manifest", href: "/manifest.webmanifest" }), _jsx("link", { rel: "preconnect", href: "https://images.ctfassets.net/" }), _jsx("link", { rel: "preconnect", href: "https://res.cloudinary.com/" }), _jsx("link", { rel: "preconnect", href: "https://farm2.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm6.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm8.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm66.static.flickr.com" })] }));
-}
 setClientMetadata.propTypes = {
     title: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired,