@archilogic/honeycomb

中文文档
3.14.1发布于 2026/11/04TypeScriptES Module近 30 天下载 4110

This UI library is the implementation of Archilogic's Design System, formerly known as ui-components.

原始使用文档
文档目录9 节
  1. Usage
  2. Development
  3. Storybook
  4. Testing and CI/CD
  5. Release
  6. Build
  7. Dependencies update
  8. Adding icons
  9. IDE Recommended Plugins

Honeycomb - Archilogic's Design System library

This UI library is the implementation of Archilogic's Design System, formerly known as ui-components.

To install the v2 release (public on npm), run npm i @archilogic/honeycomb

Honeycomb components require Vue (v3), Tailwind CSS, and Headless UI libraries to work correctly.

Figma design files

Storybook documentation

Usage

Please refer to our Storybook docs for the most current and complete documentation.

Development

To get started with local development, clone the repo and run nvm use && npm install.

Storybook

To run a local Storybook dev server:


npm run storybook

Testing and CI/CD

To run unit tests (Vitest):


npm run test

To run the real-browser tests (Chromium and WebKit via Playwright, for focus, layout and pointer behaviour jsdom can't model):


npx playwright install --only-shell chromium webkit # once
npm run test:browser

Automated visual testing is set up with Storybook and Chromatic. (Everyone in Archilogic Github organization can log into Archilogic organization in Chromatic)

Each branch is deployed to Chromatic on push via GitHub Actions.

Release

Version management and publishing of this library are done with semantic-release.

On each merge to the main branch the release workflow will be triggered. It will determine the new version, publish the new package to npm, create a GitHub release, as well as update the changelog and package.json. This package version will be published on the @latest distribution channel.

Each push to the beta and next branches will trigger a pre-release on the @beta and @next distribution channels correspondingly.

A push to any branch starting with test- will publish a pre-release.

For this process to work as expected, make sure to adhere to the conventional commits format when merge-squashing PRs.

Build


npm run build

Use npm run watch when developing as a locally linked dependency.

Dependencies update

Dependencies updates are managed by dependabot. Dependabot’s pull requests can be bundled together by the Combine PRs action (click on “Run workflow”). It should work with all the default settings, but you have to enter “ui-components” for the repository name. To keep a clean change history, please make sure to squash-merge the PR resulting from running Combine PRs.

Adding icons

  1. inspect the icon in Figma
  2. right-click "Copy/Paste as" > "Copy as SVG" or use the "Export" section of the "Design" tab in the left sidebar panel.
  3. (optional) paste the SVG snippet in SVG OMG
  4. (optional) copy the optimized SVG snippet
  5. create a new .svg file. The size of the icon determines its target folder: sm/ 16x16, md/ 32x32, lg/ 40x40, fp/ floor-plan label pictograms (20x20, glyph normalized to 19px = near-zero padding), other/ everything else
  6. replace (some) colors with currentColor so the color of the icon can be set via CSS

Please check the VS Code recommended plugins page for a list of suggested extensions for the project.

版本与发布记录

@archilogic/honeycomb 共发布 144 个版本,首次发布于 2023/01/19;过去 12 个月发布了 64 个版本。

版本发布日期距今
3.14.1latest2026/11/043 天前
3.14.02026/11/043 天前
3.14.0-test-al-8171.12026/10/318 天前
3.13.02026/10/2810 天前
3.12.02026/10/2117 天前
3.11.02026/10/071 个月前

其他发布通道:test-deps-upd → 2.0.0-test-deps-upd.1,test-build-changes → 2.0.0-test-build-changes.1,test-without-exclude-ts → 2.0.0-test-without-exclude-ts.1,next → 3.0.0,test-bundle-presets → 2.5.1-test-bundle-presets.1,test-preset-fix → 2.5.1-test-preset-fix.1。

关于 @archilogic/honeycomb 的常见问题

@archilogic/honeycomb 是什么?

This UI library is the implementation of Archilogic's Design System, formerly known as ui-components.

如何安装 @archilogic/honeycomb?

在项目目录运行 npm install @archilogic/honeycomb,或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖:vue(^3.5.18)、tailwindcss(^4.0.0)、@headlessui/vue(^1.7.23)。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖,Yarn 需要手动安装。

@archilogic/honeycomb 支持 TypeScript 吗?

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

@archilogic/honeycomb 支持 ESM 还是 CommonJS?

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

@archilogic/honeycomb 需要什么版本的 Node.js?

package.json 的 engines 字段要求 Node.js >=22.12。版本不符时 npm 默认只给出警告,开启 engine-strict 后会拒绝安装。

@archilogic/honeycomb 可以商用吗?

@archilogic/honeycomb 使用 未声明 许可。package.json 没有声明许可证。没有许可证的代码默认保留全部权利,商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括,不构成法律意见,请以许可原文为准。

@archilogic/honeycomb 的下载量有多少?

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

@archilogic/honeycomb 还在维护吗?

最新版本 3.14.1 发布于 2026/11/04(3 天前);至今共发布 144 个版本,其中过去 12 个月发布了 64 个;首次发布于 2023/01/19。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。