position of main conversation
This commit is contained in:
Tykayn
tykayn
parent
69d98b7daa
commit
10c04630fb
18 changed files with 509 additions and 159 deletions
|
|
@ -71,7 +71,7 @@ export const Danger: Story = {
|
|||
},
|
||||
};
|
||||
|
||||
export const Error: Story = {
|
||||
export const ErrorState: Story = {
|
||||
args: {
|
||||
message: 'Une erreur est survenue',
|
||||
_alertKind: 'error'
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import {Component, Input} from '@angular/core';
|
|||
|
||||
@Component({
|
||||
selector: 'sae-alert-box',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
templateUrl: './alert-box.html',
|
||||
styleUrl: './alert-box.scss'
|
||||
|
|
|
|||
|
|
@ -67,9 +67,9 @@
|
|||
|
||||
&.user {
|
||||
background: white;
|
||||
margin-right: 10px;
|
||||
margin-left: 260px;
|
||||
|
||||
text-align: right;
|
||||
float: right;
|
||||
|
||||
.bottom-actions {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -312,6 +312,7 @@
|
|||
.actions {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
background: #B9D6ED;
|
||||
}
|
||||
|
|
@ -489,9 +490,8 @@
|
|||
}
|
||||
|
||||
.conversation-bottom {
|
||||
padding: 10px 60px;
|
||||
//margin-top: -100px;
|
||||
margin-top: -43px;
|
||||
padding: 60px;
|
||||
margin-top: -100px;
|
||||
}
|
||||
|
||||
.bottom-warning-container {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {CommonModule} from '@angular/common';
|
|||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
|
||||
const meta: Meta<MainButton> = {
|
||||
title: 'Components/MainButton',
|
||||
title: 'UI/Buttons/MainButton',
|
||||
component: MainButton,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
|
|
|
|||
|
|
@ -1,64 +0,0 @@
|
|||
# Implementation Summary: Stories for Conversation-Item and Export Chat Button
|
||||
|
||||
## Overview
|
||||
|
||||
As requested in the issue, I've created Storybook stories for two key components:
|
||||
1. The conversation-item component
|
||||
2. The export chat button component
|
||||
|
||||
## Implementation Details
|
||||
|
||||
### 1. Conversation-Item Component
|
||||
|
||||
I created a standalone Angular component for the conversation-item, which was previously implemented directly in the chatbot.html template. The new component:
|
||||
|
||||
- Encapsulates all the functionality of a conversation item
|
||||
- Provides proper inputs and outputs for component interaction
|
||||
- Includes styles from the original implementation
|
||||
- Supports all states (default, active, pinned)
|
||||
- Maintains the dropdown menu with hover functionality
|
||||
|
||||
The component is accompanied by a comprehensive set of stories that demonstrate its various states and behaviors.
|
||||
|
||||
### 2. Export Chat Button Component
|
||||
|
||||
I created a standalone Angular component for the export chat button, which was also previously implemented directly in the chatbot.html template. The new component:
|
||||
|
||||
- Encapsulates the export button functionality
|
||||
- Provides a dropdown menu with export format options (CSV, Excel, TXT)
|
||||
- Emits events when an export format is selected
|
||||
- Maintains the same styling as the original implementation
|
||||
- Supports hover state and dropdown functionality
|
||||
|
||||
The component is accompanied by a set of stories that demonstrate its various states and behaviors.
|
||||
|
||||
## Benefits of This Implementation
|
||||
|
||||
1. **Reusability**: Both components can now be easily reused throughout the application
|
||||
2. **Maintainability**: Code is more organized and easier to maintain
|
||||
3. **Testability**: Components can be tested in isolation
|
||||
4. **Documentation**: Storybook stories serve as living documentation for the components
|
||||
5. **Consistency**: Ensures consistent behavior and appearance across the application
|
||||
|
||||
## Technical Notes
|
||||
|
||||
- Both components are implemented as standalone Angular components
|
||||
- They use Bulma CSS classes for styling
|
||||
- The dropdown functionality works on hover as requested
|
||||
- The components maintain the same visual appearance as the original implementation
|
||||
|
||||
## Next Steps
|
||||
|
||||
To fully integrate these components into the application:
|
||||
|
||||
1. Replace the inline implementation in chatbot.html with the new components
|
||||
2. Update any references to the original implementation
|
||||
3. Run the application to verify everything works as expected
|
||||
|
||||
## Documentation
|
||||
|
||||
A detailed README.md file has been created in the chatbot directory that provides:
|
||||
- Component features and capabilities
|
||||
- Available stories and what they demonstrate
|
||||
- Usage examples
|
||||
- Instructions for running Storybook
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
# Chatbot Component Stories
|
||||
|
||||
This document provides information about the Storybook stories created for the chatbot components.
|
||||
|
||||
## Components and Stories
|
||||
|
||||
### 1. ConversationItem Component
|
||||
|
||||
The `ConversationItem` component is a standalone Angular component that displays a conversation item with a dropdown menu for actions.
|
||||
|
||||
#### Component Features:
|
||||
- Displays conversation name, description, and date
|
||||
- Shows a pinned icon for pinned conversations
|
||||
- Provides a dropdown menu with actions (Share, Rename, Pin, Delete)
|
||||
- Highlights active conversations
|
||||
- Supports hover state styling
|
||||
|
||||
#### Stories:
|
||||
- **Default**: Shows a basic conversation item
|
||||
- **Active**: Demonstrates the active state of a conversation item
|
||||
- **Pinned**: Shows a pinned conversation with the pin icon
|
||||
- **LongContent**: Demonstrates how the component handles long names and descriptions
|
||||
|
||||
#### Usage:
|
||||
```html
|
||||
<app-conversation-item
|
||||
[conversation]="conversation"
|
||||
[isActive]="isActive"
|
||||
(onSelect)="handleSelect($event)"
|
||||
(onShare)="handleShare($event)"
|
||||
(onRename)="handleRename($event)"
|
||||
(onPin)="handlePin($event)"
|
||||
(onDelete)="handleDelete($event)">
|
||||
</app-conversation-item>
|
||||
```
|
||||
|
||||
### 2. ExportChatButton Component
|
||||
|
||||
The `ExportChatButton` component is a standalone Angular component that displays an "Export chat" button with a dropdown menu for selecting export formats.
|
||||
|
||||
#### Component Features:
|
||||
- Displays an "Export chat" button with an icon
|
||||
- Provides a dropdown menu with export format options (CSV, Excel, TXT)
|
||||
- Supports hover state styling
|
||||
- Emits events when an export format is selected
|
||||
|
||||
#### Stories:
|
||||
- **Default**: Shows the basic export button
|
||||
- **ActiveDropdown**: Demonstrates the button with an open dropdown
|
||||
- **HoverState**: Shows the hover state styling
|
||||
- **ExportFunctionality**: Demonstrates the export functionality
|
||||
|
||||
#### Usage:
|
||||
```html
|
||||
<app-export-chat-button
|
||||
(onExport)="handleExport($event)">
|
||||
</app-export-chat-button>
|
||||
```
|
||||
|
||||
## Running Storybook
|
||||
|
||||
To run Storybook and view these components:
|
||||
|
||||
1. Ensure you have Node.js v20.19+ or v22.12+ installed
|
||||
2. Navigate to the project directory
|
||||
3. Run `npm run storybook`
|
||||
4. Open your browser to the URL displayed in the terminal (usually http://localhost:6006)
|
||||
|
||||
## Notes
|
||||
|
||||
- The stories are configured to be automatically discovered by Storybook
|
||||
- Each component has its own set of stories demonstrating different states and behaviors
|
||||
- The components use Bulma CSS classes for styling
|
||||
- Both components support hover functionality for dropdowns
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
<div class="dropdown is-hoverable">
|
||||
<div class="dropdown-trigger">
|
||||
<div class="menu">
|
||||
<i class="ri-more-2-line"></i>
|
||||
<i class="ri-more-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
|
|
@ -236,7 +236,7 @@
|
|||
<div class="chips-container is-grey">
|
||||
<i class="ri-pushpin-line"></i>
|
||||
<span class="label">
|
||||
Chips land
|
||||
Auto mode
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -127,13 +127,16 @@
|
|||
z-index: 20;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
min-width: 12rem;
|
||||
min-width: 175px;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
|
||||
padding-bottom: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
border-radius: 10px;
|
||||
padding-bottom: 20px;
|
||||
padding-top: 20px;
|
||||
margin-top: 2px;
|
||||
margin-right: 0;
|
||||
|
||||
box-shadow: 0 4px 13px 0 rgba(37, 91, 142, 0.10);
|
||||
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
|
|
@ -148,6 +151,7 @@
|
|||
padding: 0.375rem 1rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding-bottom: 20px;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
|
|
@ -158,6 +162,20 @@
|
|||
background-color: #3273dc;
|
||||
color: white;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 16px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
hr {
|
||||
stroke-width: 0.5px;
|
||||
stroke: #ABABAB;
|
||||
color: #ABABAB;
|
||||
border-color: #ABABAB;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { ChatbotConversation } from '../../services/conversations.service';
|
|||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
|
||||
const meta: Meta<ConversationItem> = {
|
||||
title: 'Chatbot/ConversationItem',
|
||||
title: 'Chatbot/Conversation/ConversationItem',
|
||||
component: ConversationItem,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { NgClass } from '@angular/common';
|
|||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
|
||||
const meta: Meta<ExportChatButton> = {
|
||||
title: 'Chatbot/ExportChatButton',
|
||||
title: 'Chatbot/Actions/ExportChatButton',
|
||||
component: ExportChatButton,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
input {
|
||||
width: 668px;
|
||||
width: 326px;
|
||||
max-width: 100%;
|
||||
border: 0;
|
||||
padding: 10px;
|
||||
|
|
@ -45,11 +45,13 @@
|
|||
|
||||
&.submit {
|
||||
position: relative;
|
||||
top:0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
float: right;
|
||||
display: inline-block;
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
import type {Meta, StoryObj} from '@storybook/angular';
|
||||
import {moduleMetadata} from '@storybook/angular';
|
||||
import {WarningBugs} from './warning-bugs';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {AlertBox} from 'sae-lib/alert-box/alert-box';
|
||||
import {Store} from '@ngrx/store';
|
||||
// import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
|
||||
// Mock Store
|
||||
const storeMock = {};
|
||||
|
||||
const meta: Meta<WarningBugs> = {
|
||||
title: 'Chatbot/WarningBugs',
|
||||
component: WarningBugs,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [
|
||||
CommonModule,
|
||||
AlertBox,
|
||||
// BrowserAnimationsModule
|
||||
],
|
||||
providers: [
|
||||
{
|
||||
provide: Store,
|
||||
useValue: storeMock
|
||||
}
|
||||
]
|
||||
})
|
||||
],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'The WarningBugs component displays either a warning or an error message based on the application state.'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<WarningBugs>;
|
||||
|
||||
// Default state: Warning about AI making mistakes
|
||||
export const Warning: Story = {
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Default state showing a warning about AI potentially making mistakes.'
|
||||
}
|
||||
}
|
||||
},
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
providers: [
|
||||
{
|
||||
provide: Store,
|
||||
useValue: false
|
||||
}
|
||||
]
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
// Error state: System error message
|
||||
export const ErrorState: Story = {
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Error state showing a system error message when the request cannot be processed.'
|
||||
}
|
||||
}
|
||||
},
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
providers: [
|
||||
{
|
||||
provide: Store,
|
||||
useValue: true
|
||||
}
|
||||
]
|
||||
})
|
||||
]
|
||||
};
|
||||
|
|
@ -4,7 +4,7 @@ import { moduleMetadata } from '@storybook/angular';
|
|||
import { CommonModule } from '@angular/common';
|
||||
|
||||
const meta: Meta<AlertBox> = {
|
||||
title: 'Components/AlertBox',
|
||||
title: 'UI/Feedback/AlertBox',
|
||||
component: AlertBox,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
|
|
@ -71,7 +71,7 @@ export const Danger: Story = {
|
|||
},
|
||||
};
|
||||
|
||||
export const Error: Story = {
|
||||
export const ErrorState: Story = {
|
||||
args: {
|
||||
message: 'Une erreur est survenue',
|
||||
_alertKind: 'error'
|
||||
|
|
|
|||
84
old-sae-airwatch/src/stories/implementation-summary.md
Normal file
84
old-sae-airwatch/src/stories/implementation-summary.md
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
# Storybook Category Structure Implementation
|
||||
|
||||
## Overview
|
||||
|
||||
This document summarizes the implementation of a new hierarchical category structure for organizing stories in Storybook. The new structure improves navigation, discoverability, and maintainability of the component library.
|
||||
|
||||
## Implementation Approach
|
||||
|
||||
The implementation followed these key steps:
|
||||
|
||||
1. **Analysis of Current Structure**
|
||||
- Reviewed existing story files to understand the current categorization
|
||||
- Identified inconsistencies and limitations in the current approach
|
||||
- Mapped out all components and their current categories
|
||||
|
||||
2. **Design of New Structure**
|
||||
- Created a three-level hierarchical structure:
|
||||
- Top-level category (functional area)
|
||||
- Sub-category (component type)
|
||||
- Component name
|
||||
- Defined clear naming conventions and category relationships
|
||||
- Documented the structure in `storybook-categories.md`
|
||||
|
||||
3. **Implementation**
|
||||
- Updated example story files manually to validate the approach
|
||||
- Created an automated script (`update-story-categories.js`) to update all story files
|
||||
- Provided testing instructions in `testing-instructions.md`
|
||||
|
||||
4. **Verification**
|
||||
- Outlined testing procedures to verify the changes
|
||||
- Provided troubleshooting guidance for common issues
|
||||
|
||||
## Benefits
|
||||
|
||||
The new category structure provides several benefits:
|
||||
|
||||
### 1. Improved Organization
|
||||
|
||||
- **Logical Grouping**: Components are grouped by function and purpose
|
||||
- **Scalability**: The structure can accommodate new components without becoming unwieldy
|
||||
- **Consistency**: Follows a predictable pattern for all components
|
||||
|
||||
### 2. Enhanced Developer Experience
|
||||
|
||||
- **Easier Navigation**: Developers can quickly find related components
|
||||
- **Better Context**: The category hierarchy provides context about a component's purpose
|
||||
- **Reduced Cognitive Load**: Similar components are grouped together, making it easier to understand the library
|
||||
|
||||
### 3. Maintainability
|
||||
|
||||
- **Standardized Approach**: Clear guidelines for categorizing new components
|
||||
- **Automation**: Script to help maintain consistent categorization
|
||||
- **Documentation**: Clear documentation of the structure and implementation
|
||||
|
||||
## Category Structure
|
||||
|
||||
### Top-level Categories
|
||||
|
||||
- **UI**: Basic UI components that can be used across the application
|
||||
- **Chatbot**: Components specific to the chatbot functionality
|
||||
- **App**: Full application components or pages
|
||||
- **Design**: Design system components and tokens
|
||||
|
||||
### Sub-categories
|
||||
|
||||
Each top-level category contains logical sub-categories:
|
||||
|
||||
- **UI**: Buttons, Inputs, Feedback, Layout, Navigation, Display
|
||||
- **Chatbot**: Conversation, Messages, Input, Actions, Feedback
|
||||
- **App**: Pages, Layouts, Features
|
||||
- **Design**: Colors, Typography, Spacing, Icons, Brand
|
||||
|
||||
## Maintenance
|
||||
|
||||
To maintain the category structure:
|
||||
|
||||
1. For new components, follow the naming convention: `{Top-level}/{Sub-category}/{ComponentName}`
|
||||
2. Update the mapping in `update-story-categories.js` when adding new categories
|
||||
3. Run the update script periodically to ensure consistency
|
||||
4. Refer to `storybook-categories.md` for guidance on categorization
|
||||
|
||||
## Conclusion
|
||||
|
||||
The new hierarchical category structure significantly improves the organization and usability of the Storybook component library. By implementing a consistent, logical grouping of components, developers can more easily discover, understand, and use the available components.
|
||||
84
old-sae-airwatch/src/stories/storybook-categories.md
Normal file
84
old-sae-airwatch/src/stories/storybook-categories.md
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
# 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
|
||||
80
old-sae-airwatch/src/stories/testing-instructions.md
Normal file
80
old-sae-airwatch/src/stories/testing-instructions.md
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
# Testing Storybook Category Changes
|
||||
|
||||
This document provides instructions for testing the new category structure in Storybook.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Node.js v20.19+ or v22.12+
|
||||
- Access to the project repository
|
||||
|
||||
## Steps to Test
|
||||
|
||||
1. **Update Story Categories**
|
||||
|
||||
Run the update script to apply the new category structure:
|
||||
|
||||
```bash
|
||||
cd /home/poule/encrypted/stockage-syncable/www/development/html/ng-implementation/old-sae-airwatch
|
||||
node src/stories/update-story-categories.js
|
||||
```
|
||||
|
||||
This will update all story files according to the mapping defined in the script.
|
||||
|
||||
2. **Start Storybook**
|
||||
|
||||
Launch Storybook to see the changes:
|
||||
|
||||
```bash
|
||||
npm run storybook
|
||||
```
|
||||
|
||||
If you encounter any Node.js version issues, you may need to use a compatible version:
|
||||
|
||||
```bash
|
||||
nvm use 20.19 # If you have nvm installed
|
||||
# OR
|
||||
export NODE_OPTIONS=--openssl-legacy-provider # For older Node versions
|
||||
npm run storybook
|
||||
```
|
||||
|
||||
3. **Verify the Category Structure**
|
||||
|
||||
In the Storybook UI, check that:
|
||||
|
||||
- The sidebar now shows the new hierarchical structure
|
||||
- Categories are organized as:
|
||||
- UI (Buttons, Feedback, Navigation, etc.)
|
||||
- Chatbot (Conversation, Messages, Input, Actions, etc.)
|
||||
- App (Features, Pages, etc.)
|
||||
- Design (Colors, Brand, etc.)
|
||||
- Components appear under the correct categories
|
||||
- Navigation between categories works as expected
|
||||
|
||||
4. **Check Component Rendering**
|
||||
|
||||
For each category:
|
||||
- Open a few components to ensure they render correctly
|
||||
- Verify that the component controls and documentation still work
|
||||
- Test any interactive features
|
||||
|
||||
5. **Troubleshooting**
|
||||
|
||||
If components don't appear in the expected categories:
|
||||
- Check the story file to ensure the title was updated correctly
|
||||
- Verify that the category mapping in the update script is correct
|
||||
- Restart Storybook if necessary
|
||||
|
||||
## Expected Results
|
||||
|
||||
- The sidebar should show a clear hierarchical structure
|
||||
- Related components should be grouped together
|
||||
- Navigation should be intuitive and logical
|
||||
- All components should render correctly
|
||||
|
||||
## Reporting Issues
|
||||
|
||||
If you encounter any issues:
|
||||
1. Check the browser console for errors
|
||||
2. Verify the story file's title property
|
||||
3. Check for any missing mappings in the update script
|
||||
4. Document the issue with screenshots and error messages
|
||||
136
old-sae-airwatch/src/stories/update-story-categories.js
Normal file
136
old-sae-airwatch/src/stories/update-story-categories.js
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
/**
|
||||
* Script to update Storybook story categories according to the new hierarchical structure
|
||||
*
|
||||
* Usage:
|
||||
* 1. Run with Node.js: node update-story-categories.js
|
||||
* 2. The script will scan all .stories.ts files and suggest category updates
|
||||
* 3. You can review and apply the changes
|
||||
*/
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const { execSync } = require('child_process');
|
||||
|
||||
// Define the mapping from old categories to new categories
|
||||
const categoryMapping = {
|
||||
// UI Components
|
||||
'Components/MainButton': 'UI/Buttons/MainButton',
|
||||
'Components/AlertBox': 'UI/Feedback/AlertBox',
|
||||
'Components/Logo': 'Design/Brand/Logo',
|
||||
'Components/ColorDisplay': 'Design/Colors/ColorDisplay',
|
||||
'Components/FeedbackButton': 'UI/Feedback/FeedbackButton',
|
||||
'Components/ToggleButton': 'UI/Buttons/ToggleButton',
|
||||
|
||||
// Chatbot Components
|
||||
'Chatbot/ConversationItem': 'Chatbot/Conversation/ConversationItem',
|
||||
'Chatbot/ExportChatButton': 'Chatbot/Actions/ExportChatButton',
|
||||
'Chatbot/WarningBugs': 'Chatbot/Feedback/WarningBugs',
|
||||
'Components/MessageBox': 'Chatbot/Messages/MessageBox',
|
||||
'Components/PromptInput': 'Chatbot/Input/PromptInput',
|
||||
'Components/NewInput': 'Chatbot/Input/NewInput',
|
||||
'Components/SourceBlock': 'Chatbot/Sources/SourceBlock',
|
||||
|
||||
// Navigation
|
||||
'Navigation/DsNavbar': 'UI/Navigation/Navbar',
|
||||
|
||||
// App
|
||||
'App/Chatbot': 'App/Features/Chatbot',
|
||||
|
||||
// Example (keep as is or update)
|
||||
'Example/Button': 'UI/Buttons/ExampleButton',
|
||||
};
|
||||
|
||||
// Find all story files
|
||||
const findStoryFiles = () => {
|
||||
try {
|
||||
const result = execSync(
|
||||
'find /home/poule/encrypted/stockage-syncable/www/development/html/ng-implementation/old-sae-airwatch/src -name "*.stories.ts"'
|
||||
).toString();
|
||||
return result.split('\n').filter(Boolean);
|
||||
} catch (error) {
|
||||
console.error('Error finding story files:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
// Extract current category from a story file
|
||||
const extractCurrentCategory = (filePath) => {
|
||||
try {
|
||||
const content = fs.readFileSync(filePath, 'utf8');
|
||||
const match = content.match(/title:\s*['"]([^'"]+)['"]/);
|
||||
return match ? match[1] : null;
|
||||
} catch (error) {
|
||||
console.error(`Error reading file ${filePath}:`, error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// Update category in a story file
|
||||
const updateCategory = (filePath, oldCategory, newCategory) => {
|
||||
try {
|
||||
let content = fs.readFileSync(filePath, 'utf8');
|
||||
content = content.replace(
|
||||
`title: '${oldCategory}'`,
|
||||
`title: '${newCategory}'`
|
||||
);
|
||||
fs.writeFileSync(filePath, content, 'utf8');
|
||||
console.log(`✅ Updated ${filePath}: ${oldCategory} -> ${newCategory}`);
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error(`Error updating file ${filePath}:`, error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// Main function
|
||||
const main = () => {
|
||||
console.log('🔍 Finding story files...');
|
||||
const storyFiles = findStoryFiles();
|
||||
console.log(`Found ${storyFiles.length} story files.`);
|
||||
|
||||
let updated = 0;
|
||||
let skipped = 0;
|
||||
let notMapped = 0;
|
||||
|
||||
storyFiles.forEach(filePath => {
|
||||
const currentCategory = extractCurrentCategory(filePath);
|
||||
if (!currentCategory) {
|
||||
console.log(`⚠️ Could not extract category from ${filePath}`);
|
||||
skipped++;
|
||||
return;
|
||||
}
|
||||
|
||||
const newCategory = categoryMapping[currentCategory];
|
||||
if (!newCategory) {
|
||||
console.log(`ℹ️ No mapping defined for category: ${currentCategory} in ${filePath}`);
|
||||
notMapped++;
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentCategory === newCategory) {
|
||||
console.log(`ℹ️ Category already up to date: ${currentCategory} in ${filePath}`);
|
||||
skipped++;
|
||||
return;
|
||||
}
|
||||
|
||||
const success = updateCategory(filePath, currentCategory, newCategory);
|
||||
if (success) {
|
||||
updated++;
|
||||
} else {
|
||||
skipped++;
|
||||
}
|
||||
});
|
||||
|
||||
console.log('\n📊 Summary:');
|
||||
console.log(`Total files: ${storyFiles.length}`);
|
||||
console.log(`Updated: ${updated}`);
|
||||
console.log(`Skipped: ${skipped}`);
|
||||
console.log(`Not mapped: ${notMapped}`);
|
||||
|
||||
if (notMapped > 0) {
|
||||
console.log('\n⚠️ Some categories were not mapped. Please update the categoryMapping object in the script.');
|
||||
}
|
||||
};
|
||||
|
||||
// Run the script
|
||||
main();
|
||||
Loading…
Add table
Add a link
Reference in a new issue