@codeyam/codeyam-cli 0.1.0-bleeding-edge.8afd3ee

package/analyzer-template/packages/ui-components/src/scenario-editor/components/ScenarioEditor.tsx

@@ -0,0 +1,401 @@
+import { FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
+import { ScenarioEditorProps, ScenarioFormData, DataItem } from '../types';
+import { findAttr } from '../utils';
+import { Scenario, ScenariosDataStructure } from '~codeyam/types';
+import ScenarioNameForm from './ScenarioNameForm';
+import DataItemEditor from './DataItemEditor';
+import SectionExpand from './SectionExpand';
+
+/**
+ * ScenarioEditor - Main component for editing and creating scenarios
+ *
+ * This component handles:
+ * - Editing scenario name and description
+ * - Editing nested data structures (arguments and mock data)
+ * - AI-powered data generation
+ * - Manual and AI-assisted scenario creation
+ *
+ * Usage:
+ * - Provide `onSave` callback to handle saving scenarios
+ * - Provide `onGenerateData` callback for AI data generation (optional)
+ * - Provide `iframeRef` to sync data with interactive preview (optional)
+ */
+const ScenarioEditor = ({
+  currentScenario,
+  defaultScenario,
+  dataStructure,
+  analysis,
+  shouldCreateNewScenario,
+  onSave,
+  onNavigate,
+  iframeRef,
+  onGenerateData,
+  saveFeedback,
+}: ScenarioEditorProps) => {
+  // Deep merge utility
+  const deepMerge = useCallback((target: unknown, source: unknown): unknown => {
+    const output = Object.assign({}, target);
+    const isObject = (item: unknown): item is Record<string, unknown> => {
+      return item && typeof item === 'object' && !Array.isArray(item);
+    };
+
+    if (isObject(target) && isObject(source)) {
+      Object.keys(source).forEach((key) => {
+        if (isObject(source[key])) {
+          if (!(key in target)) Object.assign(output, { [key]: source[key] });
+          else (output as any)[key] = deepMerge(target[key], source[key]);
+        } else {
+          Object.assign(output, { [key]: source[key] });
+        }
+      });
+    }
+    return output;
+  }, []);
+
+  const [scenarioFormData, setScenarioFormData] = useState<ScenarioFormData>({
+    name: currentScenario.name,
+    description: currentScenario.description,
+    data: deepMerge(
+      defaultScenario.metadata.data,
+      currentScenario.metadata.data,
+    ) as any,
+  });
+
+  const [selectedDataItem, setSelectedDataItem] = useState<DataItem | null>(
+    null,
+  );
+
+  const scenarioFormDataData = useMemo(() => {
+    return { ...scenarioFormData.data };
+  }, [scenarioFormData]);
+
+  const allData: { [key: string]: unknown } = useMemo(() => {
+    return {
+      ...(scenarioFormDataData.mockData
+        ? { 'Retrieved Data': scenarioFormDataData.mockData }
+        : {}),
+      ...(scenarioFormDataData.argumentsData
+        ? { 'Function Arguments': scenarioFormDataData.argumentsData }
+        : {}),
+    };
+  }, [scenarioFormDataData]);
+
+  const completeDataStructure: ScenariosDataStructure = useMemo(() => {
+    const argumentsAndDataForMocks = {
+      ...(dataStructure.arguments
+        ? { 'Function Arguments': dataStructure.arguments }
+        : {}),
+      ...(dataStructure.dataForMocks
+        ? { 'Retrieved Data': dataStructure.dataForMocks }
+        : {}),
+    };
+
+    return Object.keys(argumentsAndDataForMocks).reduce(
+      (acc: any, variable) => {
+        if (variable.includes('.')) {
+          const [parent, child] = variable.split('.');
+          if (!acc[parent]) {
+            acc[parent] = {};
+          }
+          acc[parent][child] = (argumentsAndDataForMocks as any)[variable];
+        } else {
+          acc[variable] = (argumentsAndDataForMocks as any)[variable];
+        }
+        return acc;
+      },
+      {} as ScenariosDataStructure,
+    );
+  }, [dataStructure]);
+
+  const onSubmit = useCallback(
+    async (e: FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+
+      // Check if recapture was requested
+      const recaptureInput = (e.target as HTMLFormElement).querySelector(
+        'input[name="recapture"]',
+      ) as HTMLInputElement | null;
+      const shouldRecapture = recaptureInput?.value === 'true';
+
+      // Prepare the data to save - this should match what we send to the iframe
+      const dataToSave = {
+        mockData: scenarioFormData.data.mockData ?? {},
+        argumentsData: scenarioFormData.data.argumentsData ?? [],
+      };
+
+      console.log('[ScenarioEditor] Saving scenario data:', {
+        scenarioName: scenarioFormData.name,
+        shouldRecapture,
+        dataToSave,
+        rawFormData: scenarioFormData.data,
+        iframePayload: {
+          arguments: scenarioFormDataData.argumentsData ?? [],
+          ...(scenarioFormDataData.mockData ?? {}),
+        },
+      });
+
+      // Extra debug: Log the full data being saved
+      console.log(
+        '[ScenarioEditor] Full dataToSave JSON:',
+        JSON.stringify(dataToSave, null, 2).substring(0, 1000),
+      );
+
+      const updatedScenarios = analysis?.scenarios.map((scenario) => {
+        return !shouldCreateNewScenario &&
+          scenario.name === currentScenario.name
+          ? ({
+              ...scenario,
+              name: scenarioFormData.name,
+              description: scenarioFormData.description,
+              metadata: {
+                ...scenario.metadata,
+                data: dataToSave,
+              },
+            } as Scenario)
+          : scenario;
+      });
+
+      if (shouldCreateNewScenario) {
+        updatedScenarios.push({
+          name: scenarioFormData.name,
+          description: scenarioFormData.description,
+          metadata: {
+            data: dataToSave,
+            interactiveExamplePath:
+              analysis?.scenarios[0].metadata.interactiveExamplePath,
+          },
+        } as Scenario);
+      }
+
+      console.log(
+        '[ScenarioEditor] Updated scenarios to save:',
+        updatedScenarios,
+      );
+
+      if (onSave) {
+        await onSave(updatedScenarios, { recapture: shouldRecapture });
+      }
+
+      if (onNavigate) {
+        onNavigate(scenarioFormData.name);
+      }
+    },
+    [
+      analysis,
+      currentScenario.name,
+      scenarioFormData,
+      scenarioFormDataData,
+      shouldCreateNewScenario,
+      onSave,
+      onNavigate,
+    ],
+  );
+
+  const handleScenarioChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      setScenarioFormData((prevData) => ({
+        ...prevData,
+        [e.target.name]: e.target.value,
+      }));
+    },
+    [],
+  );
+
+  const handleScenarioDataUpdate = useCallback((scenario: Scenario) => {
+    setSelectedDataItem((prev) => {
+      if (!prev) return null;
+
+      for (const dataSection of [
+        { arguments: scenario.metadata.data.argumentsData },
+        scenario.metadata.data.mockData,
+      ]) {
+        let data = dataSection;
+        for (const attr of prev.path) {
+          data = findAttr(data, attr);
+          if (!data) {
+            break;
+          }
+        }
+
+        if (data) {
+          prev.data = data;
+        }
+      }
+
+      return { ...prev };
+    });
+    setScenarioFormData({
+      name: scenario.name,
+      description: scenario.description,
+      data: scenario.metadata.data,
+    } as ScenarioFormData);
+  }, []);
+
+  const handleInputChange = useCallback(
+    (path: string[], value: string | number | boolean) => {
+      setScenarioFormData((prevData) => {
+        for (const dataSection of [
+          { 'Function Arguments': prevData.data.argumentsData },
+          { 'Retrieved Data': prevData.data.mockData },
+        ]) {
+          let data = dataSection;
+          for (const attr of path.slice(0, -1)) {
+            data = findAttr(data, attr);
+            if (!data) {
+              break;
+            }
+          }
+
+          if (data) {
+            const previousValue = (data as any)[path[path.length - 1]];
+            setSelectedDataItem((prev) => {
+              if (!prev) return null;
+              if (prev.namedPath[prev.namedPath.length - 1] === previousValue) {
+                prev.namedPath[prev.namedPath.length - 1] = value.toString();
+              }
+              (prev.data as any)[path[path.length - 1]] = value;
+
+              return { ...prev };
+            });
+            (data as any)[path[path.length - 1]] = value;
+          }
+        }
+
+        return { ...prevData };
+      });
+    },
+    [],
+  );
+
+  const handleDataItemSelect = useCallback(
+    (path: string[]) => {
+      if (path.length === 0) {
+        setSelectedDataItem(null);
+        return;
+      }
+
+      let data: any = allData;
+      const namedPath: string[] = [];
+      let structure: any = completeDataStructure;
+      for (const attr of path) {
+        namedPath.push(
+          isNaN(parseInt(attr))
+            ? attr
+            : (data[attr]?.name ?? data[attr]?.title ?? data[attr]?.id ?? attr),
+        );
+        data = findAttr(data, attr);
+        if (!data) {
+          console.log('Data not found', data, attr);
+          setSelectedDataItem(null);
+          return;
+        }
+
+        if (Array.isArray(structure)) {
+          structure = structure[0];
+        } else {
+          structure = structure[attr];
+        }
+      }
+
+      setSelectedDataItem({
+        path,
+        namedPath,
+        data,
+        structure,
+      });
+    },
+    [allData, completeDataStructure],
+  );
+
+  // Listen for messages from iframe
+  useEffect(() => {
+    const messageListener = (event: MessageEvent) => {
+      // Only log errors or important updates
+      if (
+        event.data.type === 'codeyam-log' &&
+        event.data.data?.includes('Error')
+      ) {
+        console.error('[ScenarioEditor] Error from iframe:', event.data.data);
+      }
+    };
+    window.addEventListener('message', messageListener);
+    return () => window.removeEventListener('message', messageListener);
+  }, []);
+
+  // Sync data with iframe if provided
+  useEffect(() => {
+    if (iframeRef?.current?.contentWindow) {
+      const dataPayload = {
+        arguments: scenarioFormDataData.argumentsData ?? [],
+        ...(scenarioFormDataData.mockData ?? {}),
+      };
+      const message = {
+        type: 'codeyam-override-data',
+        name: currentScenario.name,
+        data: JSON.stringify(dataPayload),
+      };
+
+      console.log('[ScenarioEditor] → SENDING codeyam-override-data:', {
+        type: message.type,
+        name: message.name,
+        dataPreview: JSON.stringify(dataPayload).substring(0, 200) + '...',
+        fullData: dataPayload,
+      });
+
+      iframeRef.current.contentWindow.postMessage(message, '*');
+    }
+  }, [scenarioFormDataData, currentScenario, iframeRef]);
+
+  return (
+    <form method="post" onSubmit={(e) => void onSubmit(e)}>
+      {selectedDataItem ? (
+        <DataItemEditor
+          analysis={analysis}
+          scenarioName={scenarioFormData.name}
+          dataItem={selectedDataItem}
+          onClick={handleDataItemSelect}
+          onChange={handleInputChange}
+          onAIResult={handleScenarioDataUpdate}
+          onGenerateData={onGenerateData}
+          saveFeedback={saveFeedback}
+        />
+      ) : (
+        <>
+          <SectionExpand title="Edit Name and Description" borderT>
+            <ScenarioNameForm
+              scenarioFormData={scenarioFormData}
+              handleInputChange={handleScenarioChange}
+            />
+          </SectionExpand>
+
+          {currentScenario.metadata.data && (
+            <SectionExpand
+              title="Edit Scenario Data"
+              defaultOpen
+              borderT
+              borderB
+            >
+              <DataItemEditor
+                analysis={analysis}
+                scenarioName={scenarioFormData.name}
+                dataItem={{
+                  path: [],
+                  namedPath: [],
+                  data: allData,
+                  structure: completeDataStructure,
+                }}
+                onClick={handleDataItemSelect}
+                onChange={handleInputChange}
+                onAIResult={handleScenarioDataUpdate}
+                onGenerateData={onGenerateData}
+                saveFeedback={saveFeedback}
+              />
+            </SectionExpand>
+          )}
+        </>
+      )}
+    </form>
+  );
+};
+
+export default ScenarioEditor;

package/analyzer-template/packages/ui-components/src/scenario-editor/components/ScenarioNameForm.tsx

@@ -0,0 +1,52 @@
+import { ScenarioNameFormProps } from '../types';
+
+/**
+ * ScenarioNameForm component for editing scenario name and description
+ */
+export default function ScenarioNameForm({
+  scenarioFormData,
+  handleInputChange,
+}: ScenarioNameFormProps) {
+  return (
+    <div className="p-3 flex flex-col gap-3">
+      <div className="grid w-full max-w-sm items-center gap-1.5">
+        <label htmlFor="name" className="text-sm font-medium text-gray-700">
+          Name
+        </label>
+        <input
+          type="text"
+          id="name"
+          placeholder="Name"
+          name="name"
+          value={scenarioFormData.name}
+          onChange={handleInputChange}
+          required
+          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+      <div className="grid w-full gap-1.5 pt-2">
+        <label
+          htmlFor="description"
+          className="text-sm font-medium text-gray-700"
+        >
+          Description
+        </label>
+        <textarea
+          placeholder="Type your message here."
+          id="description"
+          name="description"
+          value={scenarioFormData.description}
+          onChange={handleInputChange}
+          required
+          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-[100px]"
+        />
+      </div>
+      <button
+        type="submit"
+        className="mt-3 w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
+      >
+        Save Name & Description
+      </button>
+    </div>
+  );
+}

package/analyzer-template/packages/ui-components/src/scenario-editor/components/SectionExpand.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import { SectionExpandProps } from '../types';
+
+/**
+ * SectionExpand component for collapsible sections
+ */
+export default function SectionExpand({
+  title,
+  children,
+  defaultOpen = false,
+  borderT = false,
+  borderB = false,
+}: SectionExpandProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  const borderClasses = [];
+  if (borderT) borderClasses.push('border-t');
+  if (borderB) borderClasses.push('border-b');
+
+  return (
+    <div className={`${borderClasses.join(' ')} border-gray-300`}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full px-4 py-3 flex items-center justify-between bg-gray-50 hover:bg-gray-100 transition-colors text-left font-semibold text-gray-900"
+      >
+        <span>{title}</span>
+        <svg
+          className={`transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+          style={{
+            width: '20px',
+            height: '20px',
+            minWidth: '20px',
+            minHeight: '20px',
+            maxWidth: '20px',
+            maxHeight: '20px',
+            flexShrink: 0,
+          }}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+      {isOpen && <div className="px-4 py-3">{children}</div>}
+    </div>
+  );
+}

package/analyzer-template/packages/ui-components/src/scenario-editor/components/UnionTypeOptionDropdown.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react';
+import { UnionTypeOptionDropdownProps } from '../types';
+
+const UnionTypeOptionDropdown: React.FC<UnionTypeOptionDropdownProps> = ({
+  name,
+  value,
+  options,
+  onChange,
+}) => {
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      onChange({
+        target: {
+          name,
+          value: e.target.value,
+        },
+      });
+    },
+    [name, onChange],
+  );
+
+  return (
+    <select
+      name={name}
+      value={value}
+      onChange={handleChange}
+      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+    >
+      {options.map((option, index) => (
+        <option key={index} value={option.trim()}>
+          {option.trim()}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export default UnionTypeOptionDropdown;

package/analyzer-template/packages/ui-components/src/scenario-editor/index.ts

@@ -0,0 +1,35 @@
+// Main ScenarioEditor component
+export { default as ScenarioEditor } from './components/ScenarioEditor';
+
+// Sub-components
+export { default as AIDataGeneratorForm } from './components/AIDataGeneratorForm';
+export { default as ScenarioNameForm } from './components/ScenarioNameForm';
+export { default as DataItemEditor } from './components/DataItemEditor';
+export { default as InputField } from './components/InputField';
+export { default as DataItemLink } from './components/DataItemLink';
+export { default as DataItemNavigation } from './components/DataItemNavigation';
+export { default as BooleanSwitch } from './components/BooleanSwitch';
+export { default as UnionTypeOptionDropdown } from './components/UnionTypeOptionDropdown';
+export { default as SectionExpand } from './components/SectionExpand';
+
+// Types
+export type {
+  ScenarioFormData,
+  DataItem,
+  SaveOptions,
+  SaveFeedback,
+  ScenarioEditorProps,
+  AIDataGeneratorFormProps,
+  ScenarioNameFormProps,
+  DataItemEditorProps,
+  InputFieldProps,
+  DataItemLinkProps,
+  DataItemNavigationProps,
+  BooleanSwitchProps,
+  UnionTypeOptionDropdownProps,
+  SectionExpandProps,
+} from './types';
+export { DataType } from './types';
+
+// Utilities
+export { findAttr, isNotPrimitive, arrayCount, sortKeys } from './utils';

package/analyzer-template/packages/ui-components/src/scenario-editor/types.ts

@@ -0,0 +1,127 @@
+import { Analysis, Scenario, ScenariosDataStructure } from '~codeyam/types';
+
+export interface ScenarioFormData {
+  name: string;
+  description: string;
+  mockData?: { [key: string]: string };
+  argumentsData?: { [key: string]: unknown };
+  data: Scenario['metadata']['data'];
+}
+
+export interface DataItem {
+  namedPath: string[];
+  path: string[];
+  data: unknown;
+  structure: ScenariosDataStructure;
+}
+
+export interface SaveOptions {
+  recapture?: boolean;
+}
+
+export interface SaveFeedback {
+  isSaving?: boolean;
+  message?: string | null;
+  isError?: boolean;
+}
+
+export interface ScenarioEditorProps {
+  currentScenario: Scenario;
+  defaultScenario: Scenario;
+  dataStructure: ScenariosDataStructure;
+  analysis: Analysis;
+  shouldCreateNewScenario?: boolean;
+  onSave?: (
+    updatedScenarios: Scenario[],
+    options?: SaveOptions,
+  ) => Promise<void>;
+  onNavigate?: (scenarioName: string) => void;
+  iframeRef?: React.RefObject<HTMLIFrameElement>;
+  onGenerateData?: (
+    prompt: string,
+    dataItem?: DataItem,
+  ) => Promise<Partial<Scenario['metadata']>>;
+  saveFeedback?: SaveFeedback;
+}
+
+export interface AIDataGeneratorFormProps {
+  analysis: Analysis;
+  scenarioName?: string;
+  dataItem?: DataItem;
+  onResult: (data: Scenario) => void;
+  onGenerateData?: (
+    prompt: string,
+    dataItem?: DataItem,
+  ) => Promise<Partial<Scenario['metadata']>>;
+}
+
+export interface ScenarioNameFormProps {
+  scenarioFormData: ScenarioFormData;
+  handleInputChange: (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => void;
+}
+
+export interface DataItemEditorProps {
+  analysis: Analysis;
+  scenarioName: string;
+  dataItem: DataItem;
+  onClick: (path: string[]) => void;
+  onChange: (path: string[], value: string | number | boolean) => void;
+  onAIResult: (data: Scenario) => void;
+  onGenerateData?: (
+    prompt: string,
+    dataItem?: DataItem,
+  ) => Promise<Partial<Scenario['metadata']>>;
+  saveFeedback?: SaveFeedback;
+}
+
+export interface InputFieldProps {
+  dataType: string;
+  path: string[];
+  value: string | number | boolean;
+  onChange: (path: string[], value: string | number | boolean) => void;
+}
+
+export interface DataItemLinkProps {
+  path: string[];
+  namedPath: string[];
+  isArray?: boolean;
+  count?: number;
+  onClick?: (path: string[]) => void;
+}
+
+export interface DataItemNavigationProps {
+  dataItem: DataItem;
+  onClick: (path: string[]) => void;
+}
+
+export interface BooleanSwitchProps {
+  name: string;
+  value: boolean;
+  onChange: (e: { target: { name: string; value: boolean } }) => void;
+}
+
+export interface SectionExpandProps {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  borderT?: boolean;
+  borderB?: boolean;
+}
+
+export interface UnionTypeOptionDropdownProps {
+  name: string;
+  value: string;
+  options: string[];
+  onChange: (e: { target: { name: string; value: string } }) => void;
+}
+
+export enum DataType {
+  STRING = 'string',
+  NUMBER = 'number',
+  BOOLEAN = 'boolean',
+  UNION = 'union',
+  OBJECT = 'object',
+  ARRAY = 'array',
+}