chore(deps): upgrade storybook to version 8

.storybook/main.ts

@@ -6,6 +6,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
+    '@storybook/addon-mdx-gfm'
   ],
   framework: {
     name: '@storybook/angular',

package.json

@@ -30,7 +30,7 @@
     "@angular/service-worker": "^17.0.7",
     "@asymmetrik/ngx-leaflet": "^17.0.0",
     "@ngx-translate/core": "^14.0.0",
-    "@storybook/addon-a11y": "^7.6.17",
+    "@storybook/addon-a11y": "^8.0.0",
     "ag-grid-angular": "^29.0.0",
     "ag-grid-community": "^29.0.0",
     "jwt-decode": "^3.1.2",
@@ -56,14 +56,14 @@
     "@angular/compiler-cli": "^17.0.7",
     "@angular/localize": "^17.0.7",
     "@compodoc/compodoc": "^1.1.16",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-interactions": "^7.6.7",
-    "@storybook/addon-links": "^7.6.7",
-    "@storybook/angular": "^7.6.7",
-    "@storybook/blocks": "^7.6.7",
-    "@storybook/manager-api": "^7.6.7",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.6.7",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/addon-mdx-gfm": "^8.0.0",
+    "@storybook/angular": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/manager-api": "^8.0.0",
+    "@storybook/theming": "^8.0.0",
     "@types/leaflet": "^1.5.17",
     "@types/leaflet.locatecontrol": "^0.74.0",
     "@types/luxon": "^1.25.0",
@@ -73,14 +73,14 @@
     "codelyzer": "^6.0.2",
     "eslint": "^8.39.0",
     "eslint-plugin-jsdoc": "^48.0.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "http-server": "^14.1.0",
     "ng-packagr": "^17.0.3",
     "prettier": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "standard-version": "^9.3.2",
-    "storybook": "^7.6.7",
+    "storybook": "^8.0.0",
     "typescript": "~5.2.0"
   }
 }

src/app/shared/components/button/Button.stories.ts

@@ -8,7 +8,6 @@ import { ButtonComponent } from './button.component';
 const meta: Meta<ButtonComponent> = {
   title: 'Components/Button',
   component: ButtonComponent,
-  tags: ['autodocs'],
   decorators: [
     moduleMetadata({
       declarations: [SvgIconComponent],

src/app/shared/components/button/button.mdx

-import { Canvas, Donts, Dos, Meta, Stories } from '@storybook/blocks';
+import { Canvas, Controls, Donts, Dos, Meta, Stories } from '@storybook/blocks';
 
 import * as ButtonStories from './Button.stories';
 
@@ -20,3 +20,7 @@ Il existe trois tailles de boutons en hauteur :
 ## Exemples
 
 <Stories />
+
+## Controls
+
+<Controls />

src/app/shared/components/color-block/color-block.stories.ts

@@ -8,7 +8,6 @@ import { ColorBlockComponent } from './color-block.component';
 const meta: Meta<ColorBlockComponent> = {
   title: 'UI/ColorBlock',
   component: ColorBlockComponent,
-  // tags: ['autodocs'],
   decorators: [
     moduleMetadata({
       declarations: [SvgIconComponent],

src/app/shared/components/modal/modal.stories.ts

@@ -31,7 +31,7 @@ export const SingleButton: Story = {
     cancelLabel: 'Annuler',
     singleButton: true,
   },
-  render: (args: Partial<ModalComponent>) => ({
+  render: (args) => ({
     template: `<app-modal [opened]="${args.opened}"
     [validateLabel]="'${args.validateLabel}'"
     [cancelLabel]="'${args.cancelLabel}'"

src/app/shared/components/tag-item/tag-item.stories.ts

 import { CommonModule } from '@angular/common';
-import { EventEmitter } from '@angular/core';
 import type { Meta, StoryObj } from '@storybook/angular';
 import { moduleMetadata } from '@storybook/angular';
 import { SvgIconComponent } from '../svg-icon/svg-icon.component';
@@ -27,7 +26,6 @@ export const Small: Story = {
     label: 'Label tag',
     size: 'small',
     clickable: true,
-    action: new EventEmitter(),
   },
 };