Hesburgh Component Library Next

This is the repo for the NextJS Version of the Hesburgh Component Library, a set of React components that escapsulate the design patterns used by the Hesburgh Library IT department.

Using the library

Installation

To install the library in your project, run

yarn install @ndlib/component-library-next

Setup

UiProvider

In order for styles to be applied correctly, the UiProvider component must be included at the top of your project.

<UiProvider>
  <App>
</UiProvider>

Running locally

Dependencies must be installed before storybook can be started. Dependencies can be installed with: yarn install.

To build and deploy your storybook locally for development, run yarn start

Testing locally

If you wish to test your changes locally in another project that uses the component library, use the following steps:

1. Run yarn build
2. Enter pwd in the terminal to generate the path where the component library is located on your machine
3. In the package.json of the project you wish to test the locally modified component library in, replace the version of the component library with "file:///<PATH>"
4. Run yarn install or npm run install

If you need to make a change in the component library and test again:

1. Rerun yarn build in the component library
2. In your other project, change the package.json to use the version number again instead of the path
3. Run yarn install or npm run install again
4. Change the version back to the path, and run yarn install or npm run install again

Deploying Storybook

Whenever a commit is added to the main branch, the contents of the /docs folder will be deployed to our Github pages site.

To build a new version of the storybook to be deployed, run yarn build-storybook. Our storybook build uses vite.

Running tests

Tests are run using vitest, a test-runner built for vite that is similar to jest. Test suite can be run with: yarn test

Linting

Changes should be linted before commits. Run our linter with yarn lint. Failed linting will block builds and deploys. Our lint process uses eslint and prettier. Running yarn lint:fix will fix any issues that can be automatically fixed.

Building for npm

The build process for the npm module for this library uses tsc. ESM exports are used to better support tree-shaking. When adding new code to this library, be careful to ensure than importing the module do not cause side-effects. In other words, don't execute any process or do any state management outside of exported properties or functions because this code might be removed by tree-shaker. See examples below:

Wrong

// This code may get removed by tree-shaker
setTimeout(() => {
  console.log('hello world')
})

Right

export const myFunction = () => {
  setTimeout(() => {
    console.log('hello world')
  })
}