open-index/open-npm huggingface dataset:
npm package: @super-aurora/resource-provider
Description: A common resource provider for nodejs backend projects
Author: Hari Narasimhan
Latest version: 0.6.0

# `@super-aurora/resource-provider`
> This is a generic resource provider for accessing backend resources from a server application

## Usage
```
const ResourceProvider = require('@super-aurora/resource-provider');
const resourceProvider = new ResourceProvider();

resourceProvider.add({ type: 'type', name: 'name', config: {} });

const provider = resourceProvider.get('name');
```
npm package: @super-call/sdk
Description: Typescript SDK for SuperCall
Author: SuperCall
Latest version: 0.0.5

# SuperCall TypeScript SDK

The SuperCall SDK is a library that allows developers to interact with SuperCall smart contracts more easily. It provides the necessary tools to construct cross-chain multicall transactions. The SDK's core functionality is encapsulated within the `Call` class.

## Installation

Include the SDK in your project by adding it to your dependencies:

```bash
npm install --save @super-call/sdk
```

## Features

- **Simple Transaction Construction:** Easily create transactions for interaction with SuperCall smart contracts.
- **Sub-Calls Management:** Add, remove, and manage sub-calls within a call.
- **Fee Calculation:** Automatically calculate the total fee for the call and its sub-calls.
- **Call Encoding:** Encode the call for transaction submission.

## Quickstart

### Create a Call

```typescript
async function createCall(source, destination) {
    const chainId = destination.chainId;
    const target = destination.loggerContract.address;
    const callData = getLogCallData(`Call from ${source.chainId} to ${destination.chainId}.`);
    const lzSuperCall = destination.contract.address;
    const fee = await calculateCallFee(source, destination);
    return new LzCall(chainId, target, callData, lzSuperCall, fee);
}
```

### Construct Calls and Sub-Calls

```typescript
const call1 = await createCall(source, moonbeam);
call1.addSubCall(await createCall(moonbeam, fantom));
call1.addSubCall(await createCall(moonbeam, ethereum));
// ...
```

### Calculate Total Fee and Encode Calls

```typescript
const fee = calls.reduce((a, b) => (Number(a) + Number(b.calculateTotalFee())), 0).toString();
const encodedCalls = calls.map(call => call.encode());
```

### Submit Transaction

```typescript
const tx = await source.contract.aggregate(encodedCalls, { value: fee });
console.log("Submit transaction successfully: ", tx.hash);
```

## API Reference

### `Call` Class

#### Properties

- `chainId`: Number representing the blockchain chain id.
- `target`: String representing the target contract address.
- `callData`: String representing the call data.
- `subCalls`: Array of sub-call instances (`Call[]`).
- `lzSuperCall`: String representing the lzSuperCall's address.
- `fee`: String representing the fee.

#### Methods

- `getSubCall(index)`: Retrieve a sub-call by index.
- `addSubCall(subCall)`: Add a sub-call.
- `removeSubCall(index)`: Remove a sub-call by index.
- `calculateTotalFee()`: Calculate the total fee for this call and its sub-calls.
- `encode()`: Encode the call for transaction submission.

## Support

For issues and feature requests, please [open an issue](link-to-your-issue-tracker) on GitHub.

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
npm package: @super-cloud/storage
Description: super-cloud项目中的js版sdk
Author: CaoMeiYouRen
Latest version: 0.0.1

# @super-cloud/storage

个人很喜欢leancloud的云数据库模式，因此打算模仿一个。
计划使用nest+mongoose实现后端的restful-api，再使用typescript+axios封装一个js版的sdk出来
由于只是个人兴起，因此只计划实现云存储部分的api和sdk，主要包括对象、用户(简化)、角色相关的api
事实上，相比后端的api设计，leancloud在sdk的封装上才更有独到的设计，从设计上就极大的优化了用户体验，可以说感觉非常不错了。
关于项目的进程，目前还在计划中，因此只是占个坑而已，请勿使用本sdk

​    ——  草梅友仁 2020/2/1
npm package: @super-effective/colorutils
Description: A color utility to help with converting between formats and getting color details
Author: SuperEffective
Latest version: 2.1.4

# ColorUtils

A color utility to help with converting between formats and getting color details

## Functions

### `hexToRgb`
Converts a HEX color string to its RGB values

#### Example
```js
import { hexToRgb } from 'colorutils';

const rgb = hexToRgb('#ff0000');

console.log(rgb);
// Object { red: 255, green: 0, blue: 0 }
```



### `hsvToRgb`
Converts HSV color values to its RGB values

#### Example
```js
import { hsvToRgb } from 'colorutils';

const rgb = hsvToRgb(0.5, 1, 1);

console.log(rgb);
// Object { red: 0, green: 255, blue: 255 }
```



### `rgbToHex`
Converts RGB values to a HEX color string

#### Example
```js
import { rgbToHex } from 'colorutils';

const hex = rgbToHex(0, 255, 0);

console.log(hex);
// #00ff00
```



### `hsvToHex`
Converts HSV values to a HEX color string

#### Example
```js
import { hsvToHex } from 'colorutils';

const hex = hsvToHex(240, 1, 1);

console.log(hex);
// #0000ff
```



### `hexToHsv`
Converts a HEX color string to a HSV values

#### Example
```js
import { hexToHsv } from 'colorutils';

const hsv = hexToHsv('#ff00ff');

console.log(hsv);
// Object { hue: 300, saturation: 1, value: 1 }
```

### `sanitizeHex`
Sanitizes a hex string - removing invalid characters and expanding it to 6 characters, e.g.:

```
#1    => #111111
#12   => #111222
#123  => #112233
#1234 => #112233
zz123 => #112233
```


#### Example
```js
import { sanitizeHex } from 'colorutils';

const sanitizedHex = sanitizeHex('x123!');

console.log(sanitizedHex);
// #112233
```

### `getPerceivedLuminance`
Get the perceived brightness of a given color.
See: https://www.w3.org/TR/AERT/#color-contrast

#### Example
```js
import { getPerceivedLuminance } from 'colorutils';

const perceivedLum = getPerceivedLuminance('#000000');

console.log(perceivedLum);
// 0
```
npm package: @super-effective/cra-template-structured-ts
Description: A TypeScript template for Create React App including some base structure and plugins.
Latest version: 1.1.1

# Structured TypeScript CRA Template

A TypeScript Create React App template with . The [official template](https://github.com/facebook/create-react-app/tree/main/packages/cra-template-typescript/template) was used for reference.

To use this template, add --template structured-ts when creating a new app.

```
npx create-react-app my-app --template @super-effective/structured-ts

# or

yarn create react-app my-app --template @super-effective/structured-ts
```

## Included In This Template

* Starter app structure and configuration:
  ```
  .scaffs/                # Scaffolding templates
  public/                 # Starter public files (index.html, favicon, etc. - from the official template)
  src/
    apps/                 # For the root application
    components/           # Directory for components (includes example component)
    styles/               # Global / Shared styles
    index.tsx             # The entry point
    .eslintrc.json        # ESLint rules setup for Prettier and TypeScript
    .prettierrc.js        # Prettier config
    tsconfig.eslint.json  # TypeScript config for ESLint
    tsconfig.json         # TypeScript config
  ```
* Prettier and corresponding ESLint configuration
* Scaffolding for TypeScript components (for the [Scaffs](https://marketplace.visualstudio.com/items?itemName=itslennysfault.scaffs-vscode) Visual Studio Code Extension)
npm package: @super-effective/react-color-picker
Description: React Color Picker
Author: SuperEffective
Latest version: 3.0.1

# react-color-picker

A React color picker component

![Screenshot](assets/screenshot.jpg)

## Install

### NPM:
```
npm install @super-effective/react-color-picker
```

### Yarn:
```
yarn add @super-effective/react-color-picker
```

## Usage
Import the component:
```js
import ReactColorPicker from '@super-effective/react-color-picker';
```

Render the component in your code:
```js
<ReactColorPicker color={color} onChange={onColorChange} /
```

### Props
|Prop  |Type|Details|
|------|---|-------|
|`className`|`string`|The class name to put on the container div|
|`color`|`string`|The initial/current selected color (hex value, e.g. #ff00ff)|
|`showSwatch`|`bool`|Whether the selected color swatch should be displayed below the picker|
|`showHex`|`bool`|Whether the hex value input should be displayed below the picker|
|`onChange`|`func`|The callback function to be called when the color value changes|
|`onInteractionStart`|`func`|The callback function to be called when interaction starts with one of the value selectors|
|`onInteractionEnd`|`func`|The callback function to be called when interaction ends with one of the value selectors|

### Example
See the [included example](example/) for reference
```js
import React, { useState } from 'react';
import ReactColorPicker from '@super-effective/react-color-picker';

import styles from './App.module.scss';

const App = () => {
  const [color, setColor] = useState('#3cd6bf');
  const [isInteracting, setIsInteracting] = useState(false);

  const onColorChange = (updatedColor) => {
    setColor(updatedColor);
  };

  const onInteractionStart = () => {
    setIsInteracting(true);
  };

  const onInteractionEnd = () => {
    setIsInteracting(false);
  };

  return (
    <div className={styles.app}>
      <h1>
        Selected color:
        {color}
      </h1>
      <p>
        Is interacting?
        &nbsp;
        {isInteracting ? 'Yes' : 'No'}
      </p>
      <div className={styles.color_picker}>
        <ReactColorPicker
          color={color}
          onChange={onColorChange}
          onInteractionStart={onInteractionStart}
          onInteractionEnd={onInteractionEnd}
        />
      </div>
    </div>
  );
};

export default App;
```
npm package: @super-effective/react-dropdown-input
Description: React Dropdown/Select Input allowing for custom styling and content
Author: SuperEffective
Latest version: 2.0.0

# react-dropdown-input

A React Dropdown Input (Select)

## Install

### NPM:
```
npm install @super-effective/react-dropdown-input
```

### Yarn:
```
yarn add @super-effective/react-dropdown-input
```

## Usage
Import the component:
```js
import ReactDropdownInput from '@super-effective/react-dropdown-input';
```

Render the component in your code:
```js
const options = [
  { id: 'test1', content: <span>test1</span> },
  { id: 'test2', content: <span>test2</span> },
];
<ReactDropdownInput options={options} onItemSelected={onItemSelected} selectedItemId="test1" />
```

### Props
|Prop|Type|Details|
|----|----|-------|
|`borderColor?`|`string`|The border color<br />Default: `#cdcdcf`|
|`borderWidth?`|`number\|string`|The border width<br />Default: `1`|
|`borderRadius?`|`number\|string`|The border radius<br />Default: `4`|
|`borderStyle?`|`string`|The border style (e.g. `solid`, `dashed`, etc.)<br />Default: `solid`|
|`dropDownClassName?`|`string`|The className to apply to the dropdown|
|`dropDownStyle?`|`React.CSSProperties`|The styles to apply to the dropdown|
|`excludeSelectedOption?`|`boolean`|Exclude the selected option from the list<br />Default: `false`|
|`fluid?`|`boolean`|Display the dropdown as a fluid item (no division between the value and the dropdown)<br />Default: `false`
|`options`|`DropdownInputOption[]`|The array options <br>`{ id: string; content: ReactNode; }`|
|`padding?`|`number`|Padding - applies to the drop down itself and its items|
|`paddingHorizontal?`|`number`|Horizontal padding - applies to the drop down itself and its items (overrides `padding`)<br />Default: `12`|
|`paddingVertical?`|`number`|Vertical padding - applies to the drop down itself and its items (overrides `padding`)<br />Default: `8`|
|`placeholder?`|`ReactNode`|The content to display when no option is selected<br />Default: "&nbsp;"|
|`selectedOptionClassName`|`string`|The className to apply to the selected option|
|`toggleIcon`|`ReactNode`|The element to display as the toggle icon|
|`value`|`string`|The id of the selected option|
|`onChange`|`(id: string) => void`|The callback function to be called when the selected option changes|
npm package: @super-protocol/sdk-js
Description: ## Installation
Latest version: 3.18.1

# Super Protocol SDK JavaScript

## Installation

```
npm install @super-protocol/sdk-js
```

## Supported Networks

The SDK supports multiple blockchain networks:

- **Polygon Mainnet** (Chain ID: 137)
- **Polygon Amoy Testnet** (Chain ID: 80002)
- **opBNB Mainnet** (Chain ID: 204)
- **opBNB Testnet** (Chain ID: 5611)

## Prepare protobuf
1. git submodule init
   git submodule update

2. Install protobuf (http://google.github.io/proto-lens/installing-protoc.html)

3. npm run dto::update

## Local Dev Setup
1. npm install

2. Just run ```npm run build```

## Scripts

`npm run prettier` - run auto code style fixing

`npm run build` - create production build (in build folder)

`npm run dto:update` - generate TypeScript classes based on DTO submodule

`npm test` - run all tests

## Dependencies
- NodeJS v16.8.0
- NPM v7.21.0

## Apple M1 instructions
Some dependencies is not supported arm64 architecture. You can face with error like `dyld[12398]: missing symbol called`. To install everything correctly, do next:

1. [Install Rosetta2](https://support.apple.com/en-us/HT211861)
2. Run your shell for x86_64 architecture `arch -x86_64 /bin/bash` (or any shell in your `/bin` folder).
3. Install NodeJS in this shell `nvm install 16` (if you have Node with same version already installed but for arm64, you have to uninstall it `npm uninstall 16`)
4. `nvm use 16 && yarn install`
npm package: @super-protocol/sp-files-addon-darwin-arm64
Description: This is the **aarch64-apple-darwin** binary for `@super-protocol/sp-files-addon`
Latest version: 0.13.2

# `@super-protocol/sp-files-addon-darwin-arm64`

This is the **aarch64-apple-darwin** binary for `@super-protocol/sp-files-addon`
npm package: @super-protocol/sp-files-addon-darwin-x64
Description: This is the **x86_64-apple-darwin** binary for `@super-protocol/sp-files-addon`
Latest version: 0.13.2

# `@super-protocol/sp-files-addon-darwin-x64`

This is the **x86_64-apple-darwin** binary for `@super-protocol/sp-files-addon`
npm package: @super-protocol/sp-files-addon-linux-x64-gnu
Description: This is the **x86_64-unknown-linux-gnu** binary for `@super-protocol/sp-files-addon`
Latest version: 0.13.2

# `@super-protocol/sp-files-addon-linux-x64-gnu`

This is the **x86_64-unknown-linux-gnu** binary for `@super-protocol/sp-files-addon`
npm package: @super-protocol/sp-files-addon-win32-x64-msvc
Description: This is the **x86_64-pc-windows-msvc** binary for `@super-protocol/sp-files-addon`
Latest version: 0.13.2

# `@super-protocol/sp-files-addon-win32-x64-msvc`

This is the **x86_64-pc-windows-msvc** binary for `@super-protocol/sp-files-addon`
npm package: @super-protocol/sp-nvtrust-wrapper
Description: NodeJS wrapper for nvtrust
Author: SuperProtocol
Latest version: 2.0.6

# sp-nvtrust-wrapper
A Node.js wrapper for the [`nvtrust`](https://github.com/NVIDIA/nvtrust) library, designed to enable attestation for **NVIDIA Confidential Computing**.

## 📦 Build Instructions

To build the project, run:

```bash
npm install
npm run postinstall
npm run build
```

## 🛠️ Troubleshooting

### MacOS

You may encounter an issue installing the Python `lxml` package on macOS.  
This is often caused by incompatibility with the installed Python version.

**Solution:**  
Downgrade Python to version **3.10**, which is known to be compatible with `lxml`.
npm package: @super-puzzle/paint
Description: canvas generate mask for image
Latest version: 1.1.3

# Paint

为图片生成蒙版图
generate mask for image。

## Doc

reference to `./example/TestComponent.tsx`

## Install

`npm install @super-puzzle/paint`

## Demo

[https://super-puzzle.github.io/paint/](https://super-puzzle.github.io/paint/)