chore(modal): update stories to CSFv3 (#1286)

- CDE-1534 [Storybook] - Refactor modal stories to CSFv3

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [x] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [ ] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [x] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: [CDE-1534](https://jira.eng.vmware.com/browse/CDE-1534)

## What is the new behavior?
Refactored modal stories to CSFv3

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Signed-off-by: Andrea Fernandes <[email protected]>
Co-authored-by: Andrea Fernandes <[email protected]>
Co-authored-by: GitHub <[email protected]>

.storybook/stories/modal/modal-static.stories.ts

@@ -5,12 +5,28 @@
  */
 
 import { ClrModalModule } from '@clr/angular';
-import { Parameters } from '@storybook/addons';
-import { Story } from '@storybook/angular';
+import { moduleMetadata, Story, StoryObj } from '@storybook/angular';
 
-import { setupStorybook } from '../../helpers/setup-storybook.helpers';
+import { CommonModules } from '../../helpers/common';
 
-const defaultStory: Story = args => ({
+export default {
+  title: 'Modal/Static',
+  decorators: [
+    moduleMetadata({
+      imports: [...CommonModules, ClrModalModule],
+    }),
+  ],
+  argTypes: {
+    size: { defaultValue: 'md', control: { type: 'radio', options: ['sm', 'md', 'lg', 'xl'] } },
+  },
+  args: {
+    title: 'Small Modal',
+    body: 'This is a small modal.',
+    size: 'sm',
+  },
+};
+
+const ModalStaticTemplate: Story = args => ({
   template: `
     <style>
       .backdrop-example-container {
@@ -50,40 +66,36 @@ const defaultStory: Story = args => ({
       <div class="modal-backdrop static" aria-hidden="true"></div>
     </div>
   `,
-  props: { ...args },
+  props: args,
 });
 
-const defaultParameters: Parameters = {
-  title: 'Modal/Static',
-  argTypes: {},
-  args: {
-    title: 'Small Modal',
-    body: 'This is a small modal.',
-    size: 'sm',
-  },
+export const SmallModal: StoryObj = {
+  render: ModalStaticTemplate,
 };
 
-const variants: Parameters[] = [
-  {
-    title: 'Small Modal',
-    body: 'This is a small modal.',
-    size: 'sm',
-  },
-  {
+export const MediumModal: StoryObj = {
+  render: ModalStaticTemplate,
+  args: {
     title: 'Medium Modal',
     body: 'This is a medium modal.',
     size: 'md',
   },
-  {
+};
+
+export const LargeModal: StoryObj = {
+  render: ModalStaticTemplate,
+  args: {
     title: 'Large Modal',
     body: 'This is a large modal.',
     size: 'lg',
   },
-  {
+};
+
+export const ExtraLargeModal: StoryObj = {
+  render: ModalStaticTemplate,
+  args: {
     title: 'Extra Large Modal',
     body: 'This is a extra Large modal.',
     size: 'xl',
   },
-];
-
-setupStorybook(ClrModalModule, defaultStory, defaultParameters, variants);
+};

.storybook/stories/modal/modal.stories.ts

@@ -6,12 +6,46 @@
 
 import { ClrModal, ClrModalModule, commonStringsDefault } from '@clr/angular';
 import { action } from '@storybook/addon-actions';
-import { Parameters } from '@storybook/addons';
-import { Story } from '@storybook/angular';
+import { moduleMetadata, Story, StoryObj } from '@storybook/angular';
 
-import { setupStorybook } from '../../helpers/setup-storybook.helpers';
+import { CommonModules } from '../../helpers/common';
 
-const defaultStory: Story = args => ({
+export default {
+  title: 'Modal/Modal',
+  decorators: [
+    moduleMetadata({
+      imports: [...CommonModules, ClrModalModule],
+    }),
+  ],
+  component: ClrModal,
+  argTypes: {
+    // inputs
+    clrModalCloseButtonAriaLabel: { type: 'string', defaultValue: commonStringsDefault.close },
+    clrModalLabelledById: { defaultValue: '' },
+    clrModalSize: { defaultValue: 'md', control: { type: 'radio', options: ['sm', 'md', 'lg', 'xl'] } },
+    clrModalSkipAnimation: { defaultValue: false, control: { type: 'boolean' } },
+    // outputs
+    clrModalAlternateClose: { control: { disable: true } },
+    clrModalOpenChange: { control: { disable: true } },
+    // methods
+    fadeDone: { control: { disable: true }, table: { disable: true } },
+    open: { control: { disable: true }, table: { disable: true } },
+    close: { control: { disable: true }, table: { disable: true } },
+    // story helpers
+    createArray: { control: { disable: true }, table: { disable: true } },
+  },
+  args: {
+    // outputs
+    clrModalAlternateClose: action('clrModalAlternateClose'),
+    clrModalOpenChange: action('clrModalOpenChange'),
+    // story helpers
+    createArray: n => new Array(n),
+    title: 'Modal Title',
+    body: 'Hello World!',
+  },
+};
+
+const ModalTemplate: Story = args => ({
   template: `
     <button type="button" class="btn btn-primary" (click)="clrModalOpen = true">Open Modal</button>
     <div>
@@ -42,39 +76,9 @@ const defaultStory: Story = args => ({
       </div>
     </clr-modal>
   `,
-  props: { ...args },
+  props: args,
 });
 
-const defaultParameters: Parameters = {
-  title: 'Modal/Modal',
-  component: ClrModal,
-  argTypes: {
-    // inputs
-    clrModalCloseButtonAriaLabel: { type: 'string', defaultValue: commonStringsDefault.close },
-    clrModalLabelledById: { defaultValue: '' },
-    clrModalSize: { defaultValue: 'md', control: { type: 'radio', options: ['sm', 'md', 'lg', 'xl'] } },
-    clrModalSkipAnimation: { defaultValue: false, control: { type: 'boolean' } },
-    // outputs
-    clrModalAlternateClose: { control: { disable: true } },
-    clrModalOpenChange: { control: { disable: true } },
-    // methods
-    fadeDone: { control: { disable: true }, table: { disable: true } },
-    open: { control: { disable: true }, table: { disable: true } },
-    close: { control: { disable: true }, table: { disable: true } },
-    // story helpers
-    createArray: { control: { disable: true }, table: { disable: true } },
-  },
-  args: {
-    // outputs
-    clrModalAlternateClose: action('clrModalAlternateClose'),
-    clrModalOpenChange: action('clrModalOpenChange'),
-    // story helpers
-    createArray: n => new Array(n),
-    title: 'Modal Title',
-    body: 'Hello World!',
-  },
+export const Modal: StoryObj = {
+  render: ModalTemplate,
 };
-
-const variants: Parameters[] = [];
-
-setupStorybook(ClrModalModule, defaultStory, defaultParameters, variants);

.storybook/stories/modal/nested-datagrid-detail.stories.ts

@@ -5,13 +5,29 @@
  */
 
 import { ClrDatagridModule, ClrModalModule } from '@clr/angular';
-import { Parameters } from '@storybook/addons';
-import { Story } from '@storybook/angular';
+import { moduleMetadata, Story, StoryObj } from '@storybook/angular';
 import { elements } from 'helpers/elements.data';
 
-import { setupStorybook } from '../../helpers/setup-storybook.helpers';
+import { CommonModules } from '../../helpers/common';
 
-const story: Story = args => ({
+export default {
+  title: 'Modal/Nested Datagrid Detail',
+  decorators: [
+    moduleMetadata({
+      imports: [...CommonModules, ClrModalModule, ClrDatagridModule],
+    }),
+  ],
+  argTypes: {
+    // story helpers
+    elements: { control: { disable: true }, table: { disable: true } },
+  },
+  args: {
+    // story helpers
+    elements,
+  },
+};
+
+const NestedDatagridTemplate: Story = args => ({
   template: `
     <div><strong>This story is NOT an endorsement of this UX pattern.</strong></div>
 
@@ -58,19 +74,9 @@ const story: Story = args => ({
       </div>
     </clr-modal>
   `,
-  props: { ...args },
+  props: args,
 });
 
-const parameters: Parameters = {
-  title: 'Modal/Nested Datagrid Detail',
-  argTypes: {
-    // story helpers
-    elements: { control: { disable: true }, table: { disable: true } },
-  },
-  args: {
-    // story helpers
-    elements,
-  },
+export const NestedDatagridDetail: StoryObj = {
+  render: NestedDatagridTemplate,
 };
-
-setupStorybook([ClrModalModule, ClrDatagridModule], story, parameters);

.storybook/stories/modal/nested-popover.stories.ts

@@ -5,13 +5,29 @@
  */
 
 import { ClrComboboxModule, ClrDropdownModule, ClrModalModule, ClrSignpostModule } from '@clr/angular';
-import { Parameters } from '@storybook/addons';
-import { Story } from '@storybook/angular';
+import { moduleMetadata, Story, StoryObj } from '@storybook/angular';
 import { elements } from 'helpers/elements.data';
 
-import { setupStorybook } from '../../helpers/setup-storybook.helpers';
+import { CommonModules } from '../../helpers/common';
 
-const story: Story = args => ({
+export default {
+  title: 'Modal/Nested Popover',
+  decorators: [
+    moduleMetadata({
+      imports: [...CommonModules, ClrModalModule, ClrComboboxModule, ClrDropdownModule, ClrSignpostModule],
+    }),
+  ],
+  argTypes: {
+    // story helpers
+    elements: { control: { disable: true }, table: { disable: true } },
+  },
+  args: {
+    // story helpers
+    elements,
+  },
+};
+
+const NestedPopoverTemplate: Story = args => ({
   template: `
     <button type="button" class="btn btn-primary" (click)="modalOpen = true">Open Modal</button>
 
@@ -55,19 +71,9 @@ const story: Story = args => ({
       </div>
     </clr-modal>
   `,
-  props: { ...args },
+  props: args,
 });
 
-const parameters: Parameters = {
-  title: 'Modal/Nested Popover',
-  argTypes: {
-    // story helpers
-    elements: { control: { disable: true }, table: { disable: true } },
-  },
-  args: {
-    // story helpers
-    elements,
-  },
+export const NestedPopover: StoryObj = {
+  render: NestedPopoverTemplate,
 };
-
-setupStorybook([ClrModalModule, ClrComboboxModule, ClrDropdownModule, ClrSignpostModule], story, parameters);

.storybook/stories/modal/stacked-modal.stories.ts

@@ -4,14 +4,30 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { ClrComboboxModule, ClrDropdownModule, ClrModalModule } from '@clr/angular';
-import { Parameters } from '@storybook/addons';
-import { Story } from '@storybook/angular';
+import { ClrModalModule } from '@clr/angular';
+import { moduleMetadata, Story, StoryObj } from '@storybook/angular';
 import { elements } from 'helpers/elements.data';
 
-import { setupStorybook } from '../../helpers/setup-storybook.helpers';
+import { CommonModules } from '../../helpers/common';
 
-const story: Story = args => ({
+export default {
+  title: 'Modal/Stacked Modal',
+  decorators: [
+    moduleMetadata({
+      imports: [...CommonModules, ClrModalModule],
+    }),
+  ],
+  argTypes: {
+    // story helpers
+    elements: { control: { disable: true }, table: { disable: true } },
+  },
+  args: {
+    // story helpers
+    elements,
+  },
+};
+
+const StackedModalTemplate: Story = args => ({
   template: `
     <div><strong>This story is NOT an endorsement of this UX pattern.</strong></div>
 
@@ -39,19 +55,9 @@ const story: Story = args => ({
       </div>
     </clr-modal>
   `,
-  props: { ...args },
+  props: args,
 });
 
-const parameters: Parameters = {
-  title: 'Modal/Stacked Modal',
-  argTypes: {
-    // story helpers
-    elements: { control: { disable: true }, table: { disable: true } },
-  },
-  args: {
-    // story helpers
-    elements,
-  },
+export const StackedModal: StoryObj = {
+  render: StackedModalTemplate,
 };
-
-setupStorybook([ClrModalModule, ClrComboboxModule, ClrDropdownModule], story, parameters);