chore(timeline): update stories to CSFv3 (#1281)

- CDE-1545 [Storybook] - Refactor timeline 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-1545](https://jira.eng.vmware.com/browse/CDE-1545)

## What is the new behavior?
Refactored timeline 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/timeline/timeline-step.stories.ts

@@ -5,26 +5,25 @@
  */
 
 import { ClrTimelineModule, ClrTimelineStep, ClrTimelineStepState } 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 => ({
-  template: `
-    <clr-timeline>
-      <clr-timeline-step [clrState]="clrState">
-        <clr-timeline-step-header *ngIf="header">{{header}}</clr-timeline-step-header>
-        <clr-timeline-step-title *ngIf="title">{{title}}</clr-timeline-step-title>
-        <clr-timeline-step-description *ngIf="description">{{description}}</clr-timeline-step-description>
-      </clr-timeline-step>
-    </clr-timeline>
-  `,
-  props: { ...args },
-});
+const TIMELINE_STEP_STATE = [
+  { clrState: ClrTimelineStepState.NOT_STARTED },
+  { clrState: ClrTimelineStepState.CURRENT },
+  { clrState: ClrTimelineStepState.PROCESSING },
+  { clrState: ClrTimelineStepState.SUCCESS },
+  { clrState: ClrTimelineStepState.ERROR },
+];
 
-const defaultParameters: Parameters = {
+export default {
   title: 'Timeline/Timeline Step',
+  decorators: [
+    moduleMetadata({
+      imports: [...CommonModules, ClrTimelineModule],
+    }),
+  ],
   component: ClrTimelineStep,
   argTypes: {
     // inputs
@@ -34,32 +33,54 @@ const defaultParameters: Parameters = {
     },
     // story helpers
     ClrTimelineStepState: { control: { disable: true }, table: { disable: true } },
+    TIMELINE_STEP_STATE: { control: { disable: true }, table: { disable: true } },
   },
   args: {
     // story helpers
     ClrTimelineStepState,
     header: 'header',
     title: 'title',
     description: 'description',
+    TIMELINE_STEP_STATE,
   },
 };
 
-const variants: Parameters[] = [
-  {
-    clrState: ClrTimelineStepState.NOT_STARTED,
-  },
-  {
-    clrState: ClrTimelineStepState.CURRENT,
-  },
-  {
-    clrState: ClrTimelineStepState.PROCESSING,
-  },
-  {
-    clrState: ClrTimelineStepState.SUCCESS,
-  },
-  {
-    clrState: ClrTimelineStepState.ERROR,
-  },
-];
+const TimelineStepTemplate: Story = args => ({
+  template: `
+    <clr-timeline>
+      <clr-timeline-step [clrState]="clrState">
+        <clr-timeline-step-header *ngIf="header">{{header}}</clr-timeline-step-header>
+        <clr-timeline-step-title *ngIf="title">{{title}}</clr-timeline-step-title>
+        <clr-timeline-step-description *ngIf="description">{{description}}</clr-timeline-step-description>
+      </clr-timeline-step>
+    </clr-timeline>
+  `,
+  props: args,
+});
 
-setupStorybook(ClrTimelineModule, defaultStory, defaultParameters, variants);
+const TimelineStepAllTemplate: Story = args => ({
+  template: `
+    <div *ngFor="let state of TIMELINE_STEP_STATE" style="margin-top:20px">
+      <clr-timeline>
+        <clr-timeline-step [clrState]="state.clrState">
+          <clr-timeline-step-header *ngIf="header">{{header}}</clr-timeline-step-header>
+          <clr-timeline-step-title *ngIf="title">{{title}}</clr-timeline-step-title>
+          <clr-timeline-step-description *ngIf="description">{{description}}</clr-timeline-step-description>
+        </clr-timeline-step>
+      </clr-timeline>
+    </div>
+  `,
+  props: args,
+});
+
+export const TimelineStep: StoryObj = {
+  render: TimelineStepTemplate,
+};
+
+export const TimelineStepStates: StoryObj = {
+  render: TimelineStepAllTemplate,
+  parameters: {
+    actions: { disable: true },
+    controls: { disable: true },
+  },
+};

.storybook/stories/timeline/timeline.stories.ts

@@ -5,12 +5,34 @@
  */
 
 import { ClrTimeline, ClrTimelineLayout, ClrTimelineModule, ClrTimelineStepState } 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: 'Timeline/Timeline',
+  decorators: [
+    moduleMetadata({
+      imports: [...CommonModules, ClrTimelineModule],
+    }),
+  ],
+  component: ClrTimeline,
+  argTypes: {
+    // inputs
+    clrLayout: {
+      defaultValue: ClrTimelineLayout.HORIZONTAL,
+      control: { type: 'inline-radio', options: ClrTimelineLayout },
+    },
+    // story helpers
+    ClrTimelineStepState: { control: { disable: true }, table: { disable: true } },
+  },
+  args: {
+    // story helpers
+    ClrTimelineStepState,
+  },
+};
+
+const TimelineTempate: Story = args => ({
   template: `
     <clr-timeline [clrLayout]="clrLayout">
       <clr-timeline-step [clrState]="ClrTimelineStepState.SUCCESS">
@@ -40,34 +62,19 @@ const defaultStory: Story = args => ({
       </clr-timeline-step>
     </clr-timeline>
   `,
-  props: { ...args },
+  props: args,
 });
 
-const defaultParameters: Parameters = {
-  title: 'Timeline/Timeline',
-  component: ClrTimeline,
-  argTypes: {
-    // inputs
-    clrLayout: {
-      defaultValue: ClrTimelineLayout.HORIZONTAL,
-      control: { type: 'inline-radio', options: ClrTimelineLayout },
-    },
-    // story helpers
-    ClrTimelineStepState: { control: { disable: true }, table: { disable: true } },
-  },
+export const HorizontalLayout: StoryObj = {
+  render: TimelineTempate,
   args: {
-    // story helpers
-    ClrTimelineStepState,
+    clrLayout: ClrTimelineLayout.HORIZONTAL,
   },
 };
 
-const variants: Parameters[] = [
-  {
-    clrLayout: ClrTimelineLayout.HORIZONTAL,
-  },
-  {
+export const VerticalLayout: StoryObj = {
+  render: TimelineTempate,
+  args: {
     clrLayout: ClrTimelineLayout.VERTICAL,
   },
-];
-
-setupStorybook(ClrTimelineModule, defaultStory, defaultParameters, variants);
+};