open-index/open-npm huggingface dataset:
npm package: @pqart/react-native-swipeout
Description: iOS-style swipeout buttons behind component
Author: Dan Cormier
Latest version: 2.0.12-2

# react-native-swipeout
iOS-style swipeout buttons that appear from behind a component

![swipeout preview](http://i.imgur.com/oCQLNFC.gif)

## Installation
```
npm install --save react-native-swipeout
```

## Usage example

See example/index.ios.js for a more detailed example.
See the [Wiki](https://github.com/dancormier/react-native-swipeout/wiki) usage tips.
To use swipeout behind a iOS-style listitem, try [react-native-listitem](https://github.com/dancormier/react-native-listitem).

```
var Swipeout = require('react-native-swipeout')

// Buttons
var swipeoutBtns = [
  {
    text: 'Button'
  }
]

// Swipeout component
<Swipeout right={swipeoutBtns}>
  <View>
    <Text>Swipe me left</Text>
  </View>
</Swipeout>

```

## Props

Prop            | Type   | Optional | Default   | Description
--------------- | ------ | -------- | --------- | -----------
autoClose       | bool   | Yes      | false     | auto close on button press
backgroundColor | string | Yes      | '#dbddde' |
close           | bool   | Yes      |           | close swipeout
left            | array  | Yes      | []        | swipeout buttons on left
onOpen          | func   | Yes      |           |
right           | array  | Yes      | []        | swipeout buttons on right
scroll          | func   | Yes      |           | prevent parent scroll

##### Button props

Prop            | Type   | Optional | Default   | Description
--------------- | ------ | -------- | --------- | -----------
backgroundColor | string | Yes      | '#b6bec0' | background color
color           | string | Yes      | '#ffffff' | text color
component       | string | Yes      | null      | pass custom component to button
onPress         | func   | Yes      | null      | function executed onPress
text            | string | Yes      | 'Click Me'| text
type            | string | Yes      | 'default' | default, primary, secondary
underlayColor   | string | Yes      | null      | button underlay color on press

## To Do

[https://github.com/dancormier/react-native-swipeout/issues](https://github.com/dancormier/react-native-swipeout/issues)
npm package: @pqdc/pqcc
Description: Piqued Command Center — governance dashboard for pqdx state files
Author: Jeremy Dodson
Latest version: 0.0.1

# @pqdc/pqcc

> Piqued Command Center — governance dashboard for pqdx state files

**Namespace reserved by [Piqued AI, LLC](https://piqued-ai.com).**

Part of the [pqdc governance toolkit](https://pqdc.dev).
npm package: @pqdc/pqdc
Description: pqdc governance toolkit — install and manage all pq* developer tools
Author: Jeremy Dodson
Latest version: 0.0.1

# @pqdc/pqdc

> pqdc governance toolkit — install and manage all pq* developer tools

**Namespace reserved by [Piqued AI, LLC](https://piqued-ai.com).**

Part of the [pqdc governance toolkit](https://pqdc.dev).
npm package: @pqdc/pqgd
Description: Piqued Git Digest — AI-ready repository context in six modes
Author: Jeremy Dodson
Latest version: 0.0.1

# @pqdc/pqgd

> Piqued Git Digest — AI-ready repository context in six modes

**Namespace reserved by [Piqued AI, LLC](https://piqued-ai.com).**

Part of the [pqdc governance toolkit](https://pqdc.dev).
npm package: @pqdc/pqit
Description: Piqued Init — scaffold pqdx governance into any code repository
Author: Jeremy Dodson
Latest version: 0.0.1

# @pqdc/pqit

> Piqued Init — scaffold pqdx governance into any code repository

**Namespace reserved by [Piqued AI, LLC](https://piqued-ai.com).**

Part of the [pqdc governance toolkit](https://pqdc.dev).
npm package: @pqdc/pqsn
Description: Piqued Sessions — session governance delivery for AI-collaborative development
Author: Jeremy Dodson
Latest version: 0.0.1

# @pqdc/pqsn

> Piqued Sessions — session governance delivery for AI-collaborative development

**Namespace reserved by [Piqued AI, LLC](https://piqued-ai.com).**

Part of the [pqdc governance toolkit](https://pqdc.dev).
npm package: @pqdc/pqsq
Description: Piqued State Query — CLI queries against pqdx state files
Author: Jeremy Dodson
Latest version: 0.0.1

# @pqdc/pqsq

> Piqued State Query — CLI queries against pqdx state files

**Namespace reserved by [Piqued AI, LLC](https://piqued-ai.com).**

Part of the [pqdc governance toolkit](https://pqdc.dev).
npm package: @pqdc/pqvl
Description: Piqued Validate — headless pqdx state file validation for CI/CD pipelines
Author: Jeremy Dodson
Latest version: 0.0.1

# @pqdc/pqvl

> Piqued Validate — headless pqdx state file validation for CI/CD pipelines

**Namespace reserved by [Piqued AI, LLC](https://piqued-ai.com).**

Part of the [pqdc governance toolkit](https://pqdc.dev).
npm package: @pqian/ph-mongoose
Description: > `npm install --save @types/ph-mongoose`
Latest version: 5.0.2
Deprecated: Abandoned and have serious bugs

# Installation
> `npm install --save @types/ph-mongoose`

# Summary
This package contains type definitions for Mongoose (http://mongoosejs.com/).

# Details
Files were exported from https://www.github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/mongoose

Additional Details
 * Last updated: Tue, 13 Feb 2018 00:46:30 GMT
 * Dependencies: events, mongodb, stream, node
 * Global values: none

# Credits
These definitions were written by simonxca <https://github.com/simonxca>, horiuchi <https://github.com/horiuchi>, sindrenm <https://github.com/sindrenm>, lukasz-zak <https://github.com/lukasz-zak>, Alorel <https://github.com/Alorel>, jendrikw <https://github.com/jendrikw>.
npm package: @pqina/birthdate-input
Description: An easy way to create a birthdate input field
Author: Rik Schennink at PQINA
Latest version: 0.0.1

# Birtdate-Input

A Custom Element to handle birthdate input.

```
npm install @pqina/birthdate-input
```

Or download and copy the `birthdate-input.js` file to your project.

Optionally set the `locale` attribute to override the browser locale.

More information on [pqina.nl/building-birthdate-input-custom-element](https://pqina.nl/building-birthdate-input-custom-element/)

```html
<fieldset>
  <legend>Birthdate</legend>
  <birthdate-input locale="nl-NL">
    <!-- Order of fields when JavaScript fails to load -->

    <label for="day">Day</label>
    <input id="day" min="1" max="31" type="number" placeholder="dd" />

    <label for="month">Month</label>
    <input id="month" min="1" max="12" type="number" placeholder="mm" />

    <label for="year">Year</label>
    <input id="year" min="1800" max="2025" type="number" placeholder="yyyy" />
  </birthdate-input>
</fieldset>

<script src="birthdate-input.js"></script>
```
npm package: @pqina/hud
Description: An easy way to visually debug 2D shapes
Author: Rik Schennink
Latest version: 0.0.1

# HUD

An easy way to visually debug 2D shapes.

Add to page body

```html
<script src="hud.js"></script>
```

Now you can draw info to the viewport.

This will draw a cyan dot on the viewport at position `50, 50`

```js
hud({
    x: 50,
    y: 50,
});
```

This will draw a rectangle. HUD automatically picks colors for every shape drawn to the view.

```js
hud({
    x: 50,
    y: 50,
    width: 200,
    height: 300,
});
```

We can manually assign a color like shown below where we draw a cyan circle.

```js
hud({
    x: 50,
    y: 50,
    r: 10,
}).cyan();
```

Available colors:

```
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
white
black
silver
```

We can supply custom color info with the `color` transform.

```js
hud('Hello World', 100, 100).color('#ff0');
```

Draw a line segment by supplying a line object or an array of two coordinates.

```js
hud({
    start: {
        x: 0,
        y: 0,
    },
    end: {
        x: 50,
        y: 50,
    },
});

// or
hud(
    {
        x: 0,
        y: 0,
    },
    {
        x: 50,
        y: 50,
    }
);

// or
hud([0, 0], [50, 50]);
```

Add one more coordinate and HUD will draw a polygon.

```js
hud(
    {
        x: 0,
        y: 0,
    },
    {
        x: 50,
        y: 50,
    },
    {
        x: 0,
        y: 50,
    }
);
```

Want to draw a line instead, pass the `line` transform.

```js
hud(
    {
        x: 0,
        y: 0,
    },
    {
        x: 50,
        y: 50,
    },
    {
        x: 0,
        y: 50,
    }
).line();
```

These generic HUD API enables adjusting the generic HUD style.

```js
// lower opacity of HUD
hud.opacity(0.5);

// translate HUD drawing offset
hud.translate(0, 50);

// increase line thickness
hud.strength(3);

// set 3 digit precision for logged data
hud.precision(3);
```

We can use these additional shape API end points to make logging coordinates easier.

```js
// this logs vertex coordinates to the view
hud({
    x: 0,
    y: 0,
    width: 100,
    height: 100,
}).points();

// this logs line segment lengths to the view
hud({
    x: 0,
    y: 0,
    width: 100,
    height: 100,
}).lengths();

// this logs line segment angles to the view
hud({
    x: 0,
    y: 0,
    width: 100,
    height: 100,
}).angles();
```

Add `.log()` to log the shape data to the developer console.

```js
// this logs vertex coordinates to the dev console
hud({
    x: 0,
    y: 100,
}).log();
```
npm package: @pqina/package-has-origin
Description: Tests if a package has a given origin
Author: Rik Schennink at PQINA
Latest version: 0.0.2

# Package Has Origin

This CLI tool tests if a given package has been installed from a given origin.

Example:

```bash
npx @pqina/package-has-origin @pqina/pintura npm.pqina.nl
```

If [`@pqina/pintura`](https://pqina.nl/pintura) wasn't installed from `npm.pqina.nl` the script exits with an error.

This can be used as a `prebuild` script to make sure a certain package is installed before running build.

```json
{
    "scripts": {
        "prebuild": "npx @pqina/package-has-origin @pqina/pintura npm.pqina.nl",
        "build": "echo \"Running build\" && exit 1"
    }
}
```

Tested with Npm, Yarn 2+, and Pnpm.
npm package: @pqina/snaptext
Description: Snap a picture of HTML text
Author: PQINA
Latest version: 0.0.2

# SnapText

**📸 Snap a picture of HTML text**

Converts HTML text to an SVG, Image, Blob, or a Canvas element.

For a demo see the "snap picture" buttons at the top of code examples on [PQINA.nl](https://pqina.nl/blog/upload-image-with-nodejs/)

```html
<script type="module">
    // Import the module
    import snapText from './snapText.js';

    // Snap a picture of some text
    const canvas = await snapText('pre.language-html');

    // Add picture to body for viewing
    document.body.append(canvas);
</script>
```

I've only tested this on desktop Chrome, Firefox, and Safari with text inside a `<pre>` element. At this time I'm not sure if it'll work with non preformatted text.

## Usage

Pass either an `Element` or querySelector `string` as the first argument, the second argument is an optional options object:

```js
// Use default options
const svg = await snapText('.my-element');

// Customize options (shows defaults)
const svg = await snapText('.my-element', {
    // The output format, set to 'svg', 'canvas', 'img', or 'blob'
    format: 'svg',

    // The output width in pixels (can set `width`, or `height`, or both)
    width: undefined,

    // The output height in pixels (can set `width`, or `height`, or both)
    height: undefined,

    // Padding in pixels around the output, added to the inside when `width` or `height` is set
    padding: 0,

    // Size multiplier in pixels
    scalar: 1,
});
```

Example:

```js
const img = await snapText('.my-element', {
    // We want an <img> element
    format: 'img',

    // Image will be 1024 wide
    width: 1024,

    // Add 20 pixels padding on the inside
    padding: 20,
});

// Add to body for viewing
document.body.append(img);
```
npm package: @pqina/tablissimo
Description: Easy tables with text syntax, mostly a dependency for `@pqina/11ty-tablissimo`
Author: Rik Schennink | PQINA
Latest version: 0.0.5

# Tablissimo

Easy tables with text syntax, mostly a dependency for `@pqina/11ty-tablissimo`

## Install

```
npm i @pqina/tablissimo --save-dev
```

## Usage

```js
const tablissimo = require('@pqina/tablissimo');

const options = {
    format: {
        // format as date
        date: (str) =>
            new Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(
                new Date(str)
            ),

        // format as location with link to openstreetmap
        location: (str) =>
            /,/.test(str)
                ? `<a href="https://www.openstreetmap.org/?query=${str}" target="_blank" rel="noreferrer" title="Show ${str} on map">${str}</a>`
                : str,
    },
};

const html = tablissimo(
    `
caption: TVA Timeline Disruptions
head: Event | Date | Time | Location
body: | =date | | =location

_46465189=703_
2301-04-23
08:39:42
Vormir

_46462044=066_
1551-10-25
18:09:34
Thorton, USA

_46443278=421_
1999-11-22
08:02:13
Cookeville, USA

_46420987=051_
2004-02-16
14:21:03
Asgard

_46432678=042_
1390-10-03
03:01:24
Rome, Italy
`,
    options
);
```

## Options
npm package: @pqkluan/prettier-config
Description: Prettier config
Author: Luan Pham
Latest version: 1.0.8

# @pqkluan/prettier-config

[![build][publish-badge]][publish-action]
[![version][version-badge]][package]
[![MIT License][license-badge]][license]

Personal prettier config for javascript projects

## How to use

Install this module as dev dependency

```bash
yarn add --dev @pqkluan/prettier-config
```

(Optional) Remove exists prettier config file.

To apply this module config, add "prettier" key in your `package.json` file.

```
{
  // ...
  "prettier": "@pqkluan/prettier-config"
}
```

(Optional) Update Visual Studio Code setting so editor rules will be the same with Prettier formatting rules

```json
"editor.rulers": [100],
"editor.tabSize": 2,
"editor.insertSpaces": true
```

## License

MIT

[publish-badge]: https://github.com/pqkluan/prettier-config/actions/workflows/npm-publish.yml/badge.svg
[publish-action]: https://github.com/pqkluan/prettier-config/actions/workflows/npm-publish.yml
[version-badge]: https://img.shields.io/npm/v/@pqkluan/prettier-config.svg
[package]: https://www.npmjs.com/package/@pqkluan/prettier-config
[license-badge]: https://img.shields.io/npm/l/@pqkluan/prettier-config.svg
[license]: https://github.com/pqkluan/prettier-config/blob/master/LICENSE
npm package: @pqkluan/rn-prettier-config
Description: Prettier config
Author: Luan Pham
Latest version: 1.0.2

# @pqkluan/rn-prettier-config

Personal prettier config for react-native project

## How-to-use

Install this module as dev dependency

```bash
yarn add --dev @pqkluan/rn-prettier-config
```

(Optional) Remove exists prettier config file.

To apply this module config, add "prettier" key in your `package.json` file.

```
{
  // ...
  "prettier": "@pqkluan/rn-prettier-config"
}
```

(Optional) Update Visual Studio Code setting so editor rules will be the same with Prettier formatting rules

```json
"editor.rulers": [100],
"editor.tabSize": 2,
"editor.insertSpaces": true
```
npm package: @pql/boost
Description: Definitely not a stolen name
Author: Leah
Latest version: 0.2.0-alpha.19

# @pql/boost

## Basic Usage

```tsx
import { createClient, Provider, useQuery, gql } from '@pql/boost';

const client = createClient('https://graphql-pokemon.now.sh');

const query = gql`
  query {
    pokemon(name: "Pikachu") {
      number
      name
      attacks {
        special {
          name
          type
          damage
        }
      }
    }
  }
`;

function App() {
  return (
    <Provider value={client}>
      <ExampleComponent />
    </Provider>
  );
}

function ExampleComponent() {
  const [{ data, fetching }] = useQuery({ query });

  if (fetching) {
    return <p>Loading ...</p>;
  }

  return (
    <ul>
      <li>#{data.pokemon.number}</li>
      <li>#{data.pokemon.name}</li>
    </ul>
  );
}
```

## API

### Exports

#### `gql`

```ts
gql`...` | gql('...');
```

A convenience method, helps with editor support, doesn't do anyhting right now

#### `createClient`

```ts
createClient(
  url: string,
  headers?: object
) => Client
```

Takes your endpoing url and optionally an object with headers and returns a client instance.

#### `<Provider />`

```tsx
<Provider value={Client}> ... </Provider>
```

pql's context provider, has to be higher up in the tree than any components using the hooks

#### `useQuery`

```ts
useQuery({
  query: string,
  variables?: object
}) => [{
  fetching: boolean,
  data?: object,
  error?: Error
}]
```

Takes a query + optionally variables and returns an array with the result object as the first element.

#### `useMutation`

```ts
useMutation(
  query: string
) => [
  {
    fetching: boolean;
    data?: object;
    error?: Error;
  },
  executeMutation(
    variables?: object
  ) => Promise<{
    data: object,
    error: Error
  }>
];
```

Takes the mutation and returns the result object + a function to pass variables to actually send the mutation
npm package: @pqmcgill/curve
Description: vx curve
Author: @hshoff
Latest version: 0.0.161

# @vx/curve

```
npm install --save @vx/curve
```

## Overview

A curve is a function that can be passed into other vx objects, mainly a LinePath to change the way the line is structured.

For example, checkout the difference between a `Curve.natural`:

![natural curve](https://raw.githubusercontent.com/d3/d3-shape/master/img/natural.png)

and a `Curve.step`:

![step curve](https://raw.githubusercontent.com/d3/d3-shape/master/img/step.png)

The `@vx/curve` package is a wrapper over [d3-shape](https://github.com/d3/d3-shape) curve functions.

Any function with the prefix `curve` in d3 can be used through `vx` like so:

``` javascript
import { curveCatmullRomOpen } from '@vx/curve';
let line = (<Shape.LinePath curve={curveCatmullRomOpen} />)

// or if you want namespace all Curves under the `Curve`
import * as Curve from `@vx/curve`;
let line = (<Shape.LinePath curve={Curve.curveCatmullRomOpen} />)
```

## Functions

|           vx          |                                      d3                                       |
| --------------------- | ----------------------------------------------------------------------------- |
| curveBasis            | [curveBasis](https://github.com/d3/d3-shape#curveBasis)                       |
| curveBasisClose       | [curveBasisClosed](https://github.com/d3/d3-shape#curveBasisClosed)           |
| curveBasisOpen        | [curveBasisOpen](https://github.com/d3/d3-shape#curveBasisOpen)               |
| curveStep             | [curveStep](https://github.com/d3/d3-shape#curveStep)                         |
| curveStepAfter        | [curveStepAfter](https://github.com/d3/d3-shape#curveStepAfter)               |
| curveStepBefore       | [curveStepbefore](https://github.com/d3/d3-shape#curveStepBefore)             |
| curveBundle           | [curveBundle](https://github.com/d3/d3-shape#curveBundle)                     |
| curveLinear           | [curveLinear](https://github.com/d3/d3-shape#curveLinear)                     |
| curveLinearClosed     | [curveLinearClosed](https://github.com/d3/d3-shape#curveLinearClosed)         |
| curveMonotoneX        | [curveMonotoneX](https://github.com/d3/d3-shape#curveMonotoneX)               |
| curveMonotoneY        | [curveMonotoneY](https://github.com/d3/d3-shape#curveMonotoneY)               |
| curveCardinal         | [curveCardinal](https://github.com/d3/d3-shape#curveCardinal)                 |
| curveCardinalClosed   | [curveCardinalClosed](https://github.com/d3/d3-shape#curveCardinalClosed)     |
| curveCardinalOpen     | [curveCardinalOpen](https://github.com/d3/d3-shape#curveCardinalOpen)         |
| curveCatmullRom       | [curveCatmullRom](https://github.com/d3/d3-shape#curveCatmullRom)             |
| curveCatmullRomClosed | [curveCatmullRomClosed](https://github.com/d3/d3-shape#curveCatmullRomClosed) |
| curveCatmullRomOpen   | [curveCatmullRomOpen](https://github.com/d3/d3-shape#curveCatmullRomOpen)     |
| curveNatural          | [curveNatural](https://github.com/d3/d3-shape#curveNatural)                   |