Workfinder Components


Description 📝

Components library for Workfinder-related pages.

Table of Contents 📚

- Installation
- Usage
- Development
- Storybook
- Rollup
- Testing
- Running Tests
- Chromatic Testing and Publishing
- Automated Testing with Chromatic
- Manual Testing with Chromatic
- Contributing
- 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 👨‍🔧

$3

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.

$3

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.

$3

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

`bash
npm run build
`

$3

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 🧪

$3

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
`

$3

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 file for details.