open-index/open-npm huggingface dataset:
npm package: @mediamonks/assetmanager
Description: Lightweight library for loading and unloading image, video, audio and data assets
Author: Richard Heuser
Latest version: 1.2.1

## AssetManager

- Loads and unloads image, video, audio and data assets
- Centralizes asset management
- Easy to use
- No dependencies

### Installation
```shell
npm add @mediamonks/assetmanager
```

### Usage
```javascript
import assetManager from '@mediamonks/assetmanager';

// loading a single file
assetManager.load('https://catpics.com/cat.png');

// loading multiple files
assetManager.load(['meow.mp3', 'wavs/lol.wav']);

// loading into a namespace
assetManager.load(['data/data.json', 'videos/video.mp4'], 'main');

// loading with progress callback
assetManager.load(allTheFiles, progress => {
    console.log(`${Math.floor(progress * 100)}%`);
});

// loading into a namespace with progress callback
assetManager.load(catMediaFiles, 'catMedia', progress => {
    console.log(`${Math.floor(progress * 100)}%`);
});


// using an image asset
image.src = assetManager.get('https://catpics.com/cat.png'); // returns HTMLImageElement

// using a video asset
video.src = assetManager.get('videos/video.mp4'); // returns object URL

// using an audio asset
const audioContext = new AudioContext();
const source = audioContext.createBufferSource();
source.buffer = assetManager.get('meow.mp3'); // returns AudioBuffer
source.start();

// using a data asset
const data = assetManager.get('data/data.json'); // returns Object


// loading and using
const music = await assetManager.load('https://music.com/music.mp3');


// unloading a single file
assetManager.release('meow.mp3');

// unloading multiple files
assetManager.release(['meow.mp3', 'lol.wav']);

// unloading a namespace
assetManager.release('main');

// unloading everything
assetManager.release();
```

Note: Keep in mind that garbage collection can't actually free up the memory unless the asset is no longer referenced anywhere, so make sure you also unset any variables, properties and DOM references that point to the asset.
When using a modern framework, this means that as long as you keep all your references to an asset within a component and properly scope your variables, destroying the component should take care of this.


### In Vue.js
```javascript
import assetManager from '@mediamonks/assetmanager';

Vue.use(assetManager, {
	root: 'assets/' // optional. specifies a root path to be prefixed to all relative paths
});
```

#### Loading/using/unloading in a component
```javascript
this.$assets.load(['image.png', 'data.json']);

const { value } = this.$assets.get('data.json');

this.$assets.release('data.json');
```

#### Using in a template
```vue
<img :src="$assets.get('images/image.png')" />
```
npm package: @mediamonks/commitlint-config
Description: Sharable commitlint config based on Media.Monks Frontend Coding Standards
Author: frontend.monks
Latest version: 1.0.2

# @mediamonks/commitlint-config

Set some basic conventions and rules for our commit messages using
[commitlint](https://commitlint.js.org/).

Note that we have not enabled the `type` and `scope` rules that are "conventional", because we don't
use them. It just focuses on the basics outlined in this [article](https://cbea.ms/git-commit/) on
how to write good commit messages.

## Installation

### Install `@commitlint/cli` and `@mediamonks/commitlint-config`

```shell
npm i -D @commitlint/cli @mediamonks/commitlint-config
```

### Create your configuration

This can be added in a lot of places
([see docs](https://commitlint.js.org/#/guides-local-setup?id=install-commitlint)), but we recommend
the `package.json`.

```json
{
  ...
  "commitlint": {
    "extends": ["@mediamonks/commitlint-config"]
  }
}
```

### Set up husky

To make sure that your commit messages are validated when you are committing.

```shell
# Install Husky v6
npm i -D husky

# Activate hooks
npx husky install

# Add hook
npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'
```

## Rules

### Errors

- Subject line must be `72` characters max
- Subject line must **start** with a `capital letter`
- Subject line must **not end** with a `period`
- There must be an `empty line` between the **subject** and the **body**
- Body must be `72` characters max per line

### Warnings

- Subject line must be `30` characters min
npm package: @mediamonks/core-transition-component
Description: GreenSock animations for your components.
Author: Lars van Braam
Latest version: 1.1.2

# @mediamonks/core-transition-component

The core package to provide GreenSock transition functionality to components.

### 🚀 Getting started

Install this package in your project:

```sh
yarn add @mediamonks/core-transition-component
# or
npm i -S @mediamonks/core-transition-component
```

## 📝 License

[MIT](../LICENSE)
npm package: @mediamonks/display-dev-server
Description: This is the Display.Monks development server, which handles previewing and compiling ads via webpack.
Latest version: 11.9.1

# Display Development Server
[![npm-version](https://img.shields.io/npm/v/@mediamonks/display-dev-server)](https://www.npmjs.com/package/@mediamonks/display-dev-server)
[![npm-downloads](https://img.shields.io/npm/dm/@mediamonks/display-dev-server)](https://www.npmjs.com/package/@mediamonks/display-dev-server)
[![github-contributors](https://img.shields.io/github/contributors/mediamonks/display-dev-server)](https://github.com/mediamonks/display-dev-server)
[![github-activity](https://img.shields.io/github/commit-activity/m/mediamonks/display-dev-server)](https://github.com/mediamonks/display-dev-server/commits/master)
[![libraries.io-dependencies](https://img.shields.io/librariesio/github/mediamonks/display-dev-server)](https://libraries.io/github/mediamonks/display-dev-server)

The Display Development Server is used as a tool to build and develop display ads.

## Installation

```sh
yarn add @mediamonks/display-dev-server
```

```sh
npm i @mediamonks/display-dev-server
```

## Basic Usage

```js
// for building
dds --mode production

// for developing
dds --mode development
```

The easiest way to get started is by using the yeoman template [@mediamonks/generator-display-templates](https://github.com/mediamonks/generator-display-templates)

## Documentation

View the [documentation](https://mediamonks.github.io/display-advertising-docs/).

## 🆕 Latest Updates (v11.8.0)
### Enhanced Animation Controls
- ⌨️ Keyboard Controls
  - `Space` - Play/Pause animations
  - `R` - Reload all visible banners
  - `→` - Skip to end frame
  - `.` - Forward 250ms
- 🖱 Mouse click support for play/pause
- ⏱ Animation time tracker
- ⚙️ Configurable controls visibility via `controlsOff` setting

### Configuration
```javascript
{
  // Hide visual controls while maintaining keyboard shortcuts
  controlsOff: false
}

## Contribute

View [CONTRIBUTING.md](./CONTRIBUTING.md)

## LICENSE

[MIT](./LICENSE) © MediaMonks
npm package: @mediamonks/display-upload
Description: Display.Monks upload tool. Uploads ad files to various platforms and vendors.
Latest version: 1.6.4

# display-upload [![Travis](https://img.shields.io/travis/mediamonks/henk.svg)](https://travis-ci.org/mediamonks/richmedia-temple-server) [![npm](https://img.shields.io/npm/v/@mediamonks/henk.svg)](https://www.npmjs.com/package/@mediamonks/henk) [![npm](https://img.shields.io/npm/dm/@mediamonks/henk.svg)](https://www.npmjs.com/package/@mediamonks/richmedia-temple-server)

Uploading files to a location. through the command line.

Currently supported

* MediaMonks Preview
* S3
* SFTP/SSH
* Flashtalking
* Workspace
* Google DoubleClick Studio


## Installation
```sh
yarn global add @mediamonks/display-upload
```

```sh
npm i -G @mediamonks/display-upload
```

## Lets start
```sh
display-upload
```
Now that the CLI guides you through uploads


## LICENSE

[MIT](./LICENSE) © MediaMonks
npm package: @mediamonks/eslint-config
Description: Sharable eslint config based on Media.Monks Frontend Coding Standards
Author: frontend.monks
Latest version: 3.1.1

# Monks - eslint Configuration

The Monks ESLint Configuration is a set of linting rules and presets designed to enforce the
[Frontend Coding Standards](https://github.com/mediamonks/frontend-coding-standards) at Monks. This
configuration helps maintain code quality and consistency across different projects by providing
tailored presets for various project types, including JavaScript, TypeScript, and React.

## Quickstart

1. Install `@mediamonks/eslint-config`

```sh
npm install --save-dev @mediamonks/eslint-config
```

2. Create a `eslint.config.js` file in the root of your module

3. Configure your project with one of the configuration presets

### Presets

| Project Type         | Preset Name     | Description                                  |
| -------------------- | --------------- | -------------------------------------------- |
| JavaScript           | javascript      | Preset for standard JavaScript projects      |
| JavaScript and React | react           | Preset for React projects using JavaScript   |
| TypeScript           | typescript      | Preset for TypeScript projects               |
| TypeScript and React | typescriptReact | Preset for React projects using TypeScript   |
| JavaScript (Node.js) | javascriptNode  | Preset for Node.js projects using JavaScript |
| TypeScript (Node.js) | typescriptNode  | Preset for Node.js projects using TypeScript |

## Examples

The package provides presets tailored for different project types. These presets ensure that your
project adheres to the coding standards and best practices. Below are examples of how to configure
your project using these presets.

### For projects with JavaScript

```js
import { configs } from '@mediamonks/eslint-config';

export default [
  ...configs.javascript,
  {
    ignores: ['build/*'],
  },
  {
    languageOptions: {
      // Your project language options...
      // Please see the eslint documentation for more details
    },
  },
];
```

### For projects with TypeScript

```js
import { configs } from '@mediamonks/eslint-config';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  ...configs.typescript,
  {
    ignores: ['build/*'],
  },
  {
    languageOptions: {
      // Your project language options...
      // Please see the eslint/typescript-eslint documentation for more details
    },
  },
);
```

### For projects with TypeScript and React

```js
import { configs } from '@mediamonks/eslint-config';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  ...configs.typescriptReact,
  {
    ignores: ['build/*'],
  },
  {
    languageOptions: {
      // Your project language options...
      // Please see the eslint/typescript-eslint documentation for more details
    },
  },
);
```
npm package: @mediamonks/eslint-config-base
Description: This package provides a Base TypeScript eslint configuration as an extensible shared config, based on the [MediaMonks Coding Standards](https://github.com/mediamonks/frontend-coding-standards).
Author: frontend.monks
Latest version: 2.2.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @mediamonks/eslint-config-base [![npm version](https://badge.fury.io/js/%40mediamonks%2Feslint-config-base.svg)](https://badge.fury.io/js/%40mediamonks%2Feslint-config-base)

This package provides a Base TypeScript eslint configuration as an extensible shared config, based on the [MediaMonks Coding Standards](https://github.com/mediamonks/frontend-coding-standards).

## Installation

The configuration has a number of peer dependencies that must be installed.

```bash
npm i --dev @mediamonks/eslint-config-base
```

**Note for `yarn` users**: `yarn` does not install peer dependencies by default, this can be supplemented with `install-peerdeps`.

```bash
npx install-peerdeps --dev @mediamonks/eslint-config-base
```

## Usage

Now you can add `@mediamonks/eslint-config-base` to your `.eslintrc`. Adding `parserOptions.project` is only required if your project is using TypeScript.

```js
{
  "extends": "@mediamonks/eslint-config-base",
  "parserOptions": {
    "project": "./tsconfig.json" // can also be an array, if multiple `tsconfig.json` are present
  }
}

```

### Formatting & Prettier

This eslint configuration purposely had its formatting rules disabled. We encourage to use [prettier](https://prettier.io/) for formatting using the [`@mediamonks/prettier-config`](https://github.com/mediamonks/prettier-config).
npm package: @mediamonks/eslint-config-react
Description: Sharable eslint config based on Media.Monks Frontend Coding Standards
Author: frontend.monks
Latest version: 2.7.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Media.Monks - eslint-config-react

The official Media.Monks eslint configuration, based on the
[Frontend Coding Standards](https://github.com/mediamonks/frontend-coding-standards).

## Installation

The configuration can be installed via `npm`.

```bash
npm install --dev @mediamonks/eslint-config-react
```

To inform eslint of this configuration, you have to add the `eslint` property to your `package.json`
file:

```json
"eslintConfig": {
   "extends": "@mediamonks/eslint-config-react"
}
```

Instead of manually editing your `package.json`, you can also utilize the `npm pkg` subcommand:

```bash
npm pkg set eslintConfig.extends=@mediamonks/eslint-config-react
```
npm package: @mediamonks/eslint-config-typescript
Description: Sharable eslint config based on Media.Monks Frontend Coding Standards
Author: frontend.monks
Latest version: 1.6.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Media.Monks - eslint-config-typescript

The official Media.Monks eslint configuration, based on the
[Frontend Coding Standards](https://github.com/mediamonks/frontend-coding-standards).

## Installation

The configuration can be installed via `npm`.

```bash
npm install --dev @mediamonks/eslint-config-typescript
```

To inform eslint of this configuration, you have to add the `eslint` property to your `package.json`
file:

```json
"eslintConfig": {
   "extends": "@mediamonks/eslint-config-typescript",
   "parserOptions": {
      "project": "./tsconfig.json"
   }
}
```

Instead of manually editing your `package.json`, you can also utilize the `npm pkg` subcommand:

```bash
npm pkg set eslintConfig.extends=@mediamonks/eslint-config-typescript
```
npm package: @mediamonks/eslint-config-typescript-react
Description: Sharable eslint config based on Media.Monks Frontend Coding Standards
Author: frontend.monks
Latest version: 1.5.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Media.Monks - eslint-config-typescript-react

The official Media.Monks eslint configuration, based on the
[Frontend Coding Standards](https://github.com/mediamonks/frontend-coding-standards).

## Installation

The configuration can be installed via `npm`.

```bash
npm install --dev @mediamonks/eslint-config-typescript-react
```

To inform eslint of this configuration, you have to add the `eslint` property to your `package.json`
file:

```json
"eslintConfig": {
   "extends": "@mediamonks/eslint-config-typescript-react",
   "parserOptions": {
      "project": "./tsconfig.json"
   }
}
```

Instead of manually editing your `package.json`, you can also utilize the `npm pkg` subcommand:

```bash
npm pkg set eslintConfig.extends=@mediamonks/eslint-config-typescript-react
```
npm package: @mediamonks/eslint-config-vue
Description: This package provides a Vue TypeScript eslint configuration as an extensible shared config, based on the [MediaMonks Coding Standards](https://github.com/mediamonks/frontend-coding-standards).
Author: frontend.monks
Latest version: 2.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @mediamonks/eslint-config-vue [![npm version](https://badge.fury.io/js/%40mediamonks%2Feslint-config-vue.svg)](https://badge.fury.io/js/%40mediamonks%2Feslint-config-vue)

This package provides a Vue TypeScript eslint configuration as an extensible shared config, based on the [MediaMonks Coding Standards](https://github.com/mediamonks/frontend-coding-standards).

## Installation

The configuration has a number of peer dependencies that must be installed.

```bash
npm i --dev @mediamonks/eslint-config-vue
```

**Note for `yarn` users**: `yarn` does not install peer dependencies by default, this can be supplemented with `install-peerdeps`. Because this config depends on [@mediamonks/eslint-config-base](../base/README.md), you will first have to install its peer dependencies.

```bash
npx install-peerdeps --dev --only-peers @mediamonks/eslint-config-base
npx install-peerdeps --dev @mediamonks/eslint-config-vue
```

## Usage

Now you can add `@mediamonks/eslint-config-vue` to your `.eslintrc`. Adding `parserOptions.project` is only required if your project is using TypeScript.

```js
{
  "extends": "@mediamonks/eslint-config-vue",
  "parserOptions": {
    "project": "./tsconfig.json" // can also be an array, if multiple `tsconfig.json` are present
  }
}

```

### Formatting & Prettier

This eslint configuration purposely had its formatting rules disabled. We encourage to use [prettier](https://prettier.io/) for formatting using the [`@mediamonks/prettier-config`](https://github.com/mediamonks/prettier-config).
npm package: @mediamonks/generator-tawang
Description: Generate a Tawang project used for developing with webpack inside Facebook's AR Studio.
Author: Tim Struthoff
Latest version: 0.3.2

# generator-tawang [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]
> Generate a Tawang project used for developing with webpack inside Facebook&#39;s AR Studio.

## Installation

First, install [Yeoman](http://yeoman.io) and generator-tawang using [npm](https://www.npmjs.com/) (we assume you have pre-installed [node.js](https://nodejs.org/)).

```bash
npm install -g yo
npm install -g @mediamonks/generator-tawang
```

Then to generate a new project, run this command **inside** the project directory.

```bash
yo @mediamonks/tawang
```

## Getting To Know Yeoman

 * Yeoman has a heart of gold.
 * Yeoman is a person with feelings and opinions, but is very easy to work with.
 * Yeoman can be too opinionated at times but is easily convinced not to be.
 * Feel free to [learn more about Yeoman](http://yeoman.io/).

## License

MIT © [Tim Struthoff](tst.works)


[npm-image]: https://badge.fury.io/js/%40mediamonks%2Fgenerator-tawang.svg
[npm-url]: https://www.npmjs.com/package/@mediamonks/generator-tawang
[travis-image]: https://travis-ci.org/mediamonks/generator-tawang.svg?branch=master
[travis-url]: https://travis-ci.org/mediamonks/generator-tawang
[daviddm-image]: https://david-dm.org/mediamonks/generator-tawang.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/mediamonks/generator-tawang
npm package: @mediamonks/henk
Description: Uploading files from one location to the other.
Author: Mient-jan Stelling
Latest version: 1.5.6

# Henk [![Travis](https://img.shields.io/travis/mediamonks/henk.svg)](https://travis-ci.org/mediamonks/richmedia-temple-server) [![npm](https://img.shields.io/npm/v/@mediamonks/henk.svg)](https://www.npmjs.com/package/@mediamonks/henk) [![npm](https://img.shields.io/npm/dm/@mediamonks/henk.svg)](https://www.npmjs.com/package/@mediamonks/richmedia-temple-server)

Uploading files to a location. through the command line.

Currently supported

* MediaMonks Preview
* S3
* SFTP/SSH
* Flashtalking
* Workspace
* Google DoubleClick Studio


## Installation
```sh
yarn global add @mediamonks/henk
```

```sh
npm i -G @mediamonks/henk
```

## Lets start
```sh
henk
```
Now that the CLI guides you through uploads


## LICENSE

[MIT](./LICENSE) © MediaMonks
npm package: @mediamonks/muban-storybook-addon-transition
Description: Control your timelines from Storybook.
Author: Lars van Braam
Latest version: 1.1.1

# @mediamonks/muban-storybook-addon-transition

This addon allows you to control the transitions from within Storybook.

> For use with `@muban/muban` and `@muban/storybook`.

### 🚀 Getting started

Install this package in your project:

```sh
yarn add @mediamonks/muban-storybook-addon-transition
# or
npm i -S @mediamonks/muban-storybook-addon-transition
```

Add it to the addons section in your `.storybook/main.ts` file.

```ts
module.exports = {
  stories: [],
  addons: ['@mediamonks/muban-storybook-addon-transition'],
};
```

## 📝 License

[MIT](../LICENSE)
npm package: @mediamonks/muban-transition-component
Description: GreenSock animations for your Muban components.
Author: Lars van Braam
Latest version: 1.1.2-rc.2

# @mediamonks/muban-transition-component

Provides GreenSock transition functionality to [Muban](https://github.com/mubanjs/muban) components.

> ⚠️ This package is compatible with the latest version of
> [Muban](https://github.com/mubanjs/muban), please use the original
> [muban-transition-component](https://github.com/riccoarntz/muban-transition-component) for
> [older versions of Muban](https://github.com/mediamonks/muban)

### 🚀 Getting started

Have a look at the [docs](https://mediamonks.github.io/transition-component/) for getting started!

## 📝 License

[MIT](../LICENSE)
npm package: @mediamonks/muban-transition-component-legacy
Description: Provides GreenSock transition functionality to Muban components.
Author: frontend.monks
Latest version: 5.0.0

# @mediamonks/muban-transition-component-legacy

> ⚠️ This package is compatible with the legacy version of
> [Muban](https://mediamonks.github.io/muban/), please use
> [@mediamonks/muban-transition-component](https://www.npmjs.com/package/@mediamonks/muban-transition-component) for
> [newer versions of Muban](https://mubanjs.github.io/muban/)

Provides GreenSock transition functionality to [muban](https://mediamonks.github.io/muban/) components.

## Table of contents

1. [Installation](#installation)
2. [Demo](#demo)
3. [Usage](#usage)
4. [Building](#building)
5. [Authors](#authors)
6. [Contribute](#contribute)
7. [License](#license)

## Installation
### yarn / npm

```sh
yarn add @mediamonks/muban-transition-component-legacy
```

```sh
npm i -S @mediamonks/muban-transition-component-legacy
```

## Online Demo
Checkout the online [demo](https://riccoarntz.github.io/muban-transition-component/example/).


## Demo
Demo can be found in /example.
Install dev dependencies:
```sh
  yarn
```
Run the example:
```sh
  yarn dev
```

## Usage
Detailed documentation and examples are located in the wiki!

### [Check the wiki!](https://github.com/riccoarntz/muban-transition-component/wiki)


## Building

In order to build muban-transition-component, ensure that you have [Git](http://git-scm.com/downloads) and [Node.js]
(http://nodejs.org/) installed.

Clone a copy of the repo:
```sh
git clone https://github.com/riccoarntz/muban-transition-component.git
```

Change to the vue-transition directory:
```sh
cd muban-transition-component
```

Install dev dependencies:
```sh
yarn
```

Use one of the following main scripts:
```sh
yarn build           # build this project
yarn dev             # run dev-watch mode, serving example/index.html in the browser
yarn generate        # generate all artifacts (compiles ts, webpack, docs and coverage)
yarn test:unit       # run the unit tests
yarn validate        # runs validation scripts, including test, lint and coverage check
yarn lint            # run tslint on this project
yarn doc             # generate typedoc documentation
```

When installing this module, it adds a pre-push hook, that runs the `validate`
script before committing, so you can be sure that everything checks out.


## Authors
View [AUTHORS.md](./AUTHORS.md)

## Contribute
View [CONTRIBUTING.md](./CONTRIBUTING.md)

## License
[MIT](./LICENSE) © Ricco Arntz
npm package: @mediamonks/polyglot
Description: Download translations from polyglot
Author: Edwin Luijten
Latest version: 1.0.8

# Polyglot
A CLI to help with your translations managed in Polyglot.

## Installation
#### npm
```sh
npm install -g @mediamonks/polyglot
```

#### yarn
```sh
yarn global add @mediamonks/polyglot
```

## Usage
```shell
Usage: polyglot [options]

Commands:
  polyglot configure  Configure the cli.
  polyglot download   Download translations.

Options:
      --help      Show help                                                                                    [boolean]
  -t, --token     Project token                                                                                 [string]
  -s, --split     Split each language to its own file                                          [boolean] [default: true]
  -d, --dest      Location where the translations should be stored                                              [string]
  -e, --env       The environment from which to download the translations                      [string] [default: "dev"]
  -b, --base-url  The base url from which to download the translations                          [string] [default: null]

Examples:
  polyglot configure -b polyglot.domain             The base url of polyglot
  polyglot download -t={token} -d=src/data/lang -s  Download translations

For more information about the parameters, please visit https://github.com/mediamonks/polyglot
```

### First time usage
For first time usage it's advised to set the base url of polyglot:
```shell
polyglot configure -b={url}
```

### Downloading translations
```shell
polyglot download -t {your token} -d src/data/locale -s -e dev
```

## Automatically download when building
Inside your `package.json` add below line to `scripts`.  
```json
...
"prebuild": "polyglot download --token={your token} --dest=src/data/locale --split"
```

## Debugging
```shell 
DEBUG=1 polyglot download -t {your token} -d src/data/locale -s -e dev
```
This will print the following information when an error occurs:
```shell
CWD: {{ current working directoy }}
USER HOME: {{ user home }}
CLI HOME: {{ cli home }}
DOWNLOAD URL: {{ the full download url }}
CONFIG: {
    "url": "{{ url }}"
}
```

## To-Do
- Managing a project from the CLI.
  - Create
  - Delete
npm package: @mediamonks/prettier-config
Description: Default Media.Monks Prettier Configuration
Author: Media.Monks
Latest version: 1.0.1

# MediaMonks - Prettier Configuration

The official Media.Monks prettier configuration, based on the [Frontend Coding Standards](https://github.com/mediamonks/frontend-coding-standards).

## Installation

The configuration can be installed via `npm`.

```bash
npm install --dev @mediamonks/prettier-config
```

To inform prettier of this configuration, you have to add the `prettier` property to your `package.json` file:

```json
"prettier": "@mediamonks/prettier-config"
```

Instead of manually editing your `package.json`, you can also utilize the `npm pkg` subcommand:

```bash
npm pkg set prettier=@mediamonks/prettier-config
```

## Extending

[Prettier does not ship with a built-in way of extending configurations](https://prettier.io/docs/en/configuration.html#sharing-configurations).

To extend the configuration, you will have to create a `.prettierrc.js` file (or `.prettierrc.cjs` if your package is a `"type": "module"`) and import the Media.Monks configuration using `require`:

```js
module.exports = {
  ...require("@mediamonks/prettier-config"),
  semi: false,
};
```

If you have previously added the configuration to your `package.json`, via the `prettier` property, you can now remove it.
You can also utilize the `npm pkg`:

```bash
npm pkg delete prettier
```
npm package: @mediamonks/react-animation
Description: Animation components, hooks, utilities for React + GSAP.
Author: frontend.monks
Latest version: 1.4.1

[![npm version](https://img.shields.io/npm/v/@mediamonks/react-animation)](https://www.npmjs.com/package/@mediamonks/react-animation)
[![npm downloads](https://img.shields.io/npm/dm/@mediamonks/react-animation)](https://www.npmjs.com/package/@mediamonks/react-animation)

# @mediamonks/react-animation

Animation components, hooks, utilities for React + GSAP.

You can find this package's documentation
[here](https://mediamonks.github.io/transition-component/react-animation/index.html).
npm package: @mediamonks/react-redux-component-init
Description: A library to manage async component initialization in isomorphic React/Redux applications with server-side rendering
Author: Floris Bernard
Latest version: 2.0.6

# react-redux-component-init
A library to manage react component initialization in isomorphic applications using [Redux.js](http://redux.js.org).

# When to use
This library is designed for usage in large-scale react applications with server-side rendering. It
can also be used in smaller applications or application without server-side rendering. However, in
these use cases a less complex solution might be more appropriate.

## prerequisites
This library will only work for applications that have the following setup:
 - A react+redux setup with server-side rendering. Redux state on the server should be injected
 into the client as initial state
 (as described in [the Redux documentation](http://redux.js.org/docs/recipes/ServerRendering.html))
 - A Redux store configured with the [redux-thunk](https://github.com/gaearon/redux-thunk) middleware
 - Support for Promises on both the server and client side

# Motivation
In a react application, we often want to perform a certain action when a component mounts. These
actions are often asynchonous (like loading some data from an api). More specifically, in
isomorphic applications (with server side rendering) we often want these actions to be completed
before we start rendering the page. In order to achieve this, we have two alternatives:
 - **Component-based approach:** We define the initialization actions on each component. This comes
 with a problem: the server does not know which components are mounted before a react render has
 completed. This would mean we have to do at least 2 render calls: one to figure out which
 components need to be initialized, and another after initialization actions have completed.
 - **Top-down approach:** We define all initialization on the page level. This can get messy very
 quickly, because a page has to have knowledge about the data needs of all descendant components.
 It is easy to make a mistake and do too little or too much initialization. Moreover, it can lead
 to code duplication between pages.

This library aims to provide utilities to make the *component based approach* a feasible solution.
It allows us to define initialization on each component without having to do more than one render.

# Full documentation
Please see the full documentation at https://mediamonks.github.io/react-redux-component-init
npm package: @mediamonks/react-scripts
Description: MM version of react-scripts
Latest version: 4.0.2

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
npm package: @mediamonks/react-transition-component
Description: GreenSock animations for your React components.
Author: Leroy Korterink
Latest version: 1.0.0-alpha.6
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @mediamonks/react-transition-component
Provides GreenSock transition functionality to [React](https://github.com/facebook/react) components.

> ⚠️ This package is compatible with the version (^17.0.2) of [React](https://github.com/facebook/react)

### 🚀 Getting started
Have a look at the [docs](https://mediamonks.github.io/transition-component/) for getting started!

## 📝 License
[MIT](../LICENSE)
npm package: @mediamonks/richmedia-temple-screenshot
Description: create screenshots
Latest version: 1.2.2

# Richmedia Temple Screenshot [![Travis](https://img.shields.io/travis/mediamonks/richmedia-temple-screenshot.svg)](https://travis-ci.org/mediamonks/richmedia-temple-screenshot) [![npm](https://img.shields.io/npm/v/@mediamonks/richmedia-temple-screenshot.svg?maxAge=2592000)](https://www.npmjs.com/package/@mediamonks/richmedia-temple-screenshot) [![npm](https://img.shields.io/npm/dm/@mediamonks/richmedia-temple-screenshot.svg?maxAge=2592000)](https://www.npmjs.com/package/@mediamonks/richmedia-temple-screenshot)
Creates screenshots
npm package: @mediamonks/richmedia-temple-server
Description: This is the Richmedia Temple, used for creating richmedia units for various vendors.
Author: Mient-jan Stelling
Latest version: 9.1.1

# Richmedia Temple Server [![Travis](https://img.shields.io/travis/mediamonks/richmedia-temple-server.svg)](https://travis-ci.org/mediamonks/richmedia-temple-server) [![npm](https://img.shields.io/npm/v/@mediamonks/richmedia-temple-server.svg?maxAge=2592000)](https://www.npmjs.com/package/@mediamonks/richmedia-temple-server) [![npm](https://img.shields.io/npm/dm/@mediamonks/richmedia-temple-server.svg?maxAge=2592000)](https://www.npmjs.com/package/@mediamonks/richmedia-temple-server)

Richmedia Temple Server is used as a tool to build and develop richmedia units.

See documentation https://mediamonks.github.io/display-advertising-docs/devserver

## Installation

```sh
yarn add @mediamonks/richmedia-temple-server
```

```sh
npm i -S @mediamonks/richmedia-temple-server
```

## Basic Usasage

```js
// for building
rds-build

// for developing
rds-dev
```


maybe use [@mediamonks/generator-richmedia-temple](https://github.com/mediamonks/generator-richmedia-temple) for creating your setup automatically.

## Documentation

View the [documentation](http://mediamonks.github.io/richmedia-temple-server/).

## Contribute

View [CONTRIBUTING.md](./CONTRIBUTING.md)


## Changelog

View [CHANGELOG.md](./CHANGELOG.md)


## Authors

View [AUTHORS.md](./AUTHORS.md)


## LICENSE

[MIT](./LICENSE) © MediaMonks
npm package: @mediamonks/self-xss-console-banner
Description: Self XSS warning module
Author: frontend.monks
Latest version: 0.0.5

# self-xss console banner

This module will log a self-xss banner to warn users about the [self-xss security risk](https://en.wikipedia.org/wiki/Self-XSS).
This banner should be used for projects that have data behind a login.

## Installation
```
npm i @mediamonks/self-xss-console-banner
```

## Implementation
Displaying the default warning:

```
import xssBanner from '@mediamonks/self-xss-console-banner';

xssBanner();
```

Displaying a custom warning:
```
import xssBanner from '@mediamonks/self-xss-console-banner';

xssBanner(false, 'Stop!', 'Do not paste anything here, close this window!', 'Please contact us via security@example.com');
```

## SSR (Server Side Rendering)
When using SSR make sure that this module is not included. It's possible to use a dynamic import to execute it only
on client side.

```
const selfXssBanner = (await import('@mediamonks/self-xss-console-banner')).default;

selfXssBanner();
```

## Default warning
![default warning](./self-xss-console-banner.webp?raw=true "Self-xss warning example")

## Contributing

```
git clone git@github.com:mediamonks/self-xss-console-banner.git
```

After cloning run `npm i; npm run postinstall`
npm package: @mediamonks/stylelint-config-css
Description: Sharable stylelint config based on Media.Monks Frontend Coding Standards
Author: frontend.monks
Latest version: 1.8.1

# Media.Monks - @mediamonks/stylelint-config-css

The official Media.Monks stylelint configuration, based on the
[Frontend Coding Standards](https://github.com/mediamonks/frontend-coding-standards).

## Installation

The package can be installed via `npm`.

```bash
npm install --save-dev @mediamonks/stylelint-config-css
```

To inform stylelint of this configuration, you have to add the `stylelint` property to your
`package.json` file:

```json
"stylelint": {
   "extends": "@mediamonks/stylelint-config-css"
}
```
npm package: @mediamonks/stylelint-config-css-in-js
Description: Sharable stylelint config based on Media.Monks Frontend Coding Standards
Author: frontend.monks
Latest version: 1.8.1

# Media.Monks - @mediamonks/stylelint-config-css-in-js

The official Media.Monks stylelint configuration, based on the
[Frontend Coding Standards](https://github.com/mediamonks/frontend-coding-standards).

## Installation

The package can be installed via `npm`.

```bash
npm install --save-dev @mediamonks/stylelint-config-css-in-js
```

To inform stylelint of this configuration, you have to add the `stylelint` property to your
`package.json` file:

```json
"stylelint": {
   "extends": "@mediamonks/stylelint-config-css-in-js"
}
```
npm package: @mediamonks/stylelint-config-scss
Description: Sharable stylelint config based on Media.Monks Frontend Coding Standards
Author: frontend.monks
Latest version: 1.8.1

# Media.Monks - @mediamonks/stylelint-config-scss

The official Media.Monks stylelint configuration, based on the
[Frontend Coding Standards](https://github.com/mediamonks/frontend-coding-standards).

## Installation

The package can be installed via `npm`.

```bash
npm install --save-dev @mediamonks/stylelint-config-scss
```

To inform stylelint of this configuration, you have to add the `stylelint` property to your
`package.json` file:

```json
"stylelint": {
   "extends": "@mediamonks/stylelint-config-scss"
}
```
npm package: @mediamonks/stylelint-config-scss-muban
Description: Sharable stylelint config based on Media.Monks Frontend Coding Standards
Author: frontend.monks
Latest version: 1.8.1

# Media.Monks - @mediamonks/stylelint-config-scss-muban

The official Media.Monks stylelint configuration, based on the
[Frontend Coding Standards](https://github.com/mediamonks/frontend-coding-standards).

## Installation

The package can be installed via `npm`.

```bash
npm install --save-dev @mediamonks/stylelint-config-scss-muban
```

To inform stylelint of this configuration, you have to add the `stylelint` property to your
`package.json` file:

```json
"stylelint": {
   "extends": "@mediamonks/stylelint-config-scss-muban"
}
```
npm package: @mediamonks/transition-controller
Description: An abstract transition controller that can be used for transitioning elements
Author: frontend.monks
Latest version: 3.0.0

[![Travis](https://img.shields.io/travis/larsvanbraam/transition-controller.svg?maxAge=2592000)](https://travis-ci.org/larsvanbraam/transition-controller)
[![npm](https://img.shields.io/npm/dm/transition-controller.svg?maxAge=2592000)](https://www.npmjs.com/package/transition-controller)
[![GitHub issues](https://img.shields.io/github/issues/larsvanbraam/transition-controller.svg?style=flat-square)](https://github.com/larsvanbraam/transition-controller/issues)

# @mediamonks/transition-controller
An abstract transition controller that can be used for transitioning elements

## Installation

```sh
yarn add transition-controller
```

```sh
npm i -S transition-controller
```

## Documentation

- [📗 General documentation](https://transition-controller.larsvanbraam.nl/mkdocs/)
- [📘 TypeDoc documentation](https://transition-controller.larsvanbraam.nl/typedoc/)
- [📚 All documentation](https://transition-controller.larsvanbraam.nl)

## Example
I've included an example setup where you can see the transition controller in action, to run the project follow these steps:

- `git clone https://github.com/larsvanbraam/transition-controller.git`
- `cd transition-controller/example`
- `yarn`
- `yarn dev`
- Open your browser `localhost:8080`

or click [this link](https://larsvanbraam.github.io/transition-controller/example/) to preview online

## Building

In order to build transition-controller, ensure that you have [Git](http://git-scm.com/downloads) and [Node.js](http://nodejs.org/) installed.

Clone a copy of the repo:
```sh
git clone https://github.com/larsvanbraam/transition-controller.git
```

Change to the transition-controller directory:
```sh
cd transition-controller
```

Install dev dependencies:
```sh
yarn
```

Use one of the following main scripts:
```sh
yarn build            # build this project
yarn dev              # run compilers in watch mode, both for babel and typescript
yarn test             # run the unit tests incl coverage
yarn test:dev         # run the unit tests in watch mode
yarn lint             # run eslint and tslint on this project
yarn doc              # generate typedoc documentation
```

When installing this module, it adds a pre-commit hook, that runs lint and prettier commands
before committing, so you can be sure that everything checks out.

## Authors
View [AUTHORS.md](./AUTHORS.md)

## Contribute
View [CONTRIBUTING.md](./CONTRIBUTING.md)

## License
[MIT](./LICENSE) © Lars van Braam
npm package: @mediamonks/use-popper
Description: ![npm](https://img.shields.io/npm/dt/@mediamonks/use-popper) ![npm](https://img.shields.io/npm/v/@mediamonks/use-popper) ![npm](https://img.shields.io/npm/l/@mediamonks/use-popper)
Latest version: 1.1.11

# Use Popper

![npm](https://img.shields.io/npm/dt/@mediamonks/use-popper)
![npm](https://img.shields.io/npm/v/@mediamonks/use-popper)
![npm](https://img.shields.io/npm/l/@mediamonks/use-popper)

## Installation

> Note: React 16.8+ is required for Hooks.

### With npm

```sh
npm i use-popper
```

### Or with yarn

```sh
yarn add use-popper
```

[![Edit usePopper](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ww293zr265?fontsize=14)

```js
import React from 'react';
import usePopper from 'use-popper';
import { useHover } from 'use-events';

function Tooltip(props) {
  const { reference, popper, arrow } = usePopper({ placement: 'bottom' });
  const [active, bind] = useHover();

  return (
    <div>
      <button ref={reference.ref} {...bind}>
        hover me
      </button>
      {active && (
        <div
          ref={popper.ref}
          style={popper.styles}
          data-placement={popper.placement}
        >
          <div>Hello!</div>
          <div ref={arrow.ref} style={arrow.styles} />
        </div>
      )}
    </div>
  );
}

export default Tooltip;
```
npm package: @medianaura/di-manager
Description: Create .concatenate files to run multiple command line in series or parallel.
Author: MedianAura
Latest version: 1.0.4

# Concatenate

Create .concatenate files to run multiple command line in series or parallel.

[![Version](https://img.shields.io/npm/v/@medianaura/concatenate.svg)](https://npmjs.org/package/@medianaura/concatenate)
[![Downloads/week](https://img.shields.io/npm/dw/@medianaura/concatenate.svg)](https://npmjs.org/package/@medianaura/concatenate)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

- [Usage](#usage)

# Usage

```bash
npm i -D @medianaura/concatenate
```

### Create Configuration File

Create JSON or Yaml Files in .concatenate Folder
See the Setup command Example.

# Commands

### Setup

```bash
concatenate setup [json|yaml]
```

### Run

```bash
concatenate [fix|check]
```

### Branch

```bash
concatenate branch [branch name]
```
npm package: @medianaura/eslint-config
Description: Shareable ESLint configuration for TypeScript projects
Author: MedianAura
Latest version: 0.1.1

# ESLint Config

Shareable ESLint configuration for TypeScript projects.

## Installation

```bash
npm install -D @medianaura/eslint-config
```

You'll also need to install the peer dependencies:

```bash
npm install -D typescript
```

## Usage

Create an `eslint.config.mjs` file in your project root:

```javascript
import config from '@medianaura/eslint-config';

export default config;
```

### Custom Configuration

You can customize the configuration by using the `createConfig` function:

```javascript
import { createConfig } from '@medianaura/eslint-config';

export default createConfig({
  ignores: ['build/**/*', 'temp/**/*'],
  testFilePatterns: ['tests/**/*', '**/*.test.ts', '**/*.spec.ts'],
});
```

### Using with Pretty Formatter

The package includes `eslint-formatter-pretty` as a dependency for enhanced error output. To use it:

```bash
npx eslint . --format=node_modules/eslint-formatter-pretty
```

Or add to your package.json scripts:

```json
{
  "scripts": {
    "lint": "eslint . --format pretty",
    "lint:fix": "eslint . --fix --format pretty"
  }
}
```

## Features

- TypeScript support with strict type checking
- Import sorting and organization
- Code quality rules via ESLint, Unicorn, and other plugins
- Prettier integration (uses local .prettierrc.yaml if available)
- Test file special handling
- Zod schema validation rules
- Node.js best practices
- RegExp best practices
- Promise best practices

## Included Plugins

- `@eslint/js` - Base ESLint rules
- `typescript-eslint` - TypeScript specific rules
- `eslint-plugin-import-x` - Import/export rules
- `eslint-plugin-unicorn` - Modern JavaScript rules
- `eslint-plugin-prettier` - Prettier integration
- `eslint-plugin-simple-import-sort` - Import sorting
- `eslint-plugin-unused-imports` - Remove unused imports
- `eslint-plugin-eslint-comments` - ESLint comment rules
- `eslint-plugin-promise` - Promise best practices
- `eslint-plugin-regexp` - RegExp best practices
- `eslint-plugin-zod` - Zod schema validation rules
- `eslint-plugin-n` - Node.js specific rules

## Requirements

- Node.js >= 22.0.0
- TypeScript >= 5.9.3
- ESLint >= 9.39.2
npm package: @medianaura/komity
Description: Create an automaton.config at the root of your project and add jobs and actions and then use automaton to run those action automatically.
Author: MedianAura
Latest version: 0.2.0

# Komity

Create an automaton.config at the root of your project and add jobs and actions and then use automaton to run those action automatically.

[![Version](https://img.shields.io/npm/v/@medianaura/yalkem.svg)](https://npmjs.org/package/@medianaura/automaton)
[![Downloads/week](https://img.shields.io/npm/dw/@medianaura/yalkem.svg)](https://npmjs.org/package/@medianaura/automaton)

- [Usage](#usage)

# Usage

```bash
komity version
```

## Example

```ts

```