penteonui v1.3.12

PenteonUI

PenteonUI is a React component library designed to provide reusable, customizable UI components for building modern web applications. It includes a variety of components, from basic elements like buttons and inputs to more complex widgets like calendars and charts.

Table of Contents

• Installation
• Getting Started
• Available Components
• Customization
• Storybook
• Contributing
• License

Installation

To install PenteonUI, add it to your project via npm or yarn:

npm install penteonui

Getting Started

Once you've installed the library, you can start using the components in your project. Here's an example of how to use a button component:

import React from "react";
import { Button } from "penteonui";

const App: React.FC = () => (
  <div>
    <Button color="primary" onClick={() => alert("Button clicked!")}>
      Click Me
    </Button>
  </div>
);

export default App;

Our Components

PenteonUI includes a variety of components. Below are some of the key components:

• Button: A versatile button component with different color and size options.
• TextInput: A text input field with customizable validation and styling.
• ToggleGroup: A toggle switch group to select between different options.
• Tooltip: A tooltip component for displaying additional information on hover.
• TimePicker: A time picker component for selecting times.
• CalendarWidget: A calendar widget for selecting dates.
• PieChart: A chart component for visualizing data in a pie format.

For a full list of components and detailed usage instructions, please refer to the Storybook documentation.

Customization

PenteonUI is built with Tailwind CSS, making it highly customizable. You can override styles using your own Tailwind configuration or extend the existing components to suit your needs.

Example: Customizing the Button Component

You can easily apply custom styles to any component by passing additional classes:

<Button className="bg-red-500 text-white">Custom Button</Button>

Storybook

PenteonUI comes with a Storybook that provides interactive documentation and examples for each component. You can view the live Storybook here or run it locally.

Running Storybook Locally

To run Storybook locally, follow these steps:

1. Install dependencies:

   npm install

2. Start the Storybook server:

   npm run storybook

3. Open your browser and navigate to http://localhost:6006 to view the Storybook.

Building Storybook for Deployment

To build Storybook for deployment:

npm run build-storybook

This command will generate a storybook-static folder containing the static assets for Storybook.

Contributing

We welcome contributions to PenteonUI! If you'd like to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bugfix.
3. Commit your changes and push your branch to your fork.
4. Create a pull request describing your changes.

Please ensure that your code follows the project's coding standards and includes tests where applicable.

Commit Guidelines

After every commit message and before making a push to a branch, the command npm version [versioning] must be executed to update the version of the project. The version must be updated according to the following rules:

Versioning

• Major: When making incompatible API changes.
• Minor: When adding functionality in a backwards-compatible manner.
• Patch: When making backwards-compatible bug fixes.

Example: npm version patch

Commit Standards

Commit messages should follow the following format:

# Format:
[commitType]: [commitMessage]

# Example 1:
feat: Created new user module

# Example 2:
feat & fix: Created new user module and fixed user service

Commit Types

• feat: Used when adding a new feature
• fix: Used when fixing a bug
• refactor: Used when reorganizing or restructuring code
• docs: Used when making changes to related documentation or comments
• style: Used for changes in code formatting, whitespace, punctuation, etc.
• test: Used when adding or updating test code or test scenarios.
• chore: Used for changes in build process, CI/CD, auxiliary tools, config files or project organization.

License

PenteonUI is licensed under the MIT License.