chore: update stroybook

.storybook/main.ts

@@ -1,7 +1,7 @@
 import { dirname, join } from 'path';
 module.exports = {
   framework: getAbsolutePath('@storybook/angular'),
-  stories: ['../projects/**/*.stories.@(ts|mdx)'],
+  stories: ['../projects/**/*.@(mdx|stories.@(ts))'],
 
   addons: [
     getAbsolutePath('@storybook/addon-a11y'),
@@ -17,11 +17,11 @@ module.exports = {
       options: { transcludeMarkdown: true },
     },
     getAbsolutePath('@storybook/addon-mdx-gfm'),
+    '@chromatic-com/storybook',
   ],
 
   features: {
     previewCsfV3: true,
-    storyStoreV7: true,
   },
 
   angularOptions: {

package.json

@@ -73,16 +73,18 @@
     "@angular-eslint/template-parser": "18.3.0",
     "@angular/cli": "18.2.0",
     "@angular/compiler-cli": "18.2.0",
+    "@chromatic-com/storybook": "^1.6.1",
     "@commitlint/cli": "17.4.2",
     "@commitlint/config-conventional": "17.4.2",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@storybook/addon-a11y": "7.6.17",
-    "@storybook/addon-designs": "7.0.9",
-    "@storybook/addon-essentials": "7.6.17",
-    "@storybook/addon-mdx-gfm": "7.6.17",
-    "@storybook/angular": "7.6.17",
+    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-designs": "^8.0.3",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-mdx-gfm": "^8.2.9",
+    "@storybook/angular": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
     "@types/jest": "29.5.12",
     "@types/json-schema": "^7.0.15",
     "@types/lodash": "4.17.7",
@@ -103,11 +105,11 @@
     "license-check-and-add": "4.0.5",
     "ng-packagr": "18.2.0",
     "prettier": "3.3.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "semantic-release": "23.0.8",
     "sort-package-json": "2.10.0",
-    "storybook": "7.6.17",
+    "storybook": "^8.2.9",
     "stylelint": "16.8.2",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-prettier-scss": "^1.0.0",

projects/ui-analytics/src/lib/gio-pendo/README.stories.mdx → projects/ui-analytics/src/lib/gio-pendo/README.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/blocks';
 
 <Meta title="Tools / Pendo Analytics / README" />
 

projects/ui-particles-angular/gio-asciidoctor/README.stories.mdx → projects/ui-particles-angular/gio-asciidoctor/README.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/blocks';
 
 <Meta title="Components / Asciidoctor / README" />
 

projects/ui-particles-angular/src/1-README.mdx

@@ -0,0 +1,9 @@
+import { Meta, Markdown } from '@storybook/blocks';
+
+import README from '../README.md';
+
+<Meta title="README" />
+
+<Markdown>
+  {README}
+</Markdown>

projects/ui-particles-angular/src/2-GetStarted.stories.mdx → projects/ui-particles-angular/src/2-GetStarted.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Meta, Controls, PRIMARY_STORY } from '@storybook/blocks';
 
 import { VERSION } from '@angular/core';
 
@@ -12,9 +12,9 @@ import { VERSION } from '@angular/core';
 
 > These config allow to:
 >
-> - Configure material with the right Gravitee typography and color palette
-> - Add global override to angular material
-> - Add Gravitee components that are shared in this lib
+> * Configure material with the right Gravitee typography and color palette
+> * Add global override to angular material
+> * Add Gravitee components that are shared in this lib
 
 1. Add in the `main.scss` or `styles.scss` of the Angular project
 

projects/ui-particles-angular/src/lib/gio-badge/README.stories.mdx → projects/ui-particles-angular/src/lib/gio-badge/README.mdx

@@ -1,14 +1,17 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/blocks';
+import * as ReadmeStories from './gio-badge.stories';
 
-<Meta title="Components / Badge / README" />
+<Meta of={ReadmeStories} />
 
 # Badges
 
 Documentation and examples for badges, a small count and labeling component inspired by Bootstrap one.
 
 ## Demo
 
-<Story id="components-badge--all"></Story>
+{/* <Story id="components-badge--all" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
+
+<Story id="components-badge--all" />
 
 ## Usage
 
@@ -38,4 +41,3 @@ Here are some examples with simple `span` elements:
 <!-- ⚠ Material icons are also working BUT you should ALWAYS PREFER icons from the Gravitee lib (see Icons story)️  -->
 <span class="gio-badge-error">Lock<mat-icon class="gio-right">lock</mat-icon></span>
 ```
-

projects/ui-particles-angular/src/lib/gio-banner/README.stories.mdx → projects/ui-particles-angular/src/lib/gio-banner/README.mdx

@@ -1,21 +1,24 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/blocks';
+import * as ReadmeStories from './gio-banner.stories';
 
-<Meta title="Components / Banner / README" />
+<Meta of={ReadmeStories} />
 
 # Gio Banner
 
 Documentation and examples for banner. Allows you to display banner in cards or or outside cards. The display is different if it is in a card or not.
 
 ## Demo
 
-<Story id="components-banner--default"></Story>
+{/* <Story id="components-banner--default" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
+
+<Story id="components-banner--default" />
 
 ## Usage
 
 **Inputs**
 
-- `type`: `string` - input to change its color and icon dynamically.
-- `collapsible`: `boolean` - Enable collapsible mode
+* `type`: `string` - input to change its color and icon dynamically.
+* `collapsible`: `boolean` - Enable collapsible mode
 
 **Template**
 

projects/ui-particles-angular/src/lib/gio-button-toggle-group/README.mdx

@@ -0,0 +1,30 @@
+import { Meta, Story } from '@storybook/blocks';
+import * as ReadmeStories from './gio-button-toggle-group.stories';
+
+<Meta of={ReadmeStories} />
+
+# Gio Button Toggle (group)
+
+Custom style for Angular Material button toggle group.
+
+## Demo
+
+{/* <Story id="components-button-toggle-group--default" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
+
+<Story id="components-button-toggle-group--default" />
+
+## Usage
+
+Add class `gio-button-toggle-group` to `mat-button-toggle-group` component.
+
+OR
+
+Use include mixin `gio-button-toggle-group` in your own class like :
+
+```scss
+@use '@gravitee/ui-particles-angular' as gio;
+
+.my-class {
+  @include gio.gio-button-toggle-group()
+}
+```

projects/ui-particles-angular/src/lib/gio-button/REAMDE.mdx

@@ -0,0 +1,47 @@
+import { Meta, Story } from '@storybook/blocks';
+
+<Meta title="Components / Button / README" />
+
+# Gio Button
+
+A button element is used to indicate an action.
+
+## Button styles
+
+* **Primary**: Provide the strongest visual emphasis to an action with a solid background — one per context.
+* **Basic**: For less prominent, and sometimes independent, actions.
+* **Accent**: For promotion actions.
+* **Warn**: For actions that could have destructive effects on the user’s data.
+* **Link**: Style an anchor link.
+
+## When no to use
+
+If you are directing a user to a new location, consider using an anchor `<a>` element, which can also be styled like a button when actions and destinations are present in the same set of controls.
+
+## Best practices
+
+* Use a primary button to indicate the main action of a group button set.
+* Keep buttons visually grouped.
+* Keep buttons inline when space allows.
+* Use concise and clear enough action verb to tell the users what happens when the button is activated.
+
+## Alignment
+
+* **Left alignment**: In page, buttons align with other content on the page.
+* **Right alignment**: In containers like modals, global actions or toolbars.
+* **Center alignment**: Only used for empty states where the actions are the only ones available in context.
+
+## Order
+
+* The visual hierarchy is primary buttons on the left edge, followed by basic buttons.
+
+## Icon
+
+* An icon can be used in place of text. If the action may not be universally understood, then consider using a tooltip to provide the action in text form.
+* When used with text, the icon is generally aligned to the left of the text. You can align the button to the right for actions that take users out of context. An example would be: External link.
+
+## Accessibility
+
+* Icon-only buttons must use `aria-label` to indicate the action.
+* When an icon is used with a text label, the icon should be hidden from screen readers with `aria-hidden="true"`.
+* Maintain parity between focus order and visual order (don't use CSS to reorder buttons).

projects/ui-particles-angular/src/lib/gio-card-empty-state/README.mdx

@@ -0,0 +1,18 @@
+import { Meta, Story } from '@storybook/blocks';
+import * as ReadmeStories from './gio-card-empty-state.stories';
+
+<Meta of={ReadmeStories} />
+
+# Empty state
+
+Documentation and illustrations for the card empty state component, which is used to present a message when there is no content to show on the page.
+
+## Demo
+
+{/* <Story id="components-empty-state--default" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
+
+<Story id="components-empty-state--default" />
+
+```html
+<gio-card-empty-state [icon]="search" title="No API found" subtitle="No API found. Please try again or create one."></gio-card-empty-state>
+```

projects/ui-particles-angular/src/lib/gio-confirm-and-validate-dialog/README.stories.mdx → projects/ui-particles-angular/src/lib/gio-confirm-and-validate-dialog/README.mdx

@@ -1,26 +1,29 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/blocks';
+import * as ReadmeStories from './gio-confirm-and-validate-dialog.stories';
 
-<Meta title="Components / Confirm and validate dialog / README" />
+<Meta of={ReadmeStories} />
 
 # Confirm and validate dialog
 
 Documentation and examples for Confirm and Validate dialog, a component to asking for confirmation.
 
 ## Demo
 
+{/* <Story id="components-confirm-and-validate-dialog--custom" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
+
 <Story id="components-confirm-and-validate-dialog--custom" />
 
 ## Usage
 
 **Inputs**
 
-- `title`: `string` - The dialog title.
-- `warning`: `string` - Add this string into warning banner
-- `content`: `string` | `{ componentOutlet: Type<unknown>; componentInputs?: Record<string, unknown>; }` - The dialog content override.
-- `validationMessage`: `string` - The action to do to validate. Default: `Please, type in <code>confirm</code> to confirm.`
-- `validationValue`: `string` - The dialog content override. Default: `confirm`
-- `confirmButton`: `string` - The dialog confirmation button override.
-- `confirmCancel`: `string` - The dialog cancel button override.
+* `title`: `string` - The dialog title.
+* `warning`: `string` - Add this string into warning banner
+* `content`: `string` | `{ componentOutlet: Type<unknown>; componentInputs?: Record<string, unknown>; }` - The dialog content override.
+* `validationMessage`: `string` - The action to do to validate. Default: `Please, type in <code>confirm</code> to confirm.`
+* `validationValue`: `string` - The dialog content override. Default: `confirm`
+* `confirmButton`: `string` - The dialog confirmation button override.
+* `confirmCancel`: `string` - The dialog cancel button override.
 
 Example: