open-index/open-npm huggingface dataset:
npm package: @react-pdf-jepek/stylesheet
Description: A styles engine for Node and the browser
Author: Diego Muracciole
Latest version: 4.0.1

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-pdf/stylesheet

> React-pdf styles engine

## How to install

```sh
yarn add @react-pdf/stylesheet
```

## How it works

```js
const stylesheet = require('@react-pdf/stylesheet');

const container = {
  width: 400,
  height: 600,
  orientation: 'portrait',
};

const style = {
  margin: 20,
  width: '50vw',
  height: '20vh',
  borderRadius: 5,
  fontWeight: 'semibold',
  borderBottom: '2 solid yellow',
  '@media max-width: 500': {
    backgroundColor: 'rgb(255, 0, 0)',
  },
};

const computed = stylesheet(container, style);

// Computed
// {
//   width: 200,
//   height: 120,
//   marginTop: 20,
//   marginLeft: 20,
//   marginRight: 20,
//   marginBottom: 20,
//   marginBottom: 20,
//   borderTopLeftRadius: 5,
//   borderTopRightRadius: 5,
//   borderBottomLeftRadius: 5,
//   borderBottomRightRadius: 5,
//   fontWeight: 600,
//   borderBottomWidth: 2,
//   borderBottomStyle: 'solid',
//   borderBottomColor: 'yellow',
//   backgroundColor: '#FF0000'
// }
```

This library exports a `stylesheet` function that takes two arguments:

- _container_: Container where the styles are being computed into. It specifies the `width` and `height` in points (needed for media queries and unit conversions), and optionally the container `orientation` (needed for certain media queries).
- _style_: Style to be computed. JS object with raw styles that you would like to get in a normalized format.

## License

MIT © [Diego Muracciole](http://github.com/diegomura)
npm package: @react-pdf-jepek/textkit
Description: An advanced text layout framework
Latest version: 4.1.2

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-pdf/textkit

## Acknowledges

This project is a fork of [textkit](https://github.com/foliojs/textkit) by @devongovett and continued under the scope of this project since it has react-pdf specific features. Any recongnition should go to him and the original project mantainers.

## Layout process

1. split into paragraphs
2. get bidi runs and paragraph direction
3. font substitution - map to resolved font runs
4. script itemization
5. font shaping - text to glyphs
6. line breaking
7. bidi reordering
8. justification
9. get a list of rectangles by intersecting path, line, and exclusion paths
10. perform line breaking to get acceptable break points for each fragment
11. ellipsize line if necessary
12. bidi reordering
13. justification
npm package: @react-pdf-jepek/yoga
Description: Prebuilt yoga-layout package
Author: Diego Muracciole
Latest version: 3.0.0

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-pdf/yoga

> Prebuilt [yoga-layout](https://github.com/facebook/yoga) package with memory heap increase

## Acknowledges

This project is forked from the great [yoga-layout-prebuilt](https://github.com/vadimdemedes/yoga-layout-prebuilt) from @vadimdemedes.

Also thanks to @Skywalker13 for providing the post-processing script for increasing build original memory heap.

## Install

```
$ npm install @react-pdf/yoga
```

## Usage

```js
import Yoga from '@react-pdf/yoga';
// Same as if imported from yoga-layout
```
npm package: @react-pdf/font-substitution
Description: Used in react-pdf Textkit font-substitution engine to support pdfkit standard AFM fonts
Author: Diego Muracciole
Latest version: 1.1.0
Deprecated: Unified in @react-pdf/text-layout

<img src="https://github.com/react-pdf/site/blob/master/src/static/images/logo.png" alt="react-pdf logo" width="120px" />

# font-substitution

Used in react-pdf
Textkit font-substitution engine to support pdfkit standard AFM fonts
npm package: @react-pdf/image
Description: Parses the images in png or jpeg format for react-pdf document
Author: Diego Muracciole
Latest version: 3.0.4

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-pdf/image
npm package: @react-pdf/layout
Description: Resolve document component's layout
Author: Diego Muracciole
Latest version: 4.5.1

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-pdf/layout
npm package: @react-pdf/linebreaker
Description: Used in react-pdf Knuth and Plass line breaking algorithm for textkit
Author: Diego Muracciole
Latest version: 1.2.5
Deprecated: Unified in @react-pdf/text-layout

<img src="https://github.com/react-pdf/site/blob/master/src/static/images/logo.png" alt="react-pdf logo" width="120px" />

# linebreaker

Used in react-pdf
Knuth and Plass line breaking algorithm for textkit
npm package: @react-pdf/pdfkit
Description: A PDF generation library for Node.js
Author: Devon Govett
Latest version: 5.0.0

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-pdf/pdfkit

A JavaScript PDF generation library for Node and the browser.

## Acknowledges

This project is a fork of [pdfkit](https://github.com/foliojs/pdfkit) by @devongovett and continued under the scope of this project since it has react-pdf specific features. Any recongnition should go to him and the original project mantainers.

## Description

PDFKit is a PDF document generation library for Node and the browser that makes creating complex, multi-page, printable documents easy.
It's written in CoffeeScript, but you can choose to use the API in plain 'ol JavaScript if you like. The API embraces
chainability, and includes both low level functions as well as abstractions for higher level functionality. The PDFKit API
is designed to be simple, so generating complex documents is often as simple as a few function calls.

Check out some of the [documentation and examples](http://pdfkit.org/docs/getting_started.html) to see for yourself!
You can also read the guide as a [self-generated PDF](http://pdfkit.org/docs/guide.pdf) with example output displayed inline.
If you'd like to see how it was generated, check out the README in the [docs](https://github.com/devongovett/pdfkit/tree/master/docs)
folder.

You can also try out an interactive in-browser demo of PDFKit [here](http://pdfkit.org/demo/browser.html).

## Installation

Installation uses the [npm](http://npmjs.org/) package manager. Just type the following command after installing npm.

    npm install @react-pdf/pdfkit

## Features

- Vector graphics
  - HTML5 canvas-like API
  - Path operations
  - SVG path parser for easy path creation
  - Transformations
  - Linear and radial gradients
- Text
  - Line wrapping
  - Text alignments
  - Bulleted lists
- Font embedding
  - Supports TrueType (.ttf), OpenType (.otf), WOFF, WOFF2, TrueType Collections (.ttc), and Datafork TrueType (.dfont) fonts
  - Font subsetting
  - See [fontkit](http://github.com/devongovett/fontkit) for more details on advanced glyph layout support.
- Image embedding
  - Supports JPEG and PNG files (including indexed PNGs, and PNGs with transparency)
- Annotations
  - Links
  - Notes
  - Highlights
  - Underlines
  - etc.

## Coming soon!

- Patterns fills
- Outlines
- PDF Security
- Higher level APIs for creating tables and laying out content
- More performance optimizations
- Even more awesomeness, perhaps written by you! Please fork this repository and send me pull requests.

## Documentation

For complete API documentation and more examples, see the [PDFKit website](http://pdfkit.org/).

## License

PDFKit is available under the MIT license.
npm package: @react-pdf/png-js
Description: A PNG decoder in JS
Author: Devon Govett
Latest version: 3.0.0

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-pdf/png-js

A PNG decoder in JS for the canvas element or Node.js.

## Acknowledges

This project is a fork of [png.js](https://github.com/foliojs/png.js) by @devongovett and continued under the scope of this project since it has react-pdf specific features. Any recongnition should go to him and the original project mantainers.

## About this fork

> Updated to 977b857a11676c1e720e79ed8d9178a005a9abd6

- Build node and browser specific bundles
- Uses rollup for build

## Browser Usage

Simply include png.js and zlib.js on your HTML page, create a canvas element, and call PNG.load to load an image.

    <canvas></canvas>
    <script src="zlib.js"></script>
    <script src="png.js"></script>
    <script>
        var canvas = document.getElementsByTagName('canvas')[0];
        PNG.load('some.png', canvas);
    </script>

The source code for the browser version resides in `png.js` and also supports loading and displaying animated PNGs.

## Node.js Usage

Install the module using npm

    sudo npm install png-js

Require the module and decode a PNG

    var PNG = require('png-js');
    PNG.decode('some.png', function(pixels) {
        // pixels is a 1d array (in rgba order) of decoded pixel data
    });

You can also call `PNG.load` if you want to load the PNG (but not decode the pixels) synchronously. If you already
have the PNG data in a buffer, simply use `new PNG(buffer)`. In both of these cases, you need to call `png.decode`
yourself which passes your callback the decoded pixels as a buffer. If you already have a buffer you want the pixels
copied to, call `copyToImageData` with your buffer and the decoded pixels as returned from `decodePixels`.
npm package: @react-pdf/reconciler
Description: Define uninitialized elements
Author: Diego Muracciole
Latest version: 2.0.0

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-pdf/reconciler
npm package: @react-pdf/styled-components
Description: [styled-components](https://github.com/styled-components/styled-components) bindings for react-pdf
Author: Diego Muracciole
Latest version: 1.4.0

<img src="https://github.com/react-pdf/site/blob/master/src/static/images/logo.png" alt="react-pdf logo" width="120px" />

# styled-components

[styled-components](https://github.com/styled-components/styled-components) bindings for react-pdf


## Installation

```
yarn add @react-pdf/styled-components
```

## Usage
`@react-pdf/styled-components` follows the same styled-components API

```jsx
import styled from ''@react-pdf/styled-components';

const Heading = styled.Text`
  margin: 10px;
  font-size: 22px;
  font-family: 'Helvetica';
`;

const MyDocument = () => (
  <Document>
    <Page>
      <Heading>
        D'oh!
      </Heading>
    </Page>
  </Document>
)
```

## Supported components

- Document
- Page
- View
- Image
- Text
- Link
npm package: @react-pdf/svgkit
Description: A SVG generation library for Node.js and browser
Latest version: 2.3.14

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-pdf/svgkit

A SVG generation library for Node.js and browser.

Has a `pdfkit` compatible API

## TODOs:

- Gradients
- Default fonts
- Embeded fonts (in progress)
npm package: @react-pdf/text-layout
Description: React-pdf text layout engine
Author: Diego Muracciole
Latest version: 0.3.5
Deprecated: This package is no longer used in react-pdf renderer build. Test layout engine is now inside the core package

<img src="https://github.com/react-pdf/site/blob/master/src/static/images/logo.png" alt="react-pdf logo" width="120px" />

# text-layout

React-pdf text layout engine
npm package: @react-pdf/types
Description: React-pdf TypeScript definitions
Author: Diego Muracciole
Latest version: 2.10.0

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-pdf/types

> React-pdf TypeScript definitions

## How to install

```sh
yarn add @react-pdf/types
```

## License

MIT © [Diego Muracciole](http://github.com/diegomura)
npm package: @react-pdf/unicode-properties
Description: Provides fast access to unicode character properties
Author: Devon Govett
Latest version: 2.6.0

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-pdf/unicode-properties

Provides fast access to unicode character properties. Uses [unicode-trie](https://github.com/devongovett/unicode-trie) to compress the
properties for all code points into just 12KB.

## Acknowledges

This project is a fork of [unicode-properties](https://github.com/foliojs/unicode-properties) by @devongovett and continued under the scope of this project since it has react-pdf specific features. Any recongnition should go to him and the original project mantainers.

## Fork changes

> Updated at a7df933c4fe5ddca2cb9829a5634e6fe9f1ac529

- Trie data parsed as JSON in order to run it both on node and browser easily
- Written in ES6

## Usage

```sh
npm install unicode-properties
```

```javascript
var unicode = require('unicode-properties');

unicode.getCategory('2'.charCodeAt()) //=> 'Nd'
unicode.getNumericValue('2'.charCodeAt()) //=> 2
```

## API

### getCategory(codePoint)

Returns the unicode [general category](http://www.fileformat.info/info/unicode/category/index.htm) for the given code point.

### getScript(codePoint)

Returns the [script](http://unicode.org/standard/supported.html) for the given code point.

### getCombiningClass(codePoint)

Returns the [canonical combining class](http://unicode.org/glossary/#combining_class) for the given code point.

### getEastAsianWidth(codePoint)

Returns the [East Asian width](http://www.unicode.org/reports/tr11/tr11-28.html) for the given code point.

### getNumericValue(codePoint)

Returns the numeric value for the given code point, or null if there is no numeric value for that code point.

### isAlphabetic(codePoint)

Returns whether the code point is an alphabetic character.

### isDigit(codePoint)

Returns whether the code point is a digit.

### isPunctuation(codePoint)

Returns whether the code point is a punctuation character.

### isLowerCase(codePoint)

Returns whether the code point is lower case.

### isUpperCase(codePoint)

Returns whether the code point is upper case.

### isTitleCase(codePoint)

Returns whether the code point is title case.

### isWhiteSpace(codePoint)

Returns whether the code point is whitespace: specifically, whether the category is one of Zs, Zl, or Zp.

### isBaseForm(codePoint)

Returns whether the code point is a base form. A code point of base form does not graphically combine with preceding
characters.

### isMark(codePoint)

Returns whether the code point is a mark character (e.g. accent).

## License

MIT
npm package: @react-pdf/yoga
Description: Prebuilt yoga-layout package
Author: Diego Muracciole
Latest version: 4.1.2

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-pdf/yoga

> Prebuilt [yoga-layout](https://github.com/facebook/yoga)

## Acknowledges

This package ship [yoga-wasm-web/asm](https://github.com/shuding/yoga-wasm-web) with commonjs entry

## Install

```
$ npm install @react-pdf/yoga
```

## Usage

```js
import Yoga from '@react-pdf/yoga';
// Same as if imported from yoga-layout
```
npm package: @react-pdf/zlib
Description: Emulates Node's zlib module for the browser.
Author: Diego Muracciole
Latest version: 2.0.0

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @react-pdf/zlib

Emulates Node's zlib module for the browser.

This package is a port of [browserify-zlib](https://github.com/browserify/browserify-zlib), but containing **just** the deflate  bindings needed for react-pdf. It also uses the last [pako](https://github.com/nodeca/pako) version.

## `zlib.deflateSync`

Compresses a chunk of data with Deflate.

```
zlib.deflateSync(buffer)
```

**Return Value:** It returns the chunk of data with deflate.

## `zlib.createDeflate`

Creates and returns a new Deflate object.

```
zlib.createDeflate()
```

**Return Value:** Delfate instance (Transform stream)
npm package: @react-pixel-ui/use-pixelated-css
Description: A React hook that transforms CSS styles into a pixelated form.
Latest version: 0.1.5
Deprecated: Deprecated. Use @react-pixel-ui/react@2.0.0 instead.

# `use-pixelated-css`

A React hook that transforms CSS styles into a pixelated form.

## Features

- Transforms original CSS styles into pixelated versions
- Automatically updates pixelation when element size changes via ResizeObserver
- Cleans up ResizeObserver when component unmounts
- Can be used internally by UI components like Button to apply pixelated styles

## Installation

```bash
// pnpm
pnpm add @react-pixel-ui/use-pixelated-css

// yarn
yarn add @react-pixel-ui/use-pixelated-css

// npm
npm install @react-pixel-ui/use-pixelated-css
```

## Usage

```tsx
import {useRef} from 'react';
import {usePixelatedCSS} from '@react-pixel-ui/use-pixelated-css';
import {css} from '@emotion/react';

const DemoComponent = () => {
  const ref = useRef(null);
  const divStyle = css`
    border: 1px solid #000;
    border-radius: 16px;
    background: linear-gradient(45deg, #FFDCFF, #FF97FF);
  `;
  const pixelatedCSS = usePixelatedCSS({
    prevCSS: divStyle,
    ref,
    unitPixel: 4,
  });
  return <div ref={ref} css={pixelatedCSS}>Hello, world!</div>;
};
```

## Props
- `prevCSS`: CSS styles before pixelation (required, SerializedStyles)
- `ref`: Reference to the element to be pixelated (required, RefObject)
- `unitPixel`: Pixel unit size (optional(default: 4), number)
npm package: @react-platform/async-storage
Description: Cross-platform `@react-native-community/async-storage` implementation. Defaults to an (unstable) JS only session/in-memory store.
Latest version: 0.0.1

# Async Storage

Cross-platform `@react-native-community/async-storage` implementation. Defaults to an (unstable) JS only session/in-memory store.

## Platforms

- `react-native-web` – React Web
- `react-native` – React Native – iOS/Android
- `react-native-windows` – React Native Windows
- `react-native-macos` – React Native macOS
- `react-sketchapp` – React Sketch.app
- TODO: `react-figma` – React Figma
  - Use https://www.figma.com/plugin-docs/api/figma-clientStorage/ or https://www.figma.com/plugin-docs/api/properties/nodes-setplugindata/
npm package: @react-platform/native
Description: Common React Native APIs and components for web and React Native platforms such as `react-native`, `react-native-windows`, `react-native-macos`, `react-sketchapp`, `react-figma`, etc.
Author: Macintosh Helper
Latest version: 0.0.3

# React Platform Native

Common React Native APIs and components for web and React Native platforms such as `react-native`, `react-native-windows`, `react-native-macos`, `react-sketchapp`, `react-figma`, etc.

e.g. `<ScrollView>`, `<FlatList>`, `<TextInput>`