A collection of reusable and customizable React components for creating modern web applications and pages related to Workfinder. This library is built with Rollup, TypeScript, Sass, and Storybook, providing developers with a solid foundation to easily cre
npm install workfinder-components

Components library for Workfinder-related pages.
- Installation
- Usage
- Development
- Storybook
- Rollup
- Testing
- Running Tests
- Chromatic Testing and Publishing
- Automated Testing with Chromatic
- Manual Testing with Chromatic
- Contributing
- License
To install the workfinder-components library, you can use npm or yarn:
``bash`
npm install workfinder-components
or
`bash`
yarn add workfinder-components
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
``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.
This project is licensed under the MIT License - see the LICENSE file for details.