Naturally Produced Modules

    storybook-addon-aem
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.7 • Public • Published

    Storybook AEM Addon

    Storybook Addon to load HTL Sightly templates and AEM models.

    Pre-requisites

    • Must be using @storybook/react
    • Must be using @storybook/builder-webpack5

    Configuration

    Add addon to configuration

    in .storybook/main.js, add the addon:

    module.exports = {
      "addons": [
        "storybook-addon-aem",
      ],
    }
    

    Register AEM resources

    in .storybook/preview.js, configure the addon by:

    • Setting the appId
    • Registering your resource paths and the HTL render function associated with that path
    import renderButton from "./Button.html"
    
    export const parameters = {
      aem: {
        config: {
          appId: "app",
          resources: [
            {
              path: "app/components/button",
              render: renderButton
            }
          ]
        }
      }
    }
    

    Generate HTML output of your AEM models in Storybook

    You can now use AEM models generated by the JSON exporter as a way of creating your stories.

    Example of importing a model into a story:

    import React from 'react'
    import { Story, Meta } from "@storybook/react";
    import { App } from "storybook-aem-addon"
    import Model from "./Button.model.json"
    
    export default {
      title: "Button",
    } as Meta;
    
    export const Default: Story<{}> = () => {
      return (
        <App model={Model} />
      )
    }
    

    Install

    npm i storybook-addon-aem

    DownloadsWeekly Downloads

    4

    Version

    0.0.7

    License

    MIT

    Unpacked Size

    193 kB

    Total Files

    54

    Last publish

    Collaborators

    • angusdowlinghc