Sanlo UI Components Library Documentation

Introduction

This documentation provides a guide on how to use and release the Sanlo UI Components Library. The library is built with React, Chakra UI, and TypeScript, running on ViteJS and is available on NPM for easy installation and usage in your projects.

Installation

To install the library in your project, use the following command:

npm install @sanlo/ui-components

Usage

Importing Components

To use a component from the library, import it into your React component file:

import { Button, Card, Modal } from '@sanlo/ui-components';

Example Usage

Once imported, you can use the components in your JSX code:

import React from 'react';
import { Button, Card } from 'your-ui-library';

const MyComponent = () => {
  return (
    <Card>
      <Button variant="primary">Click Me</Button>
    </Card>
  );
};

export default MyComponent;

Theme Customization

The UI components library is built on Chakra UI, which allows for easy theming and customization. You can customize the library's theme by following the Chakra UI theming guide: Chakra UI Theming.

Development

Setting up the Development Environment

To contribute or test the library locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/sanlo-io/ui-components.git

2. Install dependencies:

   cd ui-components
   npm install

Running the Local Development Server

To start the development server and preview the library:

npm run storybook

This will open Storybook which showcases the library components.

Creating a Release Version

Updating the Changelog

Before creating a release version, update the changelog with the changes made in the library. The changelog is located in the CHANGELOG.md file.

Version Bumping

To create a release version, follow these steps:

1. Update the version number in the package.json file. The convention for release tags is to use the format vX.X.X, where X.X.X represents the version number. For example:

   "version": "1.0.0"

2. Publish to NPM and Github (only tags):

   npm run pub

   This script will create the dist-tag and the github tag.

3. Push changes to GitHub

   git push

Creating a Beta Version

To create a beta version of the library, follow the same steps as creating a release version, but append a beta tag to the version number. The convention for beta releases is to use the format vX.X.X-beta.X, where X.X.X represents the base version number, and beta.X represents the beta release number. For example:

"version": "1.1.0-beta.1"

To create subsequent beta versions, increment the beta release number. For example:

"version": "1.1.0-beta.2"

When publishing a beta version to NPM, use the --tag flag (this is done automatically by the script if the version on the package.json has the beta word):

npm run pub

This will publish the package with the specified beta tag.

Publishing to NPM

To publish a new release version or beta version to NPM:

1. Publish the library to NPM:

   npm run pub
   
   

Please note that you'll need appropriate credentials and permissions to publish to NPM. Ensure that you have a valid NPM account and are logged in to the correct account before running the publish command.

Conclusion

Congratulations! You now know how to use, develop, and release the Sanlo UI Components Library. For more detailed information or advanced usage, please refer to the library's documentation or reach out to the project maintainers. Happy coding!