chore(storybook): upgrade storybook (#29562)

### Parent Issue #29530 ### Objective The stories of our components use a StoryBook older version and there are some stories broken and this is important as part of the PrimeNG upgrade to V17 to check that the components work correctly with this migration as a result this task is to fix the broken storybooks and upgrade using the latest StoryBook version. ### Proposed Changes * Upgrade storybook from v7 to v8 * `Story` was removed in v8 and replace it for `StoryObj` * Use new format to write stories with strong typing * Support to signals inputs in stories * 8 Fixed stories (WIP) ### Checklist - [x] Tests - [x] Translations - [x] Security Implications Contemplated (add notes if applicable) ### Fixed Stories Original | Updated :-------------------------:|:-------------------------: ![localhost_4400__path=_docs_dotcms-content-palette--docs](https://github.com/user-attachments/assets/76fd5769-bd7b-459d-abdf-29fafeeecb2c) | ![localhost_4401__path=_docs_dotcms-content-palette--docs](https://github.com/user-attachments/assets/23aade9f-c1ea-49ed-b59d-458dc28f59d4) ![localhost_4400__path=_docs_dotcms-content-palette--docs](https://github.com/user-attachments/assets/15bb931c-5b2a-47e1-aedd-d2a2047a8e43) | ![localhost_4401__path=_docs_dotcms-content-palette--docs](https://github.com/user-attachments/assets/3097dae1-6fac-4260-8425-5a28909ead4f) ![localhost_4400__path=_docs_primeng-form-treeselect--docs](https://github.com/user-attachments/assets/6cccef59-adfa-4180-91a9-9ef22ca39a84) | ![localhost_4401__path=_docs_dotcms-content-palette--docs (1)](https://github.com/user-attachments/assets/352e827a-0c03-4410-bb64-fde683a4477a) ![localhost_4400__path=_docs_primeng-form-treeselect--docs (1)](https://github.com/user-attachments/assets/0c32516b-2261-438a-838a-05661d2e389a) | ![localhost_4401__path=_docs_dotcms-content-palette--docs (2)](https://github.com/user-attachments/assets/864ba32c-41d4-46cc-acd0-6210eac55d24) ![localhost_4401__path=_docs_dotcms-device-selector-seo--docs](https://github.com/user-attachments/assets/73208220-c092-4008-8da8-87c7d059e814) | ![localhost_4400_](https://github.com/user-attachments/assets/4b316438-e317-420a-a420-519acb2d34b1) ![localhost_4401__path=_docs_dotcms-device-selector-seo--docs (2)](https://github.com/user-attachments/assets/20f9a891-334f-4962-acb1-7d386dc57d0c) | ![localhost_4400__path=_docs_dotcms-results-seo-tool--docs](https://github.com/user-attachments/assets/2f8d7503-dfa4-41f9-8730-9ba9713b53f5)
dotCMS · Aug 14, 2024 · 6264e97 · 6264e97
1 parent d9fcd27
commit 6264e97
Show file tree

Hide file tree

Showing 103 changed files with 5,936 additions and 7,159 deletions.
diff --git a/core-web/.storybook/main.js b/core-web/.storybook/main.js
@@ -1,41 +1,19 @@
 module.exports = {
     addons: [
-        {
-            name: '@storybook/addon-docs',
-            options: {
-                configureJSX: true,
-                babelOptions: {},
-                sourceLoaderOptions: null,
-                transcludeMarkdown: true
-            }
-        },
-        '@storybook/addon-actions'
+        '@storybook/addon-essentials'
     ],
-
     // uncomment the property below if you want to apply some webpack config globally
     // webpackFinal: async (config, { configType }) => {
     //   // Make whatever fine-grained changes you need that should apply to all storybook configs
     //   // Return the altered config
     //   return config;
     // },
     stories: [],
-
     framework: {
         name: '@storybook/angular',
-        options: {
-            builder: {
-                useSWC: true
-            }
-        }
+        options: {}
     },
-
     docs: {
         autodocs: true
-    },
-
-    swc: (config, options) => {
-        return {
-            ...config
-        };
     }
 };
diff --git a/core-web/apps/dotcms-ui/.storybook/main.js b/core-web/apps/dotcms-ui/.storybook/main.js
@@ -18,9 +18,6 @@ module.exports = {
         '../../../libs/portlets/**/*.stories.@(js|jsx|ts|tsx|mdx)'
     ],
     addons: ['@storybook/addon-essentials', ...rootMain.addons],
-    features: {
-        previewMdx2: true
-    },
     webpackFinal: async (config, { configType }) => {
         // apply any global webpack configs that might have been specified in .storybook/main.js
         if (rootMain.webpackFinal) {

diff --git a/core-web/apps/dotcms-ui/.storybook/manager.js b/core-web/apps/dotcms-ui/.storybook/manager.js
@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import dotcmsTheme from './dotcms-theme';
 
 addons.setConfig({

diff --git a/...ortlets/dot-categories/dot-categories-create-edit/dot-categories-create-edit.component.ts b/...ortlets/dot-categories/dot-categories-create-edit/dot-categories-create-edit.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 
 import { MenuItem } from 'primeng/api';
 
@@ -10,8 +10,8 @@ import { DotCategoriesCreateEditStore } from './store/dot-categories-create-edit
     providers: [DotCategoriesCreateEditStore]
 })
 export class DotCategoriesCreateEditComponent {
-    vm$ = this.store.vm$;
-    constructor(private store: DotCategoriesCreateEditStore) {}
+    readonly #store = inject(DotCategoriesCreateEditStore);
+    vm$ = this.#store.vm$;
 
     /**
      * The function takes a category object as a parameter, and then calls the updateCategory function
@@ -20,6 +20,6 @@ export class DotCategoriesCreateEditComponent {
      * @memberof DotCategoriesCreateEditComponent
      */
     updateCategory(category: MenuItem) {
-        this.store.updateCategory(category);
+        this.#store.updateCategory(category);
     }
 }
diff --git a/...s-ui/src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.ts b/...s-ui/src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.ts
@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
 
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, inject, ViewChild } from '@angular/core';
 
 import { LazyLoadEvent } from 'primeng/api';
 import { Table } from 'primeng/table';
@@ -16,7 +16,9 @@ import { DotCategoriesListState, DotCategoriesListStore } from './store/dot-cate
     providers: [DotCategoriesListStore]
 })
 export class DotCategoriesListComponent {
-    vm$: Observable<DotCategoriesListState> = this.store.vm$;
+    readonly #store = inject(DotCategoriesListStore);
+
+    vm$: Observable<DotCategoriesListState> = this.#store.vm$;
     selectedCategories: DotCategory[] = [];
     breadCrumbHome = { icon: 'pi pi-home' };
     isContentFiltered = false;
@@ -25,8 +27,6 @@ export class DotCategoriesListComponent {
     @ViewChild('gf')
     globalSearch: ElementRef;
 
-    constructor(private store: DotCategoriesListStore) {}
-
     /**
      * Add category in breadcrumb
      * @param {DotCategory} category
@@ -35,7 +35,7 @@ export class DotCategoriesListComponent {
     addBreadCrumb(category: DotCategory) {
         this.dataTable.filter(category.inode, 'inode', null);
         this.dataTable.filter(null, 'global', null);
-        this.store.addCategoriesBreadCrumb({ label: category.categoryName, id: category.inode });
+        this.#store.addCategoriesBreadCrumb({ label: category.categoryName, id: category.inode });
     }
 
     /**5
@@ -45,7 +45,7 @@ export class DotCategoriesListComponent {
      */
     updateBreadCrumb(event) {
         const { item } = event;
-        this.store.updateCategoriesBreadCrumb(item);
+        this.#store.updateCategoriesBreadCrumb(item);
         // for getting child categories need to pass category ID
         this.dataTable.filter(item.id || null, 'inode', null);
         this.dataTable.filter(null, 'global', null);
@@ -56,7 +56,7 @@ export class DotCategoriesListComponent {
      * @memberof DotCategoriesListComponent
      */
     handleRowCheck(): void {
-        this.store.updateSelectedCategories(this.selectedCategories);
+        this.#store.updateSelectedCategories(this.selectedCategories);
     }
 
     /**
@@ -77,9 +77,9 @@ export class DotCategoriesListComponent {
      */
     loadCategories(event: LazyLoadEvent) {
         if (event?.filters?.inode) {
-            this.store.getChildrenCategories(event);
+            this.#store.getChildrenCategories(event);
         } else {
-            this.store.getCategories(event);
+            this.#store.getCategories(event);
         }
 
         // for reset search field

diff --git a/...apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.ts b/...apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.ts
@@ -3,6 +3,7 @@ import { Subject } from 'rxjs';
 import {
     Component,
     ElementRef,
+    inject,
     OnDestroy,
     QueryList,
     ViewChild,
@@ -41,15 +42,16 @@ export class ContainerListComponent implements OnDestroy {
     @ViewChildren('tableRow')
     tableRows: QueryList<ElementRef<HTMLTableRowElement>>;
 
-    vm$ = this.store.vm$;
-    notify$ = this.store.notify$;
+    readonly #store = inject(DotContainerListStore);
+
+    vm$ = this.#store.vm$;
+    notify$ = this.#store.notify$;
 
     selectedContainers: DotContainer[] = [];
 
     private destroy$: Subject<boolean> = new Subject<boolean>();
 
     constructor(
-        private store: DotContainerListStore,
         private dotMessageService: DotMessageService,
         private dotMessageDisplayService: DotMessageDisplayService,
         private dialogService: DialogService,
@@ -62,7 +64,7 @@ export class ContainerListComponent implements OnDestroy {
 
         this.siteService.switchSite$
             .pipe(skip(1)) // Skip initialization
-            .subscribe(({ identifier }) => this.store.getContainersByHost(identifier));
+            .subscribe(({ identifier }) => this.#store.getContainersByHost(identifier));
     }
 
     ngOnDestroy(): void {
@@ -76,7 +78,7 @@ export class ContainerListComponent implements OnDestroy {
      * @memberof ContainerListComponent
      */
     changeContentTypeSelector(value: string) {
-        this.store.getContainersByContentType(value);
+        this.#store.getContainersByContentType(value);
     }
 
     /**
@@ -95,7 +97,7 @@ export class ContainerListComponent implements OnDestroy {
      * @memberof ContainerListComponent
      */
     handleRowClick(container: DotContainer) {
-        this.store.editContainer(container);
+        this.#store.editContainer(container);
     }
 
     /**
@@ -105,7 +107,7 @@ export class ContainerListComponent implements OnDestroy {
      * @memberof ContainerListComponent
      */
     handleArchivedFilter(checked: boolean): void {
-        this.store.getContainersByArchiveState(checked);
+        this.#store.getContainersByArchiveState(checked);
     }
 
     /**
@@ -115,7 +117,7 @@ export class ContainerListComponent implements OnDestroy {
      * @memberof ContainerListComponent
      */
     handleQueryFilter(query: string): void {
-        this.store.getContainersByQuery(query);
+        this.#store.getContainersByQuery(query);
     }
 
     /**
@@ -125,7 +127,7 @@ export class ContainerListComponent implements OnDestroy {
      * @memberof DotContainerListComponent
      */
     loadDataPaginationEvent({ first }: { first: number }): void {
-        this.store.getContainersWithOffset(first);
+        this.#store.getContainersWithOffset(first);
     }
 
     /**
@@ -134,11 +136,11 @@ export class ContainerListComponent implements OnDestroy {
      * @memberof ContainerListComponent
      */
     resetBundleIdentifier(): void {
-        this.store.updateBundleIdentifier(null);
+        this.#store.updateBundleIdentifier(null);
     }
 
     setContainerActions(container: DotContainer): DotActionMenuItem[] {
-        return this.store.getContainerActions(container);
+        return this.#store.getContainerActions(container);
     }
 
     /**
@@ -176,7 +178,7 @@ export class ContainerListComponent implements OnDestroy {
                 container.identifier !== 'SYSTEM_CONTAINER' &&
                 container.source !== CONTAINER_SOURCE.FILE
         );
-        this.store.updateSelectedContainers(filterContainers);
+        this.#store.updateSelectedContainers(filterContainers);
     }
 
     private notifyResult(
@@ -194,8 +196,8 @@ export class ContainerListComponent implements OnDestroy {
             this.showToastNotification(message);
         }
 
-        this.store.clearSelectedContainers();
-        this.store.loadCurrentContainersPage();
+        this.#store.clearSelectedContainers();
+        this.#store.loadCurrentContainersPage();
     }
 
     private showToastNotification(message: string): void {

diff --git a/...iners/dot-container-create/dot-container-properties/dot-container-properties.component.ts b/...iners/dot-container-create/dot-container-properties/dot-container-properties.component.ts
@@ -1,7 +1,7 @@
 import { Subject } from 'rxjs';
 
 import { animate, style, transition, trigger } from '@angular/animations';
-import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, inject, OnInit } from '@angular/core';
 import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 
 import { pairwise, startWith, take, takeUntil } from 'rxjs/operators';
@@ -26,23 +26,22 @@ import {
     providers: [DotContainerPropertiesStore]
 })
 export class DotContainerPropertiesComponent implements OnInit, AfterViewInit {
-    vm$ = this.store.vm$;
+    readonly #store = inject(DotContainerPropertiesStore);
+    readonly #dotRouterService = inject(DotRouterService);
+
+    vm$ = this.#store.vm$;
     editor: MonacoEditor;
     form: FormGroup;
     private destroy$: Subject<boolean> = new Subject<boolean>();
 
     constructor(
-        private store: DotContainerPropertiesStore,
         private dotMessageService: DotMessageService,
         private fb: FormBuilder,
-        private dotAlertConfirmService: DotAlertConfirmService,
-        private dotRouterService: DotRouterService
-    ) {
-        //
-    }
+        private dotAlertConfirmService: DotAlertConfirmService
+    ) {}
 
     ngOnInit(): void {
-        this.store.containerAndStructure$
+        this.#store.containerAndStructure$
             .pipe(take(1))
             .subscribe((state: DotContainerPropertiesState) => {
                 const { container, containerStructures } = state;
@@ -69,14 +68,14 @@ export class DotContainerPropertiesComponent implements OnInit, AfterViewInit {
 
                 this.addContainerFormControl(containerStructures);
                 if (this.form.value.identifier) {
-                    this.store.updateOriginalFormState(this.form.value);
+                    this.#store.updateOriginalFormState(this.form.value);
                 }
             });
 
         this.form.valueChanges
             .pipe(takeUntil(this.destroy$), startWith(this.form.value), pairwise())
             .subscribe(([prevValue, currValue]) => {
-                this.store.updateFormStatus({
+                this.#store.updateFormStatus({
                     invalidForm: !this.form.valid,
                     container: currValue
                 });
@@ -89,7 +88,7 @@ export class DotContainerPropertiesComponent implements OnInit, AfterViewInit {
     }
 
     ngAfterViewInit(): void {
-        this.store.loadContentTypesAndUpdateVisibility();
+        this.#store.loadContentTypesAndUpdateVisibility();
     }
 
     /**
@@ -150,7 +149,7 @@ export class DotContainerPropertiesComponent implements OnInit, AfterViewInit {
      * @memberof DotContainerPropertiesComponent
      */
     showLoopInput(): void {
-        this.store.updatePrePostLoopInputVisibility(true);
+        this.#store.updatePrePostLoopInputVisibility(true);
     }
 
     /**
@@ -167,7 +166,7 @@ export class DotContainerPropertiesComponent implements OnInit, AfterViewInit {
             ]);
             this.form.get('code').clearValidators();
             this.form.get('code').reset('');
-            this.store.updateContentTypeVisibility(true);
+            this.#store.updateContentTypeVisibility(true);
         } else {
             this.form.get('code').setValidators(Validators.required);
             this.form.get('containerStructures').clearValidators();
@@ -184,12 +183,12 @@ export class DotContainerPropertiesComponent implements OnInit, AfterViewInit {
     save(): void {
         const formValues = this.form.value;
         if (formValues.identifier) {
-            this.store.editContainer(formValues);
-            this.store.updateOriginalFormState(formValues);
+            this.#store.editContainer(formValues);
+            this.#store.updateOriginalFormState(formValues);
             this.form.updateValueAndValidity();
         } else {
             delete formValues.identifier;
-            this.store.saveContainer(formValues);
+            this.#store.saveContainer(formValues);
         }
     }
 
@@ -199,7 +198,7 @@ export class DotContainerPropertiesComponent implements OnInit, AfterViewInit {
      * @memberof DotContainerPropertiesComponent
      */
     cancel(): void {
-        this.dotRouterService.goToURL('/containers');
+        this.#dotRouterService.goToURL('/containers');
     }
 
     /**
@@ -242,7 +241,7 @@ export class DotContainerPropertiesComponent implements OnInit, AfterViewInit {
         this.form.get('maxContentlets').setValue(0);
         this.form.updateValueAndValidity();
 
-        this.store.updateContentTypeAndPrePostLoopVisibility({
+        this.#store.updateContentTypeAndPrePostLoopVisibility({
             isContentTypeVisible: false,
             showPrePostLoopInput: false
         });