feat: support Zod schemas and schema generation script

Author: jenny-s51

README.md

@@ -1,13 +1,15 @@
 # @patternfly/patternfly-component-schemas
 
-JSON Schema metadata for PatternFly React components, providing structured validation and documentation for component props.
+JSON Schema and Zod schema metadata for PatternFly React components, providing structured validation and documentation for component props.
 
 ## 📦 Installation
 
 ```bash
 npm install @patternfly/patternfly-component-schemas
 ```
 
+> **Note:** This package includes **Zod v4** for runtime validation support.Learn more at [zod.dev/v4](https://zod.dev/v4).
+
 ## 🏗️ Structure
 
 This package uses a split structure for optimal performance and modularity:
@@ -17,17 +19,23 @@ This package uses a split structure for optimal performance and modularity:
 ├── components/
 │   ├── AboutModal/
 │   │   ├── schema.json     # JSON Schema for AboutModal props
+│   │   ├── schema.zod.ts   # Zod Schema for AboutModal props ✨
 │   │   └── index.js        # Component metadata exports
 │   ├── Button/
 │   │   ├── schema.json
+│   │   ├── schema.zod.ts   ✨
 │   │   └── index.js
 │   ├── Alert/
 │   │   ├── schema.json
+│   │   ├── schema.zod.ts   ✨
 │   │   └── index.js
 │   └── ... (462 total components)
+├── zod/
+│   └── index.ts            # Barrel export of all Zod schemas ✨
 ├── scripts/
-│   └── generate-schemas.js # Generation script
-├── index.js                # Main export file
+│   ├── generate-schemas.js     # JSON Schema generation
+│   └── generate-zod-schemas.js # Zod Schema generation ✨
+├── index.js                # Main JSON Schema exports
 ├── component-metadata.json # Source metadata (dev only)
 └── package.json
 ```
@@ -73,11 +81,37 @@ const buttonSchema = await getComponentSchema('Button');
 // Returns JSON Schema with properties, required props, etc.
 ```
 
+### Zod Schema - Runtime Validation for LLM-Generated Components ✨
+```typescript
+import { ButtonSchema, AlertSchema } from '@patternfly/patternfly-component-schemas/zod';
+
+// Validate LLM-generated component props at runtime
+const llmGeneratedProps = {
+  variant: "primary",
+  size: "lg",
+  children: "Click me"
+};
+
+// Type-safe validation with detailed error messages
+const validatedProps = ButtonSchema.parse(llmGeneratedProps);
+// ✅ Returns type-safe props ready for React component
+
+// Safe parsing with error handling
+const result = AlertSchema.safeParse(userInput);
+if (result.success) {
+  // Use result.data with confidence
+  return <Alert {...result.data} />;
+} else {
+  console.error('Invalid props:', result.error.issues);
+}
+```
+
 ### AI Assistant Examples
 - **"What props does the Button component accept?"** → AI reads Button schema
 - **"Generate a PatternFly Alert component"** → AI uses Alert schema for validation
 - **"Show me all navigation components"** → AI filters components by name/description
 - **"Create a form with proper PatternFly components"** → AI selects appropriate form components
+- **"Validate this generated component"** → AI uses Zod schema for runtime validation ✨
 
 ## 📦 Package Architecture
 
@@ -148,22 +182,69 @@ The package is generated from `component-metadata.json` which contains the raw P
 ## 📊 Package Contents
 
 - **462 PatternFly components** with JSON Schema validation
+- **462 PatternFly components** with Zod Schema validation ✨
+- **3,487 component props** converted to Zod schemas ✨
 - **Individual exports** for tree-shaking optimization
 - **TypeScript-friendly** prop definitions
+- **Runtime type inference** from Zod schemas ✨
 - **Enum validation** for variant props
 - **Required prop** indicators
 - **Default value** documentation
 
 ## 🤖 AI & Tooling Benefits
 
 This package is specifically designed for:
-- **AI/LLM consumption** via Model Context Protocol
+- **AI/LLM consumption** via Model Context Protocol (JSON Schema)
+- **Runtime validation** of LLM-generated components (Zod) ✨
+- **TypeScript type inference** from Zod schemas ✨
 - **IDE autocompletion** and IntelliSense
 - **Component validation** and linting
 - **Documentation generation** 
 - **Form builders** and UI tools
 - **Code generation** assistants
 
+## 🎯 Usage Examples
+
+### JSON Schema (Documentation & Tooling)
+```javascript
+import { Button, Alert } from '@patternfly/patternfly-component-schemas';
+
+// Use for documentation, IDE support, or MCP servers
+console.log(Button.schema); // Full JSON Schema
+console.log(Button.componentName); // "Button"
+console.log(Button.propsCount); // 24
+```
+
+### Zod Schema (Runtime Validation) ✨
+```typescript
+import { ButtonSchema, AlertSchema, type ButtonProps } from '@patternfly/patternfly-component-schemas/zod';
+import type { z } from 'zod';
+
+// Basic validation
+const props = ButtonSchema.parse({ variant: "primary" });
+
+// Type inference
+type InferredButtonProps = z.infer<typeof ButtonSchema>;
+// Or use the exported type directly
+const myProps: ButtonProps = { variant: "primary", size: "lg" };
+
+// Safe parsing with error handling
+const result = AlertSchema.safeParse(dynamicProps);
+if (result.success) {
+  console.log('Valid props:', result.data);
+} else {
+  console.error('Validation errors:', result.error.format());
+}
+
+// Dynamic component validation
+import { getComponentSchema } from '@patternfly/patternfly-component-schemas/zod';
+
+async function validateComponent(name: string, props: unknown) {
+  const schema = await getComponentSchema(name);
+  return schema.parse(props);
+}
+```
+
 ## 📄 License
 
 MIT

components/AboutModal/schema.zod.ts

@@ -0,0 +1,35 @@
+// Auto-generated Zod schema for AboutModal
+import { z } from 'zod'
+
+export const AboutModalSchema = z.object({
+  /** The parent container to append the modal to. Defaults to document.body */
+  appendTo: z.any().optional(),
+  /** Aria label for the about modal.  This should be used when no productName prop is provided */
+  'aria-label': z.string().optional(),
+  /** The URL or file path of the image for the background */
+  backgroundImageSrc: z.string().optional(),
+  /** The alternate text of the brand image */
+  brandImageAlt: z.string(),
+  /** The URL of the image for the brand */
+  brandImageSrc: z.string(),
+  /** Content rendered inside the about modal */
+  children: z.custom<React.ReactNode>(),
+  /** Additional classes added to the about modal */
+  className: z.string().optional(),
+  /** Set aria label to the close button */
+  closeButtonAriaLabel: z.string().optional(),
+  /** Flag to disable focus trap */
+  disableFocusTrap: z.boolean().optional(),
+  /** Prevents the about modal from rendering content inside a container; allows for more flexible layouts */
+  hasNoContentContainer: z.boolean().optional().default(false),
+  /** Flag to show the about modal */
+  isOpen: z.boolean().optional().default(false),
+  /** A callback for when the close button is clicked */
+  onClose: z.any().optional().default('(_e): any => undefined'),
+  /** Product name */
+  productName: z.string().optional(),
+  /** Trademark information */
+  trademark: z.string().optional()
+})
+
+export type AboutModalProps = z.infer<typeof AboutModalSchema>

components/AboutModalBox/schema.zod.ts

@@ -0,0 +1,12 @@
+// Auto-generated Zod schema for AboutModalBox
+// Generated on: 2025-10-10T18:12:17.794Z
+import { z } from 'zod'
+
+export const AboutModalBoxSchema = z.object({
+  /** Content rendered inside the about modal box */
+  children: z.any(),
+  /** Additional classes added to the about modal box */
+  className: z.string().optional()
+})
+
+export type AboutModalBoxProps = z.infer<typeof AboutModalBoxSchema>

components/AboutModalBoxBrand/schema.zod.ts

@@ -0,0 +1,11 @@
+// Auto-generated Zod schema for AboutModalBoxBrand
+import { z } from 'zod'
+
+export const AboutModalBoxBrandSchema = z.object({
+  /** The alternate text of the brand image. */
+  alt: z.string(),
+  /** The URL of the image for the brand. */
+  src: z.string()
+})
+
+export type AboutModalBoxBrandProps = z.infer<typeof AboutModalBoxBrandSchema>

components/AboutModalBoxCloseButton/schema.zod.ts

@@ -0,0 +1,11 @@
+// Auto-generated Zod schema for AboutModalBoxCloseButton
+import { z } from 'zod'
+
+export const AboutModalBoxCloseButtonSchema = z.object({
+  /** Set close button aria label */
+  'aria-label': z.string().optional().default('Close Dialog'),
+  /** A callback for when the close button is clicked */
+  onClose: z.any().optional().default('(_e) => undefined as any')
+})
+
+export type AboutModalBoxCloseButtonProps = z.infer<typeof AboutModalBoxCloseButtonSchema>

components/AboutModalBoxCloseButtonProps/schema.zod.ts

@@ -0,0 +1,11 @@
+// Auto-generated Zod schema for AboutModalBoxCloseButtonProps
+import { z } from 'zod'
+
+export const AboutModalBoxCloseButtonPropsSchema = z.object({
+  /** A callback for when the close button is clicked */
+  onClose: z.any().optional(),
+  /** Set close button aria label */
+  'Unknown': z.string().optional()
+})
+
+export type AboutModalBoxCloseButtonPropsProps = z.infer<typeof AboutModalBoxCloseButtonPropsSchema>

components/AboutModalBoxContent/schema.zod.ts

@@ -0,0 +1,13 @@
+// Auto-generated Zod schema for AboutModalBoxContent
+import { z } from 'zod'
+
+export const AboutModalBoxContentSchema = z.object({
+  /** Content rendered inside the about modal box content */
+  children: z.custom<React.ReactNode>(),
+  /** Prevents the about modal from rendering content inside a container; allows for more flexible layouts */
+  hasNoContentContainer: z.boolean().optional().default(false),
+  /** The trademark info for the product */
+  trademark: z.string()
+})
+
+export type AboutModalBoxContentProps = z.infer<typeof AboutModalBoxContentSchema>

components/AboutModalBoxHeader/schema.zod.ts

@@ -0,0 +1,11 @@
+// Auto-generated Zod schema for AboutModalBoxHeader
+import { z } from 'zod'
+
+export const AboutModalBoxHeaderSchema = z.object({
+  /** Id to use for about modal box header */
+  id: z.string(),
+  /** Name of the product */
+  productName: z.string().optional()
+})
+
+export type AboutModalBoxHeaderProps = z.infer<typeof AboutModalBoxHeaderSchema>

components/AboutModalProps/schema.zod.ts

@@ -0,0 +1,35 @@
+// Auto-generated Zod schema for AboutModalProps
+import { z } from 'zod'
+
+export const AboutModalPropsSchema = z.object({
+  /** The parent container to append the modal to. Defaults to document.body */
+  appendTo: z.any().optional(),
+  /** The URL or file path of the image for the background */
+  backgroundImageSrc: z.string().optional(),
+  /** The alternate text of the brand image */
+  brandImageAlt: z.string(),
+  /** The URL of the image for the brand */
+  brandImageSrc: z.string(),
+  /** Content rendered inside the about modal */
+  children: z.custom<React.ReactNode>(),
+  /** Additional classes added to the about modal */
+  className: z.string().optional(),
+  /** Set aria label to the close button */
+  closeButtonAriaLabel: z.string().optional(),
+  /** Flag to disable focus trap */
+  disableFocusTrap: z.boolean().optional(),
+  /** Prevents the about modal from rendering content inside a container; allows for more flexible layouts */
+  hasNoContentContainer: z.boolean().optional(),
+  /** Flag to show the about modal */
+  isOpen: z.boolean().optional(),
+  /** A callback for when the close button is clicked */
+  onClose: z.any().optional(),
+  /** Product name */
+  productName: z.string().optional(),
+  /** Trademark information */
+  trademark: z.string().optional(),
+  /** Aria label for the about modal.  This should be used when no productName prop is provided */
+  'Unknown': z.string().optional()
+})
+
+export type AboutModalPropsProps = z.infer<typeof AboutModalPropsSchema>

components/Accordion/schema.zod.ts

@@ -0,0 +1,23 @@
+// Auto-generated Zod schema for Accordion
+import { z } from 'zod'
+
+export const AccordionSchema = z.object({
+  /** Adds accessible text to the Accordion */
+  'aria-label': z.string().optional(),
+  /** Flag to indicate whether use definition list or div */
+  asDefinitionList: z.boolean().optional().default(true),
+  /** Content rendered inside the Accordion */
+  children: z.custom<React.ReactNode>().optional().default('null'),
+  /** Additional classes added to the Accordion */
+  className: z.string().optional().default(''),
+  /** Display size variant. */
+  displaySize: z.enum(['default', 'lg']).optional().default('default'),
+  /** Heading level to use */
+  headingLevel: z.enum(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']).optional().default('h3'),
+  /** Flag to indicate the accordion had a border */
+  isBordered: z.boolean().optional().default(false),
+  /** Sets the toggle icon position for all accordion toggles. */
+  togglePosition: z.enum(['start', 'end']).optional().default('end')
+})
+
+export type AccordionProps = z.infer<typeof AccordionSchema>