@abcnews/story-lab-component-library 中文文档教程
Story Lab component library
一组可重用的 React 组件,用于故事实验室……故事。
Usage
npm install @abcnews/story-lab-component-library
这个库还处于起步阶段,几乎没有文档记录,甚至没有用处。
您可以在故事书中查看所有可用组件
Development
开始使用:
git clone https://github.com/abcnews/story-lab-component-library.git
cd story-lab-component-library
npm i
推荐的工作流程是在一个终端中运行 TSDX,在另一个终端中运行 Storybook:
npm start
这构建到 /dist
并以监视模式运行项目,因此您在 src
中保存的任何编辑都会导致重建到 /dist
。
Storybook
在另一个终端内运行:
npm run storybook
这会从 ./stories
加载故事。
注意:故事应该像使用库一样引用组件,类似于示例游乐场。 这意味着从根项目目录导入。 这在 tsconfig 和 storybook webpack 配置中被别名为 helper。
Build & release
使用 np 构建和部署版本。
npm run release
如果您正在部署新的生产版本,您还应该更新 Storybook。 以下命令将全新构建并将其部署到 GitHub 页面。
npm run deploy-storybook
Story Lab component library
A collection of reusable React components for use in Story Lab … stories.
Usage
npm install @abcnews/story-lab-component-library
This library is in its infancy and is barely documented or even useful.
You can see all available components in the storybook
Development
Get started:
git clone https://github.com/abcnews/story-lab-component-library.git
cd story-lab-component-library
npm i
This repository uses TSDX with Storybook.
The recommended workflow is to run TSDX in one terminal and Storybook in another:
npm start
This builds to /dist
and runs the project in watch mode so any edits you save inside src
causes a rebuild to /dist
.
Storybook
Run inside another terminal:
npm run storybook
This loads the stories from ./stories
.
NOTE: Stories should reference the components as if using the library, similar to the example playground. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.
Build & release
Releases are built and deployed using np.
npm run release
If you're deploying a new production release, you should also update the Storybook. The following command will freshly build and deploy it to GitHub pages.
npm run deploy-storybook