@kiva/kv-components 8.5.3 → 8.5.5

package/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
 

package/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

package/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

package/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:

package/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

package/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:

package/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" ... />`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "8.5.3",
+  "version": "8.5.5",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -34,7 +34,7 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@kiva/kv-tokens": "^3.7.1",
+    "@kiva/kv-tokens": "^3.7.2",
     "@kiva/vite-plugin-vue-lib-css": "^2.0.0",
     "@laynezh/vite-plugin-lib-assets": "^0.6.1",
     "@mdi/js": "^7.4.47",
@@ -125,5 +125,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "cc1dbecbf3b570c2ca5ed6e6bdd7f305c65979a6"
+  "gitHead": "00f1e4db46e433ceadce0bb2002f721b1453be58"
 }