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.
Please refer to our Storybook docs for the most current and complete documentation.
To get started with local development, clone the repo and run nvm use && npm install.
To run a local Storybook dev server:
npm run storybook
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.
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.
npm run build
Use npm run watch when developing as a locally linked dependency.
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.
- inspect the icon in Figma
- right-click "Copy/Paste as" > "Copy as SVG" or use the "Export" section of the "Design" tab in the left sidebar panel.
- (optional) paste the SVG snippet in SVG OMG
- (optional) copy the optimized SVG snippet
- create a new .svg file. The size of the icon determines its target folder:
sm/16x16,md/32x32,lg/40x40,other/everything else - replace (some) colors with
currentColorso 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.