通过 
搜索
搜索vardumper / picocss-storybook
PicoCSS 的 Storybook.js
v0.1.5
2024-05-05 17:27 UTC
Requires
- bentools/cartesian-product: ^1.4.1
- fakerphp/faker: ^1.23.1
- matthiasmullie/minify: ^1.3.73
- mnapoli/silly: ^1.9
- symfony/yaml: ^7.0.7
- twig/intl-extra: ^3.9.2
Requires (Dev)
- brainmaestro/composer-git-hooks: dev-master
- friendsofphp/php-cs-fixer: ^3.54.0
- phpmd/phpmd: ^2.15
- symplify/easy-ci: ^12.1
- symplify/easy-coding-standard: ^12.1.14
- twig/twig: ^3.9.3
This package is auto-updated.
Last update: 2024-09-21 06:24:47 UTC
README
PicoCSS 默认主题的 Storybook 骨架。
需求
您需要在您的机器上安装 NPM 和 Yarn 以使用 Storybook。在 macOS 上，您可以使用 brew 同时安装它们 brew install npm yarn。此外，PHP 和 Twig 用于编译 Stories。在 macOS 上，使用 brew install php 安装 PHP。
为什么这个存储库存在？
Storybook 是一个在隔离状态下开发和测试组件的出色工具。它也是一个记录组件的出色工具。这个存储库是 PicoCSS 默认主题的骨架。它是基于 PicoCSS 开发自己的设计并记录组件的起点。
目标
此存储库的目标是为开发 PicoCSS 主题和调色板提供起点。从使用 PicoCSS 默认主题的组件库开始。作为额外的好处，此存储库可以生成可用于 Symfony 项目的 Symfony UX Twig 组件。这可以通过将生成的 Twig 组件命名空间自动加载到 Symfony 项目中来实现。
入门
要开始，首先克隆此存储库。
git clone git@github.com:vardumper/picocss-storybook.git
cd picocss-storybook
然后运行
make
这将安装 Composer 和 Yarn 依赖项，构建 storybook，并最终为您启动 Storybook。
路线图
- 自动添加所需的所有可能参数组合（笛卡尔积）作为 stories。
- 从 preview.js 中移除 pico.css，而是使用不带默认主题的自定义 pico.scss。
- 使用 PicoCSS 特定定义丰富 HTML5 规范。（例如：class="{contrast|outline|secondary}"）
- 将样式移动到分类/文件夹/_component-name.scss 文件中。决定是自动生成还是手工制作。
- 完成所有 HTML5 元素，包括复杂或组合组件。
- 自动为不同的技术（Twig、React、Vue、Angular、Svelte 等）生成模板。