Nursedash-component-library NPM

NurseDash Component Library

Description

The component library is a collection of modular components that we use to build scalable, consistent, and reliable products. This library adheres to NurseDash's branding and UX design patterns. The design library used is a React based library leveraging the base component library of ChakraUI. Chakra also utilizes storybook, and you will be able to explore their component library via our launched version of Storybook as well. The successful execution and maintenance of this repository relies on a strong partnership between Product, Engineering, and Design.

Storybook

Storybook is an open source tool for building UI components and pages. The goal of utilizing storybook is to streamline our applications with consistent component driven development while prioritizing testing and documentation. If you'd like to check out the production version of the component library, please visit https://components.nursedash.com.

Contributing to the Component Library

Every component in this library should be built with modularity, scalability, design consistency and reliability in mind. If you find yourself creating a component that has a very specific use case in mind, you are finding difficult to test, etc. Take a step back and ask yourself if this component truly belongs in this library, or if there is a better way to modularize the component you're working with.

Setting Up Your Development Environment

This guide assumes that you have some basic development tools set up and configured on your machine such as Homebrew/Nuget. If you do not have a base setup and need assistance, please contact your direct supervisor.

Install Node
Install Yarn
Run the command yarn in your terminal
Start the project using the command npm run storybook

Expectations

Documentation

Every component should have written documentation upon its creation regarding how the component is used, any additional information about the props required, etc. if you are editing a pre-existing component, you must ensure the documentation is still accurate and up to date.

Testing

Every component should be complete with a set of tests. This repo follows the recommended method for testing set forth by the Storybook creators. All test types needed should have been covered in their configuration. For any guidance or questions, please consult their documentation

Branching

There is only one branch on this repository, master. This repository uses Trunk Based Development strategies. An example of working on this repository is below: 1. Pull the latest code from master 2. Create your branch on your local machine 3. Make magical code things happen, with magical tests, and magical documentation 4. Push your branch up to the remote 5. Create a pull request directly into master 6. Merge once PR policies have been met

NOTE: Forced pushes, and pushing directly to master is not permitted.

Pull Requests

There is a pull request template in this repository. This is always the template that should be used when creating a PR for this project. Failure to fill out the PR template will result in the PR being rejected.

All CI/CD pipelines must pass in order for the PR to be merged.

Linting

ES Lint is used for linting. The styleguide enabled follows the Airbnb Styleguide. Code will not be merged if there are linter errors detected.

Formatting

For code formatting tool used is Prettier. Most IDEs allow for code formatting upon save. We do prefer that you enable this capability to ensure that styles are consistently enforced. However, if you choose not to enable this capability, please be aware, your PR can be rejected due to forgetting to format correctly.

Menu Structure

The menu structure to follow should match that of Chakra UI to encourage consistency. For example Forms > Buttons > Primary Button would be a correct structure that reflects the Chakra UI implementation.

Deploying

Code is deployed automatically upon branches being merged into master.

Using the Component Library

Install the component library via npm or yarn. There are various ways to accomplish this. The easiest would be to reference the package via its GitHub link directly, until we officially publish it via the npm registry.