chore(storybook): upgrade in stories

dotCMS · Aug 13, 2024 · d12cd21 · d12cd21
1 parent 3db5c5f
commit d12cd21
Show file tree

Hide file tree

Showing 14 changed files with 331 additions and 306 deletions.
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-portlet-base/dot-portlet-base.stories.ts b/core-web/apps/dotcms-ui/src/app/view/components/dot-portlet-base/dot-portlet-base.stories.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { moduleMetadata } from '@storybook/angular';
+import { moduleMetadata, Meta, StoryObj, componentWrapperDecorator } from '@storybook/angular';
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -19,7 +19,7 @@ const MessageMocks = new MockDotMessageService({
     actions: 'Actions'
 });
 
-export default {
+const meta: Meta = {
     title: 'DotCMS/Portlet',
     component: DotPortletBaseComponent,
     decorators: [
@@ -37,16 +37,12 @@ export default {
                 DotPortletBaseModule,
                 DotApiLinkComponent,
                 TabViewModule
-            ]
+            ],
         }),
-        (storyFunc) => {
-            const story = storyFunc();
-
-            return {
-                ...story,
-                template: `<div style="background-color: #f1f3f4; width: 100%; overflow: hidden; border: solid 1px #ccc">${story.template}</div>`
-            };
-        }
+        componentWrapperDecorator(
+            (story) =>
+                `<div style="background-color: #f1f3f4; width: 100%; overflow: hidden; border: solid 1px #ccc">${story}</div>`
+        )
     ],
     parameters: {
         docs: {
@@ -58,6 +54,9 @@ export default {
         }
     }
 };
+export default meta;
+
+type Story = StoryObj;
 
 const portletContent = (text = `Hello, I'm the portlet content`) => {
     return `
@@ -72,19 +71,21 @@ const NoActionsTemplate = `
     ${portletContent()}
 </dot-portlet-base>
 `;
-export const NoActions = () => ({
-    props: {
+export const NoActions: Story = {
+    parameters: {
+        docs: {
+            source: {
+                code: NoActionsTemplate
+            }
+        }
+    },
+    args: {
         title: 'This is the portlet title'
     },
-    template: NoActionsTemplate
-});
-
-NoActions.parameters = {
-    docs: {
-        source: {
-            code: NoActionsTemplate
-        }
-    }
+    render: (args) => ({
+        props: args,
+        template: NoActionsTemplate
+    })
 };
 
 const BasicActionsTemplate = `
@@ -93,8 +94,15 @@ const BasicActionsTemplate = `
     ${portletContent()}
 </dot-portlet-base>
 `;
-export const BasicActions = () => ({
-    props: {
+export const BasicActions: Story = {
+    parameters: {
+        docs: {
+            source: {
+                code: BasicActionsTemplate
+            }
+        }
+    },
+    args: {
         title: 'Adding Save and Cancel Button',
         portletActions: {
             primary: [
@@ -110,25 +118,29 @@ export const BasicActions = () => ({
             }
         }
     },
-    template: BasicActionsTemplate
-});
-
-BasicActions.parameters = {
-    docs: {
-        source: {
-            code: BasicActionsTemplate
-        }
-    }
+    render: (args) => ({
+        props: args,
+        template: NoActionsTemplate
+    })
 };
 
+
 const MultipleActionsTemplate = `
 <dot-portlet-base>
     <dot-portlet-toolbar [title]="title" [actions]="portletActions"></dot-portlet-toolbar>
     ${portletContent()}
 </dot-portlet-base>
 `;
-export const MultipleActions = () => ({
-    props: {
+
+export const MultipleActions: Story = {
+    parameters: {
+        docs: {
+            source: {
+                code: MultipleActionsTemplate
+            }
+        }
+    },
+    args: {
         title: 'Multiple Actions',
         portletActions: {
             primary: [
@@ -156,15 +168,10 @@ export const MultipleActions = () => ({
             }
         }
     },
-    template: MultipleActionsTemplate
-});
-
-MultipleActions.parameters = {
-    docs: {
-        source: {
-            code: MultipleActionsTemplate
-        }
-    }
+    render: (args) => ({
+        props: args,
+        template: MultipleActionsTemplate
+    })
 };
 
 const ExtraActionsTemplate = `
@@ -182,8 +189,15 @@ const ExtraActionsTemplate = `
     ${portletContent()}
 </dot-portlet-base>
 `;
-export const ExtraActions = () => ({
-    props: {
+export const ExtraActions: Story = {
+    parameters: {
+        docs: {
+            source: {
+                code: ExtraActionsTemplate
+            }
+        }
+    },
+    args: {
         title: 'Extra Actions',
         portletActions: {
             primary: [
@@ -199,15 +213,10 @@ export const ExtraActions = () => ({
             }
         }
     },
-    template: ExtraActionsTemplate
-});
-
-ExtraActions.parameters = {
-    docs: {
-        source: {
-            code: ExtraActionsTemplate
-        }
-    }
+    render: (args) => ({
+        props: args,
+        template: ExtraActionsTemplate
+    })
 };
 
 const WithTabsTemplate = `
@@ -220,8 +229,15 @@ const WithTabsTemplate = `
     </p-tabView>
 </dot-portlet-base>
 `;
-export const WithTabs = () => ({
-    props: {
+export const WithTabs: Story = {
+    parameters: {
+        docs: {
+            source: {
+                code: WithTabsTemplate
+            }
+        }
+    },
+    args: {
         title: 'Tabbed Portlet',
         portletActions: {
             primary: [
@@ -237,13 +253,8 @@ export const WithTabs = () => ({
             }
         }
     },
-    template: WithTabsTemplate
-});
-
-WithTabs.parameters = {
-    docs: {
-        source: {
-            code: WithTabsTemplate
-        }
-    }
-};
+    render: (args) => ({
+        props: args,
+        template: WithTabsTemplate
+    })
+};
diff --git a/...ggestion-list/components/suggestions-list-item/suggestions-list-item.component.stories.ts b/...ggestion-list/components/suggestions-list-item/suggestions-list-item.component.stories.ts
@@ -1,49 +1,54 @@
-import { moduleMetadata, Story } from '@storybook/angular';
+import { moduleMetadata, StoryObj, Meta } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
 import { SuggestionsListItemComponent } from './suggestions-list-item.component';
 
-export default {
+type Args = SuggestionsListItemComponent & { item: Record<string, string> };
+
+const meta: Meta<Args> = {
     title: 'Library/Block Editor/Components/Suggestions List Item',
     decorators: [
         moduleMetadata({
             declarations: [SuggestionsListItemComponent],
             imports: [CommonModule]
         })
     ],
-    component: SuggestionsListItemComponent
+    component: SuggestionsListItemComponent,
+    render: (args) => ({
+        props: args,
+        template: `
+            <dot-suggestions-list-item [item]='item' />
+        `
+    })
 };
+export default meta;
 
-export const Icon: Story<SuggestionsListItemComponent> = (args) => ({
-    props: {
-        ...args,
-        item: iconItem
-    },
-    template: `
-        <dot-suggestions-list-item [item]='item'></dot-suggestions-list-item>
-    `
-});
-
-export const Image: Story<SuggestionsListItemComponent> = (args) => ({
-    props: {
-        ...args,
-        item: imageItem
-    },
-    template: `
-        <dot-suggestions-list-item [item]='item'></dot-suggestions-list-item>
-    `
-});
+type Story = StoryObj<Args>;
 
-// Test Data
 const iconItem: Record<string, string> = {
     title: 'An Icon',
     type: 'icon',
     icon: '+'
 };
 
+export const Icon: Story = {
+    args: {
+        item: iconItem
+    },
+};
+
 const imageItem: Record<string, string> = {
     title: 'Landscape',
     type: 'image',
     url: 'https://images.unsplash.com/photo-1508162942367-e4dd4cd67513?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1100&q=80'
 };
+
+export const Image: Story = {
+    args: {
+        item: imageItem
+    },
+};
+
+
+
diff --git a/...ock-editor/src/lib/shared/components/suggestion-list/suggestion-list.component.stories.ts b/...ock-editor/src/lib/shared/components/suggestion-list/suggestion-list.component.stories.ts
@@ -1,28 +1,32 @@
-import { moduleMetadata, Story } from '@storybook/angular';
+import { moduleMetadata, StoryObj, Meta } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
 import { SuggestionsListItemComponent } from './components/suggestions-list-item/suggestions-list-item.component';
 import { SuggestionListComponent } from './suggestion-list.component';
 
-export default {
+const meta: Meta = {
     title: 'Library/Block Editor/Components/Suggestion List',
     decorators: [
         moduleMetadata({
             declarations: [SuggestionListComponent, SuggestionsListItemComponent],
             imports: [CommonModule]
         })
     ],
-    component: SuggestionListComponent
+    component: SuggestionListComponent,
+    render: (args) => ({
+        props: args,
+        template: `
+            <dot-suggestion-list>
+                <dot-suggestions-list-item>Option 1</dot-suggestions-list-item>
+                <dot-suggestions-list-item>Option 2</dot-suggestions-list-item>
+                <dot-suggestions-list-item>Option 3</dot-suggestions-list-item>
+            </dot-suggestion-list>
+        `
+    })
 };
+export default meta;
 
-export const ManyItems: Story<SuggestionListComponent> = (args) => ({
-    props: args,
-    template: `
-        <dot-suggestion-list>
-            <dot-suggestions-list-item>Option 1</dot-suggestions-list-item>
-            <dot-suggestions-list-item>Option 2</dot-suggestions-list-item>
-            <dot-suggestions-list-item>Option 3</dot-suggestions-list-item>
-        </dot-suggestion-list>
-    `
-});
+type Story = StoryObj;
+
+export const ManyItems: Story = {};