open-index/open-npm huggingface dataset:
npm package: @mattisg/object.map
Description: Array.map for Object. Map both an object’s keys and values. Defaults to cleanly augment prototype.
Author: Matti Schneider
Latest version: 1.0.0

Object.map.js
=============

`Array.map` for `Object` in JavaScript. Map both an object’s keys and values.

Usage
-----

By default, will allow calling `Object.map` (obviously, as a non-enumerable property).

If you're terrified about augmenting prototypes of natives zomg ruin on us all, just set the `shouldAugmentObjectPrototype` param to `false` on the last line. The enclosing IEFE will then return the `mapObject` function with the source object as its first parameter, so you can call it however you want.


```JavaScript
/**
*@param	{Function|String}	[valueMapper = pass-through]	The function to map the value from the source's value. Will be passed the current value, the original key, and the mapped key. If a string, will be set to an accessor for that attribute.
*@param	{Function|String}	[keyMapper = pass-through]	The function to map the key from the source's key. Will be passed the original key and the original value. If a string, will be set to an accessor for that attribute.
*@throws	TypeError	If one of the mapper is an illegal type.
*@returns	{Object<String,String>}
*/
Object.map(valueMapper, keyMapper);
```

### Example

```JavaScript
var source = { a: 1, b: 2 };
function sum(x) { return x + x }

source.map(sum);            // returns { a: 2, b: 4 }
source.map(undefined, sum); // returns { aa: 1, bb: 2 }
source.map(sum, sum);       // returns { aa: 2, bb: 4 }
```


License
-------

**MIT**: Do whatever you want as long as you don't sue me nor prevent others to reuse this piece of software.
Also, credit is always appreciated  ;)
npm package: @mattismeyer/workshop-styles
Description: Some common styles for our workshop projects
Author: Mattis Meyer
Latest version: 1.0.7

# workshop-styles

Some common styles for our workshop projects

Includes

- Bootstrap CSS
- Common form styles
    - feedback classes `.feedback-error` and `.feedback-success` (and their aliases `.feedback-red` and `.feedback-green`)
    - Angular form styles for `.ng-valid` et al
- Button styles
    - shortcut aliases for bootstrap buttons with right margin: `.btn-red`, `.btn-green`, `.btn-yellow`, `.btn-blue`, `.btn-grey`,
    - disabled button style with cursor
npm package: @mattjennings/react-modal
Description: React modal components built for [theme-ui](https://github.com/system-ui/theme-ui) with [framer-motion](https://github.com/framer/motion) for animations.
Author: Matt Jennings
Latest version: 1.0.5

# react-modal

React modal components built for [theme-ui](https://github.com/system-ui/theme-ui) with [framer-motion](https://github.com/framer/motion) for animations.

[Live Demo](https://mattjennings.github.io/react-modal/)

## Install

```
npm install @mattjennings/react-modal
```

## Usage

Update your theme-ui theme to include the modal theme

```jsx
import { tailwind } from '@theme-ui/presets'
import { withModalTheme } from '@mattjennings/react-modal'

export const theme = withModalTheme(tailwind)
```

Create a modal

```jsx
import React from 'react'
import {
  Modal,
  ModalTitle,
  ModalContent,
  ModalFooter,
} from '@mattjennings/react-modal'
import { Text, Button } from 'theme-ui'

function MyModal(props) {
  return (
    <Modal {...props}>
      {({ onClose }) => (
        <>
          <ModalTitle>
            <Text
              sx={{
                fontSize: 2,
                fontWeight: 'medium',
              }}
            >
              Hello!
            </Text>
          </ModalTitle>
          <ModalContent>
            <Text>This is a modal example</Text>
          </ModalContent>
          <ModalFooter>
            <Button onClick={onClose}>OK</Button>
          </ModalFooter>
        </>
      )}
    </Modal>
  )
}

function MyApp() {
  return (
    <div>
      <Modal open={true} />
    </div>
  )
}
```

## AnimatedModalStack

`AnimatedModalStack` built on top of [@mattjennings/react-modal-stack](https://github.com/mattjennings/react-modal-stack). As long as the Modal is a motion component at the root, it will animate them in/out appropriately.

```jsx
import React from 'react'
import { AnimatedModalStack } from '@mattjennings/react-modal'
import App from './App'

React.render(
  <AnimatedModalStack>
    <App />
  </AnimatedModalStack>,
  document.querySelector('#root')
)
```

## Theming

View the [theme file](./src/theme.ts) to see which properties are customizable.

```jsx
import { tailwind } from '@theme-ui/presets'
import { withModalTheme } from '@mattjennings/react-modal'

export const theme = withModalTheme({
  ...tailwind,
  modals: {
    // add a new `outlined` variant that can be used on <Modal />
    outlined: {
      backgroundColor: 'background',
      border: '1px solid',
      borderRadius: '5px',
      borderColor: 'gray',
      display: 'flex',
      flexDirection: 'column',
      maxHeight: '100vh',
      minHeight: '16rem',
      minWidth: '16rem',
      maxWidth: '64rem',
      position: 'absolute',
      top: ['25%', '25%', '10%'],
      zIndex: 'modal',
    },

    // will be used for the `outlined` variant when the modal is in full screen
    outlinedFullScreen: {
      backgroundColor: 'background',
      display: 'flex',
      flexDirection: 'column',
      minHeight: '100vh',
      maxHeight: '100vh',
      height: `fill-available`,
      position: 'absolute',
      top: 0,
      width: '100vw',
      zIndex: 'modal',
    },
  },
})
```
npm package: @mattkrick/dnd-core
Description: Drag and drop sans the GUI
Latest version: 7.0.4

[![npm package](https://img.shields.io/npm/v/dnd-core.svg?style=flat-square)](https://www.npmjs.org/package/dnd-core)
[![Build Status](https://travis-ci.org/react-dnd/dnd-core.svg?branch=master)](https://travis-ci.org/react-dnd/dnd-core)
[![Test Coverage](https://codeclimate.com/github/react-dnd/dnd-core/badges/coverage.svg)](https://codeclimate.com/github/react-dnd/dnd-core)

# dnd-core

Drag and drop sans the GUI.

This is a clean implementation of drag and drop primitives that does not depend on the browser.
It powers [React DnD](https://github.com/react-dnd/react-dnd) internally.

## Wat?

To give you a better idea:

* There is no DOM here
* We let you define drop target and drag source logic
* We let you supply custom underlying implementations (console, DOM via jQuery, React, React Native, _whatever_)
* We manage drag source and drop target interaction

This was written to support some rather complicated scenarios that were too hard to implement in [React DnD](https://github.com/react-dnd/react-dnd) due to its current architecture:

* [Mocking drag and drop interaction in tests](https://github.com/react-dnd/react-dnd/issues/55)
* [Full support for arbitrary nesting and handling drag sources and drop targets](https://github.com/react-dnd/react-dnd/issues/87)
* [Dragging multiple items at once](https://github.com/react-dnd/react-dnd/issues/14)
* [Even when source is removed, letting another drag source “represent it” (e.g. card disappeared from one Kanban list, reappeared in another one)](https://github.com/react-dnd/react-dnd/pull/64#issuecomment-76118757)

As it turns out, these problems are much easier to solve when DOM is thrown out of the window.

## What's the API like?

[Tests](https://github.com/react-dnd/dnd-core/tree/master/test) should give you some idea. You register drag sources and drop targets, hook up a backend (you can use barebones `TestBackend` or implement a fancy real one yourself), and your drag sources and drop targets magically begin to interact.

![](http://i.imgur.com/6l8CpxZ.png)
npm package: @mattkrick/event-source-polyfill
Description: A minimum immplementation of EventSource for IE11 and Edge
Author: Matt Krick
Latest version: 0.1.0

# event-source-polyfill

EventSource polyfill for IE11 and Edge. Fully spec compliant: https://html.spec.whatwg.org/multipage/server-sent-events.html

## Why?

Because no other polyfill follows the spec.

## What's it do?

The __exact__ same thing that a minimum implementation of EventSource does. __No more, no less.__
For SSE that implements a heartbeat, see
https://github.com/mattkrick/trebuchet-client/

## Installation

`yarn add @mattkrick/event-source-polyfill @mattkrick/event-target-polyfill`

```js
import EventTargetPolyfill from '@mattkrick/event-target-polyfill'
import EventSourcePolyfill from '@mattkrick/event-source-polyfill'

window.EventTarget = EventTargetPolyfill
window.EventSource = EventSourcePolyfill
```

NOTE: Make sure your browser supports `EventTarget`! If it doesn't use that polyfill, too.
npm package: @mattkrick/event-target-polyfill
Description: EventTarget for IE11 and Edge
Author: Matt Krick
Latest version: 0.1.0

# event-target-polyfill

EventTarget polyfill for IE11 and Edge from https://developer.mozilla.org/en-US/docs/Web/API/EventTarget#Example

## Why?

Because Microsoft has been shitting the bed since forever.

## What's it do?

The __exact__ same thing that as `window.EventTarget`

## Installation

`@mattkrick/event-target-polyfill`

```js
import EventTargetPolyfill from '@mattkrick/event-target-polyfill'

window.EventTarget = EventTargetPolyfill
const foo = new EventTarget('open')
```
npm package: @mattkrick/react-dnd
Description: Drag and Drop for React
Latest version: 7.0.4

[![npm version](https://img.shields.io/npm/v/react-dnd.svg?style=flat-square)](https://www.npmjs.com/package/react-dnd)
[![npm downloads](https://img.shields.io/npm/dm/react-dnd.svg?style=flat-square)](https://www.npmjs.com/package/react-dnd)
[![Build Status](https://travis-ci.org/react-dnd/react-dnd.svg?branch=master)](https://travis-ci.org/react-dnd/react-dnd)

# React _DnD_

Drag and Drop for React.

See the docs, tutorials and examples on the website:

http://react-dnd.github.io/react-dnd/

See the changelog on the Releases page:

https://github.com/react-dnd/react-dnd/releases

Big thanks to [BrowserStack](https://www.browserstack.com) for letting the maintainers use their service to debug browser issues.
npm package: @mattkrick/react-dnd-html5-backend
Description: HTML5 backend for React DnD
Latest version: 7.0.4

[![npm package](https://img.shields.io/npm/v/react-dnd-html5-backend.svg?style=flat-square)](https://www.npmjs.org/package/react-dnd-html5-backend)
[![Build Status](https://travis-ci.org/react-dnd/react-dnd-html5-backend.svg?branch=master)](https://travis-ci.org/react-dnd/react-dnd-html5-backend)
[![dependencies Status](https://david-dm.org/react-dnd/react-dnd-html5-backend/status.svg)](https://david-dm.org/react-dnd/react-dnd-html5-backend)
[![devDependencies Status](https://david-dm.org/react-dnd/react-dnd-html5-backend/dev-status.svg)](https://david-dm.org/react-dnd/react-dnd-html5-backend?type=dev)
[![peerDependencies Status](https://david-dm.org/react-dnd/react-dnd-html5-backend/peer-status.svg)](https://david-dm.org/react-dnd/react-dnd-html5-backend?type=peer)

# React DnD HTML5 Backend

The officially supported HTML5 backend for [React DnD](http://react-dnd.github.io/react-dnd/).
See [the docs](http://react-dnd.github.io/react-dnd/docs/backends/html5) for usage information.

## Installation

If you use [npm](http://npmjs.com):

```
npm install --save react-dnd-html5-backend
```

The npm package defaults to the CommonJS build.

However it also includes a pre-minified UMD build in the `dist` folder.
The UMD build exports a global `window.ReactDnDHTML5Backend` when imported as a `<script>` tag.

If you’d rather not use npm, you can use [unpkg](http://unpkg.com/) to access the UMD build directly: [ReactDnDHTML5Backend.min.js](https://unpkg.com/react-dnd-html5-backend@latest/dist/ReactDnDHTML5Backend.min.js).
You may point your Bower config to it.

## Browser Support

We strive to support the evergreen browsers, Safari 7+, as well as IE11+. IE10 should also work, but `DragLayer` is fairly useless because IE10 doesn’t support `pointer-events: none`. We don’t officially support IE9 and less.

Unfortunately the browser bugs, inconsistencies, and regressions come up from time to time, so please make sure you test your app on the browsers you’re interested in, and report any bugs to us.

## License

MIT
npm package: @mattkrick/sanitize-svg
Description: a small script to remove script tags from SVGs
Author: Matt Krick
Latest version: 0.4.1

# sanitize-svg

a small SVG sanitizer to prevent XSS attacks

## Installation

`yarn add @mattkrick/sanitize-svg`

## Why

Bad actors can put script tags in SVG files.
These script tags are not run when the svg is inside an `<img>`,
but if the SVG file is opened directly ("Open image in...") they will run under the image's domain,
which means that bad actor could steal domain-specific context (cookies, local storage, etc.)

## FAQ

### When should I use this?

Anytime someone tries to upload a svg. 
Optionally on the client, but definitely on the server.

### How do I detect if the SVG is malicious?

The output file will be null

### Why does your package start with @mattkrick? Ego much?

NPM's security model is broken by design & this is marginally safer because it prevents namespace & typo attacks.

## Usage on Client

```js
import sanitizeSVG from '@mattkrick/sanitize-svg'

// file input onSubmit handler
const onSubmit = async (e) => {
  const attachedImage = e.currentTarget.files[0]
  const cleanImage = await sanitizeSVG(attachedImage)
  if (!cleanImage) {
    alert('Howdy, hacker')
  }
}
```

```html
// in JSX
<input type='file' onSubmit={onSubmit}/>
```

## Usage on Server
```js
import JSDOM from 'jsdom'
import sanitizeSVG from '@mattkrick/sanitize-svg'

const {window} = new JSDOM()
const imageName = 'foo.svg'
const imageBuffer = await fetch(imageName).then(r => r.buffer())
// Buffers don't contain type info, so you should check that on your own
if (imageName.endsWith('.svg')) {
  const cleanImage = await sanitizeSVG(imageBuffer, window)  
}

```

## License

MIT
npm package: @mattkrick/slate-react
Description: A set of React components for building completely customizable rich-text editors.
Latest version: 0.13.6

This package contains the React-specific logic for Slate. It's separated further into a series of directories:

* [**Components**](./src/components) — containing the React components for rendering Slate editors.
* [**Constants**](./src/constants) — containing a few private constants modules.
* [**Plugins**](./src/plugins) — containing the React-specific plugins for Slate editors.
* [**Utils**](./src/utils) — containing a few private convenience modules.

Feel free to poke around in each of them to learn more!