AAE-40269 Add storybook v10 (#11401)

docs/storybook/adding-new-story.md

@@ -0,0 +1,81 @@
+# Adding a New Story
+
+This guide describes how to create and structure a new story for a component in the Alfresco Angular Components repository.
+
+## File Location
+
+Story files should be co-located with the component they are documenting. This keeps the stories close to the source code and makes them easier to find and maintain.
+
+## Naming Convention
+
+The file should be named using the pattern:
+`[component-name].stories.ts`
+
+For example, if your component is `my-component.component.ts`, the story file should be `my-component.component.stories.ts`.
+
+## Basic Structure
+
+A typical story file includes:
+
+1.  Imports for `Meta`, `Story`, `moduleMetadata` from `@storybook/angular`.
+2.  The component configuration using `applicationConfig` to provide necessary dependencies.
+3.  Usage of `provideStoryCore()` (or other library-specific providers) to set up the environment.
+
+### Example
+
+Here is an example of how to set up a basic story for a component.
+
+```typescript
+import { Meta, StoryObj, moduleMetadata, applicationConfig } from '@storybook/angular';
+import { MyComponent } from './my.component';
+import { provideStoryCore } from '@alfresco/adf-core/testing'; // Adjust import based on your library location
+import { CommonModule } from '@angular/common';
+
+const meta: Meta<MyComponent> = {
+    title: 'Core/My Component',
+    component: MyComponent,
+    decorators: [
+        applicationConfig({
+            providers: [...provideStoryCore()]
+        }),
+        moduleMetadata({
+            imports: [MyComponent]
+        })
+    ],
+    argTypes: {
+        // Define controls for your inputs here
+        label: { control: 'text' },
+        isDisabled: { control: 'boolean' }
+    }
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
+
+export const Default: Story = {
+    args: {
+        label: 'Click me',
+        isDisabled: false
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        label: 'Disabled',
+        isDisabled: true
+    }
+};
+```
+
+### Dependencies
+
+The `provideStoryCore()` function helper is essential for setting up the common providers required by ADF components, such as translation services, authentication mocks, and app configuration.
+
+If your component requires specific services not included in `provideStoryCore()`, you should add them to the `providers` array in the `applicationConfig`.
+
+## Useful Links
+
+- [Writing Stories](https://storybook.js.org/docs/angular/writing-stories/introduction)
+- [Args and Controls](https://storybook.js.org/docs/angular/writing-stories/args)
+- [Decorators](https://storybook.js.org/docs/angular/writing-stories/decorators)
+- [Naming Components and Hierarchy](https://storybook.js.org/docs/angular/writing-stories/naming-components-and-hierarchy)