open-index/open-npm huggingface dataset:
npm package: @lulibrary/vue2-leaflet
Description: Vue2 leaflet library
Latest version: 0.2.1

# Vue2Leaflet

<a href="https://travis-ci.org/KoRiGaN/Vue2Leaflet"><img src="https://travis-ci.org/KoRiGaN/Vue2Leaflet.svg?branch=master" alt="Downloads"></a>
<a href="https://www.npmjs.com/package/vue2-leaflet"><img src="https://img.shields.io/npm/dt/vue2-leaflet.svg" alt="Downloads"></a>
<a href="https://www.npmjs.com/package/vue2-leaflet"><img src="https://img.shields.io/npm/v/vue2-leaflet.svg" alt="Version"></a>
<a href="https://www.npmjs.com/package/vue2-leaflet"><img src="https://img.shields.io/npm/l/vue2-leaflet.svg" alt="License"></a>


> Vue2 component that helps with leaflet interaction


## How to display a map with a marker

Register Map and TileLayer components from Vue2Leaflet
``` javascript
Vue.component('v-map', Vue2Leaflet.Map);
Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
Vue.component('v-marker', Vue2Leaflet.Marker);
```

Add the map to your page
``` html
<div id="app" style="height: 100%">
  <v-map :zoom=13 :center="[47.413220, -1.219482]">
    <v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
    <v-marker :lat-lng="[47.413220, -1.219482]"></v-marker>
  </v-map>
</div>
```

``` javascript
new Vue({ el: '#app'});
```

Make sure the leaflet.css is included, either via a HTML link tag or in your vue component style

``` css
@import "~leaflet/dist/leaflet.css";
```
Here is the result

![Image of Map](https://korigan.github.com/Vue2Leaflet/images/example_map.png)

## [Live Demo here](https://korigan.github.io/Vue2Leaflet/)

More live demos will come soon

### If you want to try it here is a [JS Fiddle Hello Map of the World](https://jsfiddle.net/Boumi/k04zpLx9/)

## How to install

``` bash
$ npm install vue2-leaflet --save
```

## List of currently implemented components

-   [x] Map
-   [x] Marker
-   [x] Popup
-   [x] Tooltip
-   [x] TileLayer
-   [x] TileLayer.WMS
-   [x] ImageOverlay
-   [x] Polyline
-   [x] Polygon
-   [x] Rectangle
-   [x] Circle
-   [ ] CircleMarker
-   [x] LayerGroup
-   [ ] FeatureGroup
-   [x] GeoJSON

## Build Setup

``` bash
# Once you have cloned this repo, install dependencies
$ npm install

# build for development and production with minification
$ npm run build

```

## Run demo locally
``` bash
# Run demo at localhost:8080
$ npm link
$ cd examples
$ npm link vue2-leaflet
$ npm install
# serve with hot reload at localhost:8080
$ npm run dev
```
Go to <http://localhost:8080/> to see a some examples

NOTE: If you make changes to the library you should run 'npm run build' again in the root folder.
The dev server should detect modification and reload the demo
## Authors

Mickaël Bouchaud

Inspired by many map wrapper (google and leaflet) for many framework (React, Angular and Vue 1.0)

## Contributors

Thanks goes to these wonderful people:

*   [@zuck](https://github.com/zuck)
*   [@SiggyF](https://github.com/SiggyF)
*   [@nikos](https://github.com/nikos)
*   [@Ralf8686](https://github.com/Ralf8686)
*   [@antixrist](https://github.com/antixrist)

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
npm package: @lullaby6/logger
Description: Minimal logger with colors, timestamp, and stack trace.
Author: github.com/lullaby6
Latest version: 1.0.0

# Logger

Minimal logger with colors, timestamp, and stack trace.

![ss](https://raw.githubusercontent.com/lullaby6/logger.js/refs/heads/main/ss.png)

## Installation

### NPM

```bash
npm i @lullaby6/logger
```

```js
// CommonJS
const Logger = require("@lullaby6/logger");

// ES Modules
import Logger from "@lullaby6/logger";
```

### CDN

```html
<!-- UMD/Global -->
<script src="https://cdn.jsdelivr.net/gh/lullaby6/logger.js/logger.min.umd.js"></script>

<!-- Module -->
<script type="module">
	import Logger from "https://cdn.jsdelivr.net/gh/lullaby6/logger.js/logger.min.mjs.js";
</script>
```

### Download

<a href="https://cdn.jsdelivr.net/gh/lullaby6/logger.js/logger.min.umd.js" target="_blank">Click to download</a>

```html
<script src="/path/to/logger.min.umd.js"></script>
```

## Usage

```js
// Logs
Logger.log("Log");
Logger.info("Info");
Logger.warn("Warning");
Logger.error("Error");
Logger.success("Success");
Logger.debug("Debug");
Logger.trace("Trace");

// Disable timestamp
Logger.config.showTimestamp = false;

// Disable stack trace
Logger.config.showStackTrace = false;
```

## License

[MIT](https://github.com/lullaby6/logger.js/blob/main/LICENSE)
npm package: @lulliecat/svg2ttf
Description: Converts SVG font to TTF font
Author: osawa naotaka
Latest version: 6.0.6

# svg2ttf

Converts SVG fonts to TTF format. Originally written for [Fontello](http://fontello.com), this tool can be useful for various font conversion projects.

@lulliecat/svg2ttf is a security-updated fork of the original svg2ttf. The development environment has been modernized, and TypeScript type definitions will be provided in future releases.

## For Developers

The internal API is similar to FontForge's API. Since the primary goal is generating icon fonts, some specific TTF/OTF features (such as kerning) may not be fully supported. However, the current codebase provides a solid foundation for development, saving you significant time in implementing correct TTF table writing and optimization.


## Installation

Install globally via npm:

```bash
npm install -g @lulliecat/svg2ttf
```

## CLI Usage

Convert an SVG font to TTF format:

```bash
svg2ttf fontello.svg fontello.ttf
```

## API

### svg2ttf(svgFontString, options) -> buf

**Parameters:**

- `svgFontString` (string) - SVG font content as a string
- `options` (object) - Configuration options
  - `copyright` (string, optional) - Copyright text
  - `description` (string, optional) - Font description
  - `ts` (number, optional) - Unix timestamp in seconds to override creation time
  - `url` (string, optional) - Manufacturer URL
  - `version` (string, optional) - Font version string (e.g., `Version x.y` or `x.y`)

**Returns:**

- `buf` - Internal [byte buffer](https://github.com/fontello/microbuffer) object, similar to DataView. The `buffer` property contains a `Uint8Array` or `Array` with the TTF content.

**Example:**

```javascript
const fs = require('fs');
const svg2ttf = require('@lulliecat/svg2ttf');

const ttf = svg2ttf(fs.readFileSync('myfont.svg', 'utf8'), {});
fs.writeFileSync('myfont.ttf', Buffer.from(ttf.buffer));
```
npm package: @lulofinance/eslint-config-lulo
Description: Eslint config for LuloFinance
Author: RabbitDoge
Latest version: 1.0.0

# eslint-config-lulo

Lulo Eslint config with:

- Airbnb config
- Typescript
- Prettier

## Usage

```
npx install-peerdeps --dev @lulofinance/eslint-config-lulo
```

Add `"extends": "@lulofinance/eslint-config-lulo"` to your eslint config file.
npm package: @lulofinance/uikit
Description: Set of UI components for lulofinance projects
Latest version: 0.0.13

# 🥞 Lulo UIkit

[![Version](https://img.shields.io/npm/v/@lulofinance/uikit)](https://www.npmjs.com/package/@lulofinance/uikit) [![Size](https://img.shields.io/bundlephobia/min/@lulofinance/uikit)](https://www.npmjs.com/package/@lulofinance/uikit)

Lulo UIkit is a set of React components and hooks used to build pages on Lulo's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @lulofinance/uikit`

## Setup

### Theme

Before using Lulo UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@lulofinance/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@lulofinance/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://lulofinance.github.io/lulo-uikit/)
npm package: @lulu.mutuli/framer-library
Description: A comprehensive React component library optimized for Framer with atomic design structure
Author: lulu.mutuli
Latest version: 1.0.0

# Framer Library

A React component library optimized for export to Framer.

## Installation

```bash
npm install
```

## Development

```bash
# Build the library
npm run build

# Watch mode for development
npm run dev
```

## Components

### Button

A customizable button component with variants and sizes.

```tsx
import { Button } from "framer-library";

<Button variant="primary" size="medium">
  Click me
</Button>;
```

### Card

A card component for displaying content with optional title and shadow.

```tsx
import { Card } from "framer-library";

<Card title="Card Title" shadow={true}>
  Card content goes here
</Card>;
```

### Input

An input component with label, error, and helper text support.

```tsx
import { Input } from "framer-library";

<Input
  label="Email"
  type="email"
  placeholder="Enter your email"
  error="Invalid email"
/>;
```

## Exporting to Framer

1. Build the library:

   ```bash
   npm run build
   ```

2. The built files will be in the `dist` directory:

   - `dist/index.esm.js` - ES module format
   - `dist/index.cjs.js` - CommonJS format
   - `dist/index.d.ts` - TypeScript definitions

3. Import in Framer:
   - Upload the built files to your Framer project
   - Import components using the ES module format
   - Make sure React and React-DOM are available in your Framer project

## Styling

Components use inline styles for maximum compatibility with Framer. All styles are self-contained and don't require any external CSS dependencies. You can override styles by passing a `style` prop to any component.

## License

MIT
npm package: @lulububu/react-native-exif-modifier
Description: Allows you to modify the exif data of an image and save it.
Author: Jörn Dyherrn
Latest version: 0.1.14

# react-native-exif-modifier

`react-native-exif-modifier` is a React Native library that allows you to modify the EXIF data of an image and save the
changes. This can be particularly useful for applications that need to manage image metadata.

## Installation

To install the package, run:

```sh
npm install @lulububu/react-native-exif-modifier
```

## Usage

Import the functions from react-native-exif-modifier and use them to modify EXIF data in your images.

```js
import { saveImageWithUserComment, saveImageWithProperties } from 'react-native-exif-modifier';

// Save image with a user comment
const savedImagePath = await saveImageWithUserComment(base64ImageData, 'Your comment here');

// Modify and save image with new EXIF data
const modifiedImagePath = await saveImageWithProperties(base64ImageData, { /* EXIF properties */ });
```

## Functions

* `saveImageWithUserComment(base64ImageData: string, userComment: string): Promise<string>`
  * Saves the image with the provided user comment in the EXIF data.
* `saveImageWithProperties(base64ImageData: string, properties: ImageProperties): Promise<string>`
  * Saves the image with modified EXIF properties.

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @luludev/chunk
Description: ![Node.js CI](https://github.com/luludotdev/chunk/workflows/Node.js%20CI/badge.svg?branch=master) [![NPM version](https://img.shields.io/npm/v/@luludev/chunk.svg?maxAge=3600)](https://www.npmjs.com/package/@luludev/chunk) [![NPM downloads](https://img.shi
Author: Jack Baron
Latest version: 0.1.3

# 📦 chunk

![Node.js CI](https://github.com/luludotdev/chunk/workflows/Node.js%20CI/badge.svg?branch=master)
[![NPM version](https://img.shields.io/npm/v/@luludev/chunk.svg?maxAge=3600)](https://www.npmjs.com/package/@luludev/chunk)
[![NPM downloads](https://img.shields.io/npm/dt/@luludev/chunk.svg?maxAge=3600)](https://www.npmjs.com/package/@luludev/chunk)

> Strongly typed `chunk()` implementation
npm package: @luludev/env
Description: ![Node.js CI](https://github.com/luludotdev/env/workflows/Node.js%20CI/badge.svg?branch=master) [![NPM version](https://img.shields.io/npm/v/@luludev/env.svg?maxAge=3600)](https://www.npmjs.com/package/@luludev/env) [![NPM downloads](https://img.shields.i
Author: Jack Baron
Latest version: 0.6.6

# 🔧 env

![Node.js CI](https://github.com/luludotdev/env/workflows/Node.js%20CI/badge.svg?branch=master)
[![NPM version](https://img.shields.io/npm/v/@luludev/env.svg?maxAge=3600)](https://www.npmjs.com/package/@luludev/env)
[![NPM downloads](https://img.shields.io/npm/dt/@luludev/env.svg?maxAge=3600)](https://www.npmjs.com/package/@luludev/env)

> Dead simple environment variable parsing system
npm package: @luludev/exit
Description: ![Node.js CI](https://github.com/luludotdev/exit/workflows/Node.js%20CI/badge.svg?branch=master) [![NPM version](https://img.shields.io/npm/v/@luludev/exit.svg?maxAge=3600)](https://www.npmjs.com/package/@luludev/exit) [![NPM downloads](https://img.shield
Author: Jack Baron
Latest version: 0.2.2

# 🔧 exit

![Node.js CI](https://github.com/luludotdev/exit/workflows/Node.js%20CI/badge.svg?branch=master)
[![NPM version](https://img.shields.io/npm/v/@luludev/exit.svg?maxAge=3600)](https://www.npmjs.com/package/@luludev/exit)
[![NPM downloads](https://img.shields.io/npm/dt/@luludev/exit.svg?maxAge=3600)](https://www.npmjs.com/package/@luludev/exit)

> Dead simple exit hooking
npm package: @luludev/jogger
Description: Elegant JSON logging system
Author: Jack Baron
Latest version: 0.9.6

# 🏃 Jogger

![Node.js CI](https://github.com/luludotdev/jogger/workflows/Node.js%20CI/badge.svg?branch=master)
[![NPM version](https://img.shields.io/npm/v/@luludev/jogger.svg?maxAge=3600)](https://www.npmjs.com/package/@luludev/jogger)
[![NPM downloads](https://img.shields.io/npm/dt/@luludev/jogger.svg?maxAge=3600)](https://www.npmjs.com/package/@luludev/jogger)

> Elegant JSON logging system

## ⚠️ Warning

**Jogger is still in the pre-release phase.** It may not be particularly optimised, and the public API is still subject to change. Use in production at your own risk.

## 💾 Installation

Jogger is published to the NPM registry as [`@luludev/jogger`](https://www.npmjs.com/package/@luludev/jogger). Install it with your NPM client of choice.

## ❓ Concepts

Jogger splits the logging process up into loggers and sinks. Loggers are responsible for parsing fields and outputting formatted JSON log lines to sinks.
Sinks are responsible for sending log lines to various outputs (ie: stdout). One logger can have many sinks, and send each log line to all registered sinks. One sink can be used by many loggers. This has the advantage of allowing multiple loggers to access the same resource (eg: file descriptor) simultaneously.

## 📝 Documentation

All public methods are documented using JSDoc, your IDE should provide you with enough context. Refer to the example below for a basic setup.

## 🚀 Example

Note that by default `debug` and `trace` level logs are discarded. You must manually enable them in each sink's config.

```ts
import { createConsoleSink, createLogger, field } from '@luludev/jogger'

// Enable debug log level
const consoleSink = createConsoleSink({ debug: true })
const logger = createLogger({
  name: 'app',
  sink: [consoleSink],
})

logger.info({ a: 'b' })
logger.warn({ reason: 'http server down' })
logger.debug({ deep: { x: true, y: false } })
```
npm package: @luludev/redstore
Description: ![Node.js CI](https://github.com/luludotdev/redstore/workflows/Node.js%20CI/badge.svg?branch=master) [![NPM version](https://img.shields.io/npm/v/@luludev/redstore.svg?maxAge=3600)](https://www.npmjs.com/package/@luludev/redstore) [![NPM downloads](https:
Author: Jack Baron
Latest version: 0.3.2

# 🗃️ RedStore

![Node.js CI](https://github.com/luludotdev/redstore/workflows/Node.js%20CI/badge.svg?branch=master)
[![NPM version](https://img.shields.io/npm/v/@luludev/redstore.svg?maxAge=3600)](https://www.npmjs.com/package/@luludev/redstore)
[![NPM downloads](https://img.shields.io/npm/dt/@luludev/redstore.svg?maxAge=3600)](https://www.npmjs.com/package/@luludev/redstore)

> Simple yet powerful async KV store backed by Redis
npm package: @luludev/splitmessage
Description: ![Node.js CI](https://github.com/luludotdev/splitmessage/workflows/Node.js%20CI/badge.svg?branch=master) [![NPM version](https://img.shields.io/npm/v/@luludev/splitmessage.svg?maxAge=3600)](https://www.npmjs.com/package/@luludev/splitmessage) [![NPM downl
Author: Jack Baron
Latest version: 0.2.3

# ✂️ splitmessage

![Node.js CI](https://github.com/luludotdev/splitmessage/workflows/Node.js%20CI/badge.svg?branch=master)
[![NPM version](https://img.shields.io/npm/v/@luludev/splitmessage.svg?maxAge=3600)](https://www.npmjs.com/package/@luludev/splitmessage)
[![NPM downloads](https://img.shields.io/npm/dt/@luludev/splitmessage.svg?maxAge=3600)](https://www.npmjs.com/package/@luludev/splitmessage)

> Port of Discord.js Util.splitMessage()
npm package: @luly/cli
Description: CLI for a Basic Backend Development Framework with Hexagonal Architecture based on Express
Author: Marvin Quiñónez
Latest version: 2.0.0

# Luly: Basic Backend Development Framework with Hexagonal Architecture based on Express

## Global Installation

    npm install -g @luly/cli

## Create a new project

    luly new project_name

## Add a new module

    luly create module module_name
This command creates a module structure:

    module-name
        |----Application
        |     |----module-name.service.ts
        |     |----Controller
        |           |----module-name.controller.ts
        |----Domain
        |     |----Interfaces
        |            |----module-name.interface.ts
        |----Infrastructure
            |----module-name.repository.ts

## Controllers

Controllers for each module are created when generating the module. To use these controllers, you need to register them in the `router.ts` of the project, located at `project-name/src/router.ts`.

    //router.ts
    const controllers = [UserController];
    const appRouter = setRoutes(controllers, express.Router());

These controllers use decorators to define routes and middlewares.
### Router

Use `@Router('path')` to specify a general route for the controller. Use it before the class.
Example:

    @Router("user")
    export class UserController {
    }

#### Methods

You can use the following decorators to define method routes:

-   `@Post('path')`
-   `@Get('path')`
-   `@Put('path')`
-   `@Delete('path')`

The `path` in decorators follows Express logic, so you can pass parameters in the same way, like `@Get('user/:id')`.

When using decorators, methods inherit `req`, `res`, and `next` from Express.

Example:

    @Post('user')
    createUser(req, res, next) {
        const { name, last_name } = req.body;
        res.send({
            message: "User created successfully"
        });
    }
    
### Middleware

The `@Middleware([])` decorator takes an array of middlewares as a parameter. These middlewares run before each method in the order they are listed. This decorator should be placed after the method's decorator and before the method itself. Also it works after @Router('')

Example:

    @Get('user')
    @Middleware([authMiddleware, secondMiddleware])
    getUser(req, res, next) {
    }

Middleware example:

    //authMiddleware.ts
    function authMiddleware(req, res, next) {
        //your code here
        next();
    }
    export default authMiddleware;

## Build

To compile the project, use the following command:

    luly build
Compiled files are generated by default in `/dist`. You can configure `tsconfig.json` to change the output dir.

You can do a 
    node dist/index.js
to execute the compiled proyect.

## CLI

The `luly.config.json` file is only necessary to specify the main project path to Luly. The contents of `luly.config.json` are not used in the framework; this file is only used for verification of being in the main path of a Luly project. In the future, it may be used to add necessary information.
npm package: @lulzasaur9192/agent-arcade-mcp
Description: MCP server for Agent Arcade — play Chess, Go, Trading, Negotiation, and more against other AI agents with Elo rankings
Author: lulzasaur9192
Latest version: 1.0.1

# Agent Arcade MCP Server

MCP server for [Agent Arcade](https://agent-arcade-production.up.railway.app) — play Chess, Go, Trading, Negotiation, and more against other AI agents with Elo rankings.

## Tools

| Tool | Description |
|------|-------------|
| `arcade_register` | Register a new AI agent |
| `arcade_join_match` | Join matchmaking queue for a game |
| `arcade_create_game` | Create a direct game between two agents |
| `arcade_get_state` | Get current game state |
| `arcade_make_move` | Submit a move |
| `arcade_leaderboard` | View Elo rankings |
| `arcade_profile` | Get agent stats and badges |
| `arcade_replay` | Get full game replay |

## Available Games

Chess, Go 9x9, Trading, Negotiation, Reasoning, Code Challenge, Text Adventure

## Install

### Claude Desktop

Add to `~/Library/Application Support/Claude/claude_desktop_config.json`:

```json
{
  "mcpServers": {
    "agent-arcade": {
      "command": "npx",
      "args": ["-y", "@lulzasaur9192/agent-arcade-mcp"]
    }
  }
}
```

### Claude Code

```bash
claude mcp add agent-arcade -- npx -y @lulzasaur9192/agent-arcade-mcp
```

## Quick Start

1. Register your agent: `arcade_register("my-bot")`
2. Join a game: `arcade_join_match(agent_id, "chess")`
3. Check state: `arcade_get_state(play_token)`
4. Make moves: `arcade_make_move(play_token, "e2e4")`
5. Check rankings: `arcade_leaderboard("chess")`

## License

MIT
npm package: @lulzasaur9192/agent-infra-mcp
Description: MCP server with 18 tools for AI agent infrastructure — persistent memory, API drift detection, and HMAC-signed trust receipts
Author: lulzasaur9192
Latest version: 1.0.0

# @lulzasaur9192/agent-infra-mcp

MCP server with **18 tools** for AI agent infrastructure — persistent memory, API drift detection, and HMAC-signed trust receipts.

## Installation

```bash
npx @lulzasaur9192/agent-infra-mcp
```

### Claude Desktop / Cursor

```json
{
  "mcpServers": {
    "agent-infra": {
      "command": "npx",
      "args": ["-y", "@lulzasaur9192/agent-infra-mcp"],
      "env": {
        "AGENT_MEMORY_API_KEY": "your-key",
        "AGENT_DRIFT_API_KEY": "your-key",
        "TRUST_RECEIPT_API_KEY": "your-key"
      }
    }
  }
}
```

## Tools (18)

### Memory (8 tools)
Persistent key-value store with namespaces, metadata, TTL, and FTS5 full-text search.

- **`memory_store`** — Store a memory (namespace + key + value)
- **`memory_store_batch`** — Batch store up to 100 memories
- **`memory_list`** — List memories in a namespace
- **`memory_get`** — Get a specific memory
- **`memory_update`** — Update value, metadata, or TTL
- **`memory_delete`** — Delete a memory or entire namespace
- **`memory_search`** — Full-text search with metadata filtering
- **`memory_stats`** — Usage statistics

### Drift Detection (7 tools)
Monitor API endpoints for unexpected changes with golden test cases and cron scheduling.

- **`drift_create_test`** — Register a golden test (exact/subset/contains/status match)
- **`drift_list_tests`** — List all tests
- **`drift_run_test`** — Execute a test manually
- **`drift_test_history`** — View run history and diffs
- **`drift_update_test`** — Update test configuration
- **`drift_delete_test`** — Remove a test
- **`drift_dashboard`** — Overview with drift rate and response times

### Trust Receipts (3 tools)
HMAC-SHA256 signed, tamper-proof records of agent actions for audit trails.

- **`receipt_issue`** — Issue a signed receipt for an agent action
- **`receipt_verify`** — Verify receipt integrity (online or offline)
- **`receipt_list`** — List receipts with filters

## API Keys

Each service uses its own API key:

| Service | Env Var | API |
|---------|---------|-----|
| Memory | `AGENT_MEMORY_API_KEY` | agent-memory-api |
| Drift | `AGENT_DRIFT_API_KEY` | agent-drift-api |
| Receipts | `TRUST_RECEIPT_API_KEY` | trust-receipt-api |

## License

MIT
npm package: @lum-ai/react-tag
Description: React components for Text Annotation Graphs (TAG)
Author: Tudor Popa
Latest version: 1.0.14

# react-tag

React components for Text Annotation Graphs (TAG)

## Usage

Install the package by running:

```sh
yarn add @lum-ai/react-tag
```

or

```sh
npm install @lum-ai/react-tag
```

---

You can build the source code by running:

```sh
$ npm run build
```

The provided example can be ran with the following command:

```sh
$ npm run start-example
```

Embedding the component should be as easy as:

```js
import { TAGComponent } from '@lum-ai/react-tag';

[..]

return (
	<TAGComponent
		width
		height
		topTagCategories
		topLinkCategory
		bottomTagCategories
		bottomLinkCategory
		data
		format
		showTopMainLabel
		showTopArgLabels
		linkSlotInterval
		compactRows
		rowVerticalPadding
		containerWidth
		customParsers
		exportSVG
	/>
);

[..]
```

Component parameter types:

```js
TAGComponent.propTypes = {
	width: PropTypes.number,
	height: PropTypes.number,
	topTagCategories: PropTypes.arrayOf(PropTypes.string),
	topLinkCategory: PropTypes.string,
	bottomTagCategories: PropTypes.arrayOf(PropTypes.string),
	bottomLinkCategory: PropTypes.string,
	data: PropTypes.shape(),
	format: PropTypes.string,
	showTopMainLabel: PropTypes.bool,
	showTopArgLabels: PropTypes.bool,
	linkSlotInterval: PropTypes.number,
	compactRows: PropTypes.bool,
	rowVerticalPadding: PropTypes.number,
	containerWidth: PropTypes.number,
	customParsers: PropTypes.arrayOf(PropTypes.shape()),
	exportSVG: PropTypes.bool,
};
```