@explorer02/cfm-survey-sdk 0.1.7 → 0.1.9

package/templates/docs/01-components/01-survey-page.md

@@ -0,0 +1,91 @@
+# Survey Page Orchestrator Architectural Blueprint
+
+> **Target Component**: `SurveyPage`
+> **Role**: The main entry point that wires the UI to the `useSurveySDK` hook, manages loading/error states, orchestrates pagination, and controls submission.
+
+## Core Responsibility
+This component MUST act as the state machine for the entire survey flow. It should never render questions directly—it delegates that to `Question.tsx`.
+
+## Setup & Wiring (CRITICAL)
+
+The component MUST invoke `useSurveySDK`, passing the **instanceId** from the client prompt.
+
+```tsx
+const SURVEY_PLACEHOLDERS = { FIRST_NAME: 'Customer' }; // Must be outside component!
+
+export default function SurveyPage() {
+  const [selectedLanguage, setSelectedLanguage] = useState<string | undefined>("");
+
+  const { surveyQueryResults, submitSurveyResults, state, onAction } = useSurveySDK({
+    options: {
+      instanceId: 'YOUR_INSTANCE_ID_HERE', // From client prompt
+      language: selectedLanguage,
+      placeholders: SURVEY_PLACEHOLDERS,
+      debug: true,
+    }
+  });
+  
+  const survey = surveyQueryResults.data;
+  
+  // ... state machine rendering
+}
+```
+
+## The 5 State Machine Renders (MANDATORY)
+
+You MUST structure your render logic to strictly handle these 5 states in order to avoid UI crashes when data is not yet available.
+
+### 1. Loading State
+If `surveyQueryResults.isLoading` is true, render a Skeleton or Spinner.
+*Include your CSS-only Header and Footer around the spinner.*
+
+### 2. Error State
+If `surveyQueryResults.error` is true, render a red Error banner containing `surveyQueryResults.error.message`.
+
+### 3. Empty State
+If `!survey`, render a generic "Survey not found" message.
+
+### 4. Submitted State
+If `submitSurveyResults.data` exists, the survey is complete.
+*Render the Thank You Screen (e.g., "Thank you for your feedback!"). Do not render the question list.*
+
+### 5. Active Survey State
+If the above 4 conditions are met, render the active survey page:
+1. `Header` (Logo)
+2. `ProgressBar` (Pass `state.progressPercentage`)
+3. `LanguageSelector` (Pass `survey.languages`, `survey.language`, `setSelectedLanguage`)
+4. **The Question Map** (See below)
+5. **Navigation Buttons** (See below)
+6. `Footer`
+
+## The Question Map
+
+You MUST iterate over `state.currentQuestions` and dispatch to `Question.tsx`.
+
+```tsx
+<div className="space-y-12">
+  {state.currentQuestions.map(question => (
+    <Question
+      key={question.id}
+      question={question}
+      selectedValue={state.values[question.id]}
+      validationError={state.validationErrors[question.id]}
+      onSelect={value => onAction({ 
+        type: 'CHANGE', 
+        payload: { questionId: question.id, value } 
+      })}
+    />
+  ))}
+</div>
+```
+
+## Navigation Buttons Logic
+
+You MUST conditionally render "Back" and "Next/Submit" buttons. 
+
+- **Back Button**: Hide if `state.currentPageIndex === 0`.
+  - `onClick={() => onAction({ type: 'PREVIOUS' })}`
+- **Next/Submit Button**:
+  - `disabled={submitSurveyResults.isLoading}`
+  - If `state.currentPageIndex < survey.pages.length - 1`, label is "Next", action is `type: 'NEXT'`.
+  - If on the last page, label is "Submit", action is `type: 'NEXT'` (the SDK intercepts NEXT on the last page to trigger submission automatically!).

package/templates/docs/01-components/02-question.md

@@ -0,0 +1,105 @@
+# Question Dispatcher Architectural Blueprint
+
+> **Target Component**: `Question`
+> **Role**: Wrapper card component that routes to the correct scale component based on `question.type`.
+
+## Core Responsibility
+Render a visually separated container (card) for each question. Handle rich text parsing, required asterisks, description text, and error validation messages. Most importantly, it MUST act as an exhaustive switch statement dispatching to ALL supported question types.
+
+## Exhaustive Dispatcher Logic (CRITICAL)
+
+The agent MUST handle EVERY SINGLE ONE of these `question.type` values. Failure to handle them will result in blank UI or broken surveys.
+
+1. **`rating`**: Renders `RatingScale`. This covers NPS, Stars, Emoji, and generic numeric scales.
+2. **`csat`**: Renders `CsatScale`. This covers CSAT specific faces/icons.
+3. **`radio`**: Renders inline MCQ radio buttons. (Can be implemented inside this file or separately).
+4. **`text`**: Renders an inline `<textarea>` or `<input>`.
+5. **`matrix`**: 
+   - If `subType === 'CFM_MATRIX'`, render `LikertMatrixScale`
+   - If `subType === 'CSAT_MATRIX'` or `'RATING_MATRIX'`, render `CsatMatrixScale`
+6. **`slider_matrix`**: Renders `SliderMatrixScale`
+7. **`file_upload`**: Renders `FileUploadScale`
+8. **`text_and_media`**: Renders inline `<video>` or `<img>` based on `question.mediaUrl`. 
+   - *Note: `text_and_media` questions may NOT have user input. Do not render a scale for them.*
+
+## Container UI Structure
+
+Every question MUST be wrapped in a standard HTML `<section>` to visually separate it.
+
+1. **Wrapper styling**: 
+   - Border: `border border-gray-200`
+   - Radius: `rounded-xl`
+   - Background: `bg-white`
+   - Padding: `p-6 md:p-8`
+   - Shadow & Hover: `shadow-sm transition-all hover:shadow-md`
+   - **Crucial**: ID must be set to `question.id` (`id={question.id}`) so scroll-to-error works!
+
+2. **Heading (`question.text`)**:
+   - MUST use `dangerouslySetInnerHTML={{ __html: question.text }}` because text from Sprinklr contains rich HTML (bold, links, italics).
+   - If `question.required === true`, append a red asterisk `*`.
+
+3. **Description (`question.description`)**:
+   - Render conditionally if `question.description` exists.
+   - MUST use `dangerouslySetInnerHTML`.
+   - Style with slightly smaller text, greyish color (e.g., `text-sm text-gray-600 mt-2`).
+
+4. **Validation Error Banner**:
+   - If `validationError` prop is passed, render a highly visible banner below the scale.
+   - Example: Red border-left, red background, bold text.
+
+## Hover Tooltips & Micro-interactions
+- Focus states on text inputs MUST use the brand primary color (e.g., magenta `#e20074` for Telekom).
+- Radio button wrappers should have a subtle background hover effect (e.g., `hover:bg-pink-50`).
+
+## Example Architectural Skeleton
+
+```tsx
+<section id={question.id} className="space-y-6 rounded-xl border border-gray-200 bg-white p-6 md:p-8 shadow-sm transition-all hover:shadow-md">
+  
+  {/* HEADING */}
+  <h2 className="text-lg md:text-xl font-semibold leading-relaxed text-gray-900 flex items-start gap-1">
+    <span dangerouslySetInnerHTML={{ __html: question.text }} className="prose prose-sm max-w-none" />
+    {question.required && <span className="text-[#e20074] shrink-0">*</span>}
+  </h2>
+  
+  {/* DESCRIPTION */}
+  {question.description && (
+    <div className="text-sm text-gray-600 mt-2 leading-relaxed prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: question.description }} />
+  )}
+  
+  {/* DISPATCHER */}
+  <div className="pt-4">
+    {question.type === 'rating' && <RatingScale ... />}
+    {question.type === 'csat' && <CsatScale ... />}
+    {question.type === 'slider_matrix' && <SliderMatrixScale ... />}
+    {question.type === 'file_upload' && <FileUploadScale ... />}
+    {question.type === 'matrix' && question.subType === 'CFM_MATRIX' && <LikertMatrixScale ... />}
+    {question.type === 'matrix' && (question.subType === 'CSAT_MATRIX' || question.subType === 'RATING_MATRIX') && <CsatMatrixScale ... />}
+    
+    {question.type === 'radio' && (
+       // Inline Radio implementation
+       // Make sure to match brand hover colors!
+    )}
+    
+    {question.type === 'text' && (
+       // Inline Textarea implementation
+       // Handle character limit `question.maxCharacterCount`
+    )}
+
+    {question.type === 'text_and_media' && (
+       // Display media (image/video) based on question properties
+       // This handles CONTENT blocks.
+    )}
+  </div>
+
+  {/* ERROR BANNER */}
+  {validationError && (
+    <div className="mt-6 rounded-lg border-l-4 border-l-[#e20074] bg-red-50 p-4">
+      <p className="text-sm font-bold text-gray-900 leading-tight flex items-center gap-2">
+        <span className="text-[#e20074]">⚠</span> {validationError}
+      </p>
+    </div>
+  )}
+
+</section>
+```

package/templates/docs/01-components/08-file-upload-scale.md

@@ -0,0 +1,56 @@
+# File Upload Architectural Blueprint
+
+> **Target Component**: `FileUploadScale`
+> **Handles**: `type: 'file_upload'`
+
+## Core Responsibility
+Render a robust drag-and-drop zone and enforce complex file size, type limits, and maximum file count constraints BEFORE updating the state.
+
+## State Management
+- `selectedValue`: Expects an array of native `File` objects (or serialized equivalents).
+- **Mutation Pattern**: 
+  1. The user selects files.
+  2. The component intercepts the files.
+  3. The component validates them against ALL limits.
+  4. If valid, append the new files to `selectedValue` (handling it as an array).
+  5. Call `onSelect(updatedFilesArray)`.
+
+## Configuration Matrix (CRITICAL FOR PLANNING)
+
+Before calling `onSelect`, your component MUST validate against these properties:
+
+### 1. `supportedFileFormats`
+- Extracted from `question.supportedFileFormats` (e.g. `['PDF', 'PNG', 'JPG']`).
+- Use this to build the `accept` attribute string for the hidden input: `question.supportedFileFormats?.map(f => \`.\${f.toLowerCase()}\`).join(',')`.
+- You MUST reject files with extensions that are not in this list.
+
+### 2. `maxFileCount`
+- Prevent uploads if `currentFiles.length + newFiles.length > maxFileCount`.
+- Provide a clear local error message indicating the max limit.
+
+### 3. `fileSizeLimit` & `fileSizeLimitType`
+- `fileSizeLimit` is a number representing megabytes (MB).
+- If `fileSizeLimitType === 'PER_FILE'`, validate that EVERY incoming file's `size` (in bytes) is `<= fileSizeLimit * 1024 * 1024`.
+- If `fileSizeLimitType === 'IN_TOTAL'`, validate that the combined sum of all existing `selectedValue` sizes plus the incoming files' sizes is `<= fileSizeLimit * 1024 * 1024`.
+
+## UI/UX Specifications
+
+1. **Dropzone**:
+   - Wrap the main area with `onDragEnter`, `onDragOver`, `onDragLeave`, `onDrop`.
+   - **Inactive State**: `border-2 border-dashed border-gray-300 rounded-xl bg-gray-50 p-8 text-center cursor-pointer transition-all`.
+   - **Drag/Hover State**: `border-[#e20074] bg-[#fdf2f8]` (Using the brand primary color).
+   - Display a Cloud SVG icon (use gray, switch to magenta on hover).
+   - Render `question.uploadMessage` (which can contain HTML, so use `dangerouslySetInnerHTML`).
+   - Dynamically render the limits text (e.g., "Max 3 files, 10MB per file").
+
+2. **File List**:
+   - Render existing files as distinct cards underneath the dropzone.
+   - Styling: `flex items-center justify-between p-3 mt-3 border border-gray-200 rounded-lg bg-white shadow-sm`.
+   - Display the filename (truncated if long) and the formatted file size (e.g., "1.2 MB").
+   - Include a distinct, circular Trash/Remove button that removes the file from the state and calls `onSelect` with the updated array.
+
+3. **Validation Errors**:
+   - Local validation errors (e.g. "File too large") must be displayed in a highly visible red banner (`bg-red-50 text-red-700 p-3 rounded-md`) right below the dropzone.
+
+## Hidden Input
+- Include a hidden `<input type="file" multiple={question.maxFileCount > 1} accept={...} />` that is triggered via a `useRef` when the dropzone is clicked.

package/templates/docs/{03-client-components → 01-components}/README.md

@@ -40,7 +40,7 @@ SurveyPage (Top-level orchestrator)
 
 ## The `Question` Dispatcher
 
-The `Question` component (`apps/client/src/components/Question.tsx`) is the heart of the rendering engine. It receives a `SurveyQuestion` union type and switches on `question.type` (and `question.subType` for matrices) to render the correct specialized scale component.
+The `Question` component is the heart of the rendering engine. It receives a `SurveyQuestion` union type and switches on `question.type` (and `question.subType` for matrices) to render the correct specialized scale component.
 
 See `02-question.md` for details on the dispatcher logic.
 

package/templates/docs/02-question-types/01-rating.md

@@ -21,14 +21,6 @@ type RatingQuestion = QuestionBase & {
 ## Answer Shape: `number`
 Example: `7` (the selected badge value)
 
-## Options Auto-Generation
-If the API provides no explicit options, the SDK generates 0-10:
-```typescript
-Array.from({ length: 11 }, (_, i) => ({
-  id: String(i), label: String(i), value: i, color: getColor(i)
-}));
-```
-
 ## NPS Traffic-Light Colors
 ```
 0: #e2001a (red)     3: #f18b00 (orange)   6: #fcd900 (yellow)

package/templates/docs/02-reference/question-types/01-rating.md

@@ -0,0 +1,52 @@
+# Rating Question (NPS 0-10)
+
+> **Type**: `'rating'` | **API Source**: `SCALE` with `SCALE_TYPE=TEN_POINT` or `NPS_SCALE`
+> **Mapper**: `ratingMapper.ts` | **Component**: `RatingScale`
+
+## TypeScript Type
+
+```typescript
+type RatingQuestion = QuestionBase & {
+  type: 'rating';
+  options: SurveyOption[];       // 0-10 with NPS traffic-light colors
+  minLabel?: string;             // Left label (e.g. "Not Likely")
+  midLabel?: string;             // Middle label (e.g. "Neutral")
+  maxLabel?: string;             // Right label (e.g. "Extremely Likely")
+  midLabelIndex?: number;        // Fractional position for mid-label CSS
+  reverseScaleOrder?: boolean;   // Render high→low
+  buttonVariant?: 'radio' | 'numbered' | 'emoji';
+};
+```
+
+## Answer Shape: `number`
+Example: `7` (the selected badge value)
+
+## Options Auto-Generation
+If the API provides no explicit options, the SDK generates 0-10:
+```typescript
+Array.from({ length: 11 }, (_, i) => ({
+  id: String(i), label: String(i), value: i, color: getColor(i)
+}));
+```
+
+## NPS Traffic-Light Colors
+```
+0: #e2001a (red)     3: #f18b00 (orange)   6: #fcd900 (yellow)
+1: #e4251b           4: #f7b200            7: #9fca00 (lime)
+2: #ec610a           5: #fcd900            8: #6bb300 (green)
+                                            9: #339a00
+                                            10: #008000
+```
+
+## Mid-Label Positioning
+```typescript
+// CSS left percentage for mid-label
+const left = (midLabelIndex / (options.length - 1)) * 100;
+// For 11-point scale: midLabelIndex defaults to 7.5
+```
+
+## Rendering Guidance
+- Display as horizontal row of numbered badge buttons
+- Each badge uses `option.color` as background
+- Selected badge: emphasized border/scale, all others dimmed
+- Labels positioned: minLabel (left), midLabel (calculated %), maxLabel (right)

package/templates/docs/02-reference/question-types/README.md

@@ -0,0 +1,71 @@
+# Question Types Reference
+
+> Read **on demand** — only for types present in the fetched survey.
+> UI implementation: `01-components/`. Routing table: `02-reference/routing-table.md`.
+
+## Discriminated Union
+
+```typescript
+type SurveyQuestion =
+  | RatingQuestion        // 'rating'
+  | RadioQuestion         // 'radio'
+  | TextQuestion          // 'text'
+  | CsatQuestion          // 'csat'
+  | RatingScaleQuestion   // 'rating_scale'
+  | SliderQuestion        // 'slider'
+  | MatrixQuestion        // 'matrix' (check subType)
+  | RatingMatrixQuestion  // 'rating_matrix'
+  | SliderMatrixQuestion  // 'slider_matrix'
+  | FileUploadQuestion    // 'file_upload'
+  | TextAndMediaQuestion; // 'text_and_media'
+```
+
+## Shared `QuestionBase` Properties
+
+| Property | Type | Notes |
+|----------|------|-------|
+| `id` | `string` | **MUST** be DOM `id` on wrapper |
+| `text` | `string` | HTML — use `dangerouslySetInnerHTML` |
+| `description` | `string?` | HTML |
+| `required` | `boolean?` | |
+| `requiredErrorMessage` | `string?` | Custom validation message |
+| `questionNumber` | `number?` | 1-indexed |
+
+---
+
+## radio {#radio}
+
+- **Type:** `RadioQuestion` — `type: 'radio'`
+- **Answer:** `string | number` (option id or value)
+- **UI:** Inline MCQ radio cards in `Question.tsx` — see `01-components/02-question.md`
+- **No separate reference doc needed**
+
+## text {#text}
+
+- **Type:** `TextQuestion` — `type: 'text'`
+- **Answer:** `string`
+- **UI:** Inline `<textarea>` or `<input>` in `Question.tsx`
+- **No separate reference doc needed**
+
+## text_and_media {#text_and_media}
+
+- **Type:** `TextAndMediaQuestion` — `type: 'text_and_media'`
+- **Answer:** none — display-only, skipped in validation and submission
+- **UI:** Inline `<video>` or `<img>` from `question.mediaUrl` — no scale component
+- **No separate reference doc needed**
+
+---
+
+## Detailed Reference Docs
+
+| File | Type | When to read |
+|------|------|--------------|
+| `01-rating.md` | `rating` | NPS / numeric scales |
+| `04-csat.md` | `csat` | CSAT emoji/star (≤5 options) |
+| `05-rating-scale.md` | `rating_scale` | Star/emoji rating |
+| `06-slider.md` | `slider` | Single range slider |
+| `07-matrix-cfm.md` | `matrix` + `CFM_MATRIX` | Likert text grid |
+| `08-matrix-csat.md` | `matrix` + CSAT/RATING | Satisfaction grid |
+| `09-matrix-rating.md` | `rating_matrix` | NPS-style grid |
+| `10-slider-matrix.md` | `slider_matrix` | Slider grid |
+| `11-file-upload.md` | `file_upload` | File attachments |

package/templates/docs/02-reference/routing-table.md

@@ -0,0 +1,37 @@
+# Question Type → Component Routing
+
+> Canonical mapping. For UI implementation details, read `01-components/`. For data shapes, read `02-reference/question-types/`.
+
+| `question.type` | `question.subType` | Component | Answer Shape | Reference Doc |
+|-----------------|-------------------|-----------|--------------|---------------|
+| `'rating'` | — | `RatingScale` | `number` | `question-types/01-rating.md` |
+| `'radio'` | — | Inline in `Question` | `string \| number` | `question-types/README.md#radio` |
+| `'text'` | — | Inline in `Question` | `string` | `question-types/README.md#text` |
+| `'csat'` | — | `CsatScale` | `number \| null` | `question-types/04-csat.md` |
+| `'rating_scale'` | — | `RatingScale` | `number` | `question-types/05-rating-scale.md` |
+| `'slider'` | — | `CustomSliderTrack` | `number` | `question-types/06-slider.md` |
+| `'matrix'` | `'CFM_MATRIX'` | `LikertMatrixScale` | `MatrixAnswerMap` | `question-types/07-matrix-cfm.md` |
+| `'matrix'` | `'CSAT_MATRIX'` | `CsatMatrixScale` | `MatrixAnswerMap` | `question-types/08-matrix-csat.md` |
+| `'matrix'` | `'RATING_MATRIX'` | `CsatMatrixScale` | `MatrixAnswerMap` | `question-types/08-matrix-csat.md` |
+| `'rating_matrix'` | — | `CsatMatrixScale` | `MatrixAnswerMap` | `question-types/09-matrix-rating.md` |
+| `'slider_matrix'` | — | `SliderMatrixScale` | `MatrixAnswerMap` | `question-types/10-slider-matrix.md` |
+| `'file_upload'` | — | `FileUploadScale` | `UploadedFile[]` | `question-types/11-file-upload.md` |
+| `'text_and_media'` | — | Inline in `Question` | (no answer) | `question-types/README.md#text_and_media` |
+
+## Component Blueprint Docs
+
+| Component | Blueprint |
+|-----------|-----------|
+| `SurveyPage` | `01-components/01-survey-page.md` |
+| `Question` | `01-components/02-question.md` |
+| `RatingScale` | `01-components/03-rating-scale.md` |
+| `CsatScale` | `01-components/04-csat-scale.md` |
+| `CsatMatrixScale` | `01-components/05-csat-matrix-scale.md` |
+| `LikertMatrixScale` | `01-components/06-likert-matrix-scale.md` |
+| `SliderMatrixScale` | `01-components/07-slider-matrix-scale.md` |
+| `FileUploadScale` | `01-components/08-file-upload-scale.md` |
+| `CustomSliderTrack` | `01-components/09-custom-slider-track.md` |
+| `Header` / `Footer` | `01-components/10-header-footer.md` |
+| `ProgressBar` | `01-components/11-progress-bar.md` |
+| `LanguageSelector` | `01-components/12-language-selector.md` |
+| `MatrixDropdown` | `01-components/13-matrix-dropdown.md` |

package/templates/docs/MANIFEST.json

@@ -0,0 +1,129 @@
+{
+  "version": "1.0.0",
+  "packageNames": {
+    "npm": "@explorer02/cfm-survey-sdk",
+    "monorepo": "@repo/sdk"
+  },
+  "entryPoint": "index.md",
+  "clientInputs": ["initialPrompt", "instanceIdJwt", "deployConfirmation"],
+  "phases": [
+    {
+      "id": 0,
+      "name": "orient",
+      "read": ["index.md", "../AGENT.md"],
+      "actions": ["detectFramework", "extractBrandingFromClientPrompt"]
+    },
+    {
+      "id": 1,
+      "name": "scaffold",
+      "read": ["00-integration/setup.md"],
+      "frameworks": ["nextjs", "vite", "cra"]
+    },
+    {
+      "id": 2,
+      "name": "instanceId",
+      "read": ["00-integration/useSurveySDK.md"]
+    },
+    {
+      "id": 3,
+      "name": "sdkContract",
+      "read": ["00-integration/useSurveySDK.md"]
+    },
+    {
+      "id": 4,
+      "name": "planAndIngest",
+      "read": [
+        "01-components/README.md",
+        "01-components/01-survey-page.md",
+        "01-components/02-question.md",
+        "01-components/03-rating-scale.md",
+        "01-components/04-csat-scale.md",
+        "01-components/05-csat-matrix-scale.md",
+        "01-components/06-likert-matrix-scale.md",
+        "01-components/07-slider-matrix-scale.md",
+        "01-components/08-file-upload-scale.md",
+        "01-components/09-custom-slider-track.md",
+        "01-components/10-header-footer.md",
+        "01-components/11-progress-bar.md",
+        "01-components/12-language-selector.md",
+        "01-components/13-matrix-dropdown.md"
+      ],
+      "template": "templates/implementation_plan.md",
+      "output": "implementation_plan.md"
+    },
+    {
+      "id": 5,
+      "name": "build",
+      "read": ["00-integration/constraints.md", "02-reference/routing-table.md"],
+      "onDemand": "02-reference/question-types"
+    },
+    {
+      "id": 6,
+      "name": "verify",
+      "read": ["00-integration/constraints.md"],
+      "checklist": [
+        "questionDispatcherCoversAll12Types",
+        "everyQuestionWrapperHasId",
+        "noInternalSdkImports",
+        "surveyPageFiveStates",
+        "npmRunBuildPasses"
+      ]
+    },
+    {
+      "id": 7,
+      "name": "deploy",
+      "command": "npx cfm-sdk deploy"
+    }
+  ],
+  "questionTypes": {
+    "rating": {
+      "component": "01-components/03-rating-scale.md",
+      "reference": "02-reference/question-types/01-rating.md"
+    },
+    "radio": {
+      "component": "01-components/02-question.md",
+      "reference": "02-reference/question-types/README.md#radio"
+    },
+    "text": {
+      "component": "01-components/02-question.md",
+      "reference": "02-reference/question-types/README.md#text"
+    },
+    "csat": {
+      "component": "01-components/04-csat-scale.md",
+      "reference": "02-reference/question-types/04-csat.md"
+    },
+    "rating_scale": {
+      "component": "01-components/03-rating-scale.md",
+      "reference": "02-reference/question-types/05-rating-scale.md"
+    },
+    "slider": {
+      "component": "01-components/09-custom-slider-track.md",
+      "reference": "02-reference/question-types/06-slider.md"
+    },
+    "matrix": {
+      "component": "01-components/06-likert-matrix-scale.md",
+      "reference": "02-reference/question-types/07-matrix-cfm.md",
+      "subTypes": {
+        "CFM_MATRIX": "01-components/06-likert-matrix-scale.md",
+        "CSAT_MATRIX": "01-components/05-csat-matrix-scale.md",
+        "RATING_MATRIX": "01-components/05-csat-matrix-scale.md"
+      }
+    },
+    "rating_matrix": {
+      "component": "01-components/05-csat-matrix-scale.md",
+      "reference": "02-reference/question-types/09-matrix-rating.md"
+    },
+    "slider_matrix": {
+      "component": "01-components/07-slider-matrix-scale.md",
+      "reference": "02-reference/question-types/10-slider-matrix.md"
+    },
+    "file_upload": {
+      "component": "01-components/08-file-upload-scale.md",
+      "reference": "02-reference/question-types/11-file-upload.md"
+    },
+    "text_and_media": {
+      "component": "01-components/02-question.md",
+      "reference": "02-reference/question-types/README.md#text_and_media"
+    }
+  }
+}