README

Craft Storybook Starter

Storybook 是一个开源工具，用于在隔离的环境中开发 UI 组件。
它使构建出色的 UI 变得有组织和高效。

🎉 Storybook 在 Craft 之外以 JavaScript 运行，不需要 Craft 插件
🎉 Storybook 使用与您的项目相同的 Twig 文件（有一些不同）

此入门套件为您在 Storybook 中提供了一切以提高生产力。
使用 Storybook 从现有的网站/应用中创建动态样式指南。
利用出色的 Webpack 开发服务器，使用模拟数据创建稳固的组件。

Storybook 特性

此入门套件具有许多现代特性，包括

👍 热模块重新加载
👍 自动可访问性测试
👍 颜色可访问性测试
👍 假数据生成器（Faker）
👍 Sass 支持
👍 设备预览
👍 可扩展的 Webpack 配置
👍 静态网站生成器

查看 Storybook 演示 👉

入门指南

创建新项目

使用 degit 基于此模板创建新项目

npx degit ben-rogerson/craft-storybook-starter craft-storybook && cd $_ && npm install

启动 Storybook

npm run storybook

启动 Craft CMS 设置

composer install && ./craft setup

将其添加到现有项目中

将 Storybook 添加到您的项目是一个快速的过程

获取仓库

git clone https://github.com/ben-rogerson/craft-storybook-starter.git

将这些文件夹复制到您的项目中
```
.storybook
stories
templates/components
```

安装 Storybook 的 devDependencies

npm i -D @babel/core @babel/preset-env @storybook/addon-a11y @storybook/addon-knobs @storybook/addon-viewport @storybook/html faker babel-loader css-loader node-sass sass-loader style-loader twig twigjs-loader babel-plugin-module-resolver webpack-cli

将这些脚本定义添加到您的 package.json

"scripts": {
    "storybook": "start-storybook",
    "build-storybook": "build-storybook -c .storybook -o build"
},

使用 npm run storybook 启动 Storybook

使用 Storybook 进行操作

在模板文件夹中的某个位置创建一个常规 Twig 文件
例如： /templates/components/[component].twig
在 stories 文件夹中添加一个匹配的故事
例如： /stories/[component].stories.js
使用 npm run storybook 启动 Storybook

托管 Storybook

Storybook 为您的组件构建静态文件预览。这意味着您可以利用像 Netlify 这样的简单（且免费）的托管服务。

配置它运行 npm run build-storybook 并从 /build 文件夹提供服务。

您还可以使用 GitHub pages 来托管您的 storybook。

提示：Storybook Twig != Craft Twig

Storybook 使用 Twig 的 JavaScript 实现，您可能会遇到其限制。

任何 Craft 或 Craft 插件函数、Twig 标签或过滤器都会引发错误
不支持字符串插值
~~不支持组件内组件的导入（可能通过 Webpack 调整修复）~~
导入现在工作正确

虽然我同意这不是最佳方案，但它有其优势。它迫使组件更小、更简单。您在现代 JavaScript 应用程序中经常看到这种技术，这是一件好事！这是一种您可以将其应用于许多 Craft 组件的技术。如果您对这个概念感兴趣，请查看 Atomic design。

如果您将组件引入 Storybook 且遇到兼容性问题，可能需要将其拆分为表示层组件和逻辑组件。表示层组件将包含基本的组件 HTML，且不包含不兼容的 Twig 代码。这将是在 Storybook 中显示的组件。

ben-rogerson / craft-storybook-starter

维护者

详细信息