open-index/open-npm huggingface dataset:
npm package: @iodp/iodp-navbar
Description: IODP Navbar provides a common navbar UI element shared by IODP apps. The navbar element contains a `<ng-content>` element which is used to display other app content, likely through providing it with a `<router-outlet>`. The ng-content element occupies all
Author: menzelr
Latest version: 0.0.57

IODP Navbar provides a common navbar UI element shared by IODP apps. The navbar element contains a `<ng-content>` element which is used to display other app content, likely through providing it with a `<router-outlet>`. The ng-content element occupies all space not used by the navbar.  

To use this component complete the following steps:  

1. Install the package.  
&nbsp;&nbsp;&nbsp;&nbsp;npm install @iodp/iodp-navbar  

2. Import IODPNavbarModule into your app's Core module.  
&nbsp;&nbsp;&nbsp;&nbsp;import { IODPNavbarModule } from '@iodp/iodp-navbar';  
&nbsp;&nbsp;&nbsp;&nbsp;...  
&nbsp;&nbsp;&nbsp;&nbsp;imports: [  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IODPNavbarModule  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...  
&nbsp;&nbsp;&nbsp;&nbsp;],  
&nbsp;&nbsp;&nbsp;&nbsp;...  

3. Use your app's Core component to render the element:  
&nbsp;&nbsp;&nbsp;&nbsp;...  
&nbsp;&nbsp;&nbsp;&nbsp;template: '`<iodp-navbar><router-outlet></router-outlet></iodp-navbar>`',  
&nbsp;&nbsp;&nbsp;&nbsp;...  

4. Include something like the following in your app's startup service:  
&nbsp;&nbsp;&nbsp;&nbsp;private _navbarLinks:NavbarLink[] = [  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;icon: 'open_in_new',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: 'IODPAdmin',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: 'some_link'  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;icon: 'open_in_new',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: 'CatalogManager',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:  'some_link'  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;]  

&nbsp;&nbsp;&nbsp;&nbsp;private _navbarParams:NavbarParams = {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title: 'IODP DataCapture',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logoPath: 'some_path',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;links: this._navbarLinks  
&nbsp;&nbsp;&nbsp;&nbsp;}  

&nbsp;&nbsp;&nbsp;&nbsp;constructor(private navbar:IODPNavbarService) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.navbar.setNavbarParams(this._navbarParams);  
&nbsp;&nbsp;&nbsp;&nbsp;}
npm package: @ioe/promise
Description: 符合Promises/A+规范的promise实现
Author: xiongmeihui
Latest version: 1.0.0

1. 先考虑 promise 中只封装同步操作的情况
2. 支持异步，参照观察者模式，在 pending 状态中暂存回调
3. 链式调用（难点）
npm package: @iofate/react-coinbase-commerce
Description: A react component to easily embed a Coinbase Commerce Checkout within your application
Author: IOfate
Latest version: 1.0.0

# React Coinbase Commerce

[![Node.js CI](https://github.com/IOfate/react-coinbase-commerce/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/IOfate/react-coinbase-commerce/actions/workflows/node.js.yml)

A totally rewritten version of https://github.com/coinbase/react-coinbase-commerce in Typescript maintained by IOfate.

A button to embed a Coinbase Commerce checkout or charge directly into your React application.

```
npm i -S @iofate/react-coinbase-commerce
```

### Table of Contents
- [Usage](#usage)
- [Getting Started](#getting-started)
- [Docs](#docs)

## Usage
```jsx
import { CoinbaseCommerceButton } from '@iofate/react-coinbase-commerce';
import '@iofate/react-coinbase-commerce/esm/index.css';

const App = () => {
  return (
    <CoinbaseCommerceButton checkoutId={'My checkout ID'}/>
  )
};
```

## Getting Started
1. To start accepting digital currency payments, first register for a Coinbase Commerce
account [here](https://commerce.coinbase.com).
1. Whitelist your domain in Settings.
1. Follow the API Documentation [here](https://commerce.coinbase.com/docs/api/) to create a charge or checkout.
    - Alternatively, create a checkout from the merchant dashboard and copy the ID found in the checkout's details.
1. Pass the ID of the charge or checkout you create to the `CoinbaseCommerceButton` component
1. That's it! You're ready to start accepting digital currency payments with Coinbase Commerce

## Docs

### Props
In addition to the regular `button` props, this component accepts some custom props:

| Prop Name       | default | required              | type                  |
|-----------------|---------|-----------------------|-----------------------|
| `styled`        | false   | no                    | ``boolean``               |
| `checkoutId`      | null     | If no chargeId, yes   | ``string``                |
| `chargeId`        | null     | If no checkoutId, yes | ``string``                |
| `onLoad`          | null     | no                    | `()=>void`            |
| `onChargeSuccess` | null     | no                    | `(MessageData)=>void` |
| `onChargeFailure` | null     | no                    | `(MessageData)=>void` |
| `onPaymentDetected` | null     | no                    | `(MessageData)=>void` |
| `onModalClosed`   | null     | no                    | `()=>void`            |
| `disableCaching`   | false     | no                    | `boolean`            |
| `customMetadata`   | null     | no                    | `string`              |

**Warning**: If `disableCaching` is set to `true`, users that accidentally close their payment windows will be unable to see their transaction's status upon reopening.
npm package: @ioffice/eslint-config
Description: Default ESLint configuration for iOFFICE projects.
Author: iOFFICE
Latest version: 0.0.5

# eslint-config

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

iOFFICE TypeScript Style Guide
npm package: @ioffice/fp
Description: [![NPM Version](https://img.shields.io/npm/v/@ioffice/fp.svg)](https://www.npmjs.com/package/@ioffice/fp) [![License](https://img.shields.io/npm/l/@ioffice/fp.svg)](LICENSE) [![Build Status](https://travis-ci.com/iOffice/fp-eslib.svg?branch=master)](https
Author: iOFFICE Team
Latest version: 0.3.0

# @ioffice/fp

[![NPM Version](https://img.shields.io/npm/v/@ioffice/fp.svg)](https://www.npmjs.com/package/@ioffice/fp)
[![License](https://img.shields.io/npm/l/@ioffice/fp.svg)](LICENSE)
[![Build Status](https://travis-ci.com/iOffice/fp-eslib.svg?branch=master)](https://travis-ci.com/iOffice/fp-eslib)
npm package: @ioffice/prettier-config
Description: iOFFICE Prettier config
Author: iOFFICE
Latest version: 1.0.0

iOFFICE [Prettier](https://prettier.io) config.

## Usage

**Install**:

```bash
$ pnpm add @ioffice/prettier-config -E -D
```

**Edit `package.json`**:

```jsonc
{
  // ...
  "prettier": "@ioffice/prettier-config"
}
```
npm package: @iogui/iogui
Description: IoGui is a simple web framework for the web.
Author: Aleksandar
Latest version: 0.0.1-rc6

  <p style="margin-top:2em"><a href="https://iogui.dev" target="_blank" rel="noopener noreferrer"><img width="256" src="https://iogui.dev/iogui/images/logo/io-logo.svg" alt="IoGui Logo"></a></p>

IoGui is a user interface library and a framework for web development written in pure JavaScript and CSS. It relies on modern APIs such as ES6 modules, custom elements and WebGL to bring simplicity and performance to web development.

IoGui can be used in various development environments and it plays well with common tools, libraries and frameworks. The core library weights only 7.5KB and the custom elements library is only 52KB.

IoGui lets you write fast, type-safe and reactive custom elements that respond to state changes, data binding events and object mutations. It has comprehensive documentation, wide test coverage and a collection of examples and demos.

IoGui includes a robust UI system with menus, layout panels, object editors, color pickers, sliders and more. It can also support entire application architecture with routing, tree shaking and code splitting.

For quick start, read about the [basic usage](https://iogui.dev/#path=docs/introduction/), check out the included [collection of elements](https://iogui.dev/#path=demos/elements) and the <a href="https://github.com/io-gui/iogui/" target="_blank">source code</a>. Stay in touch on <a href="https://twitter.com/ioguij" target="_blank">Twitter</a>.

<p align="center">
  <a href="https://www.npmjs.com/package/@iogui/iogui"><img src="https://img.shields.io/npm/v/@iogui/iogui.svg" alt="NPM package" /></a>
  <a href="https://bundlephobia.com/result?p=@iogui/iogui"><img src="https://badgen.net/bundlephobia/minzip/@iogui/iogui" alt="Build Size" /></a>
  <a href="https://github.com/io-gui/iogui/actions?query=workflow%3ACI"><img src="https://github.com/io-gui/iogui/workflows/CI/badge.svg" alt="Build Status" /></a>
  <a href="https://david-dm.org/io-gui/iogui"><img src="https://status.david-dm.org/gh/io-gui/iogui.svg" alt="Dependencies" /></a>
  <a href="https://david-dm.org/io-gui/iogui?type=dev"><img src="https://status.david-dm.org/gh/io-gui/iogui.svg?type=dev" alt="Dev Dependencies" /></a>
  <a href="https://lgtm.com/projects/g/io-gui/iogui/context:javascript"><img src="https://img.shields.io/lgtm/grade/javascript/g/io-gui/iogui.svg?label=code%20quality" alt="Code Quality" /></a>
  <a href="https://github.com/io-gui/iogui/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@iogui/iogui.svg" alt="License" /></a>
</p>