open-index/open-npm huggingface dataset:
npm package: @itsjoekent/react-color
Description: A Collection of Color Pickers from Sketch, Photoshop, Chrome & more
Author: case
Latest version: 2.20.4

# [React Color](http://casesandberg.github.io/react-color/)

[![Npm Version][npm-version-image]][npm-version-url]
[![Build Status][travis-svg]][travis-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]

* **13 Different Pickers** - Sketch, Photoshop, Chrome and many more

* **Make Your Own** - Use the building block components to make your own

## Demo

![Demo](https://media.giphy.com/media/26FfggT53qE304CwE/giphy.gif)

[**Live Demo**](http://casesandberg.github.io/react-color/)

## Installation & Usage

```sh
npm install react-color --save
```

### Include the Component

```js
import React from 'react'
import { SketchPicker } from 'react-color'

class Component extends React.Component {

  render() {
    return <SketchPicker />
  }
}
```
You can import `AlphaPicker` `BlockPicker` `ChromePicker` `CirclePicker` `CompactPicker` `GithubPicker` `HuePicker` `MaterialPicker` `PhotoshopPicker` `SketchPicker` `SliderPicker` `SwatchesPicker` `TwitterPicker` respectively.

> 100% inline styles via [ReactCSS](http://reactcss.com/)

[travis-svg]: https://travis-ci.org/casesandberg/react-color.svg
[travis-url]: https://travis-ci.org/casesandberg/react-color
[license-image]: http://img.shields.io/npm/l/react-color.svg
[license-url]: LICENSE
[downloads-image]: http://img.shields.io/npm/dm/react-color.svg
[downloads-url]: http://npm-stat.com/charts.html?package=react-color
[npm-version-image]: https://img.shields.io/npm/v/react-color.svg
[npm-version-url]: https://www.npmjs.com/package/react-color
npm package: @itsjonq/champ
Description: Champ, slugger, skip, ace... Get one of these names!
Latest version: 0.0.2

# 🏆 Champ

> Champ, slugger, skip, ace... Get one of these names!

[![Build Status](https://travis-ci.org/ItsJonQ/champ.svg?branch=master)](https://travis-ci.org/ItsJonQ/champ)

## Getting Started

Add this module to your project by running:

```
npm install @itsjonq/champ
```

## Usage

Import the `getName` function from the library to get a random (awesome) name!

```js
import { getName } from '@itsjonq/champ'

getName()
// slugger
```

## API

#### getName([seed])

Returns a random name (`string`), from the list of names.

###### seed

Type: `number`

Retrieves a specific name from the list of names.

## Thanks

Thanks to [@hownowstephen](https://github.com/hownowstephen) for being such a **champ**!
npm package: @itsjonq/controls
Description: A control panel to develop React UI
Author: Jon Quach
Latest version: 0.0.9

# 🎛 Controls

[![Build Status](https://travis-ci.org/ItsJonQ/controls.svg?branch=master)](https://travis-ci.org/ItsJonQ/controls)

> A control panel to develop and prototype React UI

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

-   [Installation](#installation)
-   [Usage](#usage)
    -   [Fields](#fields)
    -   ["Controlled" Fields](#controlled-fields)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

```
npm install @itsjonq/controls
```

## Usage

```jsx
import React from 'react';
import { useControls, Controls } from '@itsjonq/controls';

function Example() {
	const { text, number } = useControls();
	const title = text('Title', 'My Title');
	const amount = number('Amount', 10, { min: 0, max: 50 });

	return (
		<div>
			<Controls />
			<h2>{title}</h2>
			<p>{amount}</p>
		</div>
	);
}
```

### Fields

```jsx
import React from 'react';
import { useControls, Controls } from '@itsjonq/controls';

function Example() {
	const {
		// Fields
		boolean,
		color,
		date,
		number,
		select,
		text,
		textarea,
		// All attributes
		attributes,
	} = useControls();

	boolean('checked', true);
	color('mainColor', 'red');
	date('publishDate', 'December 8, 2019');
	number('amount', 10, { min: 0, max: 50 });
	select(
		'status',
		{
			Published: 'published',
			Draft: 'draft',
			Private: 'private',
		},
		'published',
	);
	text('title', 'My Title');
	textarea('description', 'Words...');

	// The names of the attributes registered with the fields
	const {
		checked,
		mainColor,
		publishDate,
		amount,
		status,
		title,
		description,
	} = attributes;

	return <div>...</div>;
}
```

### "Controlled" Fields

To manually update a field (or fields), use the `updateField` or `updateFields` function.

```jsx
import React from 'react';
import {
	useControls,
	Controls,
	updateField,
	updateFields,
} from '@itsjonq/controls';

function Example() {
	const { text } = useControls();

	text('title', 'My Title');
	text('description', 'My Description');
	text('caption', 'My Caption');

	// The names of the attributes registered with the fields
	const { title, description, caption } = attributes;

	const handleOnManualUpdateFields = () => {
		// Update a single field
		updateField('title', 'New Title');
		// Update multiple fields
		updateFields({
			description: 'New Description',
			caption: 'New Caption',
		});
	};

	return <div>...</div>;
}
```
npm package: @itsjonq/cyan
Description: Cypress-like Testing for React + JSDOM
Author: Jon Quach
Latest version: 0.15.1

# 🐱 Cyan

[![Build Status](https://travis-ci.org/itsjonq/cyan.svg?branch=master)](https://travis-ci.org/itsjonq/cyan)
[![Coverage Status](https://coveralls.io/repos/github/ItsJonQ/cyan/badge.svg?branch=master)](https://coveralls.io/github/ItsJonQ/cyan?branch=master)
[![npm version](https://badge.fury.io/js/%40itsjonq%2Fcyan.svg)](https://badge.fury.io/js/%40itsjonq%2Fcyan)

> Cypress-like Testing for React + JSDOM

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Example](#example)
- [Documentation](#documentation)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

```
npm install --save-dev @itsjonq/cyan
```

## Example

```jsx
import React from 'react'
import { cy } from '@itsjonq/cyan'
import Modal from '../Modal'

cy.useFakeTimers()

test('Can open/close a Modal', () => {
  cy.render(
    <Modal trigger={<button>Open</button>}>
      <div className="content">Content</div>
    </Modal>,
  )

  cy.get('button').click()

  expect(cy.get('.Modal').hasClass('is-open')).toBeTruthy()
  expect(cy.get('.content').exists()).toBeTruthy()

  cy.getByCy('CloseButton').click()

  expect(cy.get('.Modal').hasClass('is-open')).toBeFalsy()
  expect(cy.get('.content').exists()).toBeFalsy()
})
```

## Documentation

For additional information, check out [our documentation](https://cyan-testing.netlify.com)!
npm package: @itsjonq/elm
Description: A collection of handy React Elements
Author: Jon Quach
Latest version: 0.0.6

# 🌳 Elm

[![Build Status](https://travis-ci.org/ItsJonQ/elm.svg?branch=master)](https://travis-ci.org/ItsJonQ/elm)
[![Coverage Status](https://coveralls.io/repos/github/ItsJonQ/elm/badge.svg?branch=master)](https://coveralls.io/github/ItsJonQ/elm?branch=master)
[![Bundle size](https://badgen.net/bundlephobia/minzip/@itsjonq/elm)](https://bundlephobia.com/result?p=@itsjonq/elm)

> A collection of handy React Elements

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

-   [Installation](#installation)
-   [Elements](#elements)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

```
npm install @itsjonq/elm
```

## Elements

-   Flex
-   MediaQuery
-   Truncate
-   View
-   Viewport
npm package: @itsjonq/feels
Description: Simple feels tracker
Latest version: 0.0.1

# ❤ Feels

> Simple feels tracker

## Table of contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)
- [Configure](#configure)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

```
npm install -g @itsjonq/feels
```

## Usage

In your Terminal, run the `feel` command:

```
feels
```

By default, it will output the help content:

```
❤️ Feels

feels <command>

Example:
  feels add "Great!"

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  config [options]  Configures Feels
  add|a [task]      Add a new feels for Today
  new|n [task]      Alias for "add"
  list|ls           List Today's feels
  edit|e            Edit Today's feels
  print|p           Print Yesterday's and Today's feels
  copy|cp           Copy Yesterday's and Today's feels
  open|o            Opens the feels directory
  which             Display location of feels
```

## Configure

By default, Do will create `.md` files under the `~/.feels` directory. You can customize the directory by running:

```
feels config --dir=~/Stuff/my-custom-do/here
```
npm package: @itsjonq/is
Description: A tiny type checker
Author: Jon Quach
Latest version: 0.0.5

# 💡 is

[![Build Status](https://travis-ci.org/ItsJonQ/is.svg?branch=master)](https://travis-ci.org/ItsJonQ/is)
[![codecov](https://codecov.io/gh/ItsJonQ/is/branch/master/graph/badge.svg)](https://codecov.io/gh/ItsJonQ/is)
[![Bundle size](https://badgen.net/bundlephobia/minzip/@itsjonq/is)](https://bundlephobia.com/result?p=@itsjonq/is)

> A tiny type checker

`is` is a simple sub 400B type checking library for JavaScript.<br />
For a more feature-packed version, check out [@sindresorhus/is](https://github.com/sindresorhus/is).

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

-   [Installation](#installation)
-   [Usage](#usage)
    -   [Supported types](#supported-types)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

```
npm install @itsjonq/is
```

## Usage

```js
import is from '@itsjonq/is';

is.string('Hello');
// true

const fn = () => 'Nope';

is.string(fn);
// false
is.function(fn);
// true
is.object(fn);
// true
is.plainObject(fn);
// false
```

### Supported types

-   `is.array`
-   `is.blob`
-   `is.boolean`
-   `is.defined`
-   `is.file`
-   `is.function`
-   `is.map`
-   `is.null`
-   `is.number`
-   `is.object`
-   `is.plainObject`
-   `is.regExp`
-   `is.string`
-   `is.symbol`
-   `is.undefined`
-   `is.weakMap`
npm package: @itsjonq/prestart
Description: A tiny tool to make Javascript development a little more delightful
Author: Jon Quach
Latest version: 1.0.1

# 🔑 Prestart

> A tiny tool to make Javascript development a little more delightful

Prestart is a tool can hook into `npm prestart` to help setup your Javascript development workflow. The main feature is that it will automatically check and install any missing dependencies for you.

```
PreStart

Project details
--------------------------------------------
node   version   12.9.1
git    branch    master
       email     name@email.com
--------------------------------------------

  ✔ [1/2] 🔌   Checking connection...
  ✔ [2/2] 🚚   Fetching packages...

Success!
✨  Have fun developing!
```

## Installation

```
npm install --save-dev @itsjonq/prestart
```

## Usage

Add `@itsjonq/prestart` to your `prestart` script in your project's `package.json`.

```
"scripts": {
  ...
  "prestart": "prestart",
  ...
},
```
npm package: @itsjonq/sup
Description: Simple task tracker
Latest version: 0.0.11

# ⭐️ SUP

[![Build Status](https://travis-ci.org/ItsJonQ/sup.svg?branch=master)](https://travis-ci.org/ItsJonQ/sup)
[![npm version](https://badge.fury.io/js/%40itsjonq%2Fsup.svg)](https://badge.fury.io/js/%40itsjonq%2Fsup)

> Simple task tracker

## Table of contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)
- [Configure](#configure)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

```
npm install -g @itsjonq/sup
```

## Usage

In your Terminal, run the `sup` command:

```
sup
```

By default, it will output the help content:

```
⭐️ SUP

sup <command>

Example:
  sup add "I did a thing!"

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  config [options]  Configures SUP
  add|a [task]      Add a new task for Today
  new|n [task]      Alias for "add"
  list|ls           List Today's tasks
  edit|e            Edit Today's tasks
  print|p           Print Yesterday's and Today's tasks
  copy|cp           Copy Yesterday's and Today's tasks
  open|o            Opens the task directory
  which             Display location of tasks
```

## Configure

By default, Do will create `.md` files under the `~/.sup` directory. You can customize the directory by running:

```
sup config --dir=~/Stuff/my-custom-do/here
```
npm package: @itsjpoioioi/nestjs-package-starter
Description: NestJS npm package starter
Author: JP
Latest version: 1.0.0

<h1 align="center"></h1>

<div align="center">
  <a href="http://nestjs.com/" target="_blank">
    <img src="https://nestjs.com/img/logo_text.svg" width="150" alt="Nest Logo" />
  </a>
</div>

<h3 align="center">NestJS npm Package Starter</h3>

<div align="center">
  <a href="https://nestjs.com" target="_blank">
    <img src="https://img.shields.io/badge/built%20with-NestJs-red.svg" alt="Built with NestJS">
  </a>
</div>

### Installation

1. Clone the repo
2. Run npm/yarn install

```bash
cd nestjs-package-starter
npm install
```

## Change Log

See [Changelog](CHANGELOG.md) for more information.

## Contributing

Contributions welcome! See [Contributing](CONTRIBUTING.md).

## Author

**John Biundo (Y Prospect on [Discord](https://discord.gg/G7Qnnhy))**

## License

Licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
npm package: @itsjustcon/react-usefetch
Description: React hooks for the Fetch API
Author: Connor Grady
Latest version: 0.1.1

# react-useFetch
React hooks for the Fetch API

Inspired by the amazing [`@apollo/client`](https://www.apollographql.com/docs/react/api/react/hooks/) react hooks.

## Install
```
npm install --save @itsjustcon/react-usefetch
```

## Usage

### `useFetch()`
The `useFetch()` method is most common way to use this package.

```javascript
const { useFetch } = require('@itsjustcon/react-usefetch');

function MyComponent() {
    const { loading: isLoadingTodos, body: todos } = useFetch('https://jsonplaceholder.typicode.com/todos', {
        mode: 'cors',
        cache: 'no-cache',
    });
    return (
        <div>
            {isLoadingTodos ? (
                <LoadingSpinner />
            ) : (
                <div>
                    {todos.map((todo) =>
                        <div key={todo.id}>
                            {todo.title}
                        </div>
                    )}
                </div>
            )}
        </div>
    );
}
```

### `useLazyFetch`
The `useLazyFetch()` method allows you to delay the execution of a `fetch`.
This is commonly used for things like fetching after a button is pressed.

```javascript
const { useLazyFetch } = require('@itsjustcon/react-usefetch');

function MyComponent() {
    const [fetchTodos, { loading: isLoadingTodos, body: todos }] = useLazyFetch('https://jsonplaceholder.typicode.com/todos', {
        mode: 'cors',
        cache: 'no-cache',
    });
    return (
        <div>
            <button
                onClick={(event) => {
                    event.preventDefault();
                    fetchTodos();
                }}
                disabled={isLoadingTodos}
            >
                Fetch Todos
            </button>
            {isLoadingTodos ? (
                <LoadingSpinner />
            ) : todos ? (
                <div>
                    {todos.map((todo) =>
                        <div key={todo.id}>
                            {todo.title}
                        </div>
                    )}
                </div>
            ) : null}
        </div>
    );
}
```

## API
Detailed documentation coming soon
npm package: @itsjxck/flightcontrol
Description: Flightcontrol configuration generator
Author: Jack Adam
Latest version: 0.5.0

<p align="center">
 <img width="100px" src="https://raw.githubusercontent.com/itsjxck/flightcontrol/main/.github/images/favicon.png" align="center" alt=":package: flightcontrol" />
 <h2 align="center">:package: flightcontrol</h2>
 <p align="center">Flightcontrol config generator</p>
  <p align="center">
    <a href="https://github.com/itsjxck/flightcontrol/issues">
      <img alt="Issues" src="https://img.shields.io/github/issues/itsjxck/flightcontrol?style=flat&color=336791" />
    </a>
    <a href="https://github.com/itsjxck/flightcontrol/pulls">
      <img alt="GitHub pull requests" src="https://img.shields.io/github/issues-pr/itsjxck/flightcontrol?style=flat&color=336791" />
    </a>
     <a href="https://github.com/itsjxck/flightcontrol">
      <img alt="GitHub Downloads" src="https://img.shields.io/npm/dw/@itsjxck/flightcontrol?style=flat&color=336791" />
    </a>
    <a href="https://github.com/itsjxck/flightcontrol">
      <img alt="GitHub Total Downloads" src="https://img.shields.io/npm/dt/@itsjxck/flightcontrol?color=336791&label=Total%20downloads" />
    </a>
 <a href="https://github.com/itsjxck/flightcontrol">
      <img alt="GitHub release" src="https://img.shields.io/github/release/itsjxck/flightcontrol.svg?style=flat&color=336791" />
    </a>
    <br />
    <br />
  <a href="https://github.com/itsjxck/flightcontrol/issues/new/choose">Report Bug</a>
  <a href="https://github.com/itsjxck/flightcontrol/issues/new/choose">Request Feature</a>
  </p>

<p align="center"><strong>Flightcontrol Config Generator</strong>✨</p>

# Getting started

## Installation

```sh
# npm
npm install --save-dev @itsjxck/flightcontrol

# yarn
yarn add --dev @itsjxck/flightcontrol
```

## Usage

Read the code (for now). Look at the (janky) test file for an example.

## 🤝 Contributing

Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](issues).

## 📝 License

Copyright © 2023 [Jack Adam](https://github.com/itsjxck).<br />
This project is [MIT](LICENSE) licensed.
npm package: @itsjxyang/create-react-component
Description: A package to create react component
Author: itsjxyang
Latest version: 1.0.0

# Create React Component

This is a command-line tool for generating React components with corresponding test files.

## Installation

To use `create-react-component`, you can install it globally via npm:

`npm install -g create-react-component`

## Usage

Run the following command to generate a React component:

`create-react-component [componentName]`


To generate a component with a folder and additional files, use the `-f` option:

`create-react-component [componentName] -f`


Multiple component names can be provided to generate multiple components at once:

`create-react-component [componentName1] [componentName2] ...`


## Generated Files

When generating a component without the `-f` option, the following files will be created:

- `ComponentName.tsx`: The React component file.
- `ComponentName.test.tsx`: The test file for the component.

When generating a component with the `-f` option, a folder named `ComponentName` will be created with the following files:

- `index.tsx`: The React component file.
- `ComponentName.test.tsx`: The test file for the component.

## Customization

You can customize the generated component by modifying the generated files according to your needs.


## License

This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).
npm package: @itsjxyang/git-branch-delete
Description: A package to delete local Git branches except for 'master'.
Author: itsjxyang
Latest version: 1.0.5

A command-line tool to delete local Git branches, excluding specified branches.

### Installation

```bash
npm install -g @itsjxyang/git-branch-delete
```

### Usage

To run the git-branch-delete command, use the following syntax:

```
git-branch-delete
```

You will be prompted to enter the branches you want to keep (space-separated). If you leave the input empty, the default branch 'master' will be excluded.
The tool will display all the branches, excluding the specified branches, and then delete them.

### License

This project is licensed under the MIT License.
npm package: @itsmagick/nexus-client
Description: Client for connecting to Nexus Knowledge Graph
Author: Magick AI
Latest version: 1.0.2

# Nexus Client for Node.js

A Node.js client for the Nexus Knowledge Graph System. This client allows you to connect to a Nexus server and perform operations on the knowledge graph.

## Installation

```bash
npm install nexus-client
```

## Usage

### Basic Connection

```typescript
import { createClient } from 'nexus-client';

// Create a client
const client = createClient({
  url: 'nexus://localhost:4242',
  password: 'your-password'
});

// Connect to the server
await client.connect();

// Perform operations
await client.set('key', 'value');
const value = await client.get('key');
console.log(value); // 'value'

// Disconnect
await client.disconnect();
```

### Connection Options

```typescript
import { createClient } from 'nexus-client';

const client = createClient({
  // Use URL format
  url: 'nexus://username:password@localhost:4242/0',
  
  // Or use socket configuration
  socket: {
    host: 'localhost',
    port: 4242
  },
  
  // Authentication
  username: 'default',
  password: 'your-password',
  
  // Database selection
  database: 0,
  
  // Connection timeout
  connectTimeout: 10000, // 10 seconds
  
  // Retry strategy
  retryStrategy: (times) => Math.min(times * 50, 2000)
});
```

### Working with Entities

```typescript
// Create an entity
await client.hSet('entity:person:1', {
  name: 'John Doe',
  age: '30',
  email: 'john@example.com'
});

// Get an entity
const person = await client.hGetAll('entity:person:1');
console.log(person); // { name: 'John Doe', age: '30', email: 'john@example.com' }
```

### Working with Relationships

```typescript
// Create a relationship
await client.hSet('relationship:follows:1', {
  source: 'entity:person:1',
  target: 'entity:person:2',
  type: 'follows',
  since: '2023-01-01'
});

// Get relationships
const relationship = await client.hGetAll('relationship:follows:1');
console.log(relationship);
```

### Querying the Knowledge Graph

```typescript
// Find all entities of a specific type
const keys = await client.keys('entity:person:*');
const entities = await Promise.all(
  keys.map(key => client.hGetAll(key))
);

// Find relationships between entities
const relationshipKeys = await client.keys('relationship:follows:*');
const relationships = await Promise.all(
  relationshipKeys.map(key => client.hGetAll(key))
);
```

## API Reference

The Nexus client provides all the same methods as the Redis client, including:

- `get`, `set`, `del` - Basic key-value operations
- `hGet`, `hSet`, `hGetAll` - Hash operations
- `lPush`, `lRange` - List operations
- `sAdd`, `sMembers` - Set operations
- `zAdd`, `zRange` - Sorted set operations
- `keys`, `scan` - Key operations
- And many more...

## Protocol Support

The Nexus client supports the `nexus://` protocol scheme, which is automatically translated to the appropriate protocol for communicating with the Nexus server.

## License

MIT