Storybook for Angular not displaying elements created by Kendo UI

[Logan]

I am trying to use Storybook for an Angular project.  The Angular project is utilizing Kendo UI's kendo grid elements throughout component templates.

The issue is any piece of a component template using a kendo element does not show in the Storybook interface when I am running it.  If I change to standard html elements, the data does display as expected.

What do I have setup incorrectly that is preventing these custom elements from displaying in Storybook?

Any help or ideas would be appreciated and am happy to provide more context to anything.  Some code samples below.

Versions
@angular/core - ^12.1.0<br/>
@progress/kendo-angular-grid - ^5.4.0<br/>
@storybook/angular - ^6.3.4

.storybook/main.js file

module.exports = {
  "stories": [
    "../src/**/*.story.mdx",
    "../src/**/*.story.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
  ],
  "core": {
    "builder": "webpack5"
  }
}

component story

import { HttpClientModule } from '@angular/common/http';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterTestingModule } from '@angular/router/testing';
import { moduleMetadata } from '@storybook/angular';
import { Story, Meta } from '@storybook/angular/types-6-0';
import DocumentsComponent from './documents.component';

export default {
  title: 'Components/Pages/Documents',
  component: DocumentsComponent,
  argTypes: {},
  decorators: [
    moduleMetadata({
      imports: [HttpClientModule, RouterTestingModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }),
  ],
} as Meta;

const Template: Story<DocumentsComponent> = (args: DocumentsComponent) => ({
  props: args,
});

export const DocumentsList = Template.bind({});

component template file

<div class="documents">
  <button kendoButton (click)="addNew()" class="add-new" icon="plus" look="flat">Add New</button>
  <h1>Documents</h1>


  <!-- start block added to confirm data was available when rendering -->
  <div *ngFor="let data of gridData">
    <h2>{{data.id}}</h2>
  </div>
  <!-- end block added to confirm data was available when rendering -->


  <kendo-grid
    [data]="gridData"
    [sort]="sort"
    [sortable]="{ allowUnsort: true, mode: 'multiple' }"
    (sortChange)="sortChange($event)"
  >
    <kendo-grid-column field="id" title="ID" [width]="100"> </kendo-grid-column>
    <kendo-grid-column field="assignee.username" title="Assignee" [width]="100"> </kendo-grid-column>
    <kendo-grid-column field="status" title="Status" [width]="120">
...

[Yanmario]

Hi Logan,

Thank you for the provided information.

I am not very familiar with Storybook and will do my best to explain the steps on how to add the Grid component to Storybook.

1. Installing Storybook in an Angular project - https://storybook.js.org/docs/angular/get-started/install

2. Applying the steps from the following article - https://medium.com/loftbr/angular-storybook-6d8ae099ab96 (google provides a good amount of articles).

3. It is essential to include the needed imports to run the Grid component in Storybook:

 component: AppComponent,
  decorators: [
    // The necessary modules for the component to work on Storybook
    moduleMetadata({
      declarations: [AppComponent],
      imports: [CommonModule, GridModule ],
    }),
  ],
};

4. If you run into i18n error, then the following article is helpful that describes that the i18n needs to be imported in preview.js:

https://stackoverflow.com/a/60414611

import { setCompodocJson } from "@storybook/addon-docs/angular";
import docJson from "../documentation.json";
import '@angular/localize/init';
setCompodocJson(docJson);

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  docs: { inlineStories: true },
}

 

I will attach a runnable project with Storybook and Kendo Ui for Angular Grid component inside.

I hope this helps and steers you in the right direction.

Regards,
Yanmario
Progress Telerik

[Logan]

Thank you very much, I appreciate your help!  Adding the import for the Grid module and some other ones I ended up missing in my specific Component seems to have resolved it.  I did run into the i18n error and your suggestion resolved that as well.  Again, thank you very much!