open-index/open-npm huggingface dataset:
npm package: @monoceros/plugin-reverse-scroll
Description: Reverse scroll plugin for @monoceros
Author: FollyWolly
Latest version: 1.0.2

# @monoceros/plugin-reverse-scroll

> Plugin that reverses the scroll direction within a monoceros section

* * *

## Table of contents

- [Install](#install)
  - [NPM](#npm)
- [Usage](#usage)
  - [With options](#with-options)
  - [HTML setup](#html-setup)
- [License](#license)

## Install

### NPM

```bash
npm install @monoceros/plugin-reverse-scroll
```

* * *

## Usage

```js
import Monoceros from 'monoceros'
import ReverseScrollPlugin from '@monoceros/plugin-reverse-scroll'
Monoceros
  .use(ReverseScrollPlugin)
  .init()
```

### With options

```js
import Monoceros from 'monoceros'
import ReverseScrollPlugin from '@monoceros/plugin-reverse-scroll'
Monoceros
  .use(ReverseScrollPlugin, { speed: 0.5 })
  .init()
```

#### Options

| Property | Type      | Default | Description                                                                       |
| -------- | --------- | ------- | --------------------------------------------------------------------------------- |
| `debug`  | `boolean` | `false` | Controls wether or not ReverseScrollPlugin will output debug logs to the console. |
| `speed`  | `number`  | `1`     | Scroll speed. Should be beteen 0 and 1. The lower, the slower.                    |
| `base`   | `object`  | _base_  | Selector and classnames use this value to generate with.                          |

##### Base object

```js
{
  reverse: 'reverse'
}
```

### HTML setup

- `[data-monoceros-reverse]` <sup>(required)</sup> - Reverse scroll section. Must be placed within a `[data-monoceros-section]` element.

> **Note**: To truly see the reverse scroll effect, elements within the `[data-monoceros-reverse]` element should be larger than 100vh combined.

```html
<style>
  section {
    height: 100vh;
  }
</style>
<body>
  <div data-monoceros-viewport>
    <section>Before reverse scroll</section>

    <div data-monoceros-section>
      <div data-monoceros-reverse>
        <section>End reverse scroll</section>
        <section>Just a little further....</section>
        <section>Keep scrolling...</section>
        <section>Start reverse scroll</section>
      </div>
    </div>

    <section>After reverse scroll</section>
  </div>
</body>
```

* * *

## License

[MIT](license) @ [Folkert-Jan van der Pol](https://folkertjan.nl)
npm package: @monochromechameleon/clog
Description: Consistent changelog edit utility
Author: Hugh Greenish @MonochromeChameleon
Latest version: 0.0.2

clog
======

Consistent changelog edit utility

[![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io)
[![Version](https://img.shields.io/npm/v/clog.svg)](https://npmjs.org/package/@monochromechameleon/clog)
[![Downloads/week](https://img.shields.io/npm/dw/clog.svg)](https://npmjs.org/package/@monochromechameleon/clog)
[![License](https://img.shields.io/npm/l/clog.svg)](https://github.com/MonochromeChameleon/clog/blob/master/package.json)

<!-- toc -->
* [Usage](#usage)
* [Commands](#commands)
<!-- tocstop -->
# Usage
<!-- usage -->
```sh-session
$ npm install -g @monochromechameleon/clog
$ clog COMMAND
running command...
$ clog (-v|--version|version)
@monochromechameleon/clog/0.0.2 darwin-x64 node-v16.8.0
$ clog --help [COMMAND]
USAGE
  $ clog COMMAND
...
```
<!-- usagestop -->
# Commands
<!-- commands -->
* [`clog `](#clog-)
* [`clog add`](#clog-add)
* [`clog change`](#clog-change)
* [`clog help [COMMAND]`](#clog-help-command)
* [`clog init`](#clog-init)
* [`clog reformat`](#clog-reformat)
* [`clog release SEMVER`](#clog-release-semver)
* [`clog remove`](#clog-remove)

## `clog `

Note unreleased changes in your changelog file

```
USAGE
  $ clog
```

_See code: [src/commands/index.js](https://github.com/MonochromeChameleon/clog/blob/v0.0.2/src/commands/index.js)_

## `clog add`

Note unreleased additions in your changelog file

```
USAGE
  $ clog add
```

_See code: [src/commands/add.js](https://github.com/MonochromeChameleon/clog/blob/v0.0.2/src/commands/add.js)_

## `clog change`

Note unreleased changes in your changelog file

```
USAGE
  $ clog change
```

_See code: [src/commands/change.js](https://github.com/MonochromeChameleon/clog/blob/v0.0.2/src/commands/change.js)_

## `clog help [COMMAND]`

display help for clog

```
USAGE
  $ clog help [COMMAND]

ARGUMENTS
  COMMAND  command to show help for

OPTIONS
  --all  see all commands in CLI
```

_See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v3.2.3/src/commands/help.ts)_

## `clog init`

Create a new changelog file

```
USAGE
  $ clog init
```

_See code: [src/commands/init.js](https://github.com/MonochromeChameleon/clog/blob/v0.0.2/src/commands/init.js)_

## `clog reformat`

Reformat the changelog

```
USAGE
  $ clog reformat
```

_See code: [src/commands/reformat.js](https://github.com/MonochromeChameleon/clog/blob/v0.0.2/src/commands/reformat.js)_

## `clog release SEMVER`

Update the changelog file to include all unreleased changes in a new release

```
USAGE
  $ clog release SEMVER

ARGUMENTS
  SEMVER  (major|minor|patch) the semver level to increment the release by
```

_See code: [src/commands/release.js](https://github.com/MonochromeChameleon/clog/blob/v0.0.2/src/commands/release.js)_

## `clog remove`

Note unreleased removals in your changelog file

```
USAGE
  $ clog remove
```

_See code: [src/commands/remove.js](https://github.com/MonochromeChameleon/clog/blob/v0.0.2/src/commands/remove.js)_
<!-- commandsstop -->
npm package: @monocircuit/utils
Description: A repository that contains data structures, algorithms and more.
Author: lukasdiegelmann
Latest version: 1.3.1

<!-- @format -->

# Utils

<p align="center">
    <a href="https://www.npmjs.com/package/@monocircuit/utils" alt="NPM Package">
        <img src="https://img.shields.io/npm/v/@monocircuit/utils"/>
    </a>
    <a href="https://github.com/monocircuit/utils/actions/workflows/main.yml" alt="Build Status">
        <img src="https://img.shields.io/github/workflow/status/monocircuit/utils/CI"/>
    </a>
</p>

## What is this package?

This package is supposed to **grow over time** as more and more projects are going to be developed
at **MonoCircuit**. Everything that is common among these and other projects (since this project is
**open source**) will be put in here.

It is important to note that **this is not a full time** project. It just serves as a _common
codebase_ for lines that have the <u>high potential</u> to be rewritten very often.

## What does it contain?

### Data Structures

- 🔘 `Node`
- 🔗 `LinkedList`
- 📚 `Stack`
- 🐍 `Queue`

### Others

- ⚖️ `Comparator`

## Further Information

Some of the code might be spliced from other repositories like
[trekhleb/javascript-algorithms](https://github.com/trekhleb/javascript-algorithms), which is a
great source for all kinds of data structures and algorithms.

That is why here is a hopefully full list of sources that were used to create this repository:

### Sources

- `trekhleb/javascript-algorithms`: https://github.com/trekhleb/javascript-algorithms
npm package: @monocloud/management-core
Description: MonoCloud Management JavaScript Core Library
Author: MonoCloud
Latest version: 0.2.4

<div align="center">
  <a href="https://www.monocloud.com?utm_source=github&utm_medium=management_js" target="_blank" rel="noopener noreferrer">
    <picture>
      <img src="https://raw.githubusercontent.com/monocloud/management-js/refs/heads/main/banner.svg" alt="MonoCloud Banner">
    </picture>
  </a>
  <div align="right">
    <a href="https://www.npmjs.com/package/@monocloud/management" target="_blank">
      <img src="https://img.shields.io/npm/v/@monocloud/management" alt="NPM" />
    </a>
    <a href="https://opensource.org/licenses/MIT" target="_blank">
      <img src="https://img.shields.io/:license-MIT-blue.svg?style=flat" alt="License: MIT" />
    </a>
    <a href="https://github.com/monocloud/management-js/actions/workflows/build.yml" target="_blank">
      <img src="https://github.com/monocloud/management-js/actions/workflows/build.yml/badge.svg" alt="Build Status" />
    </a>
  </div>
</div>

## Introduction

**MonoCloud Management SDK for JavaScript – programmatically manage apps, policies, configurations, users, and groups via the MonoCloud Management APIs.**

[MonoCloud](https://www.monocloud.com?utm_source=github&utm_medium=management_js) is a modern, developer-friendly Identity & Access Management platform.

This SDK provides a full-featured, typed JavaScript client for interacting with the **MonoCloud Management APIs**, allowing you to automate tenant administration programmatically.

> [!WARNING]
> This is a supporting library for [@monocloud/management](https://www.npmjs.com/package/@monocloud/management).

## 📘 Documentation

- **Documentation:** [https://www.monocloud.com/docs](https://www.monocloud.com/docs?utm_source=github&utm_medium=management_js)
- **Management API SDK Docs:** [https://www.monocloud.com/docs/apis/management](https://www.monocloud.com/docs/apis/management?utm_source=github&utm_medium=management_js)
- **API Reference:** [https://monocloud.github.io/management-js](https://monocloud.github.io/management-js?utm_source=github&utm_medium=management_js)

## Supported Platforms

- **Node.js >= 11.0.0**

## 🤝 Contributing & Support

### Issues & Feedback

- Use **GitHub Issues** for bug reports and feature requests.
- For tenant or account-specific help, contact MonoCloud Support through your dashboard.

### Security

Do **not** report security issues publicly. Please follow the contact instructions at: [https://www.monocloud.com/contact](https://www.monocloud.com/contact?utm_source=github&utm_medium=management_js)

## 📄 License

Licensed under the **MIT License**. See the included [`LICENSE`](https://github.com/monocloud/management-js/blob/main/LICENSE) file.
npm package: @monodog/dashboard
Description: React dashboard for monodog monorepo management
Latest version: 1.1.3

# Monodog: Monorepo Health Dashboard (Frontend)

## 🎯 Overview

This is the **client-side application** designed to consume data from the **Monorepo Analytics and Health API** backend service.
It provides a **real-time, visual dashboard** for tracking the health, dependencies, and overall status of all packages within the monorepo.

---

## 🛠 Technology Stack

| Component         | Technology                    | Description                                                           |
| ----------------- | ----------------------------- | --------------------------------------------------------------------- |
| **Framework**     | React (Functional Components) | Core library for building the user interface.                         |
| **Styling**       | Tailwind CSS                  | Utility-first framework for responsive, modern, and aesthetic design. |
| **Data Fetching** | Fetch API (Native JavaScript) | Handles communication with the backend Express API.                   |
| **Icons**         | Lucide React                  | Simple, clean vector icons for visualization.                         |

---

## ⚙️ Prerequisites

To run this application, ensure the following:

- **Node.js** and a package manager (`npm`, `yarn`, or `pnpm`) are installed.
- The **Monorepo Analytics API** backend service is running and accessible.
  - Default backend URL: **http://localhost:4000**

---

## 🚨 API Connection Details

The dashboard connects to the backend API using the following base URL:

```javascript
const API_BASE_URL = 'http://localhost:4000/api';

# Install dependencies (if not already installed)
pnpm install

pnpm run dev

```

## 🚀 Getting Started

### Installation

Clone the repository and install the dependencies:

```bash
# Clone the repository
git clone https://github.com/lakinmindfire/MonoDog.git
cd apps/dashboard

# Install dependencies
pnpm install

# build
pnpm run build

# run dashboard
pnpm run dev
```
npm package: @monodon/rust
Description: A Nx plugin that adds support for Cargo and Rust in your Nx workspace.
Latest version: 2.3.0

# @monodon/rust

A Nx plugin that adds support for Cargo and Rust in your Nx workspace.

## Compatibility Chart
|@monodon/rust|nx|
|---|---
|<=1.2.1|<=17.1.0|
|>=1.3.0|>=17.1.0|


## Getting Started

### Prerequisites
The following tools need to be installed on your system to take full advantage of `@monodon/rust`
* Node (LTS)
* Rust / Cargo via [https://rustup.rs](https://rustup.rs)

### Install with `npx create-nx-workspace` preset
To bootstrap a new workspace with `@monodon/rust` installed and ready, run:

```shell
npx create-nx-workspace --preset=@monodon/rust
```

### Installation in already set up workspace
Use your favourite package manager to install in your project:

```shell
yarn add -D @monodon/rust
```

```shell
npm install -D @monodon/rust
```

```shell
pnpm add -D @monodon/rust
```

#### Initialization

After installing, you can run any of the project generators (binary, library) to have @monodon/rust set up Cargo in your workspace.

## Generators
Use Nx Console to see the full list of options for each generator.

### `@monodon/rust:binary`
Creates a Rust binary application to be run independently.

> Create a new binary:
> ```shell
> nx generate @monodon/rust:binary my-rust-app
> ```

### `@monodon/rust:library`
Creates a Rust library that can be used in binaries, or compiled to be used for napi.

> Create a new library:
> ```shell
> nx generate @monodon/rust:library my-rust-lib
> ```

> Create a new library with napi:
> ```shell
> nx generate @monodon/rust:library my-rust-node-lib --napi
> ```

#### Napi
Generating a library with the `--napi` flag will set up the project to be built with it.

## Executors
All the executors support these additional properties:
* toolchain: (e.g. `--toolchain='stable' | 'beta' | 'nightly'`);
  * Uses `stable` by default
* target (e.g. `--target=aarch64-apple-darwin`);
* profile (e.g. `--profile=dev`)
  * [Cargo profiles](https://doc.rust-lang.org/cargo/reference/profiles.html)
* release
* target-dir
* features (e.g. `--features=bmp`)
  * [Cargo features](https://doc.rust-lang.org/cargo/reference/features.html)
* all-features
* args
  * [Arguments forwarding](https://nx.dev/nx-api/nx/executors/run-commands#args) to the executor.

### `@monodon/rust:build`
Runs cargo to build the project
> Not supported with napi

### `@monodon/rust:lint`
Runs cargo clippy to lint the project

### `@monodon/rust:napi`
Runs the napi cli to build the project

### `@monodon/rust:run`
Runs `cargo run` for the project
> Not supported with napi

### `@monodon/rust:test`
Runs `cargo test` for the project
npm package: @monodon/typescript-nx-imports-plugin
Description: Adds support for TypeScript to include external files for TypeScript projects on demand. This allows for cross library imports within Nx workspaces.
Author: Jonathan Cammisuli
Latest version: 0.3.0

# @monodon/typescript-nx-imports-plugin

Adds support for TypeScript to include external files for TypeScript projects on demand. This allows for cross library imports within Nx workspaces.

## Usage

Within the `tsconfig.base.json` file, add the following plugin:

```
"plugins": [
      {
        "name": "@monodon/typescript-nx-imports-plugin",
        "externalFiles": [
          {
            "mainFile": "/Users/jon/Dev/monodon/packages/typescript-nx-imports-plugin/src/index.ts",
            "directory": "/Users/jon/Dev/monodon/packages/typescript-nx-imports-plugin"
          },
          {
            "mainFile": "/Users/jon/Dev/monodon/packages/test-lib/src/index.ts",
            "directory": "/Users/jon/Dev/monodon/packages/test-lib"
          },
          {
            "mainFile": "/Users/jon/Dev/monodon/packages/rust/src/index.ts",
            "directory": "/Users/jon/Dev/monodon/packages/rust"
          }
        ]
      }
    ],
```

> Note: mainFile and directory should be the absolute paths.

This plugin was also made to work well with Nx Console. Using it outside of this extension probably won't work :frown:

### Local development

Build the `@monodon/typescript-nx-imports-plugin` with `yarn nx build typescript-nx-imports-plugin --watch`. Navigate to the `dist/packages/typescript-nx-imports-plugin` directory and run `npm link`. Navigate back to the root of this project and run `npm link @monodon/typescript-nx-imports-plugin`.

This allows TypeScript to find the package within the `node_modules` directory.
npm package: @monoface/ui-core
Description: Monoface UI core assets, tokens, and base styles.
Latest version: 0.1.0

# Monoface UI Core

Monoface UI Core provides base styles, design tokens, assets, and HTML snippets
used by the UI Room ecosystem.

## Installation

```bash
npm install @monoface/ui-core
```

## Usage

Import the base styles once in your application or Storybook preview:

```js
import "@monoface/ui-core/styles/index.css";
```

Consume tokens directly:

```js
import colors from "@monoface/ui-core/tokens/colors.json";
import spacing from "@monoface/ui-core/tokens/spacing.json";
import typography from "@monoface/ui-core/tokens/typography.json";
```

Use assets (fonts, icons, graphics) via direct paths:

```js
import logo from "@monoface/ui-core/assets/logos/logo__bloom.svg";
```

## Contents

- Styles: `src/styles`
- Tokens: `src/tokens`
- Assets: `src/assets`
- HTML component snippets: `src/components` (reference-only)

## Fonts

The variable font is included in `src/assets/fonts` and wired in
`src/styles/fonts.css`.

## Status

Public package with static assets and tokens. No build step required.
npm package: @monofin/homebridge-blocblinds
Description: Homebridge plugin to control MOTION Blinds by Coulisse B.V. including derivative products such as OmniaBlinds and Bloc Blinds (UK).
Latest version: 2.0.13

# homebridge-blocblinds

[![npm](https://badgen.net/npm/v/homebridge-blocblinds)](https://www.npmjs.com/package/@monofin/homebridge-blocblinds)
[![npm](https://badgen.net/npm/dt/homebridge-blocblinds)](https://www.npmjs.com/package/@monofin/homebridge-blocblinds)

Homebridge plugin to control MOTION Blinds by Coulisse B.V. including derivative products such as: OmniaBlinds, Bloc Blinds (UK).

Note: this is a fork of [Homebridge MOTION blinds](https://github.com/jhurliman/homebridge-motionblinds#homebridge-motionblinds) via another fork.
This fork contains prototype fixes and some Bloc Blinds specific logic, including slightly different device type handling.
It should be backwards compatible with MOTION blinds.
Fixes here will be offered back to the original repo.


## Installation
1. Follow the step-by-step instructions on the [Homebridge Wiki](https://github.com/homebridge/homebridge/wiki) for how to install Homebridge.
2. Follow the step-by-step instructions on the [Homebridge Config UI X](https://github.com/oznu/homebridge-config-ui-x/wiki) for how to install Homebridge Config UI X.
3. Install homebridge-motionblinds using: `npm install -g homebridge-motionblinds` or search for `MOTION Blinds` in Config UI X.

## Info
1. Blinds are only identified by a 16-character MAC address. They will show up in HomeKit with the MAC address as their name. You can rename them in HomeKit or using the configuration options below.
2. If your blinds support tilt angle control, you must manually enable it using the "tilt" config option described below.
3. If your blind is moving up when it should move down, or left when it should move right, use the "invert" config option described below.

## Configuration

All fields are optional except `"platform"`, and `"mac"` if any blinds are specified. If no `"key"` is given, blinds will appear as read only with no control. If you are having connectivity issues, try specifying the `"gatewayIp"`.

```json
{
  "platform": "MotionBlinds",
  "key": "xxxxxxxx-xxxx-xx",
  "gatewayIp": "10.0.0.23",
  "blinds": [
    {
      "mac": "xxxxxxxxxxxxxxxx",
      "name": "Bedroom Blinds",
      "tilt": true,
      "invert": false
    },
    {
      "mac": "xxxxxxxxxxxxxxxx",
      "name": "Living Room Roller Shade",
      "tilt": false,
      "invert": false
    }
  ]
}
```
npm package: @monogram/eslint-config
Description: ESLint configs used at Monogram
Latest version: 0.1.6

# eslint-config

ESLint config used at [Monogram](https://monogram.io/).

## Usage

### Automatic

Run the following command and follow the prompts.

```sh
npx @monogram/eslint-config
```

### Manual

Install dependencies

```sh
pnpm add -D eslint @monogram/eslint-config
```

Depending on your project, add the following to a `.eslintrc.js` file:

#### Node.js rules

```js
module.exports = {
	extends: '@monogram/eslint-config/node'
}
```

_[See the rules](./node.js)_

#### Next.js rules

```js
module.exports = {
	extends: '@monogram/eslint-config/next'
}
```

_[See the rules](./next.js)_

#### Svelte

_coming soon_

#### Astro

_coming soon_
npm package: @monogram/prettier-config
Description: Prettier config used at monogram.io (adapted from @github/prettier-config)
Author: Monogram
Latest version: 0.4.0

# prettier-config

Prettier config used at [monogram.io](https://monogram.io)

## Installing

### Auto install

Executing it with `npx` from the project's root will perform the manual installation steps, installing `@monogram/prettier-config` as a dev dependency and adding `"prettier": "@monogram/prettier-config"` to your project's `package.json`.

```sh
npx @monogram/prettier-config
```

### Install manually

Install the package using your package manager

```sh
yarn add -D @monogram/prettier-config
# or
npm i -D @monogram/prettier-config
# or
pnpm i -D @monogram/prettier-config
# or
bun add -D @monogram/prettier-config
```

Add the `prettier` key to your `package.json`

```diff
+++  "prettier": "@monogram/prettier-config"
```

## Extending

Can also be extended like this:

```js
// .prettierrc.js
module.exports = {
	...require('@monogram/prettier-config'),
	tabWidth: 2,
	useTabs: false,
	overrides: [
		{
			files: '*.scss',
			options: {
				singleQuote: true,
				tabWidth: 2,
				useTabs: false,
				printWidth: 160,
			},
		},
	],
}
```

[Check out the `prettier` documentation for more info on sharing configurations](https://prettier.io/docs/en/configuration.html#sharing-configurations).

## Acknowledgment

Inspired by [@github/prettier-config](https://www.npmjs.com/package/@github/prettier-config).
npm package: @monogrid/lut-loader
Description: A webpack loader that allows to bundle LUT files as PNG
Author: MONOGRID S.R.L.
Latest version: 0.0.2

# lut-loader

A webpack loader that enable to bundle LUT files as PNG

## Installation

```bash
npm install lut-loader
```

or

```bash
yarn add lut-loader
```

## Webpack Configuration

You can use lut-loader in combination with other loaders.

For example, if you want to parse a .cube file and import it as PNG directly in your source code you have to do:

``` js
module: {
  rules: [{
    test: /\.cube$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: utils.assetsPath('assets/lut/[name].[hash:7].png')
        }
      },
      {
        loader: 'lut-loader'
      }
    ]
  }]
}
```

or if you want to obtain only the buffer data:

``` js
module: {
  rules: [{
    test: /\.cube$/,
    use: [
      {
        loader: 'lut-loader'
      }
    ]
  }]
}
```

example of usage:

``` js
import LUTNight from './assets/luts-source/night.cube'

// ...

applyPngLut(LUTNight)
```
npm package: @monogrid/threejs-glsl-loader
Description: A Webpack Loader that allows to load threejs inlined GLSL chunks.
Author: MONOGRID S.R.L.
Latest version: 1.0.4

# threejs-glsl-loader
A Webpack Loader that allows to load threejs inlined GLSL chunks.

ALPHA VERSION, Tested with Threejs r92 

## Webpack Configuration

``` js
module: {
  rules: [{
    test: /\.(glsl|vert|frag)$/,
    loader: 'threejs-glsl-loader',
    // Default values (can be omitted)
    options: {
      chunksPath: '../ShaderChunk', // if chunk fails to load with provided path (relative), the loader will retry with this one before giving up
      chunksExt: 'glsl', // Chunks extension, used when #import statement omits extension
    }
  }]
}
```

## How it behaves

``` glsl
// The content of chunks/a-chunk.glsl file will be inlined here as string
// the loader will first try to load from the specified path (relative to the current glsl file)
// Please, do not specify `./` if the additional file you're going to load resides in the same directory,
// this will give an error. However, adding `../` will let you move to upper level folder to search required file in there.
#include chunks/a-chunk.glsl;

// This is how Three.js specifies its chunks in its .glsl files
// the loader will ignore <> characters and append chunksExt
// the loader will then try to load the chunk from the same folder as the current glsl file
// if this fails it will try to load the chunk from the specified chunksPath config argument
// the default '../ShaderChunk' value for chunksPath currently (three.js r92) maps to where chunks are located in three.js
#include <a-chunk>;

```
npm package: @monogrid/vue-lib
Description: Reusable Vue Components from MONOGRID
Author: MONOGRID S.R.L.
Latest version: 1.2.0

# vue-lib

Reusable Vue Components from MONOGRID

## Installation

```bash
npm install @monogrid/vue-lib
```

or

```bash
yarn add @monogrid/vue-lib
```

## Usage

See individual docs in the `docs` folder for usage of every component.

## LICENSE
Copyright (c) 2020, MONOGRID S.R.L.

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
npm package: @monohelper/cli
Description: A tool to to check monorepo package version consistency
Latest version: 0.1.0

# @monohelper/cli

A tool to to check monorepo package version consistency

## Usage

```bash
npx @monohelper/cli -h
```

```bash
Usage: monohelper [options] [command]

Options:
  -p,--package-manager [packageManager]   (default: "pnpm")
  -V, --version                          output the version number
  -h, --help                             display help for command

Commands:
  check [options] [dependencyNames...]   check dependency version
  lock [options] <dependencyName>        lock dependency version
  config [options]                       monohelper.json config
  help [command]                         display help for command
```

### Version check

```bash
npx @monohelper/cli check
```

```bash
glob
│   
├── 7.2.3
│   │   
│   ├──monohelper (root)
│   │    dependency: 7   
│   │   
│   └──@monohelper/cli (packages/cli)
│        dependency: 7   
│   
└── 8.0.3
    │   
    ├──@monohelper/config (packages/config)
    │    dependency: ^8.0.3   
    │   
    └──@monohelper/core (packages/core)
         dependency: ^8.0.3 
```
npm package: @monoid-dev/deployed-bot
Description: ## References
Author: Chenyu Wang
Latest version: 0.0.5

# Deploy Bot

## References

https://docs.aws.amazon.com/AmazonECS/latest/APIReference/API_Deployment.html
https://docs.aws.amazon.com/AmazonECS/latest/developerguide/ecs_cwe_events.html#ecs_service_deployment_events
https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/ecs/
npm package: @monoid-dev/lambda-s3-builder
Description: ## What it does?
Author: Chenyu Wang
Latest version: 0.0.10

# Lambda S3 Builder

## What it does?

1. Given a `BUILD_DIR`, it builds the application using the `BUILD_COMMAND` command.
2. If the build is successful, it compresses the `BUILD_DIR` directory, keeping its structure. The zip file is at the same level as the directory.
3. The `hash` of the directory is computed.
4. The `{hash}.zip` is uploaded to AWS S3.
5. Trigger a update to the Lambda function using the latest S3.
6. The Lambda function is tagged with the Github URL to the commit.

## Environment Requirements

Only NodeJS. AWS JavaScript SDK is used, so AWS cli is not needed.

## Example

```bash
AWS_REGION=ap-northeast-1 \
AWS_ACCESS_KEY_ID=XXX \
AWS_SECRET_ACCESS_KEY=XXX \
GIT_PERSONAL_ACCESS_TOKEN=XXX \
BUILD_COMMAND="pnpm build" \
BUILD_DIR=BUILD_DIR \
BUILD_OUTPUT=BUILD_OUTPUT \
AWS_S3_BUCKET=AWS_S3_BUCKET \
FUNCTION_NAMES=fn1,fn2 \
npx @monoid-dev/lambda-s3-builder
```
npm package: @monoid-dev/mobx-zod-form
Description: [![CircleCI](https://dl.circleci.com/status-badge/img/gh/MonoidDev/mobx-zod-form/tree/master.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/MonoidDev/mobx-zod-form/tree/master) [![npm](https://img.shields.io/npm/v/@monoid-dev/mobx-zod-fo
Author: Chenyu Wang
Latest version: 0.21.1

# mobx-zod-form
[![CircleCI](https://dl.circleci.com/status-badge/img/gh/MonoidDev/mobx-zod-form/tree/master.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/MonoidDev/mobx-zod-form/tree/master)
[![npm](https://img.shields.io/npm/v/@monoid-dev/mobx-zod-form?label=mobx-zod-form)](https://www.npmjs.com/package/@monoid-dev/mobx-zod-form)
[![npm](https://img.shields.io/npm/v/@monoid-dev/mobx-zod-form-react?label=mobx-zod-form-react)](https://www.npmjs.com/package/@monoid-dev/mobx-zod-form-react)


<img src="https://raw.githubusercontent.com/MonoidDev/mobx-zod-form/master/packages/website/public/favicon.svg" width="256" height="256" alt="Logo" />

<br />

Data-first form builder based on [MobX](https://mobx.js.org/) & [Zod](https://zod.dev/).

<br />

## Checkout our Documentation

Documentation:
https://mobx-zod-form.pages.dev/
npm package: @monoid-dev/mobx-zod-form-react
Description: [![CircleCI](https://dl.circleci.com/status-badge/img/gh/MonoidDev/mobx-zod-form/tree/master.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/MonoidDev/mobx-zod-form/tree/master) [![npm](https://img.shields.io/npm/v/@monoid-dev/mobx-zod-fo
Author: Chenyu Wang
Latest version: 0.21.1

# mobx-zod-form
[![CircleCI](https://dl.circleci.com/status-badge/img/gh/MonoidDev/mobx-zod-form/tree/master.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/MonoidDev/mobx-zod-form/tree/master)
[![npm](https://img.shields.io/npm/v/@monoid-dev/mobx-zod-form?label=mobx-zod-form)](https://www.npmjs.com/package/@monoid-dev/mobx-zod-form)
[![npm](https://img.shields.io/npm/v/@monoid-dev/mobx-zod-form-react?label=mobx-zod-form-react)](https://www.npmjs.com/package/@monoid-dev/mobx-zod-form-react)


<img src="https://raw.githubusercontent.com/MonoidDev/mobx-zod-form/master/packages/website/public/favicon.svg" width="256" height="256" alt="Logo" />

<br />

Data-first form builder based on [MobX](https://mobx.js.org/) & [Zod](https://zod.dev/).

<br />

## Checkout our Documentation

Documentation:
https://mobx-zod-form.pages.dev/
npm package: @monoid-dev/reform
Description: [![Documentation](https://img.shields.io/badge/documentation-yes-brightgreen.svg)](https://reform-monoid-dev.vercel.app/) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](#) [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bg
Author: hanayashiki
Latest version: 1.1.1

# Reform

[![Documentation](https://img.shields.io/badge/documentation-yes-brightgreen.svg)](https://reform-monoid-dev.vercel.app/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](#)
[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FMonoidDev%2Freform.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FMonoidDev%2Freform?ref=badge_shield)

⚠️ This project is under development.
## License
[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FMonoidDev%2Freform.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2FMonoidDev%2Freform?ref=badge_large)
npm package: @monoid-dev/stripe-currency-format
Description: Generate routing with code-splitting
Author: Chenyu Wang
Latest version: 0.0.2

# Stripe Currency Format 

```ts
import { stripeCurrencyFormat } from 'stripe-currency-format';

console.log(stripeCurrencyFormat(10000, 'USD'));

console.log(stripeCurrencyFormat(10000, 'JPY'));

console.log(stripeCurrencyFormat(114514, 'CNY'));
```

```bash
$100.00
¥10,000
CN¥1,145.14
```
npm package: @monoid-dev/zod-monaco-reporter
Description: Render Zod errors in Monaco Editor (the editor used by VSCode).
Author: Chenyu Wang
Latest version: 0.0.8

# Zod Monaco Reporter

Render Zod errors in Monaco Editor (the editor used by VSCode).

## Why Monaco Editor

Monaco Editor is gigantic, you may say, but when it comes to complex and large data validated by equally complex Zod schema, it is nice if we can fold up irrelevant blocks, 
hover to get error details, and search through the data. All of this comes for free in our everyday VS Code, but you also deserve the same DX in your application. When the data fails validation, render it using `ZodMonacoReporter` and quickly figure out which part goes wrong.

## Installation

```bash
npm install @monoid-dev/zod-monaco-reporter
pnpm install @monoid-dev/zod-monaco-reporter
yarn add @monoid-dev/zod-monaco-reporter
```

No extra steps for compiling Monaco Editor is needed, because under the hood we use `@monaco-editor/react` which downloads it from [cdn.jsdelivr.net](https://jsdelivr.com).

## Get Started

Consider the following Zod schema:

```ts
const schema = z.object({
  count: z.number(),
  results: z
    .object({
      id: z.number(),
      age: z.number(),
      type: z.enum(["a", "b", "c"]),
    })
    .array(),
  noemptyArray: z.array(z.number()).nonempty(),
  primitive: z.number(),
})
```

Render the validation result with React

```tsx
import { ZodMonacoReporter } from '@monoid-dev/zod-monaco-reporter'

function App() {
  return (
    <ZodMonacoReporter
      value={{
        count: 3,
        results: [
          { id: 1, age: 25, type: "a" },
          { id: 2, age: 30, type: "b" },
          { id: 3, age: 35, type: "d" },
          { id: 4, age: "40", type: "c" },
          { id: 5 },
        ],
        noemptyArray: [],
        primitive: {
          aa: 114514,
        },
      }}
      schema={schema}
    />
  );
}
```

Get the nice report of whatever errors in your data!

![preview](https://raw.githubusercontent.com/MonoidDev/zod-endec/master/packages/zod-monaco-reporter/docs/preview.jpg)

See it live on CodeSandbox: TODO

## Reference

### ZodMonacoReporter

Usage:

```ts
<ZodMonacoReporter value={value} schema={schema} name="filename.json" />
```

Parameters:

1. value: Any value to validate. Notice that currently the value needs to be JSON serializable or it cannot be displayed correctly.
2. schema?: Optional. The zod schema used to verify the `value`.
3. error?: Optional. A ZodError for the result. The errors will be rendered regardless of the schema. It is useful if you don't know the schema.
4. name?: Optional. The name of the data. It needs to be unique for the Monaco Editor the match each `value` to its own `Model`. If you don't provide one, we generate a random name for you.

Note:

You may prefer using `React.lazy` to load this element as it contains bloated JavaScript.
npm package: @monoid-dev/zod-utils
Description: A set of type manipulations for zod
Author: Chenyu Wang
Latest version: 0.0.2

# Zod Utils

A set of type manipulations for zod

## List of APIs

+ Nullish
    + unwrapNullish(t)
    + replaceNullish(t, inner)

+ Object
    + deepPick(t)
npm package: @monokai/monoco-react
Description: Custom (suircle) corners and borders for React components
Author: Monokai
Latest version: 0.3.2

# Monoco for React

Try all options in the [interactive demo](https://somonoco.com)

## Installation

```sh
npm install @monokai/monoco-react
```

## Usage

```jsx
import { Monoco } from '@monokai/monoco-react'

<Monoco className="block" borderRadius={32} background={'#f00'} border={[2, '#000']}>
  content
</Monoco>
```

## Options

Go to [the main Monoco repository](https://github.com/monokai/monoco) to see all available options.
npm package: @monokai/monoco-svelte
Description: Custom (squircle) corners and borders for Svelte components
Author: Monokai
Latest version: 0.3.2

# Monoco for Svelte

Try all options in the [interactive demo](https://somonoco.com)

## Installation

```sh
npm install @monokai/monoco-svelte
```

## Usage

You can use Monoco in two ways, as a Svelte action or as a Svelte component. The action (lowercase `monoco`) is more flexible, as it can use scoped classes, whereas the component (title-cased `Monoco`) cannot inherit scoped classes so they have to be declared globally.

### Svelte action

```svelte
<script>
	import { monoco } from '@monokai/monoco-svelte'
</script>

<div class="block" use:monoco={{
	borderRadius: 32,
	color: '#f00',
	border: [2, '#000']
}}></div>

<style>
	.block {
		display: block;
		width: 128px;
		height: 128px;
	}
</style>
```

### Svelte Component

```svelte
<script>
	import { Monoco } from '@monokai/monoco-svelte'
</script>

<Monoco class="block" borderRadius={32} color={'#f00'} border={[2, '#000']}></Monoco>

<style>
	:global .block {
		display: block;
		width: 128px;
		height: 128px;
	}
</style>
```

## Options

Go to [the main Monoco repository](https://github.com/monokai/monoco) to see all available options.
npm package: @monokle/parser
Description: Kubernetes resource parser
Author: Kubeshop
Latest version: 0.3.2

# Monokle Parser

This package is designed to be used to parse Kubernetes resources.

## Usage

The core function is `extractK8sResources()` function. It accepts a list of file objects:

```ts
export type BaseFile = {
  id: string; // unique id
  path: string; // path to source
  content: string; // file content as text
};
```

> `BaseFile` can represent regular file present in local file storage, but can be also any remote resource or basically anything else (like data read from db). It important to keep in mind that id should be unique.

File objects can be then passed to `extractK8sResources()` to be parsed. All non K8s-related files will be ignored:

```ts
import {extractK8sResources} from `@monokle/parser`;

const resources = extractK8sResources(files);
```

Each resource contains following information:

```ts
{
  id: string;
  fileId: string;
  filePath: string;
  fileOffset: number;
  name: string;
  apiVersion: string;
  kind: string;
  namespace?: string;
  content?: any;
  text: string;
  refs?: ResourceRef[];
  range?: {
    start: number;
    length: number;
  };
}
```
npm package: @monokle/plugin-toolkit
Description: Toolkit for custom plugins development.
Author: Kubeshop
Latest version: 0.1.0

<p align="center">
  <img src="docs/images/large-icon-256.png" alt="Monokle Logo" width="128" height="128"/>
</p>

<p align="center">
<a href="https://github.com/features/actions">Monokle toolkit</a>
for <a href="">developer experience</a>
</p>

<p align="center">
  <a href="https://github.com/kubeshop/monokle-core/tree/main/packages/validation">
    <img title="mit licence" src="https://img.shields.io/badge/License-MIT-yellow.svg"/>
  </a>
</p>

## Welcome to Monokle CLI

Monokle plugin toolkit is an internal package for development tools used during custom plugin development.
npm package: @monokle/tree-navigator
Description: React library for rendering tree structures based on the Redux store.
Author: Kubeshop
Latest version: 1.0.4

# @monokle/tree-navigator

Create tree structures based on your Redux state then easily render it in React.

# Features:

- Define sections (tree levels) and section items (tree nodes) using simple blueprint objects
- Virtualized rendering of trees
- Expand & collapse sections
- Customize both sections and items with your own components
# Usage

---
```tsx

// RTK Listeners setup
export const listenerMiddleware = createListenerMiddleware();
export type AppStartListening = TypedStartListening<RootState, AppDispatch>;
export type AppStopListening = TypedStopListening<RootState, AppDispatch>;
export const startAppListening = listenerMiddleware.startListening as AppStartListening;
export const stopAppListening = listenerMiddleware.stopListening as AppStopListening;

// configure the redux store
const store = configureStore({
  reducer: combineReducers({
    // add the reducer created by rtk-tree-navigator
    ...getTreeNavigatorReducer(),
    // other reducers...
  }),
  middleware: getDefaultMiddleware => getDefaultMiddleware().prepend(
    listenerMiddleware.middleware
  ),
});

// rtk-tree-navigator setup
setupTreeNavigators({
  startListening: startAppListening,
  stopListening: stopAppListening,
  dispatch: store.dispatch
})

// create your first tree navigator
export const treeNavigator = createTreeNavigator("Resources");

// register a section
treeNavigator.registerSection("sectionId" {
  scope: (state) => state.main.resources,
  build: {
    label: "Some section
  },
  items: {
    build: scope => scope.resources.map((resource) => {
      return {
        id: resource.id,
		label: resource.name,
		props: {
		  isSelected: resource.isSelected
		}
	  }
    }),
  }
});

// register a subsection
treeNavigator.registerSection("sectionId.subsectionId", {/*...*/});

// unregister a section
treeNavigator.unregisterSection('id');

// the tree navigator can be rendered by using the Renderer component
<treeNavigator.Renderer />

```
npm package: @monoku/react-native-magtek
Description: MagTek iOS library for React Native
Author: dev@monoku.com
Latest version: 1.0.0

# react-native-magtek (iOS Only)

## Getting started
`$ npm install @monoku/react-native-magtek --save`

### Using React-Native Link
`$ react-native link @monoku/react-native-magtek`

#### Using cocoapods
Add the following lines in your `Podfile`
```ruby
  pod 'MTSCRA', path: '../node_modules/@monoku/react-native-magtek/ios/Magtek'
  pod 'RNMagtek', path: '../node_modules/@monoku/react-native-magtek/ios'
```
and then run `pod install`.

### Manual installation

#### iOS
1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ `@monoku/react-native-magtek` and add `RNMagtek.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNMagtek.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<

## Usage
```javascript
import RNMagtek, { RNMagtekEventsEmitter } from '@monoku/react-native-magtek';

# Connect device
RNMagtek.connect((data) => {
  const { isDeviceConnected, isDeviceOpened } = data;
  if (isDeviceConnected && isDeviceOpened) {
    console.log("Card reader is connected and ready!!!");
  }
});

# Add listener to check device connection
RNMagtekEventsEmitter.addListener('onDeviceConnectionDidChange', (data) => {
  const { isDeviceConnected } = data;
  if (!isDeviceConnected) {
    console.log("Opps! Device have been disconnected.");
  }
});

# Add listener to receive card data
RNMagtekEventsEmitter.addListener(
  'onDataReceived',
  (data) => {
    console.log(data)
    // The data object has the following attributes:
    // sessionID, deviceSN, deviceKSN, magnePrint, magnePrintStatus, 
    // track1, track2, track3
  }
);
```
### Note
Remember to delete the listener before creating a new one or your transaction will be processed multiple times
npm package: @monoku/react-native-payments-cli
Description: ## Installation First, install [Carthage](https://github.com/Carthage/Carthage) (if you don't already have it installed):
Author: Naoufal Kadhom
Latest version: 0.4.0

# react-native-payments-cli

## Installation
First, install [Carthage](https://github.com/Carthage/Carthage) (if you don't already have it installed):

```bash
$ brew install carthage
```

Second, install the package:

```bash
$ yarn add react-native-payments-cli
```

## Commands
### list
Outputs a list of installed add-ons that can be linked.

#### Example
```bash
$ react-native-payments-cli list
```
---

### link
Links an add-ons native dependencies to your project.

#### Example
```bash
$ react-native-payments-cli link stripe
```
npm package: @monoku/react-native-payments-stripe
Description: React Native Payments add-on for processing payments with Stripe.
Author: Naoufal Kadhom
Latest version: 0.4.3

# react-native-payments-addon-stripe
<a href="https://github.com/naoufal/react-native-payments">React Native Payments</a> add-on for processing payments with Stripe.

## Installation
First, download the package:

```bash
$ yarn add react-native-payments-addon-stripe
```

Second, install the [React Native Payments CLI](https://www.npmjs.com/package/react-native-payments-cli):
```bash
$ yarn add react-native-payments-cli
```

Lastly, link the native dependencies with the React Native Payments CLI:
```bash
$ yarn react-native-payments-cli -- link stripe
```

_NOTE: `react-native-payments-cli` adds a Build Phase Script to your Xcode project that depends on <a href="https://github.com/Carthage/Carthage">Carthage</a>._

## Usage
In order to receive chargeable Stripe tokens as part of your `PaymentResponse`, you'll need to add some Stripe specific parameters to your `PaymentMethodData`.

Here's an example of a Stripe enabled Payment Method Data:

```diff
const METHOD_DATA = [{
  supportedMethods: ['apple-pay'],
  data: {
    merchantIdentifier: 'merchant.com.your-app.namespace',
    supportedNetworks: ['visa', 'mastercard', 'amex'],
    countryCode: 'US',
    currencyCode: 'USD',
+   paymentMethodTokenizationParameters: {
+     parameters: {
+       gateway: 'stripe',
+       'stripe:publishableKey': 'your_publishable_key',
+       'stripe:version': '5.0.0' // Only required on Android
+     }
+   }
  }
}];
```

## Resources
- [Creating an Apple Pay Certificate](https://stripe.com/docs/apple-pay/apps#csr)
- [About Publishable Keys](https://stripe.com/docs/dashboard#api-keys)
npm package: @monoku/reactive-storage
Description: A reactive storage with zero dependency
Author: Luis Lacruz
Latest version: 0.0.1

# @monoku/reactive-storage
---
A reactive storage with zero dependency

#### Installation

Using npm:

`npm install @monoku/reactive-storage --save`

Using yarn:

`yarn add @monoku/reactive-storage`

Using unpkg:

`<script src="https://unpkg.com/@monoku/reactive-storage/lib/index.js" />`

#### Basic example:

```js
import ReactiveStorage from '@monoku/reactive-storage';


const MyReactiveStorage = new ReactiveStorage(localStorage); // use localStorage

MyReactiveStorage.setItem('foo', 'bar');

console.log(MyReactiveStorage.getItem('foo'));
// output 'bar'

// Subscribe to 'foo' changes
MyReactiveStorage.subscribe('foo', (event) => {
  console.log(event);
  // output {
  //   key: 'foo',
  //   newValue: 'lorem',
  //   oldValue: 'bar'   
  // }
});

// Set a new value
MyReactiveStorage.setItem('foo', 'lorem');
```
npm package: @monoku/reduxfetch
Description: A pattern that helps to create easily action types and actions for each API call
Author: Luis Villalobos
Latest version: 0.0.5

# Redux Fetch
A pattern that helps to create easily action types and actions for each API call

## Getting Started
### Prerequisites
- [Node.js](https://nodejs.org/)

### Installation
Install [@monoku/reduxfetch](https://www.npmjs.com/package/@monoku/reduxfetch)

```sh
npm install @monoku/reduxfetch
```