update order of storybook categories
This commit is contained in:
tykayn
parent
43c4326afd
commit
808b4b8f9e
19 changed files with 235 additions and 626 deletions
49
airwatch/.storybook/src/assets/safran_logo.svg
Normal file
49
airwatch/.storybook/src/assets/safran_logo.svg
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_181_3230" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="14" width="20" height="7">
|
||||
<path d="M18.9093 14.9434C16.8047 17.7914 13.4049 19.6474 9.56798 19.6474C5.73108 19.6474 2.33128 17.7914 0.226653 14.9434H0C1.6999 18.4794 5.34253 20.9114 9.56798 20.9114C13.7934 20.9114 17.4361 18.4634 19.136 14.9434H18.9093Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_181_3230)">
|
||||
<path d="M19.136 14.9434H0V20.9114H19.136V14.9434Z" fill="url(#paint0_radial_181_3230)"/>
|
||||
</g>
|
||||
<mask id="mask1_181_3230" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="2" width="19" height="17">
|
||||
<path d="M2.81698 4.06464C1.5542 4.99264 1.05233 5.93664 0.874244 6.81664C-0.0161772 11.1206 8.59663 12.8326 11.8993 13.9046C13.7125 14.4806 13.9553 15.2646 13.9392 15.8886C13.9068 17.3286 11.8507 18.6246 11.8345 18.6246C13.5182 18.5926 15.7848 17.6166 17.1447 16.0966C17.6627 15.5206 18.116 14.7526 18.2294 14.1926C18.7312 11.6166 16.3028 10.3046 13.4373 9.31264C11.2031 8.54464 9.35753 8.01664 7.78715 7.53664C5.29397 6.78464 4.87304 6.06464 4.88923 5.28064C4.90542 4.36864 5.89298 3.21664 6.99387 2.54464C6.97768 2.51264 4.90542 2.51264 2.81698 4.06464Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask1_181_3230)">
|
||||
<path d="M-7.01001 14.6885L14.1658 26.5605L25.7251 6.43255L4.54928 -5.43945L-7.01001 14.6885Z" fill="url(#paint1_linear_181_3230)"/>
|
||||
</g>
|
||||
<mask id="mask2_181_3230" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="6">
|
||||
<path d="M0 5.96808H0.226653C2.33128 3.12008 5.73108 1.26408 9.56798 1.26408C13.4049 1.26408 16.8047 3.12008 18.9093 5.96808H19.136C17.4361 2.43208 13.7934 7.79692e-05 9.56798 7.79692e-05C5.35872 -0.015922 1.6999 2.43208 0 5.96808Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask2_181_3230)">
|
||||
<path d="M-0.728516 0.0796874L0.291421 8.27169L19.8807 5.87169L18.8446 -2.32031L-0.728516 0.0796874Z" fill="url(#paint2_linear_181_3230)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient id="paint0_radial_181_3230" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.57148 17.9241) scale(10.698 10.5728)">
|
||||
<stop stop-color="#84CFED"/>
|
||||
<stop offset="0.22" stop-color="#59A7D5"/>
|
||||
<stop offset="0.45" stop-color="#3284C0"/>
|
||||
<stop offset="0.67" stop-color="#176BB1"/>
|
||||
<stop offset="0.86" stop-color="#065BA7"/>
|
||||
<stop offset="1" stop-color="#0056A4"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="paint1_linear_181_3230" x1="3.8416" y1="7.5054" x2="18.3229" y2="15.8158" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#57BCEC"/>
|
||||
<stop offset="0.08" stop-color="#4CB1E3"/>
|
||||
<stop offset="0.34" stop-color="#2B8FC9"/>
|
||||
<stop offset="0.59" stop-color="#1376B6"/>
|
||||
<stop offset="0.81" stop-color="#0567AB"/>
|
||||
<stop offset="1" stop-color="#0062A7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_181_3230" x1="9.12259" y1="-0.191204" x2="11.6743" y2="20.5973" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#81CDEC"/>
|
||||
<stop offset="0.08" stop-color="#5FADD8"/>
|
||||
<stop offset="0.16" stop-color="#4292C8"/>
|
||||
<stop offset="0.25" stop-color="#2A7CBB"/>
|
||||
<stop offset="0.35" stop-color="#176BB1"/>
|
||||
<stop offset="0.47" stop-color="#0A5FA9"/>
|
||||
<stop offset="0.62" stop-color="#0258A5"/>
|
||||
<stop offset="0.94" stop-color="#0056A4"/>
|
||||
<stop offset="1" stop-color="#0056A4"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
|
|
@ -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: 'UI/Buttons/MainButton',
|
||||
title: 'composants/boutons/MainButton',
|
||||
component: MainButton,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
|
|
|
|||
|
|
@ -1,105 +0,0 @@
|
|||
import type {Meta, StoryObj} from '@storybook/angular';
|
||||
import {moduleMetadata} from '@storybook/angular';
|
||||
import {Chatbot} from './chatbot';
|
||||
import {Store, StoreModule} from '@ngrx/store';
|
||||
import {reducers} from '../reducers';
|
||||
import {ConversationsService} from '../services/conversations.service';
|
||||
import {ApiService} from '../services/api-service';
|
||||
import {HttpClientModule} from '@angular/common/http';
|
||||
import {TranslationService} from '../services/translation.service';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {PromptInput} from './prompt-input/prompt-input';
|
||||
import {MessageBox} from './message-box/message-box';
|
||||
import {NewInput} from './new-input/new-input';
|
||||
import {FeedbackButton} from './feedback-button/feedback-button';
|
||||
import {WarningBugs} from './warning-bugs/warning-bugs';
|
||||
import {VersionInfos} from './version-infos/version-infos';
|
||||
import {LoadingNotification} from './loading-notification/loading-notification';
|
||||
import {SourceBlock} from './source-block/source-block';
|
||||
import {ToolsOptions} from './tools-options/tools-options';
|
||||
|
||||
const appReducer = reducers.app;
|
||||
|
||||
const meta: Meta<Chatbot> = {
|
||||
title: 'App/Features/Chatbot',
|
||||
component: Chatbot,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
HttpClientModule,
|
||||
StoreModule.forRoot({app: appReducer as any}),
|
||||
PromptInput,
|
||||
MessageBox,
|
||||
NewInput,
|
||||
FeedbackButton,
|
||||
WarningBugs,
|
||||
VersionInfos,
|
||||
LoadingNotification,
|
||||
SourceBlock,
|
||||
ToolsOptions,
|
||||
],
|
||||
providers: [
|
||||
ConversationsService,
|
||||
ApiService,
|
||||
TranslationService,
|
||||
Store
|
||||
]
|
||||
})
|
||||
],
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
}
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<Chatbot>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
// Les propriétés sont injectées par les services
|
||||
}
|
||||
};
|
||||
|
||||
export const DemoMode: Story = {
|
||||
args: {
|
||||
// Les propriétés sont injectées par les services
|
||||
},
|
||||
parameters: {
|
||||
store: {
|
||||
init: (store: Store) => {
|
||||
store.dispatch({
|
||||
type: 'UPDATE_APP',
|
||||
payload: {
|
||||
demoMode: true,
|
||||
displayConversationListPanelLarge: true,
|
||||
displaySourcesPanelLarge: true
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const CompactView: Story = {
|
||||
args: {
|
||||
// Les propriétés sont injectées par les services
|
||||
},
|
||||
parameters: {
|
||||
store: {
|
||||
init: (store: Store) => {
|
||||
store.dispatch({
|
||||
type: 'UPDATE_APP',
|
||||
payload: {
|
||||
demoMode: true,
|
||||
displayConversationListPanelLarge: false,
|
||||
displaySourcesPanelLarge: false
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -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/Conversation/ConversationItem',
|
||||
title: 'composants/conversation/ConversationItem',
|
||||
component: ConversationItem,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { ExportChatButton } from './export-chat-button';
|
||||
import { moduleMetadata } from '@storybook/angular';
|
||||
import { NgClass } from '@angular/common';
|
||||
import type {Meta, StoryObj} from '@storybook/angular';
|
||||
import {moduleMetadata} from '@storybook/angular';
|
||||
import {ExportChatButton} from './export-chat-button';
|
||||
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/Actions/ExportChatButton',
|
||||
title: 'composants/boutons/ExportChatButton',
|
||||
component: ExportChatButton,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
|
|
@ -15,7 +15,7 @@ const meta: Meta<ExportChatButton> = {
|
|||
})
|
||||
],
|
||||
argTypes: {
|
||||
onExport: { action: 'exported' }
|
||||
onExport: {action: 'exported'}
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ export const Default: Story = {
|
|||
// Active dropdown
|
||||
export const ActiveDropdown: Story = {
|
||||
args: {},
|
||||
play: async ({ canvasElement, component }) => {
|
||||
play: async ({canvasElement, component}) => {
|
||||
// Simulate clicking the button to open the dropdown
|
||||
component.isDropdownActive = true;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ class MockApiService {
|
|||
}
|
||||
|
||||
const meta: Meta<FeedbackButton> = {
|
||||
title: 'UI/Feedback/FeedbackButton',
|
||||
title: 'composants/boutons/FeedbackButton',
|
||||
component: FeedbackButton,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
|
|
|
|||
|
|
@ -1,91 +0,0 @@
|
|||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { MessageBox } from './message-box';
|
||||
import { moduleMetadata } from '@storybook/angular';
|
||||
import { DomSanitizer, BrowserModule } from '@angular/platform-browser';
|
||||
import { Copy } from 'sae-lib/buttons/copy/copy';
|
||||
import { FeedbackButton } from '../feedback-button/feedback-button';
|
||||
import { ChatbotMessage } from '../../services/chatbot.message.type';
|
||||
|
||||
const meta: Meta<MessageBox> = {
|
||||
title: 'Chatbot/Messages/MessageBox',
|
||||
component: MessageBox,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [Copy, FeedbackButton, BrowserModule],
|
||||
providers: []
|
||||
})
|
||||
],
|
||||
argTypes: {
|
||||
kind: {
|
||||
control: 'select',
|
||||
options: ['user', 'llm'],
|
||||
description: "Type de message (utilisateur ou IA)"
|
||||
},
|
||||
content: {
|
||||
control: 'text',
|
||||
description: "Contenu du message"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<MessageBox>;
|
||||
|
||||
export const UserMessage: Story = {
|
||||
args: {
|
||||
kind: 'user',
|
||||
content: 'Voici un message de l\'utilisateur pour tester l\'affichage.',
|
||||
message: new ChatbotMessage({
|
||||
kind: 'user',
|
||||
user: {},
|
||||
content: 'Voici un message de l\'utilisateur pour tester l\'affichage.',
|
||||
name: 'User'
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
export const AIMessage: Story = {
|
||||
args: {
|
||||
kind: 'llm',
|
||||
content: 'Je suis un assistant IA qui répond à vos questions. Voici une réponse détaillée qui peut contenir du <strong>HTML</strong> et des listes:<ul><li>Point 1</li><li>Point 2</li></ul>',
|
||||
message: new ChatbotMessage({
|
||||
kind: 'llm',
|
||||
user: {},
|
||||
content: 'Je suis un assistant IA qui répond à vos questions. Voici une réponse détaillée qui peut contenir du <strong>HTML</strong> et des listes:<ul><li>Point 1</li><li>Point 2</li></ul>',
|
||||
name: 'Assistant'
|
||||
})
|
||||
}
|
||||
};
|
||||
export const AIMessageExpanded: Story = {
|
||||
args: {
|
||||
kind: 'llm',
|
||||
content: 'Je suis un assistant IA qui répond à vos questions. Voici une réponse détaillée qui peut contenir du <strong>HTML</strong> et des listes:<ul><li>Point 1</li><li>Point 2</li></ul>',
|
||||
message: new ChatbotMessage({
|
||||
kind: 'llm',
|
||||
user: {},
|
||||
content: 'Je suis un assistant IA qui répond à vos questions. Voici une réponse détaillée qui peut contenir du <strong>HTML</strong> et des listes:<ul><li>Point 1</li><li>Point 2</li></ul>',
|
||||
name: 'Assistant'
|
||||
}),
|
||||
expanded: true,
|
||||
}
|
||||
};
|
||||
export const LongAIMessage: Story = {
|
||||
args: {
|
||||
kind: 'llm',
|
||||
content: `<p>Voici une réponse longue avec beaucoup de contenu pour tester comment le composant gère les grands blocs de texte.</p>
|
||||
<p>Les documents mettent également en évidence diverses mesures de sécurité post-incident mises en œuvre, notamment des procédures de formation améliorées, des protocoles de maintenance renforcés et des modifications de la conception des aéronefs. Des organismes de réglementation tels que le NTSB, le BEA, l'AAIB et d'autres ont participé à l'enquête sur ces incidents et ont formulé des recommandations de sécurité.</p>
|
||||
<p>Ce résumé donne un aperçu des incidents aéronautiques importants, de leurs causes et de leurs conséquences, ce qui peut être utile pour comprendre les schémas d'accidents d'aéronefs et les domaines à améliorer en matière de sécurité aérienne.</p>
|
||||
<br/>
|
||||
<p>Pas de recherche Internet activée.<br/>
|
||||
Aucune recherche Internet n'a été activée pour cette requête</p>
|
||||
<br/>
|
||||
<p>Résultats de recherche.</p>`,
|
||||
message: new ChatbotMessage({
|
||||
kind: 'llm',
|
||||
user: {},
|
||||
content: 'Contenu long...',
|
||||
name: 'Assistant'
|
||||
})
|
||||
}
|
||||
};
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
import type {Meta, StoryObj} from '@storybook/angular';
|
||||
import {moduleMetadata} from '@storybook/angular';
|
||||
import {NewInput} from './new-input';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {PromptInput} from '../prompt-input/prompt-input';
|
||||
import {ToolsOptions} from '../tools-options/tools-options';
|
||||
import {Store, StoreModule} from '@ngrx/store';
|
||||
import {reducers} from '../../reducers';
|
||||
import {HttpClientModule} from '@angular/common/http';
|
||||
import {ApiService} from '../../services/api-service';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
|
||||
const appReducer = reducers.app;
|
||||
|
||||
const meta: Meta<NewInput> = {
|
||||
title: 'Chatbot/Input/NewInput',
|
||||
component: NewInput,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
PromptInput,
|
||||
ToolsOptions,
|
||||
HttpClientModule,
|
||||
StoreModule.forRoot({app: appReducer as any})
|
||||
],
|
||||
providers: [
|
||||
ApiService,
|
||||
Store
|
||||
]
|
||||
})
|
||||
],
|
||||
parameters: {
|
||||
backgrounds: {
|
||||
default: 'light',
|
||||
values: [
|
||||
{name: 'light', value: '#f5f5f5'},
|
||||
{name: 'dark', value: '#333'},
|
||||
],
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<NewInput>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
// Propriétés par défaut
|
||||
}
|
||||
};
|
||||
|
||||
export const DarkTheme: Story = {
|
||||
args: {
|
||||
// Propriétés par défaut
|
||||
},
|
||||
parameters: {
|
||||
backgrounds: {default: 'dark'},
|
||||
store: {
|
||||
init: (store: Store) => {
|
||||
store.dispatch({
|
||||
type: 'UPDATE_APP',
|
||||
payload: {
|
||||
theme: 'dark'
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -5,7 +5,7 @@ import { moduleMetadata } from '@storybook/angular';
|
|||
import { CommonModule } from '@angular/common';
|
||||
|
||||
const meta: Meta<SourceBlock> = {
|
||||
title: 'Chatbot/Sources/SourceBlock',
|
||||
title: 'composants/conversation/SourceBlock',
|
||||
component: SourceBlock,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import {ToggleButton} from './toggle-button';
|
|||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
|
||||
const meta: Meta<ToggleButton> = {
|
||||
title: 'UI/Buttons/ToggleButton',
|
||||
title: 'composants/boutons/ToggleButton',
|
||||
component: ToggleButton,
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import {Store} from '@ngrx/store';
|
|||
const storeMock = {};
|
||||
|
||||
const meta: Meta<WarningBugs> = {
|
||||
title: 'Chatbot/Feedback/WarningBugs',
|
||||
title: 'composants/feedback/WarningBugs',
|
||||
component: WarningBugs,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { moduleMetadata } from '@storybook/angular';
|
|||
import { NgStyle } from '@angular/common';
|
||||
|
||||
const meta: Meta<ColorDisplay> = {
|
||||
title: 'Design/Colors/ColorDisplay',
|
||||
title: 'fondations/couleurs/ColorDisplay',
|
||||
component: ColorDisplay,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
|
|
|
|||
|
|
@ -1,137 +1,140 @@
|
|||
@use 'sae-lib/src/styles/_variables.scss' as variables;
|
||||
|
||||
// Navigation bar styles
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
:host {
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
background-color: variables.$neutral-white;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
// Navigation bar styles
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
&-brand {
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.navbar-item {
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&-burger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
margin-right: 1rem;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
margin: 2px 0;
|
||||
background-color: #333;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
background-color: variables.$neutral-white;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
&-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.navbar-item {
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&-burger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
margin-right: 1rem;
|
||||
|
||||
&.is-active {
|
||||
span {
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
margin: 2px 0;
|
||||
background-color: #333;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-start, &-end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-menu {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
color: variables.$main-color-active;
|
||||
}
|
||||
|
||||
&.active-link {
|
||||
color: variables.$main-color-active;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&-dropdown {
|
||||
position: relative;
|
||||
|
||||
&:hover .navbar-dropdown {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&-dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1);
|
||||
padding: 0.5rem 0;
|
||||
z-index: 20;
|
||||
min-width: 12rem;
|
||||
|
||||
.navbar-item {
|
||||
padding: 0.375rem 1rem;
|
||||
display: block;
|
||||
|
||||
&.is-selected {
|
||||
background-color: #f5f5f5;
|
||||
&.is-active {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-divider {
|
||||
height: 1px;
|
||||
background-color: #dbdbdb;
|
||||
margin: 0.5rem 0;
|
||||
&-start, &-end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
color: variables.$main-color-active;
|
||||
}
|
||||
|
||||
&.active-link {
|
||||
color: variables.$main-color-active;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&-dropdown {
|
||||
position: relative;
|
||||
|
||||
&:hover .navbar-dropdown {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&-dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1);
|
||||
padding: 0.5rem 0;
|
||||
z-index: 20;
|
||||
min-width: 12rem;
|
||||
|
||||
.navbar-item {
|
||||
padding: 0.375rem 1rem;
|
||||
display: block;
|
||||
|
||||
&.is-selected {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-divider {
|
||||
height: 1px;
|
||||
background-color: #dbdbdb;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Icon styles
|
||||
.ri-notification-2-line {
|
||||
font-size: 1.25rem;
|
||||
// Icon styles
|
||||
.ri-notification-2-line {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const appReducer = reducers.app;
|
|||
* - Mobile-responsive hamburger menu
|
||||
*/
|
||||
const meta: Meta<DsNavbar> = {
|
||||
title: 'UI/Navigation/Navbar',
|
||||
title: 'patterns/breadcrumbs/Navbar',
|
||||
component: DsNavbar,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Logo } from './logo';
|
|||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
|
||||
const meta: Meta<Logo> = {
|
||||
title: 'Design/Brand/Logo',
|
||||
title: 'fondations/brand/Logo',
|
||||
component: Logo,
|
||||
tags: ['autodocs'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,89 +0,0 @@
|
|||
import type {Meta, StoryObj} from '@storybook/angular';
|
||||
import {moduleMetadata} from '@storybook/angular';
|
||||
import {AlertBox} from 'sae-lib/alert-box/alert-box';
|
||||
// import {CommonModule} from '@angular/common';
|
||||
|
||||
const meta: Meta<AlertBox> = {
|
||||
title: 'Components/AlertBox',
|
||||
component: AlertBox,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
// imports: [CommonModule],
|
||||
// providers: []
|
||||
})
|
||||
],
|
||||
argTypes: {
|
||||
message: {
|
||||
control: 'text',
|
||||
description: 'Message à afficher dans l\'alerte'
|
||||
},
|
||||
_alertKind: {
|
||||
control: 'select',
|
||||
options: ['info', 'success', 'primary', 'secondary', 'warning', 'danger', 'error'],
|
||||
description: 'Type d\'alerte'
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<AlertBox>;
|
||||
|
||||
export const Warning: Story = {
|
||||
args: {
|
||||
message: 'Ceci est un message d\'avertissement',
|
||||
_alertKind: 'warning'
|
||||
},
|
||||
};
|
||||
//
|
||||
// export const Success: Story = {
|
||||
// args: {
|
||||
// message: 'Opération réussie !',
|
||||
// _alertKind: 'success'
|
||||
// },
|
||||
// };
|
||||
//
|
||||
// export const Info: Story = {
|
||||
// args: {
|
||||
// message: 'Information importante',
|
||||
// _alertKind: 'info'
|
||||
// },
|
||||
// };
|
||||
//
|
||||
// export const Primary: Story = {
|
||||
// args: {
|
||||
// message: 'Message principal',
|
||||
// _alertKind: 'primary'
|
||||
// },
|
||||
// };
|
||||
//
|
||||
// export const Secondary: Story = {
|
||||
// args: {
|
||||
// message: 'Message secondaire',
|
||||
// _alertKind: 'secondary'
|
||||
// },
|
||||
// };
|
||||
//
|
||||
// export const Danger: Story = {
|
||||
// args: {
|
||||
// message: 'Attention danger !',
|
||||
// _alertKind: 'danger'
|
||||
// },
|
||||
// };
|
||||
//
|
||||
// export const ErrorState: Story = {
|
||||
// args: {
|
||||
// message: 'Une erreur est survenue',
|
||||
// _alertKind: 'error'
|
||||
// },
|
||||
// };
|
||||
//
|
||||
// export const WithContent: Story = {
|
||||
// args: {
|
||||
// _alertKind: 'warning'
|
||||
// },
|
||||
// render: (args) => ({
|
||||
// props: args,
|
||||
// template: `<sae-alert-box [_alertKind]="'warning'">Contenu personnalisé via ng-content</sae-alert-box>`
|
||||
// })
|
||||
// };
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { AlertBox } from 'sae-lib/alert-box/alert-box';
|
||||
import { moduleMetadata } from '@storybook/angular';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
const meta: Meta<AlertBox> = {
|
||||
title: 'UI/Feedback/AlertBox',
|
||||
component: AlertBox,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [CommonModule],
|
||||
providers: []
|
||||
})
|
||||
],
|
||||
argTypes: {
|
||||
message: {
|
||||
control: 'text',
|
||||
description: 'Message à afficher dans l\'alerte'
|
||||
},
|
||||
_alertKind: {
|
||||
control: 'select',
|
||||
options: ['info', 'success', 'primary', 'secondary', 'warning', 'danger', 'error'],
|
||||
description: 'Type d\'alerte'
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<AlertBox>;
|
||||
|
||||
export const Warning: Story = {
|
||||
args: {
|
||||
message: 'Ceci est un message d\'avertissement',
|
||||
_alertKind: 'warning'
|
||||
},
|
||||
};
|
||||
|
||||
export const Success: Story = {
|
||||
args: {
|
||||
message: 'Opération réussie !',
|
||||
_alertKind: 'success'
|
||||
},
|
||||
};
|
||||
|
||||
export const Info: Story = {
|
||||
args: {
|
||||
message: 'Information importante',
|
||||
_alertKind: 'info'
|
||||
},
|
||||
};
|
||||
|
||||
export const Primary: Story = {
|
||||
args: {
|
||||
message: 'Message principal',
|
||||
_alertKind: 'primary'
|
||||
},
|
||||
};
|
||||
|
||||
export const Secondary: Story = {
|
||||
args: {
|
||||
message: 'Message secondaire',
|
||||
_alertKind: 'secondary'
|
||||
},
|
||||
};
|
||||
|
||||
export const Danger: Story = {
|
||||
args: {
|
||||
message: 'Attention danger !',
|
||||
_alertKind: 'danger'
|
||||
},
|
||||
};
|
||||
|
||||
export const ErrorState: Story = {
|
||||
args: {
|
||||
message: 'Une erreur est survenue',
|
||||
_alertKind: 'error'
|
||||
},
|
||||
};
|
||||
|
||||
export const WithContent: Story = {
|
||||
args: {
|
||||
_alertKind: 'warning'
|
||||
},
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `<sae-alert-box [_alertKind]="'warning'">Contenu personnalisé via ng-content</sae-alert-box>`
|
||||
})
|
||||
};
|
||||
|
|
@ -12,31 +12,15 @@ We'll use a three-level hierarchy to organize our stories:
|
|||
|
||||
## Top-level Categories
|
||||
|
||||
- **UI**: Basic UI components that can be used across the application
|
||||
- Buttons
|
||||
- Inputs
|
||||
- Feedback
|
||||
- Layout
|
||||
- Navigation
|
||||
- Display
|
||||
- **fondations**: Foundational elements of the design system
|
||||
- couleurs (Colors)
|
||||
|
||||
- **Chatbot**: Components specific to the chatbot functionality
|
||||
- Conversation
|
||||
- Messages
|
||||
- Input
|
||||
- Actions
|
||||
- Feedback
|
||||
- **composants**: Basic UI components that can be used across the application
|
||||
- boutons (Buttons)
|
||||
- inputs (Input fields)
|
||||
|
||||
- **App**: Full application components or pages
|
||||
- Pages
|
||||
- Layouts
|
||||
- Features
|
||||
|
||||
- **Design**: Design system components and tokens
|
||||
- Colors
|
||||
- Typography
|
||||
- Spacing
|
||||
- Icons
|
||||
- **patterns**: Complex UI patterns and compositions
|
||||
- breadcrumbs (Navigation breadcrumbs)
|
||||
|
||||
## Naming Convention
|
||||
|
||||
|
|
@ -56,15 +40,15 @@ For example:
|
|||
|
||||
| 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 |
|
||||
| UI/Buttons/MainButton | composants/boutons/MainButton |
|
||||
| UI/Buttons/ToggleButton | composants/boutons/ToggleButton |
|
||||
| UI/Inputs/PromptInput | composants/inputs/PromptInput |
|
||||
| UI/Feedback/AlertBox | composants/feedback/AlertBox |
|
||||
| Design/Colors/ColorDisplay | fondations/couleurs/ColorDisplay |
|
||||
| UI/Navigation/Navbar | patterns/breadcrumbs/Navbar |
|
||||
| Chatbot/Conversation/ConversationItem | composants/conversation/ConversationItem |
|
||||
| Chatbot/Actions/ExportChatButton | composants/boutons/ExportChatButton |
|
||||
| Chatbot/Messages/MessageBox | composants/conversation/MessageBox |
|
||||
|
||||
## Implementation
|
||||
|
||||
|
|
|
|||
|
|
@ -13,36 +13,55 @@ const {execSync} = require('child_process');
|
|||
|
||||
// Define the mapping from old categories to new categories
|
||||
const categoryMapping = {
|
||||
// UI Components
|
||||
// UI Components to composants/boutons
|
||||
'UI/Buttons/ExportChatButton': 'composants/boutons/ExportChatButton',
|
||||
'UI/Buttons/MainButton': 'composants/boutons/MainButton',
|
||||
'UI/Buttons/ToggleButton': 'composants/boutons/ToggleButton',
|
||||
'Chatbot/Actions/ExportChatButton': 'composants/boutons/ExportChatButton',
|
||||
'Components/Buttons/ExportChatButton': 'composants/boutons/ExportChatButton',
|
||||
'Components/MainButton': 'composants/boutons/MainButton',
|
||||
'Components/ToggleButton': 'composants/boutons/ToggleButton',
|
||||
'Components/FeedbackButton': 'composants/boutons/FeedbackButton',
|
||||
|
||||
'Chatbot/ExportChatButton': 'UI/Buttons/ExportChatButton',
|
||||
'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',
|
||||
// UI Feedback to composants/feedback
|
||||
'UI/Feedback/AlertBox': 'composants/feedback/AlertBox',
|
||||
'UI/Feedback/FeedbackButton': 'composants/boutons/FeedbackButton',
|
||||
'Components/AlertBox': 'composants/feedback/AlertBox',
|
||||
|
||||
// Chatbot Components
|
||||
'Chatbot/ConversationItem': 'Chatbot/Conversation/ConversationItem',
|
||||
'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',
|
||||
// Design to fondations
|
||||
'Design/Colors/ColorDisplay': 'fondations/couleurs/ColorDisplay',
|
||||
'Design/Brand/Logo': 'fondations/brand/Logo',
|
||||
'Components/Logo': 'fondations/brand/Logo',
|
||||
'Components/ColorDisplay': 'fondations/couleurs/ColorDisplay',
|
||||
|
||||
// Navigation
|
||||
'Navigation/DsNavbar': 'UI/Navigation/Navbar',
|
||||
// UI Navigation to patterns/breadcrumbs
|
||||
'UI/Navigation/Navbar': 'patterns/breadcrumbs/Navbar',
|
||||
'Navigation/DsNavbar': 'patterns/breadcrumbs/Navbar',
|
||||
|
||||
// Chatbot Components to composants
|
||||
'Chatbot/Conversation/ConversationItem': 'composants/conversation/ConversationItem',
|
||||
'Chatbot/Feedback/WarningBugs': 'composants/feedback/WarningBugs',
|
||||
'Chatbot/Messages/MessageBox': 'composants/conversation/MessageBox',
|
||||
'Chatbot/Input/PromptInput': 'composants/inputs/PromptInput',
|
||||
'Chatbot/Input/NewInput': 'composants/inputs/NewInput',
|
||||
'Chatbot/Sources/SourceBlock': 'composants/conversation/SourceBlock',
|
||||
'Chatbot/ConversationItem': 'composants/conversation/ConversationItem',
|
||||
'Chatbot/WarningBugs': 'composants/feedback/WarningBugs',
|
||||
'Components/MessageBox': 'composants/conversation/MessageBox',
|
||||
'Components/PromptInput': 'composants/inputs/PromptInput',
|
||||
'Components/NewInput': 'composants/inputs/NewInput',
|
||||
'Components/SourceBlock': 'composants/conversation/SourceBlock',
|
||||
|
||||
// App
|
||||
'App/Chatbot': 'App/Features/Chatbot',
|
||||
'App/Features/Chatbot': 'composants/conversation/Chatbot',
|
||||
'App/Chatbot': 'composants/conversation/Chatbot',
|
||||
};
|
||||
|
||||
// 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"'
|
||||
'find /home/poule/encrypted/stockage-syncable/www/development/html/ng-implementation/airwatch/src -name "*.stories.ts"'
|
||||
).toString();
|
||||
return result.split('\n').filter(Boolean);
|
||||
} catch (error) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue