Design System

A reusable design system based on TailwindCSS and React, designed to provide a consistent UI for applications. This package includes a variety of components such as buttons, checkboxes, tags, and more, which can be easily integrated and customized within your project.

Installation

Install the package via npm:

npm install @oneslash/designsystem

or using yarn:

yarn add @oneslash/designsystem

Usage

To use the components in your project, simply import them. Here’s an example of how to use the Button component:

import { Button } from '@oneslash/designsystem';

const App = () => (
  <Button
    label="Click Me"
    type="primary"
    size="medium"
    onClickButton={() => alert('Button Clicked!')}
  />
);

export default App;

Components

• Button: A button component with customizable types, sizes, icons, and actions.
• Checkbox: A custom checkbox component for selecting options.
• Tag: A component to display tags or labels.
• IconButton: A button component with only an icon.
• Popover: A component for rendering popover menus.

Props for Button

| Prop | Type | Description | |------------------|----------|----------------------------------------------------------| | label | string | Text displayed on the button. | | type | string | Button type: primary, secondary, tertiary, textOnly. | | size | string | Button size: small, medium, large. | | onClickButton | function | Function to call on button click. | | decoIcon | string | Name of the icon on the left side of the button. | | actionIcon | string | Name of the icon on the right side of the button. |

Customization

The design system uses TailwindCSS for styling, making it easy to customize components through Tailwind utility classes.

Example: Customizing a Button

<Button
  label="Save"
  type="primary"
  size="large"
  onClickButton={() => console.log('Save clicked')}
  className="bg-blue-500 text-white hover:bg-blue-600"
/>

Build and Development

To build the design system locally:

1. Clone the repository.
2. Run the following commands:

npm install
npm run build

Contributing

Feel free to contribute to this project by creating issues or submitting pull requests. When contributing, please ensure the code follows the structure and coding standards defined in the project.

License

This project is licensed under the MIT License.

Contact

For any questions or feedback, reach out to the maintainer at [email protected].

### Explanation:
- **Installation**: Instructions to install the package via npm or yarn.
- **Usage**: Example code showing how to import and use the components.
- **Components**: Lists the components included in the design system with a focus on the `Button` component.
- **Customization**: Shows how to customize components using TailwindCSS.
- **Build and Development**: Steps to build the project locally.
- **License**: Indicates the project license (e.g., MIT). You’ll need to create a `LICENSE` file for it to link properly.

This file serves as documentation and is automatically displayed on the npm package page when your package is published. It also helps users understand how to install, use, and contribute to your design system.