{"id":17621205,"url":"https://github.com/dev-warner/dc-storybook","last_synced_at":"2025-03-30T01:18:41.588Z","repository":{"id":97736625,"uuid":"438223566","full_name":"dev-warner/dc-storybook","owner":"dev-warner","description":null,"archived":false,"fork":false,"pushed_at":"2021-12-16T14:11:56.000Z","size":3230,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T13:21:27.061Z","etag":null,"topics":["hackathon-2021","research-and-development"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dev-warner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-14T11:15:19.000Z","updated_at":"2021-12-16T14:38:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"d52aa92f-5984-4c8f-99a2-67505c33d4ca","html_url":"https://github.com/dev-warner/dc-storybook","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-warner%2Fdc-storybook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-warner%2Fdc-storybook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-warner%2Fdc-storybook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-warner%2Fdc-storybook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev-warner","download_url":"https://codeload.github.com/dev-warner/dc-storybook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246262600,"owners_count":20749175,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hackathon-2021","research-and-development"],"created_at":"2024-10-22T20:11:52.553Z","updated_at":"2025-03-30T01:18:41.569Z","avatar_url":"https://github.com/dev-warner.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dc-storybook\n\n### installation\n\n```bash\nnpm i -D dc-storybook\n```\n\n### Setup\n\nAdd `dc-storybook` to your addons in `.storybook/main.js`\n\n```js\nmodule.exports = {\n  addons: [\n    // your addons\n    \"dc-storybook\",\n  ],\n};\n```\n\nAdd .env varibles for your hub/staging env\n\n```\nHUB_NAME=\"\u003chub\u003e\"\nSTAGING_ENVIRONMENT=\"\u003cvse\u003e\"\n```\n\nAdd a schema to your parameters under `DynamicContent`\n\n```ts\nexport default {\n  component: YouComponent,\n  parameters: {\n    DynamicContent: {\n      schema: \"https://bigcontent.io/carousel.com\",\n    },\n  },\n};\n\nconst Template = (args) =\u003e \u003cYouComponent {...args} /\u003e;\n\nexport const Primary = Template.bind({});\n\nPrimary.args = {};\n```\n\n## Example\n\nYou should now see content from Dynamic Content under a tab on `storybook`\n![Tux, the Linux mascot](/example.png)\n\n### Controlling/Merging Arguments\n\nYou can pass a callback to `DynamicContent` to augment whats passed to the component\n\n```js\nexport default {\n  component: YouComponent,\n  parameters: {\n    DynamicContent: {\n      schema: \"https://bigcontent.io/carousel.com\",\n      transformer: (args, response) =\u003e {\n        /**\n         *  args are the current arguments, if you\n         *  have arguments other than DC content you can merge them in here\n         */\n\n        /**\n         *  response is the item of content selected\n         *  if you don't need all the content you can return it here\n         */\n\n        return {\n          productId: args.sku,\n          productImage: response.content.productImage,\n        };\n      },\n    },\n  },\n};\n```\n\n### Sort the content\n\nYou can sort the items using [trait:sortable](https://amplience.com/docs/development/contentdelivery/filterandsort.html#sorting) by adding a sortKe\n\n```js\nexport default {\n  component: YouComponent,\n  parameters: {\n    DynamicContent: {\n      schema: \"https://bigcontent.io/carousel.com\",\n      sortKey: \"/title\"\n      },\n    },\n  },\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-warner%2Fdc-storybook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev-warner%2Fdc-storybook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-warner%2Fdc-storybook/lists"}