open-index/open-npm huggingface dataset:
npm package: @pronestor/react-zoom-pan-pinch
Description: React package for zooming, panning and pinching html elements in an easy way.
Author: Pronestor
Latest version: 2.4.5
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @pronestor/react-zoom-pan-pinch

Super fast and light react Node.js package for zooming, panning and pinching html elements in an easy way.

This is a fork of [react-zoom-pan-pinch](https://github.com/prc5/react-zoom-pan-pinch) originally created in order to fix [the issue with build errors because of missing source files](https://github.com/prc5/react-zoom-pan-pinch/issues/265).

## Documentation

[Storybook for `@pronestor/react-zoom-pan-pinch`](https://pronestoraps.github.io/react-zoom-pan-pinch/).

## Quick Start

### Installation

```shell
yarn add @pronestor/react-zoom-pan-pinch
```

or

```shell
npm install @pronestor/react-zoom-pan-pinch
```

### Usage

Basic usage:

```jsx
import {
  TransformComponent,
  TransformWrapper,
} from "@pronestor/react-zoom-pan-pinch";

export const SimpleExample = () => (
  <TransformWrapper>
    <TransformComponent>
      <img src="image.jpg" alt="test" />
    </TransformComponent>
  </TransformWrapper>
);
```

With controls:

```jsx
import {
  TransformComponent,
  TransformWrapper,
} from "@pronestor/react-zoom-pan-pinch";

export const ExampleWithZoomControls = () => (
  <TransformWrapper
    initialPositionX={200}
    initialPositionY={100}
    initialScale={1}
  >
    {({ zoomIn, zoomOut, ...rest }) => (
      <>
        <div className="tools">
          <button onClick={() => zoomIn()}>+</button>
          <button onClick={() => zoomOut()}>-</button>
        </div>
        <TransformComponent>
          <img src="image.jpg" alt="test" />
          <div>Example text</div>
        </TransformComponent>
      </>
    )}
  </TransformWrapper>
);
```

## License

MIT © [Pronestor](https://github.com/proNestorAps)
npm package: @pronix/flux
Description: A simple library for creating reactive applications using streams
Author: pronix
Latest version: 1.0.10

![](/screenshots/logo.flux.png)

# Flux.js
![](https://img.shields.io/github/package-json/v/pronix575/flux) ![](https://img.shields.io/npm/dt/@pronix/flux.svg)
### A simple library for creating reactive applications using streams 
## Getting started
### installation:
```
$ yarn add @pronix/flux
```
### using:
```typescript
// TypeScript + es6 modules

import Flux from '@pronix/flux'

interface Person {
    name: string,
    age: number,
    sex: 'male' | 'female' | 'other'
}

const stream = new Flux<Person[]>([])

stream
    .subscribe(
        (data) => console.log(
            data
                .map(p => p.name)
                .join('\n')
        ),
        (data) => {}
        // ...
    )
    .dispatch(
        (data) => {
            data.push({
                name: 'pronix',
                age: 25,
                sex: 'male'
            })
            return data
        }
        // ...
    )
```
```javascript
// JavaScipt + require

const Flux = require('@pronix/flux').default

const stream = new Flux([])

stream
    .subscribe(
        (data) => console.log(
            data
                .map(p => p.name)
                .join('\n')
        ),
        (data) => {}
        // ...
    )
    .dispatch(
        (data) => {
            data.push({
                name: 'pronix',
                age: 25,
                sex: 'male'
            })
            return data
        }
        // ...
    )
```
npm package: @pronix/ttcodegen
Description: codegen for effector services
Author: pronix575
Latest version: 2.0.3

![](/assets/logo.png)
# ttcodegen
![](https://img.shields.io/github/package-json/v/pronix575/ttcodegen) ![](https://img.shields.io/npm/dt/@pronix/ttcodegen.svg)

# Cli for creating file structures based on templates

## Installation

```bash
npm i -g @pronix/ttcodegen
```

## Using:

### 1. Create ttcodegen.json configuration file

```json
{
  "templatesDirectoryPath": "./templates",
  "arguments": [],
  "options": [
    {
      "name": "component",
      "option": "-C",
      "description": "Create react component"
    },
    {
      "name": "service",
      "option": "-S",
      "description": "Create effector service"
    }
  ]
}

```

### 2. Create template files in directory with any option name
> "./ttc/templates/service/{{name}}Service.container.tsx.hbs"
```hbs
import React from 'react';
import { {{ name }}Service } from './{{ name }}Service.models';

const { inputs, outputs } = {{ name }}Service;

export const {{ cfl name }}Container = () => {
  return <></>;
};
```
![](/assets/ttcFiles.png)

### 3. Run ttc

```bash
$ ttc -S ./src/services createTask

📂 ./src/services/applyTask/

+ 📄 applyTaskService.types.ts
+ 📄 applyTaskService.models.ts
+ 📄 applyTaskService.container.tsx
+ 📄 applyTaskService.api.ts
+ 📄 index.ts
```
npm package: @pronotron/pointer
Description: Tracks mouse and touch pointers with custom states such as holding, tapping, idling, interacting, moving out, and moving in, providing enhanced interaction control.
Author: Yunus Bayraktaroglu
Latest version: 1.0.1

# @pronotron/pointer

[![NPM Package][npm]][npm-url]
[![Build Size][build-size]][build-size-url]
[![Codecov][codecov-pointer]][codecov-url-pointer]

Tracks mouse and touch pointers with custom states such as holding, tapping, idling, interacting, moving out, and moving in, providing enhanced interaction control.

### Setup
```typescript
import { MouseController, TouchController } from "@pronotron/pointer";
import { PronotronAnimator, PronotronClock, isTouchDevice } from "@pronotron/utils";

const clock = new PronotronClock();
const animator = new PronotronAnimator( clock );

/**
 * Or create a touch controller if
 * isTouchDevice(); 
 */
const pointerController = new MouseController({
  target: window.document.body,
  clock: clock,
  animator: animator,
  idleThreshold: 0.5,
  tapThreshold: 0.25,
  holdThreshold: 0.75,
  movingDeltaLimit: 10,
  isInteractable: ( target: HTMLElement ) => {
    return target.classList.contains( "holdable" ) || target.tagName === "A";
  },
  isHoldable: ( target: HTMLElement ) => {
    return target.dataset.holdable ? true : false;
  }
});

const holdHandler = ( event: CustomEvent ) => {
  console.log( "HOLD", event )
};
const holdendHandler = ( event: CustomEvent ) => {
  console.log( "HOLD-END", event )
};
const tapHandler = ( event: CustomEvent ) => {
  console.log( "TAP", event )
};

window.document.body.addEventListener( "hold", holdHandler as EventListener );
window.document.body.addEventListener( "holdend", holdendHandler as EventListener );
window.document.body.addEventListener( "tap", tapHandler as EventListener );
```

### Usage

```typescript
pointerController.startEvents();

let animationFrameId = 0;

function tick()
{
  const deltaTime = clock.tick();
  animator.tick();

  const pointerPosition = pointerController.getPosition();
  const pointerDelta = pointerController.getDelta();
  const pointerState = pointerController.getState();
  const isPointerTargetInteractable = pointerController.getTargetInteractable();    

  animationFrameId = requestAnimationFrame( tick );
};

animationFrameId = requestAnimationFrame( tick );

// Dispose
// pointerController.stopEvents();
```

[npm]: https://img.shields.io/npm/v/@pronotron/pointer
[npm-url]: https://www.npmjs.com/package/@pronotron/pointer
[build-size]: https://img.shields.io/bundlephobia/minzip/@pronotron/pointer
[build-size-url]: https://bundlephobia.com/result?p=@pronotron/pointer
[codecov-pointer]: https://codecov.io/gh/yunusbayraktaroglu/pronotron-tech-art-suite/branch/main/graph/badge.svg?flag=pronotron-pointer&precision=1
[codecov-url-pointer]: https://app.codecov.io/gh/yunusbayraktaroglu/pronotron-tech-art-suite?flags%5B0%5D=pronotron-pointer
npm package: @pronotron/utils
Description: A set of helper modules used by other @pronotron packages, which can also be used individually.
Author: Yunus Bayraktaroglu
Latest version: 1.0.1

# @pronotron/utils

[![NPM Package][npm]][npm-url]
[![Build Size][build-size]][build-size-url]
[![Codecov][codecov-utils]][codecov-url-utils]

A set of helper modules used by other @pronotron packages, which can also be used individually.

- `Animator`: Built on `NativeControlTable` and `Clock`, provides a lightweight yet powerful system for managing large-scale animations with high efficiency.
- `NativeControlTable`: Utilizes [TypedArrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_objects) and a given Enum structure to store grouped data in direct-access memory, enabling blazing-fast, secure iterations and modifications.
- `Clock`: Simultaneously tracks two types of time, continuous and pausable. Pausable time stops ticking when the screen is inactive.

[npm]: https://img.shields.io/npm/v/@pronotron/utils
[npm-url]: https://www.npmjs.com/package/@pronotron/utils
[build-size]: https://img.shields.io/bundlephobia/minzip/@pronotron/utils
[build-size-url]: https://bundlephobia.com/result?p=@pronotron/utils
[codecov-utils]: https://codecov.io/gh/yunusbayraktaroglu/pronotron-tech-art-suite/branch/main/graph/badge.svg?flag=pronotron-utils&precision=1
[codecov-url-utils]: https://app.codecov.io/gh/yunusbayraktaroglu/pronotron-tech-art-suite?flags%5B0%5D=pronotron-utils