# @bbc/psammead-storybook-helpers 中文文档 规范地址：https://npmcn.com/package/%40bbc/psammead-storybook-helpers/ 版本：9\.0\.17 npm 元数据更新时间：2025-03-06T15:54:07.411Z 中文译文更新时间：2026-11-07T18:48:00.977Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40bbc/psammead-storybook-helpers 原文对照：https://npmcn.com/package/%40bbc/psammead-storybook-helpers/?lang=original 项目主页：https://github.com/bbc/psammead/blob/latest/packages/utilities/psammead-storybook-helpers/README.md 源码仓库：https://github.com/bbc/psammead/tree/latest/packages/utilities/psammead-storybook-helpers ## 关键信息（来自 npm 元数据） - 包体积（解压后）：164 kB，22 个文件 - 模块格式：ESM + CJS - TypeScript 类型：未声明 - 运行依赖：2 个 - 首次发布：2019-04-04T11:06:34.264Z - 最新版本发布：2021-09-30T14:12:05.603Z - 近 30 天下载量：9529（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：79（近 12 个月 0 个） ## 中文简介 Psammead组件在故事书中使用的共同价值集. ## 安装 ```sh npm install @bbc/psammead-storybook-helpers ``` 也可以使用：`pnpm add @bbc/psammead-storybook-helpers`、`yarn add @bbc/psammead-storybook-helpers`、`bun add @bbc/psammead-storybook-helpers` ## README # phammead - storybook - 帮助者 - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Futilities%2Fpsammead-storybook-helpers%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Futilities%2Fpsammead-storybook-helpers%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/utilities/psammead-storybook-helpers)](https://david-dm.org/bbc/psammead?path=packages/utilities/psammead-storybook-helpers) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/utilities/psammead-storybook-helpers)](https://david-dm.org/bbc/psammead?path=packages/utilities/psammead-storybook-helpers&type=peer) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-storybook-helpers.svg)](https://www.npmjs.com/package/@bbc/psammead-storybook-helpers) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md) 这个软件包提供了Psammead组件在故事书中使用的共同值集合. ## 出口 `TEXT_VARIANTS` - 不同语言文本样本清单,其中包含该语言应使用的脚本和方向. `themes` - 一个包含我们用的故事书主题的物体. `withServicesKnob` - 函数返回一个故事本装饰器函数,该函数增加了一个 `Select a service` 掉到接头板上 当服务从下拉中选择时,它做两件事: 1. 提供可传递为组件的装饰故事,其属性如下: - `text`: 所选服务语言的短串文字. - `longText`: 所选服务语言中的一长串文字(我们可以用它来强调测试组件). - `dir`: 所选服务的读取方向性, 例如. `ltr` 或者说 `rtl`。 。 。 . - `script`:选定服务的脚本打字设置,例如字体大小和行高. - `service`:选定服务的名称等. `arabic`。 。 。 . - `variant`: 所选服务的可变值, 例如 `serbianLat` 将会有变体 `lat`非变体服务将默认为 `default`。 。 。 . - `articlePath`:相关服务中一条文章的路径. - `selectedService`: 所选服务在可提供服务的倒放中出现的名称. 2. 切换选定服务的布局方向性. 这个 `withServicesKnob` 函数接受带有2个属性的选项参数: - `defaultService`(String):服务所选的默认服务,例如倒下. `arabic`默认为 `news`。 。 。 . - `services`(Array):降级将显示的服务列表. 默认是所有服务. `buildRTLSubstories` - 创建故事从右到左的变体作为子故事的函数。 内部使用 `withServicesKnob` 将默认服务设置为 `arabic`。 。 。 . 这个 `buildRTLSubstories` 函数接受2个参数. - `storyKind`(String) - 这是你想从中创建RTL子故事的故事类型. 这通常是你第一次辩论 `storiesOf` 譬如说. `storiesOf('Components/Paragraph', module)`。需要这个参数. - `options`(目标) - 可用的选项: - `include`(Array) - 创建RTL子故事的具体故事名列表. 如果不提供,则所有的故事都会有RTL子故事. ## 安装 ```sh npm install @bbc/psammead-storybook-helpers --save-dev ``` ## 使用量 ### 文本( V) ```jsx import { select } from '@storybook/addon-knobs'; import { TEXT_VARIANTS } from '@bbc/psammead-storybook-helpers'; const label = 'Languages'; const defaultValue = 'This is a caption'; const groupIdentifier = 'CAPTION VARIANTS'; {select(label, TEXT_VARIANTS, TEXT_VARIANTS.news, groupIdentifier).text} ; ``` ### 使用服务器 Knob ```js storiesOf('Components/Paragraph', module) .addDecorator(withKnobs) .addDecorator(withServicesKnob()) // default selected service is `news` .add('A paragraph with English text', ({ text, script, service }) => ( {text} )); ``` 要设置默认服务 : ```js storiesOf('Components/Paragraph', module) .addDecorator(withKnobs) .addDecorator( withServicesKnob({ defaultService: 'arabic', services: ['news', 'arabic', 'amharic'], }), ) // default selected service is `arabic` and the available services in the dropdown are `news`, `arabic`, `amharic` .add('A paragraph with Arabic text', ({ text, script, service }) => ( {text} )); ``` 如果你想将这个装饰器添加到一个单一的故事中,而不是上面所记载的一系列故事中,或许是因为你需要每个故事有一个不同的默认服务,那么你需要直接地来装饰每个故事,而不是使用上面所记载的一系列故事 `addDecorator` 方法。 下面是您如何写这个的例子: ```js const arabicServiceDecorator = withServicesKnob({ defaultService: 'arabic', }); const pashtoServiceDecorator = withServicesKnob({ defaultService: 'pashto', }); storiesOf('Components/Paragraph', module) .addDecorator(withKnobs) .add('A paragraph with Arabic text', () => arabicServiceDecorator(({ text, script, service }) => ( {text} )), ) .add('A paragraph with Pashto text', () => pashtoServiceDecorator(({ text, script, service }) => ( {text} )), ); ``` 您可以在相关服务和变体中包含文章链接 ```js const BASE_URL = 'https://www.bbc.com'; storiesOf('Components/Paragraph/Link', module) .addDecorator(withKnobs) .addDecorator(withServicesKnob()) // default selected service is `news` .add( 'A paragraph with an inline link to an article', ({ text, script, service, articlePath }) => ( {text} ), ); ``` 上述例子排除了使用 `addDecorator` 方法并直接装饰故事. ### 构建RTL 属性 ```jsx import { buildRTLSubstories } from '@bbc/psammead-storybook-helpers'; // create RTL variants of all stories of a kind buildRTLSubstories('Components/Paragraph'); ``` ```jsx import { buildRTLSubstories } from '@bbc/psammead-storybook-helpers'; // create RTL variants of specific stories of a kind buildRTLSubstories('Components/Paragraph', { include: ['containing an inline link'], }); ``` ## 捐款 何时 **添加** 向此工具包新导出 [出口测试](https://github.com/bbc/psammead/blob/dab14a2732cfa620e083b7da66a148b4189474a7/packages/utilities/psammead-storybook-helpers/index.test.jsx#L13-L15) 还需要更新。 何时 **删除** 从此工具包中导出 [出口测试](https://github.com/bbc/psammead/blob/dab14a2732cfa620e083b7da66a148b4189474a7/packages/utilities/psammead-storybook-helpers/index.test.jsx#L13-L15) 软件包版本需要更新,需要作重大修改(EG:1.2.1 - > 2.0.0),因为这将被视为由于功能被去除而导致的突破性修改. Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: [psammead 仓库的根](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)。 。 。 . ### [行为守则](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md) 我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 [行为守则](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)请稍候再读一下. ### 许可证 萨姆米德 [Apache 2.0 许可](https://github.com/bbc/psammead/blob/latest/LICENSE)。 。 。 . ## 常见问题 ### @bbc/psammead-storybook-helpers 是什么？ Psammead组件在故事书中使用的共同价值集\. ### 如何安装 @bbc/psammead-storybook-helpers？ 在项目目录运行 npm install @bbc/psammead-storybook-helpers，或使用 pnpm add / yarn add / bun add。 ### @bbc/psammead-storybook-helpers 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bbc\_\_psammead-storybook-helpers 是否存在。 ### @bbc/psammead-storybook-helpers 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @bbc/psammead-storybook-helpers 可以商用吗？ @bbc/psammead-storybook-helpers 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。 ### @bbc/psammead-storybook-helpers 的下载量有多少？ 根据 npm 官方下载统计，@bbc/psammead-storybook-helpers 在 2026/10/08 – 2026/11/06 这 30 天内被下载 9,529 次，日均约 318 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @bbc/psammead-storybook-helpers 还在维护吗？ 最新版本 9\.0\.17 发布于 2021/09/30（5 年前）；至今共发布 79 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/04/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。