open-index/open-npm huggingface dataset:
npm package: @methodexists/dva-ant-breadcrumbs
Description: Antd’s Breadcrumb component connected to dva router
Latest version: 0.1.0

# dva-ant-breadcrumbs

Antd’s Breadcrumb component connected to dva router.

## Installation

```
npm i @methodexists/dva-ant-breadcrumbs
```

## Usage

Put `<Breadcrumbs />` component inside render method of your route component:

```
const UsersPage = ({ routes, params }) => (
  <div>
    <Breadcrumbs routes={routes} params={params} />
  </div>
);
```
### Zero configuraton

The component will analyze route’s `path` and will try to guess the best title for each bread crumb.  

| URL            | Path              | Guessed titles
|----------------|-------------------|---------------
| `/userProfile` | `userProfile`     | "User Profile"
| `/users`       | `users`           | "Users"
| `/users/ilya`  | `users/:username` | "Users" / "Ilya"
|`/users/9jerb`  | `users/:id`       | "Users" / "9jerb" (here you’ll need customization)

### Custom static title
Add `title` prop to a route and it will be used for bread crumb’s title.

```
<Route path="userProfile" title="My Profile" ... />
```

### Custom dynamic title
Add `getTitle` prop to calculate bread crumb’s title basing on `params` from the router and `state`.

```
<Route path=":id" getTitle={(params, state) => state.users[params.id].name} />
```

### Fallbacks
If `getTitle()` prop is undefined or returns `undefined` then use `title`.  
If `title` is undefined then guess title from `path`.


## API

### Routes API

| Prop       |  Type | Description
|------------|----------|---
| `*` `path`  | `string` | Route’s path. If `undefined`, the route will be skipped. Could be param name like `:username`
| `getTitle` | `(params, state) => string` | Function to generate route’s title basing on `params` prop from router and current `state`
| `title`    | `string` | Text to use for route’s title

### `<Breadcrumbs />` API

| Prop     | Description 
|----------|------------
|`*` `routes`| `routes` prop provided by router into root route component
|`*` `params` | `params` prop provided by router into root route component

> `*` required

Also supports Ant Design [Breadcrumb](https://ant.design/components/breadcrumb) component props: `prefixCls`, `separator`, `itemRender`, `style`, `className`.

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for how to develop a component.
npm package: @methodexists/me-calculator
Description: Formulas calculator
Author: Ilya Belsky
Latest version: 0.0.2

# me-calculator

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Describe me-calculator here.

[build-badge]: https://travis-ci.org/MethodExists/me-calculator.svg?branch=master
[build]: https://travis-ci.org/MethodExists/me-calculator

[npm-badge]: https://img.shields.io/npm/v/@methodexists/me-calculator.png?style=flat-square
[npm]: https://www.npmjs.org/package/@methodexists/me-calculator

[coveralls-badge]: https://coveralls.io/repos/github/MethodExists/me-calculator/badge.svg
[coveralls]: https://coveralls.io/github/MethodExists/me-calculator
npm package: @methodexists/me-grid
Description: Grid component to represent data handled by me-core
Latest version: 0.1.0

# me-grid

Grid component to represent data handled by [me-core](https://github.com/MethodExists/me-core).

## Usage

Use `<Grid />` component inside [`<ListProvider />`](https://github.com/MethodExists/me-core#listprovider--component) to present data from a model.

### Minimal
```
<ListProvider
  namespace="users"
  table="users"
>
  <Grid
    routePath="/users"
    namespace="users"
    columns={[{
      keyPath: 'username',
    }, {
      keyPath: 'name',
    }]}
  />
</ListProvider>
```
Assumes that app state has `schemas.users` populated by Schemas model and `lists.users` populated by Lists model. `<ListProvider />` does this job seamlessly.

## API

### `<Grid />` props

| Prop           | Type     | Default     | Description
|----------------|----------|-------------|-------------
| `*`routePath   | string   |             |
| `*`namespace   | string   |             |
| `*`columns     | array    |             |
| primaryKey     | string   | `'id'`      |
| showEdit       | bool     | `true`      |
| showDelete     | bool     | `false`     |
| afterDelete    | func(id) | `undefined` | Will be called after successfull delete. Deleted record `id` passed as a param
| link           | func     | `undefined` |
| size           | string   | `'default'` |


### `columns` props

| Prop         | Type   | Description
|--------------|--------|------------
| `*`keyPath   | string |
| link         | bool   |
| render       | func   |

Also supports Ant Design Table [column](https://ant.design/components/table/#Column) props


## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for how to develop a component.
npm package: @methodexists/me-help
Description: Help System components
Latest version: 0.1.0

# me-help

Help system for MethodExists apps.

## Usage

`<HelpWrapper>` requires `help` namespace and `help` table to operate. `<HelpWrapperReadOnly>` could be used as is without model.

### Setting up

Create `help` table with the schema as in '/abt/schema/help' mock in `demo/src/apiService.js` file.

Provide API Service into module using `init` method:

```
import { init as initHelp } from '@methodexists/me-help';

// ...

initHelp({
  apiService: APIService,
});
```

Register help model in the app:

```
import { model as helpModel } from '@methodexists/me-help';

// ...

app.model(helpModel);
```

### Using backend-powered Help

Wrap text or component into `<HelpWrapper>` and provide required `id` prop:

```
import HelpWrapper from '@methodexists/me-help';

// ...

<HelpWrapper id="help-id-1">
  Wrapped text or component
</HelpWrapper>
```

It will show help topic stored by 'help-id-1' `id` in the `help` table.
Admins may create and edit that topic. Other users may see it only if it has content.

### Using readonly Help

Wrap text or component into `<HelpWrapperReadOnly>` and provide optional `body` and `videoUrl` props:

```
import { HelpWrapperReadOnly } from '@methodexists/me-help';

// ...

<HelpWrapperReadOnly body="Help text" videoUrl="http://...">
  Wrapped text or component
</HelpWrapperReadOnly>
```

`HelpWrapperReadOnly` acts as `HelpWrapper` for non-admin users. If both `body` and `videoUrl` are undefined then nothing will be rendered.

## API

### `<HelpWrapper />`

| Prop            | Type                | Description
| --------------- | ------------------- | -----------
| `*` id          | string              | ID to access help topic from `help` table
| isAdminSelector | func(state) => bool | Receives `state` as argument and returns `true` or `false`. By default returns `true` if `auth.profile.groups[]` includes 'Admins'
| buttonClassName | string              | Custom class for `?` button

### `<HelpWrapperReadOnly />`

| Prop     | Type   | Description
| -------- | ------ | -----------
| body     | string | Text to show in the popup
| videoUrl | string | Video to show in the popup

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for how to develop a component.
npm package: @methodexists/me-rich-editor
Description: Rich editor component for me-schema-form
Latest version: 0.0.3

# me-rich-editor

React rich text editor with image upload support

## Usage

### Minimal setup

```
import RichEditor from '@methodexists/me-rich-editor';

<RichEditor
  value={this.state.value}
  onChange={value => this.setState({ value })}
/>
```
This will render textarea with default toolbar and allows to produce HTML `value` in a visual way.

### Custom Image Uploader

```
import RichEditor from '@methodexists/me-rich-editor';

const handleImageUpload = (file) => {
  // notify user that the image is uploading
  const hide = message.loading(`Uploading ${file.name}…`, 0);
  return upload(file) // call API to upload the file
    // then hide the spinner and return the URL of the uploaded file
    .then((res) => { hide(); return res.url; });
};


<RichEditor
  value={this.state.value2}
  onChange={value2 => this.setState({ value2 })}
  onImageUpload={handleImageUpload}
/>
```

If `onImageUpload` prop is specified it will be called when user selects an image to upload.  
The handler should return a promise which resolves with the URL of the uploaded image.   
Also the handler is repsonsible for showing a spinner during the upload and hiding it when upload is finished.  

## API

| Prop          | Type                           | Default   | Description
| ------------- | ------------------------------ | --------- | -----------
| `*` value     | HTML string                    |           | The text to render in the editor
| `*` onChange  | func(value:string)             |           | Called on any change with new HTML value
| onImageUpload | func(file:fileObject): Promise | undefined | Custom image uploader handler. Should return a promise which resolves to the uploaded image URL
| modules       | object                         | undefined | If specified will replace default modules prop for [react-quill](https://github.com/zenoamaro/react-quill#props)
| debounceDelay | number                         | 700       | Delay in milliseconds before firing `onChange` handler when typing in the editor

> Default modules are defined in [src/index.js](src/index.js#L24-L37)

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for how to develop a component.
npm package: @methodexists/me-uploader
Description: File uploader component
Latest version: 0.1.6

# me-uploader

Describe me-uploader.

## Usage

### Setting up

Provide API Service into module using `init` method:

```
import { init as initUploader } from '@methodexists/me-uploader';

// ...

initUploader({ apiService: APIService });

```

Register file uploader model in the app:

```
import fileUploaderModel from '@methodexists/me-uploader/lib/model';

// ...

app.model(fileUploaderModel);
```

## API

### `getPresignedUrl(filename, path, customUrl)`
Low-level get presigned url method. Returns Promise that resolves with server response.
Params:
`filename` - name of the file to download
`path` - path to downloaded file
`customUrl` -  the request for presignedUrl is being sent to this relative path

Successful promise shall resolve with result: `{ url }  `

### `upload(dispatch, path, fileObject, customUrl)`
Low-level upload method. Returns Promise.
Params:
`dispatch` - dva/redux `dispatch` method
`path` - path to upload file
`fileObject` - file object from html input[type="file"]
`customUrl` - if defined, the request for presignedUrl is being sent to this relative path

Successful promise resolves with result: `{ url, id }  `

### `remove(filename, path, customUrl)`
Low-level remove file method. Returns Promise that resolves with server response.
Params:
`filename` - name of the file to remove
`path` - path to removed file
`customUrl` -  the request for file deletion is being sent to this relative path

Successful promise shall resolve with result: `{ url }  `

Usage example:

```
import { upload } from 'me-uploader';

// ...

upload(dispatch, 'files/images', file)
  .then((file) => console.log('File URL:', file.url));
```

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for how to develop a component.
npm package: @methodfi/opal-react
Description: React SDK for Opal integration
Author: Method
Latest version: 1.4.4

# @methodfi/opal-react

React SDK for integrating Method Opal into your web applications.

## Installation

```bash
npm install @methodfi/opal-react
# or
yarn add @methodfi/opal-react
```

## Quick Start

### 1. Provider Setup

Wrap your app with the `OpalProvider`:

```tsx
import { OpalProvider } from '@methodfi/opal-react';

export default function App() {
  return (
    <OpalProvider>
      <YourAppContent />
    </OpalProvider>
  );
}
```

### 2. Hook Usage

Use the `useOpal` hook in your components:

```tsx
import { useOpal, OpalEventType } from '@methodfi/opal-react';

function Screen() {
  const { open, close, isOpen, error } = useOpal({
    env: 'dev',
    onOpen: () => {},
    onExit: () => {},
    onEvent: event => {
      switch (event.type) {
        case OpalEventType.SESSION_STARTED:
          // ...
          break;
        case OpalEventType.SESSION_COMPLETED:
          // ...
          break;
        case OpalEventType.SESSION_ERRORED:
          // ...
          break;
        case OpalEventType.SESSION_EXITED:
          // ...
          break;
      }
    },
  });

  const onLaunchOpal = async () => {
    const token = await getOpalToken(); // POST /opal/token
    open({ token });
  };

  return <button onClick={onLaunchOpal}>Launch Opal</button>;
}
```
npm package: @methodfi/opal-react-native
Description: React Native SDK for Opal integration
Author: Method Finance
Latest version: 1.4.4

# @methodfi/opal-react-native

React Native SDK for integrating Method Opal into your mobile applications.

## Installation

```bash
npm install @methodfi/opal-react-native
# or
yarn add @methodfi/opal-react-native
```

## Quick Start

### 1. Provider Setup

Wrap your app with the `OpalProvider`:

```tsx
import { OpalProvider } from '@methodfi/opal-react-native';

export default function App() {
  return (
    <OpalProvider>
      <YourAppContent />
    </OpalProvider>
  );
}
```

### 2. Hook Usage

Use the `useOpal` hook in your components:

```tsx
import { useOpal, OpalEventType } from '@methodfi/opal-react-native';

function Screen() {
  const { open } = useOpal({
    env: 'dev',
    onOpen: () => {},
    onExit: () => {},
    onEvent: event => {
      switch (event.type) {
        case OpalEventType.SESSION_STARTED:
          // ...
          break;
        case OpalEventType.SESSION_COMPLETED:
          // ...
          break;
        case OpalEventType.SESSION_ERRORED:
          // ...
          break;
        case OpalEventType.SESSION_EXITED:
          // ...
          break;
      }
    },
  });

  const onLaunchOpal = async () => {
    // Resulting token from POST /opal/token (otkn_*)
    const token = await getOpalToken();
    open({ token });
  };

  return <Button title="Launch Opal" onPress={onLaunchOpal} />;
}
```
npm package: @methodgrab/animation-events
Description: Find the (prefixed) JavaScript event names for CSS animations & transitions supported by the current browser
Author: MethodGrab
Latest version: 0.2.0

# CSS Animation Event Names [![Build Status](https://travis-ci.org/MethodGrab/animation-events.svg?branch=master)](https://travis-ci.org/MethodGrab/animation-events)
> Find the (prefixed) JavaScript event names for CSS animations & transitions supported by the current browser.


## Install
```bash
npm install --save @methodgrab/animation-events
```


## Example:
```js
const animEvents = require( '@methodgrab/animation-events' );

// get & cache the prefixed event names
const transitionEnd      = animEvents.transitionEndEventName();
const animationEnd       = animEvents.animationEndEventName();
const animationIteration = animEvents.animationIterationEventName();

$( '.el' )
	.addClass( 'is-transitioning' )
	.one( transitionEnd, (  ) => {
		console.log( 'Transition complete!' );
		$( '.el' ).removeClass( 'is-transitioning' );
	};
```


## API

### `transitionEndEventName()`
→ `string`  
Find the (prefixed) [`transitionend`](https://developer.mozilla.org/en-US/docs/Web/Events/transitionend) event name.  
The `transitionend` event is fired when a CSS transition has completed.


### `animationEndEventName()`
→ `string`  
Find the (prefixed) [`animationend`](https://developer.mozilla.org/en-US/docs/Web/Events/animationend) event name.  
The `animationend` event is fired when a CSS animation has completed.


### `animationIterationEventName()`
→ `string`  
Find the (prefixed) [`animationiteration`](https://developer.mozilla.org/en-US/docs/Web/Events/animationiteration) event name.  
The `animationiteration` event is fired when **an iteration** of an animation ends.
npm package: @methodgrab/eslint-config-standard
Description: ESLint config
Author: MethodGrab
Latest version: 0.10.0

# eslint-config-standard [![Build Status](https://travis-ci.org/MethodGrab/eslint-config-standard.svg?branch=master)](https://travis-ci.org/MethodGrab/eslint-config-standard)

My ESLint [shareable config](http://eslint.org/docs/developer-guide/shareable-configs).  


## Install
```
npm install --save-dev @methodgrab/eslint-config-standard
```

For `esnext` with [certain non-finalised features](https://github.com/babel/babel-eslint#readme) `babel-eslint` will be needed as well:
```
npm install --save-dev @methodgrab/eslint-config-standard babel-eslint
```

For `react`:
```
npm install --save-dev @methodgrab/eslint-config-standard babel-eslint eslint-plugin-react
```

For `ava`:
```
npm install --save-dev @methodgrab/eslint-config-standard eslint-plugin-ava
```


## Usage
Extend it in your `.eslintrc.js`
```js
module.exports = {
	extends : [
		'@methodgrab/standard',
	],

	rules : {
		// override shared config rules
	},
};
```

The default ESLint parser has good support for ES2015+ built in. The `babel-eslint` parser is only required if your code includes [certain non-finalised features](https://github.com/babel/babel-eslint#readme).
```js
module.exports = {
	extends : [
		'@methodgrab/standard',
		'@methodgrab/standard/esnext',
	],

	parser : 'babel-eslint',

	rules : {},
};
```

You can override settings from the shared config by adding them directly into your `.eslintrc.js` config.


## Additional Configs

* `strict` - less relaxed
* `esnext` - ES2015 (ES6)+
* `react` - `esnext` + React.js rules
* `ava` - `esnext` + AVA rules
* `browser` - browser env
* `legacy` - `browser` + ES3

Example:
```js
module.exports = {
	extends : [
		'@methodgrab/standard',
		'@methodgrab/standard/esnext',
	]
};
```
npm package: @methodgrab/is
Description: Browser detection from a user agent string
Author: MethodGrab
Latest version: 0.2.0

# is [![Build Status](https://travis-ci.org/MethodGrab/is.svg?branch=master)](https://travis-ci.org/MethodGrab/is)
> Browser detection from a user agent string.


## Why
Feature detection is preferable but sometimes it's not enough to deal with device specific quirks.


## Install
```bash
npm install --save @methodgrab/is
```


## Usage

### Basic
```js
const is = require( '@methodgrab/is' );

is.ios();
// No UA specified, `navigator.userAgent` is used if possible
// → `true` on iOS devices, `false` elsewhere
```

### Custom User Agent
You can pass a custom user agent when initializing the library:

```js
const is = require( '@methodgrab/is' )( 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.155 Safari/537.36' );

is.chrome();
// → always `true`

is.ios();
// → always `false`
```

Or at run time:

```js
const is = require( '@methodgrab/is' );

is.chrome( 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.155 Safari/537.36' );
// → always `true`

is.ios( 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.155 Safari/537.36' );
// → always `false`
```


## API

### `is.iosVersion()`
Get the `major`, `minor` & `patch` versions of iOS.  
The values for each will be `-1` if undefined or not iOS.  

Example: iOS 9.3.2 → `{ major: 9, minor: 3, patch: 2 }`  
Example: iOS 9.0 → `{ major: 9, minor: 0, patch: -1 }`  
Example: OS X → `{ major: -1, minor: -1, patch: -1 }`  

### `is.ios()`
Check if the user agent indicates that the device is iOS.

### `is.safari()`
Check if the user agent indicates that the device is Safari.

### `is.chrome()`
Check if the user agent indicates that the device is Chrome.

### `is.ie()`
Check if the user agent indicates that the device is Internet Explorer.

### `is.ie9()`
Check if the user agent indicates that the device is Internet Explorer 9.

### `is.ie10()`
Check if the user agent indicates that the device is Internet Explorer 10.

### `is.ie11()`
Check if the user agent indicates that the device is Internet Explorer 11.

### `is.edge()`
Check if the user agent indicates that the device is Microsoft Edge.
npm package: @methodgrab/scroll-to
Description: A wrapper around `jQuery.animate({ scrollTop: offset })` to scroll the page to a specific element
Author: MethodGrab
Latest version: 0.2.0

# Scroll To
> A wrapper around `jQuery.animate({ scrollTop: offset })` to scroll the page to a specific element.


## Install
```bash
npm install --save @methodgrab/scroll-to
```


## Examples:
```js
const scroll2 = require( '@methodgrab/scroll-to' );

$( '.btn' ).on( 'click', function( e ) {
	scroll2( '.some-element' );
});
```

```js
const scroll2 = require( '@methodgrab/scroll-to' );

$( '.btn' ).on( 'click', function( e ) {
	scroll2( '.some-element', { duration: 1000, padding: 5 } )
	.then( () => console.log( 'Done!' ) );
});
```


## API
`scroll2( selector, { duration, padding } )`  
Returns a `Promise` that resolves when the scroll completes

### `selector`
`String`  
The CSS selector of an element.

### `options.duration`
`Number` (default: `250`)  
The scroll duration in ms.

### `options.padding`
`Number` (default: `50`)  
An additional value, in px, to add to the scroll offset.  
Useful to avoid scrolling to content under fixed headers etc.