feat: Update component prop handling and add TypeScript types

- Moved TypeScript types and interfaces to a dedicated file (`types/wizard.ts`) for better organization.
- Added a pre-commit hook to validate question IDs before committing.
- Enhanced the `InstructionsWizard` component to create a JSON object of questions and answers upon closing.
- Updated documentation to reflect new development workflow practices regarding TypeScript types and reusable effect logic.
- Added a new script (`validate-question-ids.ts`) to check for duplicate question IDs across data files.

Author: spivx

.github/copilot-instructions.md

@@ -1 +1,6 @@
+
 When adding props to a component, always place the props interface at the top of the component file, above the component definition.
+
+Development Workflow:
+- Always move TypeScript types and interfaces to a dedicated file (e.g., `types/wizard.ts`) instead of declaring them inside components.
+- When you identify reusable effect logic, wrap it in a custom hook under `hooks/` (e.g., `use-window-click-dismiss.ts`) and consume that hook rather than repeating `useEffect` blocks.

.husky/pre-commit

@@ -0,0 +1 @@
+npm run validate:ids

agents.md

@@ -35,16 +35,8 @@
 3. The wizard automatically consumes new questions when they follow the existing schema.
 
 ## Development Workflow
-- Lint with `npm run lint` (already part of standard checks).
-- When editing, maintain ASCII files, Tailwind utility classes, and ShadCN UI conventions.
-- Tests are lint-only at present; consider adding React Testing Library coverage if the wizard logic expands.
-
-## Notes for Agents
-- Respect the "enabled" flag semantics: `false` means the option renders disabled with a "Soon" badge.
-- When adding tooltip content, prefer concise prose and keep hover cards scannable.
-- Keep documentation links trustworthy; avoid marketing splash pages when direct references exist.
-- If adding new output formats, update both the data definition in `data/files.json` and any generation logic (currently beyond this repo).
-- When page-level components need reusable calculations or datasets, extract those helpers into `lib/utils.ts` and import them instead of defining inline.
-- For complex UI blocks reused across the wizard, lift them into dedicated components (e.g., `components/instructions-answer-card.tsx`) and consume them in the wizard instead of duplicating markup.
-- Create new components under `components/MyComponentName/MyComponentName.tsx` with an accompanying `index.tsx` that default-exports the component.
+  
+- **Always move TypeScript types and interfaces to a dedicated file (e.g., `types/wizard.ts`) instead of declaring them inside components.**
+
+
 - When you identify reusable effect logic, wrap it in a custom hook under `hooks/` (e.g., `use-window-click-dismiss.ts`) and consume that hook rather than repeating `useEffect` blocks.

components/instructions-wizard.tsx

@@ -7,6 +7,7 @@ import * as simpleIcons from "simple-icons"
 import type { SimpleIcon } from "simple-icons"
 
 import rawIdes from "@/data/ides.json"
+import type { DataAnswerSource, DataQuestionSource, FileOutputConfig, FrameworkConfig, IdeConfig, InstructionsWizardProps, Responses, WizardAnswer, WizardQuestion, WizardResponses, WizardStep } from "@/types/wizard"
 import rawFrameworks from "@/data/frameworks.json"
 import generalData from "@/data/general.json"
 import architectureData from "@/data/architecture.json"
@@ -16,86 +17,6 @@ import commitsData from "@/data/commits.json"
 import filesData from "@/data/files.json"
 import { InstructionsAnswerCard } from "./instructions-answer-card"
 
-type IdeConfig = {
-  id: string
-  label: string
-  icon?: string
-  enabled?: boolean
-  outputFiles?: string[]
-  docs?: string
-}
-
-type FrameworkConfig = {
-  id: string
-  label: string
-  icon?: string
-  enabled?: boolean
-  docs?: string
-}
-
-type DataAnswerSource = {
-  value: string
-  label: string
-  icon?: string
-  example?: string
-  docs?: string
-  pros?: string[]
-  cons?: string[]
-  tags?: string[]
-  isDefault?: boolean
-  disabled?: boolean
-  disabledLabel?: string
-}
-
-type DataQuestionSource = {
-  id: string
-  question: string
-  allowMultiple?: boolean
-  answers: DataAnswerSource[]
-}
-
-type FileOutputConfig = {
-  id: string
-  label: string
-  filename: string
-  format: string
-  enabled?: boolean
-  icon?: string
-  docs?: string
-}
-
-type WizardAnswer = {
-  value: string
-  label: string
-  icon?: string
-  example?: string
-  infoLines?: string[]
-  tags?: string[]
-  isDefault?: boolean
-  disabled?: boolean
-  disabledLabel?: string
-  docs?: string
-}
-
-type WizardQuestion = {
-  id: string
-  question: string
-  allowMultiple?: boolean
-  answers: WizardAnswer[]
-}
-
-type WizardStep = {
-  id: string
-  title: string
-  questions: WizardQuestion[]
-}
-
-type InstructionsWizardProps = {
-  onClose?: () => void
-}
-
-type Responses = Record<string, string | string[] | null | undefined>
-
 const FRAMEWORK_STEP_ID = "frameworks"
 const FRAMEWORK_QUESTION_ID = "frameworkSelection"
 
@@ -642,7 +563,83 @@ export function InstructionsWizard({ onClose }: InstructionsWizardProps) {
           <Button variant="ghost" onClick={requestResetWizard}>
             Start Over
           </Button>
-          <Button onClick={() => onClose?.()}>
+          <Button onClick={() => {
+            // Create a JSON object with question IDs as keys and their answers as values
+            const questionsAndAnswers: WizardResponses = {
+              preferredIde: null,
+              frameworkSelection: null,
+              tooling: null,
+              language: null,
+              fileStructure: null,
+              styling: null,
+              testingUT: null,
+              testingE2E: null,
+              projectPriority: null,
+              codeStyle: null,
+              variableNaming: null,
+              fileNaming: null,
+              componentNaming: null,
+              exports: null,
+              comments: null,
+              collaboration: null,
+              stateManagement: null,
+              apiLayer: null,
+              folders: null,
+              dataFetching: null,
+              reactPerf: null,
+              auth: null,
+              validation: null,
+              logging: null,
+              commitStyle: null,
+              prRules: null,
+              outputFile: null,
+            }
+
+            wizardSteps.forEach((step) => {
+              step.questions.forEach((question) => {
+                let key = question.id
+                let answer = responses[question.id]
+
+                // Special handling for preferredIdes and outputFiles
+                if (key === "preferredIdes") {
+                  key = "preferredIde"
+                  if (Array.isArray(answer) && answer.length > 0) {
+                    answer = answer[0]
+                  } else if (typeof answer === "string") {
+                    // already a string
+                  } else {
+                    answer = null
+                  }
+                }
+                if (key === "outputFiles") {
+                  key = "outputFile"
+                  if (Array.isArray(answer) && answer.length > 0) {
+                    answer = answer[0]
+                  } else if (typeof answer === "string") {
+                    // already a string
+                  } else {
+                    answer = null
+                  }
+                }
+
+                if (answer !== null && answer !== undefined) {
+                  if (question.allowMultiple && Array.isArray(answer)) {
+                    // For all other multi-selects, keep as array
+                    questionsAndAnswers[key as keyof WizardResponses] = Array.isArray(answer) ? answer.join(", ") : answer
+                  } else if (!question.allowMultiple && typeof answer === 'string') {
+                    questionsAndAnswers[key as keyof WizardResponses] = Array.isArray(answer) ? answer.join(", ") : answer
+                  } else {
+                    questionsAndAnswers[key as keyof WizardResponses] = Array.isArray(answer) ? answer.join(", ") : answer
+                  }
+                } else {
+                  questionsAndAnswers[key as keyof WizardResponses] = null
+                }
+              })
+            })
+
+            console.log('Questions and Answers JSON:', JSON.stringify(questionsAndAnswers, null, 2))
+            onClose?.()
+          }}>
             Generate My Instructions
           </Button>
         </div>