open-index/open-npm huggingface dataset:
npm package: @ngdo/schematics
Description: Schematic to generate application models using rest api service
Author: @ngDominican
Latest version: 0.1.2

# Getting Started With Schematics

This repository is a basic Schematic implementation that serves as a starting point to create and publish Schematics to NPM.

### Testing

To test locally, install `@angular-devkit/schematics-cli` globally and use the `schematics` command line tool. That tool acts the same as the `generate` command of the Angular CLI, but also has a debug mode.

Check the documentation with
```bash
schematics --help
```

### Unit Testing

`npm run test` will run the unit tests, using Jasmine as a runner and test framework.

### Publishing

To publish, simply do:

```bash
npm run build
npm publish
```

That's it!
npm package: @ngduythao/router-sdk
Description: An sdk for routing swaps using Uniswap v2 and Uniswap v3.
Latest version: 1.0.0

# Alpha software

The latest version of the SDK is used in production in the Uniswap Interface,
but it is considered Alpha software and may contain bugs or change significantly between patch versions.
If you have questions about how to use the SDK, please reach out in the `#dev-chat` channel of the Discord.
Pull requests welcome!

# Uniswap Swap Router SDK

This SDK is meant to facilitate interactions with the contracts in [swap-router-contracts](https://github.com/Uniswap/swap-router-contracts).
npm package: @ngduythao/sdk-core
Description: ⚒️ An SDK for building applications on top of Uniswap V3
Latest version: 1.0.1

# Uniswap SDK Core

[![Unit Tests](https://github.com/Uniswap/uniswap-sdk-core/workflows/Unit%20Tests/badge.svg)](https://github.com/Uniswap/uniswap-sdk-core/actions?query=workflow%3A%22Unit+Tests%22)
[![Lint](https://github.com/Uniswap/uniswap-sdk-core/workflows/Lint/badge.svg)](https://github.com/Uniswap/uniswap-sdk-core/actions?query=workflow%3ALint)
[![npm version](https://img.shields.io/npm/v/@uniswap/sdk-core/latest.svg)](https://www.npmjs.com/package/@uniswap/sdk-core/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@uniswap/sdk-core/latest.svg)](https://bundlephobia.com/result?p=@uniswap/sdk-core@latest)

This code is shared across Uniswap TypeScript SDKs.
npm package: @ngduythao/v2-sdk
Description: 🛠 An SDK for building applications on top of Uniswap V2
Latest version: 1.0.1

# Uniswap V2 SDK

[![Unit Tests](https://github.com/Uniswap/uniswap-v2-sdk/workflows/Unit%20Tests/badge.svg)](https://github.com/Uniswap/uniswap-v2-sdk/actions?query=workflow%3A%22Unit+Tests%22)
[![Lint](https://github.com/Uniswap/uniswap-v2-sdk/workflows/Lint/badge.svg)](https://github.com/Uniswap/uniswap-v2-sdk/actions?query=workflow%3ALint)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![npm version](https://img.shields.io/npm/v/@uniswap/v2-sdk/latest.svg)](https://www.npmjs.com/package/@uniswap/v2-sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@uniswap/v2-sdk/latest.svg)](https://bundlephobia.com/result?p=@uniswap/v2-sdk@latest)

In-depth documentation on this SDK is available at [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).
npm package: @ngduythao/v3-sdk
Description: ⚒️ An SDK for building applications on top of Uniswap V3
Latest version: 1.0.1

# Alpha software

The latest version of the SDK is used in production in the Uniswap Interface,
but it is considered Alpha software and may contain bugs or change significantly between patch versions.
If you have questions about how to use the SDK, please reach out in the `#dev-chat` channel of the Discord.
Pull requests welcome!

# Uniswap V3 SDK

[![Unit Tests](https://github.com/Uniswap/uniswap-v3-sdk/workflows/Unit%20Tests/badge.svg)](https://github.com/Uniswap/uniswap-v3-sdk/actions?query=workflow%3A%22Unit+Tests%22)
[![Lint](https://github.com/Uniswap/uniswap-v3-sdk/workflows/Lint/badge.svg)](https://github.com/Uniswap/uniswap-v3-sdk/actions?query=workflow%3ALint)
[![npm version](https://img.shields.io/npm/v/@uniswap/v3-sdk/latest.svg)](https://www.npmjs.com/package/@uniswap/v3-sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@uniswap/v3-sdk/latest.svg)](https://bundlephobia.com/result?p=@uniswap/v3-sdk@latest)

In-depth documentation on this SDK is available at [uniswap.org](https://docs.uniswap.org/).
npm package: @nge-ui/components
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.
Latest version: 1.0.1

# Components

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.

## Code scaffolding

Run `ng generate component component-name --project components` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project components`.
> Note: Don't forget to add `--project components` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build components` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build components`, go to the dist folder `cd dist/components` and run `npm publish`.

## Running unit tests

Run `ng test components` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @ngeenx/ngx-react
Description: Embed React components in Angular projects
Author: Eyüp Erdoğan
Latest version: 2.0.0

# ngx-react

This simple Angular library integrates React components into Angular applications with ease. It is based on React [createElement](https://react.dev/reference/react/createElement) function and Angular [directives](https://angular.io/guide/attribute-directives) (as [standalone components](https://angular.io/guide/standalone-component)). See source code [here](./projects/ngx-react/src/lib/directives/react-component.directive.ts).

> [!WARNING]
> This package is experimental. There may be possible performance problems, memory leaks and similar problems. It is your responsibility to use it.

## [Play on StackBlitz ⚡️](https://stackblitz.com/~/github.com/ngeenx/ngx-react)

## 📦 Installation

Please install with peer dependencies `react` and `react-dom` using your favorite package manager.

### Compatible Versions

| Package Version | Angular Version |
|---------|---------|
| 1.x.x | 17.x.x |
| 2.x.x | 18.x.x |

PNPM

```bash
pnpm i react react-dom @ngeenx/ngx-react
```

NPM

```bash
npm i react react-dom @ngeenx/ngx-react
```

> [!NOTE]
> Addionaly, you can install `@types/react` and `@types/react-dom` for TypeScript support.

## 🚀 Usage

### 1. Import React Directive

Import `ReactComponentDirective` in your standalone component or module.

```typescript
import { ReactComponentDirective } from '@ngeenx/ngx-react';

@NgModule({
  imports: [
    ...
    ReactComponentDirective
  ]
})
```

### 2. Update `tsconfig.json`

Add the following to your `tsconfig.json` file to allow importing `.tsx` files in Angular Project.

```json
{
  "compilerOptions": {
    "jsx": "react",
    ...
  }
}
```

### 3. Create React Component

Create a wrapper component for your React component. We will use this component to pass props to the React component.

```typescript
// ReactApp.tsx

import React, { FC, useState } from 'react';

const ReactApp: FC<any> = ({ initialInputValue }: any) => {
  const [inputValue, setInputValue] = useState(initialInputValue);

  const handleChange = (event: any) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <label htmlFor="myInput">Label:</label>

      <input
        type="text"
        id="myInput"
        value={inputValue}
        onChange={handleChange}
      />

      <p>Input Value: {inputValue}</p>
    </div>
  );
};

export default ReactApp;
```

### 4. Import in Angular Component

```typescript
// app.component.ts

import { Component, NgModule } from '@angular/core';
import ReactApp from './ReactApp';

@Component({
  selector: "app-component",
  template: `<div
    [reactComponent]="ReactApp"
    [props]="props"
  ></div>`,
  standalone: true,
  imports: [ReactComponentDirective],
})
export class StandaloneComponent {
  public ReactApp: typeof ReactApp = ReactApp;
  public props = {
    initialInputValue: "Some Value"
  }
}
```
npm package: @ngeenx/nx-angular-calendar-heatmap
Description: Angular Calendar Heatmap component
Author: relliv
Latest version: 1.0.0

# nx-angular-calendar-heatmap

[![NX Calendar Heatmap Preview](https://github.com/ngeenx/nx-calendar-heatmap/blob/main/docs/static/img/nx-calendar-heatmap-preview.gif?raw=true)](https://ngeenx.github.io/nx-calendar-heatmap/)

NX Calendar Heatmap for Angular. Please check the **[documentation](https://ngeenx.github.io/nx-calendar-heatmap/docs/category/angular)** for installation and usage.
npm package: @ngeenx/nx-angular-svg-loaders
Description: Angular SVG Loaders
Author: relliv
Latest version: 1.0.3

# nx-angular-svg-loaders

[![SVG Loaders Preview](https://github.com/ngeenx/nx-svg-loaders/blob/main/docs/static/img/nx-svg-loaders-preview.gif?raw=true)](https://ngeenx.github.io/nx-svg-loaders/)

Angular SVG loader collection. Please check the **[documentation](https://ngeenx.github.io/nx-svg-loaders/docs/category/angular)** for installation and usage.
npm package: @ngeenx/nx-calendar-heatmap-utils
Description: NX Calendar Heatmap component utils
Author: relliv
Latest version: 1.0.2

# nx-calendar-heatmap-utils

[![NX Calendar Heatmap Preview](https://github.com/ngeenx/nx-calendar-heatmap/blob/main/docs/static/img/nx-calendar-heatmap-preview.gif?raw=true)](https://ngeenx.github.io/nx-calendar-heatmap/)

NX Calendar Heatmap utils. Please check the **[documentation](https://ngeenx.github.io/nx-calendar-heatmap/)** for installation and usage.
npm package: @ngeenx/nx-react-calendar-heatmap
Description: React Calendar Heatmap component
Author: relliv
Latest version: 1.0.0

# nx-react-calendar-heatmap

[![NX Calendar Heatmap Preview](https://github.com/ngeenx/nx-calendar-heatmap/blob/main/docs/static/img/nx-calendar-heatmap-preview.gif?raw=true)](https://ngeenx.github.io/nx-calendar-heatmap/)

NX Calendar Heatmap for React. Please check the **[documentation](https://ngeenx.github.io/nx-calendar-heatmap/docs/category/react)** for installation and usage.
npm package: @ngeenx/nx-react-svg-loaders
Description: React SVG Loaders
Author: relliv
Latest version: 1.0.3

# nx-react-svg-loaders

[![SVG Loaders Preview](https://github.com/ngeenx/nx-svg-loaders/blob/main/docs/static/img/nx-svg-loaders-preview.gif?raw=true)](https://ngeenx.github.io/nx-svg-loaders/)

React SVG loader collection. Please check the **[documentation](https://ngeenx.github.io/nx-svg-loaders/docs/category/react)** for installation and usage.
npm package: @ngeenx/nx-svelte-svg-loaders
Description: Svelte SVG Loaders
Author: relliv
Latest version: 1.0.0

# nx-svelte-svg-loaders

[![SVG Loaders Preview](https://github.com/ngeenx/nx-svg-loaders/blob/main/docs/static/img/nx-svg-loaders-preview.gif?raw=true)](https://ngeenx.github.io/nx-svg-loaders/)

Svelte SVG loader collection. Please check the **[documentation](https://ngeenx.github.io/nx-svg-loaders/docs/category/svelte)** for installation and usage.
npm package: @ngeenx/nx-vue-calendar-heatmap
Description: Vue Calendar Heatmap component
Author: relliv
Latest version: 1.0.1

# nx-vue-calendar-heatmap

[![NX Calendar Heatmap Preview](https://github.com/ngeenx/nx-calendar-heatmap/blob/main/docs/static/img/nx-calendar-heatmap-preview.gif?raw=true)](https://ngeenx.github.io/nx-calendar-heatmap/)

NX Calendar Heatmap for Vue. Please check the **[documentation](https://ngeenx.github.io/nx-calendar-heatmap/docs/category/vue)** for installation and usage.
npm package: @ngeenx/nx-vue-svg-loaders
Description: Vue SVG Loaders
Author: relliv
Latest version: 1.0.2

# nx-vue-svg-loaders

[![SVG Loaders Preview](https://github.com/ngeenx/nx-svg-loaders/blob/main/docs/static/img/nx-svg-loaders-preview.gif?raw=true)](https://ngeenx.github.io/nx-svg-loaders/)

Vue SVG loader collection. Please check the **[documentation](https://ngeenx.github.io/nx-svg-loaders/docs/category/vue)** for installation and usage.
npm package: @ngehlert/event-helper
Description: A simple helper class to handle Event Listeners
Author: Nicolas Gehlert
Latest version: 1.0.3

# Event Helper

This is a small Helper Library that helps you with adding and removing EventListeners in your application.

## Usage

### Setup

Install via npm
```
npm install @ngehlert/event-helper
```

Best used with ES6 imports
```javascript
import { EventHelper } from '@ngehlert/event-helper';
```

### Base usage
```javascript
EventHelper.addEventListener('my-event', document, 'keydown', (event) => {
    console.log(event);
    // do something here
});

// To remove the event listener simply call remove function with your specified name
EventHelper.removeEventListener('my-event');
```

### Usage with method specific context inside a class

```typescript
class MyTestClass {

    constructor() {
        EventHelper.addEventListener('my-event', document, 'keydown', this.myEventListenerFunction.bind(this));
    }
    
    private myEventListenerFunction(event: Event): void {
        // function that uses some class properties
    }
}
```

### One Time Event

After executing once the event listener automatically de-registers itself
```javascript
EventHelper.oneTimeEventListener(document, 'keydown', (event) => {
    console.log(event);
    // do something here
});
```

## Advantages
Easy listener management with names. In plain JavaScript the event handling can get quite messy, especially if you need methods with specific context (e.g. `.bind(this)`).  
With this event helper you can just use functions directly and while declaring the event add `.bind(this)` without needing to create a second variable.

Another advantage is if you want to remove the event not in the same spot where you registered it, you don't need to pass the proper reference along just to cancel the event.
```javascript
// Standard JavaScript way
const myMethod = (event) => {
  // do something
}
const myMethodListener = myMethod.bind(this);

document.addEventListener('mousedown', myMethodListener);
document.removeEventListener('mousedown', myMethodListener);
```

## Development
To build
```
npm run build
```

Before commiting run
```
npm run lint && npm run format && npm run test
```

## License
This is provided under the MIT license. Check LICENSE file for more details.
npm package: @ngekoding/enum
Description: Utility library for working with enumerated types (enums)
Author: Nur Muhammad
Latest version: 1.1.1

# Enum

A utility library for working with enumerated types (enums). Simplify the management of constant values by creating strongly-typed enums with custom labels and values. Provides convenience methods for enum conversion, retrieval, and equality checks.

Inspired by [PHP Enum](https://github.com/spatie/enum).

## Installation

```sh
npm install @ngekoding/enum
```

## Usage

This is how an enum can be defined.

```js
import Enum from '@ngekoding/enum'

class UserLevel extends Enum {
  static Basic = new UserLevel(1, 'Basic')
  static Pro = new UserLevel(2, 'Pro')
  static Premium = new UserLevel(3, 'Premium')
}
```

Where the first parameter is the `value` and the second parameter is the `label`.

### Accessing enum values or labels

```js
console.log(UserLevel.Basic.value) // Output: 1
console.log(UserLevel.Basic.label) // Output: Basic
```

### Creating an enum from a value

```js
const userLevel = UserLevel.fromValue(2)
```

When an enum value doesn't exist, you'll get an `Error` exception. If you would prefer not catching an exception, you can use:

```js
const userLevel = UserLevel.tryFromValue(2)
```

When an enum value doesn't exist in this case, `userLevel` will have value `null` and label `Unknown`.

### Comparing enums

Enums can be compared using the `equals` method:

```js
console.log(userLevel.equals(UserLevel.Pro)) // Output: true
```

You can pass several enums to the `equals` method, it will return `true` if the current enum equals one of the given values.

```js
console.log(userLevel.equals(UserLevel.Pro, UserLevel.Premium)) // Output: true
```

You can safely comparing enum even there is no enum value when using `tryFromValue`.

```js
console.log(UserLevel.tryFromValue(0).equals(UserLevel.Basic)) // Output: false
```

### Get an array of enum instances

You can get an array containing all the enum instances defined within the enum class. This is allows easy access to the entire set of enum values.

```js
const values = UserLevel.values()
console.log(values) // Output: [UserLevel.Basic, UserLevel.Pro, UserLevel.Premium]
```
npm package: @ngenux/react-native-pinch-zoom-view
Description: React Native component designed for easy implementation of pinch-to-zoom functionality.
Author: ng-sushil
Latest version: 0.1.1

# @ngenux/react-native-pinch-zoom-view
## _Interactive Zoom Component for React Native_

`@ngenux/react-native-pinch-zoom-view` is a React Native component designed for easy implementation of pinch-to-zoom functionality. It enables smooth and responsive zooming and panning on images or any content within a defined area in your React Native applications.

## Installation
To install `@ngenux/react-native-pinch-zoom-view`, run the following command in your project directory:

```bash
npm install @ngenux/react-native-pinch-zoom-view
```


## Usage
Import the `ZoomWrapper`  component from `@ngenux/react-native-pinch-zoom-view` and use them to wrap your content.

## Props
- `minZoom`: Minimum zoom level (default: `1`).
- `maxZoom`: Maximum zoom level (default: `5`).
- Additional standard `View` props.


## Tips
- `Responsiveness`: The component adapts to orientation changes. Use the Dimensions API from React Native to adjust the dimensions of the zoom element dynamically.
- `Zoom Boundaries`: Ensure your zoom levels and boundaries are set according to the content size to prevent excessive zooming out or in which might degrade the user experience.

## Example
```jsx
import React, { useState, useEffect } from 'react';
import { Dimensions, View } from 'react-native';
import ZoomWrapper  from '@ngenux/react-native-pinch-zoom-view';

export default function App() {
  const [windowDimensions, setWindowDimensions] = useState(Dimensions.get('window'));

  useEffect(() => {
    const onChange = ({ window }) => {
      setWindowDimensions(window);
    };

    Dimensions.addEventListener('change', onChange);
    return () => Dimensions.removeEventListener('change', onChange);
  }, []);

  const zoomElementStyle = {
    width: windowDimensions.width,
    height: windowDimensions.height,
    position: 'absolute',
  };

  return (
    <View style={{ flex: 1 }}>
      <ZoomWrapper
        style={zoomElementStyle}
        minZoom={1}
        maxZoom={5}
      >
        <Image
          src={'https://d27vkvqvvwyzde.cloudfront.net/Test_Image.JPEG'}
          width={windowDimensions.width}
        />
        {/* Or any other content*/}
      </ZoomWrapper>
    </View>
  );
}

```
---
## License
MIT

## Author


Developed by [ng-sushil](https://github.com/ng-sushil) of [@ngenux](https://www.ngenux.com/)