open-index/open-npm huggingface dataset:
npm package: @matrixpilldefi/sdk
Description: 🛠 An SDK for building applications on top of matrixdefi.
Latest version: 0.0.1

# Pancakeswap SDK

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Actions Status](https://github.com/pancakeswap/pancakeswap-sdk/workflows/CI/badge.svg)](https://github.com/pancakeswap/pancakeswap-sdk)
[![npm version](https://img.shields.io/npm/v/@pancakeswap-lib/sdk/latest.svg)](https://www.npmjs.com/package/@pancakeswap-lib/sdk/v/latest)

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/pancakeswap/pancakeswap-sdk.git
```

Move into the pancakeswap-sdk working directory

```sh
cd pancakeswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @matrixpilldefi/uikit
Description: Set of UI components for pancake projects
Latest version: 0.1.5

# 🥞 MatrixDefi UIkit

[![Version](https://img.shields.io/npm/v/@matrixpilldefi/uikit)](https://www.npmjs.com/package/@matrixpilldefi/uikit) [![Size](https://img.shields.io/bundlephobia/min/@matrixpilldefi/uikit)](https://www.npmjs.com/package/@matrixpilldefi/uikit)

MatrixDefi UIkit is a set of React components and hooks used to build pages on MatrixDefi's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @matrixpilldefi/uikit`

## Setup

### Theme

Before using MatrixDefi UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@matrixpilldefi/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@matrixpilldefi/uikit'
...
<ResetCSS />
```
npm package: @matrixs/util
Description: Common Utils For React Component
Latest version: 1.0.4

# @matrix/utils

Common Utils For React Component.

## Install

```
npm install  @matrix/utils
```

API

### createModal

A function to create a modal instance

```
/**
 * @param {React.ComponentType} Com  React.Component
 * @param {object} [props]  Component props
 * @param {Element} [container] dom
 * @returns {object} {openModal,closeModal,destroyModal}
 */

 function createModal<T>(Com:React.ComponentType<T>,props?:T,container?:Element){}

```

Properties in modal And its meaning.

| Field        | Type                    | Description                                                              | Default |
| ------------ | ----------------------- | ------------------------------------------------------------------------ | ------- |
| openModal    | function(props?:object) | A function to open Modal                                                 | -       |
| closeModal   | function                | A function to close Modal. It just changes the value of open true=>false | -       |
| destroyModal | function                | A function to destroy Modal. Will destroy the child component            | -       |

#### Usage

```typescript jsx

// Child Component
import { Modal } from 'antd';

const Child = (props) => {

  const { open, closeModal, destroyModal } = props;

  return (
    <Modal open={open} onCancel={destroyModal}>
      child
    </Modal>
  );
}

// Parent Component

import { createModal } from ' @matrix/utils';
import { Button } from 'antd';

import Child from '../components/Child';

const Parent = () => {

  const onClick = () => {
    const modal = createModal(Child);
    modal.openModal();
  };

  return (
    <Button onClick={onClick}>open modal</Button>
  );
}

```

### useModal

A custom hook that returns a modal instance. The parameters and return values are the same as createModal

#### Usage

```typescript jsx

// Child Component
import { Modal } from 'antd';

const Child = (props) => {

  const { open, closeModal, destroyModal,id } = props;

  React.useEffect(()=>{
    if(id){
      // fetchData()
    }
  },[id])

  return (
    <Modal open={open} onCancel={destroyModal}>
      child
    </Modal>
  );
}

//  Parent Component

import { useModal } from ' @matrix/utils';
import { Button } from 'antd';

import Child from '../components/Child';

const Parent = () => {
  const modal = useModal(Child);

  const onCreate = () => {
    modal.openModal();
  };

  const onEdit = () => {
    modal.openModal({ id: 123 });
  };

  return (
    <>
      <Button onClick={onCreate}>create</Button>
      <Button onClick={onEdit}>edit</Button>
    </>
  );
};

```
npm package: @matron/schematics
Description: Matron Schematics actions used by matron cli
Author: Yann Renaudin
Latest version: 0.16.1

# `@matron/schematics`

> TODO: description

## Usage

```
const schematics = require('@matron/schematics');

// TODO: DEMONSTRATE API
```

## TODO

- [ ] Use only webpack to bundle instead of a mix with tsc

## Development

### Add new schematic

- Create schematic action folder under `src/collection`
- Add configuration in `src/collection.json`
npm package: @matrunchyk/vue3-tel-input
Description: International Telephone Input with Vue
Author: Serhii Matrunchyk
Latest version: 1.0.20-alpha7

# vue3-tel-input

International Telephone Input with Vue.

[![](https://img.shields.io/npm/dt/vue3-tel-input.svg)](https://www.npmjs.com/package/vue3-tel-input) [![](https://img.shields.io/github/stars/matrunchyk/vue3-tel-input.svg)](https://github.com/matrunchyk/vue3-tel-input)

<p>
<img width="600px" alt="In-action GIF" src="https://thumbs.gfycat.com/EducatedPoliteBluefintuna-size_restricted.gif"/>
</p>

## Documentation and live demo

[Visit the website](https://iamstevendao.github.io/vue-tel-input/)

## Getting started

- Install the plugin:

  ```sh
  npm install @matrunchyk/vue3-tel-input
  ```

- Add the plugin into your app:

  ```javascript
  import Vue from 'vue'
  import VueTelInput from 'vue3-tel-input'
  import 'vue3-tel-input/dist/style.css'

  Vue.use(VueTelInput)
  ```

  [More info on installation](#installation)

- Use the `vue-tel-input` component:

  ```html
  <template>
    <vue-tel-input v-model="phone"></vue-tel-input>
  <template>
  ```

## Installation

### npm

```bash
  npm install @matrunchyk/vue-tel-input
```

Install the plugin into Vue:

```javascript
import Vue from 'vue'
import VueTelInput from '@matrunchyk/vue3-tel-input'
import '@matrunchyk/vue3-tel-input/dist/style.css'

Vue.use(VueTelInput, options) // Define default global options here (optional)
```

> View all available options in [Props](https://iamstevendao.github.io/vue-tel-input/documentation/props.html).

Or use the component directly:

```html
<!-- your-component.vue-->
<template>
  <vue-tel-input v-model="value"></vue-tel-input>
</template>
<script>
import { VueTelInput } from '@matrunchyk/vue3-tel-input'

export default {
  components: {
    VueTelInput,
  },
};

```

## Changelog

[Go to Github Releases](https://github.com/iamstevendao/vue-tel-input/releases)

## Development

Clone the project

```bash
  git clone https://github.com/iamstevendao/vue-tel-input.git
```

Go to the project directory & checkout the `next` branch

```bash
  cd vue-tel-input
  git checkout next origin/next
```

Install dependencies

```bash
  npm install
```

Build the project

```bash
  npm run build
```

Start the es build example

```bash
  npm run dev
```

Start the browser build example

```bash
  npx http-server -p 8080
  # 127.0.0.1:8080/examples/browser.html
```

## License

Copyright (c) 2022 Serhii Matrunchyk.
Copyright (c) 2018 Steven Dao.
Released under the [MIT License](https://github.com/iamstevendao/vue-tel-input/blob/master/LICENSE).

made with &#x2764; by [Steven](https://github.com/iamstevendao).
npm package: @matrx/dragster
Description: Port of Ben Smithett's dragster to ES6. Wraps native dragenter/dragleave to behave like mouse event when hovering over child DOM elements.
Author: Larry Maccherone
Latest version: 0.6.0

# `@matrx/dragster`

`@matrx/dragster` is a port of [Ben Smithett's dragster](http://bensmithett.github.io/dragster) to ES6. 
It wraps the native dragenter/dragleave to behave like mouse event when hovering over child DOM elements.

## Differences from the original
  
  * Has been converted from CoffeeScript to JavaScript
  * Has had its events renamed to 'dragster-enter' and 
    'dragster-leave'
  * Uses ES6 Class
  * Keeps track of its instances for later reference so your drop 
    callback has a way to call `reset()`
  * Provides a `destroy()` method that can be used as a callback to 
    remove said instances. If you use this with Svelte's `use:` 
    directive, then Svelte will automatically call `destroy()` as
    something is removed from the DOM.

## Usage

To install with npm

```bash
npm install --save @matrx/dragster
```

In a .svelte file

```html
<script>
  import {Dragster} from '@matrx/dragster'

  function addDragster(node) {
    return new Dragster(node)
  }

  let thingBeingDragged

  function dragStart(event) {
    thingBeingDragged = event.target.id
    event.target.style.opacity = .5
  }

  function drop(event) {
    const id = event.target.id
    Dragster.reset(event.target)  // Very important!
    console.log('id of drop zone', id)
    console.log('id of thing being dragged', thingBeingDragged)
  }

  function enter(event) {
    event.target.style.background = 'grey'
  }

  function leave(event) {
    event.target.style.background = '' 
  }

  function over(event) {  
    event.preventDefault()  // Very important!
  }

  function dragEnd(event) {
    event.target.style.opacity = ""
  }
</script>

<style>
  .draggable {
    width: 200px;
    height: 20px;
    text-align: center;
    background: blue;
  }

  .dropzone {
    width: 200px;
    height: 20px;
    text-align: center;
    background: purple;
  }
</style>

<div use:addDragster id="must-be-unique" class="dropzone" on:drop={drop} on:dragster-enter={enter} on:dragster-leave={leave} on:dragover={over}>
  Drop something on me
</div>

<div id='must-also-be-unique' draggable='true' class="draggable" on:dragstart={dragStart} on:dragend={dragEnd}>
  Drag me
</div>
```

React's JSX and I suspect Angular, Vue, etc. have a similar syntax to above. In JSX, it's `onDragster-start`. You may also have to
create Dragster instances yourself if your UI tech doesn't have
the equivalent to Svelte's `use:` and you should probably manually 
call `destroy()`.

Plain HTML/JavaScript is essentially the same except you'll specify 
the event listeners with `addEventListener()` like in the 
[MDN web docs example](https://developer.mozilla.org/en-US/docs/Web/API/Document/drag_event) except that you have to instantiate the
Dragster instances yourself and you should probably manually call
`destroy()`.
npm package: @matrx/radar
Description: ## What is it?
Latest version: 1.8.0

# MatrX-Radar

## What is it?

MatrX-Radar is a radar visualization component.

## How to use

Refer to the example in public/index.html for parameters and data formatting

Refer to this video for information about backward breaking changes in version 1.0: https://youtu.be/FtaVwb3jTa8

The discipline is the outermost layer and groups together different practices. Each practice has a label and a description. The labels for the practices and disciplines are also autosized to fit the appropriate width. Each practice has any number of levels, and each level has a portion which represents the size of the corresponding arc.
npm package: @matrx/svelte-realtime-adapter-cosmos-db-temporal
Description: Cosmos DB database adapter (temporal) for svelte-realtime-store/server
Author: Larry Maccherone
Latest version: 0.6.0

# `@matrx/svelte-realtime-adapter-cosmos-db`

svelte-realtime-adapter-cosmos-db is a database adapter for the [`svelte-realtime-coordinator`](https://www.npmjs.com/package/@matrx/svelte-realtime-coordinator). For a summary of how to use all of the svelte-realtime-... packages, go over to the [`svelte-realtime-store`](https://www.npmjs.com/package/@matrx/svelte-realtime-store).

## Usage

To install with npm

```bash
npm install --save @matrx/svelte-realtime-adapter-cosmos-db
```

Modify your server.js file to look something like this

```js
import http from 'http'
import sirv from 'sirv'
import express from 'express'
import compression from 'compression'
import * as sapper from '@sapper/server'
import uuidv4 from 'uuid/v4'

// Look here
import { getServer } from '@matrx/svelte-realtime-server'

const { PORT, NODE_ENV } = process.env
const dev = NODE_ENV === 'development'

const app = express()
const server = http.createServer(app)

// And here
const nsp = getServer(server)
  
app.use(
	compression({ threshold: 0 }),
	sirv('static', { dev }),
	sapper.middleware()
)

server.listen(PORT, err => {
	if (err) console.log('error', err);
})

```
npm package: @matrx/svelte-realtime-server
Description: Server-side middleware for building realtime Svelte apps
Author: Larry Maccherone
Latest version: 0.6.0

# `@matrx/svelte-realtime-server`

svelte-realtime-server is the server-side companion to the [`svelte-realtime-store`](https://www.npmjs.com/package/@matrx/svelte-realtime-store). Go over there for a summary of what it does, features, usage, limitations, etc.

## Usage

To install with npm

```bash
npm install --save @matrx/svelte-realtime-server
```

Modify your server.js file to look something like this

```js
import http from 'http'
import sirv from 'sirv'
import express from 'express'
import compression from 'compression'

// Look here
import { getServer } from '@matrx/svelte-realtime-server'

const { PORT, NODE_ENV } = process.env
const dev = NODE_ENV === 'development'

const app = express()
const server = http.createServer(app)

// And here
const svelteRealtimeServer = getServer(server, adapters, sessionStore)
  
app.use(
	compression({ threshold: 0 }),
	sirv('static', { dev }),
)

server.listen(PORT, err => {
	if (err) console.log('error', err);
})

```

### Authentication

svelte-realtime-server now requiers a sessionID cookie to be present when the browser first connects. The `server.js` file in the parent folder is a fully working example of how you can do this complete with example /login, /logout, and /checkauth endpoints. At this time, we require you to pass in the sessionStore as the third parameter but this will later be upgraded to permit you to pass in your own callback functions. The second parameter, `adapters` is for the as-yet incomplete database serialization functionality and you can safely pass in `null` at this time.

### Access control

TBD