Chore organize storybook components docs

@kiva/kv-components/docs/ai-documentation-prompt.md

@@ -73,10 +73,15 @@ Required steps:
 Template Variables to Fill:
 
 **Basic Info:**
+- {{folderPrefix}} - Storybook folder prefix for the component (see prefix guidance below)
 - {{ComponentName}} - Component name (e.g., KvButton, KvModal)
 - {{componentDescription}} - One-sentence component purpose
 - {{componentOverviewDescription}} - Brief paragraph about the component
 
+**Storybook Folder Prefixes:**
+
+The MDX `<Meta title="..." />` MUST include a folder prefix matching the component's `.stories.js` file. See **[Storybook Folder Prefixes](./storybook-folder-prefixes.md)** for the full list of prefixes, guidelines, and examples. If uncertain about which prefix to use, **ASK THE USER**.
+
 **Variations:**
 - {{variationsDescription}} - Describe all available variations
 

@kiva/kv-components/docs/ai-stories-prompt.md

@@ -59,8 +59,9 @@ import ComponentName from '../ComponentName.vue';
 // or omit this import + docs.page until docs are ready.
 import ComponentNameDocsMdx from './ComponentNameDocs.mdx';
 
+// IMPORTANT: Title must include a folder prefix (see guidance below)
 export default {
-  title: 'ComponentName',
+  title: 'Folder Prefix/ComponentName',
   component: ComponentName,
   parameters: {
     docs: {
@@ -73,6 +74,10 @@ export default {
   },
 };
 
+**Storybook Folder Prefixes:**
+
+All story titles MUST include a folder prefix. See **[Storybook Folder Prefixes](./storybook-folder-prefixes.md)** for the full list of prefixes, guidelines, and examples. If uncertain about which prefix to use, **ASK THE USER**.
+
 // Default story - Interactive playground
 export const Default = {
   args: {
@@ -149,8 +154,13 @@ Template Variables to Fill:
 - {{ComponentName}} - Component name (e.g., KvButton, KvModal)
 
 **Story Configuration:**
+- {{folderPrefix}} - Storybook folder prefix (see prefix guidance below)
 - {{argTypes}} - Complete argTypes object with controls for all props
 
+**Storybook Folder Prefixes:**
+
+All story titles MUST include a folder prefix. See **[Storybook Folder Prefixes](./storybook-folder-prefixes.md)** for the full list of prefixes, guidelines, and examples. If uncertain about which prefix to use, **ASK THE USER**.
+
 **ComponentOverview Story:**
 - {{dataSection}} - data() function if reactive state needed (optional, remove if not needed)
 - {{setupSection}} - setup() function with icons/constants

@kiva/kv-components/docs/component-documentation-checklist.md

@@ -26,7 +26,9 @@ Use this checklist to ensure comprehensive, high-quality component documentation
 - [ ] MDX file created in `src/vue/stories/[ComponentName]Docs.mdx`
 - [ ] Correct imports for Storybook blocks (Canvas, Meta, Story, Controls)
 - [ ] Story file imported correctly (`import * as ComponentStories from './Component.stories.js'`)
-- [ ] Meta tag configured with component name and reference
+- [ ] Meta tag includes folder prefix matching the .stories.js file (see [Storybook Folder Prefixes](./storybook-folder-prefixes.md))
+- [ ] If uncertain about prefix, asked for clarification or checked existing similar components
+- [ ] Meta tag configured with component reference
 - [ ] **No freeform MDX structure** - All template sections present
 
 ## Content Sections

@kiva/kv-components/docs/component-documentation-guide.md

@@ -65,16 +65,22 @@ See component-stories-guide.md for implementation details.
 import { Canvas, Meta, Story, Controls } from '@storybook/addon-docs/blocks';
 import * as KvComponentStories from './KvComponent.stories.js';
 
-<Meta title="KvComponent" component={KvComponentStories.Component} />
+<Meta title="Folder Prefix/KvComponent" component={KvComponentStories.Component} />
 
 ## Component Overview
 
 <Story of={KvComponentStories.ComponentOverview} />
 ```
 
+**Important:** The `<Meta title="..." />` MUST include a folder prefix that matches the component's `.stories.js` file. See the **Storybook Folder Prefixes** section below for guidance.
+
 The MDX import requires a real stories file. Use a stub with matching export names (ComponentOverview, AllVariations,
 Default, etc.) so Storybook can load while you flesh out the stories.
 
+#### Storybook Folder Prefixes
+
+The MDX `<Meta title="..." />` MUST include a folder prefix matching the component's `.stories.js` file. See **[Storybook Folder Prefixes](./storybook-folder-prefixes.md)** for the full list of prefixes, guidelines, and examples.
+
 ## Documentation Structure
 
 Every component should have a corresponding `.mdx` documentation file in `src/vue/stories/` that follows this structure:

@kiva/kv-components/docs/component-stories-checklist.md

@@ -33,7 +33,9 @@ Use this checklist to ensure comprehensive, high-quality Storybook stories for c
 
 ## Default Export Configuration
 
-- [ ] `title` matches component name
+- [ ] `title` includes appropriate folder prefix (see [Storybook Folder Prefixes](./storybook-folder-prefixes.md))
+- [ ] If uncertain about prefix, asked for clarification or checked existing similar components
+- [ ] `title` matches format: 'Folder Prefix/ComponentName'
 - [ ] `component` references the Vue component correctly
 - [ ] `parameters.docs.page` points to MDX file
 - [ ] `parameters.docs.title` is descriptive

@kiva/kv-components/docs/component-stories-guide.md

@@ -104,7 +104,7 @@ import ComponentNameDocsMdx from './ComponentNameDocs.mdx';
 
 ```javascript
 export default {
-	title: 'ComponentName',
+	title: 'Folder Prefix/ComponentName',
 	component: ComponentName,
 	parameters: {
 		docs: {
@@ -119,11 +119,15 @@ export default {
 ```
 
 **Key elements:**
-- **title**: Display name in Storybook sidebar (matches component name)
+- **title**: Display name in Storybook sidebar - MUST include folder prefix (see guidance below)
 - **component**: Reference to the Vue component
 - **parameters.docs.page**: Links to the MDX documentation
 - **argTypes**: Defines interactive controls and their configuration
 
+#### Storybook Folder Prefixes
+
+All story titles MUST include a folder prefix. See **[Storybook Folder Prefixes](./storybook-folder-prefixes.md)** for the full list of prefixes, guidelines, and examples.
+
 ### 3. argTypes Configuration
 
 Configure controls for component props to enable interactive testing:

@kiva/kv-components/docs/storybook-folder-prefixes.md

@@ -0,0 +1,36 @@
+# Storybook Folder Prefixes
+
+All story titles and MDX `<Meta title="..." />` tags MUST include a folder prefix to organize components in the Storybook sidebar. The prefix in the MDX file MUST match the prefix in the corresponding `.stories.js` file.
+
+Use one of the existing prefixes below, or ask for clarification if none fit.
+
+## Existing Folder Prefixes
+
+- **Base Styling/** - Style guide, theme provider, and foundational styling components
+- **Charts/** - Chart and data visualization components (e.g., KvPieChart, KvLineGraph, KvTreeMapChart)
+- **Checkout/** - Checkout flow components (e.g., KvAtbModal, KvCartModal, KvCartPill, KvCheckoutReceipt)
+- **Comments/** - Comment-related components (e.g., KvCommentsAdd, KvCommentsList, KvCommentsListItem)
+- **Components/** - General-purpose components that don't fit other categories (e.g., KvCarousel, KvLightbox, KvMap, KvUtilityMenu)
+- **Forms/** - Form controls and input components (e.g., KvButton, KvCheckbox, KvTextInput, KvSelect, KvSwitch)
+- **Interface Elements/** - General UI elements, indicators, and feedback components (e.g., KvToast, KvTooltip, KvProgressBar, KvLoadingSpinner)
+- **Loan Display/** - Loan-specific display components (e.g., KvLoanInfoCard, KvClassicLoanCard, KvBorrowerImage)
+- **Page Frame/** - Page layout and structural components (e.g., KvPageContainer, KvGrid, KvWwwHeader)
+
+## Guidelines
+
+- If the component clearly fits an existing category, use that prefix
+- If uncertain or the component represents a new category, **ask for clarification** on which prefix to use or if a new folder prefix should be created
+- Never omit the folder prefix
+- The prefix creates the folder structure in the Storybook sidebar navigation
+
+## Examples
+
+**Story titles:**
+- `'Forms/KvButton'`
+- `'Loan Display/KvLoanInfoCard'`
+- `'Interface Elements/KvToast'`
+
+**MDX Meta tags:**
+- `<Meta title="Forms/KvButton" ... />`
+- `<Meta title="Loan Display/KvLoanInfoCard" ... />`
+- `<Meta title="Interface Elements/KvToast" ... />`

@kiva/kv-components/src/vue/.storybook/templates/Component.stories.template.js

@@ -4,8 +4,10 @@ import {
 import {{ComponentName}} from '../{{ComponentName}}.vue';
 import {{ComponentName}}DocsMdx from './{{ComponentName}}Docs.mdx';
 
+// IMPORTANT: {{folderPrefix}} must use an existing Storybook folder or ask for clarification
+// Existing prefixes: Base Styling, Charts, Checkout, Comments, Components, Forms, Interface Elements, Loan Display, Page Frame
 export default {
-	title: '{{ComponentName}}',
+	title: '{{folderPrefix}}/{{ComponentName}}',
 	component: {{ComponentName}},
 	parameters: {
 		docs: {

@kiva/kv-components/src/vue/.storybook/templates/ComponentDocs.template.mdx

@@ -1,7 +1,10 @@
 import { Canvas, Meta, Story, Controls } from '@storybook/addon-docs/blocks';
 import * as {{ComponentName}}Stories from './{{ComponentName}}.stories.js';
 
-<Meta title="{{ComponentName}}" component={ {{ComponentName}}Stories.Component} />
+<!-- IMPORTANT: {{folderPrefix}} must match the folder prefix in the .stories.js file -->
+<!-- Use existing prefixes: Base Styling, Charts, Checkout, Comments, Components, Forms, Interface Elements, Loan Display, or Page Frame -->
+<!-- If uncertain, ask for clarification on which prefix to use -->
+<Meta title="{{folderPrefix}}/{{ComponentName}}" component={ {{ComponentName}}Stories.Component} />
 
 # {{ComponentName}}
 

@kiva/kv-components/src/vue/stories/KvAccordionItem.stories.js

@@ -1,7 +1,7 @@
 import KvAccordionItem from '../KvAccordionItem.vue';
 
 export default {
-	title: 'KvAccordionItem',
+	title: 'Interface Elements/KvAccordionItem',
 	component: KvAccordionItem,
 };
 

@kiva/kv-components/src/vue/stories/KvActivityRow.stories.js

@@ -1,7 +1,7 @@
 import KvActivityRow from '../KvActivityRow.vue';
 
 export default {
-	title: 'KvActivityRow',
+	title: 'Interface Elements/KvActivityRow',
 	component: KvActivityRow,
 };
 

@kiva/kv-components/src/vue/stories/KvAtbModal.stories.js

@@ -1,7 +1,7 @@
 import KvAtbModal from '../KvAtbModal.vue';
 
 export default {
-	title: 'KvAtbModal',
+	title: 'Checkout/KvAtbModal',
 	component: KvAtbModal,
 	argTypes: {
 		modalVisible: false,

@kiva/kv-components/src/vue/stories/KvAvatarBubble.stories.js

@@ -2,7 +2,7 @@ import KvAvatarBubble from '../KvAvatarBubble.vue';
 import KvButton from '../KvButton.vue';
 
 export default {
-	title: 'KvAvatarBubble',
+	title: 'Interface Elements/KvAvatarBubble',
 	component: KvAvatarBubble,
 };
 

@kiva/kv-components/src/vue/stories/KvBorrowerImage.stories.js

@@ -1,7 +1,7 @@
 import KvBorrowerImage from '../KvBorrowerImage.vue';
 
 export default {
-	title: 'KvBorrowerImage',
+	title: 'Loan Display/KvBorrowerImage',
 	component: KvBorrowerImage,
 };
 

@kiva/kv-components/src/vue/stories/KvButton.stories.js

@@ -1,7 +1,7 @@
 import KvButton from '../KvButton.vue';
 
 export default {
-	title: 'KvButton',
+	title: 'Forms/KvButton',
 	component: KvButton,
 	argTypes: {
 		variant: {

@kiva/kv-components/src/vue/stories/KvCardFrame.stories.js

@@ -3,7 +3,7 @@ import KvButton from '../KvButton.vue';
 import KvCardFrameDocsMdx from './KvCardFrameDocs.mdx';
 
 export default {
-	title: 'KvCardFrame',
+	title: 'Interface Elements/KvCardFrame',
 	component: KvCardFrame,
 	parameters: {
 		docs: {

@kiva/kv-components/src/vue/stories/KvCardFrameDocs.mdx

@@ -1,7 +1,7 @@
 import { Canvas, Meta, Story, Controls } from '@storybook/addon-docs/blocks';
 import * as KvCardFrameStories from './KvCardFrame.stories.js';
 
-<Meta title="KvCardFrame" component={KvCardFrameStories.Component} />
+<Meta title="Interface Elements/KvCardFrame" component={KvCardFrameStories.Component} />
 
 # KvCardFrame
 

@kiva/kv-components/src/vue/stories/KvCarousel.stories.js

@@ -64,7 +64,7 @@ const defaultCarouselSlides = `
 `;
 
 export default {
-	title: 'KvCarousel',
+	title: 'Components/KvCarousel',
 	component: KvCarousel,
 };
 

@kiva/kv-components/src/vue/stories/KvCartModal.stories.js

@@ -2,7 +2,7 @@ import KvCartModal from '../KvCartModal.vue';
 import KvButton from '../KvButton.vue';
 
 export default {
-	title: 'KvCartModal',
+	title: 'Checkout/KvCartModal',
 	component: KvCartModal,
 	parameters: {
 		layout: 'fullscreen',

@kiva/kv-components/src/vue/stories/KvCartPill.stories.js

@@ -1,7 +1,7 @@
 import KvCartPill from '../KvCartPill.vue';
 
 export default {
-	title: 'KvCartPill',
+	title: 'Checkout/KvCartPill',
 	component: KvCartPill,
 	parameters: {
 		layout: 'fullscreen',

@kiva/kv-components/src/vue/stories/KvCheckoutReceipt.stories.js

@@ -15,7 +15,7 @@ const mockedAPIResponse = {
 	},
 };
 export default {
-	title: 'Components/KvCheckoutReceipt',
+	title: 'Checkout/KvCheckoutReceipt',
 	component: KvCheckoutReceipt,
 };
 

@kiva/kv-components/src/vue/stories/KvChip.stories.js

@@ -1,7 +1,7 @@
 import KvChip from '../KvChip.vue';
 
 export default {
-	title: 'KvChip',
+	title: 'Interface Elements/KvChip',
 	component: KvChip,
 };
 

@kiva/kv-components/src/vue/stories/KvClassicLoanCard.stories.js

@@ -1,7 +1,7 @@
 import KvClassicLoanCard from '../KvClassicLoanCard.vue';
 
 export default {
-	title: 'KvClassicLoanCard',
+	title: 'Loan Display/KvClassicLoanCard',
 	component: KvClassicLoanCard,
 };
 

@kiva/kv-components/src/vue/stories/KvCommentsAdd.stories.js

@@ -1,7 +1,7 @@
 import KvCommentsAdd from '../KvCommentsAdd.vue';
 
 export default {
-	title: 'KvCommentsAdd',
+	title: 'Comments/KvCommentsAdd',
 	component: KvCommentsAdd,
 };
 

@kiva/kv-components/src/vue/stories/KvCommentsContainer.stories.js

@@ -2,7 +2,7 @@ import { publicLenderId, comments } from '#fixtures/mockCommentsData';
 import KvCommentsContainer from '../KvCommentsContainer.vue';
 
 export default {
-	title: 'KvCommentsContainer',
+	title: 'Comments/KvCommentsContainer',
 	component: KvCommentsContainer,
 };
 

@kiva/kv-components/src/vue/stories/KvCommentsHeartButton.stories.js

@@ -1,7 +1,7 @@
 import KvCommentsHeartButton from '../KvCommentsHeartButton.vue';
 
 export default {
-	title: 'KvCommentsHeartButton',
+	title: 'Comments/KvCommentsHeartButton',
 	component: KvCommentsHeartButton,
 };
 

@kiva/kv-components/src/vue/stories/KvCommentsList.stories.js

@@ -2,7 +2,7 @@ import { publicLenderId, comments } from '#fixtures/mockCommentsData';
 import KvCommentsList from '../KvCommentsList.vue';
 
 export default {
-	title: 'KvCommentsList',
+	title: 'Comments/KvCommentsList',
 	component: KvCommentsList,
 };
 const TEST_USER_NAME = 'Jess';

@kiva/kv-components/src/vue/stories/KvCommentsListItem.stories.js

@@ -2,7 +2,7 @@ import { publicLenderId, comments } from '#fixtures/mockCommentsData';
 import KvCommentsListItem from '../KvCommentsListItem.vue';
 
 export default {
-	title: 'KvCommentsListItem',
+	title: 'Comments/KvCommentsListItem',
 	component: KvCommentsListItem,
 };
 

@kiva/kv-components/src/vue/stories/KvCommentsReplyButton.stories.js

@@ -1,7 +1,7 @@
 import KvCommentsReplyButton from '../KvCommentsReplyButton.vue';
 
 export default {
-	title: 'KvCommentsReplyButton',
+	title: 'Comments/KvCommentsReplyButton',
 	component: KvCommentsReplyButton,
 };
 

@kiva/kv-components/src/vue/stories/KvCompactLoanCard.stories.js

@@ -1,7 +1,7 @@
 import KvCompactLoanCard from '../KvCompactLoanCard.vue';
 
 export default {
-	title: 'KvCompactLoanCard',
+	title: 'Loan Display/KvCompactLoanCard',
 	component: KvCompactLoanCard,
 };
 

@kiva/kv-components/src/vue/stories/KvContentfulImg.stories.js

@@ -1,7 +1,7 @@
 import KvContentfulImg from '../KvContentfulImg.vue';
 
 export default {
-	title: 'KvContentfulImg',
+	title: 'Interface Elements/KvContentfulImg',
 	component: KvContentfulImg,
 	args: {
 		contentfulSrc: 'https://images.ctfassets.net/j0p9a6ql0rn7/35lkLRfbLxzFPlDVgA4aKI/c435630d811f9ad35ddfc88eaea22b08/Blog-import-1082518_us_shawn_16.jpg',

@kiva/kv-components/src/vue/stories/KvCountdownTimer.stories.js

@@ -2,7 +2,7 @@ import { add } from 'date-fns';
 import KvCountdownTimer from '../KvCountdownTimer.vue';
 
 export default {
-	title: 'KvCountdownTimer',
+	title: 'Interface Elements/KvCountdownTimer',
 	component: KvCountdownTimer,
 };