algaecal-ui-kit v1.0.20

AlgaeCal UI Kit

Welcome to the AlgaeCal UI Kit project! This UI library is built to provide reusable and standardized components for AlgaeCal's frontend applications. Below you'll find instructions on how to get started, build, test, and contribute to this project.

Table of Contents

• Installation
• Usage
• Scripts
• Development Workflow
• Testing
• Storybook
• Linting
• Publishing
• Dependencies
• License
• Contribution

Installation

To install the AlgaeCal UI Kit in your project, you can run:

npm install algaecal-ui-kit

Make sure to add react and react-dom as peer dependencies in your project.

Usage

After installing, you can import and use the components in your React application:

import { AlgaeButton } from "algaecal-ui-kit";

function App() {
  return (
    <AlgaeButton onClick={() => alert("Button clicked!")}>
      Click Me!
    </AlgaeButton>
  );
}

Scripts

The project contains several useful scripts for building, testing, and maintaining the UI Kit. Here is a summary of each script:

• npm run test

  Runs all the unit tests using Jest.

• npm run lint:scss

  Lints all SCSS files using Stylelint. This helps in maintaining consistent styling and following best practices.

• npm run storybook

  Starts Storybook locally at http://localhost:6006, allowing you to view and interact with the UI components in isolation.

• npm run build-storybook

  Generates a static version of Storybook which can be hosted as documentation.

• npm run publish

  Builds the project with Webpack, increments the patch version, and publishes the updated package to the npm registry.

• npm run chromatic

  Deploys the Storybook project to Chromatic, providing an easy way to share your UI components and visually test changes. Make sure your Chromatic project token (chpt_de03ea995711aa5) is configured.

Development Workflow

Local Development

To get started with local development:

1. Clone the repository.
2. Run npm install to install dependencies.
3. Run npm run storybook to see all components in action and start building.

Building the Project

Use the following command to build the project:

npm run build

The built version of the project will be located in the dist folder.

Testing

We use Jest and React Testing Library for testing the components:

• Unit Tests: Run npm run test to execute the unit tests.
• Jest DOM Integration: Helps verify that components render properly in the DOM.

Make sure to add and update tests whenever you modify existing components or add new ones.

Storybook

Storybook is used to document the UI components:

• Developing with Storybook: Run npm run storybook to start a development server for viewing components in isolation.
• Publishing to Chromatic: Storybook can be published using npm run chromatic. This helps in automating visual regression testing and sharing the components with stakeholders.

Linting

SCSS Linting

We use Stylelint to ensure SCSS files adhere to best practices. To run the linter, use:

npm run lint:scss

This command lints all SCSS files under src to check for any inconsistencies.

Publishing

To publish a new version of the package to npm:

1. Run npm run publish.

This will build the UI kit, increment the patch version number, and publish it to the npm registry.

Make sure that you have appropriate permissions to publish to npm.

Dependencies

Dev Dependencies

• Storybook: Used for developing and showcasing UI components (@storybook/react, @storybook/addon-essentials).
• Jest: Used for testing (jest, @testing-library/react, @types/jest).
• Webpack: Used for building the project (webpack, webpack-cli, ts-loader).
• Stylelint: Used for SCSS linting.

Peer Dependencies

The package expects react and react-dom to be installed in the consuming project. This helps prevent version conflicts with different React versions.

"peerDependencies": {
  "react": "*",
  "react-dom": "*"
}

Make sure to install these dependencies in the project where you're using algaecal-ui-kit.

License

This project is licensed under ISC.

Contribution

We welcome contributions from the community. If you have suggestions, bug fixes, or new features, feel free to create a pull request. Before contributing, please make sure your code is tested and adheres to the project's code style guidelines.