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 文件已设置好，以便我们用于获取入口的自定义 hook 知道从何处获取它们。您的 .env 文件应包含以下属性：ACCESS_TOKEN、PUBLIC_URL 和 PROJECT。

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

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

获取 entryId 后，我们可以使用自定义 hook 从该 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'],
}

现在我们都设置好了，可以继续运行 Storybook，使用 npm run storybook 或 yarn storybook 命令。当 Storybook 在浏览器中打开后，切换到 Contensis entry picker 标签页。在这里您会看到一个下拉菜单，其中包含可供选择的入口。单击其中一个入口将允许您的组件使用其数据。🎉