Nightingale Design System

Follow the documentation below to get Nightingale up and running locally for development.

Getting Started

1. Clone the repo: git clone [email protected]:team-florence/nightingale.git
2. Install dependencies: yarn install
3. We use husky & lint-staged to run Prettier, ESLint and TSC prior to commiting. Github actions has also been configured to run all of these tools in CI.
4. Run storybook to preview all of the components available:
   • yarn storybook:flex to run with the Flex 'theme' applied
   • yarn storybook:academy to run with the Academy 'theme' applied

Contributing

Creating a new component

1. Read the documentation on Notion for best practices to follow: Building Nightingale components
2. Create a new folder in src/components with the name of your component
3. Create a new file in the folder called index.tsx -> this is your component
4. Export your component inside ./src/index.ts
5. Make sure the component has a Storybook story and unit test written with @testing-library/react

Testing Locally

It is highly advisable to run your branch of Nightingale locally in your consuming application to ensure that any changes/new components work as expected prior to opening a PR. To do this, you will need to use yalc.

1. Install yalc globally on your machine with: yarn global add yalc
2. In the root of the Nightingale repo, run yalc publish in a terminal
3. In your consuming application directory (Flex or Academy), run yalc add nightingale in a terminal
4. This tells Flex or Academy to use the local version of Nightingale instead of the published version on Github
5. Run your consuming application locally and test your changes

Useful Commands

yarn test - Runs all unit tests with Jest

yarn test:watch - Runs a single unit test with Jest in watch mode. This will hot-reload and re-run the test automatically as you make changes to the component or test file. This is useful when you're writing a new test, or working on fixing a failing test

yarn test:coverage - Generates and automatically opens a test coverage report in your browser

yarn typescript - Runs the Typescript compiler to check for any type errors

yarn prettier - Runs Prettier to check for any formatting errors

yarn lint - Runs ESLint to check for any linting errors