# Storybook Categories Structure

This document outlines the new hierarchical category structure for organizing stories in Storybook.

## Category Hierarchy

We'll use a three-level hierarchy to organize our stories:

1. **Top-level category**: Represents the broad functional area or domain
2. **Sub-category**: Represents the component type or purpose
3. **Component name**: The specific component being documented

## Top-level Categories

- **UI**: Basic UI components that can be used across the application
  - Buttons
  - Inputs
  - Feedback
  - Layout
  - Navigation
  - Display

- **Chatbot**: Components specific to the chatbot functionality
  - Conversation
  - Messages
  - Input
  - Actions
  - Feedback

- **App**: Full application components or pages
  - Pages
  - Layouts
  - Features

- **Design**: Design system components and tokens
  - Colors
  - Typography
  - Spacing
  - Icons

## Naming Convention

Story titles should follow this pattern:
```
{Top-level}/{Sub-category}/{ComponentName}
```

For example:
- `UI/Buttons/MainButton`
- `UI/Feedback/AlertBox`
- `Chatbot/Conversation/ConversationItem`
- `Chatbot/Messages/MessageBox`
- `Design/Colors/ColorDisplay`

## Examples of New Category Structure

| Current Title | New Title |
|---------------|-----------|
| Components/MainButton | UI/Buttons/MainButton |
| Components/AlertBox | UI/Feedback/AlertBox |
| Chatbot/ConversationItem | Chatbot/Conversation/ConversationItem |
| Chatbot/ExportChatButton | Chatbot/Actions/ExportChatButton |
| Components/MessageBox | Chatbot/Messages/MessageBox |
| Components/PromptInput | Chatbot/Input/PromptInput |
| Navigation/DsNavbar | UI/Navigation/Navbar |
| Components/Logo | Design/Brand/Logo |
| Components/ColorDisplay | Design/Colors/ColorDisplay |

## Implementation

To change a component's category, update the `title` property in its story file:

```typescript
const meta: Meta<MyComponent> = {
  title: 'UI/Buttons/MyComponent',
  component: MyComponent,
  // ...
};
```

This new structure will make it easier to:
1. Find related components
2. Understand the purpose and context of each component
3. Maintain a consistent organization as the component library grows
