Contensis entry picker
Our Contensis entry picker for Storybook allows you to see your custom Storybook components working with real data coming from entries within your CMS.
Contensis entry picker - Storybook addon
Built 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.
Install
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:
module.exports = {
addons: [
'@zengenti/contensis-entry-picker-storybook-addon',
],
Configuration
.ENV
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.
export const Template: ComponentStory<typeof Example> = (
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
import { useGetEntryByEntryId } from '@zengenti/contensis-entry-picker-storybook-addon';
export const Template: ComponentStory<typeof Example> = (
args: Props,
{ globals: { entryId } }
) => {
const entry = useGetEntryByEntryId(entryId);
return <Example {...{ ...args, ...entry }} />;
};
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
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. 🎉
- fbeavan
- s.horan
- rdsaunders
- danwhite
- alexpop-zengenti
- n.flatley