@bravostudioai/react 0.1.0 → 0.1.1

package/src/codegen/generator.ts

@@ -0,0 +1,877 @@
+import {
+  ComponentInfo,
+  SliderInfo,
+  InputGroupInfo,
+  FormInfo,
+  SelectInputInfo,
+  ActionButtonInfo,
+} from "./types";
+import {
+  getComponentPropType,
+  getComponentPropName,
+  sanitizePropName,
+} from "./parser";
+
+export interface ComponentMetadata {
+  props: string[];
+  events: string[];
+  jsx: string;
+}
+
+export function generateComponentCode(
+  appId: string,
+  pageId: string,
+  componentName: string,
+  sliders: SliderInfo[],
+  standaloneComponents: ComponentInfo[],
+  inputGroups: InputGroupInfo[],
+  forms: FormInfo[],
+  selectInputs: SelectInputInfo[],
+  actionButtons: ActionButtonInfo[],
+  isProduction: boolean = false
+): string {
+  // Generate prop types
+  const propTypes: string[] = [];
+  const controlPropTypes: string[] = [];
+  const inputGroupPropTypes: string[] = [];
+  const formPropTypes: string[] = [];
+  const selectInputPropTypes: string[] = [];
+  const actionButtonPropTypes: string[] = [];
+
+  // Add standalone component props
+  standaloneComponents.forEach((comp) => {
+    propTypes.push(`  ${comp.propName}?: ${comp.propType};`);
+  });
+
+  // Add input group props
+  inputGroups.forEach((group) => {
+    const propName = sanitizePropName(group.groupName);
+    inputGroupPropTypes.push(`  ${propName}?: string;`);
+    inputGroupPropTypes.push(
+      `  on${propName[0].toUpperCase()}${propName.slice(
+        1
+      )}Change?: (value: string) => void;`
+    );
+  });
+
+  // Generate form data interfaces and props
+  const formDataInterfaces: string[] = [];
+  forms.forEach((form) => {
+    const formPropName = sanitizePropName(form.formName);
+    const formDataTypeName = `${formPropName[0].toUpperCase()}${formPropName.slice(
+      1
+    )}FormData`;
+
+    // Generate interface for form data with human-readable property names
+    const formDataProps: string[] = [];
+    form.inputs.forEach((input) => {
+      const inputPropName = input.propName; // Use qualified prop name
+      const inputType = getComponentPropType(input.type, input.name);
+      formDataProps.push(`  ${inputPropName}: ${inputType};`);
+    });
+
+    formDataInterfaces.push(`export interface ${formDataTypeName} {
+${formDataProps.join("\n")}
+}`);
+
+    // Add the callback prop with proper typing
+    formPropTypes.push(
+      `  on${formPropName[0].toUpperCase()}${formPropName.slice(
+        1
+      )}Submit?: (formData: ${formDataTypeName}) => void;`
+    );
+  });
+
+  // Add standalone select input props (controlled value + onChange + options)
+  selectInputs.forEach((input) => {
+    const propName = input.propName;
+    const capitalizedPropName = propName[0].toUpperCase() + propName.slice(1);
+    selectInputPropTypes.push(`  ${propName}?: string;`);
+    selectInputPropTypes.push(
+      `  ${propName}Options?: Array<string | { value: string; label: string }>;`
+    );
+    selectInputPropTypes.push(
+      `  on${capitalizedPropName}Change?: (value: string) => void;`
+    );
+  });
+
+  // Add action button props (onClick)
+  actionButtons.forEach((button) => {
+    const propName = button.propName;
+    const capitalizedPropName = propName[0].toUpperCase() + propName.slice(1);
+    actionButtonPropTypes.push(`  on${capitalizedPropName}Click?: () => void;`);
+  });
+
+  sliders.forEach((slider) => {
+    if (slider.arrayContainer && slider.arrayContainer.components.length > 0) {
+      const container = slider.arrayContainer;
+      const itemTypeName = `${container.propName[0].toUpperCase()}${container.propName.slice(
+        1
+      )}Item`;
+      propTypes.push(`  ${container.propName}: ${itemTypeName}[];`);
+    }
+
+    // Add control props for each slider/repeating container
+    const sliderPropName = sanitizePropName(slider.name || "container");
+    controlPropTypes.push(`  ${sliderPropName}CurrentIndex?: number;`);
+    controlPropTypes.push(
+      `  on${sliderPropName[0].toUpperCase()}${sliderPropName.slice(
+        1
+      )}IndexChange?: (index: number) => void;`
+    );
+  });
+
+  const allPropTypes = [
+    ...propTypes,
+    ...controlPropTypes,
+    ...inputGroupPropTypes,
+    ...formPropTypes,
+    ...selectInputPropTypes,
+    ...actionButtonPropTypes,
+  ];
+  const hasProps = allPropTypes.length > 0;
+  const propsInterface = hasProps
+    ? `export interface ${componentName}Props {
+${allPropTypes.join("\n")}
+}`
+    : "";
+
+  const itemTypes = sliders
+    .filter((s) => s.arrayContainer && s.arrayContainer.components.length > 0)
+    .map((slider) => {
+      const container = slider.arrayContainer!;
+      const itemTypeName = `${container.propName[0].toUpperCase()}${container.propName.slice(
+        1
+      )}Item`;
+      const itemProps = container.components
+        .map((comp) => {
+          return `  ${comp.propName}: ${comp.propType};`;
+        })
+        .join("\n");
+      return `export interface ${itemTypeName} {
+${itemProps}
+}`;
+    })
+    .join("\n\n");
+
+  const formDataTypes = formDataInterfaces.join("\n\n");
+
+  // Generate data mapping
+  const dataMapping: string[] = [];
+  const controlMapping: string[] = [];
+
+  // Add standalone component mappings
+  standaloneComponents.forEach((comp) => {
+    const propKey = getComponentPropName(comp.type);
+    dataMapping.push(`    // ${comp.name}
+    ...(props.${comp.propName} !== undefined && { "${comp.id}": { ${propKey}: props.${comp.propName} } as any }),`);
+  });
+
+  // Add select input mappings (for controlled values and options)
+  selectInputs.forEach((input) => {
+    dataMapping.push(`    // ${input.name}
+    ...((props.${input.propName} !== undefined || props.${input.propName}Options !== undefined) && { 
+      "${input.id}": { 
+        ...(props.${input.propName} !== undefined && { value: props.${input.propName} }),
+        ...(props.${input.propName}Options !== undefined && { options: props.${input.propName}Options }),
+      } as any 
+    }),`);
+  });
+
+  sliders.forEach((slider) => {
+    if (slider.arrayContainer && slider.arrayContainer.components.length > 0) {
+      const container = slider.arrayContainer;
+      const itemMapping = container.components
+        .map((comp) => {
+          const propKey = getComponentPropName(comp.type);
+          return `        // ${comp.name}
+        "${comp.id}": {
+          ${propKey}: item.${comp.propName},
+        }`;
+        })
+        .join(",\n");
+
+      dataMapping.push(`    // ${container.name}
+    "${container.id}": props.${container.propName}.map((item) => ({
+${itemMapping}
+      })),`);
+    }
+
+    // Generate control mapping for each slider
+    const sliderPropName = sanitizePropName(slider.name || "container");
+    const controlPropName = `${sliderPropName[0].toUpperCase()}${sliderPropName.slice(
+      1
+    )}IndexChange`;
+    const controlEntry: string[] = [];
+    if (slider.id) {
+      controlEntry.push(`      // ${slider.name}`);
+      controlEntry.push(`      "${slider.id}": {`);
+      controlEntry.push(
+        `        currentIndex: props.${sliderPropName}CurrentIndex,`
+      );
+      controlEntry.push(`        onIndexChange: props.on${controlPropName},`);
+      controlEntry.push(`      }`);
+    }
+    if (controlEntry.length > 0) {
+      controlMapping.push(controlEntry.join("\n"));
+    }
+  });
+
+  const repeatingContainerControlsCode =
+    controlMapping.length > 0
+      ? `\n      repeatingContainerControls={{
+${controlMapping.join(",\n")}
+      }}`
+      : "";
+
+  // Generate input group mappings
+  const inputGroupMapping: string[] = [];
+  const inputGroupHandlers: string[] = [];
+
+  // Start action handler if we have input groups, forms, select inputs, or action buttons
+  if (
+    inputGroups.length > 0 ||
+    forms.length > 0 ||
+    selectInputs.length > 0 ||
+    actionButtons.length > 0
+  ) {
+    inputGroupHandlers.push(`  const handleAction = (payload: any) => {`);
+    inputGroupHandlers.push(`    const { action } = payload?.bravo || {};`);
+    inputGroupHandlers.push(``);
+
+    // Add select input handling
+    if (selectInputs.length > 0) {
+      inputGroupHandlers.push(`    // Handle select input changes`);
+      inputGroupHandlers.push(
+        `    if (action?.action === "input-change" || action?.action === "select-change") {`
+      );
+      inputGroupHandlers.push(`      const nodeId = action?.nodeId;`);
+      inputGroupHandlers.push(`      const value = action?.params?.value;`);
+      inputGroupHandlers.push(``);
+
+      selectInputs.forEach((input) => {
+        const propName = input.propName;
+        const capitalizedPropName =
+          propName[0].toUpperCase() + propName.slice(1);
+        const handlerPropName = `on${capitalizedPropName}Change`;
+        inputGroupHandlers.push(`      // ${input.name}`);
+        inputGroupHandlers.push(
+          `      if (nodeId === "${input.id}" && props.${handlerPropName}) {`
+        );
+        inputGroupHandlers.push(`        props.${handlerPropName}(value);`);
+        inputGroupHandlers.push(`        return;`);
+        inputGroupHandlers.push(`      }`);
+      });
+
+      inputGroupHandlers.push(`    }`);
+      inputGroupHandlers.push(``);
+    }
+
+    // Add action button handling
+    if (actionButtons.length > 0) {
+      inputGroupHandlers.push(`    // Handle button clicks`);
+      inputGroupHandlers.push(
+        `    if (action?.action === "remote" || action?.action === "tap" || action?.action === "link") {`
+      );
+      inputGroupHandlers.push(`      const nodeId = action?.nodeId;`);
+      inputGroupHandlers.push(``);
+
+      actionButtons.forEach((button) => {
+        const propName = button.propName;
+        const capitalizedPropName =
+          propName[0].toUpperCase() + propName.slice(1);
+        const handlerPropName = `on${capitalizedPropName}Click`;
+        inputGroupHandlers.push(`      // ${button.name}`);
+        inputGroupHandlers.push(
+          `      if (nodeId === "${button.id}" && props.${handlerPropName}) {`
+        );
+        inputGroupHandlers.push(`        props.${handlerPropName}();`);
+        inputGroupHandlers.push(`        return;`);
+        inputGroupHandlers.push(`      }`);
+      });
+
+      inputGroupHandlers.push(`    }`);
+      inputGroupHandlers.push(``);
+    }
+
+    // Add input group handling
+    if (inputGroups.length > 0) {
+      inputGroupHandlers.push(
+        `    if (action?.action === "input-group-change") {`
+      );
+      inputGroupHandlers.push(
+        `      const { groupName, value } = action.params;`
+      );
+
+      inputGroups.forEach((group) => {
+        const propName = sanitizePropName(group.groupName);
+        const handlerPropName = `on${propName[0].toUpperCase()}${propName.slice(
+          1
+        )}Change`;
+        inputGroupHandlers.push(
+          `      if (groupName === "${group.groupName}" && props.${handlerPropName}) {`
+        );
+        inputGroupHandlers.push(`        props.${handlerPropName}(value);`);
+        inputGroupHandlers.push(`        return;`);
+        inputGroupHandlers.push(`      }`);
+      });
+
+      inputGroupHandlers.push(`    }`);
+      inputGroupHandlers.push(``);
+    }
+
+    // Add form submission handling
+    if (forms.length > 0) {
+      inputGroupHandlers.push(`    if (action?.action === "submit") {`);
+      inputGroupHandlers.push(`      // Get form inputs from Encore state`);
+      inputGroupHandlers.push(
+        `      const formInputs = useEncoreState.getState().formInputs["${pageId}"] || {};`
+      );
+      inputGroupHandlers.push(`      const submitNodeId = action?.nodeId;`);
+      inputGroupHandlers.push(``);
+
+      forms.forEach((form, index) => {
+        const formPropName = sanitizePropName(form.formName);
+        const handlerPropName = `on${formPropName[0].toUpperCase()}${formPropName.slice(
+          1
+        )}Submit`;
+
+        if (index > 0) {
+          inputGroupHandlers.push(``);
+        }
+        inputGroupHandlers.push(
+          `      // Form: ${form.formName} (${form.formId})`
+        );
+        // Check if this form's submit button was clicked (if submitButtonId is available)
+        if (form.submitButtonId) {
+          inputGroupHandlers.push(
+            `      if (submitNodeId === "${form.submitButtonId}" && props.${handlerPropName}) {`
+          );
+        } else if (forms.length === 1) {
+          // If only one form, don't check submit button ID
+          inputGroupHandlers.push(`      if (props.${handlerPropName}) {`);
+        } else {
+          // Multiple forms but no submit button ID - check all
+          inputGroupHandlers.push(`      if (props.${handlerPropName}) {`);
+        }
+        inputGroupHandlers.push(`        // Extract form inputs for this form`);
+        const formDataTypeName = `${formPropName[0].toUpperCase()}${formPropName.slice(
+          1
+        )}FormData`;
+        inputGroupHandlers.push(
+          `        const formData: ${formDataTypeName} = {`
+        );
+        const formDataEntries: string[] = [];
+        form.inputs.forEach((input) => {
+          const inputPropName = input.propName; // Use qualified prop name
+          formDataEntries.push(
+            `          ${inputPropName}: formInputs["${input.id}"]`
+          );
+        });
+        inputGroupHandlers.push(formDataEntries.join(",\n"));
+        inputGroupHandlers.push(`        };`);
+        inputGroupHandlers.push(`        props.${handlerPropName}(formData);`);
+        inputGroupHandlers.push(
+          `        // Note: Default form submission will still proceed after callback`
+        );
+        inputGroupHandlers.push(`      }`);
+      });
+
+      inputGroupHandlers.push(`    }`);
+    }
+
+    inputGroupHandlers.push(`  };`);
+  }
+
+  // Generate input groups code
+  inputGroups.forEach((group) => {
+    const propName = sanitizePropName(group.groupName);
+    inputGroupMapping.push(
+      `    ...(props.${propName} !== undefined && { ${propName}: props.${propName} }),`
+    );
+  });
+
+  const inputGroupsCode =
+    inputGroupMapping.length > 0
+      ? `\n      inputGroups={{
+${inputGroupMapping.join("\n")}
+      }}`
+      : "";
+
+  const onActionCode =
+    inputGroupHandlers.length > 0 ? `\n      onAction={handleAction}` : "";
+
+  const propsParameter = hasProps ? `props: ${componentName}Props` : "";
+  const propsInterfaceSection = propsInterface ? `${propsInterface}\n\n` : "";
+
+  return `/**
+ * ${componentName}
+ * 
+ * Wrapper component for Encore Studio app.
+ * See README.md for detailed documentation.
+ */
+
+import { EncoreApp${
+    forms.length > 0 ? ", useEncoreState" : ""
+  } } from "@bravostudioai/react";
+${isProduction ? `import productionData from "./data.json";` : ""}
+
+${itemTypes ? `${itemTypes}\n\n` : ""}${
+    formDataTypes ? `${formDataTypes}\n\n` : ""
+  }${propsInterfaceSection}export function ${componentName}(${propsParameter}) {
+${inputGroupHandlers.length > 0 ? inputGroupHandlers.join("\n") : ""}
+  return (
+    <EncoreApp
+      appId="${appId}"
+      pageId="${pageId}"
+      ${
+        isProduction
+          ? `appDefinition={productionData.app}
+      pageDefinition={productionData.page}
+      componentCode={productionData.componentCode}`
+          : ""
+      }
+      data={{
+${dataMapping.join("\n")}
+      }}${repeatingContainerControlsCode}${inputGroupsCode}${onActionCode}
+    />
+  );
+}
+
+export default ${componentName};
+`;
+}
+
+export function generateReadme(
+  appId: string,
+  pageId: string,
+  appName: string,
+  pageName: string,
+  componentName: string,
+  sliders: SliderInfo[],
+  standaloneComponents: ComponentInfo[],
+  inputGroups: InputGroupInfo[],
+  forms: FormInfo[],
+  selectInputs: SelectInputInfo[],
+  actionButtons: ActionButtonInfo[]
+): string {
+  const componentDocs: string[] = [];
+  const controlDocs: string[] = [];
+  const selectInputDocs: string[] = [];
+  const actionButtonDocs: string[] = [];
+
+  // Add standalone component documentation
+  standaloneComponents.forEach((comp) => {
+    componentDocs.push(`### \`${comp.propName}\` (${comp.propType}, optional)
+
+${comp.name} (${comp.type}) - Component ID: ${comp.id}`);
+  });
+
+  sliders.forEach((slider) => {
+    if (slider.arrayContainer && slider.arrayContainer.components.length > 0) {
+      const container = slider.arrayContainer;
+
+      // Generate component documentation
+      const compDocs = container.components
+        .map((comp) => {
+          return `- \`${comp.propName}\` (${comp.propType}): ${comp.name} (${comp.type}) - Component ID: ${comp.id}`;
+        })
+        .join("\n");
+
+      componentDocs.push(`### \`${
+        container.propName
+      }\` (${container.propName[0].toUpperCase()}${container.propName.slice(
+        1
+      )}Item[])
+
+Array of items for "${container.name}" container (ID: ${container.id})
+
+**Properties:**
+
+${compDocs}`);
+    }
+
+    // Generate control documentation for each slider/repeating container
+    const sliderPropName = sanitizePropName(slider.name || "container");
+    const controlPropName = `${sliderPropName[0].toUpperCase()}${sliderPropName.slice(
+      1
+    )}IndexChange`;
+    controlDocs.push(`### \`${sliderPropName}CurrentIndex\` (number, optional)
+
+Controls the currently visible slide/index for the "${slider.name}" container (ID: ${slider.id}).
+
+When provided, the slider operates in controlled mode - the parent component controls which slide is displayed. When not provided, the slider manages its own state.
+
+### \`on${controlPropName}\` ((index: number) => void, optional)
+
+Callback fired when the user navigates to a different slide. Called with the new slide index (0-based).
+
+This event fires whenever the slide changes, whether by user interaction, automatic advancement, or programmatic control.`);
+  });
+
+  const dataPropsSection =
+    componentDocs.length > 0
+      ? componentDocs.join("\n\n")
+      : "This component currently has no data-bound props.";
+
+  const controlPropsSection =
+    controlDocs.length > 0
+      ? `## Control Props
+
+These props allow you to imperatively control repeating containers (sliders, lists, etc.) and receive notifications when the current index changes.
+
+${controlDocs.join("\n\n")}`
+      : "";
+
+  // Generate input group documentation
+  const inputGroupDocs: string[] = [];
+  inputGroups.forEach((group) => {
+    const propName = sanitizePropName(group.groupName);
+    const handlerPropName = `on${propName[0].toUpperCase()}${propName.slice(
+      1
+    )}Change`;
+    const elementsList = group.elements
+      .map((el) => `- "${el.name}"`)
+      .join("\n");
+
+    inputGroupDocs.push(`### \`${propName}\` (string, optional)
+
+Sets which element is active in the "${group.groupName}" input group (type: ${group.groupType}).
+
+**Available elements:**
+${elementsList}
+
+### \`${handlerPropName}\` ((value: string) => void, optional)
+
+Callback fired when the user selects a different element in the "${group.groupName}" input group. Called with the name of the selected element.`);
+  });
+
+  const inputGroupPropsSection =
+    inputGroupDocs.length > 0
+      ? `## Input Group Props
+
+These props allow you to control input groups (radio button-like behavior) and receive notifications when the selection changes.
+
+${inputGroupDocs.join("\n\n")}`
+      : "";
+
+  // Generate form documentation
+  const formDocs: string[] = [];
+  forms.forEach((form) => {
+    const formPropName = sanitizePropName(form.formName);
+    const handlerPropName = `on${formPropName[0].toUpperCase()}${formPropName.slice(
+      1
+    )}Submit`;
+    const formDataTypeName = `${formPropName[0].toUpperCase()}${formPropName.slice(
+      1
+    )}FormData`;
+    const inputsList = form.inputs
+      .map((input) => {
+        const inputPropName = input.propName; // Use qualified prop name
+        const inputType = getComponentPropType(input.type, input.name);
+        return `- \`${inputPropName}\` (${inputType}) - ${input.name}`;
+      })
+      .join("\n");
+
+    formDocs.push(`### \`${handlerPropName}\` ((formData: ${formDataTypeName}) => void, optional)
+
+Callback fired when the "${
+      form.formName
+    }" form is submitted. Called with a typed object containing all form input values with human-readable property names.
+
+**Form data shape:**
+\`\`\`typescript
+interface ${formDataTypeName} {
+${form.inputs
+  .map((input) => {
+    const inputPropName = input.propName; // Use qualified prop name
+    const inputType = getComponentPropType(input.type, input.name);
+    return `  ${inputPropName}: ${inputType};`;
+  })
+  .join("\n")}
+}
+\`\`\`
+
+**Form inputs:**
+${inputsList}`);
+  });
+
+  const formPropsSection =
+    formDocs.length > 0
+      ? `## Form Submission Props
+
+These props allow you to handle form submissions and access form input values.
+
+${formDocs.join("\n\n")}`
+      : "";
+
+  // Generate select input documentation
+  selectInputs.forEach((input) => {
+    const propName = input.propName;
+    const capitalizedPropName = propName[0].toUpperCase() + propName.slice(1);
+    const handlerPropName = `on${capitalizedPropName}Change`;
+    const optionsPropName = `${propName}Options`;
+
+    selectInputDocs.push(`### \`${propName}\` (string, optional)
+
+Controls the selected value of the "${input.name}" dropdown (Component ID: ${input.id}).
+
+When provided, the select input operates in controlled mode - the parent component controls the current value.
+
+### \`${optionsPropName}\` (Array<string | { value: string; label: string }>, optional)
+
+Sets the available options for the "${input.name}" dropdown. Can be an array of strings (used as both value and label) or an array of objects with \`value\` and \`label\` properties.
+
+**Example:**
+\`\`\`tsx
+// Simple string array
+${optionsPropName}={["Option 1", "Option 2", "Option 3"]}
+
+// Object array with separate values and labels
+${optionsPropName}={[
+  { value: "opt1", label: "Option 1" },
+  { value: "opt2", label: "Option 2" },
+]}
+\`\`\`
+
+### \`${handlerPropName}\` ((value: string) => void, optional)
+
+Callback fired when the user selects a different option in the "${input.name}" dropdown. Called with the selected value.`);
+  });
+
+  const selectInputPropsSection =
+    selectInputDocs.length > 0
+      ? `## Select Input Props
+
+These props allow you to control select/dropdown inputs and respond to value changes.
+
+${selectInputDocs.join("\n\n")}`
+      : "";
+
+  // Generate action button documentation
+  actionButtons.forEach((button) => {
+    const propName = button.propName;
+    const capitalizedPropName = propName[0].toUpperCase() + propName.slice(1);
+    const handlerPropName = `on${capitalizedPropName}Click`;
+
+    actionButtonDocs.push(`### \`${handlerPropName}\` (() => void, optional)
+
+Callback fired when the "${button.name}" button is clicked (Component ID: ${button.id}).
+
+Action type: \`${button.actionType}\``);
+  });
+
+  const actionButtonPropsSection =
+    actionButtonDocs.length > 0
+      ? `## Action Button Props
+
+These props allow you to respond to button clicks and other user interactions.
+
+${actionButtonDocs.join("\n\n")}`
+      : "";
+
+  const propsSection = `## Props
+
+### Data Props
+
+${dataPropsSection}
+
+${controlPropsSection}
+
+${inputGroupPropsSection}
+
+${formPropsSection}
+
+${selectInputPropsSection}
+
+${actionButtonPropsSection}`;
+
+  const usageExample =
+    sliders.length > 0 && sliders[0].arrayContainer
+      ? `<${componentName}
+  ${sliders
+    .map((s) =>
+      s.arrayContainer
+        ? `${s.arrayContainer.propName}={[
+    {
+      ${s.arrayContainer?.components
+        .map(
+          (c) =>
+            `${c.propName}: "${
+              c.type === "component:image"
+                ? "https://example.com/image.jpg"
+                : "Example value"
+            }"`
+        )
+        .join(",\n      ")}
+    }
+  ]}`
+        : ""
+    )
+    .filter(Boolean)
+    .join("\n  ")}
+/>`
+      : `<${componentName} />`;
+
+  // Generate control example
+  let controlExample = "";
+  if (sliders.length > 0 && sliders[0]) {
+    const firstSlider = sliders[0];
+    const sliderPropName = sanitizePropName(firstSlider.name || "container");
+    const controlPropName = `${sliderPropName[0].toUpperCase()}${sliderPropName.slice(
+      1
+    )}IndexChange`;
+
+    controlExample = `## Controlling Slides
+
+You can imperatively control which slide is displayed and listen for slide changes:
+
+\`\`\`tsx
+import { useState } from "react";
+import { ${componentName} } from "./${componentName}";
+
+function MyComponent() {
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  return (
+    <>
+      <button onClick={() => setCurrentSlide((prev) => Math.max(0, prev - 1))}>
+        Previous
+      </button>
+      <button onClick={() => setCurrentSlide((prev) => prev + 1)}>
+        Next
+      </button>
+      <${componentName}
+        ${sliders
+          .map((s) =>
+            s.arrayContainer
+              ? `${s.arrayContainer.propName}={[/* array of items */]}`
+              : ""
+          )
+          .filter(Boolean)
+          .join("\n        ")}
+        ${sliderPropName}CurrentIndex={currentSlide}
+        on${controlPropName}={(index) => setCurrentSlide(index)}
+      />
+    </>
+  );
+}
+\`\`\``;
+  }
+
+  return `# ${componentName}
+
+Encore App Wrapper Component
+
+This component wraps the Encore Studio app **"${appName}"** (App ID: \`${appId}\`) for the page **"${pageName}"** (Page ID: \`${pageId}\`).
+
+The component automatically maps props to data-bound components within the app. Components marked with \`encore:data\` tags are exposed as props, allowing you to dynamically populate content.
+
+${propsSection}
+
+## Usage
+
+\`\`\`tsx
+import { ${componentName} } from "./${componentName}";
+
+function MyComponent() {
+  return (
+    <${componentName}
+      ${sliders
+        .map((s) =>
+          s.arrayContainer
+            ? `${s.arrayContainer.propName}={[/* array of items */]}`
+            : ""
+        )
+        .filter(Boolean)
+        .join("\n      ")}
+    />
+  );
+}
+\`\`\`
+
+## Example
+
+\`\`\`tsx
+${usageExample}
+\`\`\`
+
+${controlExample}
+`;
+}
+
+export function generateComponentMetadata(
+  _appName: string,
+  pageName: string,
+  sliders: SliderInfo[],
+  standaloneComponents: ComponentInfo[],
+  inputGroups: InputGroupInfo[],
+  forms: FormInfo[],
+  selectInputs: SelectInputInfo[],
+  actionButtons: ActionButtonInfo[]
+): ComponentMetadata {
+  const props: string[] = [];
+  const events: string[] = [];
+  const componentName = sanitizePropName(pageName);
+
+  // Add standalone component props
+  standaloneComponents.forEach((comp) => {
+    props.push(comp.propName);
+  });
+
+  // Add input group props
+  inputGroups.forEach((group) => {
+    const propName = sanitizePropName(group.groupName);
+    props.push(propName);
+    events.push(`on${propName[0].toUpperCase()}${propName.slice(1)}Change`);
+  });
+
+  // Add form props
+  forms.forEach((form) => {
+    const formPropName = sanitizePropName(form.formName);
+    events.push(
+      `on${formPropName[0].toUpperCase()}${formPropName.slice(1)}Submit`
+    );
+  });
+
+  // Add select input props
+  selectInputs.forEach((input) => {
+    const propName = input.propName;
+    const capitalizedPropName = propName[0].toUpperCase() + propName.slice(1);
+    props.push(propName);
+    props.push(`${propName}Options`);
+    events.push(`on${capitalizedPropName}Change`);
+  });
+
+  // Add action button events
+  actionButtons.forEach((button) => {
+    const propName = button.propName;
+    const capitalizedPropName = propName[0].toUpperCase() + propName.slice(1);
+    events.push(`on${capitalizedPropName}Click`);
+  });
+
+  // Add slider props/events
+  sliders.forEach((slider) => {
+    if (slider.arrayContainer && slider.arrayContainer.components.length > 0) {
+      props.push(slider.arrayContainer.propName);
+    }
+    const sliderPropName = sanitizePropName(slider.name || "container");
+    const controlPropName = `${sliderPropName[0].toUpperCase()}${sliderPropName.slice(
+      1
+    )}IndexChange`;
+    props.push(`${sliderPropName}CurrentIndex`);
+    events.push(`on${controlPropName}`);
+  });
+
+  // Generate generic JSX usage
+  const jsxUsage = `<${componentName}
+  ${props.map((p) => `${p}={${p}}`).join("\n  ")}
+  ${events.map((e) => `${e}={${e}}`).join("\n  ")}
+/>`;
+
+  return {
+    props,
+    events,
+    jsx: jsxUsage,
+  };
+}