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 index fa8164d4b6a5..ba2249d5bc36 100644 --- 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: `
${story.template}
` - }; - } + componentWrapperDecorator( + (story) => + `
${story}
` + ) ], 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()} `; -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()} `; -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 = ` ${portletContent()} `; -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()} `; -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 = ` `; -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 + }) +}; \ No newline at end of file diff --git a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.stories.ts b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.stories.ts index eb2391545b70..f231632dc0cb 100644 --- a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.stories.ts +++ b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.stories.ts @@ -1,10 +1,12 @@ -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 }; + +const meta: Meta = { title: 'Library/Block Editor/Components/Suggestions List Item', decorators: [ moduleMetadata({ @@ -12,38 +14,41 @@ export default { imports: [CommonModule] }) ], - component: SuggestionsListItemComponent + component: SuggestionsListItemComponent, + render: (args) => ({ + props: args, + template: ` + + ` + }) }; +export default meta; -export const Icon: Story = (args) => ({ - props: { - ...args, - item: iconItem - }, - template: ` - - ` -}); - -export const Image: Story = (args) => ({ - props: { - ...args, - item: imageItem - }, - template: ` - - ` -}); +type Story = StoryObj; -// Test Data const iconItem: Record = { title: 'An Icon', type: 'icon', icon: '+' }; +export const Icon: Story = { + args: { + item: iconItem + }, +}; + const imageItem: Record = { 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/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/suggestion-list.component.stories.ts b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/suggestion-list.component.stories.ts index 3cf8fd0250e9..0b321890f7d6 100644 --- a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/suggestion-list.component.stories.ts +++ b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/suggestion-list.component.stories.ts @@ -1,11 +1,11 @@ -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({ @@ -13,16 +13,20 @@ export default { imports: [CommonModule] }) ], - component: SuggestionListComponent + component: SuggestionListComponent, + render: (args) => ({ + props: args, + template: ` + + Option 1 + Option 2 + Option 3 + + ` + }) }; +export default meta; -export const ManyItems: Story = (args) => ({ - props: args, - template: ` - - Option 1 - Option 2 - Option 3 - - ` -}); +type Story = StoryObj; + +export const ManyItems: Story = {}; diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.stories.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.stories.ts index 8fd0cef4a589..0cd4ff547646 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.stories.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.stories.ts @@ -1,5 +1,5 @@ import { action } from '@storybook/addon-actions'; -import { moduleMetadata, Story, Meta } from '@storybook/angular'; +import { moduleMetadata, StoryObj, Meta } from '@storybook/angular'; import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; @@ -68,7 +68,14 @@ const previewFile = { ` }; -export default { +type Args = DotBinaryFieldPreviewComponent & { + file: DotFilePreview, + variableName: string, + fieldVariable: string, + styles: string[] +}; + +const meta: Meta = { title: 'Library / Edit Content / Binary Field / Components / Preview', component: DotBinaryFieldPreviewComponent, decorators: [ @@ -96,7 +103,19 @@ export default { }, args: { file: previewImage, - variableName: 'binaryField' + variableName: 'binaryField', + styles: [ + ` + .container { + width: 100%; + max-width: 36rem; + height: 12.5rem; + border: 1px solid #f2f2f2; + border-radius: 4px; + padding: 0.5rem; + } + ` + ], }, argTypes: { file: { @@ -114,54 +133,43 @@ export default { control: 'text', description: 'Field variable name' } - } -} as Meta; - -const Template: Story = (args: DotBinaryFieldPreviewComponent) => ({ - props: { - ...args, - // https://storybook.js.org/docs/6.5/angular/essentials/actions#action-args - editFile: action('editFile'), - removeFile: action('removeFile') }, - styles: [ - ` - .container { - width: 100%; - max-width: 36rem; - height: 12.5rem; - border: 1px solid #f2f2f2; - border-radius: 4px; - padding: 0.5rem; - } -` - ], - template: ` + render: (args) => ({ + props: args, + template: `
-
- ` -}); - -export const Image = Template.bind({}); + /> + ` + }) +}; +export default meta; -export const Video = Template.bind({}); +type Story = StoryObj; -Video.args = { - file: previewVideo, - variableName: 'binaryField', - fieldVariable: 'Blog' +export const Image: Story = { + args: { + editFile: action('editFile'), + removeFile: action('removeFile'), + }, }; -export const File = Template.bind({}); +export const Video = { + args: { + file: previewVideo, + variableName: 'binaryField', + fieldVariable: 'Blog' + } +} -File.args = { - file: previewFile, - variableName: 'binaryField', - fieldVariable: 'Blog' -}; +export const File = { + args: { + file: previewFile, + variableName: 'binaryField', + fieldVariable: 'Blog' + } +}; \ No newline at end of file diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.stories.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.stories.ts index 35349318baf8..4079e69de055 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.stories.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.stories.ts @@ -1,5 +1,5 @@ import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor'; -import { moduleMetadata, Story, Meta } from '@storybook/angular'; +import { moduleMetadata, StoryObj, Meta } from '@storybook/angular'; import { of } from 'rxjs'; import { CommonModule } from '@angular/common'; @@ -28,7 +28,7 @@ import { CONTENTLET, CONTENTTYPE_FIELDS_MESSAGE_MOCK, TEMP_FILES_MOCK } from './ import { BINARY_FIELD_MOCK } from '../../utils/mocks'; -export default { +const meta: Meta = { title: 'Library / Edit Content / Binary Field', component: DotEditContentBinaryFieldComponent, decorators: [ @@ -91,20 +91,17 @@ export default { }, field: { defaultValue: BINARY_FIELD_MOCK, - control: 'Object', + control: 'object', description: 'Content Type Field Object' } - } -} as Meta; + }, + render: (args) => ({ + props: args, + template: `` + }) +}; +export default meta; -const Template: Story = ( - args: DotEditContentBinaryFieldComponent -) => ({ - props: args, - template: `` -}); +type Story = StoryObj; -export const Primary = Template.bind({}); +export const Primary: Story = {}; diff --git a/core-web/libs/portlets/dot-experiments/portlet/src/lib/shared/ui/dot-experiments-inline-edit-text/dot-experiments-inline-edit-text.stories.ts b/core-web/libs/portlets/dot-experiments/portlet/src/lib/shared/ui/dot-experiments-inline-edit-text/dot-experiments-inline-edit-text.stories.ts index 80a88d3a69da..f6ee92edda57 100644 --- a/core-web/libs/portlets/dot-experiments/portlet/src/lib/shared/ui/dot-experiments-inline-edit-text/dot-experiments-inline-edit-text.stories.ts +++ b/core-web/libs/portlets/dot-experiments/portlet/src/lib/shared/ui/dot-experiments-inline-edit-text/dot-experiments-inline-edit-text.stories.ts @@ -1,5 +1,5 @@ import { action } from '@storybook/addon-actions'; -import { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { DotMessageService } from '@dotcms/data-access'; import { MockDotMessageService } from '@dotcms/utils-testing'; @@ -12,7 +12,7 @@ const messageServiceMock = new MockDotMessageService({ 'error.form.validator.required': 'Required message validator' }); -export default { +const meta: Meta = { title: 'Library/Experiments/Components/InlineEditText', component: DotExperimentsInlineEditTextComponent, decorators: [ @@ -67,12 +67,13 @@ export default { }, textChanged: { action: 'textChanged' } } -} as Meta; +}; +export default meta; -const Template: Story = ( - args: DotExperimentsInlineEditTextComponent -) => ({ - props: { ...args, textChanged: action('textChanged') } -}); +type Story = StoryObj; -export const Default = Template.bind({}); +export const Default: Story = { + args: { + textChanged: action('textChanged') + }, +} diff --git a/core-web/libs/portlets/edit-ema/ui/src/lib/dot-results-seo-tool/dot-results-seo-tool.component.stories.ts b/core-web/libs/portlets/edit-ema/ui/src/lib/dot-results-seo-tool/dot-results-seo-tool.component.stories.ts index c58557c93824..cf5cc79eb44e 100644 --- a/core-web/libs/portlets/edit-ema/ui/src/lib/dot-results-seo-tool/dot-results-seo-tool.component.stories.ts +++ b/core-web/libs/portlets/edit-ema/ui/src/lib/dot-results-seo-tool/dot-results-seo-tool.component.stories.ts @@ -1,4 +1,5 @@ -import { Meta, Story, moduleMetadata } from '@storybook/angular'; +import { Meta, StoryObj, moduleMetadata } from '@storybook/angular'; +import { of } from 'rxjs'; import { NgClass, NgFor, NgIf, TitleCasePipe } from '@angular/common'; @@ -9,13 +10,13 @@ import { seoOGTagsMock, seoOGTagsResultMock } from '@dotcms/utils-testing'; import { DotResultsSeoToolComponent } from './dot-results-seo-tool.component'; -export default { +const meta: Meta = { title: 'DotCMS/Results Seo Tool', component: DotResultsSeoToolComponent, args: { hostName: 'A title', seoOGTags: seoOGTagsMock, - seoOGTagsResults: seoOGTagsResultMock + seoOGTagsResults: of(seoOGTagsResultMock) }, decorators: [ moduleMetadata({ @@ -30,8 +31,9 @@ export default { ] }) ] -} as Meta; +}; +export default meta; -export const Primary: Story = (args) => ({ - props: args -}); +type Story = StoryObj; + +export const Primary: Story = {}; diff --git a/core-web/libs/template-builder/src/lib/components/template-builder/components/add-style-classes-dialog/add-style-classes-dialog.component.stories.ts b/core-web/libs/template-builder/src/lib/components/template-builder/components/add-style-classes-dialog/add-style-classes-dialog.component.stories.ts index 91364cb084d6..644fc614e06c 100644 --- a/core-web/libs/template-builder/src/lib/components/template-builder/components/add-style-classes-dialog/add-style-classes-dialog.component.stories.ts +++ b/core-web/libs/template-builder/src/lib/components/template-builder/components/add-style-classes-dialog/add-style-classes-dialog.component.stories.ts @@ -1,4 +1,4 @@ -import { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { of } from 'rxjs'; import { AsyncPipe, NgIf } from '@angular/common'; @@ -22,7 +22,7 @@ import { MOCK_STYLE_CLASSES_FILE } from '../../utils/mocks'; -export default { +const meta: Meta = { title: 'Library/Template Builder/Components/Add Style Classes', component: AddStyleClassesDialogComponent, decorators: [ @@ -62,10 +62,9 @@ export default { ] }) ] -} as Meta; +}; +export default meta; -const Template: Story = (args: AddStyleClassesDialogComponent) => ({ - props: args -}); +type Story = StoryObj; -export const Primary = Template.bind({}); +export const Primary: Story = {}; diff --git a/core-web/libs/template-builder/src/lib/components/template-builder/components/add-widget/add-widget.component.stories.ts b/core-web/libs/template-builder/src/lib/components/template-builder/components/add-widget/add-widget.component.stories.ts index b6addbb95dce..bf78b4110c3c 100644 --- a/core-web/libs/template-builder/src/lib/components/template-builder/components/add-widget/add-widget.component.stories.ts +++ b/core-web/libs/template-builder/src/lib/components/template-builder/components/add-widget/add-widget.component.stories.ts @@ -1,10 +1,10 @@ -import { moduleMetadata, Story, Meta } from '@storybook/angular'; +import { moduleMetadata, StoryObj, Meta } from '@storybook/angular'; import { AddWidgetComponent } from './add-widget.component'; import { rowIcon, colIcon } from '../../assets/icons'; -export default { +const meta: Meta = { title: 'Library/Template Builder/Components/Add', component: AddWidgetComponent, decorators: [ @@ -12,29 +12,28 @@ export default { imports: [] }) ] -} as Meta; - -const Template: Story = (args: AddWidgetComponent) => ({ - props: args -}); - -export const AddRow = Template.bind({}); - -export const AddBox = Template.bind({}); +}; +export default meta; -export const MaterialIcon = Template.bind({}); +type Story = StoryObj; -AddRow.args = { - label: 'Add Row', - icon: rowIcon +export const AddRow: Story = { + args: { + label: 'Add Row', + icon: rowIcon + } }; -AddBox.args = { - label: 'Add Box', - icon: colIcon +export const AddBox: Story = { + args: { + label: 'Add Box', + icon: colIcon + } }; -MaterialIcon.args = { - label: 'Fallback Material Icon', - icon: 'add' -}; +export const MaterialIcon: Story = { + args: { + label: 'Fallback Material Icon', + icon: 'add' + } +}; \ No newline at end of file diff --git a/core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-row/template-builder-row.component.stories.ts b/core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-row/template-builder-row.component.stories.ts index 8806f62876f0..1474cf1580af 100644 --- a/core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-row/template-builder-row.component.stories.ts +++ b/core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-row/template-builder-row.component.stories.ts @@ -1,4 +1,4 @@ -import { moduleMetadata, Story, Meta } from '@storybook/angular'; +import { moduleMetadata, StoryObj, Meta } from '@storybook/angular'; import { NgIf, NgStyle } from '@angular/common'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @@ -14,7 +14,7 @@ import { DOT_MESSAGE_SERVICE_TB_MOCK } from '../../utils/mocks'; import { RemoveConfirmDialogComponent } from '../remove-confirm-dialog/remove-confirm-dialog.component'; import { TemplateBuilderBackgroundColumnsComponent } from '../template-builder-background-columns/template-builder-background-columns.component'; -export default { +const meta: Meta = { title: 'Library/Template Builder/Components/Row', component: TemplateBuilderRowComponent, decorators: [ @@ -36,12 +36,10 @@ export default { ] }) ] -} as Meta; +}; +export default meta; -const Template: Story = (args: TemplateBuilderRowComponent) => ({ - props: args -}); +type Story = StoryObj; -export const Primary = Template.bind({}); -Primary.args = {}; +export const Primary: Story = {}; diff --git a/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.stories.ts b/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.stories.ts index 977820d5883b..0c6ee327f1b3 100644 --- a/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.stories.ts +++ b/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.stories.ts @@ -1,4 +1,4 @@ -import { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { of } from 'rxjs'; import { AsyncPipe, NgClass, NgFor, NgIf } from '@angular/common'; @@ -37,7 +37,7 @@ import { MOCK_STYLE_CLASSES_FILE } from './utils/mocks'; -export default { +const meta: Meta = { title: 'Library/Template Builder', component: TemplateBuilderComponent, decorators: [ @@ -91,40 +91,40 @@ export default { } ] }) - ] -} as Meta; - -const Template: Story = (args: TemplateBuilderComponent) => ({ - props: args, - template: ` - - - - ` -}); + ], + render: (args) => ({ + props: args, + template: ` + + + + `, + }), +}; +export default meta; -export const Base = Template.bind({}); +type Story = StoryObj; -Base.args = { - layout: { - body: FULL_DATA_MOCK, - header: true, - footer: false, - sidebar: { - location: 'left', - width: 'medium', - containers: [] - } - }, - themeId: '123', - containerMap: CONTAINER_MAP_MOCK -}; +export const Base: Story = { + args: { + layout: { + body: FULL_DATA_MOCK, + header: true, + footer: false, + sidebar: { + location: 'left', + width: 'medium', + containers: [] + } + }, + containerMap: CONTAINER_MAP_MOCK + } +}; \ No newline at end of file diff --git a/core-web/libs/ui/src/lib/components/dot-copy-button/dot-copy-button.stories.ts b/core-web/libs/ui/src/lib/components/dot-copy-button/dot-copy-button.stories.ts index de72fbaac75f..8cf395753a82 100644 --- a/core-web/libs/ui/src/lib/components/dot-copy-button/dot-copy-button.stories.ts +++ b/core-web/libs/ui/src/lib/components/dot-copy-button/dot-copy-button.stories.ts @@ -1,4 +1,4 @@ -import { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { ButtonModule } from 'primeng/button'; import { TooltipModule } from 'primeng/tooltip'; @@ -6,12 +6,12 @@ import { TooltipModule } from 'primeng/tooltip'; import { DotMessageService } from '@dotcms/data-access'; import { DotClipboardUtil, DotCopyButtonComponent } from '@dotcms/ui'; -export default { +const meta: Meta = { title: 'DotCMS/Copy Button', component: DotCopyButtonComponent, args: { label: 'Copy', - tooltipText: 'Tooltip' + originalTooltipText: 'Tooltip' }, decorators: [ moduleMetadata({ @@ -32,8 +32,10 @@ export default { ] }) ] -} as Meta; +}; +export default meta; -export const Primary: Story = (args) => ({ - props: args -}); +type Story = StoryObj; + + +export const Primary: Story = {}; \ No newline at end of file diff --git a/core-web/libs/ui/src/lib/components/dot-drop-zone/directive/dot-drop-zone-value-accesor/dot-drop-zone-value-accessor.directive.stories.ts b/core-web/libs/ui/src/lib/components/dot-drop-zone/directive/dot-drop-zone-value-accesor/dot-drop-zone-value-accessor.directive.stories.ts index c66a430253ae..1201c92f51b0 100644 --- a/core-web/libs/ui/src/lib/components/dot-drop-zone/directive/dot-drop-zone-value-accesor/dot-drop-zone-value-accessor.directive.stories.ts +++ b/core-web/libs/ui/src/lib/components/dot-drop-zone/directive/dot-drop-zone-value-accesor/dot-drop-zone-value-accessor.directive.stories.ts @@ -1,5 +1,5 @@ import { action } from '@storybook/addon-actions'; -import { moduleMetadata, Story, Meta } from '@storybook/angular'; +import { moduleMetadata, StoryObj, Meta } from '@storybook/angular'; import { CommonModule } from '@angular/common'; import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; @@ -86,7 +86,7 @@ class DotDropZoneValueAccessorTestComponent implements OnInit { } } -export default { +const meta: Meta = { title: 'Library/ui/Components/DropZone/ValueAccessor', component: DotDropZoneValueAccessorTestComponent, decorators: [ @@ -101,17 +101,14 @@ export default { // detect if the component is emitting the correct HTML events handles: ['formChanged', 'formErrors'] } - } -} as Meta; - -const Template: Story = (args: DotDropZoneComponent) => ({ - props: { - ...args, - // https://storybook.js.org/docs/6.5/angular/essentials/actions#action-args + }, + args: { formChanged: action('formChanged'), formErrors: action('formErrors') }, - template: ` + render: (args) => ({ + props: args, + template: ` = (args: DotDropZoneComponent) => ({ (formErrors)="formErrors($event)" > ` -}); + }) +}; +export default meta; -export const Base = Template.bind({}); +type Story = StoryObj; -Base.args = { - accept: [], - maxFileSize: 1000000 +export const Base: Story = { + args: { + accept: [], + maxFileSize: 1000000, + } }; diff --git a/core-web/libs/ui/src/lib/components/dot-drop-zone/dot-drop-zone.component.stories.ts b/core-web/libs/ui/src/lib/components/dot-drop-zone/dot-drop-zone.component.stories.ts index 2f837e339e5c..7b7342a0a110 100644 --- a/core-web/libs/ui/src/lib/components/dot-drop-zone/dot-drop-zone.component.stories.ts +++ b/core-web/libs/ui/src/lib/components/dot-drop-zone/dot-drop-zone.component.stories.ts @@ -1,11 +1,11 @@ import { action } from '@storybook/addon-actions'; -import { moduleMetadata, Story, Meta } from '@storybook/angular'; +import { moduleMetadata, StoryObj, Meta } from '@storybook/angular'; import { CommonModule } from '@angular/common'; import { DotDropZoneComponent } from './dot-drop-zone.component'; -export default { +const meta: Meta = { title: 'Library/ui/Components/DropZone', component: DotDropZoneComponent, decorators: [ @@ -14,39 +14,30 @@ export default { }) ], parameters: { - // https://storybook.js.org/docs/6.5/angular/essentials/actions#action-event-handlers actions: { // detect if the component is emitting the correct HTML events handles: ['fileDrop', 'fileDragEnter', 'fileDragLeave'] } - } -} as Meta; - -const Template: Story = (args: DotDropZoneComponent) => ({ - props: { - ...args, - // https://storybook.js.org/docs/6.5/angular/essentials/actions#action-args - fileDropped: action('fileDropped'), - fileDragEnter: action('fileDragEnter'), - fileDragLeave: action('fileDragLeave') }, - styles: [ + render: (args) => ({ + props: args, + styles: [ + ` + .content { + width: 100%; + height: 200px; + background: #f8f9fa; + display:flex; + flex-direction: column; + gap: 1rem; + justify-content:center; + align-items:center; + border: 1px dashed #ced4da; + border-radius: 5px; + } ` - .content { - width: 100%; - height: 200px; - background: #f8f9fa; - display:flex; - flex-direction: column; - gap: 1rem; - justify-content:center; - align-items:center; - border: 1px dashed #ced4da; - border-radius: 5px; - } - ` - ], - template: ` + ], + template: ` = (args: DotDropZoneComponent) => ({ ` -}); + }), +}; +export default meta; -export const Base = Template.bind({}); +type Story = StoryObj; -Base.args = { - accept: [], - maxFileSize: 1000000 +export const Base: Story = { + args: { + accept: [], + maxFileSize: 1000000, + fileDropped: action('fileDropped'), + fileDragEnter: action('fileDragEnter'), + fileDragLeave: action('fileDragLeave') + } };