Prizeout UI

A shared component library for Prizeout, designed to provide reusable UI elements across Prizeout projects.

Table of Contents

• Installation
• Usage
• Development
• Contributing
• Pre-commit Hooks
• Release
• Pulling the Package

Installation

To set up the Prizeout UI component library, ensure that you're using the correct version of Node.js. You can easily switch to the required version using nvm. Once you're on the right version, install the necessary dependencies and prepare the project.

Steps:

1. Switch to the required Node.js version:

   nvm use

2. Install the project's dependencies:

   npm install

3. Prepare the project (this configures Git hooks and ensures Husky is set up):

   npm run prepare

Development

To contribute or modify the component library locally:

1. Clone the repository:

   git clone https://github.com/your-username/prizeout-ui.git
   cd prizeout-ui

2. Install the dependencies:

   npm install

3. Start the development environment:

   npm run storybook

This will launch a local development server where you can view and test components.

Running Tests

To run unit tests for the components:

npm test

This ensures the integrity and functionality of the components.

Contributing

Contributions to the Prizeout UI library are by all team members! Please follow these steps to contribute:

1. Fork the repository and create your branch:

   git checkout -b WV2-XXXX-your-feature-name

2. Make your changes and commit with a descriptive message:

   git commit -m "WV2-XXXX: Add new feature XYZ"

3. Push to your branch and create a pull request:

   git push origin WV2-XXXX-your-feature-name

Pre-commit Hooks

Husky is used to ensure code quality and consistency through pre-commit hooks. These hooks run automatically before you commit your code to ensure it meets project standards (e.g., linting, tests, etc.).

To configure Husky properly, make sure to run the following command when setting up the project:

npm run prepare

This will set up the Git hooks for you. If you encounter any issues, verify that Husky is configured correctly by checking the .husky directory.

Release

To release a new version of the Prizeout UI package, follow these steps:

1. Update the Version: Manually update the version field in package.json according to Semantic Versioning:

   • Increment the patch version for bug fixes (e.g., 1.0.0 → 1.0.1).
   • Increment the minor version for new features (e.g., 1.0.0 → 1.1.0).
   • Increment the major version for breaking changes (e.g., 1.0.0 → 2.0.0).

   Commit this change:

   git commit -am "Bump version to <new-version>"

2. Tag the Branch: Tag the branch to trigger the publishing workflow:

   git tag release-package-v<new-version>
   git push origin release-package-v<new-version>

3. Verify the Release: CircleCI will automatically run the run-tests-and-publish workflow on the tagged branch. Confirm the release on npm.

4. Post-Release: Notify the team about the new version and update the relevant documentation or changelogs if necessary.

Pulling the Package

To pull and use the Prizeout UI package from the private npm registry, ensure your npm environment is configured correctly.

Steps:

1. Authenticate with the Private Registry: Ensure you have the npm token with access to the private registry. Add the following to your .npmrc file:

   @prizeout:registry=https://registry.npmjs.org/
   //registry.npmjs.org/:_authToken=<your-npm-token>

   Replace <your-npm-token> with your actual npm token. If you're in a CI/CD environment, set this token as an environment variable NPM_TOKEN and dynamically generate the .npmrc file.

2. Install the Package: Run the following command in your project:

   npm install @prizeout/prizeout-ui

3. Verify Installation: Ensure the package is listed in your node_modules directory and is properly imported in your code:

   import { Button } from '@prizeout/prizeout-ui';
   
   const App = () => <Button label="Click Me" />;

   You're now ready to use the package!

Usage

To use components from the Prizeout UI library in your project, after you have followed the steps to install it as a dependency in your project, import and use the component:

import { Button, Modal } from 'prizeout-ui';

const MyComponent = () => (
  <div>
    <Button label="Click me" />
    <Modal isOpen={true} title="Welcome" />
  </div>
);