@naturalselectionlabs/hui

Overview

The shared react web component library for the whole organization.

Tech stack

If you are not familiar with the items below, please at least go over their basic tutorial.

• typescript
• tailwindcss
• emotion
• vitest
• storybook

Setup

npm i

You might want to install the recommended extensions in this file.

Development

All components should live in this folder.

npm start

To debug the components, you can create routes in this file to quick debug a component, and visit the home page to see the list of component, check playground example for more details.

Or you can use storybook to better test and document components, check the example stories for more details:

npm run storybook

To run unit tests:

npm test

To update the vitest snapshots:

npx vitest -u

To format your code use:

npm run format

Deployment

npm run publish

Use this lib

Install it as dependency:

npm i @naturalselectionlabs/hui

Then use it in your code:

import { Button } from '@naturalselectionlabs/hui'

export default function Page() {
  return <Button>OK</Button>
}

You must enable the tailwind compilation in the tailwind.config.js:

module.exports = {
  content: ['./node_modules/@naturalselectionlabs/hui/**/*.js'],
}

Debug this lib on another npm package

Clone the repo and use it as a local package in package.json:

{
  "dependencies": {
    "@naturalselectionlabs/hui": "file:../@naturalselectionlabs/hui/dist"
  }
}