open-index/open-npm huggingface dataset:
npm package: @joaomosmann/react-dnd-touch-backend
Description: Touch backend for react-dnd
Author: Long Ho
Latest version: 0.3.14

<img src="https://avatars2.githubusercontent.com/u/6412038?v=3&s=200" alt="react logo" title="react" align="right" width="64" height="64" />

# react-dnd-touch-backend

[![npm version](https://badge.fury.io/js/react-dnd-touch-backend.svg)](http://badge.fury.io/js/react-dnd-touch-backend)
[![Dependency Status](https://david-dm.org/yahoo/react-dnd-touch-backend.svg)](https://david-dm.org/yahoo/react-dnd-touch-backend)
[![devDependency Status](https://david-dm.org/yahoo/react-dnd-touch-backend/dev-status.svg)](https://david-dm.org/yahoo/react-dnd-touch-backend#info=devDependencies)
![gzip size](http://img.badgesize.io/https://npmcdn.com/react-dnd-touch-backend?compression=gzip)

Touch Backend for [react-dnd](https://github.com/gaearon/react-dnd)

## Usage
Follow [react-dnd docs](http://gaearon.github.io/react-dnd/) to setup your app. Then swap out `HTML5Backend` for `TouchBackend` as such:

```js
import { default as TouchBackend } from 'react-dnd-touch-backend';
import { DragDropContext } from 'react-dnd';

var YourApp = React.createClass(
  /* ... */

);

module.exports = DragDropContext(TouchBackend)(YourApp);
```
## Tips
### Drag Preview
Since native Drag-n-Drop is not currently supported in touch devices. A custom [DragPreview](https://gaearon.github.io/react-dnd/docs-drag-layer.html) is required. Check out the [example](https://github.com/yahoo/react-dnd-touch-backend/blob/master/examples/js/ItemPreview.jsx) for a sample implementation.

We might try to build it directly in the Backend itself in the future to compensate for this limitation.

### Mouse events support*
You can enable capturing mouse events by configuring your TouchBackend as follows:
```js
DragDropContext(TouchBackend({ enableMouseEvents: true }));
```
**NOTE*: This is buggy due to the difference in `touchstart/touchend` event propagation compared to `mousedown/mouseup/click`. I highly recommend that you use [react-dnd-html5-backend](https://github.com/gaearon/react-dnd-html5-backend) instead for a more performant native HTML5 drag capability.**

## Examples
The `examples` folder has a sample integration. In order to build it, run:
```bash
npm i && npm run dev
```
Then navigate to `localhost:7789` or `(IP Address):7789` in your mobile browser to access the example.
Code licensed under the MIT license. See LICENSE file for terms.
npm package: @joaomosmann/react-resizable
Description: A component that is resizable with handles.
Author: Samuel Reed
Latest version: 1.4.5

### React-Resizable

[View the Demo](https://strml.github.io/react-resizable/examples/1.html)

A simple widget that can be resized via a handle.

You can either use the `<Resizable>` element directly, or use the much simpler `<ResizableBox>` element.

See the example and associated code in [TestLayout](/test/TestLayout.jsx) and
[ResizableBox](/lib/ResizableBox.jsx) for more details.

Make sure you use the associated styles in [/css/styles.css](/css/styles.css), as without them, you will have
problems with handle placement and visibility.

You can pass options directly to the underlying `Draggable` instance by using the prop `draggableOpts`.
See the [demo](/test/TestLayout.jsx) for more on this.

### Installation

Using [npm](https://www.npmjs.com/):

    $ npm install --save react-resizable

### Usage

```javascript
var Resizable = require('react-resizable').Resizable; // or,
var ResizableBox = require('react-resizable').ResizableBox;

// Using ES6 transpiler
import { Resizable, ResizableBox } from 'react-resizable';

...
render: function() {
  return (
    <ResizableBox width={200} height={200} draggableOpts={{...}}
        minConstraints={[100, 100]} maxConstraints={[300, 300]}>
      <span>Contents</span>
    </ResizableBox>
  );
}
```

### `<Resizable>` Options

```js
{
// Functions
onResizeStop: React.PropTypes.func,
onResizeStart: React.PropTypes.func,
onResize: React.PropTypes.func,

width: React.PropTypes.number.isRequired,
height: React.PropTypes.number.isRequired,
// If you change this, be sure to update your css
handleSize: React.PropTypes.array,
// These will be passed wholesale to react-draggable
draggableOpts: React.PropTypes.object
}
```

### `<ResizableBox>` Options

```js
{
lockAspectRatio: React.PropTypes.bool, // Preserves aspect

// Constaints coords, pass [x,y]
minConstraints: React.PropTypes.arrayOf(React.PropTypes.number),
maxConstraints: React.PropTypes.arrayOf(React.PropTypes.number),

// Initial width/height - otherwise use CSS
height: React.PropTypes.number,
width: React.PropTypes.number
}
```
```
npm package: @joaomrpimentel/j-calc
Description: Simple Calculator Library
Author: João Marcos
Latest version: 0.1.0

# j-lib-calc 📚

**j-lib-calc** is a calculator library implemented in TypeScript, designed to simplify basic and advanced mathematical operations with a focus on simplicity and extensibility.

> **Note**: This project was developed as part of a Software Engineering class.

## 🚀 Features

- **Basic Operations**: Addition, subtraction, multiplication, division.  
- **TypeScript Support**: Full type safety for better development experience.  
- **Easy to Use**: Intuitive and well-documented API.  
- **Extensible**: Add new features easily.  
- **Automated Testing**: Fully tested with high test coverage.  
- **Quality Assurance**: Integrated with SonarQube for code analysis.  

---

## 📦 Installation

Install the library from npm:

```bash
npm install j-lib-calc
```

Or using Yarn:

```bash
yarn add j-lib-calc
```

---

## 🔧 Usage

### Basic Example

```typescript
import { Calculator } from 'j-lib-calc';

const calc = new Calculator();

console.log(calc.add(5, 3)); // Output: 8
console.log(calc.multiply(4, 2)); // Output: 8
```

### Supported Operations

- **`add(a: number, b: number): number`** - Adds two numbers.
- **`subtract(a: number, b: number): number`** - Subtracts two numbers.
- **`multiply(a: number, b: number): number`** - Multiplies two numbers.
- **`divide(a: number, b: number): number`** - Divides two numbers (with zero-division check).

---

## 🛠️ Development

### Prerequisites

- Node.js 18+
- npm or Yarn

### Setup Steps

1. Clone the repository:

```bash
git clone https://github.com/joaomrpimentel/j-lib-calc.git
```

2. Install dependencies:

```bash
npm install
```

3. Run tests:

```bash
npm test
```

---

## 🤖 CI/CD

This project uses GitHub Actions for automation:

1. **Automated Tests**: Run on every commit to ensure reliability.
2. **Quality Analysis**: Integrated with [SonarQube](https://sonarcloud.io).
3. **npm Publishing**: Automatically publishes to npm when changes are pushed to the `main` branch.
4. **Discord Notifications**: Updates the team about new published versions.

---