New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,440
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
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.
npm install @zengenti/contensis-entry-picker-storybook-addon
Last updated 10 months ago
109
Downloads per week
Readme View on GitHub

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. 🎉

Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI