让开源，少一点语言距离。
npm包中文文档

@drawbridge/components

中文文档
0.1.27发布于 2026/11/13ISCTypeScriptES Module近 30 天下载 4467

The components for Drawbridge. Three folders: shared/ renders on both the dashboard and the bridge pages, dashboard/ and bridge/ on one. Variants and tokens live in components/styles.css, which both apps import; a call site adds layout classes onl

原始使用文档
中文原文
文档目录4 节
  1. Work on a component
  2. The app on the web
  3. See it in an app without publishing
  4. Add or move a component

@drawbridge/components

The components for Drawbridge. Three folders: shared/ renders on both the dashboard and the bridge pages, dashboard/ and bridge/ on one. Variants and tokens live in components/styles.css, which both apps import; a call site adds layout classes only, never a colour.

Work on a component

npm run app              # every component, every state, at http://localhost:3003 (the family's ports: dashboard 3000, share 3001, website 3002)
npm run test:app         # renders every story in Chromium; fails on an error
npm test                 # exports resolve, every component has a story, unit tests

A component without a .stories.js beside it fails npm test. One story per visible state.

The app on the web

https://components.trydrawbridge.com is this app, built from main on every push (.do/app.yaml, Dockerfile): npm run app:build makes the static site and server.js serves it behind the family's staging gate, the BASIC_AUTH_USERNAME and BASIC_AUTH_PASSWORD pair set on the DigitalOcean app, the same values that open the dev dashboard and website. Unset both and the site is public; /health is always open.

See it in an app without publishing

npm run dev                                   # here: rebuilds dist on change
cd ../drawbridge-app-web && npm link ../drawbridge-components
npm run dev                                   # the app resolves the package from this checkout

Undo with npm unlink @drawbridge/components && npm install in the app. Never publish from a feature branch.

Add or move a component

Put the file in its folder, write its story and its types/<folder>/<name>.d.ts, then npm run exports to regenerate the exports map. Never hand-edit exports.

版本与发布记录

@drawbridge/components 共发布 103 个版本，首次发布于 2026/04/15；过去 12 个月发布了 103 个版本。

版本发布日期距今
0.1.27latest2026/11/13今天
0.1.262026/11/121 天前
0.1.252026/11/121 天前
0.1.242026/11/121 天前
0.1.23espresso2026/11/103 天前
0.1.222026/11/103 天前

关于 @drawbridge/components 的常见问题

@drawbridge/components 是什么？

The components for Drawbridge. Three folders: shared/ renders on both the dashboard and the bridge pages, dashboard/ and bridge/ on one. Variants and tokens live in components/styles.css, which both apps import; a call site adds layout classes onl

如何安装 @drawbridge/components？

在项目目录运行 npm install @drawbridge/components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：qs（>=6.15.2）、next（>=14）、react（>=18）、react-countdown（>=2.3.6）、react-hook-form（>=7.62.0）、@headlessui/react（>=2.1.2）、@hookform/resolvers（>=3.1.1）、@tanstack/react-query（>=5.54.1）、react-google-recaptcha-v3（>=1.10.1）、@drawbridge/drawbridge-utils（>=0.0.230）、@tanstack/react-query-devtools（>=5.54.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

@drawbridge/components 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

@drawbridge/components 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node.js 20.19+ / 22.12+ 可以直接 require() 不含顶层 await 的 ES Module，更早的版本需要改用动态 import()。

@drawbridge/components 可以商用吗？

@drawbridge/components 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

@drawbridge/components 的下载量有多少？

根据 npm 官方下载统计，@drawbridge/components 在 2026/10/13 – 2026/11/11 这 30 天内被下载 4,467 次，日均约 149 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

@drawbridge/components 还在维护吗？

最新版本 0.1.27 发布于 2026/11/13（今天）；至今共发布 103 个版本，其中过去 12 个月发布了 103 个；首次发布于 2026/04/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。