open-index/open-npm huggingface dataset:
npm package: @jgoon/bluebubbles
Description: Type-safe TypeScript client for the BlueBubbles Server API
Latest version: 1.1.0

# TypeScript SDK

The TypeScript SDK for BlueBubbles is a type-safe client powered by [openapi-typescript](https://openapi-ts.dev) and [openapi-fetch](https://openapi-ts.dev/openapi-fetch). Types are generated directly from the OpenAPI spec.

## Install

```bash
npm install @jgoon/bluebubbles
```

## Usage

```ts
import { createClient } from "@jgoon/bluebubbles";

const client = createClient({ baseUrl: "http://localhost:1234" });

// Every path, parameter, and response is fully typed
const { data, error } = await client.GET("/api/v1/server/info", {
  params: { query: { password: "your-password" } },
});

// Send a message
await client.POST("/api/v1/message/text", {
  params: { query: { password: "your-password" } },
  body: {
    chatGuid: "iMessage;-;+11234567890",
    message: "Hello from the SDK!",
  },
});
```

## Webhooks

Types and runtime guards for BlueBubbles webhook payloads are included. Import from the main entry or the `/webhooks` subpath:

```ts
import {
  BlueBubblesWebhookPayload,
  isBlueBubblesWebhookPayload,
} from "@jgoon/bluebubbles";

// or, for a targeted import:
import {
  BlueBubblesWebhookPayload,
  isBlueBubblesWebhookPayload,
} from "@jgoon/bluebubbles/webhooks";
```

The payload is a discriminated union — switch on `payload.type` and TypeScript narrows `payload.data` automatically:

```ts
function handleWebhook(raw: unknown) {
  if (!isBlueBubblesWebhookPayload(raw)) return;

  switch (raw.type) {
    case "new-message":
      console.log(raw.data.guid, raw.data.text);
      break;
    case "typing-indicator":
      console.log(raw.data.guid, raw.data.display);
      break;
  }
}
```

## Type-only import

If you prefer to use `openapi-fetch` directly (or another HTTP client), you can import just the generated types:

```ts
import createClient from "openapi-fetch";
import type { paths } from "@jgoon/bluebubbles";

const client = createClient<paths>({ baseUrl: "http://localhost:1234" });
```

## Development

From `sdks/typescript/`:

```bash
npm ci
npm run generate
npm run build
```
npm package: @jgordy24/react-hooks-lib
Description: A package of custom react hooks
Author: JGordy
Latest version: 1.4.2

# @jgordy24/react-hooks-lib

> &quot;A package of commonly used react hooks&quot;

[![Build](https://github.com/JGordy/react-hooks-lib/actions/workflows/build-test.yml/badge.svg)](https://github.com/JGordy/react-hooks-lib/actions/workflows/build-test.yml)

## Install

```bash
npm install --save @jgordy24/react-hooks-lib
```

## Usage

### useHover

```jsx
import React from 'react';
import { useHover } from '@jgordy24/react-hooks-lib';

const App = () => {
  const [hoverRef, isHovered] = useHover();

  return (
    <div>
      <button
        ref={hoverRef}
        style={{
          backgroundColor: isHovered ? '#424242' : '#121212',
          color: '#FFF',
        }}
      >
        My Button
      </button>
    </div>
  )
}
```

```jsx
more examples coming soon
```

## License

MIT © [JGordy](https://github.com/JGordy)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).
npm package: @jgordy24/stalls-ui
Description: > A library of React components created using `create-react-app`.
Author: JGordy
Latest version: 1.2.8

# React component library for Generosity Market app

> A library of React components created using `create-react-app`.

[![Build & Test](https://github.com/JGordy/stalls-ui/actions/workflows/build-test.yml/badge.svg)](https://github.com/JGordy/stalls-ui/actions/workflows/build-test.yml)
[![npm](https://badge.fury.io/js/%40jgordy24%2Fstalls-ui.svg)](https://badge.fury.io/js/%40jgordy24%2Fstalls-ui)
[![Downloads](https://img.shields.io/npm/dw/@jgordy24/stalls-ui.svg)](https://img.shields.io/npm/dw/@jgordy24/stalls-ui)
[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](http://jgordy.github.io/stalls-ui/?path=/story/welcome--to-storybook)

## Installation

Run the following command:
`npm install --save @jgordy24/stalls-ui`

### Import/using component example

```jsx
import { Button } from '@jgordy24/stalls-ui'

const App = () => {

    const handleClick => (e) => {
        /* do something */
    };

    return (
        <div>
            <Button
                bsStyle='success'
                label='label-text-here'
                onClick={handleClick}
            />
        </div>
    );
}
```

```bash
More examples coming soon
```
npm package: @jgornati/react-stock
Description: A library of React component for stock level indication with configurable params.
Author: Joel Gornati
Latest version: 1.2.8

# react-stock

A library of React component for stock level indication with configurable params.

## Installation

Run the following command:
`npm install --save @jgornati/react-stock`

## Usage

```
import {Indicator} from "@jgornati/react-stock-indicator";
```
## Example

```
<Indicator style={{fill: "red", width: "15px"}}
                       stock={20}
                       config={{
                           low: 3,
                           high: 15
                       }}
/>
```

![alt imagen de nivel](imagen.png "Vista del indicador")

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/R6R75NBGE)
npm package: @jgornick/ngx-translate-po-http-loader
Description: Load po files for use with ngx-translate
Author: Joe Gornick
Latest version: 1.0.2

# Description
Load po files for use with `ngx-translate`

## Usage:
```ts
import { Http } from '@angular/http';

import { TranslatePoHttpLoader } from '@biesbjerg/ngx-translate-po-http-loader';

export function createTranslateLoader(http: Http) {
	return new TranslatePoHttpLoader(http, 'assets/i18n', '.po');
}

@NgModule({
	imports: [
		BrowserModule,
		HttpModule,
		TranslateModule.forRoot({
			loader: {
				provide: TranslateLoader,
				useFactory: createTranslateLoader,
				deps: [Http]
			}
		})
	],
	bootstrap: [AppComponent]
})
export class AppModule { }
```
npm package: @jgosmann/jupyterlab-nengo
Description: Use the Nengo GUI within JupyterLab.
Author: Jan Gosmann
Latest version: 0.1.1

# jupyterlab-nengo

Use the Nengo GUI within JupyterLab.

**Warning: The JupyterLab extension API is not stable yet and thus this extension
may break at any time.**

![Screenshot of Nengo GUI running in JupyterLab](screen-small.png)

## Prerequisites

* JupyterLab
* [Node.js](https://nodejs.org/en/) with npm
* [Nengo GUI](https://github.com/nengo/nengo-gui) development version from
  GitHub. (Required features should be included in version 0.4.4 whenever it
  gets released.)

## Installation

### Activate the Nengo GUI Jupyter notebook server extension (backend)

Add the following to your `~/.jupyter/jupyter_notebook_config.json`:

```json
{
  "NotebookApp": {
    "nbserver_extensions": {
      "nengo_gui.jupyter": true
    }
  }
}
```

### Install the JupyterLab extension (frontend)

Run:

```bash
jupyter labextension install @jgosmann/jupyterlab-nengo
```

## Development

For a development install (requires npm version 4 or later), do the following
in the repository directory:

```bash
npm install
npm run build
jupyter labextension link .
```

To rebuild the package and the JupyterLab app:

```bash
npm run build
jupyter lab build
```
npm package: @jgoz/esbuild-overlay
Description: Browser overlay for esbuild errors and warnings
Author: John Gozde
Latest version: 1.0.10

# @jgoz/esbuild-overlay

A dismissable error overlay for reporting esbuild errors to a web browser.

### Features

- Supports esbuild's message format
- Dismissable

### Install

This package isn't really intended to be used on its own because it's bundled with `@jgoz/esbuild-plugin-livereload` and will be used without any configuration.

```console
$ npm i @jgoz/esbuild-overlay
```

### Usage with an EventSource

```js
async function init() {
  const { overlay } = await import('@jgoz/esbuild-overlay');

  const evt = new EventSource('/my-event-source');
  let removeOverlay;

  evt.addEventListener('build-result', e => {
    const result = JSON.parse(e?.data ?? '{}');
    if (removeOverlay && !result.errors.length) {
      removeOverlay();
      removeOverlay = undefined;
    }
    if (result.errors?.length) {
      removeOverlay = overlay({ errors: result.errors });
    }
  });
}
```

### API

#### `function overlay(props: OverlayProps): () => void`

Displays an overlay with the supplied error messages and returns a function that removes the overlay.

<!-- prettier-ignore-start -->
<!-- markdown-interpolate: node ../../scripts/docs.mjs ./src/overlay.ts OverlayProps -->
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| errors (*) | `Message[]` | - | Error messages to display. |
| openFileURL | `string` | - | If provided, this URL will be opened when the user clicks on the overlay.<br><br>This can be used to open the source file of the error or warning. |
<!-- end -->
<!-- prettier-ignore-end -->
npm package: @jgoz/jest-esbuild
Description: Esbuild transformer for Jest
Author: John Gozde
Latest version: 1.0.10

# @jgoz/jest-esbuild

An esbuild transform for Jest that supports mock hoisting.

### Features

- Supports mock hoisting via [babel-plugin-jest-hoist](https://www.npmjs.com/package/babel-plugin-jest-hoist)
- Accepts esbuild transform options

### Install

```console
$ npm i @jgoz/jest-esbuild
```

### Usage

Add it to your jest config:

```json
{
  "transform": {
    "^.+\\.tsx?$": ["@jgoz/jest-esbuild"]
  }
}
```

Or with options:

```json
{
  "transform": {
    "^.+\\.tsx?$": [
      "@jgoz/jest-esbuild",
      {
        "esbuild": {
          "jsx": "automatic",
          "target": "es2017"
        }
      }
    ]
  }
}
```

### Options

<!-- prettier-ignore-start -->
<!-- markdown-interpolate: node ../../scripts/docs.mjs ./src/index.ts TransformerConfig -->
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| [esbuild](https://esbuild.github.io/api/#transform-api) | `TransformOptions` | - | Esbuild transform options. |
| hoistMatch | `string[]` | `testMatch` | Alternate glob patterns for files that should be transformed with Babel for mock hoisting. If specified, only files matching this pattern will be transformed with Babel after being transformed with esbuild. |
<!-- end -->
<!-- prettier-ignore-end -->
npm package: @jgoz/swc-loader
Description: Webpack plugin for swc
Author: 강동윤
Latest version: 0.2.0

# swc-loader

This package allows transpiling JavaScript files using swc and webpack.

## Installation

```sh
npm i --save-dev @swc/core swc-loader webpack
```

## Usage

```js
module: {
    rules: [
        {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                // Use `.swcrc` to configure swc
                loader: "swc-loader"
            }
        }
    ];
}
```

You can pass options to the loader by using the option property.

```js
module: {
    rules: [
        {
            test: /\.ts$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: "swc-loader",
                options: {
                    jsc: {
                        parser: {
                            syntax: "typescript"
                        }
                    }
                }
            }
        }
    ];
}
```

If you get an error while using `swc-loader`, you can pass `sync: true` to get correct error message.

```js
module: {
    rules: [
        {
            test: /\.ts$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: "swc-loader",
                options: {
                    // This makes swc-loader invoke swc synchronously.
                    sync: true,
                    jsc: {
                        parser: {
                            syntax: "typescript"
                        }
                    }
                }
            }
        }
    ];
}
```

## Configuration Reference
Refer https://swc.rs/docs/configuring-swc
npm package: @jgptest/test-package
Description: This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Author: Jesper Paulsen
Latest version: 0.0.0

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
   parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
   },
```

- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
npm package: @jgretz/dot-matrix
Description: a collection of classes used to represent a dot matrix
Latest version: 1.0.0

# dot-matrix

## Backstory

In my daily role, I am often testing out new approaches to problems and playing with various packages to see how they might apply to a given situation. To make this easier / more applicable, I use some project as the basis for the test. For some reason, a matrix of dots is something that recurs often in my testing ... thus this library.
npm package: @jgtb/shared-core-fns
Description: A collection of essential utility functions for common use cases, including data manipulation, formatting, validations, and more.
Author: João
Latest version: 1.0.4

#Shared Core Fns

A collection of essential utility functions for common use cases, including data manipulation, formatting, validations, and more.

## Installation

```bash
npm install shared-core-fns
```
npm package: @jgtools/bunnyws
Description: Lightweight WebSocket library for Bun
Author: Erik Ekelöf
Latest version: 4.0.8

# BunnyWS

[![npm](https://img.shields.io/npm/v/@jgtools/bunnyws)](https://www.npmjs.com/package/@jgtools/bunnyws)
[![npm](https://img.shields.io/npm/dm/@jgtools/bunnyws)](https://www.npmjs.com/package/@jgtools/bunnyws)
[![GitHub](https://img.shields.io/github/license/jgtools/bunnyws)](https://github.com/git/git-scm.com/blob/main/MIT-LICENSE.txt)

Lightweight WebSocket library for Bun

## Features
- :rabbit: Works with Bun
- :zap: Zero dependencies
- :gear: Assigns an ID to each client connection
- :blue_square: Written in TypeScript

## Installation

### Using bun

```bash
bun a @jgtools/bunnyws
```

```javascript
import { BunnyWS } from "@jgtools/bunnyws";
// ...
```

## Usage

```typescript
import { BunnyMsg, BunnyWS, BunnyWSEvents, BunnyWSClient } from "@jgtools/bunnyws";

const events: BunnyWSEvents = {
    open: (ws: BunnyWSClient) => {
        console.log("Client has connected", ws.data.id);
    },
    message: (ws: BunnyWSClient, msg: BunnyMsg) => {
        console.log("Received:", msg);
        ws.send(msg); // send to client
        ws.publish("global", msg); // send to all connected clients (excluding itself)
    },
    close: (ws: BunnyWSClient) => {
        console.log("Client has disconnected:", ws.data.id);
    }
}

const bws = new BunnyWS(8080, events);
setInterval(() => bws.publish("Published to all"), 3000);
```

## Docs

### BunnyWS

`BunnyWS` is a WebSocket server.

Constructor parameters:
| Parameter | Type |
|-----------|------|
| `port` | `number` |
| `events` | `BunnyWSEvents` |

Methods:
| Method | Type |
|----------|------|
| `publish` | `(msg: string \| ArrayBufferView \| ArrayBuffer, compress?: boolean) => number` |

### BunnyWSEvents

`BunnyWSEvents` is an interface that defines the event handlers for a `BunnyWS` server.

| Property | Type |
|----------|------|
| `open` | `(ws: BunnyWSClient) => void` |
| `message` | `(ws: BunnyWSClient, msg: BunnyMsg) => void` |
| `close` | `(ws: BunnyWSClient) => void` |

## License

MIT
npm package: @jgtools/easings
Description: Collection of easing functions
Author: Erik1001
Latest version: 2.0.5

# Easings

[![npm](https://img.shields.io/npm/v/@jgtools/easings)](https://www.npmjs.com/package/@jgtools/easings)
[![npm](https://img.shields.io/npm/dm/@jgtools/easings)](https://www.npmjs.com/package/@jgtools/easings)
[![GitHub](https://img.shields.io/github/license/jgtools/easings)](https://github.com/git/git-scm.com/blob/main/MIT-LICENSE.txt)

Collection of easing functions

## Installation

### Using npm

```bash
npm i @jgtools/easings
```

```javascript
// import all functions using a namespace
import * as Easings from "@jgtools/easings";
// or import functions individually
import { outElastic } from "@jgtools/easings";
// ...
```

### Using cdn

```html
<script type="module">
    // import all functions using a namespace
    import * as Easings from "https://cdn.jsdelivr.net/npm/@jgtools/easings@2.0.5/dist/index.min.js";
    // or import functions individually
    import { outElastic } from "https://cdn.jsdelivr.net/npm/@jgtools/easings@2.0.5/dist/index.min.js";
    // ...
</script>
```

## Usage

```javascript
import { outElastic } from "@jgtools/easings";
const res = outElastic(0.5);
```

### Easing functions cheat sheet:

https://easings.net/

## License

MIT
npm package: @jgtools/gridmap
Description: Spatial Hash Grid that extends Map
Author: Erik1001
Latest version: 1.0.0

# GridMap

[![npm](https://img.shields.io/npm/v/@jgtools/gridmap)](https://www.npmjs.com/package/@jgtools/gridmap)
[![npm](https://img.shields.io/npm/dm/@jgtools/gridmap)](https://www.npmjs.com/package/@jgtools/gridmap)
[![GitHub](https://img.shields.io/github/license/jgtools/gridmap)](https://github.com/git/git-scm.com/blob/main/MIT-LICENSE.txt)

2D Spatial Hash Grid that extends Map

## Features

- :heavy_check_mark: Elements are stored on a 2D grid
- :heavy_check_mark: Filter nearby elements
- :heavy_check_mark: Extends Map
- :blue_square: Written in TypeScript

## Installation

### Using npm

```bash
npm i @jgtools/gridmap
```

```javascript
import GridMap from "@jgtools/gridmap";
// ...
```

## Usage

```javascript
import GridMap from "@jgtools/gridmap";

const entities = new GridMap(100, 60, 10);

const entity = { id: "1", x: 0, y: 0, name: "Bob" };
entities.set(entity.id, entity, entity.x, entity.y);

const entity2 = { id: "2", x: 15, y: 15, name: "Joe" };
entities.set(entity2.id, entity2, entity2.x, entity2.y);

console.log("nearby entities: ", gm.query(20, 20, 10));

entities.update("1", 15, 20);
console.log("nearby entities: ", gm.query(20, 20, 10));

entities.delete("2");
console.log("nearby entities: ", gm.query(20, 20, 10));

console.log("amount of entities:", gm.size);
console.log("entity with id 1: ", gm.get("1"));

entities.clear();
console.log("nearby entities: ", gm.query(20, 20, 10));
console.log("amount of entities after clear:", gm.size);
```

## License

MIT
npm package: @jgtools/jgmath
Description: Math utils
Author: Erik1001
Latest version: 1.0.8

# JGMath

[![npm](https://img.shields.io/npm/v/@jgtools/jgmath)](https://www.npmjs.com/package/@jgtools/jgmath)
[![npm](https://img.shields.io/npm/dm/@jgtools/jgmath)](https://www.npmjs.com/package/@jgtools/jgmath)
[![GitHub](https://img.shields.io/github/license/jgtools/jgmath)](https://github.com/git/git-scm.com/blob/main/MIT-LICENSE.txt)

Math utils

## Installation

### Using npm

```bash
npm i @jgtools/jgmath
```

```javascript
// import all functions using a namespace
import * as JGMath from "@jgtools/jgmath";
// or import functions individually
import { getAngle } from "@jgtools/jgmath";
// ...
```

### Using cdn

```html
<script type="module">
    // import all functions using a namespace
    import * as JGMath from "https://cdn.jsdelivr.net/npm/@jgtools/jgmath@1.0.7/dist/index.min.js";
    // or import functions individually
    import { getAngle } from "https://cdn.jsdelivr.net/npm/@jgtools/jgmath@1.0.7/dist/index.min.js";
    // ...
</script>
```

## Usage

```javascript
import { getAngle } from "@jgtools/jgmath";

const p1 = { x: 1, y: 2 };
const p2 = { x: 5, y: 5 };
const a = getAngle(p1, p2);
```

## License

MIT
npm package: @jgtools/listutils
Description: Utility functions for lists
Author: Erik1001
Latest version: 1.0.5

# ListUtils

[![npm](https://img.shields.io/npm/v/@jgtools/listutils)](https://www.npmjs.com/package/@jgtools/listutils)
[![npm](https://img.shields.io/npm/dm/@jgtools/listutils)](https://www.npmjs.com/package/@jgtools/listutils)
[![GitHub](https://img.shields.io/github/license/jgtools/listutils)](https://github.com/git/git-scm.com/blob/main/MIT-LICENSE.txt)

Utility functions for lists

## Installation

### Using npm

```bash
npm i @jgtools/listutils
```

```javascript
import { remove } from "@jgtools/listutils";
// ...
```

### Using cdn

```html
<script type="module">
    import  {remove} from "https://cdn.jsdelivr.net/npm/@jgtools/listutils@1.0.5/dist/index.min.js";
    // ...
</script>
```

## Usage

```javascript
import { remove } from "@jgtools/listutils";

const list = [1, 2, 3];
const removed = remove(list, (e) => {
  return e == 2;
});
console.log(list);
console.log(removed);
```

## License

MIT
npm package: @jgtools/lobbyserver
Description: Lobby system for online games
Author: Erik1001
Latest version: 3.0.0

# LobbyServer

[![npm](https://img.shields.io/npm/v/@jgtools/lobbyserver)](https://www.npmjs.com/package/@jgtools/lobbyserver)
[![npm](https://img.shields.io/npm/dm/@jgtools/lobbyserver)](https://www.npmjs.com/package/@jgtools/lobbyserver)
[![GitHub](https://img.shields.io/github/license/jgtools/lobbyserver)](https://github.com/git/git-scm.com/blob/main/MIT-LICENSE.txt)

Lobby system for online games

## Installation

### Using npm

```bash
npm i @jgtools/lobbyserver
```

```javascript
import LobbyServer from "@jgtools/lobbyserver";
// ...
```

### Using cdn

```html
<script type="module">
    import LobbyServer from "https://cdn.jsdelivr.net/npm/@jgtools/lobbyserver@1.0.3/dist/index.min.js";
    // ...
</script>
```

## Usage

```typescript
import LobbyServer, { LobbyUser_I } from "@jgtools/lobbyserver";

interface LobbyPlayer_I extends LobbyUser_I {
  color: number;
}
interface MetaData_I {
  maxPlayers: number;
}

const lobby = new LobbyServer<MetaData_I, LobbyPlayer_I>({
  maxPlayers: 8,
});

const user: LobbyPlayer_I = {
  id: "123",
  name: "Bob",
  color: 0xff0000,
};

lobby.addUser(user);
console.log(lobby.getUsers());
lobby.setMeta(user, { maxPlayers: 9 });
console.log(lobby.getMeta());
lobby.removeUser(user.id);
console.log(lobby.getUsers());
lobby.addUser(user);

const u = lobby.getUsers().get("123");
if (u) {
  console.log(u.id);
  console.log(u.color);
}
```

## License

MIT
npm package: @jgtools/matchmaking
Description: MatchMaking system for online games
Author: Erik1001
Latest version: 1.0.2

# MatchMaking

[![npm](https://img.shields.io/npm/v/@jgtools/matchmaking)](https://www.npmjs.com/package/@jgtools/matchmaking)
[![npm](https://img.shields.io/npm/dm/@jgtools/matchmaking)](https://www.npmjs.com/package/@jgtools/matchmaking)
[![GitHub](https://img.shields.io/github/license/jgtools/matchmaking)](https://github.com/git/git-scm.com/blob/main/MIT-LICENSE.txt)

MatchMaking system for online games

## Installation

### Using npm

```bash
npm i @jgtools/matchmaking
```

```javascript
import MatchMaking from "@jgtools/matchmaking";
// ...
```

### Using cdn

```html
<script type="module">
    import MatchMaking from "https://cdn.jsdelivr.net/npm/@jgtools/matchmaking@1.0.2/dist/index.min.js";
    // ...
</script>
```

## Usage

```typescript
import MatchMaking, { Lobby, Match } from "@jgtools/matchmaking";

const config = {
  TEAM_SIZE: 5,
  TEAMS_PER_MATCH: 2,
  MM_INTERVAL: 1000,
  MAX_DIFF_START: 0.02,
  INCREASE_DIFF_TIME: 60000,
  CLEAR_INTERVAL: 3600000,
  CLEAR_AFTER_QUE_TIME: 7200000,
};
const onMatchesFound = (matches: Match[]) => {
  // do something with matches that were created
};
const mm = new MatchMaking(onMatchesFound, config);

// add lobby to matchmaking
const lobby: Lobby = {
  id: "123",
  rank: 0.7,
  members: 3,
};
mm.addToQue(lobby);
```

## License

MIT
npm package: @jgtools/shg
Description: Spatial Hash Grid
Author: Erik1001
Latest version: 1.0.4

# SHG

[![npm](https://img.shields.io/npm/v/@jgtools/shg)](https://www.npmjs.com/package/@jgtools/shg)
[![npm](https://img.shields.io/npm/dm/@jgtools/shg)](https://www.npmjs.com/package/@jgtools/shg)
[![GitHub](https://img.shields.io/github/license/jgtools/shg)](https://github.com/git/git-scm.com/blob/main/MIT-LICENSE.txt)

2D Spatial Hash Grid

## Features

- :heavy_check_mark: Elements are stored on a 2D grid
- :heavy_check_mark: Filter nearby elements
- :blue_square: Written in TypeScript

## Installation

### Using npm

```bash
npm i @jgtools/shg
```

```javascript
import SHG from "@jgtools/shg";
// ...
```

### Using cdn

```html
<script type="module">
    import SHG from "https://cdn.jsdelivr.net/npm/@jgtools/shg@1.0.4/dist/index.min.js";
    // ...
</script>
```

## Usage

```javascript
import SHG from "@jgtools/shg";

const width = 100;
const height = 60;
const cellSize = 10;
const shg = new SHG(width, height, cellSize);

for (let i = 0; i < 10; i++) {
  const [x, y] = [Math.random() * width, Math.random() * height];
  shg.set(i.toString(), x, y);
}

console.log(shg.query(40, 30, 10));
shg.update("1", 40, 30); // update item '1' position
console.log(shg.query(40, 30, 10));
shg.delete("1"); // delete item '1'
console.log(shg.query(40, 30, 10));
shg.clear(); // delete all items from grid
console.log(shg.query(40, 30, 10));
```

## License

MIT
npm package: @jgtools/textmesh
Description: TextMesh for Three JS that extends Mesh and uses TextGeometry
Author: Erik1001
Latest version: 1.0.2

# TextMesh

[![npm](https://img.shields.io/npm/v/@jgtools/textmesh)](https://www.npmjs.com/package/@jgtools/textmesh)
[![npm](https://img.shields.io/npm/dm/@jgtools/textmesh)](https://www.npmjs.com/package/@jgtools/textmesh)
[![GitHub](https://img.shields.io/github/license/jgtools/textmesh)](https://github.com/git/git-scm.com/blob/main/MIT-LICENSE.txt)

TextMesh for ThreeJS that extends Mesh and uses TextGeometry.

## Installation

### Using npm

```bash
npm i @jgtools/textmesh
```

```javascript
import TextMesh from "@jgtools/textmesh";
// ...
```

### Using cdn

```html
<script type="module">
    import TextMesh from "https://cdn.jsdelivr.net/npm/@jgtools/textmesh@1.0.0/dist/index.min.js";
    // ...
</script>
```

## Usage

```javascript
import { FontLoader } from "three/examples/jsm/loaders/FontLoader";
import TextMesh from "@jgtools/textmesh";

const loader = new FontLoader();
const font = await loader.loadAsync("font.json");

const mesh = new TextMesh(font);
mesh.setText("Hello World!");

// use it as a regular Mesh
scene.add(mesh);

// get text as string
const text = mesh.getText();
```

## License

MIT
npm package: @jgtvares/emoji-by-keyword
Description: Render an emoji by it's keyword
Author: @jgtvares
Latest version: 1.0.1

# emoji-by-keyword
If you want to render emojis in your app using keywords, this lib is for you! This lib is based on Apple emojis!

## Installing
```bash
npm install @jgtvares/emoji-by-keyword
```

## How to Use
```javascript
const { GetEmojiByKeyword } = require("@jgtvares/emoji-by-keyword");

const emoji = GetEmojiByKeyword(':joy:');

console.log(emoji);
// Output: { emoji: '😂', keyword: ':joy:' }
```

## How it works
With a list of emojis and a list of keywords, both the same size, the lib checks if the given keyword exists in keywords list, if the keyword is found it searches for an emoji at the correspondent index.

*It might not work with all keywords. The lists were manually synced to get the most emojis, but it is not perfect! Feel free to help me improve it!*

## License
MIT

## Developed by
- [jgtvares]('https://github.com/jgtvares')
npm package: @jguffey/react-mdl-extra
Description: React MDL Extra Components
Author: Bojan Hribernik
Latest version: 1.4.6

# React-MDL SelectField

Extra components for [React Material Design Lite](https://github.com/tleunen/react-mdl).

All components use a custom `Dropdown`, that uses [react-portal](https://github.com/tajo/react-portal) to render itself to document `body`, and [Tether](tether.io) for positioning.

## Installation

```
npm install --save react-mdl-extra
```

## Examples

https://hribb.github.io/react-mdl-extra/?down=0

```
git clone https://github.com/HriBB/react-mdl-extra
cd react-mdl-extra
npm install
npm run storybook
open http://localhost:9002/
```

## Usage

### Dropdown

```
import { Dropdown } from 'react-mdl-extra';

<Dropdown target={<Button>Open</Button>} align={'tl bl'} offset={'0 10px'}>
  <div className={'custom-menu'}>
    ...
  </div>
</Dropdown>
```

### SelectField

```
import { SelectField, Option } from 'react-mdl-extra';

<SelectField label={'Select me'} value={3}>
  <Option value={1}>One</Option>
  <Option value={2}>Two</Option>
  <Option value={3}>Three</Option>
  <Option value={4}>Four</Option>
  <Option value={5}>Five</Option>
</SelectField>
```

### MultiSelectField

```
import { MultiSelectField, Option } from 'react-mdl-extra';

<MultiSelectField label={'Select me many times'} value={[1,3]}>
  <Option value={1}>One</Option>
  <Option value={2}>Two</Option>
  <Option value={3}>Three</Option>
  <Option value={4}>Four</Option>
  <Option value={5}>Five</Option>
</MultiSelectField>
```

### Menu

```
import { Menu, MenuItem } from 'react-mdl-extra';

<Menu target={<Button raised>Open menu</Button>}>
  <MenuItem>One</MenuItem>
  <MenuItem>Two</MenuItem>
  <MenuItem>Three</MenuItem>
</Menu>
```

### AutoComplete

```
import { AutoComplete } from 'react-mdl-extra';

const items = [
  { id: 1, name: 'Darth Vader' },
  { id: 2, name: 'Luke Skywalker' },
  { id: 3, name: 'Obi Wan Kenobi' },
]

<AutoComplete
  label={'I will complete you'}
  items={items}
  valueIndex={'id'}
  dataIndex={'name'}
/>
```

## Positioning Dropdown

See [tether](http://tether.io/). Uses shorthand declaration. First two letter are the `attachment` property, followed by a space and second two letters, which are the `targetAttachment` property.

Examples:

**align="tl bl"**

Attach **t**op **l**eft edge of the dropdown to the **b**ottom **l**eft edge of the target.

**align="br tr"**

Attach **b**ottom **r**ight edge of the dropdown to the **t**op **r**ight edge of the target.

## TODO

- [x] Split Dropdown into a separate component
- [ ] Use native controls on mobile
- [ ] Improve AutoComplete on mobile
- [x] Improve styles and remove sass
- [x] Improve position declaration
- [x] Create `MultiSelectField`
- [x] Create `AutoCompleteField`
- [ ] Create `DatePickerField`
- [ ] Key and focus handling
- [ ] Add tests