Storybook and/or Component Library

[webdev91]

I am looking for a solution to document a custom component, more like a Component Library or Storybook for the author team and developers. Searching for the same, I came across the ui.frontend module guide on experience league. 

The first thing is regarding Component Library, it has mentioned that "we could use Component Library and work at the component level rather than the page level." Is there any document/guide that shows how to implement this?

Link to section Using Webpack Static Development Server: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/archetyp...

Regarding Storybook, there is a section in the doc on "Using Storybook" (attached a link below). It has been mentioned that "...you can install it and store your Storybook artifacts within the ui.frontend module. When ready for testing within AEM, they can be deployed as ClientLibs by running npm run dev." I have no clue on how to implement this. So, it would be great if someone can share the idea if have done it or have a link to the doc/blog/page that I can refer to. I can implement Storybook on my own but there will be a lot of manual work.

Link to section Using Storybook: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/archetyp...

For both Storybook and Client Library, I am looking for an idea on how to implement the way it has been mentioned in the doc. If someone has done it and can share how to do it, that would be awesome. Thanks in advance. 

[milind_bachani]

Hi @webdev91 ,

Storybook is a beautiful and very handy tool for any developer, however AEM with its archetype doesnt give a storybook by default.

The ui.frontend module in AEM archetype is for keeping the frontend code developed in technologies like react, angular and other compatible frontend technologies. All the frontend components are developed and place under src of ui.frontend.

If you wish to implement a storybook, you can add the same under ui.frontend's src folder and the implementation has to be custom and there are no ready available templates for the storybook, you can create the storybook using reference of any react/angular project (not necessarily having aem in backend).

[webdev91]

Hi @milind_bachani 

As you mentioned, we can implement the storybook without AEM dependency, and that's what I am doing right now. I am creating stories for a custom component by copying HTML code from publish mode and adding controls to a story to make it more interactive.

I was just confused with the line mentioned in the doc that is "...you can install it and store your Storybook artifacts within the ui.frontend module. Then, when ready for testing within AEM, they can be deployed as ClientLibs by running npm run dev." So, I thought there would be a specific way to implement a storybook with the AEM project to make it more useful.

Link to doc: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/archetyp...

Thanks for your quick response.