@archilogic/honeycomb

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

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, other/ everything else
6. replace (some) colors with currentColor so the color of the icon can be set via CSS

IDE Recommended Plugins

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