open-index/open-npm huggingface dataset:
npm package: @otwmoo/babel-preset-backpack
Description: Babel preset for Backpack projects
Author: jaredpalmer
Latest version: 0.8.1

# babel-preset-backpack

This package includes the [Babel](https://babeljs.io) preset used by [Backpack](https://github/com/palmerhq/backpack)

## Usage in Backpack Projects

The easiest way to use this configuration is with Backpack, which includes it by default. **You don’t need to install it separately in Backpack projects.**

## Usage Outside of Backpack

If you want to use this Babel preset in a project not built with Backpack, you can install it with following steps.

First, [install Babel](https://babeljs.io/docs/setup/).

Then create a file named `.babelrc` with following contents in the root folder of your project:

```js
{
  "presets": ["backpack"]
}
```

This preset uses the `useBuiltIns` option with [transform-object-rest-spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/), which assumes that `Object.assign` is available or polyfilled.

---

MIT License
npm package: @otyg/angular-signature-pad
Description: Angular Component wrapper for szimek/signature_pad
Author: Al-Mothafar Al-Hasan
Latest version: 4.0.5

# Angular Signature Pad
Angular component for [szimek/signature_pad](https://www.npmjs.com/package/signature_pad).

## Install
`npm install @otyg/angular-signature-pad --save`

## Reference Implementation

* [Live Demo](http://lathonez.com/angular2-signaturepad-demo/)
* [Source](https://github.com/lathonez/angular2-signaturepad-demo)

## Usage example

API is identical to [szimek/signature_pad](https://www.npmjs.com/package/signature_pad).

Options are as per [szimek/signature_pad](https://www.npmjs.com/package/signature_pad) with the following additions:
* canvasWidth: width of the canvas (px)
* canvasHeight: height of the canvas (px)
  The above options are provided to avoid accessing the DOM directly from your component to adjust the canvas size.

```typescript

// import into app module

import { SignaturePadModule } from '@otyg/angular-signature-pad';

...

@NgModule({
  declarations: [ ],
  imports: [ SignaturePadModule ],
  providers: [ ],
  bootstrap: [ AppComponent ]
})

// then import for use in a component

import { Component, ViewChild } from '@angular/core';
import { SignaturePadComponent } from '@otyg/angular-signature-pad';

@Component({
  template: '<signature-pad #signature [options]="signaturePadOptions" (drawStart)="drawStart($event)" (drawEnd)="drawComplete($event)"></signature-pad>'
})

export class SignaturePadPage {

  @ViewChild('signature')
  public signaturePad: SignaturePadComponent;

  private signaturePadOptions: NgSignaturePadOptions = { // passed through to szimek/signature_pad constructor
    minWidth: 5,
    canvasWidth: 500,
    canvasHeight: 300
  };

  constructor() {
    // no-op
  }

  ngAfterViewInit() {
    // this.signaturePad is now available
    this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime
    this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
  }

  drawComplete(event: MouseEvent | Touch) {
    // will be notified of szimek/signature_pad's onEnd event
    console.log('Completed drawing', event);
    console.log(this.signaturePad.toDataURL());
  }

  drawStart(event: MouseEvent | Touch) {
    // will be notified of szimek/signature_pad's onBegin event
    console.log('Start drawing', event);
  }
}
```
npm package: @ou-imd/imd-resizer
Description: Automatic iframe resizing for the VLE
Author: Edwin Langley
Latest version: 1.0.4

# IMD-Resizer #

## What is IMD-Resizer

IMD-Reszier is a utility that will automatically resize iframes on the Virtual Learning Environment.

### How do I get set up? ###

In a NPM enabled project run:

```sh
npm install @ou-imd/imd-resizer
```

In your main.js file

```javascript
 import "@ou-imd/imd-resizer"
```

Done!

If you want a configured resizer

```javascript
 import { configuredResizer } from "@ou-imd/imd-resizer/configuredResizer";
 configuredResizer(true, 300).observe(document.body);
```

Done!
npm package: @ou-imdt/imdt-create
Description: Command line tool to create IMDT Boilerplate.
Author: Mustafa Bektik
Latest version: 1.2.1
Deprecated: This package has been deprecated in favor of @ou-imdt/create. Use the new package.

# imdt-create

## Features

- Automatic argument parsing, help text, and welcome message.
- History to maintain the last input data like author `email`.
- Checks Node.js version and notifies if Long Term Support (LTS) version is not used.


**Compatibility note:**  
> imdt-create requires [Node.js LTS version](https://nodejs.org/en/download/), check [LTS versions of Node.js](https://github.com/nodejs/release#release-schedule) 

## Install

### Using NPX (recommended)

> NPX is a package executer, and it is used to execute javascript packages directly, without installing them. imdt-create is a CLI tool, and it is recommended to use NPX as it will always use the latest version of the package.

```sh
npx @ou-imdt/imdt-create
```
or

```sh
# Global install
npm install @ou-imdt/imdt-create -g
```

### Update to the latest version

```sh
npm update -g @ou-imdt/imdt-create
```

## Usage

Run the imdt-create using

```sh
imdt-create <command> [option]
```
Then answer the following questions to generate a boilerplate.

```sh
Widget name?
Widget description?
Widget author? (name <email> **)

** will be fetched from git config if git confidentials do not exists you will be prompted to enter them.
```

### Commands

```sh
help  Prints help info
```

### Options

```sh
-c, --clear    Clear the console Default: true
-v, --version  Print CLI version Default: false
```


## Changelog

[❯ Read the changelog here →](changelog.md)

### Contribution guides

#### Boilerplate as a git submodule

Make sure to update Git submodule to pull latest changes from the Boilerplate repository.

```sh
git submodule update --remote --merge
```
#### Local testing:
Run `npm link` in the imdt-create directory to test the locally installed package.

Run `npm unlink` to remove the local package.

`--debug/-d` flag is available to see the debug logs.

#### Pre-publish tasks:
Bump the version number in `package.json` and `changelog.md` files.

npm publish dry run: `npm publish --dry-run` to get a preview of the files that will be published.

Git commit and push the changes.

Check if logged in to npm: `npm whoami`

If not logged in, login to npm: `npm login`

Publish the package: `npm publish --access public` 🚀
npm package: @ou-imdt/utils
Description: Utility library for interactive media development
Author: The Open University
Latest version: 0.10.0

# Utils 

[![npm version](https://badge.fury.io/js/@ou-imdt%2Futils.svg)](https://badge.fury.io/js/@ou-imdt%2Futils)


## Introduction

This library is a collection of utility functions designed to simplify various tasks in JavaScript development. The library focuses on utilities to be used in interactive media development for our VLE.

## Features

There are a wide range of utility functions for array manipulation, string handling, mathematical operations, and more. You can import only the utilities you need to keep your bundle size small. The library works seamlessly with any JavaScript framework or environment.

## Installation

Install `@ou-imdt/utils` via npm:

```bash
npm install @ou-imdt/utils
```

## Usage

> It is recommended to use Create tool, all vleUtils are included in the boilerplate. Check [Create README]([CREATE](https://bitbucket.org/lts-imd/create/src/main/readme.md)) for examples.


### Documentation

 All utils library documentation will be provided in a documentation site, in the meantime you can have a look any .js file in the library and find JSDoc annotations in the source code.


## Changelog

❯ [Read the changelog here](./changelog.md)

## Issue reporting

- Use the issue tracker.
- Provide a clear and descriptive title.
- Describe the steps to reproduce the issue (for bugs).
- Explain the expected and actual behavior (for bugs).
- Describe why the feature is needed (for feature requests).

## Licence

This project is licensed under the MIT License - see the [LICENSE](./LICENCE) for details.

## Contributing

See [contributing](./contributing.md) for more details.

## Contact

Alex, Charlotte, Edwin, Mustafa
npm package: @ouanake/rescript-react-diagram
Description: Easy to use automatic diagram layout component in react
Author: Hervé Giraud
Latest version: 1.0.9-beta2

# Rescript React Diagram

Easy to use automatic diagram layout component in react.

![screenshot](screenshot.png)

## Goals

I'm just playing with react-reconciler (as a learning exercise) and an automatic diagram layout algo 
(currently using [dagre](https://github.com/dagrejs/dagre), it might change later since it is deprecated).

- minimal dependencies
- nodes are plain html dom nodes (limit svg to lines)
- using react-reconciler, try to produce very readable DOM nodes
- no styling
- full rescript (_except impossible constructs, like uppercase variables_)

# Setup

clone this project, then:

```
npm install
npm run build
npm run dev 
```

Simple application demo can be found in the `example` folder.

# Usage

## Minimal code

```rescript
@react.component
let make = () =>
  <Diagram width="300px" height="300px">
    <Diagram.Node key="n1" nodeId="n1"> {"Node 1"->React.string} </Diagram.Node>
    <Diagram.Node key="n2" nodeId="n2"> {"Node 2"->React.string} </Diagram.Node>
    <Diagram.Edge key="n1-n2" source="n1" target="n2" label="edge" />
  </Diagram>
```

Note: you need to provide your own css styling.

## Dynamic layout

A more complex code sample that uses dynamic items:

```rescript

let sample = "1|2|3||1-2|1-3"

let parse = instructions => {
  instructions
  ->Js.String2.split("|")
  ->Belt.Array.keep(line => line->Js.String2.length > 0)
  ->Belt.Array.reduce(([], []), ((nodes, edges) as acc, line) => {
    switch line->Js.String2.split("-") {
    | [node] => (nodes->Belt.Array.concat([node]), edges)
    | [source, target] => (nodes, edges->Belt.Array.concat([(source, target)]))
    | _ => acc
    }
  })
}

let renderArray = (a, fn) => a->Belt.Array.map(fn)->React.array

module App = {
  @react.component
  let make = () => {
    let (nodes, edges) = parse(sample)

    <Diagram className="diagram" width="300px" height="300px">
      {nodes->renderArray(nodeId =>
        <Diagram.Node key={nodeId} nodeId={nodeId}>
          {("Node " ++ nodeId)->React.string}
        </Diagram.Node>
      )}
      {edges->renderArray(((source, target)) =>
        <Diagram.Edge key={source ++ "-" ++ target} source target label="edge" />
      )}
    </Diagram>
  }
}
```

# Links

- https://github.com/facebook/react/tree/main/packages/react-reconciler
- https://github.com/chentsulin/awesome-react-renderer