open-index/open-npm huggingface dataset:
npm package: @lustre/styled-jsx-plugin-sass
Description: Plugin to add Sass support to styled-jsx
Author: Giuseppe Gurgone
Latest version: 1.0.0

# styled-jsx-plugin-sass

[![Build Status](https://travis-ci.org/giuseppeg/styled-jsx-plugin-sass.svg?branch=master)](https://travis-ci.org/giuseppeg/styled-jsx-plugin-sass)
[![npm](https://img.shields.io/npm/v/styled-jsx-plugin-sass.svg)](https://www.npmjs.com/package/styled-jsx-plugin-sass)

Use [Sass](http://sass-lang.com/) with [styled-jsx](https://github.com/zeit/styled-jsx) 💥

⚠️ **This plugin is not actively being maintained. If you want me to work on it please [consider donating](https://github.com/sponsors/giuseppeg).**

## Usage

Install the package first.

```bash
npm install --save-dev styled-jsx-plugin-sass
```

Install the `sass` version you need (it is a peer dependency).

```bash
npm install --save-dev sass
```

Next, add `styled-jsx-plugin-sass` to the `styled-jsx`'s `plugins` in your babel configuration:

```json
{
  "plugins": [
    [
      "styled-jsx/babel",
      { "plugins": ["styled-jsx-plugin-sass"] }
    ]
  ]
}
```

## sass options

sass can be configured using `sassOptions`. This is useful for setting options such as `includePaths` or `precision`.

```json
{
  "plugins": [
    [
      "styled-jsx/babel",
      {
        "plugins": [
          ["styled-jsx-plugin-sass", {
              "sassOptions": {
                "includePaths": ["./styles"],
                "precision": 2
              }
            }
          ]
        ]
      }
    ]
  ]
}
```

#### Notes

`styled-jsx-plugin-sass` uses `styled-jsx`'s plugin system which is supported from version 2.

Read more on their repository for further info.

## License

MIT
npm package: @lut0/heracles
Description: Static tar files management
Author: zuoez02
Latest version: 0.2.1

# Heracles
> Package manager heracles's cli

## Install

`npm install -g @lut0/heracles`

## Use

herecles
+ pull [repo/]name:tag [-o filename]
+ push [repo/]name:tag -i filename
+ delete [repo/]name:tag
+ config [set|get] key value
npm package: @lutangar/observable-fs
Description: Observable node `fs` functions respecting the nodejs API
Author: lutangar
Latest version: 0.1.0

# observable-fs
Observable node `fs` functions respecting the nodejs API.

## Install
```
npm install --save @lutangar/observable-fs
```

## Usage
```
const { writeFile } = require('@lutangar/observable-fs');

writeFile('foo.txt', 'bar')
.concat(
    readFile('foo.txt')
    .do(content => console.log(content.toString('utf8')))
);
```

## Resources
* https://nodejs.org/api/fs.html
* http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html

## Licence
MIT
npm package: @luterek/orderno
Description: Package for creating distinct order numbers in a high volume distributed system.
Author: James Luterek
Latest version: 0.1.4

# orderno

[NPM](https://www.npmjs.com/package/@luterek/orderno) package for creating distinct order numbers in a high volume distributed system.

![TESTS](https://github.com/jluterek/orderno/workflows/test/badge.svg)

### Installing

```bash
npm i -S @luterek/orderno
```

## Running the tests

```bash
npm run test
```

### Coding Style

```bash
npm run lint
npm run format
```

## Usage

```

import orderno from '@luterek/orderno';

orderno('2346789abcdefghjkmnpqrtuvwxyz', TimeInterval.Second, 2);

```

## Authors

- [James Luterek](https://github.com/jluterek)

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
npm package: @luthaf/typescript-doctest
Description: Doc Test Generator for TypeScript Projects
Author: Ivo Wetzel
Latest version: 1.3.0

# Doc Tests for TypeScript Projects

`typescript-doctest` provides a CLI to generate doc tests from your TypeScript documentation.

## Installation

`npm install -g typescript-doctest`

## Features

- Generates tests for all codeblocks in your docs that start with `typescript doctest` 
- Also generates tests for these kind of codeblocks in your `README.md`
- Supports `import` statements and `import(...)` call resolution from within the doc tests by using the TypeScript Compiler; respecting any custom `baseUrl` or `paths` setup
- Allows to hide certain lines from your doc tests in the documentation generated by [typedoc](https://typedoc.org) by prefixing them with `#` 

> Note: You need to install `typescript-doctest` as a `dev-dependency` in your project for the typeoc integration to work.

## Example

See the included [example project](example#readme) for a basic setup.

## Usage

1. Set the language of your documentation codeblocks to `typescript doctest`
2. Run `ts-doctest PROJECT_DIR TEST_DIR`
3. Invoke your test runner

## License

Licensed under either of
 * Apache License, Version 2.0 ([LICENSE-APACHE](LICENSE-APACHE) or http://www.apache.org/licenses/LICENSE-2.0)
 * MIT license ([LICENSE-MIT](LICENSE-MIT) or http://opensource.org/licenses/MIT)
at your option.
npm package: @luthebao/uikit
Description: Set of UI components for apeswap projects
Latest version: 1.2.2

# ApeSwap UIkit


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

## Install

`yarn add @luthebao/uikit`

## Setup

### Theme

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

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

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@luthebao/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.
npm package: @luthebao/uiniswap-sdk
Description: 🛠 An SDK for building applications on top of Uniswap.
Latest version: 1.0.7

# Uniswap 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/Uniswap/uniswap-sdk/workflows/CI/badge.svg)](https://github.com/Uniswap/uniswap-sdk)
[![npm version](https://img.shields.io/npm/v/@uniswap/sdk/latest.svg)](https://www.npmjs.com/package/@uniswap/sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@uniswap/sdk/latest.svg)](https://bundlephobia.com/result?p=@uniswap/sdk@latest)

In-depth documentation on this SDK is available at [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).

## 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/Uniswap/uniswap-sdk.git
```

Move into the uniswap-sdk working directory

```sh
cd uniswap-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: @luthebao/uniswap-v2-sdk
Description: 🛠 An SDK for building applications on top of Uniswap.
Author: luthebao
Latest version: 1.0.3

# Uniswap 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/Uniswap/uniswap-sdk/workflows/CI/badge.svg)](https://github.com/Uniswap/uniswap-sdk)
[![npm version](https://img.shields.io/npm/v/@uniswap/sdk/latest.svg)](https://www.npmjs.com/package/@uniswap/sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@uniswap/sdk/latest.svg)](https://bundlephobia.com/result?p=@uniswap/sdk@latest)

In-depth documentation on this SDK is available at [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).

## 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/Uniswap/uniswap-sdk.git
```

Move into the uniswap-sdk working directory

```sh
cd uniswap-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: @luthra2059/initgit
Description: Command Line Utility to help with repetitive work of project initialization using git and github.
Author: Shubham Luthra
Latest version: 1.0.3

# InitGit

git init initializes a git repository. However, that is usually one of several steps involved in hooking up a project to Git. There are often more steps involved. Nevertheless, these steps are repetitive. 

`InitGit` provides a command-line interface to create a Git repository in the current folder, create a remote repository and then add it as a remote. Then it will provide a simple interactive “wizard” for creating a .gitignore file, and push it up to the remote repository. 

It might not save you hours, but remove some of the initial friction when starting a new project.

## Installation

Use the node package manager [npm](https://www.npmjs.com/package/npm) to install [initgit](https://www.npmjs.com/package/@luthra2059/initgit).

```bash
npm i @luthra2059/initgit
```

## Usage

Before running the command go to the settings of your github account.

Navigate to `Developer Settings > Personal access token` and click on `Generate new Token`. Enable appropriate permissions and copy the `token`.

Now run the following command on your terminal -


```bash
$ initgit
```
Navigate through and give responses as asked.

## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License
[MIT](https://choosealicense.com/licenses/mit/)
npm package: @lutra-labs/stock-exchange-symbol-info
Description: Fetch and aggregate up to date lists of stocks on the NYSE, NASDAQ and AMEX, and use it as an API.
Latest version: 1.2.0

# Stock Exchange Symbols

📈 Fetch and get details of symbols from nasdaq, nyse and amex.

## Usage

### API

The API is exported as a module. You can access it normally using require as:
```
const {build, all, symbol} = require('@lutra-labs/stock-exchange-symbol-info');
```

Note that all the API methods return promises (They are async functions)!

| API  | Parameters Expected | Description |
| ------------- | ------------- | ------------- |
| build  | -  | Pull data from NASDAQ and store them for later use  |
| all  | -  | Return all the available data as an object of shape: {headers: {...data about the shape of symbol data}, dict: {[symbol: {...data}], ...}}  |
| symbol  | symbol - ticker symbol to get data for  | Returns data for the particular symbol  |

At the time of publishing, the headers look like:
```json
{
    "symbol":"Symbol",
    "name":"Name",
    "lastsale":"Last Sale",
    "netchange":"Net Change",
    "pctchange":"% Change",
    "marketCap":"Market Cap",
    "country":"Country",
    "ipoyear":"IPO Year",
    "volume":"Volume",
    "sector":"Sector",
    "industry":"Industry",
    "url":"Url"
}
```
### Initializing the Stock Data
You can either initialize the stock data manually or through an API.
1. Manual Method: Run the build script from bin using `node ./bin/build.js` or using `npm build`.
2. API: await on the `build` API method.s


## LICENSE

MIT

## Authors
- [Vaishnav S Menon](https://github.com/vaishnavsm)
- Heavily modified from [Joe McCann's](https://twitter.com/joemccann) [original repository](https://github.com/joemccann/stock-exchange-symbols)
npm package: @lutuo/vue-iclient-leaflet
Description: vue-iclient-leaflet是依赖于@vue-leaflet/vue-leaflet和@supermap/iclient-leaflet库对leaflet的扩展的vue3的库。
Latest version: 0.10.5

# vue-iclient-leaflet

vue-iclient-leaflet是依赖于@vue-leaflet/vue-leaflet和@supermap/iclient-leaflet库对leaflet的扩展的vue3的库。

## 安装

```bash
yarn add leaflet @vue-leaflet/vue-leaflet @supermap/iclient-leaflet
yarn add -D @types/leaflet
```

or

```bash
npm i leaflet @vue-leaflet/vue-leaflet @supermap/iclient-leaflet
npm i -D @types/leaflet
```

## 扩展图层
SmTileLayer：超图rest服务的支持

ImTileLayer：高德、腾讯的wmts服务的支持


### Quickstart

```javascript
<template>
  <l-map ref="map" v-model:zoom="zoom" :center="center" :options="options">
    <sm-tile-layer :url="layerURL"></sm-tile-layer>
  </l-map>
</template>
<script setup lang="ts">
import { LMap } from "@vue-leaflet/vue-leaflet";
import type { PointExpression } from "leaflet";
import L from "leaflet";
import { ref } from "vue";

import { SmTileLayer } from "@src/components";

const zoom = ref(2);

const center = [47.41322, -1.219482] as PointExpression;
const layerURL =
  "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";

const options = {
  crs: L.CRS.EPSG4326,
  center: [0, 0],
  maxZoom: 18,
  zoom: 1,
};
</script>
```

## 其它

### 参考文档
[vue-leaflet]("https://github.com/vue-leaflet/vue-leaflet")

[SuperMap iClient for Leaflet]("https://iclient.supermap.io/web/introduction/leafletDevelop.html#Import")

### vite下cdn引入
```javascript
import importToCDN from 'vite-plugin-cdn-import'

export default () => {
  return importToCDN({
    prodUrl: '//unpkg.com/{name}@{version}/{path}',
    modules: [
      'vue',
      {
        name: 'leaflet',
        var: 'L',
        path: 'dist/leaflet.js',
        css: 'dist/leaflet.css'
      },
      {
        // @ts-ignore
        // prodUrl: 'https://iclient.supermap.io/dist/leaflet/{path}',
        name: '@supermap/iclient-leaflet',
        var: 'L.supermap',
        path: ['dist/iclient-leaflet-es6.min.js'],
        css: 'dist/iclient-leaflet.min.css'
      },
      {
        name: '@vue-leaflet/vue-leaflet',
        var: 'globalThis["vue-leaflet"]',
        path: 'http://172.18.218.166:8082/cdn/vue-leaflet/dist/vue-leaflet.umd.js',
        css: ''
      },
      {
        name: '@lutuo/vue-iclient-leaflet',
        var: 'globalThis["vue-iclient-leaflet"]',
        path: 'http://172.18.218.166:8082/cdn/vue-iclient-leaflet/dist/vue-iclient-leaflet.umd.js',
        css: ''
      }
    ]
  })
}

```

### es6环境下使用SuperMap iClient for Leaflet
需要配置编译插件

首先，安装 @supermap/babel-plugin-import：

```npm install @supermap/babel-plugin-import -D```
然后，在 .babelrc中添加如下配置：
```json
{
    "plugins": [
        [
        "@supermap/babel-plugin-import",
            {
            "libraryName": "@supermap/iclient-leaflet"
            }
        ]
    ]
}
```
npm package: @luu-truong/react-native-image-viewer
Description: Lightweight image viewer for React Native
Author: Truong Luu
Latest version: 2.0.4

# React Native Image Viewer

- Double tap to zoom image
- Pinch to zoom image
- Swipe down to close
- Caption and summaries

## Installation

Yarn:

```bash
yarn add @luu-truong/react-native-image-viewer react-native-gesture-handler
```

NPM:

```bash
npm install @luu-truong/react-native-image-viewer react-native-gesture-handler
```

To complete installation you must following [this guide](https://docs.swmansion.com/react-native-gesture-handler/docs/) to setup `react-native-gesture-handler`

Usage:

```javascript

import ImageViewer from '@luu-truong/react-native-image-viewer';

function Example() {
  const [visible, setVisible] = React.useState(false);
  
  const images = [
    {
      source: {
        uri: 'https://...',
        headers: {
          'X-Custom-Header': 'foo',
        },
        width: 1200,
        height: 600
      },
      title: 'blah blah'
    },
    {
      source: require('image.png'),
    }
  ];
  
  return (
    <>
      <ImageViewer images={images} visible={visible} onClose={() => setVisible(false)} imageProps={{
        initialWidth: 200,
        initialHeight: 200,
        renderFooter: (title?: string) => (<Text>{title}</Text>)
      }} />
    </>
  );
}

```

## Documentation

Image Viewer Component Props:

| Name | Type | Required | Description |
| --- | --- | --- | --- |
| debug | boolean | no | Print debug message. Default: false |
| imageProps | object | no | Props passed to Image component. See Image Component Props |
| visible | boolean | yes | |
| images | Array | yes | |
| initialIndex | number | no | Show image index at initialize |
| onClose | () => void | yes | Callback when close image viewer |
| animationType | string | no | |

Image Component Props:

| Name | Type | Required | Description |
| --- | --- | --- | --- |
| initialWidth | number | no | Default: 200 |
| initialHeight | number | no | Default: 200 |
| renderFooter | (title?: string) => JSX.Element | null | no | Default: undefined |
| debug | boolean | no | Default: false |

## Examples

If you want to play with the API but don't feel like to trying it on a real device. Clone the repo and go to
`demo` folder and run:

```bash
yarn install
```

If you want to try IOS, run `pod install` in the ios folder.

Run `yarn start` to start metro server.

Run `yarn ios` to playing with iOS simulator
Run `yarn android` to playing with Android simulator

## React native support

| version | react-native version |
| ----- | ----- |
| 1.x.x | 0.64.0+ |
npm package: @luu-truong/react-native-reaction-button
Description: Reactions like Facebook does
Author: Truong Luu
Latest version: 1.0.6

# Reaction Button

Reactions button like Facebook does.

![Demo](https://media2.giphy.com/media/10mBuMfaPdsPr2DPnk/giphy.gif)

## Installation

Yarn:

```bash
yarn add @luu-truong/react-native-reaction-button
```

NPM:

```bash
npm install @luu-truong/react-native-reaction-button
```

## Usage

```jsx

import ReactionButton from '@luu-truong/react-native-reaction-button'

function Demo() {
  const [value, setValue] = React.useState(-1);

  function onChange(index: number) {
    setValue(value === index ? -1 : index);
  }

  const reactions = [
    {
      source: {
        url: '...'
      },
      title: 'Like'
    },
    {
      source: require('....'),
      title: 'Haha'
    }
  ];

  return <ReactionButton reactions={reactions} defaultIndex={0} value={value} onChange={onChange} />
}
```

## Properties

| Name | Type | Required | Description |
| --- | --- | --- | --- |
| debug | boolean | no | Debug message. Default: false |
| reactionSize | number | no | Render reaction image at size. Default: 40px |
| reactions | ReactionItem[] | yes | List reactions |
| value | number | yes | Selected reaction index. |
| defaultIndex | number | no | Default reaction |
| onChange | (index: number) => void | yes | Callback when a reaction pressed |
| textProps | object | no | Props passed to button reaction text |
| reactionSmallSize | number | no | Size to render reaction in button |
| DefaultImage | (passedProps: any) => JSX.Element | no | Default image component to render reaction when value is unspecified |
| reactionContainerStyle | object | no | Style apply to reactions popover container |
| imageProps | {renderImage: (props) => JSX.Element} | no | |
| style | ViewStyle | no | |
| hitSlop | {top: number; left: number; right: number; bottom: number} | no | |

ReactionItem properties:
| Name | Type | Required | Description |
| --- | --- | --- | --- |
| source | object | yes | Image object source |
| title | string | yes | Reaction title |

## React native support

| Version | react-native version |
| --- | --- |
| 1.x.x | 0.64.0+ |
npm package: @luuc/react-d3-radar
Description: React-based Radar chart for D3
Author: shauns & luuc
Latest version: 0.2.7

# react-d3-radar

[![Build Status](https://travis-ci.org/shauns/react-d3-radar.svg?branch=master)](https://travis-ci.org/shauns/react-d3-radar)

<img src="http://i.imgur.com/rgJ7bXi.png" width="300">

React-based Radar chart for D3

## What is this?

D3v4's modular structure means you can pull in things like the scaling or colour logic, and leave out DOM functionality if you're using D3 in an environment that 'owns' the DOM -- such as React.

This is a Radar chart component for displaying multiple sets of data. Hovering is supported via `d3-voronoi`.

## Examples

```js
import Radar from 'react-d3-radar';
<Radar
  width={500}
  height={500}
  padding={70}
  domainMax={10}
  highlighted={null}
  onHover={(point) => {
    if (point) {
      console.log('hovered over a data point');
    } else {
      console.log('not over anything');
    }
  }}
  data={{
    variables: [
      {key: 'resilience', label: 'Resilience'},
      {key: 'strength', label: 'Strength'},
      {key: 'adaptability', label: 'Adaptability'},
      {key: 'creativity', label: 'Creativity'},
      {key: 'openness', label: 'Open to Change'},
      {key: 'confidence', label: 'Confidence'},
    ],
    sets: [
      {
        key: 'me',
        label: 'My Scores',
        values: {
          resilience: 4,
          strength: 6,
          adaptability: 7,
          creativity: 2,
          openness: 8,
          confidence: 1,
        },
      },
      {
        key: 'everyone',
        label: 'Everyone',
        values: {
          resilience: 10,
          strength: 8,
          adaptability: 6,
          creativity: 4,
          openness: 2,
          confidence: 0,
        },
      },
    ],
  }}
/>
```
## API

### &lt;Radar />

Renders a Radar chart in SVG (creates its own `svg` element). Props are as per the example above.