open-index/open-npm huggingface dataset:
npm package: @noxu/eslint-config
Description: Noxu's ESLint config, following our styleguide
Author: Marc Dijoux
Latest version: 1.0.1

# @noxu/eslint-config

[![npm version](https://badge.fury.io/js/%40noxu%2Feslint-config.svg)](http://badge.fury.io/js/%40noxu%2Feslint-config)

This package provides Noxu's base JS .eslintrc (without React plugins) as an extensible shared config.

Under the hood this package rely on airbnb styleguide and prettier for automatic indentation.

## Usage

Our default export contains all of our ESLint rules, including ECMAScript 6+. It requires `eslint`, `prettier`, `eslint-plugin-prettier` and `eslint-plugin-import`.

1. Install the correct versions of each package, which are listed by the command:

    ```sh
    npm info "@noxu/eslint-config@latest" peerDependencies
    ```

    If using **npm 5+**, use this shortcut

    ```sh
    npx install-peerdeps --dev @noxu/eslint-config
    ```

2. Add `"extends": "@noxu/eslint-config"` to your .eslintrc.
npm package: @noxu/eslint-config-react
Description: Noxu's ESLint config, following our styleguide
Author: Marc Dijoux
Latest version: 1.0.2

# @noxu/eslint-config-react

[![npm version](https://badge.fury.io/js/%40noxu%2Feslint-config-react.svg)](http://badge.fury.io/js/%40noxu%2Feslint-config-react)

This package provides Noxu's base JS .eslintrc with React plugins as an extensible shared config.

Under the hood this package rely on airbnb styleguide and prettier for automatic indentation.

## Usage

Our default export contains all of our ESLint rules, including ECMAScript 6+.

1. Install the correct versions of each package, which are listed by the command:

    ```sh
    npm info "@noxu/eslint-config-react@latest" peerDependencies
    ```

    If using **npm 5+**, use this shortcut

    ```sh
    npx install-peerdeps --dev @noxu/eslint-config-react
    ```

2. Add `"extends": "@noxu/eslint-config-react"` to your .eslintrc.
npm package: @noxx/babel-plugin-a2rp
Description: Converts aliases in Strings to relative paths
Latest version: 1.0.1

# Babel Plugin - Aliases to Relative Paths

[![Build Status](https://travis-ci.org/the0neWhoKnocks/babel-plugin-a2rp.svg?branch=master)](https://travis-ci.org/the0neWhoKnocks/babel-plugin-a2rp)
[![npm version](https://badge.fury.io/js/%40noxx%2Fbabel-plugin-a2rp.svg?cb=1)](https://badge.fury.io/js/%40noxx%2Fbabel-plugin-a2rp)

Converts aliases in Strings to relative paths

---

## Install

```sh
npm i -D @noxx/babel-plugin-a2rp
```

---

## Usage

First create aliases that can be utilized by the plugin. The format for the
aliases Object are key value pairs where the key is the alias, and value is the
actual path that maps to a specific directory.
```js
// aliases.js
const { resolve } = require('path');

const ROOT = resolve(__dirname, './');
const SRC = `${ ROOT }/src`;

module.exports = {
  COMPONENTS: `${ SRC }/components`,
  SERVER: `${ SRC }/server`,
};
```

In your `babel.config.js` file, add the plugin at the top of the `plugins` list
to ensure aliases are replaced and paths are resolved correctly.
```js
const aliases = require('./aliases');

module.exports = (api) => {
  api.cache(true);
  
  return {
    plugins: [
      ['@noxx/babel-plugin-a2rp', { aliases }],
      // other plugins
    ],
  };
};
```
npm package: @noxx/eslint-config
Description: My shareable eslint config
Author: Trevor Lemon
Latest version: 2.0.1

# eslint-config-noxx

[![npm version](https://badge.fury.io/js/%40noxx%2Feslint-config.svg)](https://badge.fury.io/js/%40noxx%2Feslint-config)

My shareable eslint config

---

## Usage

```sh
npm i -D @noxx/eslint-config
// OR
yarn add -D @noxx/eslint-config
```


Inside of `.eslintrc.js` (at root of repo)

```js
module.exports = {
  extends: '@noxx',
};
```

Inside of the `scripts` node of `package.json`

```json
"scripts": {
  "test": "eslint ./**/*.js"
},
```

---

## Notes

If you have any dot folders or files that you want to be linted, create a
`.eslintignore` and add this:
```
!.FOLDER_NAME/
!.FILE_NAME
```

If you need support for dynamic imports `import('FILE')`, then you'll need to
install `babel-eslint` and add it to your `.eslintrc.js`, this will add support
for stage-3 features.
```js
module.exports = {
  ...
  parser: 'babel-eslint',
  ...
};
```
npm package: @noxx/jest-unhandled-rejection-reporter
Description: A Jest reporter that tells you where Unhandled Rejections are emanating from
Latest version: 1.0.0

# Jest Unhandled Rejection Reporter

[![Build Status](https://travis-ci.org/the0neWhoKnocks/jest-unhandled-rejection-reporter.svg?branch=master)](https://travis-ci.org/the0neWhoKnocks/jest-unhandled-rejection-reporter)
[![npm version](https://badge.fury.io/js/%40noxx%2Fjest-unhandled-rejection-reporter.svg?cb=1)](https://badge.fury.io/js/%40noxx%2Fjest-unhandled-rejection-reporter)

A Jest reporter that tells you where Unhandled Rejections are emanating from.

![example of reporter output](https://user-images.githubusercontent.com/344140/60380487-6319ff80-99fb-11e9-80a9-98c110905972.png)

---

## Usage

Install the module
```sh
npm i -D @noxx/jest-unhandled-rejection-reporter
```

Then wire the reporter up
1. First off, you must use the `--runInBand` (or `-i`) flag to run your tests.
When run in parallel, the reporting of test paths is inconsistent.
1. In your `jest.config.js` file you need to add these lines
```js
// You can have other `reporters`, but this one has to be included as well.
reporters: [
  '@noxx/jest-unhandled-rejection-reporter',
],
// You can call the file whatever you'd like, the important bit is that you
// have a `setupFilesAfterEnv` section and a setup file.
setupFilesAfterEnv: [
  './testSetupFile.js',
],
```
1. At the bottom of your setup file, you'll need to add this.
```js
process.on('unhandledRejection', require('@noxx/jest-unhandled-rejection-reporter').rejectionHandler);
```
npm package: @noxx/react-image-loader
Description: A React component that preloads images via img or picture tags
Latest version: 2.0.0

# React Image Loader

[![Build Status](https://travis-ci.org/the0neWhoKnocks/react.image-loader.svg?branch=master)](https://travis-ci.org/the0neWhoKnocks/react.image-loader)
[![codecov](https://codecov.io/gh/the0neWhoKnocks/react.image-loader/branch/master/graph/badge.svg)](https://codecov.io/gh/the0neWhoKnocks/react.image-loader)
[![npm version](https://badge.fury.io/js/%40noxx%2Freact-image-loader.svg?cb=1)](https://badge.fury.io/js/%40noxx%2Freact-image-loader)
<img alt="undefined" src="https://img.shields.io/bundlephobia/minzip/@noxx/react-image-loader.svg?colorB=yellowgreen&label=Minified%20%2B%20gZip&logo=node.js&logoColor=yellowgreen&style=flat">

A React component that preloads images via `img` or `picture` tags.

You can view the [demo in action here](https://the0newhoknocks.github.io/react.image-loader/).

---

## Install

```sh
yarn add @noxx/react-image-loader
# or
npm i @noxx/react-image-loader
```

---

## Usage

Refer to the [example file](example/src/index.js) for up-to-date usage examples.

---

## Development

```sh
# Install all deps
yarn
# or
npm i

# Start dev server
yarn start
# or
npm start
```
npm package: @noxx/webpack-tidy-plugin
Description: Keeps your output directories tidy when outputting files in watch-mode.
Author: Trevor Lemon
Latest version: 3.0.1

# Webpack Tidy Plugin

[![Build Status](https://travis-ci.org/the0neWhoKnocks/webpack-tidy-plugin.svg?branch=master)](https://travis-ci.org/the0neWhoKnocks/webpack-tidy-plugin)
[![codecov](https://codecov.io/gh/the0neWhoKnocks/webpack-tidy-plugin/branch/master/graph/badge.svg)](https://codecov.io/gh/the0neWhoKnocks/webpack-tidy-plugin)
[![npm version](https://badge.fury.io/js/%40noxx%2Fwebpack-tidy-plugin.svg?cb=1)](https://badge.fury.io/js/%40noxx%2Fwebpack-tidy-plugin)

**TL;DR** - Keeps your output directories tidy when outputting files in
watch-mode (doesn't work when using Webpack's Dev Server).

![wp-tidy-plugin-01](https://user-images.githubusercontent.com/344140/36881882-82d68602-1d85-11e8-8989-170c5b3f1ed9.gif)

Imagine you have a project utilizing a node server that serves assets from a
specific directory - **_and_** you want to use Webpack to rebuild bundles quickly
but don't want to have those assets served via the Webpack server. Well, you'll
most likely have WP output a manifest with the generated files, and the server
will read from that to load the most current hashed bundle.

The catch to the above setup, is that you'll end up with a folder full of
generated files while in watch mode, or when you run a one-off build (say for
production) you may have some straggling files from a previous Dev session.

This plugin will ensure that there's only ever one version of the current bundle
in your output directories.

---

## Install

```sh
yarn add -D @noxx/webpack-tidy-plugin
# or
npm i -D @noxx/webpack-tidy-plugin
```

---

## Configuration

| Prop         | Type      | Default | Description |
| ------------ | --------- | ------- | ----------- |
| `dryRun` | `Boolean` | `false` | Will not delete files, just displays info about what could be deleted. |
| `hashLength` | `Number` | `5` | The length of the hash in the bundle name. |

```js
plugins: [
  new TidyPlugin({
    dryRun: true,
    hashLength: 8,
  }),
],
```

I have a couple [example files](./example) that demonstrate common setups.
- [webpack.config.js](./example/webpack.config.js) utilizes `path`, `publicPath`,
  and `filename` in the `output` section. This setup assumes there'll ever only
  be one `output` directory.
- [webpack.config-nopath.js](./example/webpack.config-nopath.js) allows for a
  more custom `output` setup. You'll notice that there's just a `filename`
  specified with the output path included. Then the `ExtractTextPlugin` pulls
  any styles from the `js` files and dumps them in a `css` path.

---

## Notes

- This only works when using the `watch` option for `webpack`, _not_
while using the `webpack-dev-server`. This is due to the dev-server not
emitting actual files, but rather keeping them in memory.
npm package: @noxy/as-boolean
Description: Converts a truthy value or string to a boolean.
Author: oscelest
Latest version: 0.1.6

# asBoolean

## Introduction

`asBoolean` is a small library to help cast common types in Javascript as boolean instead of having to rely on hacks directly in your code.

The main motivation is to create a more reliable way of interaction with booleans in a human friendly way. This point, however, is certainly arguable.

## Installation

To install run the following command:

```
npm install @noxy/as-boolean@latest
```

Typescript types are already available in the library so no need to get external types.

## Usage

To use this library, simply import the function from the library and call it with the value you want converted to a boolean:

```typescript 
import {asBoolean} from "@noxy/as-boolean";

const bool: boolean = asBoolean("true");

// writes the boolean: true
console.log(bool);

```

### With strings

The following values are regarded as `true`:

- "1"
- "+"
- "y"
- "yes"
- "true"

The following values are regarded as `false`:

- "-1"
- "0"
- "-"
- "n"
- "no"
- "false"

Strings are case-insensitive. Any other string will return an error.

### With numbers or bigint

The number `1` is regarded as `true`, the numbers `0` and `-1` are regarded as `false`
Bigint follow the same rules as the `number` primitive type.

### With objects

In general, objects are regarded as `true` if they contain any properties, and as `false` if they contain no properties.
The following are exceptions to that rule:

#### With arrays

Arrays are regarded as `true` if they contain any elements, and are regarded as `false` if they contain no elements.

#### With Buffer objects

Buffer objects are regarded as `true` if they contain any data, and are regarded as `false` if they contain no data.

#### With Date objects

Date objects are regarded as `true` if their UNIX timestamp value is greater than 0, and `false` if they are equal to or less than 0.

#### With asBoolean method

If the object contains an `asBoolean()` method, it will be invoked with the `this` argument being the object itself and no arguments.
The resulting value of the method will be used as the return value of the `asBoolean` call.

### With symbols

Symbols have their string value read and are then regarded as strings

### With functions

Functions are always regarded as `true`

### With undefined and null

Undefined and null are always regarded as `false`
npm package: @noxy/color
Description: Library handling different kinds of colors.
Author: oscelest
Latest version: 1.0.5

# color

## Introduction

`color` is a light-weight library for creating colors in different color spaces and converting between them.

Currently supports converting between Hex, RGB, HSL, HSV, HWB, and CMYK.

## Installation

To install run the following command:

```
npm install @noxy/color@latest
```

Typescript types are already available in the library so no need to get external types.

## Usage

To use this library, simply import the function from the library and call it with the value you want converted to a boolean:

```typescript 
import {color, RGBColor} from "@noxy/color";

const rgb = new RGBColor(255, 255, 255);

// Writes the RGB value as CSS frieldly string: rgb(255, 255, 255)
console.log(rgb);

```
npm package: @noxy/react-button
Description: A simple button react element.
Author: oscelest
Latest version: 1.0.5

# react-button

## Introduction

`react-button` is a [React](https://reactjs.org/) functional component that creates a button which can be styled and interacted with like a normal button.
It features the normal keyboard and mouse interactability that an HTML button does, but also allows for a value to be return through an `onSubmit` callback.

## Installation

To install run the following command:

```shell
npm install @noxy/react-button@latest
```

Typescript types are already available in the library so no need to get external types.

## Usage

The following is an example of how to use the component:

```typescript jsx
import {Button} from "@noxy/react-button";
import React, {HTMLProps} from "react";

function TestComponent(props: HTMLProps<HTMLDivElement>) {
  const value = {hello: "world"}
  
  return (
    <Button onSubmit={onButtonSubmit} value={value}>
      Click me!
    </Button>
  );
  
  function onButtonSubmit() {
    // Prints '{hello: "world"}'
    console.log(value);
  }
}

```

## Properties

The `DialogInstance` component inherits all HTMLDivElement properties and applies them directly to the outermost element.
This includes the className property for those using CSS modules.

### value: V (any)

The value that will be returned when the onSubmit event is fired.

**Default value**: `undefined`

### onSubmit: callback(value: V): void

An event handler fired when the button is pressed or the button is interacted with by pressing enter or space.
The callback receives the value given to the button.

**Default value**: `undefined`
npm package: @noxy/react-dialog
Description: A dialog component and hook to use with react functional components.
Author: oscelest
Latest version: 1.2.2

# react-dialog

## Introduction

`react-dialog` is a [React](https://reactjs.org/) functional component hook which creates a dialog renderer element and a dialog creation function.
The dialog is only a container element and wrapper and does not come with any dialog templates.
Child elements added to the dialog component will have access to the DialogInstance object through the DialogContext.

## Installation

To install run the following command:

```shell
npm install @noxy/react-dialog@latest
```

Typescript types are already available in the library so no need to get external types.

## Usage

The following is an example of how to use the component:

```typescript jsx
import {useDialog, DialogContext} from "@noxy/react-dialog";
import React, {HTMLProps, useContext} from "react";

function TestComponent(props: HTMLProps<HTMLDivElement>) {
  const [dialog, createDialog] = useDialog();
  
  return (
    <>
      <div>
        <button onClick={onButtonClick}>Hello</button>
      </div>
      {dialog}
    </>
  );
  
  function onButtonClick() {
    createDialog({
      children: <DialogComponent onClose={onDialogClose}/>
    });
  }
  
  function onDialogClose(value: string) {
  
  }
}

function DialogComponent(props: {onClose: (value: string) => void}) {
  const dialog = useContext(DialogContext)
  
  return (
    <div className={"dialog"}>
      World!
      <button onClick={onButtonClick}>Ok</button>
    </div>
  )
  
  function onButtonClick() {
    dialog.close("a value");
  }
}

```

The `useDialog` hook takes a namespace as argument. This is the namespace which the dialogs created by the `createDialog` function will be stored.
The `dialog` renderer supplied by the hook will display only dialogs from that namespace. The default namespace is `"global"`.

## Properties

The `DialogInstance` component inherits all HTMLDivElement properties and applies them directly to the outermost element.
This includes the className property for those using CSS modules.

### overlay: boolean

Determines if an overlay should be shown behind the dialog, disabling clicking on anything behind the dialog.

**Default value**: `true`

### dismissible: boolean

Only relevant if overlay is set to true.
Determines if the dialog should be able to be dismissed by clicking on the overlay behind the dialog.
Dismissing a dialog in this way will trigger the onClose handler.

**Default value**: `true`

### closeable: boolean

Determines if a close button should be shown inside the dialog that can be clicked to close the dialog.

**Default value**: `true`

### onClose: callback(dialog: DialogEvent): void

A callback function which is called when the dialog is dismissed or closed, either through the close button, the overlay, or the DialogInstance close method.

```
interface DialogEvent<V> {
    value: V
    dialog: DialogInstance
}
```

**Default value**: `undefined`
npm package: @noxy/react-element-picker
Description: A tool for turning elements inside a container selectable in a file explorer style.
Author: oscelest
Latest version: 0.3.3

# react-element-picker

## Introduction

`react-element-picker` is a [React](https://reactjs.org/) functional component which acts as a container,
allowing contained elements to be selected in an OS explorer style way.
The component supports mouse drag-select and keyboard selection,
using ctrl and shift modifiers to change how selection works.

## Installation

To install run the following command:

```shell
npm install @noxy/react-element-picker@latest
```

Typescript types are already available in the library so no need to get external types.

## Usage

The following is an example of how to use the component:

```typescript jsx
import React, {HTMLProps, useState} from "react";
import {ElementPicker} from "@noxy/react-element-picker";

function TestComponent(props: HTMLProps<HTMLDivElement>) {
  
  return (
    <ElementPicker>
      <div>Hello World</div>
      <div>Another element</div>
      <div>A third element</div>
    </ElementPicker>
  );
}
```

## Properties

The `ElementPicker` component inherits all HTMLDivElement properties and applies them directly to the outermost element.
This includes the className property for those using CSS modules.

clickThreshold?: number;
scrollSpeed?: number;
focus: number;
selection: boolean[];
onHover?(values?: boolean[]): void;
onCommit(values: boolean[], focus: number): void;

### clickThreshold: number

Determines how many pixels the cursor needs to be dragged after a mousedown event to turn it into a click from a drag.

**Default value**: `8`

### scrollSpeed: number

The speed coefficient for scrolling the window once the cursor leaves the container while a drag select is in progress.

**Default value**: `2500`

### focus: number

The currently focused element from which a keyboard selection event will start from.

**Default value**: `0`

### selection: boolean[]

The elements currently selected inside the container based on index of the element inside the container.

**Default value**: `200`

### onHover(values: null | boolean[]): void;

An event fired whenever a drag select hovers over an element, returning a temporary array of hovered elements.
If no elements are hovered this value will be null.

**Default value**: `undefined`

### onCommit(values: boolean[], focus: number): void;

An event fired whenever a drag selection event or keyboard selection event is completed,
returning the list of elements selected based on index inside the container.

## Styling

The following are a list of properties which are designated as important.
To preserve component functionality, these should not be changed.
If you do need to change them however, please be advised that the component might stop working as intended.

```css
.element-picker {
  user-select: none !important;
  box-sizing:  border-box !important;
}

.element-picker-rect {
  position:   absolute !important;
  box-sizing: border-box !important;
}

```

## Notice

This is currently not in a v1.0.0 release. Undocumented breaking changes might happen between versions.
npm package: @noxy/react-flex-ellipsis-text
Description: A component creating a flexbox element with the 'text-overflow: ellipsis' attribute and adds a tooltip to the text once it overflows.
Author: oscelest
Latest version: 1.0.1

# react-flex-ellipsis-text

## Introduction

`react-flex-ellipsis-text` is a simple [React](https://reactjs.org/) functional component which renders a flexbox element containing text.
The text inside the element has the `text-overflow: ellipsis` CSS property applied to it, making it so that once it overflows, the text is turned into ellipsis.
This functionality does not work natively with flexbox and implements "the hack" necessary to make it function.

It also adds a tooltip title to the ellipsis text to reveal what the full text is past the ellipsis.

## Installation

To install run the following command:

```
npm install @noxy/react-flex-ellipsis-text@latest
```

Typescript types are already available in the library so no need to get external types.

## Usage

To use this library, simply import the function from the library and call it with the value you want converted to a boolean:

```typescript jsx
import {FlexEllipsisText} from "@noxy/react-flex-ellipsis-text";
import React, {HTMLProps} from "react";

function TestComponent(props: HTMLProps<HTMLDivElement>) {
  
  return (
    <FlexEllipsisText>
      Hello World
    </FlexEllipsisText>
  );
}
```

## Properties

### showTitle: boolean

Determines if the tooltip title should be shown once text overflows and becomes ellipsis.

**Default value:** true

## Styling

The following are a list of properties which are designated as important.
To preserve component functionality, these should not be changed.
If you do need to change them however, please be advised that the component might stop working as intended.

```css
.ellipsis-text {
  display: flex !important;
}

.ellipsis-text > span {
  min-width:     0 !important;
  text-overflow: ellipsis !important;
  white-space:   nowrap !important;
  overflow:      hidden !important;
}

```
npm package: @noxy/react-loader
Description: A component to show a loader while content is loading.
Author: oscelest
Latest version: 0.1.2

# react-loader

## Introduction

`react-loader` is a [React](https://reactjs.org/) functional component which creates a loading component that hides content while loading.

## Installation

To install run the following command:

```shell
npm install @noxy/react-loader@latest
```

Typescript types are already available in the library so no need to get external types.

## Usage

The following is an example of how to use the component:

```typescript jsx
import {Loader} from "@noxy/react-loader";
import React, {HTMLProps, useState} from "react";

function TestComponent(props: HTMLProps<HTMLDivElement>) {
  
  const [loading, setLoading] = useState<boolean>(false);
  
  return (
    <div>
      <Loader loading={loading}>
        Hello World
      </Loader>
      <button onClick={onButtonClick}>Set loading</button>
    </div>
  );
  
  function onButtonClick() {
    setLoading(!loading);
  }
}

```

## Properties

The `Loader` component inherits all HTMLDivElement properties and applies them directly to the outermost element.
This includes the className property for those using CSS modules.

### loading: boolean

Determines if the loader should be shown.

**Default value**: `false`
npm package: @noxy/react-range
Description: A simple range input react element.
Author: oscelest
Latest version: 1.0.3

# react-range

## Introduction

`react-range` is a minimalist [React](https://reactjs.org/) functional component which renders a range component.
The range takes a minimum, maximum, and current value, returning a value depending where the cursor is inside the range bar.
The component works unidirectionally with minimum and maximum being interchangeable.
It's minimalist in the sense that it contains only a few classes without being deeply nested elements nor containing many predefined and mandatory CSS properties.

## Installation

To install run the following command:

```shell
npm install @noxy/react-range@latest
```

Typescript types are already available in the library so no need to get external types.

## Usage

The following is an example of how to use the component:

```typescript jsx
import React, {HTMLProps, useState} from "react";
import {Range} from "@noxy/react-range";

function TestComponent(props: HTMLProps<HTMLDivElement>) {
  const [value, setValue] = useState<string>();
  
  return (
    <Range minimum={5} maximum={15} value={10} vertical={false} onChange={onChange}>
      <div {...props}>
        Hello World
      </div>
    </Range>
  );
  
  function onChange(value) {
    setValue(value);
  }
}
```

## Properties

The `Range` component inherits a combination of HTMLDivElement attributes and HTMLInputElement attributes
This includes the className property for those using CSS modules.

### minimum: number

The minimum value, the value on the right/bottom side of the range bar.

**Default value**: `0`

### maximum: number

The maximum value, the value on the left/top side of the range bar.

**Default value**: `1`

### value: number

The current value for the cursor.

**Default value**: Same as `minimum` value

### vertical: boolean

If the component should be displayed vertically or not.

**Default value**: `false`

## Event handlers

### onChange(value: number): void

A callback that is called whenever the range cursor is moved, returning the value of the position of the cursor.

## Styling

While the styling of this component is minimalist, the following section documents editable variables and properties which should not be edited.

### Important CSS Properties

The following are a list of properties which are designated as important.
To preserve component functionality, these should not be changed.
If you do need to change them however, please be advised that the component might stop working as intended.

```css
.range {
  position:    relative !important;
  user-select: none !important;
}

.range-cursor {
  position:         absolute !important;
  z-index:          100 !important;
  transform:        translate(-50%, -50%) !important;
}

.range[data-vertical="false"] .range-cursor {
  top:    50% !important;
}

.range[data-vertical="true"] .range-cursor {
  left:   50% !important;
}
```
npm package: @noxy/react-subscription-hook
Description: A react component hook to create subscribable values inside components in the style of context.
Author: oscelest
Latest version: 1.1.0

# react-subscription-hook

## Introduction

`react-subscription-hook` is a [React](https://reactjs.org/) functional component hook which creates a subscription object that can be used with the useSubscription hook.
This allows for data to be shared between components by using the same subscription object.
Each being updated as another has their state updated.

## Installation

To install run the following command:

```shell
npm install @noxy/react-subscription-hook@latest
```

Typescript types are already available in the library so no need to get external types.

## Usage

The following is an example of how to use the component:

```typescript jsx
import {createSubscription, useSubscription, trackSubscription} from "@noxy/react-subscription-hook";
import React, {HTMLProps, useContext} from "react";

const subscription = createSubscription<number>(0);

function TestComponent(props: HTMLProps<HTMLDivElement>) {
  const [value, setValue] = useSubscription(subscription);
  const [other] = useSubscription(subscription);
  
  trackSubscription(subscription, value => console.log(value));
  
  return (
    <>
      <div>
        <button onClick={onButtonValueClick}>Add one</button>
        <button onClick={onButtonOtherClick}>Add two</button>
      </div>
      <div>
        <span>Current value:</span>
        <span>{value}</span>
      </div>
      <div>
        <span>Another value:</span>
        <span>{other}</span>
      </div>
    </>
  );
  
  function onButtonValueClick() {
    setValue(value + 1);
  }
  
  function onButtonOtherClick() {
    setValue((state) => state + 2);
  }
}

```

The `createSubscription` creates a `Subscription` object with an initial value that can be used with the useSubscription hook.
`useSubscription` takes a `Subscription` object to return a tuple containing the current value and a value updating function.
`trackSubscription` takes a `Subscription` object and a callback function. The callback is called whenever the underlying subscription value changes.
npm package: @noxy/react-utils
Description: A library of React utility functions
Author: oscelest
Latest version: 0.1.5

# react-utils

## Introduction

`react-utils` is a [React](https://reactjs.org/) utility library.

## Installation

To install run the following command:

```shell
npm install @noxy/react-utils@latest
```

Typescript types are already available in the library so no need to get external types.
npm package: @noxyseras/react-ui-components
Description: Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.
Author: Juliano
Latest version: 0.2.2

This is a react ui component package mostly for personal usage.
Most of the components used are from * [Mantine UI](https://mantine.dev/). So for more info, check Mantine UI.
npm package: @noxyz20/tinymce-vue-4.6.6
Description: Official TinyMCE Vue 3 Component
Author: Ephox Inc
Latest version: 1.0.0

# Official TinyMCE Vue component

## About

This package is a thin wrapper around [TinyMCE](https://github.com/tinymce/tinymce) to make it easier to use in a Vue application.

* If you need detailed documentation on TinyMCE, see: [TinyMCE Documentation](https://www.tiny.cloud/docs/).
* For the TinyMCE Vue Quick Start, see: [TinyMCE Documentation - Vue Integration](https://www.tiny.cloud/docs/integrations/vue/#tinymcevuejsintegrationquickstartguide).
* For the TinyMCE Vue Technical Reference, see: [TinyMCE Documentation - TinyMCE Vue Technical Reference](https://www.tiny.cloud/docs/integrations/vue/#tinymcevuejstechnicalreference).

### Support

Version 4.0 is intended to support Vue 3. For Vue 2.x and below please use previous versions of the wrapper.

### Issues

Have you found an issue with `tinymce-vue` or do you have a feature request? Open up an [issue](https://github.com/tinymce/tinymce-vue/issues) and let us know or submit a [pull request](https://github.com/tinymce/tinymce-vue/pulls). *Note: for issues related to TinyMCE please visit the [TinyMCE repository](https://github.com/tinymce/tinymce).*
npm package: @noy-db/file
Description: JSON file adapter for noy-db — encrypted document store on local disk, USB sticks, or network drives
Author: vLannaAi
Latest version: 0.9.0
Deprecated: Deprecated: superseded by v0.10.0 (renamed packages + store API). Install the new packages: @noy-db/store-file, @noy-db/store-memory, @noy-db/store-browser-local, @noy-db/store-browser-idb, @noy-db/store-aws-s3, @noy-db/store-aws-dynamo. See https://github.com/vlanna/noy-db

# @noy-db/file

> JSON file adapter for [noy-db](https://github.com/vLannaAi/noy-db) — encrypted document store on local disk, USB sticks, or network drives.

[![npm](https://img.shields.io/npm/v/@noy-db/file.svg)](https://www.npmjs.com/package/@noy-db/file)

## Install

```bash
pnpm add @noy-db/core @noy-db/file
```

## Usage

```ts
import { createNoydb } from '@noy-db/core'
import { file } from '@noy-db/file'

const db = await createNoydb({
  adapter: file({ dir: '/Volumes/USB/firm-data' }),
  userId: 'alice',
  passphrase: process.env.NOYDB_PASSPHRASE!,
})
```

Each compartment is written as a set of JSON files containing only ciphertext envelopes — the adapter never sees plaintext. Perfect for:

- USB-stick workflows (air-gapped data portability)
- Local-first desktop apps
- Network drive sharing with per-user passphrases
- Backup-friendly storage

## License

MIT © vLannaAi — see the [noy-db repo](https://github.com/vLannaAi/noy-db) for full documentation.
npm package: @noy-db/memory
Description: In-memory adapter for noy-db — ideal for testing, development, and ephemeral workloads
Author: vLannaAi
Latest version: 0.9.0
Deprecated: Deprecated: superseded by v0.10.0 (renamed packages + store API). Install the new packages: @noy-db/store-file, @noy-db/store-memory, @noy-db/store-browser-local, @noy-db/store-browser-idb, @noy-db/store-aws-s3, @noy-db/store-aws-dynamo. See https://github.com/vlanna/noy-db

# @noy-db/memory

> In-memory adapter for [noy-db](https://github.com/vLannaAi/noy-db) — ideal for testing and ephemeral workloads.

[![npm](https://img.shields.io/npm/v/@noy-db/memory.svg)](https://www.npmjs.com/package/@noy-db/memory)

## Install

```bash
pnpm add @noy-db/core @noy-db/memory
```

## Usage

```ts
import { createNoydb } from '@noy-db/core'
import { memory } from '@noy-db/memory'

const db = await createNoydb({
  adapter: memory(),
  userId: 'alice',
  passphrase: 'correct horse battery staple',
})
```

Data lives only in the current process — it's gone when the process exits. Perfect for:

- Unit and integration tests
- Short-lived scripts
- Benchmarks
- Prototyping before wiring up persistent storage

## License

MIT © vLannaAi — see the [noy-db repo](https://github.com/vLannaAi/noy-db) for full documentation.
npm package: @noy-db/vue
Description: Vue 3 / Nuxt composables for noy-db — reactive useNoydb, useCollection, useSync, and biometric plugin
Author: vLannaAi
Latest version: 0.10.0

# @noy-db/vue

> Vue 3 / Nuxt composables for [noy-db](https://github.com/vLannaAi/noy-db) — reactive `useNoydb`, `useCollection`, `useSync`, and biometric plugin.

[![npm](https://img.shields.io/npm/v/@noy-db/vue.svg)](https://www.npmjs.com/package/@noy-db/vue)

## Install

```bash
pnpm add @noy-db/core @noy-db/browser @noy-db/vue
```

## Setup

```ts
// main.ts
import { createApp } from 'vue'
import { NoydbPlugin } from '@noy-db/vue'
import { browser } from '@noy-db/browser'
import App from './App.vue'

createApp(App)
  .use(NoydbPlugin, {
    adapter: browser({ obfuscate: true }),
    userId: 'alice',
  })
  .mount('#app')
```

## Composables

```vue
<script setup lang="ts">
import { useNoydb, useCollection, useSync } from '@noy-db/vue'

type Invoice = { id: string; amount: number; customer: string }

const { db, unlock, locked } = useNoydb()
const { items, put, remove } = useCollection<Invoice>('C101', 'invoices')
const { push, pull, status } = useSync()

async function login(passphrase: string) {
  await unlock(passphrase)
}
</script>

<template>
  <button v-if="locked" @click="login('…')">Unlock</button>
  <ul v-else>
    <li v-for="inv in items" :key="inv.id">{{ inv.customer }}: ฿{{ inv.amount }}</li>
  </ul>
</template>
```

## Biometric unlock (WebAuthn)

```ts
import { enrollBiometric, unlockWithBiometric } from '@noy-db/vue'

await enrollBiometric('alice', passphrase)
// …later, on another session:
const passphrase = await unlockWithBiometric('alice')
```

## License

MIT © vLannaAi — see the [noy-db repo](https://github.com/vLannaAi/noy-db) for full documentation.