open-index/open-npm huggingface dataset:
npm package: @ouvill/zero-width-encoder-wasm
Description: ゼロ幅文字にエンコード、デコードします｡
Latest version: 0.2.1

# zero_width_encoder

ゼロ幅文字にエンコード、デコードします｡ 

Rustで開発されたWebAssemblyのパッケージなので、一般的なnpmパッケージと動作が異なる場合があります。

開発段階であり、エンコード、デコードの方式の破壊的な変更があります。

This is WebAssembly npm package

## Install

```
npm install @ouvill/zero-width-encoder-wasm
```

or

```bash
yarn add @ouvill/zero-width-encoder-wasm
```

## Config

WebPackを利用する場合、以下の設定が必要

webpack.config.js

```
module.exports = {
  experiments: {
    asyncWebAssembly: true,
  },
}
```

## Usage

```js
import { decode, encode } from '@ouvill/zero-width-encoder-wasm'

const encoded = encode("Hello World");
console.log(encoded)
const decoded = decode(encode)
console.log(decoded)
```

## build

```
wasm-pack build --scope ouvill
```
npm package: @ouvrages/cordova-plugin-crop
Description: Crop an image in a Cordova app
Latest version: 0.4.0

# Important

## This project is deprecated. No new changes nor bugfixes will be added.


# cordova-plugin-crop



> Crop an image in a Cordova app


## Install

```
$ cordova plugin add --save cordova-plugin-crop
```


## Usage

```js
plugins.crop(function success () {

}, function fail () {

}, '/path/to/image', options)
```

or, if you are running on an environment that supports Promises
(Crosswalk, Android >= KitKat, iOS >= 8)

```js
plugins.crop.promise('/path/to/image', options)
.then(function success (newPath) {

})
.catch(function fail (err) {

})
```

## API

 * quality: Number

The resulting JPEG quality (ignored on Android). default: 100

 * targetWidth: Number

The resulting JPEG picture width. default: -1

 * targetHeight: Number

The resulting JPEG picture height. default: -1

## Ionic / Typescript Example Angular 2 Service

<img src="screenshot-example.png" width="250" height="500">

This is an example service that uses ionic-native's built in camera and the cordova-plugin-crop to create a cropped version of the image and return the file path. 

```js
import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Camera, Crop } from 'ionic-native';

@Injectable()
export class CameraService {

  public options: any = {
        allowEdit: true,
        sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
        mediaType: Camera.MediaType.ALLMEDIA,
        destinationType: Camera.DestinationType.FILE_URI
  }
  
  constructor(public platform: Platform) {}

  // Return a promise to catch errors while loading image
  getMedia(): Promise<any> {
    // Get Image from ionic-native's built in camera plugin
    return Camera.getPicture(this.options)
      .then((fileUri) => {
        // Crop Image, on android this returns something like, '/storage/emulated/0/Android/...'
        // Only giving an android example as ionic-native camera has built in cropping ability
        if (this.platform.is('ios')) {
          return fileUri
        } else if (this.platform.is('android')) {
          // Modify fileUri format, may not always be necessary
          fileUri = 'file://' + fileUri;

          /* Using cordova-plugin-crop starts here */
          return Crop.crop(fileUri, { quality: 100, targetWidth: -1, targetHeight: -1 });
        }
      })
      .then((path) => {
        // path looks like 'file:///storage/emulated/0/Android/data/com.foo.bar/cache/1477008080626-cropped.jpg?1477008106566'
        console.log('Cropped Image Path!: ' + path);
        return path;
      })
  }
  
}  
```



### Libraries used

 * iOS: [PEPhotoCropEditor](https://github.com/kishikawakatsumi/PEPhotoCropEditor)
 * Android: [android-crop](https://github.com/jdamcd/android-crop)

## License

MIT © [Jeduan Cornejo](https://github.com/jeduan)
npm package: @ouvrages/react-daterange-picker
Description: A react date range picker using Material Design
Author: Ouvrages
Latest version: 1.1.0

# react-daterange-picker 
A react date range picker using material-ui components.

<a href='https://www.npmjs.com/package/@matharumanpreet00/react-daterange-picker'>
    <img src='https://img.shields.io/npm/v/@matharumanpreet00/react-daterange-picker.svg' alt='Latest npm version'>
</a>

## Live Demo: https://flippingbitss.github.io/react-daterange-picker/




## Usage

```bash
npm install @matharumanpreet00/react-daterange-picker --save
# or with yarn
yarn add @matharumanpreet00/react-daterange-picker
```

![Screenshot](/screenshot_1.png?raw=true "Screenshot")

## Basic Example
```tsx
import React from "react";
import { DateRangePicker, DateRange } from "@matharumanpreet00/react-daterange-picker";

type Props = {}
type State = {
    open: boolean,
    dateRange: DateRange
}

class App extends React.Component<Props, State> {
	state = {
		open: true,
		dateRange: {}
	};
	
	render() {
		return (
			<DateRangePicker
				open={this.state.open}
				onChange={range => this.setState({ dateRange: range })}
			/>
		);
	}
}

export default App;
```

## Basic example using hooks
```tsx
import React from "react";
import { DateRangePicker, DateRange } from "@matharumanpreet00/react-daterange-picker";

type Props = {}

const App: React.FunctionComponent<Props> = props => {
	const [open, setOpen] = React.useState(false);
	const [dateRange, setDateRange] = React.useState<DateRange>({});

	return (
		<DateRangePicker
			open={open}
			onChange={range => setDateRange(range)}
		/>
	);
}

export default App;
```

## Types 
```ts
interface DateRange {
    startDate?: Date,
    endDate?: Date
}

interface DefinedRange {
    label: string,
    startDate: Date,
    endDate: Date
}
```

## Props

Name | Type | Required | Default value | Description
:--- | :--- | :--- | :--- | :---
`initialDateRange` | `DateRange` | | `{}` | initially selected date range
`minDate` | `Date | string` | | 10 years ago | min date allowed in range
`maxDate` | `Date | string` | | 10 years from now | max date allowed in range
`onChange` | `(DateRange) => void` | _required_ | - | handler function for providing selected date range
`definedRanges` | `DefinedRange[]` | | - | custom defined ranges to show in the list
`locale` | `string` | | "en" | i18n
npm package: @ouvue/core
Description: Simple and scalable service layer(with cache 🤩) for Vue REST clients
Author: Igor Halfeld
Latest version: 0.0.0-beta.2

## Ouvue 👂🏻

[![Travis](https://img.shields.io/travis/IgorHalfeld/ouvue.svg)](https://travis-ci.org/IgorHalfeld/ouvue)
[![Coveralls](https://img.shields.io/coveralls/alexjoverm/typescript-library-starter.svg)](https://coveralls.io/github/alexjoverm/typescript-library-starter)
[![Donate](https://img.shields.io/badge/donate-picpay-green.svg)](http://picpay.me/igorhalfeld)

> ⚠️  Beta version!! Do not use in production!!

Simple and scalable service layer(with cache 🤩) for Vue REST clients

- 🔥 Suports Vue.js 2 and 3 _(in progress on branch `next`)_
- 😙 Zero dependencies
- 💅 Typescript support
- 😍 Code coverage with >90% 

### Install

```javascript
import { create } from '@ouvue/core'
```

### Usage

```js
import { create } from '@ouvue/core'

const services = {
  posts: {
    async getAll () {
      console.log('Getting posts...')
      // You don't need to put on a try/catch, Ouvue does it for you 😉
      const res = await window.fetch('https://jsonplaceholder.typicode.com/posts')
      const result = await res.json()

      return result
    }
  }
}

const api = create({ services })

export default {
  async mounted () {
    const posts = await this.getPosts()
    console.log('Posts', posts)

    window.setTimeout(async () => {
      console.log(await this.getPosts())
    }, 2000)
  },
  methods: {
    async getPosts() {
      return api.fetch('posts/getAll')
    }
  }
}
```

See this code [live](https://ouvue-basic-vue-demo.surge.sh/) and check out [examples folder](https://github.com/IgorHalfeld/ouvue/tree/master/examples/)

### API

- `create(options)` - create instance of `Ouvue`
  _options signature_
    ```js
    {
      services,
      cache: {
        strategy: 'inmemory' // default
      }
    }
    ```
`create` return an object with a `fetch` function and `OuvueRender` component

- `fetch(key, payload, options)` - fetch executes a service.
    ```js
      key: e.g.     'users/create'
      payload: e.g. { name: 'Igor' }
      options: e.g. { onlyNetwork: true } // if exists on cache, call the network and update the cache
    ```
- `<ouvue-render :action="action" :payload="payload" :options="options" />` - fetch executes a service but with component-based approach
    ```html
      e.g.
      <ouvue-render
        action="users/create"
        :payload="{ name: 'Igor' }"
        :options="{ onlyNetwork: true }" />
    ```

### NPM scripts

 - `npm t`: Run test suite
 - `npm start`: Run `npm run build` in watch mode
 - `npm run test:watch`: Run test suite in [interactive watch mode](http://facebook.github.io/jest/docs/cli.html#watch)
 - `npm run test:prod`: Run linting and generate coverage
 - `npm run build`: Generate bundles and typings, create docs
 - `npm run lint`: Lints code
 - `npm run commit`: Commit using conventional commit style ([husky](https://github.com/typicode/husky) will tell you to use it if you haven't :wink:)