storybook main button, add presentation impress

airwatch/src/app/chatbot/warning-bugs/warning-bugs.stories.ts

@@ -1,83 +0,0 @@
-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: 'composants/feedback/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
-        }
-      ]
-    })
-  ]
-};

airwatch/src/stories/buttons/sae-main-button.stories.ts

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { MainButton } from '../../../../my-workspace/projects/sae-lib/buttons/main-button/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/SaeMainButton',
+  component: MainButton,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule],
+      providers: []
+    })
+  ],
+  argTypes: {
+    label: { control: 'text' },
+    icon: { control: 'text' },
+    kind: {
+      control: 'select',
+      options: ['', 'primary', 'secondary', 'ghost', 'link'],
+      description: 'Style du bouton'
+    },
+    size: {
+      control: 'select',
+      options: ['', 'large', 'medium', 'small', 'extrasm'],
+      description: 'Taille du bouton'
+    },
+    inconPosition: {
+      control: 'select',
+      options: ['left', 'right'],
+      description: 'Position de l\'icône'
+    },
+    disabled: { control: 'boolean' },
+    divider: { control: 'boolean' }
+  },
+};
+
+export default meta;
+type Story = StoryObj<MainButton>;
+
+// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
+export const Primary: Story = {
+  args: {
+    label: 'Button',
+    icon: 'home-line',
+    kind: 'primary',
+    size: 'medium',
+    inconPosition: 'left',
+    disabled: false,
+    divider: false
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Secondary Button',
+    icon: 'settings-line',
+    kind: 'secondary',
+    size: 'medium',
+    inconPosition: 'left',
+    disabled: false,
+    divider: false
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    label: 'Ghost Button',
+    icon: 'ghost-line',
+    kind: 'ghost',
+    size: 'medium',
+    inconPosition: 'left',
+    disabled: false,
+    divider: false
+  },
+};
+
+export const Link: Story = {
+  args: {
+    label: 'Link Button',
+    icon: 'link',
+    kind: 'link',
+    size: 'medium',
+    inconPosition: 'left',
+    disabled: false,
+    divider: false
+  },
+};
+
+export const Large: Story = {
+  args: {
+    label: 'Large Button',
+    icon: 'arrow-up-line',
+    kind: 'primary',
+    size: 'large',
+    inconPosition: 'left',
+    disabled: false,
+    divider: false
+  },
+};
+
+export const Small: Story = {
+  args: {
+    label: 'Small Button',
+    icon: 'arrow-down-line',
+    kind: 'primary',
+    size: 'small',
+    inconPosition: 'left',
+    disabled: false,
+    divider: false
+  },
+};
+
+export const ExtraSmall: Story = {
+  args: {
+    label: 'Extra Small Button',
+    icon: 'arrow-left-line',
+    kind: 'primary',
+    size: 'extrasm',
+    inconPosition: 'left',
+    disabled: false,
+    divider: false
+  },
+};
+
+export const RightIcon: Story = {
+  args: {
+    label: 'Button with Right Icon',
+    icon: 'arrow-right-line',
+    kind: 'primary',
+    size: 'medium',
+    inconPosition: 'right',
+    disabled: false,
+    divider: false
+  },
+};
+
+export const WithoutIcon: Story = {
+  args: {
+    label: 'Button without icon',
+    icon: '',
+    kind: 'primary',
+    size: 'medium',
+    inconPosition: 'left',
+    disabled: false,
+    divider: false
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled Button',
+    icon: 'close-line',
+    kind: 'primary',
+    size: 'medium',
+    inconPosition: 'left',
+    disabled: true,
+    divider: false
+  },
+};
+
+export const WithDivider: Story = {
+  args: {
+    label: 'Button with Divider',
+    icon: 'menu-line',
+    kind: 'primary',
+    size: 'medium',
+    inconPosition: 'left',
+    disabled: false,
+    divider: true
+  },
+};
+
+export const GhostDisabled: Story = {
+  args: {
+    label: 'Disabled Ghost Button',
+    icon: 'ghost-line',
+    kind: 'ghost',
+    size: 'medium',
+    inconPosition: 'left',
+    disabled: true,
+    divider: false
+  },
+};

my-workspace/projects/sae-lib/buttons/main-button/main-button.ts

@@ -6,7 +6,7 @@ export type ButtonSizeType = '' | 'large' | 'medium' | 'small' | 'extrasm';
 export type inconPositionKindType = '' | 'left' | 'right';
 
 @Component({
-  selector: 'sae-main-button',
+  selector: 'sae-m-button',
   standalone: true,
   imports: [
     NgClass

ng-demo

@@ -1 +0,0 @@
-Subproject commit b0511db19a9038a5306de91f471648c4f002a9b9