open-index/open-npm huggingface dataset:
npm package: @gto/lvl-circle
Description: A clean way to show skill and progress circles for angular.
Author: Mauricio Joost Wolff
Latest version: 0.0.4

# gto-lvl-circle

[![npm version](https://img.shields.io/npm/v/@gto/lvl-circle.svg?style=flat-square)](https://www.npmjs.com/package/@gto/lvl-circle)
[![npm downloads](https://img.shields.io/npm/dm/@gto/lvl-circle.svg?style=flat)](https://www.npmjs.com/package/@gto/lvl-circle)
[![dependency status](https://david-dm.org/thiswallz/@gto/lvl-circle.svg)](https://david-dm.org/thiswallz/ngx-skill-bar)

Beautiful and simple skill/progress circles.


You do not need any dependencies. It works with Angular x.

#### Examples

![Alt text](https://raw.githubusercontent.com/thiswallz/gto-lvl-circle/master/demos.png?raw=true 'Demos')


## Quick Start

### Install

```bash
npm i --save @gto/lvl-circle
```


### Import the module

```ts
// app.module.ts...
import { GtoLvlCircleComponent } from '@gto/lvl-circle';
// ...
@NgModule({
  imports: [
    //...
    GtoLvlCircleComponent
  ],
})
export class AppModule {}
```

### Use it!

```html
    <input [(ngModel)]="percentage"  type="number" />
    <gto-lvl-circle shadowColor="#323232" [colors]="['#e46fab', '#e046a5', '#e4408a']" 
        [percent]="percentage">
    </gto-lvl-circle>
```

### Properties

| Property | Type | Default |
| :---: | :---: | :---: |
| circles | number | 3 |
| colors | string[] | [''white'',''white'','white'] |
| width | number | 120 |
| height | number | 120 |
| percent | number | 0 |
| stroke | number | 4 |
| shadowColor | string | gray |

## LIVE DEMO

[Demo on Stackblitz](https://stackblitz.com/edit/angular-gto-lvl-circle)


### Vanilla JS (not angular)

[CodePin](https://codepen.io/thiswallz/pen/KKPmNjw)


## Authors

- **Mauricio Joost Wolff** - _Initial work_ - [GitHub](https://github.com/thiswallz)

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
npm package: @gtoio/img-vuer
Description: img viewer
Author: zhoudejie
Latest version: 0.19.5

# img-vuer

> fork自[img-vuer](https://github.com/ssshooter/img-vuer)，具体文档见原作者文档，之后看能不能提个issue，让原作者加上API调用方式。

V0.19.0 新增API调用方式

```js
/*
  options：如下
  renderFns 支持传入两个render函数分别渲染在header/footer处，用于显示附加信息
    ctx 目前传入了一个currentIndex属性，为当前索引
*/
this.$imgVuer.open(options: Object, renderFns: Object)

this.$imgVuer.open(
  {
    imgs:         Array<String>,  // img数组
    initialIndex: Number,         // 初始展示索引，从0开始
    onChange:     Function,       // 索引change事件
    onClose:      Function        // 关闭事件
  },
  // 
  {
    header: (h, ctx) => {
      return h('div', `header`);
    },
    footer: (h, ctx) => {
      return h('div', `footer`);
    }
  }
)
```

> 一个移动端优先的 Vue2 图片预览插件

:ok_woman: 极速使用

:point_right: 滑动手势

:mag: 缩放手势

V0.11.0 可以使用缩略图啦～

V0.13.0 返回键退出浏览（安卓手机）

V0.15.0 使用 scale() 修复放大模糊问题

:computer: v0.17.1 支持桌面浏览器啦！！

**[点击查看使用实例](https://ssshooter.github.io/img-vuer/index.html)**或扫描二维码

<img width="150px" src="./QRcode.png">

## 安装

```bash
npm i img-vuer --save
```

## 使用

```javascript
// 引入 img-vuer，安装插件
import gallery from 'img-vuer'
Vue.use(gallery, {
  swipeThreshold: 150, // 滑动阈值，默认值 100
  isIndexShow: true, // 是否显示图片序号
  useCloseButton: false, // 只通过右上角关闭键退出浏览
})
```

```html
<!-- 只需添加 v-gallery 到图片标签即可 -->
<img v-gallery :src="..." />

<!-- 图片分组 -->
<img v-gallery:groupName :src="..." />
<img v-gallery:groupName :src="..." />
<img v-gallery:groupName :src="..." />

<!-- 使用动态绑定的分组名称 -->
<img v-gallery="'groupName'" :src="..." />

<!-- 使用缩略图 -->
<img v-gallery :src="thumbnailSrc" data-large="originSrc" />

<!-- 退出浏览 -->
<button @click="$imgVuer.close()">close</button>
```

## API

| api               | arg   | description                                                       |
| ----------------- | ----- | ----------------------------------------------------------------- |
| close()           | /     | 退出浏览                                                          |
| onIndexChange()   | cb    | `$imgVuer.onIndexChange((newVal, oldVal)=>{...})`                 |
| onToggle()        | cb    | 退出或进入浏览时触发 `$imgVuer.onToggle((newVal, oldVal)=>{...})` |
| changeBGColor()   | color | 修改浏览器背景 `$imgVuer.changeBGColor('#fff')`                   |
| next()            | /     | 下一幅图 `$imgVuer.next()`                                        |
| prev()            | /     | 上一幅图 `$imgVuer.prev()`                                        |
| getCurrentIndex() | /     | /                                                                 |

## 开发

```bash
# development environment node v6.15.1

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
```

## 问题处理

### 页面大小不对

添加 meta

```html
<meta
  name="viewport"
  content="width=device-width, initial-scale=1,user-scalable=0, maximum-scale=1"
/>
```

### 大量大图

如果你把大量大图分到一组，img-vuer 会在你预览这组的任意图片时加载该组所有图片。这会耗费用户大量流量和拖慢页面。

你可以使用 v0.17.2 解决这个问题，这个版本只会加载你浏览过的图片。

### key

不能使用 index 作 `v-gallery` 图片的循环 key.

## License

MIT
npm package: @gtomato-web/expo-onespan
Description: OneSpan native module for Expo
Author: Green Tomato - Technical
Latest version: 1.0.2
Deprecated: Unmaintained

# expo-onespan

OneSpan native module for Expo

# API documentation

- [Documentation for the main branch](https://github.com/expo/expo/blob/main/docs/pages/versions/unversioned/sdk/onespan.md)
- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/onespan/)

# Installation in managed Expo projects

For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](#api-documentation). If you follow the link and there is no documentation available then this library is not yet usable within managed projects &mdash; it is likely to be included in an upcoming Expo SDK release.

# Installation in bare React Native projects

For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.

### Add the package to your npm dependencies

```
npm install expo-onespan
```

### Configure for iOS

Run `npx pod-install` after installing the npm package.



# Contributing

Contributions are very welcome! Please refer to guidelines described in the [contributing guide]( https://github.com/expo/expo#contributing).
npm package: @gtomato-web/react-hooks
Description: React hooks library
Author: Green Tomato Web
Latest version: 2.2.0
Deprecated: Unmaintained

# react-hooks

React hooks library

## Install

```bash
pnpm install @gtomato-web/react-hooks
```

## Usage

```tsx
// named import
import { useAbortEffect } from '@gtomato-web/react-hooks';
// specific import (tree-shaking)
import useAbortEffect from '@gtomato-web/react-hooks/lib/core/useAbortEffect';
```

## Documentations

WIP

## Tests

```bash
pnpm test
```

## License

MIT License
npm package: @gtomato-web/release-it-expo-build-bumper-plugin
Description: Bump Expo build number in app.json (or more files)
Author: Green Tomato Web
Latest version: 1.0.0
Deprecated: Unmaintained

# release-it-expo-build-bumper-plugin

Bump Expo build number in app.json (or more files)

## Usage

Specify the plugin name `@gtomato-web/release-it-expo-build-bumper-plugin` in
`plugins` of your `.release-it.json`

```json
{
  "plugins": {
    "@gtomato-web/release-it-expo-build-bumper-plugin": {}
  }
}
```

## Options

```ts
{
  files: {
    file: string;
    paths: string[];
  }[];
}
```

### Default

```json
{
  "file": "app.json",
  "paths": ["expo.android.versionCode", "expo.ios.buildNumber"]
}
```

### Example

```json
{
  "plugins": {
    "@gtomato-web/release-it-expo-build-bumper-plugin": {
      "files": [
        { "file": "app.json", "paths": ["expo.ios.buildNumber"] },
        { "file": "app.json.example", "paths": ["expo.ios.buildNumber"] }
      ]
    }
  }
}
```

## Context

This plugin will expose the new build numbers in the variables named in last
part of `files.paths`.

For example,

- `expo.ios.buildNumber` → `${buildNumber}`
- `expo.android.versionCode` → `${versionCode}`

```json
{
  "git": {
    "tagName": "${version}-build.${buildNumber}"
  }
}
```

## Limitations

- Only support JSON files

## License

MIT License
npm package: @gtomato-web/release-it-select-env-plugin
Description: Select environment to release for release-it
Author: Green Tomato Web
Latest version: 1.1.1
Deprecated: Unmaintained

# release-it-select-env-plugin

Select environment to release for [release-it](https://github.com/release-it/release-it/tree/main)

```
> release-it

? Which environment do you want to release to? (Use arrow keys)
❯ DEV
  SIT
  UAT
  PRODUCTION
```

## Usage

Specify the plugin name `@gtomato-web/release-it-select-env-plugin` in `plugins` of your `.release-it.json`

```json
{
  "plugins": {
    "@gtomato-web/release-it-select-env-plugin": {}
  }
}
```

## Context

This plugin will expose a variable `env` which is the `value` of the selected environment, then you can use it in your `.release-it.json`.

For example:
```json
{
  "git": {
    "tagName": "${env}-${version}"
  }
}
```


## Options

```ts
{
  choices: {
    name: string;
    value: string;
  }[];
}
```

### Default

```json
"choices": [
  {
    "name": "DEV",
    "value": "dev"
  },
  {
    "name": "SIT",
    "value": "sit"
  },
  {
    "name": "UAT",
    "value": "uat"
  },
  {
    "name": "STAGING",
    "value": "staging"
  },
  {
    "name": "PRODUCTION",
    "value": "production"
  }
]
```

### Example
```json
{
  "plugins": {
    "@gtomato-web/release-it-select-env-plugin": {
      "choices": [
        {
          "name": "DEV",
          "value": "dev"
        },
        {
          "name": "UAT",
          "value": "uat"
        },
        {
          "name": "PRODUCTION",
          "value": "prod"
        }
      ]
    }
  }
}
```

## License

MIT License
npm package: @gtomato-web/sass2js
Description: A Sass & JS library that converts Sass list & map to JS array & object.
Author: GTomato Web
Latest version: 1.1.6
Deprecated: Unmaintained

# Sass2JS

A Sass & JS library that converts Sass list & map to JS array & object.

If you’re new to Sass,
checkout **[🔗 the official website](https://sass-lang.com/)**
of Sass

---

**Why I need to convert Sass list & map into JS array & object?**

Firstly, let me
introduce [🔗 Interoperable CSS (ICSS)](https://github.com/css-modules/icss) to
you.

In ICSS, one of the section within
about [🔗 :export](https://github.com/css-modules/icss#export) show us the way
to export Sass variables to JS, but unfortunately, you are not able to export
sass map to JS which will case error. And this is the reason why this package
exists.

Through this package, you will be able to convert Sass list & map into
stringified JS array & object and enjoy the variables in JS.

---

###### Table of content:

- [**Installation**](#installation)
  - [Yarn](#yarn)
  - [NPM](#npm)
- [**Usage**](#usage)
  - [In Sass side](#in-sass-side)
    - [List to array](#list-to-array)
    - [Map to object](#map-to-object)
  - [In JS side](#in-js-side)
- [**Contribute**](#contribute)

---

## Installation

### Yarn

```shell
$ yarn add @gtomato-web/sass2js
```

### NPM

```shell
$ npm i --save @gtomato-web/sass2js
```

---

## Usage

With Sass modules
and **[🔗 @use](https://sass-lang.com/documentation/at-rules/use)**,
recommended.

### In Sass side

#### List to array

To convert list to stringified array

```scss
// export.module.scss
@use '~@gtomato-web/sass2js' as s2j;

:export {
  foo : s2j.list-to-stringified-array((1, foo, #000000, (2, 3, 4, 5, 6), 7 8 9 10 11, (a: 1, b: 2, c: 3, d: 4, e: 5), true, false, null));
}

// output
// '[1, "foo", "#000000", [2, 3, 4, 5, 6], [7, 8, 9, 10, 11], {a: 1, b: 2, c: 3, d: 4, e: 5}, true, false, null]'
```

#### Map to object

To convert map to stringified object

```scss
// export.module.scss
@use '~@gtomato-web/sass2js' as s2j;

:export {
  bar : s2j.map-to-stringified-object((
    a: 1,
    b: foo,
    c: #000000,
    d: (2, 3, 4, 5, 6),
    e: 7 8 9 10 11,
    f: (a: 1, b: 2, c: 3, d: 4, e: 5),
    g: true,
    h: false,
    i: null
  ));
}

// output
// '{a: 1, b: "foo", c: "#000000", d: [2, 3, 4, 5, 6], e: [7, 8, 9, 10, 11], f: {a: 1, b: 2, c: 3, d: 4, e: 5}, g: true, h: false, i: null}'
```

### In JS side

```js
// Any JS file(s) needed the variables
import variables from "export.module";
import {
  parseStringifiedArray,
  parseStringifiedObject,
} from "@gtomato-web/sass2js/core";

const parsedArray = parseStringifiedArray(variables.foo);
const parsedObject = parseStringifiedObject(variables.bar);
```

---

## Contribute

If you want to contribute, please read **[CONTRIBUTING](./CONTRIBUTING.md)** for
more information

---

**[^ Back to top](#sass2js)**
npm package: @gtomato-web/utility-types
Description: Collection of utility types
Author: GTomato Web
Latest version: 2.0.8
Deprecated: Unmaintained

# Utility Types

Collection of utility types

## Table of Contents

- [Installation](#installation)
- [Usage](#usage)
- [Documentation](https://gtw-utility-types.vercel.app/)

## Installation

```bash
# npm
npm install --save-dev @gtomato-web/utility-types
```

```bash
# yarn
yarn add -D @gtomato-web/utility-types
```

```bash
# pnpm
pnpm add -D @gtomato-web/utility-types
```

## Usage

Using `DeepGetType` as an example:

```typescript
import {DeepGetType} from '@gtomato-web/utility-types';

type DeepObject = {
  a: {
    b: {
      c: {
        d: string;
      };
    };
  };
};

type DeepType = DeepGetType<DeepObject, 'a.b.c.d'>; // string
```

## Documentation

See [documentation](https://gtw-utility-types.vercel.app/) for more details.
npm package: @gton-capital/ogs-sdk
Description: 🛠 An SDK for building applications on top of Uniswap.
Author: Fanz
Latest version: 3.0.21

# 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: @gtpd/eslint-config
Description: Shared ESLint configuration for GTPD projects
Author: GTPD
Latest version: 1.0.11

# @gtpd/eslint-config

A shared ESLint configuration for GTPD projects, optimized for Next.js, React, Tailwind CSS, and Prettier.

## Features

- **Next.js Core Web Vitals Rules** for better performance and best practices.
- **React and JSX Support** with recommended rules.
- **Tailwind CSS Linting** with the official plugin.
- **Prettier Integration** for code formatting.
- Stylistic rules for:
  - Sorting imports, keys, and destructured properties.
  - Enforcing consistent arrow function parentheses and comma styles.
- Customizable and extendable for project-specific needs.

## Installation

1. **Install the Package**

    ```bash
    npm install @gtpd/eslint-config --save-dev
    ```

2. **Install Peer Dependencies**

    This package relies on the following peer dependencies:

    ```bash
    npm install eslint eslint-config-next eslint-config-prettier eslint-plugin-react eslint-plugin-tailwindcss eslint-plugin-sort-destructure-keys eslint-plugin-perfectionist @stylistic/eslint-plugin @eslint/eslintrc @eslint/js prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
    ```

    You can use the following one-liner to install all at once:

    ```bash
    npx install-peerdeps --dev @gtpd/eslint-config
    ```

3. **Extend the Config in .eslint.config.mjs**

    Create or update your `.eslint.config.mjs` file:

    ```javascript
    import gtpdConfig from '@gtpd/eslint-config';
    export default gtpdConfig;
    ```
npm package: @gtpwebdev/react-component-library
Description: A personal React component library powered by MUI
Author: Glen Pearson
Latest version: 2.0.5

# @gtpwebdev/react-component-library

## About

This library is built and maintained by @gtpwebdev as a personal react component toolkit for rapid UI development.

## 🚀 Installation

```bash
npm install @gtpwebdev/react-component-library
```

## Available Components and status

### 📹 Media

| Component        | Status    | Description                                                  |
| ---------------- | --------- | ------------------------------------------------------------ |
| `ImageSlideshow` | ✅ Stable | Displays an image slideshow with optional title and captions |

### 🖼️ Display

| Component    | Status    | Description                                   |
| ------------ | --------- | --------------------------------------------- |
| `CentredBox` | ✅ Stable | Provides a fully centred box for its children |

## Example Usage

```js
import { TwoButtonsInBox } from "@gtpwebdev/react-component-library";

<TwoButtonsInBox text1="Yes" text2="No" />;
```