dc-storybook

installation

npm i -D dc-storybook

Setup

Add dc-storybook to your addons in .storybook/main.js

module.exports = {
  addons: [
    // your addons
    "dc-storybook",
  ],
};

Add .env varibles for your hub/staging env

HUB_NAME="<hub>"
STAGING_ENVIRONMENT="<vse>"

Add a schema to your parameters under DynamicContent

export default {
  component: YouComponent,
  parameters: {
    DynamicContent: {
      schema: "https://bigcontent.io/carousel.com",
    },
  },
};

const Template = (args) => <YouComponent {...args} />;

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

Primary.args = {};

Example

You should now see content from Dynamic Content under a tab on storybook

Controlling/Merging Arguments

You can pass a callback to DynamicContent to augment whats passed to the component

export default {
  component: YouComponent,
  parameters: {
    DynamicContent: {
      schema: "https://bigcontent.io/carousel.com",
      transformer: (args, response) => {
        /**
         *  args are the current arguments, if you
         *  have arguments other than DC content you can merge them in here
         */

        /**
         *  response is the item of content selected
         *  if you don't need all the content you can return it here
         */

        return {
          productId: args.sku,
          productImage: response.content.productImage,
        };
      },
    },
  },
};

Sort the content

You can sort the items using trait:sortable by adding a sortKe

export default {
  component: YouComponent,
  parameters: {
    DynamicContent: {
      schema: "https://bigcontent.io/carousel.com",
      sortKey: "/title"
      },
    },
  },
};