AAE-40269 Add storybook v10 (#11401)

lib/content-services/.eslintrc.json

@@ -6,7 +6,11 @@
       "files": ["*.ts"],
       "extends": ["plugin:@nx/angular"],
       "parserOptions": {
-        "project": ["lib/content-services/tsconfig.lib.json", "lib/content-services/tsconfig.spec.json"],
+        "project": [
+          "lib/content-services/tsconfig.lib.json",
+          "lib/content-services/tsconfig.spec.json",
+          "lib/content-services/.storybook/tsconfig.json"
+        ],
         "createDefaultProgram": true
       },
       "rules": {

lib/content-services/.storybook/main.ts

@@ -0,0 +1,23 @@
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import type { StorybookConfig } from '@storybook/angular';
+import rootMain from '../../../.storybook/main';
+
+const config: StorybookConfig = {
+    ...rootMain,
+    stories: ['../**/*.stories.@(js|jsx|ts|tsx)'],
+    staticDirs: [
+        { from: '../src/lib/i18n', to: 'assets/adf-core/i18n' },
+        { from: '../src/lib/assets/images', to: 'assets/images' }
+    ],
+    framework: {
+        name: getAbsolutePath('@storybook/angular'),
+        options: {}
+    }
+};
+
+export default config;
+
+function getAbsolutePath(value: string): any {
+    return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}

lib/content-services/.storybook/preview.ts

@@ -0,0 +1,11 @@
+import type { Preview } from '@storybook/angular';
+
+const preview: Preview = {
+    parameters: {
+        docs: { inlineStories: true },
+        controls: { expanded: true }
+    },
+    tags: ['autodocs']
+};
+
+export default preview;

lib/content-services/.storybook/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "moduleResolution": "bundler"
+  },
+
+  "exclude": ["../**/*.spec.ts" ],
+  "include": ["../src/**/*", "*.ts"]
+}

lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss

@@ -3,15 +3,14 @@
 adf-content-node-selector {
     .adf-upload-dialog {
         box-shadow: none;
-
-        &__content {
-            max-height: 64%;
-        }
-
         height: 100%;
         width: 100%;
         position: unset;
         bottom: unset;
+
+        &__content {
+            max-height: 64%;
+        }
     }
 
     .adf-upload-dialog-container {

lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.stories.component.ts

@@ -0,0 +1,60 @@
+/*!
+ * @license
+ * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, inject, Input, OnInit, OnChanges } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { DownloadZipDialogComponent } from './download-zip.dialog';
+import { zipNode, downloadEntry } from './mock/download-zip-data.mock';
+import { FileDownloadStatus } from '@alfresco/js-api';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+    selector: 'adf-download-zip-dialog-storybook',
+    template: `<button mat-raised-button (click)="openDialog()">Open dialog</button>`,
+    imports: [MatButtonModule]
+})
+export class DownloadZipDialogStorybookComponent implements OnInit, OnChanges {
+    @Input()
+    showLoading: boolean;
+
+    private readonly dialog = inject(MatDialog);
+
+    ngOnInit(): void {
+        this.setEntryStatus();
+    }
+
+    ngOnChanges(): void {
+        this.setEntryStatus();
+    }
+
+    setEntryStatus() {
+        if (this.showLoading) {
+            downloadEntry.entry.status = FileDownloadStatus.IN_PROGRESS;
+        } else {
+            downloadEntry.entry.status = FileDownloadStatus.DONE;
+        }
+    }
+
+    openDialog() {
+        this.dialog.open(DownloadZipDialogComponent, {
+            minWidth: '50%',
+            data: {
+                nodeIds: [zipNode.entry.id]
+            }
+        });
+    }
+}

lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.stories.ts

@@ -0,0 +1,86 @@
+/*!
+ * @license
+ * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { applicationConfig, Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { MatButtonModule } from '@angular/material/button';
+import { DownloadZipDialogStorybookComponent } from './download-zip.dialog.stories.component';
+import { AlfrescoApiServiceMock, ContentApiMock, DownloadZipMockService, NodesApiMock } from './mock/download-zip-service.mock';
+import { DownloadZipService } from './services/download-zip.service';
+import { ContentService } from '../../common/services/content.service';
+import { NodesApiService } from '../../common/services/nodes-api.service';
+import { MatDialogModule } from '@angular/material/dialog';
+import { AlfrescoApiService } from '../../services/alfresco-api.service';
+import { provideStoryCore } from '@alfresco/adf-core';
+
+const meta: Meta<DownloadZipDialogStorybookComponent> = {
+    component: DownloadZipDialogStorybookComponent,
+    title: 'Core/Dialog/Download ZIP Dialog',
+    decorators: [
+        moduleMetadata({
+            imports: [MatButtonModule, MatDialogModule, DownloadZipDialogStorybookComponent],
+            providers: [
+                {
+                    provide: AlfrescoApiService,
+                    useClass: AlfrescoApiServiceMock
+                },
+                {
+                    provide: DownloadZipService,
+                    useClass: DownloadZipMockService
+                },
+                {
+                    provide: ContentService,
+                    useClass: ContentApiMock
+                },
+                {
+                    provide: NodesApiService,
+                    useClass: NodesApiMock
+                }
+            ]
+        }),
+        applicationConfig({
+            providers: [...provideStoryCore()]
+        })
+    ],
+    argTypes: {
+        showLoading: {
+            control: {
+                type: 'boolean'
+            },
+            table: {
+                category: 'Story controls',
+                type: {
+                    summary: 'boolean'
+                },
+                defaultValue: {
+                    summary: 'false'
+                }
+            }
+        }
+    },
+    args: {
+        showLoading: false
+    }
+};
+
+export default meta;
+type Story = StoryObj<DownloadZipDialogStorybookComponent>;
+
+export const DownloadZIPDialog: Story = {
+    render: (args) => ({
+        props: args
+    })
+};

lib/content-services/src/lib/dialogs/download-zip/mock/download-zip-data.mock.ts

@@ -0,0 +1,33 @@
+/*!
+ * @license
+ * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DownloadEntry } from '@alfresco/js-api';
+
+export const zipNode = {
+    entry: {
+        name: 'files.zip',
+        contentUrl: './assets/files.zip',
+        id: 'files_in_zip'
+    }
+};
+
+export const downloadEntry: DownloadEntry = {
+    entry: {
+        id: 'entryId',
+        status: 'DONE'
+    }
+};

lib/content-services/src/lib/dialogs/download-zip/mock/download-zip-service.mock.ts

@@ -0,0 +1,82 @@
+/*!
+ * @license
+ * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DownloadBodyCreate, DownloadEntry, DownloadsApi, Node } from '@alfresco/js-api';
+import { from, Observable, of, ReplaySubject, Subject } from 'rxjs';
+import { catchError } from 'rxjs/internal/operators/catchError';
+import { zipNode, downloadEntry } from './download-zip-data.mock';
+import { DownloadZipService } from '../services/download-zip.service';
+import { ContentService, AlfrescoApiService } from '../../../../..';
+import { inject } from '@angular/core';
+
+export class AlfrescoApiServiceMock extends AlfrescoApiService {
+    nodeUpdated = new Subject<Node>();
+    alfrescoApiInitialized = new ReplaySubject<boolean>(1);
+    alfrescoApi = inject(AlfrescoApiMock) as any;
+
+    async load() {}
+    getInstance = () => this.alfrescoApi;
+}
+
+class AlfrescoApiMock extends AlfrescoApiService {
+    core = inject(CoreMock);
+    content = inject(ContentApiMock);
+
+    isOauthConfiguration = () => true;
+    isLoggedIn = () => true;
+    isEcmConfiguration = () => true;
+}
+
+export class ContentApiMock extends ContentService {
+    getContentUrl = (): string => zipNode.entry.contentUrl;
+}
+
+class CoreMock {
+    downloadsApi = new DownloadsApiMock();
+    nodesApi = new NodesApiMock();
+}
+
+export class NodesApiMock {
+    getNode = (): any => of(zipNode.entry);
+}
+
+class DownloadsApiMock extends DownloadsApi {
+    createDownload = (): Promise<DownloadEntry> => Promise.resolve(downloadEntry);
+
+    getDownload = (): Promise<DownloadEntry> => Promise.resolve(downloadEntry);
+    cancelDownload = () => Promise.resolve(true);
+}
+
+export class DownloadZipMockService extends DownloadZipService {
+    private _mockDownloadsApi: DownloadsApi;
+    get downloadsApi(): DownloadsApi {
+        this._mockDownloadsApi = this._mockDownloadsApi ?? new DownloadsApiMock();
+        return this._mockDownloadsApi;
+    }
+
+    createDownload(payload: DownloadBodyCreate): Observable<DownloadEntry> {
+        return from(this.downloadsApi.createDownload(payload)).pipe(catchError((err) => of(err)));
+    }
+
+    getDownload(downloadId: string): Observable<DownloadEntry> {
+        return from(this.downloadsApi.getDownload(downloadId));
+    }
+
+    cancelDownload(downloadId: string) {
+        this.downloadsApi.cancelDownload(downloadId);
+    }
+}

lib/content-services/tsconfig.json

@@ -11,6 +11,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
     }
   ],
   "compilerOptions": {

lib/content-services/tsconfig.lib.json

@@ -15,5 +15,6 @@
     "target": "ES2022",
     "useDefineForClassFields": false
   },
+  "exclude": ["./test.ts", "**/*.spec.ts", "**/*.test.ts", "**/*.stories.ts", "**/*.mock.ts"],
   "include": ["src/**/*.ts", "index.ts"]
 }