https://github.com/dev-warner/dc-storybook
https://github.com/dev-warner/dc-storybook
hackathon-2021 research-and-development
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/dev-warner/dc-storybook
- Owner: dev-warner
- Created: 2021-12-14T11:15:19.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-16T14:11:56.000Z (over 4 years ago)
- Last Synced: 2025-03-26T13:21:27.061Z (about 1 year ago)
- Topics: hackathon-2021, research-and-development
- Language: JavaScript
- Homepage:
- Size: 3.08 MB
- Stars: 0
- Watchers: 1
- 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`
### 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"
},
},
},
};
```