refactor(storybook): rewrite stories to CSF3 format in preparation fo…

…r Storybook upgrade to v7 (#151)

* refactor(storybook): initial automatic conversion to CSF3 format and default template-less story code

* refactor(storybook): removed explicit template from the ButtonComponent story (Angular)

* refactor(storybook): slimmed AccordionComponent (Angular) and cvi-accordion stories down

* refactor(storybook): slimmed BreadcrumbsComponent (Angular) and cvi-breadcrumbs stories down

* refactor(storybook): slimmed cvi-button story down

* refactor(storybook): slimmed ConfirmationModalComponent (Angular) story down

* refactor(storybook): slimmed ContentContainerComponent (Angular) and cvi-content-container stories down

* refactor(storybook): slimmed ContentPanelComponent (Angular) story down

* refactor(storybook): slimmed DatepickerComponent (Angular) story down

* fix(storybook): fixed an issue where default value of options prop of FeedbackComponent (Angular) would be stringified on the way to Storybook

* refactor(storybook): slimmed FeedbackComponent (Angular) story down

* refactor(storybook): slimmed FormItemComponent (Angular) story down

* refactor(storybook): slimmed HtmlSectionComponent (Angular) story down

* refactor(storybook): slimmed IconComponent (Angular) story down

* refactor(storybook): slimmed LabeledIconComponent (Angular) and cvi-labeled-icon stories down

* fix(storybook): load previously missing component definition into InputComponent stories

* refactor(storybook): slimmed InputComponent (Angular) and cvi-text-field stories down

* fix(storybook): fixed Storybook compilation errors

* refactor(storybook): slimmed down even more AccordionComponent (Angular) and cvi-accordion stories

* refactor(storybook): slimmed down even more cvi-breadcrumbs stories

* refactor(storybook): slimmed down even more ButtonComponent (Angular) and cvi-button stories

* refactor(storybook): slimmed down ConfirmationModalComponent (Angular) stories even more

* refactor(storybook): slimmed down cvi-content-container stories even more

* refactor(storybook): slimmed down even more ContentPanelComponent (Angular) and cvi-content-panel stories

* refactor(storybook): slimmed down even more DatepickerComponent (Angular) and cvi-datepicker stories

* fix(ui): changed incorrect base class for DatepickerComponent and corresponding HTML example

* refactor(storybook): slimmed down cvi-form-item stories

* fix(storybook): fixed an issue with incorrect display of WithInlineFormElements story of FormItemComponent

* refactor(storybook): slimmed down cvi-html-section stories

* refactor(storybook): slimmed down HTML icon stories

* refactor(storybook): slimmed down ModalComponent (Angular) and cvi-modal stories

* refactor(storybook): slimmed down ModalDirective (Angular) stories

* refactor(storybook): slimmed down NotificationComponent (Angular) and cvi-notification stories

* refactor(storybook): slimmed down RadioGroupComponent (Angular) and cvi-radio-group stories

* refactor(storybook): slimmed down ReorderableListComponent (Angular) and cvi-reorderable-list stories

* fix(storybook): simplified stories of ReorderableListComponent and moved example components to separate folders

* refactor(storybook): slimmed down ScreenreaderTextComponent (Angular) and cvi-screenreader-text stories

* refactor(storybook): slimmed down SelectComponent (Angular) and cvi-select stories

* fix(storybook): added missing props and args to SelectComponent story

* refactor(storybook): slimmed down StatusBadgeComponent (Angular) and cvi-status-badge stories

* fix(storybook): removed unnecessary render methods for some default stories

* refactor(storybook): slimmed down StepComponent (Angular) story

* refactor(storybook): slimmed down StepPanelComponent (Angular) story

* refactor(storybook): slimmed down StepsComponent (Angular) and cvi-steps stories

* fix(storybook): fixed an issue where StepsComponent story with a step selected would not work correctly

* refactor(storybook): slimmed down TableComponent (Angular) and cvi-table stories

* refactor(storybook): slimmed down GeneratedTableOfContentsComponent (Angular) stories

* refactor(storybook): slimmed down TableOfContentsComponent (Angular) stories

* refactor(storybook): slimmed down TableOfContentsItemComponent (Angular) stories

* refactor(storybook): slimmed down TableOfContentsWrapperComponent (Angular) and cvi-table-of-contents stories

* chore(storybook): improving code formatting in various stories

* refactor(storybook): slimmed down cvi-tab-group stories

* refactor(storybook): slimmed down TextareaComponent (Angular) and cvi-textfield--type-multiple-lines stories

* refactor(storybook): slimmed down ToastService (Angular) and cvi-toast stories

* refactor(storybook): slimmed down TooltipDirective (Angular) and cvi-tooltip stories

* feat(storybook): made a TooltipComponent story with custom z-index into a test case

* refactor(storybook): slimmed down TrackComponent (Angular) and cvi-track stories

* test(ui): fixed a cvi-ng-breadcrumbs e2e test

* refactor(styles): fixed a BEM violation by moving disabled modifier from input-container element to root element in cvi-datepicker

* test(ui): fixed a cvi-ng-datepicker e2e test

* test(ui): fixed a cvi-ng-input e2e test

* fix(storybook): fixed incorrect "internal" JSDoc tag in cvi-ng-textarea

* test(ui): fixed a cvi-ng-textarea e2e test

* test(ui): fixed a cvi-ng-radio-group e2e test

* fix(storybook): ignore an accessibility error in the Modal open without button story of ModalDirective

* chore(ui): manually merge latest main

* fix(ui): fixed a Storybook crash

* fix(ui): fixed Angular build warnings

* refactor(ng-diagrams): rewritten HierarchicalBoxDiagramComponent story to CSF3 format

* refactor(storybook): rewritten All icons list story to CSF3 format

* refactor(ui): rewritten CircleComponent story to CSF3 format

* refactor(ui): rewritten cvi-circle story to CSF3 format

* fix(ui): fixed an issue where text content of cvi-circle would not be visible in a cvi-circle story

* refactor(ui): rewritten FormMessageComponent story to CSF3 format

* revert(ui): fix(ui): fixed Angular build warnings because of issues in runtime it causes

This reverts commit fa52e08.

* refactor(ui): rewritten LabeledItemComponent story to CSF3 format

* refactor(ui): rewritten cvi-labeled-item story to CSF3 format

* refactor(ui): rewritten TableCardComponent story to CSF3 format

* refactor(ui): rewritten TableResponsiveComponent story to CSF3 format

* refactor(ui): rewritten cvi-table-responsive story to CSF3 format

* refactor(ui): rewritten TabsComponent story to CSF3 format

* refactor(ui): rewritten cvi-tabs story to CSF3 format

* refactor(ui): rewritten TimedNoticeComponent story to CSF3 format

* refactor(ui): rewritten cvi-timed-notice story to CSF3 format and fixed broken template

* fix(storybook): ignore an Icons list story attached to an MDX file in Chromatic

* fix(ui): fixed broken WithIconCustomStyle story for ButtonComponent

* fix(ui): fixed broken HtmlSectionComponent story

* chore(all): upgraded Chromatic to the latest version

* test(ui-e2e): fixed a StepsComponent test

* test(ui-e2e): removed a faulty StepsComponent test

* chore(all): added a separate package.json command for interactive E2E testing

---------

Co-authored-by: Aleksandr Beliaev <aleksandr.beliaev@nortal.com>

apps/ui-e2e/src/component/breadcrumbs.component.cy.ts

@@ -7,7 +7,7 @@ describe('BreadcrumbsComponent', () => {
     cy.loadStory('Angular Breadcrumbs', 'Default')
       .get('cvi-ng-breadcrumbs')
       .shouldExist('cvi-ng-track')
-      .shouldNotExist('cvi-ng-icon')
+      .shouldNotBeVisible('cvi-ng-icon')
       .shouldHaveClasses('ul', 'cvi-breadcrumbs__items')
       .shouldHaveClasses('li', 'cvi-breadcrumbs__item')
       .shouldHaveClasses('a', 'cvi-breadcrumbs__item-link');

apps/ui-e2e/src/component/datepicker.component.cy.ts

@@ -5,7 +5,7 @@ describe('DatepickerComponent', () => {
 
   it('renders default story', () => {
     cy.loadStory('Angular Form Datepicker', 'Default')
-      .shouldHaveClasses('cvi-ng-datepicker', 'cvi-textfield')
+      .shouldHaveClasses('cvi-ng-datepicker', 'cvi-datepicker')
       .shouldHaveClasses('input', 'cvi-datepicker__input-field')
       .changeArg('htmlId', 'Qwerty123')
       .shouldHaveAttributes('input', [
@@ -21,24 +21,24 @@ describe('DatepickerComponent', () => {
       .changeArg('disabled', true);
 
     cy.shouldHaveClasses('cvi-ng-datepicker', [
-      'cvi-textfield',
-      'cvi-datepicker__input-container--is-disabled',
+      'cvi-datepicker',
+      'cvi-datepicker--is-disabled',
     ])
       .shouldHaveAttributes('input', [{ name: 'id', value: 'Qwerty123' }])
       .and('be.disabled');
 
     cy.get('cvi-ng-datepicker')
       .changeArg('disabled', false)
       .shouldNotHaveClasses('cvi-ng-datepicker', [
-        'cvi-datepicker__input-container--is-disabled',
+        'cvi-datepicker--is-disabled',
       ]);
   });
 
   it('can select dates from the calendar', () => {
     cy.loadStory('Angular Form Datepicker', 'Default')
       .get('cvi-ng-datepicker')
       .click()
-      .shouldHaveClasses('cvi-ng-datepicker-calendar div', [
+      .shouldHaveClasses('cvi-ng-datepicker-calendar > div', [
         'cvi-datepicker__calendar',
       ])
       .get('button.cvi-datepicker__calendar-button')
@@ -55,7 +55,7 @@ describe('DatepickerComponent', () => {
       .should('have.value', '')
       .type('28.02.2023')
       .click()
-      .shouldHaveClasses('cvi-ng-datepicker-calendar div', [
+      .shouldHaveClasses('cvi-ng-datepicker-calendar > div', [
         'cvi-datepicker__calendar',
       ])
       .get('button.cvi-datepicker__calendar-button')

apps/ui-e2e/src/component/radio-group.component.cy.ts

@@ -18,7 +18,7 @@ describe('RadioGroupComponent', () => {
   });
 
   it('Renders option radio buttons group and clicks first button', () => {
-    cy.loadStory('Angular Form Radio Button Group', 'Option Button')
+    cy.loadStory('Angular Form Radio Button Group', 'With Option Buttons')
       .runRadioGroupCommonTest('regular')
       .get('[data-cy="option_1"]')
       .within(() => {
@@ -39,7 +39,10 @@ describe('RadioGroupComponent', () => {
   });
 
   it('Renders option button compact and clicks first button', () => {
-    cy.loadStory('Angular Form Radio Button Group', 'Option Button Compact')
+    cy.loadStory(
+      'Angular Form Radio Button Group',
+      'With Compact Option Buttons'
+    )
       .runRadioGroupCommonTest('compact')
       .get('[data-cy="option_1"]')
       .within(() => {

apps/ui-e2e/src/component/steps.component.cy.ts

@@ -36,18 +36,10 @@ describe('StepsComponent', () => {
       ]);
   });
 
-  it('Renders mobile steps and clicks on the first step', () => {
-    cy.loadStory('Angular Steps Steps', 'Mobile').setDevice('mobile');
-
-    cy.shouldExist('[data-cy="steps-description"]');
-
-    cy.runStepsCommonTest();
-  });
-
   it('Renders steps with observable titles and clicks on the first step', () => {
-    cy.loadStory(
-      'Angular Steps Steps',
-      'With Observable Titles'
-    ).runStepsCommonTest();
+    cy.loadStory('Angular Steps Steps', 'With Observable Titles');
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(1500);
+    cy.runStepsCommonTest();
   });
 });

libs/ng-diagrams/src/lib/hierarchical-box-diagram/hierarchical-box-diagram.component.stories.ts

@@ -1,15 +1,10 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { Meta } from '@storybook/angular';
 import { HierarchicalBoxDiagramComponent } from './hierarchical-box-diagram.component';
 import notes from './hierarchical-box-diagram.component.html.md';
 
 export default {
   title: 'Angular Diagrams/Hierarchical Box Diagram',
   component: HierarchicalBoxDiagramComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [],
-    }),
-  ],
   parameters: {
     notes,
     layout: 'fullscreen',
@@ -32,80 +27,75 @@ export default {
   },
 } as Meta<HierarchicalBoxDiagramComponent>;
 
-const Template: Story<HierarchicalBoxDiagramComponent> = (
-  args: HierarchicalBoxDiagramComponent
-) => ({
-  props: args,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  boxes: [
-    {
-      ...baseBoxStyles('#F0F0F2', 'solid', '#D73E3E'),
-      id: '1',
-      href: 'https://example.com/1',
-      label: '<p style="color:#D73E3E">Health concern</p>',
-      targets: ['2', '7'],
-    },
-    ...defaultBoxes([
+export const Default = {
+  args: {
+    boxes: [
       {
-        id: '2',
-        href: 'https://example.com/2',
-        label: 'I have a minor health issue',
-        targets: ['3', '4', '5'],
+        ...baseBoxStyles('#F0F0F2', 'solid', '#D73E3E'),
+        id: '1',
+        href: 'https://example.com/1',
+        label: '<p style="color:#D73E3E">Health concern</p>',
+        targets: ['2', '7'],
       },
-      { id: '3', href: 'https://example.com/3', label: 'Pharmacy' },
-      { id: '4', href: 'https://example.com/4', label: 'Helpline 1220' },
+      ...defaultBoxes([
+        {
+          id: '2',
+          href: 'https://example.com/2',
+          label: 'I have a minor health issue',
+          targets: ['3', '4', '5'],
+        },
+        { id: '3', href: 'https://example.com/3', label: 'Pharmacy' },
+        { id: '4', href: 'https://example.com/4', label: 'Helpline 1220' },
+        {
+          id: '5',
+          href: 'https://example.com/5',
+          label: '<b>Family doctor</b>',
+          targets: ['6', '9'],
+        },
+      ]),
       {
-        id: '5',
-        href: 'https://example.com/5',
-        label: '<b>Family doctor</b>',
-        targets: ['6', '9'],
+        ...dottedBoxStyles('#B9D2E5', '#3B85BD'),
+        id: '6',
+        href: 'https://example.com/6',
+        label: 'Specialist doctor',
+        targets: ['9'],
       },
-    ]),
-    {
-      ...dottedBoxStyles('#B9D2E5', '#3B85BD'),
-      id: '6',
-      href: 'https://example.com/6',
-      label: 'Specialist doctor',
-      targets: ['9'],
-    },
-    {
-      ...baseBoxStyles('#CECFD8'),
-      id: '9',
-      href: 'https://example.com/9',
-      label: 'Conclusions/Referrals',
-      targets: ['10', '11'],
-    },
-    {
-      ...dottedBoxStyles('#ECF4EF', '#399E43'),
-      id: '10',
-      href: 'https://example.com/10',
-      label: 'Treatment at home',
-    },
-    {
-      ...baseBoxStyles('#FBEDED'),
-      id: '7',
-      href: 'https://example.com/7',
-      label: 'I have an acute health issue and need emergency care',
-      targets: ['8'],
-    },
-    {
-      ...baseBoxStyles('#FCEEEE'),
-      id: '8',
-      href: 'https://example.com/8',
-      label: '<b>Call 112 or go to ER</b>',
-      targets: ['11'],
-    },
-    {
-      ...dottedBoxStyles('#FCEEEE', '#D73E3E'),
-      id: '11',
-      href: 'https://example.com/11',
-      label: 'Hospitalization',
-      targets: ['9'],
-    },
-  ],
+      {
+        ...baseBoxStyles('#CECFD8'),
+        id: '9',
+        href: 'https://example.com/9',
+        label: 'Conclusions/Referrals',
+        targets: ['10', '11'],
+      },
+      {
+        ...dottedBoxStyles('#ECF4EF', '#399E43'),
+        id: '10',
+        href: 'https://example.com/10',
+        label: 'Treatment at home',
+      },
+      {
+        ...baseBoxStyles('#FBEDED'),
+        id: '7',
+        href: 'https://example.com/7',
+        label: 'I have an acute health issue and need emergency care',
+        targets: ['8'],
+      },
+      {
+        ...baseBoxStyles('#FCEEEE'),
+        id: '8',
+        href: 'https://example.com/8',
+        label: '<b>Call 112 or go to ER</b>',
+        targets: ['11'],
+      },
+      {
+        ...dottedBoxStyles('#FCEEEE', '#D73E3E'),
+        id: '11',
+        href: 'https://example.com/11',
+        label: 'Hospitalization',
+        targets: ['9'],
+      },
+    ],
+  },
 };
 
 function baseBoxStyles(

libs/storybook/src/lib/stories/icons/list.stories.mdx

@@ -1,42 +1,8 @@
 import {Meta, Story} from '@storybook/addon-docs';
-import { storybookIconsNames } from '../../../../../ui/src/lib/icons/storybook-icons';
+import * as IconsListStories from './list.stories.ts';
 
-<Meta title="Icons/Available Icons" parameters={{
-  layout: 'padded',
-  axe: {
-    skip: true,
-  },
-  backgrounds: {
-    default: 'Darkgray',
-  },
-}} argTypes={{
-  fill: {
-    name: 'Icon color',
-    control: { type: 'color' }
-  }
-}} args={{ fill: 'red' }} />
-
-export const Template = (args) => ({
-  props: {
-    ...args,
-    icons: storybookIconsNames,
-    filteredIcons: storybookIconsNames,
-    filterIcons: (query, icons) => {
-      return query ? icons.filter(iconName => iconName.includes(query)) : icons;
-    }
-  },
-  template: `
-    <input type="text" #search (input)="filteredIcons = filterIcons(search.value, icons)" cviNgStorybookInput placeholder="Type icon name...">
-    <cvi-ng-storybook-icon-cards>
-      <cvi-ng-storybook-icon-card *ngFor="let name of filteredIcons" [label]="name" [ngStyle]="{ 'fill': fill }">
-        <cvi-ng-icon [name]="name"></cvi-ng-icon>
-      </cvi-ng-storybook-icon-card>
-    </cvi-ng-storybook-icon-cards>
-  `
-});
+<Meta of={IconsListStories} />
 
 Switch to *Canvas* tab for a full-screen view.
 
-<Story name="All icons" height="540px">
-  { Template.bind({}) }
-</Story>
+<Story name="All icons" height="540px" of={IconsListStories.Default} />

libs/storybook/src/lib/stories/icons/list.stories.ts

@@ -0,0 +1,49 @@
+import { Meta } from '@storybook/angular';
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
+import { storybookIconsNames } from '../../../../../ui/src/lib/icons/storybook-icons';
+
+export default {
+  title: 'Icons/Available Icons',
+  parameters: {
+    layout: 'padded',
+    axe: {
+      skip: true,
+    },
+    chromatic: { disableSnapshot: true },
+    backgrounds: {
+      default: 'Darkgray',
+    },
+  },
+  argTypes: {
+    fill: {
+      name: 'Icon color',
+      control: { type: 'color' },
+    },
+  },
+  args: {
+    fill: 'red',
+  },
+} as Meta;
+
+export const Default = {
+  render: (args: any) => ({
+    props: {
+      ...args,
+      icons: storybookIconsNames,
+      filteredIcons: storybookIconsNames,
+      filterIcons: (query: string, icons: string[]) => {
+        return query
+          ? icons.filter((iconName) => iconName.includes(query))
+          : icons;
+      },
+    },
+    template: `
+      <input type="text" #search (input)="filteredIcons = filterIcons(search.value, icons)" cviNgStorybookInput placeholder="Type icon name...">
+      <cvi-ng-storybook-icon-cards>
+        <cvi-ng-storybook-icon-card *ngFor="let name of filteredIcons" [label]="name" [ngStyle]="{ 'fill': fill }">
+          <cvi-ng-icon [name]="name"></cvi-ng-icon>
+        </cvi-ng-storybook-icon-card>
+      </cvi-ng-storybook-icon-cards>
+    `,
+  }),
+};