Our Contensis entry picker for Storybook allows you to see your custom Storybook components working with real data coming from entries within your CMS.
npm install @zengenti/contensis-entry-picker-storybook-addonBuilt with React, TypeScript, Storybook, Babel and our Contensis Delivery API
Our Contensis entry picker for Storybook allows you to see your custom Storybook components working with real data coming from entries within your CMS.
You can add the Contensis entry picker addon to you project with:
npm install --save-dev @zengenti/contensis-entry-picker-storybook-addon
Or:
yarn add @zengenti/contensis-entry-picker-storybook-addon -D
Then add the following line into your .storybook/main.js file:
`` javascript`
module.exports = {
addons: [
'@zengenti/contensis-entry-picker-storybook-addon',
],
Make sure your .env is set up so our custom hook used to get the entries knows where to get these from. Your .env file should have the following properties: ACCESS_TOKEN, PUBLIC_URL, and PROJECT.
Within your Storybook component we will need to grab a entryId from the global variable - to find out more about global variables, go here.
` javascript`
export const Template: ComponentStory
args: Props,
{ globals: { entryId } }
) => {...};
Once we have this, we can use a custom hook to get the entry from this entryId. We can do this like so:
It's important to spread the object so that the component can consume all the props.
Remember to import useGetEntryByEntryId from the @zengenti/contensis-entry-picker-storybook-addon
` javascript
import { useGetEntryByEntryId } from '@zengenti/contensis-entry-picker-storybook-addon';
export const Template: ComponentStory
args: Props,
{ globals: { entryId } }
) => {
const entry = useGetEntryByEntryId(entryId);
return
};
`
Great, your Storybook component is almost there, we can now use the Template.args to specify what entries we'd like to bring back. We do this with the contentTypes arg.
Important that the contentTypes arg is an array of strings
` javascript`
Template.args = {
contentTypes: ['blogPost', 'pot', 'plant'],
}
Now we are all set up, we can now go ahead and run storybook with npm run storybook or yarn storybook. When this opens in the browser go over to the Contensis entry picker` tab. Here you will see a drop down with entries to choose from. Clicking one of these will allow your component to consume its data. 🎉