open-index/open-npm huggingface dataset:
npm package: @neofreko/vue-drag-and-drop
Description: A for Vue.js directive for providing drag and drop capabilities to elements and data.
Author: James Doyle
Latest version: 2.2.1

# vue-drag-and-drop

A directive for providing drag and drop capabilities to elements and data.

### Install

Available through `npm install vue-drag-and-drop` or include as an inline script, like in `example.html`.

### Mobile Support

This library simply wraps the native drag and drop in html5. There is no support, and probably never will be any, for native "drag and drop" on mobile. See this [chart](http://caniuse.com/#feat=dragndrop).

The reason for this is that touch devices already have the necessary events (touch events) to implement drag and drop without need the additional apis that the desktop drag and drop has.

If you need a cross-platform solution, you should check out [this awesome library called pep!](http://pep.briangonzalez.org/).

### Demo

![demo gif](http://cl.ly/2B3j0g2K412y/Screen%20Recording%202015-12-09%20at%2009.23%20PM.gif)
![demo gif 2](http://cl.ly/3v2V3w1n3y2D/Screen%20Recording%202015-12-10%20at%2002.36%20PM.gif)

You can load up the `example.html` file here to test the directive.

### Usage

Here is how you might typically use this directive:

```html
<li v-for="task in tasks" id="{{ $index }}" v-drag-and-drop drop="handleDrop">{{ task.title }}</li>
```

This directive assumes you are using it *inside* of some sort of list of elements.

First, you can see the `id`. In this case, it is being used to inform us of *where in my array of tasks is this item?*.

When the list is changed, `drop` is called, and we run `handleDrop` (but we can use any function in our `methods` in the Vue instance), which calls with 2 arguments `(draggedElement, droppedOnElement)`. This way we can do a swap in our data. For the `example.html`, we use the elements `id` as the index in our data.

Since we get these 2 elements, we can then do a normal array swapping dance, which looks like this:

```js
var placeholder = this.tasks[draggedElement.id];
this.tasks.$set(draggedElement.id, this.tasks[droppedOnElement.id]);
this.tasks.$set(droppedOnElement.id, placeholder);
```

You can use whatever you want for the `$index` attribute. Maybe you want to use `data-index`? Then just use `draggedElement.getAttribute('data-index')` to grab the index for that item in your data.

You can see a `Vue` instance in `example.html` if you want more details.
npm package: @neogeek/common-react-hooks
Description: Common React hooks.
Latest version: 3.2.0

# @neogeek/common-react-hooks

[![Tests](https://github.com/neogeek/common-react-hooks/actions/workflows/test.workflow.yml/badge.svg)](https://github.com/neogeek/common-react-hooks/actions/workflows/test.workflow.yml)
[![NPM Version](http://img.shields.io/npm/v/@neogeek/common-react-hooks.svg?style=flat)](https://www.npmjs.org/package/@neogeek/common-react-hooks)

## Install

```bash
$ npm install @neogeek/common-react-hooks
```

## Documentation

### `useDisabledFocus(ref, disabled)`

```typescript
const ExampleFunction = () => {
  const [disabled, setDisabled] = useState(false);

  const ref = useRef<HTMLButtonElement>(null);

  useDisabledFocus(ref, disabled);

  return (
    <button ref={ref} onClick={() => setDisabled(true)}>
      Save
    </button>
  );
};
```

### `useFlash(trigger, [timeoutInMilliseconds = 1000])`

```javascript
const isFlashVisible = useFlash(false);
```
npm package: @neogeek/create-app-oauth-providers
Description: @neogeek's Create App OAuth Providers
Latest version: 1.0.6

# @neogeek/create-app-oauth-providers

[![Tests](https://github.com/neogeek/create-app-oauth-providers/actions/workflows/test.workflow.yml/badge.svg)](https://github.com/neogeek/create-app-oauth-providers/actions/workflows/test.workflow.yml)
[![NPM version](https://img.shields.io/npm/v/@neogeek/create-app-oauth-providers?style=flat-square)](https://www.npmjs.org/package/@neogeek/create-app-oauth-providers)

## Install

```bash
$ npm install @neogeek/create-app-oauth-providers
```

## Usage

```typescript
import { google } from '@neogeek/create-app-oauth-providers';

import {
  GoogleOAuthProfileResponseSchema,
  GoogleOAuthTokenResponseSchema,
} from '@neogeek/create-app-oauth-providers/dist/providers/google';

(async () => {
  const code = req.query.code;

  const tokens = await google.getTokens(code, {
    client_id: process.env.GCP_OAUTH_CLIENT_ID,
    client_secret: process.env.GCP_OAUTH_CLIENT_SECRET,
    redirect_uri: process.env.GCP_OAUTH_REDIRECT_URL,
  });

  const validatedTokens = GoogleOAuthTokenResponseSchema.parse(tokens);

  const profile = await google.getProfile(tokens.access_token);

  const validatedProfile = GoogleOAuthProfileResponseSchema.parse(profile);

  console.log({ tokens, profile });
})();
```

### Types

```typescript
import type {
  GoogleOAuthProfileResponse,
  GoogleOAuthTokenResponse,
} from '@neogeek/create-app-oauth-providers/dist/providers/google';
```

### Schema (zod validation)

```typescript
import {
  GoogleOAuthProfileResponseSchema,
  GoogleOAuthTokenResponseSchema,
} from '@neogeek/create-app-oauth-providers/dist/providers/google';
```
npm package: @neogeek/create-app-utils
Description: @neogeek's Create App Utilities
Latest version: 3.0.3

# @neogeek/create-app-utils

[![Tests](https://github.com/neogeek/create-app-utils/actions/workflows/test.workflow.yml/badge.svg)](https://github.com/neogeek/create-app-utils/actions/workflows/test.workflow.yml)
[![NPM version](https://img.shields.io/npm/v/@neogeek/create-app-utils?style=flat-square)](https://www.npmjs.org/package/@neogeek/create-app-utils)

## Install

```bash
$ npm install @neogeek/create-app-utils
```

## Usage

### URL

#### `getQueryParamsFromUrl(url)`

```typescript
import { getQueryParamsFromUrl } from '@neogeek/create-app-utils';

const { key } = getQueryParamsFromUrl('https://domain.com/?key=value');
```

### Cookies

#### `serializeCookie(key, value, maxAge, secure)`

```typescript
import { serializeCookie } from '@neogeek/create-app-utils';

const cookie = serializeCookie('key', 'value', 0, true);
```

### Dates

#### `generateExpireAtDate(daysFromNow)`

```typescript
import { generateExpireAtDate } from '@neogeek/create-app-utils';

const date = generateExpireAtDate(5);
```

### JWT

#### `extractDataFromToken(token)`

```typescript
import { extractDataFromToken } from '@neogeek/create-app-utils';

const { key } = extractDataFromToken(token);
```

#### `generateAccessToken(privateKey, data, options)`

```typescript
import { generateAccessToken } from '@neogeek/create-app-utils';

const accessToken = generateAccessToken(
  privateKey,
  { key: 'value' },
  {
    algorithm: 'RS512',
    expiresIn: '15 minutes',
  }
);
```

#### `generateRefreshToken(privateKey, data, options)`

```typescript
import { generateRefreshToken } from '@neogeek/create-app-utils';

const refreshToken = generateRefreshToken(
  privateKey,
  { key: 'value' },
  {
    algorithm: 'RS512',
    expiresIn: '15 minutes',
  }
);
```

#### `verifyAccessToken(publicKey, token)`

```typescript
import { verifyAccessToken } from '@neogeek/create-app-utils';

const isValid = verifyAccessToken(publicKey, token);
```

#### `verifyRefreshToken(publicKey, token)`

```typescript
import { verifyRefreshToken } from '@neogeek/create-app-utils';

const isValid = verifyRefreshToken(publicKey, token);
```