diff --git a/airwatch/.storybook/src/assets/safran_logo.svg b/airwatch/.storybook/src/assets/safran_logo.svg new file mode 100644 index 0000000..7ef277a --- /dev/null +++ b/airwatch/.storybook/src/assets/safran_logo.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/airwatch/src/app/buttons/main-button/main-button.stories.ts b/airwatch/src/app/buttons/main-button/main-button.stories.ts index 02ed373..7cc0cfc 100644 --- a/airwatch/src/app/buttons/main-button/main-button.stories.ts +++ b/airwatch/src/app/buttons/main-button/main-button.stories.ts @@ -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 = { - title: 'UI/Buttons/MainButton', + title: 'composants/boutons/MainButton', component: MainButton, tags: ['autodocs'], decorators: [ diff --git a/airwatch/src/app/chatbot/chatbot.stories.ts b/airwatch/src/app/chatbot/chatbot.stories.ts deleted file mode 100644 index 3939031..0000000 --- a/airwatch/src/app/chatbot/chatbot.stories.ts +++ /dev/null @@ -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 = { - 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; - -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 - } - }); - } - } - } -}; diff --git a/airwatch/src/app/chatbot/conversation-item/conversation-item.stories.ts b/airwatch/src/app/chatbot/conversation-item/conversation-item.stories.ts index 7f0678b..260537a 100644 --- a/airwatch/src/app/chatbot/conversation-item/conversation-item.stories.ts +++ b/airwatch/src/app/chatbot/conversation-item/conversation-item.stories.ts @@ -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 = { - title: 'Chatbot/Conversation/ConversationItem', + title: 'composants/conversation/ConversationItem', component: ConversationItem, tags: ['autodocs'], decorators: [ diff --git a/airwatch/src/app/chatbot/export-chat-button/export-chat-button.stories.ts b/airwatch/src/app/chatbot/export-chat-button/export-chat-button.stories.ts index c9ad99e..ee187d8 100644 --- a/airwatch/src/app/chatbot/export-chat-button/export-chat-button.stories.ts +++ b/airwatch/src/app/chatbot/export-chat-button/export-chat-button.stories.ts @@ -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 = { - title: 'Chatbot/Actions/ExportChatButton', + title: 'composants/boutons/ExportChatButton', component: ExportChatButton, tags: ['autodocs'], decorators: [ @@ -15,7 +15,7 @@ const meta: Meta = { }) ], 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; }, diff --git a/airwatch/src/app/chatbot/feedback-button/feedback-button.stories.ts b/airwatch/src/app/chatbot/feedback-button/feedback-button.stories.ts index 5c44124..621a59e 100644 --- a/airwatch/src/app/chatbot/feedback-button/feedback-button.stories.ts +++ b/airwatch/src/app/chatbot/feedback-button/feedback-button.stories.ts @@ -20,7 +20,7 @@ class MockApiService { } const meta: Meta = { - title: 'UI/Feedback/FeedbackButton', + title: 'composants/boutons/FeedbackButton', component: FeedbackButton, tags: ['autodocs'], decorators: [ diff --git a/airwatch/src/app/chatbot/message-box/message-box.stories.ts b/airwatch/src/app/chatbot/message-box/message-box.stories.ts deleted file mode 100644 index 326fb2b..0000000 --- a/airwatch/src/app/chatbot/message-box/message-box.stories.ts +++ /dev/null @@ -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 = { - 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; - -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 HTML et des listes:
  • Point 1
  • Point 2
', - 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 HTML et des listes:
  • Point 1
  • Point 2
', - 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 HTML et des listes:
  • Point 1
  • Point 2
', - 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 HTML et des listes:
  • Point 1
  • Point 2
', - name: 'Assistant' - }), - expanded: true, - } -}; -export const LongAIMessage: Story = { - args: { - kind: 'llm', - content: `

Voici une réponse longue avec beaucoup de contenu pour tester comment le composant gère les grands blocs de texte.

-

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é.

-

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.

-
-

Pas de recherche Internet activée.
- Aucune recherche Internet n'a été activée pour cette requête

-
-

Résultats de recherche.

`, - message: new ChatbotMessage({ - kind: 'llm', - user: {}, - content: 'Contenu long...', - name: 'Assistant' - }) - } -}; diff --git a/airwatch/src/app/chatbot/new-input/new-input.stories.ts b/airwatch/src/app/chatbot/new-input/new-input.stories.ts deleted file mode 100644 index 31e1632..0000000 --- a/airwatch/src/app/chatbot/new-input/new-input.stories.ts +++ /dev/null @@ -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 = { - 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; - -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' - } - }); - } - } - } -}; diff --git a/airwatch/src/app/chatbot/source-block/source-block.stories.ts b/airwatch/src/app/chatbot/source-block/source-block.stories.ts index 1fc407e..952397f 100644 --- a/airwatch/src/app/chatbot/source-block/source-block.stories.ts +++ b/airwatch/src/app/chatbot/source-block/source-block.stories.ts @@ -5,7 +5,7 @@ import { moduleMetadata } from '@storybook/angular'; import { CommonModule } from '@angular/common'; const meta: Meta = { - title: 'Chatbot/Sources/SourceBlock', + title: 'composants/conversation/SourceBlock', component: SourceBlock, tags: ['autodocs'], decorators: [ diff --git a/airwatch/src/app/chatbot/toggle-button/toggle-button.stories.ts b/airwatch/src/app/chatbot/toggle-button/toggle-button.stories.ts index c7ddaed..565796f 100644 --- a/airwatch/src/app/chatbot/toggle-button/toggle-button.stories.ts +++ b/airwatch/src/app/chatbot/toggle-button/toggle-button.stories.ts @@ -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 = { - title: 'UI/Buttons/ToggleButton', + title: 'composants/boutons/ToggleButton', component: ToggleButton, tags: ['autodocs'], argTypes: { diff --git a/airwatch/src/app/chatbot/warning-bugs/warning-bugs.stories.ts b/airwatch/src/app/chatbot/warning-bugs/warning-bugs.stories.ts index 45741fc..fc3970a 100644 --- a/airwatch/src/app/chatbot/warning-bugs/warning-bugs.stories.ts +++ b/airwatch/src/app/chatbot/warning-bugs/warning-bugs.stories.ts @@ -10,7 +10,7 @@ import {Store} from '@ngrx/store'; const storeMock = {}; const meta: Meta = { - title: 'Chatbot/Feedback/WarningBugs', + title: 'composants/feedback/WarningBugs', component: WarningBugs, tags: ['autodocs'], decorators: [ diff --git a/airwatch/src/app/color-display/color-display.stories.ts b/airwatch/src/app/color-display/color-display.stories.ts index c6c75a7..c7f207d 100644 --- a/airwatch/src/app/color-display/color-display.stories.ts +++ b/airwatch/src/app/color-display/color-display.stories.ts @@ -4,7 +4,7 @@ import { moduleMetadata } from '@storybook/angular'; import { NgStyle } from '@angular/common'; const meta: Meta = { - title: 'Design/Colors/ColorDisplay', + title: 'fondations/couleurs/ColorDisplay', component: ColorDisplay, tags: ['autodocs'], decorators: [ diff --git a/airwatch/src/app/ds-navbar/ds-navbar.scss b/airwatch/src/app/ds-navbar/ds-navbar.scss index f871393..dbfede8 100644 --- a/airwatch/src/app/ds-navbar/ds-navbar.scss +++ b/airwatch/src/app/ds-navbar/ds-navbar.scss @@ -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; + } } diff --git a/airwatch/src/app/ds-navbar/ds-navbar.stories.ts b/airwatch/src/app/ds-navbar/ds-navbar.stories.ts index 78806f6..fffcfc1 100644 --- a/airwatch/src/app/ds-navbar/ds-navbar.stories.ts +++ b/airwatch/src/app/ds-navbar/ds-navbar.stories.ts @@ -20,7 +20,7 @@ const appReducer = reducers.app; * - Mobile-responsive hamburger menu */ const meta: Meta = { - title: 'UI/Navigation/Navbar', + title: 'patterns/breadcrumbs/Navbar', component: DsNavbar, tags: ['autodocs'], decorators: [ diff --git a/airwatch/src/app/logo/logo.stories.ts b/airwatch/src/app/logo/logo.stories.ts index 639be60..d53f848 100644 --- a/airwatch/src/app/logo/logo.stories.ts +++ b/airwatch/src/app/logo/logo.stories.ts @@ -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 = { - title: 'Design/Brand/Logo', + title: 'fondations/brand/Logo', component: Logo, tags: ['autodocs'], }; diff --git a/airwatch/src/app/molecules/stories/alert-box.stories.ts b/airwatch/src/app/molecules/stories/alert-box.stories.ts deleted file mode 100644 index ef2da79..0000000 --- a/airwatch/src/app/molecules/stories/alert-box.stories.ts +++ /dev/null @@ -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 = { - 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; - -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: `Contenu personnalisé via ng-content` -// }) -// }; diff --git a/airwatch/src/stories/alert-box.stories.ts b/airwatch/src/stories/alert-box.stories.ts deleted file mode 100644 index df6e40e..0000000 --- a/airwatch/src/stories/alert-box.stories.ts +++ /dev/null @@ -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 = { - 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; - -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: `Contenu personnalisé via ng-content` - }) -}; diff --git a/airwatch/src/stories/storybook-categories.md b/airwatch/src/stories/storybook-categories.md index ca47b4b..5e287f1 100644 --- a/airwatch/src/stories/storybook-categories.md +++ b/airwatch/src/stories/storybook-categories.md @@ -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 diff --git a/airwatch/src/stories/update-story-categories.js b/airwatch/src/stories/update-story-categories.js index eed404b..d0e3d3f 100644 --- a/airwatch/src/stories/update-story-categories.js +++ b/airwatch/src/stories/update-story-categories.js @@ -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) {