# Baselayer UI - React Component Library

https://baselayer-ui.touchtech.com

## Development

Run `npm install` to install the project dependencies. Since this library is used by multiple Digital Showroom projects it's important that we create
a global [link](https://docs.npmjs.com/cli/link) so we can use this local copy in the other projects during development. Run `npm link` to do so.

Run `npm start` to open our [Storybook](https://storybook.js.org).

### Testing

We test our components using [Jest](http://jestjs.io) and [React Testing Library](https://github.com/testing-library/react-testing-library). Tests are placed in the `__tests__` directory in the same directory as the component.

```
src/
├── Button
│   ├── Button.js
│   ├── Button.module.css
│   ├── Button.stories.js
│   ├── __tests__
│   │   └── Button.test.js
│   └── index.js
└── index.js

2 directories, 6 files
```

You can execute `npm run test` or `npm test` as a shorthand to run all tests. Running `npm test` every time you change a file gets old pretty fast. Thankfully we can mitigate that by entering watch mode.

- `npm test -- --watch`

### Linting & Formatting

We lint our code using [ESlint](https://eslint.org). For your convinience there are a few [npm scripts](https://docs.npmjs.com/misc/scripts) available.

- `npm run lint` - Run the linter over the entire codebase and report problems.
- `npm run lint-fix` - Run the linter over the entire codebase and automatically fix problems.

[ESlint](https://eslint.org) also have editor integrations, see [editors](https://eslint.org/docs/user-guide/integrations#editors) for instructions on how to set up your editor.

We format our code using [Prettier](https://prettier.io). For your convinience there are a few [npm scripts](https://docs.npmjs.com/misc/scripts) available.

- `npm run format` - Run the formatter over the entire codebase and report any formatting issues.
- `npm run format-fix` - Run the formatter over the entire codebase and automatically format the code.

[Prettier](https://prettier.io) also have editor integrations, see [editors](https://prettier.io/docs/en/editors.html) for instructions on how to setup your editor.

Since linting and formatting is such a common task, you can execute `npm run check` to check for both linting problems and formatting issues simultaneously. Execute `npm run fix` to automatically fix both.

### CSS

Each component can have a related CSS file. The CSS file should end with the extension `.module.css` and is treated as a [CSS Module](https://github.com/css-modules/css-modules). Whenever a `.module.css` file is imported, its definitions
are only available locally to the component importing it. When referencing class names from a CSS Module use camelCase. E.g., `.button-small` becomes `buttonSmall`.

**Example**

```css
/* Button.module.css */
.button-small {
}
```

```javascript
// Button.js
import React from "react";
import styles from "./Button.module.css";

function Button({ children }) {
  return <button className={styles.buttonSmall}>{children}</button>;
}

export default Button;
```