open-index/open-npm huggingface dataset:
npm package: @imagemarker/kveditor
Description: React key/value component library
Latest version: 0.6.5
Deprecated: this package has been deprecated

# KVEditor

React key/value component library. Supports browser light/dark themes.

<img src="https://imagemarker.s3.eu-central-1.amazonaws.com/kveditor/kveditor-usage.gif" alt="usage" width="427" height="189"/>

## Setup

```bash
yarn
```

## Run Example

```bash
yarn start
```

## Build

```bash
# development
yarn build
# production
yarn build:prod
```

## Usage

KVEditor has it's own state and works out of the box without any dependency.

### Simple usage

```jsx
import React from 'react';
import { KVEditor } from '@imagemarker/kveditor';

const App = () => <KVEditor />

export default App;
```

### Advanced usage

```jsx
const App = ({ darkTheme }: { darkTheme: boolean }) => {
  const [items, setItems] = useState([
    { key: 'product', value: 'T-Shirt', options: { immutable: true } },
    { key: 'price', value: '$50.95', options: { fixed: true } },
    { key: 'link', value: 'https://www.example.org' }
  ]);

  return (
    <div>
      <KVEditor
        items={items}
        onChange={setItems}
        options={{
          idField: 'id',
          theme: darkTheme ? 'dark' : 'light',
          validateKey: new RegExp(/^[a-zA-Z0-9]*$/)
        }}
      />
    </div>
  );
};
```

You can run example in `src/example.tsx` file with `yarn start`.

You should copy `node_modules/@imagemarker/kveditor/dist/icons` folder to your `public` folder to be able to use icons.

### Props:

All props are optional. You should either use `items` or `rawObject` 

- items `{ key: string; value: any; options: KVItemOptionsType }`: If you have existing Key/Value state you can pass it into the component.
- rawObject `{ any }`: You can pass any object into this and you would get Key/Value state automatically.
- onChange `{ function }`: When items added/removed/updated this method calls with items.
- options `{ object }`:
  - idField `{ string }`: If defined adds fixed and immutable key/value. If that field defined already defined it uses existing one.
  - validateKey `{ RegExp }`: Regular expression to validate your keys
  - theme `{ 'light' | 'dark' }`: You can choose between `light` and `dark` themes  
  - stretchLabels `{ bool, default: true }` sets all key labels to same size
  
    ![light theme](https://imagemarker.s3.eu-central-1.amazonaws.com/kveditor/light-stretch.png)
    
    ![dark theme](https://imagemarker.s3.eu-central-1.amazonaws.com/kveditor/dark-stretch.png)

## License

![The MIT License](https://img.shields.io/badge/license-MIT-brightgreen.svg)

Please see [License File](LICENSE.md) for more information.

[link-author]: https://github.com/imagemarker
npm package: @imagemarker/libre
Description: React component library template
Latest version: 0.2.0

# libRe

React component library starter pack.

- React 17+ component library settings
- RollupJS
- TypeScript
- ESLint
- Prettier
- Jest
- Testing-Library

## Install

- Install [degit](https://github.com/Rich-Harris/degit) and use it to clone repo into the new directory.

```bash
npm install -g degit
degit imagemarker/libre my-new-project
``` 

- Update `LICENSE.md` and `package.json` files with your information.

## Usage

- Install

```bash
yarn
# OR
npm i
```

- Run examples

```bash
yarn start
# OR
npm start
```

Please see other npm scripts in package.json

## License

![The MIT License](https://img.shields.io/badge/license-MIT-brightgreen.svg)

Please see [License File](LICENSE.md) for more information.
npm package: @imagemarker/ui
Description: ImageMarker React UI Components library
Latest version: 0.1.0

# UI

ImageMarker React UI Components library

## Usage

- Install

```bash
yarn
# OR
npm i
```

- Run Storybook

```bash
yarn storybook
# OR
npm run storybook
```

Please see other npm scripts in package.json

## License

![The MIT License](https://img.shields.io/badge/license-MIT-brightgreen.svg)

Please see [License File](LICENSE.md) for more information.
npm package: @imagemarker/use-text-width
Description: React hook to measure text width
Latest version: 0.4.4
Deprecated: this package has been deprecated

# useTextWidth

React hook to calculate text width

## Install

```bash
npm install @imagemarker/use-text-width
# OR
yarn add @imagemarker/use-text-width
```

## Usage

Run `yarn start` to view [example](src/examples/simple.tsx) on http://localhost:5000

There are 2 types of usages:

#### 1. text & font

You can pass object having `text` (mandatory, string or string[] returns max one) and `font` (optional, CSS font string) properties to calculate width. 
 
```jsx
import { useTextWidth } from '@imagemarker/use-text-width';

const App = () => {
  const width = useTextWidth({ text: 'Hello world!', font: '20px Times' });

  return (
    <p>Hello world! text width: {width}px</p>
  );
};
```

#### 2. ref

You can pass object having `ref` (mandatory, HTMLElement) property to calculate width.
 
```jsx
import { useTextWidth } from '@imagemarker/use-text-width';

const App = () => {
  const ref = useRef();
  const width = useTextWidth({ ref });

  return (
    <p ref={ref} style={{ fontSize: '16pt', fontWeight: 'bold' }}>
      lorem ipsum! text width: {width}px
    </p>
  );
};
```

## License

![The MIT License](https://img.shields.io/badge/license-MIT-brightgreen.svg)

Please see [License File](LICENSE.md) for more information.
npm package: @imagemin-global/advpng-bin
Description: AdvPNG bin-wrapper that makes it seamlessly available as a local dependency
Author: Shogo Sensui
Latest version: 7.0.0

# advpng-bin ![GitHub Actions Status](https://github.com/imagemin/advpng-bin/workflows/test/badge.svg?branch=main)

> The main purpose of this utility is to recompress png files to get the smallest possible size

You probably want [`imagemin-advpng`](https://github.com/imagemin/imagemin-advpng) instead.

## Install

```
$ npm install --save advpng-bin
```

## Usage

```js
import {execFile} from 'node:child_process';
import advpng from 'advpng-bin';

execFile(advpng, ['--recompress', '--shrink-extra', 'image.png'], error => {
	console.log('Image minified!');
});
```

## CLI

```
$ npm install --global advpng-bin
```

```
$ advpng --help
```
npm package: @imagemin-global/cwebp-bin
Description: cwebp wrapper that makes it seamlessly available as a local dependency
Latest version: 8.0.0

# cwebp-bin ![GitHub Actions Status](https://github.com/imagemin/cwebp-bin/workflows/test/badge.svg?branch=main)

> [WebP](https://developers.google.com/speed/webp/) is a new image format that provides lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index.

You probably want [`imagemin-webp`](https://github.com/imagemin/imagemin-webp) instead.


## Install

```
$ npm install cwebp-bin
```


## Usage

```js
import {execFile} from 'node:child_process';
import cwebp from 'cwebp-bin';

execFile(cwebp, ['input.png', '-o', 'output.webp'], err => {
	if (err) {
		throw err;
	}

	console.log('Image is converted!');
});
```


## CLI

```
$ npm install --global cwebp-bin
```

```
$ cwebp --help
```


## License

MIT © [Imagemin](https://github.com/imagemin)
npm package: @imagemin-global/gifsicle
Description: gifsicle wrapper that makes it seamlessly available as a local dependency
Latest version: 7.0.1

# gifsicle-bin ![GitHub Actions Status](https://github.com/imagemin/gifsicle-bin/workflows/test/badge.svg?branch=main)

> gifsicle manipulates GIF image files in many different ways. Depending on command line options, it can merge several GIFs into a GIF animation; explode an animation into its component frames; change individual frames in an animation; turn interlacing on and off; add transparency and much more.

You probably want [`imagemin-gifsicle`](https://github.com/imagemin/imagemin-gifsicle) instead.

## Install

```
$ npm install gifsicle
```

## Usage

```js
import {execFile} from 'node:child_process';
import gifsicle from 'gifsicle';

execFile(gifsicle, ['-o', 'output.gif', 'input.gif'], error => {
	console.log('Image minified!');
});
```

## CLI

```
$ npm install --global gifsicle
```

```
$ gifsicle --help
```
npm package: @imagemin-global/jpegoptim-bin
Description: jpegoptim wrapper that makes it seamlessly available as a local dependency
Author: Shogo Sensui
Latest version: 7.1.0

# jpegoptim-bin ![GitHub Actions Status](https://github.com/imagemin/jpegoptim-bin/workflows/test/badge.svg?branch=main)


> [jpegoptim](https://github.com/tjko/jpegoptim) is a utility for optimizing JPEG files that provides lossless optimization (based on optimizing the Huffman tables) and "lossy" optimization based on setting a maximum quality factor

You probably want [`imagemin-jpegoptim`](https://github.com/imagemin/imagemin-jpegoptim) instead.


## Install

```
$ npm install jpegoptim-bin
```

Make sure you have the correct version of libjpeg. See [jpegoptim's README](https://github.com/tjko/jpegoptim#readme) for more information.


## Usage

```js
import {execFile} from 'child_process';
import jpegoptim from 'jpegoptim-bin';

const args = [
	'--overwrite',
	'--strip-all',
	'--strip-iptc',
	'--strip-icc',
	'--all-progressive',
	'--dest=build',
	'input.jpg'
];

execFile(jpegoptim, args, error => {
	console.log('Image minified');
});
```


## CLI

```
$ npm install --global jpegoptim-bin
```

```
$ jpegoptim --help
```


## License

MIT © [Imagemin](https://github.com/imagemin)
npm package: @imagemin-global/mozjpeg
Description: mozjpeg wrapper that makes it seamlessly available as a local dependency
Latest version: 8.0.0

# mozjpeg-bin ![GitHub Actions Status](https://github.com/imagemin/mozjpeg-bin/workflows/test/badge.svg?branch=main)

> [mozjpeg](https://github.com/mozilla/mozjpeg) is a production-quality JPEG encoder that improves compression while maintaining compatibility with the vast majority of deployed decoders

You probably want [`imagemin-mozjpeg`](https://github.com/imagemin/imagemin-mozjpeg) instead.


## Install

```
$ npm install mozjpeg
```


## Usage

```js
import {execFile} from 'node:child_process';
import mozjpeg from 'mozjpeg';

execFile(mozjpeg, ['-outfile', 'output.jpg', 'input.jpg'], err => {
	console.log('Image minified!');
});
```


## CLI

```
$ npm install --global mozjpeg
```

```
$ mozjpeg --help
```


## License

MIT © [Imagemin](https://github.com/imagemin)
npm package: @imagene.me/nativescript-toast
Description: Imagene.me NativeScript toast plugin
Author: Imagene.me
Latest version: 2.0.3

# Imagene-nativescript-toast based on nativescript-toasty

## Install

### [NativeScript 7.0+](https://github.com/imagene-me/ns-plugins/tree/master/packages/nativescript-toast)

`tns plugin add @imagene-me/nativescript-toast`

## Usage

TypeScript

```js
import { Toasty } from "@imagene-me/nativescript-toast"
// Toasty accepts an object for customizing its behavior/appearance. The only REQUIRED value is `text` which is the message for the toast.
const toast = new Toasty(
    {
        text: 'Toast message',
        variant: ToastVariant.Success
    }
);
toast.show();

// or you can set the properties of the Toasty instance
const toasty = new Toasty({
  text: 'Somethign something...',
  ios: {
    displayShadow: true,
    shadowColor: '#fff000',
    cornerRadius: 24,
  },
});
```

JavaScript

```js
var toasty = require('@imagene-me/nativescript-toast').Toasty;
var toast = new toasty({ text: 'Toast message' });
toast.show();
```

### API

```typescript
export enum ToastDuration {
  'Short',
  'Long',
}

export enum ToastVariant {
  'Success' = 'success',
  'Error' = 'error',
}

/**
 * Custom Variant params
 */
export interface ToastVariantParams {
  backgroundColor: string;
  textColor: string;
}

export interface ToastyOptions {
  /**
   * Message text of the Toast.
   */
  text: string;

  /**
   * Duration to show the Toast.
   */
  duration?: ToastDuration;

  /**
   * Change Toast Variant - default SUCCESS
   */
  variant?: ToastVariant;

  /**
   * Set specific background and text color
   */
  customVariantParams?: ToastVariantParams;

  /**
   * Android specific configuration options.
   */
  android?: any;

  /**
   * iOS Specific configuration options.
   */
  ios?: {
    /**
     * The native iOS view to anchor the Toast to.
     */
    anchorView?: any;

    /**
     * The number of lines to allow for the toast message.
     */
    messageNumberOfLines?: number;

    /**
     * The corner radius of the Toast.
     */
    cornerRadius?: number;

    /**
     * True to display a shadow for the Toast.
     */
    displayShadow?: boolean;

    /**
     * The color of the shadow. Only visible if `displayShadow` is true.
     */
    shadowColor?: Color | string;
  };
}
```
npm package: @imagentleman/reactjs-time-picker
Description: Unstyled, customizable and lightweight reactjs time picker.
Author: imagentleman
Latest version: 7.0.2

# reactjs-time-picker

## Demo

[https://imagentleman.github.io/reactjs-time-picker/](https://imagentleman.github.io/reactjs-time-picker/)

## Package

[https://www.npmjs.com/package/@imagentleman/reactjs-time-picker](https://www.npmjs.com/package/@imagentleman/reactjs-time-picker)

## Usage

```
import React, {useState} from 'react';
import TimePicker from "@imagentleman/reactjs-time-picker";

ReactDOM.render(
  <TimePicker
    className={"my-time-picker-css"}
    inputProps={{ id: "timepicker" }}
    onChange={(value) => console.log(value)}
    closeOnClickOutside
  />,
  document.getElementById("root")
);
```

| Prop | Description |
| --- | --- |
| className | CSS class that overrides the main container styles |
| inputProps | Object with properties to be added to the input |
| onChange | Callback for the change event |
| closeOnClickOutside | Optional attribute to close the picker when clicking outside of it |

## Installation

`npm i @imagentleman/reactjs-time-picker`

## Size

[1kB](https://bundlephobia.com/package/@imagentleman/reactjs-time-picker) minified + gzipped
npm package: @imagepix/client
Description: Client library of imagepix that resize and convert images dynamically.
Author: Smart Algorithm Co., Ltd.
Latest version: 1.0.0

[![CI](https://github.com/s12m/imagepix-client/actions/workflows/ci.yml/badge.svg)](https://github.com/s12m/imagepix-client/actions/workflows/ci.yml)
[![License](https://img.shields.io/npm/l/@imagepix/client.svg?style=flat-square)]()
[![NPM Version](https://badge.fury.io/js/%40imagepix%2Fclient.svg)](https://www.npmjs.com/@imagepix/client)

# imagepix client

Resize, crop and convert images dynamically using imagepix.

## Links

- [TypeDoc](https://imagepix.github.io/client-js/)

## Getting Started

### Installation

```sh
npm install @imagepix/client
```

### Usage

#### Resize to fit

Get an imagepix url to resize image keep aspect ratio.

```js
import { getResizeToFitUrl } from '@imagepix/client'
getResizeToFitUrl('sample/landscape.png', {
  width: 300,
  height: 300,
  format: 'webp',
  quality: 80
}, { subdomain: 'demo' })
```

https://demo.imagepix.app/fit/300/300/webp/80/sample/landscape.png

When you set environment variable `IMAGEPIX_SUBDOMAIN`, you can also write following:

```js
getResizeToFitUrl('sample/landscape.png', {
  width: 300,
  height: 300,
  format: 'webp',
  quality: 80
})
```

#### Resize to fill

Get an imagepix url to resize and crop image.

```js
import { getResizeToFillUrl } from '@imagepix/client'
getResizeToFillUrl('sample/landscape.png', {
  width: 300,
  height: 300,
  gravity: 'c',
  format: 'webp',
  quality: 80
}, { subdomain: 'demo' })
```

https://demo.imagepix.app/fill/300/300/c/webp/80/sample/landscape.png

When you set environment variable `IMAGEPIX_SUBDOMAIN`, you can also write following:

```js
getResizeToFillUrl('sample/landscape.png', {
  width: 300,
  height: 300,
  gravity: 'c',
  format: 'webp',
  quality: 80
})
```

#### Resize to fill_pad

Get an imagepix url to resize image and fill background.

```js
import { getResizeToFillPadUrl } from '@imagepix/client'
getResizeToFillPadUrl('sample/landscape.png', {
  width: 300,
  height: 300,
  gravity: 'c',
  background: 'red',
  format: 'webp',
  quality: 80
}, { subdomain: 'demo' })
```

https://demo.imagepix.app/fill_pad/300/300/c/red/webp/80/sample/landscape.png

When you set environment variable `IMAGEPIX_SUBDOMAIN`, you can also write following:

```js
getResizeToFillPadUrl('sample/landscape.png', {
  width: 300,
  height: 300,
  gravity: 'c',
  background: 'red',
  format: 'webp',
  quality: 80
})
```

## Supported format

### Input

- `jpeg`
- `png`
- `webp`
- `gif`

### Output

- `jpeg`
- `png`
- `webp`
- `gif`

## License

imagepix client is licensed under a [MIT License](./LICENSE).
npm package: @imageproc/cloud-functions
Description: @imageproc/cloud-functions
Author: Argano Inc.
Latest version: 0.0.15

# @imageproc/cloud-functions

Process images on Google Cloud Storage when images are created.

## How to use?

1. Prepare your Google Cloud Functions directory.

```
functions
  |- package.json
  |- index.js
  |- .gcloudignore
 ...
```

2. Install @imageproc/cloud-functions

```
npm install @imageproc/cloud-functions
```

3. Handle stroage trigger

You can use `handleStorageObjectCreated(params: InitParams)` to initialize trigger. The followings are the property of InitParams:

- sourceBucket?: string
  - Source bucket of images
  - This is optional property. If not set, use trigger bucket as the source bucket.
- destBucket?: string
  - Destination bucket of generated images
  - This is optional property. If not set, use trigger bucket as the source bucket.
- ignoreNamePattern?: RegExp
  - Pattern of object name to be ignored.
  - If sourceBucket and destBucket is same, this property is REQUIRED to avoid infinite loop processing.
- destNamePrefix?: string
  - Prefix of destination object name
- destNameTransform?: `(sourceName: string) => void`
  - Function to transfrom object name
  - If this property is set, destNamePrefix property will be ignored.
- operation: Operation
  - Type of image processing
  - name: `resizeAspectFit`
    - params: [ResizeAspectFitParams](../core/src/ImageProcessor.ts#L5-L9)
  - name: `resizeCrop`
    - params: [ResizeCropParams](../core/src/ImageProcessor.ts#L11-L17)
  - name: `convertFormat`
    - params: [ConvertFormatParams](../core/src/ImageProcessor.ts#L19-L21)

Examples:

- Using event target bucket for both source and destination.

```index.js
const imageproc = require("@imageproc/cloud-functions");
// foo.jpg => files/foo.jpg
exports.processImage = imageproc.handleStorageObjectCreated({
    ignorePattern: /^files\//,
    destNamePrefix: "files/",
    opration: {
        name: "resizeAspectFit",
        params: {
            maxWidth: 2000,
            maxHeight: 2000,
            noScaleUp: true
        }
    }
});
```

- Using other buckets for source and destination.

```index.js
const imageproc = require("@imageproc/cloud-functions");
exports.processImage = imageproc.handleStorageObjectCreated({
    sourceBucket: "source-image",
    destBucket: "dest-images",
    ...
});
```

4. Deploy

```
gcloud functions deploy processImage \
--runtime nodejs10 \
--trigger-resource YOUR_BUCKET \
--trigger-event google.storage.object.finalize \
--memory 2048MB \ # recommended
--project YOUR_PROJECT
```
npm package: @imageproc/core
Description: @imageproc/core
Author: Argano Inc.
Latest version: 0.0.15

# @imageproc/core

Image processing core module

## Usage

```shell
npm install @imageproc/core
```

```ts
import * as imageproc from "@imageproc/core";

(async () => {
    const proc = new imageproc.ImageProcessorSharp();
    const sourceBuf = fs.readFileSync("image.png");
    const buf = await proc.resizeAspectFit(sourceBuf, {
        ...
    });
    fs.writeFileSync("generated.png", buf);
})();
```

## ImageProcessor usage

see: [ImageProcessor.ts](./src/ImageProcessor.ts)

## ImageProcessor implementation

- ImageProcessorSharp
  - [sharp](https://github.com/lovell/sharp)
- (Feature Support) ImageProcessorMagick
  - [gm (ImageMagick/GraphicsMagick)](https://github.com/aheckmann/gm)