AAE-40269 Add storybook v10 (#11401)

lib/stories/.storybook/main.ts

@@ -0,0 +1,36 @@
+import type { StorybookConfig } from '@storybook/angular';
+import rootMain from '../../../.storybook/main';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const config: StorybookConfig = {
+    ...rootMain,
+    framework: {
+        name: getAbsolutePath('@storybook/angular'),
+        options: {}
+    },
+    stories: ['../../core/**/*.stories.ts', '../../content-services/**/*.stories.ts', '../../process-services-cloud/**/*.stories.ts'],
+    staticDirs: [
+        { from: '../../core/src/lib/i18n', to: 'assets/adf-core/i18n' },
+        { from: '../../core/src/lib/assets/images', to: 'assets/images' },
+        { from: '../../content-services/src/lib/i18n', to: 'assets/adf-content-services/i18n' },
+        { from: '../../process-services/src/lib/i18n', to: 'assets/adf-process-services/i18n' },
+        { from: '../../process-services-cloud/src/lib/i18n', to: 'assets/adf-process-services-cloud/i18n' },
+        { from: '../../config/app.config.json', to: 'app.config.json' }
+    ],
+    addons: ['@storybook/addon-themes'],
+    webpackFinal: async (config) => {
+        if (config.performance) {
+            config.performance.hints = false;
+        } else {
+            config.performance = { hints: false };
+        }
+        return config;
+    }
+};
+
+export default config;
+
+function getAbsolutePath(value: string): any {
+    return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}

lib/stories/.storybook/preview.ts

@@ -0,0 +1,34 @@
+import { type Preview, type AngularRenderer, moduleMetadata } from '@storybook/angular';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { withThemeByClassName } from '@storybook/addon-themes';
+
+const preview: Preview = {
+    parameters: {
+        docs: { inlineStories: true },
+        controls: { expanded: true },
+        layout: 'centered'
+    },
+    decorators: [
+        moduleMetadata({
+            providers: [
+                {
+                    provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+                    useValue: {
+                        appearance: 'outline'
+                    }
+                }
+            ]
+        }),
+        withThemeByClassName<AngularRenderer>({
+            themes: {
+                light: 'adf-storybook-light-theme',
+                dark: 'adf-storybook-dark-theme'
+            },
+            defaultTheme: 'light',
+            parentSelector: 'html'
+        })
+    ],
+    tags: ['autodocs']
+};
+
+export default preview;

lib/stories/.storybook/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "moduleResolution": "bundler"
+  },
+
+  "exclude": [
+    "../**/*.spec.ts",
+    "../../core/**/*.spec.ts",
+    "../../core/**/mocks/**/*.ts",
+    "../../core/**/mock/**/*",
+    "../../core/feature-flags/**/*.ts",
+    "../../core/breadcrumbs/public-api.ts",
+    "../../core/breadcrumbs/src/index.ts",
+    "../../core/index.ts",
+    "../../core/schematics/**/*",
+    "../../core/shell/**/*",
+    "../../core/test.ts",
+    "../../core/src/lib/testing/**/*",
+    "../../core/src/lib/models/basic-auth.ts",
+    "../../core/src/lib/models/oauth2.ts",
+    "../../core/src/lib/services/startup-service-factory.ts",
+    "../../core/src/lib/card-view/directives/card-view-property-validator.spec.directive.ts",
+    "../../content-services/**/*.spec.ts",
+    "../../content-services/**/mock/**/*",
+    "../../content-services/**/mocks/**/*",
+    "../../content-services/src/lib/testing/**/*",
+    "../../content-services/src/lib/content-type/public-api.ts",
+    "../../content-services/src/lib/folder-directive/folder-edit.directive.ts",
+    "../../content-services/src/lib/content-metadata/components/content-metadata/mock-data.ts",
+    "../../content-services/src/test.ts",
+    "../../process-services-cloud/**/*.spec.ts",
+    "../../process-services-cloud/**/mocks/**/*",
+    "../../process-services-cloud/**/mock/**/*",
+    "../../process-services-cloud/src/lib/testing/**/*",
+    "../../process-services-cloud/src/test.ts",
+    "../../../.storybook/main.ts"
+  ],
+  "include": ["../src/**/*", "preview.ts", "../../core/**/*", "../../content-services/**/*", "../../process-services-cloud/**/*"]
+}

lib/stories/README.md

@@ -0,0 +1,32 @@
+# Alfresco Stories Library
+
+Contains Storybook stories from **Core**, **Content Services** and **Process Services cloud** libraries to gather them in one place.
+
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+
+<!-- toc -->
+
+- [Storybook](#storybook)
+- [License](#license)
+
+<!-- tocstop -->
+
+<!-- markdown-toc end -->
+
+## Storybook
+
+In case you would like to aggregate all the stories across libraries use
+```bash
+npm run storybook
+```
+And navigate to `http://localhost:4400/`.
+
+To create a Storybook stories library build use
+
+```bash
+npm run build-storybook
+```
+
+## License
+
+[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

lib/stories/project.json

@@ -0,0 +1,45 @@
+{
+  "name": "stories",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "lib/stories",
+  "projectType": "library",
+  "targets": {
+    "storybook": {
+      "executor": "@storybook/angular:start-storybook",
+      "options": {
+        "port": 4400,
+        "browserTarget": "stories:storybook",
+        "configDir": "lib/stories/.storybook",
+        "compodoc": false,
+        "stylePreprocessorOptions": {
+          "includePaths": ["lib", "lib/core/src/lib"]
+        },
+        "styles": ["node_modules/cropperjs/dist/cropper.min.css", "node_modules/pdfjs-dist/web/pdf_viewer.css", "lib/stories/src/styles.scss"],
+        "sourceMap": true
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@storybook/angular:build-storybook",
+      "options": {
+        "browserTarget": "stories:build-storybook",
+        "configDir": "lib/stories/.storybook",
+        "outputDir": "dist/storybook/stories",
+        "compodoc": false,
+        "styles": ["node_modules/cropperjs/dist/cropper.min.css", "node_modules/pdfjs-dist/web/pdf_viewer.css", "lib/stories/src/styles.scss"],
+        "stylePreprocessorOptions": {
+          "includePaths": ["lib", "lib/core/src/lib"]
+        }
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    }
+  }
+}

lib/stories/src/styles.scss

@@ -0,0 +1,30 @@
+@use '@angular/material' as mat;
+@use 'material-icons/iconfont/material-icons.css' as *;
+
+html {
+    color-scheme: light dark;
+    $font-family: 'Nunito Sans', sans-serif;
+
+    font-family: $font-family;
+
+    @include mat.theme(
+        (
+            color: mat.$yellow-palette,
+            typography: $font-family,
+            density: 0
+        )
+    );
+
+    &.adf-storybook-light-theme {
+        color-scheme: light;
+    }
+
+    &.adf-storybook-dark-theme {
+        color-scheme: dark;
+    }
+
+    body {
+        background: var(--mat-sys-surface);
+        color: var(--mat-sys-on-surface);
+    }
+}

lib/stories/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

lib/stories/tsconfig.lib.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "target": "es2022",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": ["dom", "es2022"]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [],
+  "include": ["**/*.ts"]
+}