@hired/hcl NPM

📚 Take me to Storybook

hcl 🧪

hcl is a component library developed for implementing UI at hired.com.

The library is built on the following principles:

Look pretty close to the rest of hired.com
Make components rapidly available
Be as accessible as possible given development timeframes
Don't collide with the myriad other UI implementations on the platform
Enable development without full reliance on design input
Don't expose implementation details (yes, that means Tailwind is not coming to the hired.com codebase)
Provide easy access to additional styling and overrides where appropriate
Don't reinvent the wheel, use existing headless UI libraries when we can
Target the tech stack and versioning of the hired.com codebase dependencies
Be consistent

Developing hcl

Running hcl locally

Run yarn storybook to start the Storybook server. This is where you will develop and document hcl components.

Linking hcl to hired/hired

Linking hcl with hired allows you to see changes you've made to hcl locally within the hired dev environment.

From the hcl repo, run yarn link
From the hired repo, run yarn link @hired/hcl

Running into issues with linking?

Running yarn build within hired/hired will create artifacts that will be served to the browser and may result in changes to your linked package not being shown on screen, as well as runtime errors. One workaround is to run rails assets:clobber in your hired/hired project (this will remove public/vite-dev as well as vite caches) and to serve JS assets via yarn start instead.

Note: running your rails server without running the yarn server will also trigger a build, causing the same issue detailed above.

🤓 Please add any new issues and solutions that may arise 🤓

🚨 Remember to: 🚨

Export your components in src/components/index.ts
Increment the semantic version of the package whenever making an update on anything that gets exported from the library
Bump up the version of hcl in hired/hired any time a new version is published