open-index/open-npm huggingface dataset:
npm package: @juanaraneta/prettier-config
Description: Prettier Config
Latest version: 1.1.0

# prettier-config

Prettier config .json file where to centralized the standard.

### 1. This is only a prettier config file, so you will need to install the npm package for this to work.

```
npm i -D prettier
```

### 2. Add @juanaraneta/prettier-config to your project

```
{
  "name": "my-cool-library",
  // ...
  "prettier": "@juanaraneta/prettier-config"
  // ...
}
```

### 3. You should delete all other Prettier configurations to avoid that your shared configuration file is overridden.

### 4. Be happy
npm package: @juanbeato/jb-button
Description: Webcomponent jb-button following open-wc recommendations
Author: jb-button
Latest version: 1.1.2-alpha.0

# \<jb-button>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i jb-button
```

## Usage
```html
<script type="module">
  import 'jb-button/jb-button.js';
</script>

<jb-button></jb-button>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @juanbeato/jb-chip
Description: Webcomponent jb-chip following open-wc recommendations
Author: Juan Antonio Beato
Latest version: 1.0.1-alpha.0

# \<jb-chip>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i jb-chip
```

## Usage
```html
<script type="module">
  import 'jb-chip/jb-chip.js';
</script>

<jb-chip></jb-chip>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @juanbeato/jb-countdown
Description: Webcomponent jb-countdown following open-wc recommendations
Author: Juan Antonio Beato
Latest version: 1.0.6-alpha.0

# \<jb-countdown>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i jb-countdown
```

## Usage
```html
<script type="module">
  import 'jb-countdown/jb-countdown.js';
</script>

<jb-countdown></jb-countdown>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @juanbeato/jb-date
Description: Webcomponent jb-date following open-wc recommendations
Author: Juan Antonio Beato
Latest version: 1.0.1-alpha.0

# \<jb-date>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i jb-date
```

## Usage
```html
<script type="module">
  import 'jb-date/jb-date.js';
</script>

<jb-date></jb-date>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @juanbeato/jb-dropdown
Description: Webcomponent jb-dropdown following open-wc recommendations
Author: Juan Antonio Beato
Latest version: 1.0.6-alpha.0

# \<jb-dropdown>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i jb-dropdown
```

## Usage
```html
<script type="module">
  import 'jb-dropdown/jb-dropdown.js';
</script>

<jb-dropdown></jb-dropdown>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @juanbeato/jb-header
Description: Webcomponent jb-header following open-wc recommendations
Author: jb-header
Latest version: 0.4.1-alpha.0

# \<jb-header>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i jb-header
```

## Usage
```html
<script type="module">
  import 'jb-header/jb-header.js';
</script>

<jb-header></jb-header>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @juanbeato/jb-input
Description: Webcomponent jb-input following open-wc recommendations
Author: Juan Antonio Beato
Latest version: 2.1.0-alpha.0

# \<jb-input>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i jb-input
```

## Usage
```html
<script type="module">
  import 'jb-input/jb-input.js';
</script>

<jb-input></jb-input>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @juanbeato/jb-layout
Description: Webcomponent jb-layout following open-wc recommendations
Author: jb-layout
Latest version: 0.2.1-alpha.0

# \<jb-layout>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i jb-layout
```

## Usage
```html
<script type="module">
  import 'jb-layout/jb-layout.js';
</script>

<jb-layout></jb-layout>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @juanbeato/jb-menu
Description: Webcomponent jb-menu following open-wc recommendations
Author: jb-menu
Latest version: 0.3.2-alpha.0

# \<jb-menu>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i jb-menu
```

## Usage
```html
<script type="module">
  import 'jb-menu/jb-menu.js';
</script>

<jb-menu></jb-menu>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @juanbeato/jb-modal
Description: Webcomponent jb-modal following open-wc recommendations
Author: Juan Antonio Beato
Latest version: 1.1.1-alpha.0

# \<jb-modal>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i jb-modal
```

## Usage
```html
<script type="module">
  import 'jb-modal/jb-modal.js';
</script>

<jb-modal></jb-modal>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @juanbeato/jb-product-card
Description: Webcomponent jb-product-card following open-wc recommendations
Author: Juan Antonio Beato
Latest version: 2.4.12-alpha.0

# \<jb-product-card>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i jb-product-card
```

## Usage
```html
<script type="module">
  import 'jb-product-card/jb-product-card.js';
</script>

<jb-product-card></jb-product-card>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @juanbeato/jb-product-card-list
Description: Webcomponent jb-product-card-list following open-wc recommendations
Author: Juan Antonio Beato
Latest version: 1.2.12-alpha.0

# \<jb-product-card-list>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i jb-product-card-list
```

## Usage
```html
<script type="module">
  import 'jb-product-card-list/jb-product-card-list.js';
</script>

<jb-product-card-list></jb-product-card-list>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @juanbeato/jb-rating
Description: Webcomponent jb-rating following open-wc recommendations
Author: Juan Antonio Beato
Latest version: 1.0.1-alpha.0

# \<jb-rating>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i jb-rating
```

## Usage
```html
<script type="module">
  import 'jb-rating/jb-rating.js';
</script>

<jb-rating></jb-rating>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @juanbrujo/random-cli
Description: node.js Command Line Interface to select randomly from given list, range or character map
Author: Jorge Epuñan | @csslab
Latest version: 0.0.5

# random CLI

*node.js Command Line Interface to select randomly from given list or range*

[![npm version](https://badge.fury.io/js/%40juanbrujo%2Frandom-cli.svg)](https://badge.fury.io/js/%40juanbrujo%2Frandom-cli)

## Commands:

```
-r, --range <int>..<int>            // outputs random integer between 2 integers
-l, --list <elem1>,<elem2>,<elemN>	// outputs random from list of elements
-p, --password <length (int)>       // outputs a random string from a map of characters
-q, --quantity <quantity (int)>		// [option] items to output
```

## Use:

```
$ node bin/random-cli.js -r 12..20 -q 3     // ✔ Random from range: 15,17,20
$ node bin/random-cli.js -l uno,dos,tres    // ✔ Random from list: "tres"
$ node bin/random-cli.js -p 8               // ✔ Random password: "bM8bkJjk"
```

## Installation:

### Globally 👍 (recommended)

```
$ sudo npm install @juanbrujo/random-cli -g
$ random <option>
```


### Locally: 

Clone this repo and use it through node:

```
$ git clone https://github.com/juanbrujo/random-cli
$ cd random-cli
$ npm install
$ node bin/random-cli.js <option>
```


### TO-DO:
- 
global npm installation

- 
multiple results (more than one)
 (thanks [@rotvulpix](https://github.com/rotvulpix) ⭐️)
- 
check for different results for more than 1 output
 (thanks [@lgaticaq](https://github.com/lgaticaq) 🍺)
npm package: @juanca/react-tree-grid
Description: Disclaimer: this is in an alpha stage.
Author: Juan Carlos Medina
Latest version: 0.0.1

# React TreeGrid

Disclaimer: this is in an alpha stage.

## Getting started

```
npm install
npm start
```

Visit the webpage hosted by `webpack-serve`.
The URL should have been copied to the clipboard.
Otherwise, please inspect the console output.

## Thoughts

- Phase 1: Grid has many cells
- Phase 2: A list of grids is a "table"
- Phase 3: A tree has a grid and a list of trees

## Undecided technical questions:

- Should `renderNode` be a function (i.e. render prop) or a React Pure Function (i.e. an element)?
  - What are the pros and cons of each?
- Will the grid -> tree terminology stand the test of time?
npm package: @juancarllos-ui/react
Description: <Meta title="Home" />
Latest version: 3.0.0

<Meta title="Home" />

# Criado por Juan Carlos

[Open Github Project](https://github.com/JuanCarllos13/Design-System)
[Open Link Project](https://juancarllos13.github.io/Design-System/)

## Getting Started

<br />

#### Basic Template

Você pode criar um novo aplicativo React usando [create-react-app](https://facebook.github.io/create-react-app/) .

```sh
npx create-react-app my-app
```

### Adicionar `@juancarllos-ui/react` a um aplicativo existente

Primeiro de tudo, você precisa adicionar a dependência `@juancarllos-ui/react` ao seu projeto.

```sh
npm install @juancarllos-ui/react
```

Para usar `@juancarllos-ui/react`, você deve agrupar o componente raiz do seu aplicativo no ThemeProvider.
Você provavelmente encontrará esse componente em `src/index.js`:

```jsx
import { ThemeProvider } from '@juancarllos-ui/react';
...
const root = createRoot(document.getElementById("root"));
root.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>
);
```

Caso você esteja usando um projeto Next.js, você seguir o seguinte passo: Dentro do arquivo `_document.tsx`

```jsx
import { getCssText } from "@juancarllos-ui/react";
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <style
          id="stitches"
          dangerouslySetInnerHTML={{ __html: getCssText() }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
```

Então você está pronto para usar `@juancarllos-ui/react` e pode importar o(s) componente(s) desejado(s) em seu aplicativo:<br />
Por exemplo, para usar o componente `Button`, você precisa importá-lo:

```jsx
import { Button } from "@juancarllos-ui/react";
```

Em seguida, você pode usar o botão em seu aplicativo:

```jsx
<Button onClick={() => alert("Hello World!")}>Hello world!</Button>
```

### Support

Estou buscondo melhorar minha biblioteca, adicionando novos recursos e funcionalidades para garantir que ela esteja sempre atualizada com as últimas tendências e tecnologias. Além disso, aprecio muito sugestões e ideias dos usuários, pois isso me ajuda a tornar minha biblioteca ainda melhor.

Caso tenha alguma ideia ou sugestão para melhorar a biblioteca, por favor, entre em contato comigo através das minhas redes sociais:

LinkedIn: https://www.linkedin.com/in/juancarlos13/

Instagram: https://www.instagram.com/juan.carllos_/


GitHub: https://github.com/JuanCarllos13

Agradeço por utilizar minha biblioteca e espero que ela ajude.
npm package: @juancarllos-ui/react-native
Description: Componentes Mobile
Author: Juan Carlos
Latest version: 1.4.4

<Meta title="Home" />

# Design System React Native

**Criado por Juan Carlos**

[Visite o projeto no GitHub](https://github.com/JuanCarllos13/Design-system-react-native)

[Veja o projeto em execução](https://juancarllos13.github.io/Design-system-react-native/)

## Descrição

Este projeto é uma biblioteca de componentes React Native, desenvolvida para acelerar o processo de criação de interfaces com um design consistente e reutilizável. A biblioteca oferece uma coleção de componentes prontos para uso que seguem as melhores práticas de desenvolvimento, garantindo acessibilidade e alta performance.

## Instalação

### Adicionar ao seu projeto React Native

Para começar a usar a biblioteca `@juancarllos-ui/react-native`, basta adicionar a dependência ao seu projeto.

Com o **npm**:

```bash
npm install @juancarllos-ui/react-native
```

Ou com o **yarn**:

```bash
yarn add @juancarllos-ui/react-native
```

## Uso

Após a instalação, você pode começar a utilizar os componentes da biblioteca diretamente no seu projeto. Abaixo está um exemplo básico de como usar um dos componentes fornecidos.

```tsx
import { AnimatedButton } from '@juancarllos-ui/react-native';

const App = () => {
  return (
    <AnimatedButton title="Clique Aqui" onPress={() => console.log("Botão pressionado!")} />
  );
};
```

## Contribuições

Estou sempre em busca de melhorias para minha biblioteca, adicionando novos recursos e funcionalidades. Caso tenha sugestões ou ideias para melhorias, ou queira contribuir com o projeto, fique à vontade para abrir um **pull request** ou **issue** no GitHub.

Se você deseja contribuir, siga as etapas abaixo:

1. Faça um fork deste repositório.
2. Crie uma branch para sua funcionalidade (`git checkout -b feature/nova-funcionalidade`).
3. Faça as alterações e commit (`git commit -am 'Adicionando nova funcionalidade'`).
4. Faça o push para a sua branch (`git push origin feature/nova-funcionalidade`).
5. Abra um Pull Request.

## Suporte

Estou sempre aberto a sugestões e comentários! Para qualquer dúvida, feedback ou ajuda, entre em contato comigo:

- **LinkedIn**: [Juan Carlos](https://www.linkedin.com/in/juancarlos13/)
- **Instagram**: [@juan.carllos_](https://www.instagram.com/juan.carllos_/)
- **GitHub**: [JuanCarlos13](https://github.com/JuanCarllos13)

Agradeço por utilizar minha biblioteca e espero que ela seja útil no seu projeto! :)

## Licença

Este projeto está licenciado sob a **MIT License**. Veja o arquivo [LICENSE](LICENSE) para mais informações.
npm package: @juancarllos-ui/tokens
Description: <Meta title="Home" />
Latest version: 3.0.0

<Meta title="Home" />

# Criado por Juan Carlos

[Open Github Project](https://github.com/JuanCarllos13/Design-System)
[Open Link Project](https://juancarllos13.github.io/Design-System/)

## Getting Started

<br />

#### Basic Template

Você pode criar um novo aplicativo React usando [create-react-app](https://facebook.github.io/create-react-app/) .

```sh
npx create-react-app my-app
```

### Adicionar `@juancarllos-ui/react` a um aplicativo existente

Primeiro de tudo, você precisa adicionar a dependência `@juancarllos-ui/react` ao seu projeto.

```sh
npm install @juancarllos-ui/react
```

Para usar `@juancarllos-ui/react`, você deve agrupar o componente raiz do seu aplicativo no ThemeProvider.
Você provavelmente encontrará esse componente em `src/index.js`:

```jsx
import { ThemeProvider } from '@juancarllos-ui/react';
...
const root = createRoot(document.getElementById("root"));
root.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>
);
```

Caso você esteja usando um projeto Next.js, você seguir o seguinte passo: Dentro do arquivo `_document.tsx`

```jsx
import { getCssText } from "@juancarllos-ui/react";
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <style
          id="stitches"
          dangerouslySetInnerHTML={{ __html: getCssText() }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
```

Então você está pronto para usar `@juancarllos-ui/react` e pode importar o(s) componente(s) desejado(s) em seu aplicativo:<br />
Por exemplo, para usar o componente `Button`, você precisa importá-lo:

```jsx
import { Button } from "@juancarllos-ui/react";
```

Em seguida, você pode usar o botão em seu aplicativo:

```jsx
<Button onClick={() => alert("Hello World!")}>Hello world!</Button>
```

### Support

Estou buscondo melhorar minha biblioteca, adicionando novos recursos e funcionalidades para garantir que ela esteja sempre atualizada com as últimas tendências e tecnologias. Além disso, aprecio muito sugestões e ideias dos usuários, pois isso me ajuda a tornar minha biblioteca ainda melhor.

Caso tenha alguma ideia ou sugestão para melhorar a biblioteca, por favor, entre em contato comigo através das minhas redes sociais:

LinkedIn: https://www.linkedin.com/in/juancarlos13/

Instagram: https://www.instagram.com/juan.carllos_/


GitHub: https://github.com/JuanCarllos13

Agradeço por utilizar minha biblioteca e espero que ela ajude.
npm package: @juanchi_xd/components
Description: Kube Design Customized for SmartKube
Latest version: 0.0.3

# Kube Design

Kube Design Customized for SmartKube

[![NPM](https://img.shields.io/npm/v/@kube-design/components.svg)](https://www.npmjs.com/package/@kube-design/components)

## Requirement

- Node.js 12.18+ ([installation with nvm](https://github.com/creationix/nvm#usage))
- Yarn 1.22.4+

## Installation

```shell
yarn add @kube-design/components
```

## Example

```jsx
import React, { Component } from "react";

import { Button } from "@kube-design/components";

class Example extends Component {
  render() {
    return <Button>Button</Button>;
  }
}
```

## Import All Styles

There are two ways to import style files.

### Use css

The css file can be imported directly, so no additional configuration is required in the webpack configuration file.

```jsx
import "@kube-design/components/esm/styles/index.css";
```

### Use scss

If you import the scss file, you may need to compile this part of the scss file in the webpack configuration file.

```jsx
import "@kube-design/components/esm/styles/index.scss";
```

webpack.config.js

```js
// module.rules
[
  ...otherRules,
  {
    test: /\.s[ac]ss$/i,
    include: root("node_modules"),
    use: ["style-loader", "css-loader", "sass-loader"],
  },
];
```

## Modular Import

You can use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to load the component library on demand.

> When loading on demand, styles will also be imported on demand. You don't need to import all styles, only `main.scss`.

Configure the babel as follows:

```js
// babel.config.js

const getBabelPluginImportConfig = require('@kube-design/components/babel.plugin.import')

...

"plugins": [
  ['import', getBabelPluginImportConfig()],
]
```

Import the `main.scss` instead of `index.scss`

```jsx
import "@kube-design/components/esm/styles/main.scss";
```

## Localization

Kube Design use `LocaleProvider` component to support localization.

1. Define locales

```js
// locales.js

const locales = {
  "en-US": {
    HELLO: "Hello!",
  },
  "zh-CN": {
    HELLO: "你好!",
  },
};

export default locales;
```

2. Use the LocaleProvider component to wrap the root node

The `locale` method can be assigned to `window` for easy use.

```jsx
import React from "react";
import ReactDOM from "react-dom";
import { LocaleProvider } from "@kube-design/components";
import locales from "./locales";
import App from "./App";

window.locale = LocaleProvider.locale;

const App = () => (
  <LocaleProvider locales={locales} currentLocale="en">
    <App />
  </LocaleProvider>
);

ReactDOM.render(<App />, document.getElementById("root"));
```

3. In the root node App.jsx and its child nodes, use `locale.get('key')` to get the language text

```jsx
import React from "react";
import { Button } from "@kube-design/components";

export default () => <Button>{locale.get("HELLO")}</Button>;
```

## License

MIT © [kubesphere](https://github.com/kubesphere)
npm package: @juancore/platzom
Description: Traducto de idioma platzom
Author: juancore
Latest version: 0.1.0

# platzom
Plazom es un idioma inventado para el [curso de fundamentos de JS](https://platzi.com/js) de Platzi
## Descripcion del idioma
- Si la palabra termina con "ar", se le quitan esas dos letras
- Si la palabra inicia con Z, se le añade "pe" al final
- Si la palabra traducida tiene 10 o más letras, se debe partir en dos por la mitad y unir con un guión medio
- Por último, si la palabra original es un palíndromo, ninguna regla anterior cuenta y se devuelve la misma palabra pero intercalando letras mayúsculas y minúsculas
## Instalación

```
npm install platzom
```

## Uso

```
import platzom from 'platzom'

platzom("Programar") // Program
platzom("Zorro") // Zorrope
platzom("Zarpar") // Zarppe
platzom("abecedario") // abece-dario
platzom("sometemos") // SoMeTeMoS
```

## Créditos
- [Juancore](https://twitter.com/@corenti)

## Licencia

[MIT](https://opensource.org/licenses/MIT)
npm package: @juancruuzl/nestjs-cqrs-schematics
Description: Custom schematic for CQRS nestjs structure
Author: Juan
Latest version: 1.0.8


# NestJS CQRS Schematics

This package provides custom schematics to quickly generate CQRS components (Commands, Queries, Resources) for NestJS applications. It helps streamline the process of creating modules with the Command Query Responsibility Segregation (CQRS) pattern.

## Installation

To install the package, run the following command:

```bash
    npm install @juancruuzl/nestjs-cqrs-schematics 
```

## Configuration

After installation, you need to add the schematics collection to your `nest-cli.json` file.

Update your `nest-cli.json` as follows:

```json
{
  "$schema": "https://json.schemastore.org/nest-cli",
  "collection": "@juancruuzl/nestjs-cqrs-schema",
  "sourceRoot": "src",
  "compilerOptions": {
    "deleteOutDir": true
  }
}
```

## Available Schematics

### 1. Generate a Query

To create a new query, run:

```bash
nest g qr "nameOfTheQueryToGenerate"
```

- **Example:** `nest g qr GetUserQuery`
- Generates a new query file and its related structure.

### 2. Generate a Command

To create a new command, run:

```bash
nest g cmd "nameOfTheCommandToGenerate"
```

- **Example:** `nest g cmd CreateUserCommand`
- Generates a new command file and its related structure.

### 3. Generate a Resource Module

To create a new resource module, run:

```bash
nest g res "nameOfTheModuleToGenerate"
```

- **Example:** `nest g res User`
- Generates a new module with the necessary CQRS components.

## Flat Option

The `--flat` option allows you to control whether a separate folder should be created for the generated files:

- **Default (`--flat=false`):** Files will be created within their own directory.
- **With `--flat=true`:** Files will be generated in the specified path without creating a new directory.

### Usage with `--flat`

- **Query:** `nest g qr "QueryName" --flat`
- **Command:** `nest g cmd "CommandName" --flat`
- **Resource:** `nest g res "ResourceName" --flat`

Using the `--flat` option can help maintain a flatter directory structure.

## License

This project is licensed under the MIT License.
npm package: @juancruuzl/schematics
Description: Custom schematic for CQRS nestjs structure
Author: Juan
Latest version: 1.0.8


# NestJS CQRS Schematics

This package provides custom schematics to quickly generate CQRS components (Commands, Queries, Resources) for NestJS applications. It helps streamline the process of creating modules with the Command Query Responsibility Segregation (CQRS) pattern.

## Installation

To install the package, run the following command:

```bash
    npm install @juancruuzl/schematics 
```

## Configuration

After installation, you need to add the schematics collection to your `nest-cli.json` file.

Update your `nest-cli.json` as follows:

```json
{
  "$schema": "https://json.schemastore.org/nest-cli",
  "collection": "@juancruuzl/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
    "deleteOutDir": true
  }
}
```

## Available Schematics

### 1. Generate a Query

To create a new query, run:

```bash
nest g qr "nameOfTheQueryToGenerate"
```

- **Example:** `nest g qr GetUserQuery`
- Generates a new query file and its related structure.

### 2. Generate a Command

To create a new command, run:

```bash
nest g cmd "nameOfTheCommandToGenerate"
```

- **Example:** `nest g cmd CreateUserCommand`
- Generates a new command file and its related structure.

### 3. Generate a Resource Module

To create a new resource module, run:

```bash
nest g res "nameOfTheModuleToGenerate"
```

- **Example:** `nest g res User`
- Generates a new module with the necessary CQRS components.

## Flat Option

The `--flat` option allows you to control whether a separate folder should be created for the generated files:

- **Default (`--flat=false`):** Files will be created within their own directory.
- **With `--flat=true`:** Files will be generated in the specified path without creating a new directory.

### Usage with `--flat`

- **Query:** `nest g qr "QueryName" --flat`
- **Command:** `nest g cmd "CommandName" --flat`
- **Resource:** `nest g res "ResourceName" --flat`

Using the `--flat` option can help maintain a flatter directory structure.

## License

This project is licensed under the MIT License.
npm package: @juand.silva/platzom
Description: Traductor de idioma platzom
Author: Juan Diego Silva
Latest version: 0.1.0

# Platzom

Platzom es un idioma inventado para el [Curso de Fundamentos de JavaScript](https://platzi.com/javascript/) de [Plazi](https://platzi.com/), el mejor lugar para aprender online

## Descripción del idioma

- Si la palabra termina con "ar", se le quitan esas dos letras
- Si la palabra inicia con Z, se le añade "pe" al final
- Si la palabra traducida tiene 10 o más letras, se debe partir en dos por la mitad y unir con un guión medio
- Por último, si la palabra original es un palíndromo, ninguna regla anterior cuenta y se devuelve la misma palabra pero intercalando letras mayúsculas y minúsculas

## Instalación

```console
~$ npm install platzom
```

## Uso

```js
import platzom from 'platzom'

platzom("Programar") // Program
platzom("Zorro") // Zorrope
platzom("Zarpar") // Zarppe
platzom("abecedario") // abece-dario
platzom("sometemos") // SoMeTeMoS
```

## Créditos
- [Juan Diego Silva](https://twitter.com/juand_silva)

## Licencia

[MIT](https://opensource.org/licenses/MIT)
npm package: @juandara22/vissually
Description: Easy to use graphic components for react
Author: juandara22
Latest version: 1.0.2


# Fullstack Grafic package for React

![Demo Page](http://g.recordit.co/UrGlueJ1zJ.gif)

This is a npm React package for faster and simpler web development. Build your own design system! Start here
[here](https://vissually-97134.herokuapp.com/).
[![NPM](https://img.shields.io/npm/v/@juandara22/vissually.svg)](https://www.npmjs.com/package/@juandara22/vissually) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Quickstart

Just install the package:

```bash
# with npm
npm install @juandara22/vissually

# with yarn
yarn add @juandara22/vissually
```

## Usage

Here is a quick example to get you started, it's all you need:

```tsx

import React from 'react';
import ReactDOM from 'react-dom';
import VButton from '@juandara22/vissually';
import '@juandara22/vissually/dist/index.css'

function App() {
  return (
    <Button primary>
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));
```

### About the [Demo App](https://vissually-97134.herokuapp.com/)

Keep it responsive!
![Recordit GIF](http://g.recordit.co/Xd44Tr823T.gif))


### Author

Juan David Ramirez
[Portfolio](https://david.alfagenos.com)
You can always donate me [here](https://david.alfagenos.com/donate)

### Version

1.0.0

### License

[![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org)

- **[MIT license](http://opensource.org/licenses/mit-license.php)**
- Copyright 2018 © <a href="http://alfagenos.com" target="_blank">AlfagenosProductions</a>.
npm package: @juandavidkincaid/web3-react-stargazer-connector
Description: The official web3-react connector for the Stargazer Wallet.
Author: Stardust Collective
Latest version: 1.0.0

# Stargazer Wallet Connector `(web3-react)`

The official [`web3-react`](https://github.com/NoahZinsmeister/web3-react/tree/v6) connector for the Stargazer Wallet.

## Install
If you're using NPM

`npm install @stardust-collective/web3-react-stargazer-connector`

If you're using Yarn

`yarn add @stardust-collective/web3-react-stargazer-connector`

## Arguments

```typescript
supportedChainIds?: number[]
```

## Example

```typescript
import {StargazerConnector} from 'stargazer-connector';

const stargazerConnector = new StargazerConnector({
  supportedChainIds: [1, 3]
});
```

## Development
This project runs on `TypeScript 4.7`, `Node 16.13`, and `web3-react 6`.

### `yarn build`
Builds the project and stores its contents in the ./dist folder.

### `yarn dev`
Builds the project and watches for changes.

## License
This project is licensed under the [MIT License](./LICENSE)