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:

npm install workfinder-components

or

yarn add workfinder-components

Usage 🚀

Once installed, you can import and use the components in your React project:

import { ComponentName } from 'workfinder-components';

Development 👨‍🔧

Storybook 📖

To start the development environment and Storybook, use the following command:

npm run storybook

or

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:

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:

@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:

npm test

or

yarn test

To run tests in watch mode, use:

npm run test:watch

or

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:

npm run chromatic

or

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.