open-index/open-npm huggingface dataset:
npm package: @rkaliev/nuxtjs-session-scroll-savior
Description: NuxtJS Session Scroll Savior Module/Plugin
Author: Ruslan Aliev
Latest version: 1.1.0

# NuxtJS модуль/плагин для сохранения координат скролла в SessionStorage

## Установка и настройка модуля/плагина

```code
npm i @rkaliev/nuxtjs-session-scroll-savior
```

Необходимо в nuxt.config.js в секции modules добавить:

```code
modules: [
    [
      '@rkaliev/nuxtjs-session-scroll-savior',
      {
        key?: string,
      },
    ],
  ],
```

Модуль/плагин добавляет обработчик события onbeforeunload и сохраняет координаты скролла в SessionStorage,
чтоб при перезагрузке страницы их восстановить.

key - необязательный параметр, задает название ключа по которому будут сохраняться координаты в SessionStorage.

Больше информации по Nuxt.js:

* [Ссылка на документацию Nuxt.js docs](https://nuxtjs.org).
* [Ссылка на документацию Nuxt.js Module docs](https://nuxtjs.org/api/internals-module-container#introduction).
npm package: @rkaliev/nuxtjs-yandex-metrika
Description: NuxtJS Yandex.Metrika Module/Plugin
Author: Ruslan Aliev
Latest version: 1.3.0

# NuxtJS модуль/плагин для подключения Yandex.Metrika(Яндекс.Метрика)

## Установка и настройка модуля/плагина

```code
npm i @rkaliev/nuxtjs-yandex-metrika
```

Необходимо в nuxt.config.js в секции modules добавить:

```code
modules: [
    [
      '@rkaliev/nuxtjs-yandex-metrika',
      {
        id: 'XXXXXX',
        webvisor: boolean,
        clickmap: boolean,
        debug: boolean,
        noJS: boolean,
        disabled: boolean,
      },
    ],
  ],
```

Модуль/Плагин активирует подгрузку скриптов Yandex.Metrika(Яндекс.Метрика) только в режиме production (process.env.NODE_ENV),
в режиме develop вместо подгрузки скриптов Yandex.Metrika(Яндекс.Метрика) используется mock Yandex.Metrika.

Параметр [noJS](https://yandex.ru/support/metrica/code/counter-initialize.html) отвечает за инициализацию счетчика через
```<noscript></noscript>``` и ```<img/>```.

Больше информации по Yandex.Metrika(Яндекс.Метрика):

* [Ссылка на документацию Yandex.Metrika(Яндекс.Метрика)](https://yandex.com/support/metrica/code/counter-initialize.html).

ID Yandex.Metrika(Яндекс.Метрика) можно задать как в настройках модуля в nuxt.config.js:

```code
modules: [
    [
      '@rkaliev/nuxtjs-yandex-metrika',
      {
        ...
        id: 'XXXXXX',
        ...
      },
    ],
  ],
```

либо можно задать переменную в .env файле:

```code
YM_ID=XXXXXXX
```

Модуль/Плагин можно запускать в режиме debug, используется mock Yandex.Metrika(Яндекс.Метрика) и происходит вывод в консоль ивентов и параметров:

```code
modules: [
    [
      '@rkaliev/nuxtjs-yandex-metrika',
      {
        ...
        debug: true,
        ...
      },
    ],
  ],
```

Так же можно использовать qs параметры:

```code
https://test.domain.ru/?_ym_debug=1
```

## Использование

После установки Yandex.Metrika(Яндекс.Метрика) доступна через this.$yandexMetrika.

Пример:

```code
methods: {
    /**
     * @param {string} eventName
     */
    sendYandexMetrikaEvent(eventName) {
      this.$yandexMetrika.reachGoal(eventName);
    },
```

Больше информации по Nuxt.js:

* [Ссылка на документацию Nuxt.js docs](https://nuxtjs.org).
* [Ссылка на документацию Nuxt.js Module docs](https://nuxtjs.org/api/internals-module-container#introduction).
npm package: @rkaravia/static-map
Description: Render map tiles in a canvas, given a slippy map tile URL.
Author: Roman Karavia
Latest version: 0.2.2

# static-map

Render map tiles in a canvas, given a [slippy map tile URL](https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames).

## Demo

The [demo](https://rkaravia.github.io/static-map/) renders 512x512px of [OpenStreetMap](https://www.openstreetmap.org/).

## Install

```
$ npm install @rz0/static-map
```

## Usage

```javascript
var canvas = document.createElement('canvas');
document.body.appendChild(canvas)
canvas.width = 512;
canvas.height = 512;

var url = 'https://example.com/{z}/{x}/{y}.png';
var lon = 7.438639;
var lat = 46.951083;
var zoom = 15;
var staticMap = StaticMap(url);
staticMap.getMap(canvas, lon, lat, zoom);
```

## See also

- [BigMap 2](http://bigmap.osmz.ru/)
- [leaflet-image](https://github.com/mapbox/leaflet-image)
npm package: @rkchan/avataaars
Description: Updated react component for avataaars
Author: Ryan Chan
Latest version: 1.0.1

# React component for Avataaars

The core React component for [Avataaars Generator](https://getavataaars.com/) developed by [Fang-Pen Lin](https://twitter.com/fangpenlin), based on the Sketch library [Avataaars](https://avataaars.com/) designed by [Pablo Stanley](https://twitter.com/pablostanley). 

<p align="center"><img src='avataaars-example.png?raw=true' style='width: 300px; height: 300px;' /></p>

## Features

 - SVG based
 - Light weight 
 - Scalable
 - Easy to use
 - Easy to integrate with custom editor
 - Comes with [official editor](https://getavataaars.com/)

## Usage

First, you need to install the avataaars component package, here you run

```
yarn add avataaars
```

or

```
npm install avataaars --save
```

if you are using npm. Then, in your React app, import the Avataaar component and put it where you like it to be, for example

```jsx
import * as React from 'react'
import Avatar from 'avataaars'

export default class MyComponent extends React.Component {
  render () {
    return 
      <div>
        Your avatar:
        <Avatar
          style={{width: '100px', height: '100px'}}
          avatarStyle='Circle'
          topType='LongHairMiaWallace'
          accessoriesType='Prescription02'
          hairColor='BrownDark'
          facialHairType='Blank'
          clotheType='Hoodie'
          clotheColor='PastelBlue'
          eyeType='Happy'
          eyebrowType='Default'
          mouthType='Smile'
          skinColor='Light'
        />
      </div>
  }
}
```

To showcase individual pieces of the avatar you can use the Piece component, for example:

```jsx
import * as React from 'react'
import {Piece} from 'avataaars';

export default class MyComponent extends React.Component {
  render () {
    return 
      <div>
        <Piece pieceType="mouth" pieceSize="100" mouthType="Eating"/>
        <Piece pieceType="eyes" pieceSize="100" eyeType="Dizzy"/>
        <Piece pieceType="eyebrows" pieceSize="100" eyebrowType="RaisedExcited"/>
        <Piece pieceType="accessories" pieceSize="100" accessoriesType="Round"/>
        <Piece pieceType="top" pieceSize="100" topType="LongHairFro" hairColor="Red"/>
        <Piece pieceType="facialHair" pieceSize="100" facialHairType="BeardMajestic"/>
        <Piece pieceType="clothe" pieceSize="100" clotheType="Hoodie" clotheColor="Red"/>
        <Piece pieceType="graphics" pieceSize="100" graphicType="Skull" />
        <Piece pieceType="skin" pieceSize="100" skinColor="Brown" />
      </div>
  }
}
```

To explore avatar options and generate the React code, please use [Avataaars Generator](https://getavataaars.com/)

## Collect options

To build your own avatar editor, you may want to use lower level `Avatar` component along with `OptionContext`. For more details usage, please reference to source code of [avataaars-generator](https://github.com/fangpenlin/avataaars-geneator), see how it uses `OptionContext` to collection available options.
npm package: @rkendel/lastmile-auth-kit
Description: React components for integrating with the Last Mile platform.
Author: Your Name
Latest version: 1.0.0

# Last Mile Auth Kit

This kit provides the necessary components to integrate your Last Mile instance's authentication and role-based access control (RBAC) into any React application.

## Installation

```bash
npm install @your-npm-username/lastmile-auth-kit
```

Remember to replace `@your-npm-username` with your actual NPM username.

## Setup

1.  **Set Environment Variable:** Create a `.env.local` file in the root of your project (if you don't have one already) and add the following line. This must point to your deployed Last Mile instance.

    ```
    NEXT_PUBLIC_LASTMILE_URL=https://your-last-mile-instance.com
    ```

2.  **Wrap Your App:** In your main application file (e.g., `_app.js` or `App.js`), wrap your entire application with the `AuthProvider`.

    ```jsx
    import { AuthProvider } from '@your-npm-username/lastmile-auth-kit';

    function MyApp({ Component, pageProps }) {
      return (
        <AuthProvider>
          <Component {...pageProps} />
        </AuthProvider>
      );
    }

    export default MyApp;
    ```

## Usage

### Rendering an Embed

Use the `<Embed />` component to render any component you've created in your Last Mile dashboard. Just pass the unique token for that embed.

```jsx
import { Embed } from '@your-npm-username/lastmile-auth-kit';

function LoginPage() {
  return (
    <div>
      <h1>Login</h1>
      <Embed token="your-auth-embed-token-here" />
    </div>
  );
}
```

### Accessing Auth State

Use the `useAuth` hook in any component to access the user's session, permissions, and loading state.

```jsx
import { useAuth } from '@your-npm-username/lastmile-auth-kit';

function UserProfile() {
  const { isAuthenticated, user, loading } = useAuth();

  if (loading) return <p>Loading...</p>;
  if (!isAuthenticated) return <p>Please log in.</p>;

  return <h1>Welcome, {user.name || user.email}!</h1>;
}
```

### Permission-Based Rendering

Use the `<Can>` component to conditionally render UI elements based on the current user's permissions. The permissions are defined in your Last Mile dashboard.

```jsx
import { Can } from '@your-npm-username/lastmile-auth-kit';

function MyDashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      
      <Can permission="project:create">
        <button>Create New Project</button>
      </Can>

      <Can permission="admin:dashboard:view">
        <a href="/admin">Go to Admin Panel</a>
      </Can>
    </div>
  );
}
npm package: @rkesters/dependency-lint
Description: Lints package.json dependencies and devDependencies
Author: Charlie Rudolph
Latest version: 1.1.0

# dependency-lint
![CircleCI](https://img.shields.io/circleci/build/github/rkesters/dependency-lint)
![Libraries.io dependency status for latest release, scoped npm package](https://img.shields.io/librariesio/release/npm/@rkesters/dependency-lint)
![npm (scoped)](https://img.shields.io/npm/v/@rkesters/dependency-lint)

Lints your NPM `dependencies` and `devDependencies` reporting which node modules are
* **missing** and should be added to your `dependencies` or `devDependencies`
* **unused** and should be removed from your `dependencies` or `devDependencies`
* **mislabeled** and should be moved from `dependencies` to `devDependencies` or vice versa

## Installation

Supported on [Node.js](https://nodejs.org/en) versions 12, 14, 16

```
$ npm install dependency-lint
```

## Usage

```
$ dependency-lint
```

To automatically remove unused dependencies and move mislabeled dependencies:
```
$ dependency-lint --auto-correct
```

## How it works
`dependency-lint` compares the node modules listed in your `package.json` and
the node modules it determines are used. A node module is used if:

* it is required in a javascript file (or a file that transpiles to javascript)
* one of its executables is used in a script in your `package.json` or in a shell script

Since this does not cover all the possible ways that a node module can be used,
`dependency-lint` can be [configured](docs/configuration.md#ignoreerrors)
to ignore specific errors. Please create an
[issue](https://github.com/rkesters/dependency-lint/issues)
anytime you need to use this, so we can discuss new ways to determine if and
how a node module is used.

## Configuration
Please see [here](docs/configuration.md) for an explanation of all the options.
Custom configuration should be placed at `dependency-lint.yml` in your project directory.
You can create a configuration file by running
```
dependency-lint --generate-config
```
Any options not set in your configuration file will be given there default value.

## Formatters
Three formatters are available and can be switched between with the `--format` option
```
dependency-lint --format <format>
```

* `minimal` (default) - prints only the modules with errors
* `summary` - prints all modules
* `json` - prints JSON of the form `{dependencies, devDependencies}` where each is array of objects with the keys
  * `name` - name of the module
  * `files` - list of the files that require the module or execute the module
  * `scripts` - list of scripts in your `package.json` that execute the module
  * `error` - null or one of the following strings: "missing", "should be dependency", "should be dev dependency", "unused"
  * `errorIgnored` - if dependency lint has been configured to ignore this error.