tykayn/ng-implementation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

less storybook files

Browse source
This commit is contained in:
tykayn 2025-09-22 09:58:26 +02:00
parent 42a552c8ec
commit 096828179d
10 changed files with 140 additions and 323 deletions
Download patch file Download diff file Expand all files Collapse all files

94
airwatch/.storybook/stories/foundations.stories.ts Normal file
View file

@ -0,0 +1,94 @@
import type {StoryObj} from '@storybook/angular';
import {ArrayButtons} from 'sae-lib/buttons/array-buttons/array-buttons';
/**
* sections :
*
* Colors
* Typography
* Icons
* Layouts
* Radius
* Strokes
* Effects
*
*/
// Colors section
export default {
title: 'Foundations/colors/palette',
};
export const FoundationsColorsArray: StoryObj<ArrayButtons> = {
name: 'Colors',
render: () => ({
template: `
<div style="display: flex; flex-wrap: wrap; gap: 16px;">
<sae-array-buttons></sae-array-buttons>
</div>
`,
moduleMetadata: {
imports: [ArrayButtons],
},
}),
};
// Typography section
// export const Typography: StoryObj<Typography> = {
// name: 'Typography',
// render: () => ({
// template: `<sae-typo></sae-typo>`,
// moduleMetadata: {
// imports: [Typography],
// },
// }),
// };
//
// // Icons section (placeholder)
// export const Icons: StoryObj = {
// name: 'Icons',
// render: () => ({
// template: `<div>Icons component not yet implemented</div>`,
// }),
// };
//
// // Layouts section
// export const Layouts: StoryObj<Layouts> = {
// name: 'Layouts',
// render: () => ({
// template: `<sae-layout></sae-layout>`,
// moduleMetadata: {
// imports: [Layouts],
// },
// }),
// };
//
// // Radius section
// export const Radius: StoryObj<Radius> = {
// name: 'Radius',
// render: () => ({
// template: `<lib-sae-main-button></lib-sae-main-button>`,
// moduleMetadata: {
// imports: [Radius],
// },
// }),
// };
// Strokes section
// export const Strokes: StoryObj<StrokesComponent> = {
// name: 'Strokes',
// render: () => ({
// template: `<sae-strokes></sae-strokes>`,
// moduleMetadata: {
// imports: [Strokes],
// },
// }),
// };
// Effects section (placeholder)
// export const Effects: StoryObj = {
// name: 'Effects',
// render: () => ({
// template: `<div>Effects component not yet implemented</div>`,
// }),
// };

33
airwatch/.storybook/stories/patterns.stories.ts Normal file
View file

@ -0,0 +1,33 @@
// sections :
// BreadCrumbs
// Pagination
// FileUploader
/**
* sections:
*
* BreadCrumbs
* Pagination
* FileUploader
*
*/
import type {Meta, StoryObj} from '@storybook/angular';
import {moduleMetadata} from '@storybook/angular';
import {Index as ColorDisplayComponent} from 'sae-lib/typo/index';
import {NgStyle} from '@angular/common';
const meta: Meta<ColorDisplayComponent> = {
title: 'Patterns/BreadCrumbs',
component: ColorDisplayComponent,
tags: ['autodocs'],
decorators: [
moduleMetadata({
imports: [NgStyle],
providers: []
})
],
};
export default meta;
type Story = StoryObj<ColorDisplayComponent>;

2
airwatch/src/app/buttons/main-button/main-button.stories.ts
View file

@ -3,7 +3,7 @@ import {MainButton} from './main-button';
// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
const meta: Meta<MainButton> = {
title: 'composants/boutons/MainButton',
title: 'composants/buttons/main',
component: MainButton,
tags: ['autodocs'],
argTypes: {

61
airwatch/src/app/chatbot/export-chat-button/export-chat-button.stories.ts
View file

@ -1,61 +0,0 @@
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: 'composants/boutons/ExportChatButton',
component: ExportChatButton,
tags: ['autodocs'],
decorators: [
moduleMetadata({
imports: [NgClass],
providers: []
})
],
argTypes: {
onExport: {action: 'exported'}
},
};
export default meta;
type Story = StoryObj<ExportChatButton>;
// Default state
export const Default: Story = {
args: {},
};
// Active dropdown
export const ActiveDropdown: Story = {
args: {},
play: async ({canvasElement, component}) => {
// Simulate clicking the button to open the dropdown
component.isDropdownActive = true;
},
};
// Custom story to demonstrate hover state
export const HoverState: Story = {
args: {},
parameters: {
docs: {
description: {
story: 'Hover over the button to see the hover state. The button background changes to blue and text becomes white.'
}
}
}
};
// Custom story to demonstrate the export functionality
export const ExportFunctionality: Story = {
args: {},
parameters: {
docs: {
description: {
story: 'Click on the button to open the dropdown, then select a format to export. The onExport event will be emitted with the selected format.'
}
}
}
};

22
airwatch/src/app/chatbot/feedback-button/feedback-button.stories.ts
View file

@ -1,11 +1,11 @@
import type { Meta, StoryObj } from '@storybook/angular';
import { FeedbackButton } from './feedback-button';
import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Store, StoreModule } from '@ngrx/store';
import { ApiService } from '../../services/api-service';
import { reducers } from '../../reducers';
import type {Meta, StoryObj} from '@storybook/angular';
import {moduleMetadata} from '@storybook/angular';
import {FeedbackButton} from './feedback-button';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {Store, StoreModule} from '@ngrx/store';
import {ApiService} from '../../services/api-service';
import {reducers} from '../../reducers';
// Mock ApiService
class MockApiService {
@ -13,14 +13,14 @@ class MockApiService {
// Simulate API call
return new Promise((resolve) => {
setTimeout(() => {
resolve({ success: true });
resolve({success: true});
}, 1000);
});
}
}
const meta: Meta<FeedbackButton> = {
title: 'composants/boutons/FeedbackButton',
title: 'composants/buttons/feedback',
component: FeedbackButton,
tags: ['autodocs'],
decorators: [
@ -32,7 +32,7 @@ const meta: Meta<FeedbackButton> = {
],
providers: [
Store,
{ provide: ApiService, useClass: MockApiService }
{provide: ApiService, useClass: MockApiService}
]
})
],

70
airwatch/src/app/chatbot/prompt-input/prompt-input.stories.ts
View file

@ -1,70 +0,0 @@
import type {Meta, StoryObj} from '@storybook/angular';
import {moduleMetadata} from '@storybook/angular';
import {PromptInput} from './prompt-input';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {Store, StoreModule} from '@ngrx/store';
import {reducers} from '../../reducers';
import {HttpClientModule} from '@angular/common/http';
import {ApiService} from '../../services/api-service';
const appReducer = reducers.app;
const meta: Meta<PromptInput> = {
title: 'composants/inputs/PromptInput',
component: PromptInput,
tags: ['autodocs'],
decorators: [
moduleMetadata({
imports: [
CommonModule,
FormsModule,
HttpClientModule,
StoreModule.forRoot({app: appReducer as any})
],
providers: [
ApiService,
Store
]
})
],
argTypes: {
// Vous pouvez définir des contrôles pour les propriétés ici
}
};
export default meta;
type Story = StoryObj<PromptInput>;
export const Default: Story = {
args: {
// Les propriétés par défaut
}
};
export const WithPlaceholder: Story = {
args: {
// Les propriétés avec un placeholder personnalisé
},
parameters: {
// Vous pouvez surcharger certains paramètres ici
}
};
export const LoadingState: Story = {
args: {
// Les propriétés de base
},
parameters: {
store: {
init: (store: Store) => {
store.dispatch({
type: 'UPDATE_APP',
payload: {
loading: true
}
});
}
}
}
};

65
airwatch/src/app/chatbot/source-block/source-block.stories.ts
View file

@ -1,65 +0,0 @@
import type { Meta, StoryObj } from '@storybook/angular';
import { SourceBlock } from './source-block';
import { ChatbotSource } from '../../services/conversations.service';
import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
const meta: Meta<SourceBlock> = {
title: 'composants/conversation/SourceBlock',
component: SourceBlock,
tags: ['autodocs'],
decorators: [
moduleMetadata({
imports: [CommonModule],
providers: []
})
],
argTypes: {
source: {
control: 'object',
description: 'Objet contenant les informations de la source'
}
},
};
export default meta;
type Story = StoryObj<SourceBlock>;
export const Default: Story = {
args: {
source: new ChatbotSource({
title: 'Document technique.pdf',
url: 'https://example.com/document-technique.pdf',
description: 'Ce document contient des informations techniques sur les avions de ligne modernes et leur maintenance.'
})
},
};
export const ShortDescription: Story = {
args: {
source: new ChatbotSource({
title: 'Rapport d\'accident.pdf',
url: 'https://example.com/rapport-accident.pdf',
description: 'Rapport concernant l\'incident de vol 123.'
})
},
};
export const LongDescription: Story = {
args: {
source: new ChatbotSource({
title: 'Documentation complète.pdf',
url: 'https://example.com/documentation-complete.pdf',
description: 'DE GAGNE DATE: JANUARY 18, 2008 VEN #: V6-CAW-M2700-10 APPROVED BY: MARTIN SWAN DATE: FEBRUARY 5, 2008 -TITLE- DHC-6 ELEVATOR CONTROL CABLE WEAR SURVEY RESULTS ISSUE: 2 PAGE 2 respondents, representing 16 aircraft, operate outside the tropics and have a cycle/hour ratio of 1.6 to 2.8. Most respondents have reported that carbon steel elevator control cables are more wear resistant than stainless steel cables. Two operators in the tropics, representing 39 aircraft, use.'
})
},
};
export const WithoutUrl: Story = {
args: {
source: new ChatbotSource({
title: 'Document interne.pdf',
description: 'Document à usage interne uniquement, sans lien externe.'
})
},
};

2
airwatch/src/app/chatbot/toggle-button/toggle-button.stories.ts
View file

@ -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: 'composants/boutons/ToggleButton',
title: 'composants/buttons/Chips',
component: ToggleButton,
tags: ['autodocs'],
argTypes: {

97
airwatch/src/app/color-display/color-display.stories.ts
View file

@ -1,97 +0,0 @@
import type { Meta, StoryObj } from '@storybook/angular';
import { ColorDisplay } from './color-display';
import { moduleMetadata } from '@storybook/angular';
import { NgStyle } from '@angular/common';
const meta: Meta<ColorDisplay> = {
title: 'fondations/couleurs/ColorDisplay',
component: ColorDisplay,
tags: ['autodocs'],
decorators: [
moduleMetadata({
imports: [NgStyle],
providers: []
})
],
argTypes: {
hexaCode: {
control: 'text',
description: "Code hexadécimal de la couleur"
},
name: {
control: 'text',
description: "Nom de la couleur"
},
backgroundColor: {
control: 'text',
description: "Couleur de fond (si différente du code hexa)"
}
}
};
export default meta;
type Story = StoryObj<ColorDisplay>;
export const Red: Story = {
args: {
hexaCode: '#cc0000',
name: 'Rouge',
backgroundColor: ''
}
};
export const Blue: Story = {
args: {
hexaCode: '#0000cc',
name: 'Bleu',
backgroundColor: ''
}
};
export const Green: Story = {
args: {
hexaCode: '#00cc00',
name: 'Vert',
backgroundColor: ''
}
};
export const Yellow: Story = {
args: {
hexaCode: '#ffcc00',
name: 'Jaune',
backgroundColor: ''
}
};
export const Purple: Story = {
args: {
hexaCode: '#9900cc',
name: 'Violet',
backgroundColor: ''
}
};
export const Orange: Story = {
args: {
hexaCode: '#ff6600',
name: 'Orange',
backgroundColor: ''
}
};
export const Black: Story = {
args: {
hexaCode: '#000000',
name: 'Noir',
backgroundColor: ''
}
};
export const White: Story = {
args: {
hexaCode: '#ffffff',
name: 'Blanc',
backgroundColor: ''
}
};

17
airwatch/src/app/logo/logo.stories.ts
View file

@ -1,17 +0,0 @@
import type { Meta, StoryObj } from '@storybook/angular';
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: 'fondations/brand/Logo',
component: Logo,
tags: ['autodocs'],
};
export default meta;
type Story = StoryObj<Logo>;
// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
export const Default: Story = {
args: {},
};