open-index/open-npm huggingface dataset:
npm package: @relatecom/relateui
Description: A free and open-source UI Kit for React, built with Tailwind CSS and Storybook, designed specifically for Relate products.
Author: relatecom
Latest version: 0.0.8

# RelateUI

A free and open-source UI Kit for React, built with Tailwind CSS and Storybook, designed specifically for Relate products.

## Table of Contents

- [Overview](#overview)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Components](#components)
- [Customization](#customization)
- [Contributing](#contributing)
- [License](#license)

## Overview

RelateUI is a comprehensive UI Kit designed to provide a consistent and visually appealing user experience across all Relate products. Built with Tailwind CSS for rapid development and Storybook for easy component exploration, RelateUI offers a wide range of styled brand components to help you get started with your project quickly.

## Features

- **Tailwind CSS integration**: Leverage the power of Tailwind CSS for rapid development and customization.
- **Storybook support**: Easily explore and interact with components using Storybook.
- **Styled brand components**: Get started with a set of pre-designed, styled components tailored to the Relate brand.
- **Highly customizable**: Tailor the UI Kit to your needs using Tailwind CSS's configuration options.
- **Open-source**: Contribute to the project and help shape the future of RelateUI.

## Installation

To install RelateUI, run the following command:

```bash
npm install @relatecom/relateui
```

Or, if you're using yarn:

```bash
yarn add @relatecom/relateui
```

## Usage

Import RelateUI in your React project and start using its components:

```jsx
import React from 'react';
import "@relatecom/relateui/style.css"
import { Button } from '@relatecom/relateui';

function App() {
  return (
    <div>
      <Button>Click me!</Button>
    </div>
  );
}
```

## Components

RelateUI offers a wide range of components, including:

- **Buttons**: Primary, secondary, and tertiary buttons with various styles.
- **Inputs**: Text inputs, password inputs, and number inputs with custom styles.
- **Cards**: Cards with different layouts and styles.
- **Alerts**: Success, warning, and error alerts.
- **Modals**: Modal windows with various styles and layouts.

## Customization

RelateUI is highly customizable using Tailwind CSS's configuration options. You can adjust the colors, typography, spacing, and more to fit your project's needs.

## Contributing

We welcome contributions to RelateUI! If you'd like to contribute, please fork the repository and submit a pull request.

## License

RelateUI is released under the MIT License. See the [LICENSE file](LICENSE) for details.

## Roadmap

- [ ] Add more components to the UI Kit.
- [ ] Improve documentation and examples.
- [ ] Enhance customization options using Tailwind CSS.

## Community

Join our community to discuss RelateUI, share your experiences, and get help from other users:

- [GitHub Discussions](https://github.com/relateui/relateui/discussions)

We're excited to have you on board!
npm package: @relatecom/utils
Description: utility functions for use with frontend services and components
Author: freeeakn machinee
Latest version: 0.0.3

# @relatecom/utils

## Overview

This library provides a simple and efficient way to build URLs with query parameters. It allows you to construct URLs by specifying a root path, a path, and optional query parameters.

## Installation

To install the library, run the following command:

```bash
npm install @relatecom/utils
```

or

```bash
yarn add @relatecom/utils
```

## Usage

Here's an example of how to use the library:

```javascript
import { UrlBuilder } from '@relatecom/utils';

const ROOT_PATH = 'https://example.com/api/users';

const { buildUrl } = new UrlBuilder(ROOT_PATH);

const url = buildUrl('/list', {
  limit: 10,
  offset: 20,
});

console.log(url); // Output: https://example.com/api/users/list?limit=10&offset=20
```

## API

### `UrlBuilder` Class

#### Constructor

- `rootPath`: The root path of the URL.

```javascript
const urlBuilder = new UrlBuilder('https://example.com/api');
```

#### Methods

- `buildUrl(path: string, queryParams?: object)`: Builds a URL from a path and query parameters. + `path`: The path of the URL. + `queryParams`: An object containing query parameters. + Returns: The built URL.

```javascript
const url = urlBuilder.buildUrl('users', {
  limit: 10,
  offset: 20,
});
```

## Query Parameters

Query parameters can be passed as an object to the `buildUrl` method. The object can contain string, number, or boolean values.

```javascript
const url = urlBuilder.buildUrl('users', {
  limit: 10,
  offset: 20,
  isAdmin: true,
});
```

## Error Handling

If the path is empty, the `buildUrl` method will throw an error.

```javascript
try {
  const url = urlBuilder.buildUrl('');
} catch (error) {
  console.error(error); // Output: Path cannot be empty
}
```

## Contributing

Contributions are welcome! If you have any suggestions or bug reports, please open an issue or submit a pull request.

## License

This library is licensed under the MIT License.