Storybook and/or Component Library | Community
Skip to main content
W
webdev91
Level 3
January 14, 2022

Storybook and/or Component Library

  • January 14, 2022
  • 1 reply
  • 4774 views

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/archetype/uifrontend.html?lang=en#using-webpack

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/archetype/uifrontend.html?lang=en#using-storybook

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. 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

milind_bachani
Adobe Employee
milind_bachaniAdobe Employee
Adobe Employee
January 14, 2022

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).

 

    W
    webdev91Author
    Level 3
    January 14, 2022

    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/archetype/uifrontend.html?lang=en#using-storybook

    Thanks for your quick response.

      Terms & ConditionsAccessibility statement

      Loading footer...