chore: Upgrade Storybook to v8 (#29624)

### Parent Issue
#29623

### Proposed Changes
* Upgrade storybook fromv7 to v8
* Support signals inputs

### Checklist
- [x] Tests
- [x] Translations
- [x] Security Implications Contemplated (add notes if applicable)

### Additional Info

![Screenshot 2024-08-16 at 4 15
24 PM](https://github.com/user-attachments/assets/2d81bba2-8954-410f-95c2-97519a45b6e9)

![Screenshot 2024-08-16 at 4 23
17 PM](https://github.com/user-attachments/assets/cd86758d-8451-44ed-bc2a-630ec01a46ab)

core-web/apps/dotcms-ui/src/stories/dotcms/menu/DotCollapseBreadcrumb.stories.ts

@@ -11,14 +11,11 @@ import {
 import { importProvidersFrom } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { MenuItem } from 'primeng/api';
 import { ToastModule } from 'primeng/toast';
 
 import { DotCollapseBreadcrumbComponent } from '@dotcms/ui';
 
-type Args = DotCollapseBreadcrumbComponent & { model: MenuItem[]; maxItems: number };
-
-const meta: Meta<Args> = {
+const meta: Meta<DotCollapseBreadcrumbComponent> = {
     title: 'DotCMS/Menu/DotCollapseBreadcrumb',
     component: DotCollapseBreadcrumbComponent,
     decorators: [
@@ -43,10 +40,10 @@ const meta: Meta<Args> = {
         }
     },
     argTypes: {
-        model: {
+        $model: {
             description: 'Menu items to display'
         },
-        maxItems: {
+        $maxItems: {
             description: 'Max items to display',
             control: { type: 'number' }
         }
@@ -59,12 +56,12 @@ const meta: Meta<Args> = {
 
 export default meta;
 
-type Story = StoryObj<Args>;
+type Story = StoryObj<DotCollapseBreadcrumbComponent>;
 
 export const Default: Story = {
     args: {
-        maxItems: 4,
-        model: [
+        $maxItems: 4,
+        $model: [
             { label: 'Electronics', command: console.log },
             { label: 'Computer', command: console.log },
             { label: 'Accessories', command: console.log },

core-web/apps/dotcms-ui/src/stories/dotcms/menu/DotCrumbtrail.stories.ts

@@ -5,9 +5,7 @@ import { DotCrumbtrailComponent } from '@components/dot-crumbtrail/dot-crumbtrai
 import { DotCrumbtrailModule } from '@components/dot-crumbtrail/dot-crumbtrail.module';
 import { DotCrumbtrailService } from '@components/dot-crumbtrail/service/dot-crumbtrail.service';
 
-type Args = DotCrumbtrailComponent;
-
-const meta: Meta<Args> = {
+const meta: Meta<DotCrumbtrailComponent> = {
     title: 'DotCMS/Menu/DotCrumbtrail',
     component: DotCrumbtrailComponent,
     decorators: [
@@ -60,6 +58,6 @@ const meta: Meta<Args> = {
 
 export default meta;
 
-type Story = StoryObj<Args>;
+type Story = StoryObj<DotCrumbtrailComponent>;
 
 export const Default: Story = {};

core-web/libs/ui/src/lib/components/dot-copy-button/dot-copy-button.stories.ts

@@ -6,12 +6,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import { DotMessageService } from '@dotcms/data-access';
 import { DotClipboardUtil, DotCopyButtonComponent } from '@dotcms/ui';
 
-type Args = DotCopyButtonComponent & {
-    label: string;
-    originalTooltipText: string;
-};
-
-const meta: Meta = {
+const meta: Meta<DotCopyButtonComponent> = {
     title: 'DotCMS/Copy Button',
     component: DotCopyButtonComponent,
     args: {
@@ -40,6 +35,6 @@ const meta: Meta = {
 };
 export default meta;
 
-type Story = StoryObj<Args>;
+type Story = StoryObj<DotCopyButtonComponent>;
 
 export const Primary: Story = {};

core-web/package.json

@@ -72,7 +72,6 @@
         "@ngrx/operators": "^17.2.0",
         "@ngrx/signals": "^17.2.0",
         "@nx/angular": "19.5.6",
-        "@storybook/builder-webpack5": "^8.1.1",
         "@tarekraafat/autocomplete.js": "^10.2.6",
         "@tinymce/tinymce-angular": "^7.0.0",
         "@tiptap/core": "^2.0.0-beta.218",
@@ -124,7 +123,6 @@
         "regenerator-runtime": "^0.13.9",
         "rxjs": "~6.6.3",
         "shade-generator": "^1.2.7",
-        "storybook": "^7.6.3",
         "superstruct": "^1.0.3",
         "terser": "^5.28.1",
         "test": "^0.6.0",
@@ -169,14 +167,15 @@
         "@schematics/angular": "17.3.8",
         "@stencil/core": "^2.22.2",
         "@stencil/sass": "^2.0.3",
-        "@storybook/addon-actions": "^7.6.3",
-        "@storybook/addon-docs": "^7.6.3",
-        "@storybook/addon-essentials": "^7.6.3",
-        "@storybook/angular": "^7.6.3",
-        "@storybook/blocks": "^7.6.3",
-        "@storybook/manager-api": "^7.6.3",
-        "@storybook/preview-api": "^7.6.3",
-        "@storybook/theming": "^7.6.3",
+        "@storybook/addon-docs": "8.2.9",
+        "@storybook/addon-essentials": "8.2.9",
+        "@storybook/angular": "8.2.9",
+        "@storybook/blocks": "8.2.9",
+        "@storybook/channels": "8.2.9",
+        "@storybook/core-events": "8.2.9",
+        "@storybook/manager-api": "8.2.9",
+        "@storybook/preview-api": "8.2.9",
+        "@storybook/theming": "8.2.9",
         "@svgr/rollup": "^6.1.2",
         "@testing-library/jest-dom": "^6.1.6",
         "@testing-library/react": "^14.0.0",
@@ -211,7 +210,7 @@
         "eslint-plugin-jsx-a11y": "6.8.0",
         "eslint-plugin-react": "7.34.2",
         "eslint-plugin-react-hooks": "4.6.2",
-        "eslint-plugin-storybook": "^0.8.0",
+        "eslint-plugin-storybook": "0.8.0",
         "fake-indexeddb": "^5.0.2",
         "fetch-mock": "^9.11.0",
         "flatpickr": "^4.5.7",
@@ -255,6 +254,7 @@
         "puppeteer": "~5.3.1",
         "react-test-renderer": "^18.2.0",
         "sass": "^1.56.2",
+        "storybook": "8.2.9",
         "ts-jest": "29.1.1",
         "ts-node": "10.9.1",
         "tslint": "~6.1.3",