# Workfinder Components

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![npm version](https://badge.fury.io/js/workfinder-components.svg)](https://badge.fury.io/js/workfinder-components)

## Description 📝

Components library for [Workfinder](https://workfinder.com/)-related pages.

## Table of Contents 📚

- [Installation](#installation-)
- [Usage](#usage-)
- [Development](#development-)
  - [Storybook](#storybook-)
  - [Rollup](#rollup-)
- [Testing](#testing-)
  - [Running Tests](#running-tests-)
  - [Chromatic Testing and Publishing](#chromatic-testing-and-publishing-)
    - [Automated Testing with Chromatic](#automated-testing-with-chromatic-)
    - [Manual Testing with Chromatic](#manual-testing-with-chromatic-)
- [Contributing](#contributing-)
- [License](#license-)



## Installation 🚀

To install the `workfinder-components` library, you can use npm or yarn:

```bash
npm install workfinder-components
```

or

```bash
yarn add workfinder-components
```

## Usage 🚀
Once installed, you can import and use the components in your React project:
```javascript
import { ComponentName } from 'workfinder-components';
```

## Development 👨‍🔧
### Storybook 📖
To start the development environment and Storybook, use the following command:

```bash
npm run storybook
```

or

```bash
yarn storybook
```

This will start Storybook at http://localhost:6007.

### Rollup 🧱

Rollup is a popular JavaScript module bundler that focuses on creating efficient and optimized bundles for modern web applications and libraries. It is particularly well-suited for building JavaScript libraries and components due to its tree-shaking capabilities and support for ES modules.

#### Why Use Rollup? 🤔

- **Tree-Shaking**: Rollup analyzes the import and export statements in your code and removes unused code during the bundling process. This leads to smaller bundle sizes and better performance.

- **ES Modules (ESM) Support**: Rollup natively supports ES modules, making it an excellent choice for creating packages that can be used by other modern tools and build systems.

- **Simplified Configuration**: Rollup's configuration is straightforward and easy to understand, making it quick to set up and customize your build process.

- **Fast and Efficient**: Rollup is designed to be fast and efficient, making it a great choice for large-scale projects where performance matters.

#### Rollup Configuration (rollup.config.js)

In the `rollup.config.js` file, you define how Rollup should bundle your library. Here are some key points to note in the provided configuration:

- **Input**: The `input` field specifies the entry point of your library, where Rollup starts bundling.

- **Output**: The `output` field defines the desired output format and location of the bundled files. In this case, it generates two output files, one for CommonJS (`format: "cjs"`) and another for ES modules (`format: "esm"`).

- **Plugins**: The `plugins` field lists the Rollup plugins used in the build process. For example, `peerDepsExternal()` helps externalize peer dependencies, and `resolve()` enables resolving dependencies from node_modules.

- **PostCSS and Copy**: Rollup is not limited to just JavaScript; it can handle other assets as well. In this configuration, the `postcss` and `copy` plugins are used to handle CSS files and copy assets, respectively.

- **External Dependencies**: The `external` field contains the list of dependencies that should not be bundled but rather treated as external dependencies. In this case, `"react"` and `"react-dom"` are marked as external, as they are expected to be provided by the consumer of the library.

### How to Build with Rollup 📦

To build your library using Rollup, simply run the following command:

```bash
npm run build
```

### Color Palette 🎨

The Workfinder Components library defines a color palette to maintain consistency and branding across its components. Here are some key colors and their intended usage:

#### Primary Colors:
`$wf-blue`: This is the primary color used for buttons, links, and other primary components.
`$wf-blue-variant`: A variant of the primary blue, used for elements that require a slightly different shade.

#### Secondary Colors:
`$heliotrope`, `$maze-crayola`, `$sinopia`, `$iluminating-emerald`: These colors are used for secondary elements like secondary buttons and icons.

#### Error, Warning, and Success Colors:
`$error-1`, `$error-2`, `$error-3`: Used to indicate error states in components.
`$warning-1`, `$warning-2`, `$warning-3`: Used to indicate warning or caution states in components.
`$success-1`, `$success-2`, `$success-3`: Used to indicate successful or positive states in components.

#### Shades:
`$black`, `$white`: Basic black and white colors for text and backgrounds.
`$grey-1` to `$grey-8`: Different shades of grey used for various elements.


#### Additional Colors:
`$fair-pink`, `$buttercup`, `$jade`, `$clear-day`, and others: Additional colors for specific use cases within the components.

To use these colors in your components, you can access them directly by importing the main SCSS file. For example:

```scss
@import "../../scss/main.scss"; // depending on the location of your file

.primary-button {
  background-color: $wf-blue;
  color: $white;
}

.secondary-button {
  background-color: $heliotrope;
  color: $black;
}

.error-message {
  color: $error-1;
}
```


## Testing 🧪
### Running Tests 🏃
To run tests, use the following command:

```bash
npm test
```

or

```bash
yarn test
```

To run tests in watch mode, use:

```bash
npm run test:watch
```

or

```bash
yarn test:watch
```

### Chromatic Testing and Publishing 🎨📚
Chromatic is used for testing and publishing components in this library. It ensures that visual UI components are consistent across different environments and showcases interactive component demos.

#### Automated Testing with Chromatic 🤖
Chromatic tests are automatically triggered in the CI/CD pipeline for every push to the repository's main branch. It checks for visual changes and provides a visual diff report.

#### Manual Testing with Chromatic 👩‍💻
To run Chromatic tests manually, use the following command:

```bash
npm run chromatic
```

or

```bash
yarn chromatic
```

## Contributing 👥

We welcome contributions! If you'd like to contribute to this project, please follow these steps:

1. Fork the repository.
2. Create a new branch with a descriptive name.
3. Make your changes and commit them.
4. Push the changes to your forked repository.
5. Submit a pull request to the main repository.

Please ensure your code adheres to the project's coding standards and passes all tests.


## License 📄

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.