https://github.com/dev-warner/dc-storybook

https://github.com/dev-warner/dc-storybook

hackathon-2021 research-and-development

Last synced: 27 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/dev-warner/dc-storybook
• Owner: dev-warner
• Created: 2021-12-14T11:15:19.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-16T14:11:56.000Z (about 3 years ago)
• Last Synced: 2024-12-08T07:27:08.707Z (30 days ago)
• Topics: hackathon-2021, research-and-development
• Language: JavaScript
• Homepage:
• Size: 3.08 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# dc-storybook

### installation

```bash

npm i -D dc-storybook

```

### Setup

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

```js

module.exports = {

  addons: [

    // your addons

    "dc-storybook",

  ],

};

```

Add .env varibles for your hub/staging env

```

HUB_NAME=""

STAGING_ENVIRONMENT=""

```

Add a schema to your parameters under `DynamicContent`

```ts

export default {

  component: YouComponent,

  parameters: {

    DynamicContent: {

      schema: "https://bigcontent.io/carousel.com",

    },

  },

};

const Template = (args) => ;

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

Primary.args = {};

```

## Example

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

![Tux, the Linux mascot](/example.png)

### Controlling/Merging Arguments

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

```js

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](https://amplience.com/docs/development/contentdelivery/filterandsort.html#sorting) by adding a sortKe

```js

export default {

  component: YouComponent,

  parameters: {

    DynamicContent: {

      schema: "https://bigcontent.io/carousel.com",

      sortKey: "/title"

      },

    },

  },

};

```