open-index/open-npm huggingface dataset:
npm package: @joao_victor08/tehkly-ui-components
Description: A collection of beautiful and modern React UI components with TailwindCSS
Author: joao_victor08
Latest version: 1.0.3

# Tehkly UI Components

A collection of beautiful and modern React UI components built with TypeScript and styled with TailwindCSS.

## Installation

```bash
npm install @joao_victor08/tehkly-ui-components
```

## Prerequisites

This package requires:
- React 18+
- TailwindCSS configured in your project

## Components

- **Badge** - Display status badges
- **Button** - Customizable buttons with variants
- **Card** - Container component for content
- **Dropdown** - Dropdown menu with context API
- **Input** - Text input with icon support
- **Modal** - Modal dialog component
- **Navbar** - Navigation bar component
- **SkeletonLoader** - Loading skeleton component
- **Switch** - Toggle switch component
- **Toaster** - Toast notification component
- **Tooltip** - Tooltip component

## Usage

```tsx
import { Button, Input, Modal } from '@joao_victor08/tehkly-ui-components';
import { Search } from 'lucide-react';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Input icon={Search} placeholder="Search..." />
    </div>
  );
}
```

### Dropdown Example

```tsx
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '@joao_victor08/tehkly-ui-components';

function MyDropdown() {
  return (
    <Dropdown>
      <DropdownTrigger>
        <button>Open Menu</button>
      </DropdownTrigger>
      <DropdownContent>
        <DropdownItem onClick={() => console.log('Item 1')}>
          Item 1
        </DropdownItem>
        <DropdownItem onClick={() => console.log('Item 2')}>
          Item 2
        </DropdownItem>
      </DropdownContent>
    </Dropdown>
  );
}
```

## TailwindCSS Configuration

Make sure your `tailwind.config.js` includes the following colors in your theme:

```js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'your-primary-color',
        secondary: 'your-secondary-color',
        background: 'your-background-color',
        foreground: 'your-foreground-color',
        card: 'your-card-color',
        border: 'your-border-color',
        ring: 'your-ring-color',
      },
    },
  },
}
```

## License

MIT
npm package: @joaoalbertocsjunior/react-s
Description: https://github.com/joaoalbertocsjunior/react-s
Author: joaoalbertocsjunior
Latest version: 1.2.2

# react-s

**react-s stands for _structure_, _short_ & _simple_.**

- Write ReactJS apps in a user-friendly and predictable way using JSON syntax instead of directly using DOM elements to reduce verbosity within code.
- Parse between DOM, JSON and JSON-DOM structures.
- Use tools to create and manipulate JSON-DOM. (next release)

**(_Under Construction_)**
**View _[Documentation](#documentation)_ section and _[examples](./examples)_ folder for better guidance, you can also use the _Code Playground_ for quick test.**

## This do not include

- Replacement for css;

## Table of Contents

- [Installation](#installation)
- [Features](#features)
- [Documentation](#documentation)
- [Future Updates](#future-updates)
- [About the coffee](#about-the-coffee)
- [Third-Party Libraries](#third-party-libraries)
- [License](#license)
- [Mainteners](#mainteners)
- [Contributors](#contributors)

## Installation

- You can use npx to download the available template and start coding:

	```bash
	npx react-s-starter 

- You can also install it to an existing project by:

	```bash
	npm i @joaoalbertocsjunior/react-s
	
	import { Element, Render } from "@joaoalbertocsjunior/react-s";

- Alternatively you can:

	1. **Clone the repository**

	   Start by cloning the repository to your local machine. 

	   ```bash
	   git clone https://github.com/joaoalbertocsjunior/react-s.git
	   cd react-s  
	   
	2. **Install dependencies**

		```bash
		npm install
		
	2. **Run development server**	
		
		```bash
		npm run start
 
## Documentation

- Under Construction

## Future Updates

- _Better_ overall support for state and state management libraries;
- _Better_ support for react-router;
- _Enhanced_ code flow;
- Minified and CDN version;

## About the coffee

**_instead_, feel free to contribute to the project!**
 
## Third-Party Libraries

The is a React.js project bootstrapped using `npx create-react-app` and includes various third-party dependencies. The project is licensed under the MIT License.

The project uses third-party libraries that are licensed under the MIT License. See the [LICENSE](./LICENSE.txt) file for full licensing information.

## License

The project is licensed under the MIT License - see the [LICENSE](./LICENSE.txt) file for details.

## Mainteners

The project is currently maintened by joaoalbertocsjunior with help from sources across the web.

## Contributors

- Get listed here, focus is to improve the code on daily basis, feel free to contribute with _ideas_ and _code_!

Happy hacking!
npm package: @joaoalbertosv/eslint-config
Description: ESLint configuration used by me.
Latest version: 2.1.0

# ESLint Config 

## Oque está incluso?

- Airbnb config base;
- React plugin;
- React Hooks plugin;
- JSX a11y plugin;
- Prettier;

## Instalação

Basta instalar através do npm (ou gerenciador favorito):

```shell
npm i -D @joaoalbertosv/eslint-config 
```

## Uso

Basta adicionar no seu `.eslintrc.json`:

```javascript
{
  "extends": "@joaoalbertosv/eslint-config/react"
  // "extends": "@joaoalbertosv/eslint-config/node"
}
```
> Você também pode usar um .eslintrc.js em vez de JSON, se preferir.

## Possíveis problemas

Eventualmente pode ser necessário que você instale manualmente as `peerDependencies`.
Se esse for o caso, basta rodar o comando:

```shell
npx install-peerdeps --dev @joaoalbertosv/eslint-config
```

Isso deverá resolver o problema. Qualquer coisa, abra uma issue que ficaremos felizes em resolver :