Component Library - Iboon

component-library-iboon is a customizable React component library built using Chakra UI. It provides pre-styled components with theming support and allows users to extend styles easily.

Installation

You can install the package using npm or yarn:

npm install component-library-iboon
# or
yarn add component-library-iboon

Usage

Wrap Your Application

To use the components, wrap your App.tsx (or App.jsx) with ComponentLibraryProvider.

import React from "react";
import { ComponentLibraryProvider } from "component-library-iboon";

const customStyles = {
  button1: { bg: "purple.500", color: "white", fontSize: "lg" },
};

const App = () => {
  return (
    <ComponentLibraryProvider customStyles={customStyles}>
      {/* Your app components */}
    </ComponentLibraryProvider>
  );
};

export default App;

Using Components

Custom Button

import { CustomButton } from "component-library-iboon";

const MyComponent = () => {
  return <CustomButton designType={1}>Click Me</CustomButton>;
};

Theming & Customization

Users can extend styles by passing a customStyles object to ComponentLibraryProvider. The styles are merged with the default theme.

const customStyles = {
  button1: { bg: "blue.600", color: "white" },
};

Available Hooks

• useTheme(): Access theme-related properties and methods.
• useLoader(): Manage global loading state.
• useApiCall(): Manage Api Calls.

Releasing a New Version Manually

Follow these steps to release a new version while manually editing the changelog before committing:

1️⃣ Run the Release Script

Run one of the following based on your update type:

Patch Release (for bug fixes):

npm run release:patch

Minor Release (for new features):

npm run release:minor

Major Release (for breaking changes):

npm run release:major

2️⃣ Manually Edit CHANGELOG.md

Open CHANGELOG.md and add specific details under the new version:

## [1.0.1] - 2025-03-27

### Added

- New `CustomButton` component with `designType` support

### Fixed

- Resolved bug where dark mode wasn't applying correctly in `ThemeProvider`

3️⃣ Commit the Changes

After editing, commit everything manually:

git add .
git commit -m "chore(release): vX.X.X with changelog updates"

Replace X.X.X with the correct version number.

4️⃣ Push the Changes and Tags

Now, push your changes along with the version tag:

git push --follow-tags origin main

Issues & Support

If you encounter any issues, please open an issue on the GitHub repository.

License

MIT License