Contensis 条目选择器 - Storybook 插件

使用 React、TypeScript、Storybook、Babel 和我们的 Contensis Delivery API 构建

我们的 Contensis 条目选择器用于 Storybook，可以让您看到您的自定义 Storybook 组件与来自 CMS 中条目的真实数据一起使用时的效果。

安装

您可以使用以下命令将 Contensis 条目选择器插件添加到您的项目中：

npm install --save-dev @zengenti/contensis-entry-picker-storybook-addon

或者

yarn add @zengenti/contensis-entry-picker-storybook-addon -D

然后将以下行添加到您的.storybook/main.js 文件中

module.exports  =  {
 addons: [
 '@zengenti/contensis-entry-picker-storybook-addon',
],

配置

.ENV

确保您的.env 设置正确，以便我们用于获取条目的自定义钩子知道从哪里获取这些条目。您的.env 文件应包含以下属性：ACCESS_TOKEN、PUBLIC_URL 和 PROJECT。

在您的 Storybook 组件中，我们需要从global 变量中获取一个entryId - 了解更多关于全局变量的信息，请访问这里。

export  const  Template:  ComponentStory<typeof Example>  = (
args:  Props, 
{ globals:  {  entryId  }  }
) =>  {...};

获得此 ID 后，我们可以使用自定义钩子从entryId 获取条目。我们可以像这样操作

扩展对象很重要，这样组件就可以使用所有 props。请记住从@zengenti/contensis-entry-picker-storybook-addon 导入useGetEntryByEntryId

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 }}  />;
};

很好，您的 Storybook 组件几乎完成了，我们现在可以使用Template.args 指定我们想要获取哪些entries。我们使用contentTypes 参数来实现这一点。

重要的是，contentTypes 参数是一个字符串数组

Template.args =  {
 contentTypes: ['blogPost', 'pot', 'plant'],
}

现在我们已经设置好了，我们可以继续使用npm run storybook 或 yarn storybook 运行 Storybook。当它在浏览器中打开时，请转到Contensis 条目选择器 选项卡。在这里，您将看到一个下拉菜单，其中包含要选择的条目。单击其中一个条目将允许您的组件使用其数据。🎉