open-index/open-npm huggingface dataset:
npm package: @shelf/react-outside-click
Description: React library for handling outside clicks of a specified element
Author: Andrii Butsa
Latest version: 0.1.4

# @shelf/react-outside-click

React library for handling outside clicks of a specified element.

## Installation

Install the library using npm:

```shell
$ npm install @shelf/react-outside-click
```

Install the library using yarn:

```shell
$ yarn add @shelf/react-outside-click
```

## Usage
### ClickOutsideProvider
`ClickOutsideProvider` is a component that wraps its children and detects clicks outside of its container element.

```js
import { ClickOutsideProvider } from '@shelf/react-outside-click';

const Component = () => {
  const onOutsideClick = () => {
    console.log('Clicked outside')
  };

  return (
    <ClickOutsideProvider onOutsideClick={onOutsideClick}>
      <span>Shelf.io</span>
    </ClickOutsideProvider>
  );
};
```

#### Props

**onOutsideClick**

Type: `function  (required)`

A function that will be called when an outside click is detected.

**disabled**

Type: `boolean  (optional)`

If set to true, the outside click detection will be disabled.

**mouseEvent**

Type: `string  (optional)`

The mouse event to listen for. Defaults to 'mousedown'

**listenerOptions**

Type: `boolean | AddEventListenerOptions  (optional)`

Additional options for the event listener. By default, it uses capture phase.This behavior ensures that the click outside event is captured before any click events on the descendants, even if stopPropagation is used.
See https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture



### useClickOutside
`useClickOutside` is a custom hook that attaches an outside click event listener to a specified element.

```js
import { useRef } from 'react'
import { useClickOutside } from '@shelf/react-outside-click';

const Component() {
  const ref = useRef(null)

  const handleClickOutside = () => {
    console.log('Clicked outside')
  }

  useOnClickOutside(ref, handleClickOutside, {mouseEvent: 'mouseup'})

  return <span ref={ref}>Shelf.io</span>
}
```

#### Props

**ref**

Type: `RefObject<T>  (required)`

A ref object that points to the target element.

**onOutsideClick**

Type: `function  (required)`

A function that will be called when an outside click is detected.

**options:** `(optional)`

> **disabled**

Type: `boolean  (optional)`

If set to true, the outside click detection will be disabled.

> **mouseEvent**

Type: `string  (optional)`

The mouse event to listen for. Defaults to 'mousedown'

> **listenerOptions**

Type: `boolean | AddEventListenerOptions  (optional)`

Additional options for the event listener. By default, it uses capture phase.This behavior ensures that the click outside event is captured before any click events on the descendants, even if stopPropagation is used.
See https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture

## Publish

```sh
$ git checkout master
$ yarn version
$ yarn publish
$ git push origin master --tags
```

## License

MIT © [Shelf](https://shelf.io)
npm package: @shelf/serverless-simplify-default-exec-role-plugin
Description: serverless-simplify-default-exec-role-plugin
Author: Vlad Holubiev
Latest version: 0.0.2

# serverless-simplify-default-exec-role-plugin

> Fixes "IamRoleLambdaExecution - Maximum policy size of 10240 bytes exceeded" error

This plugin works by modifying the Cloudformation stack before deployment.

It searches for the `IamRoleLambdaExecution` resource and modifies the only policy attached to this role.

## Install

```
$ yarn add --dev @shelf/serverless-simplify-default-exec-role-plugin
```

## Usage

In your `serverless.yml` file:

```yaml
plugins:
  - '@shelf/serverless-simplify-default-exec-role-plugin'
```

## Explanation

By default, Serverless framework creates such role:

```json5
{
  Effect: "Allow",
  Action: ["logs:CreateLogStream", "logs:CreateLogGroup"],
  Resource: [
    {
      "Fn::Sub": "arn:${AWS::Partition}:logs:${AWS::Region}:${AWS::AccountId}:log-group:/aws/lambda/production-users-createUser:*",
    },
    {
      "Fn::Sub": "arn:${AWS::Partition}:logs:${AWS::Region}:${AWS::AccountId}:log-group:/aws/lambda/production-users-updateUser:*",
    },
    {
      "Fn::Sub": "arn:${AWS::Partition}:logs:${AWS::Region}:${AWS::AccountId}:log-group:/aws/lambda/production-users-deleteUser:*",
    },
    // dozens of identical lines
  ],
}
```

When you reach a certain project size, deployment will fail since this role will exceed 10 KB limit.

This plugin simplifies the default execution role to smth like this:

```json5
{
  Effect: "Allow",
  Action: ["logs:CreateLogStream", "logs:CreateLogGroup"],
  Resource: [
    {
      "Fn::Sub": "arn:${AWS::Partition}:logs:${AWS::Region}:${AWS::AccountId}:log-group:*",
    },
  ],
}
```

## Publish

```sh
$ git checkout master
$ yarn version
$ yarn publish
$ git push origin master --tags
```

## License

MIT © [Shelf](https://shelf.io)
npm package: @shelf/stylelint-config
Description: Shelf's reusable stylelint config. Covering CSS, SCSS, HTML, React inline styles, and Styled Components. Follows best practices and streamlines your development process.
Author: Andrii Myroniuk
Latest version: 3.0.1

# @shelf/stylelint-config [![CircleCI](https://circleci.com/gh/shelfio/stylelint-config/tree/master.svg?style=svg&circle-token=fb96286fdf74908dd97ef9ae569cd68eb9a2ccd5)](https://circleci.com/gh/shelfio/stylelint-config/tree/master)![](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)

> Shelf's reusable stylelint config provides a comprehensive and efficient solution for ensuring consistency in your CSS, SCSS, HTML, React inline styles, and Styled Components. This config covers best practices for styling and helps you maintain a consistent codebase for your projects. With Shelf's reusable stylelint config, you can streamline your workflow and avoid common styling issues, making your development process smoother and more efficient.

## Install

```
$ yarn add @shelf/stylelint-config
```

## Usage

```js
{
  extends: '@shelf/stylelint-config'
}
```

## Publish

```sh
$ git checkout master
$ yarn version
$ yarn publish
$ git push origin master --tags
```

## License

MIT © [Shelf](https://shelf.io)
npm package: @shelf/tsconfig
Description: tsconfig
Author: Vlad Holubiev
Latest version: 0.2.0

# @shelf/tsconfig

## Install

```
$ pnpm add -D @shelf/tsconfig
```

## Usage

In your `tsconfig.json`:

### Backend

```json
{
  "extends": "@shelf/tsconfig/backend",
  "exclude": ["node_modules"],
  "include": ["src"]
}
```

### Frontend

```json
{
  "extends": "@shelf/tsconfig/frontend",
  "exclude": ["node_modules"],
  "include": ["src"]
}
```

## Publish

```sh
$ git checkout master
$ pnpx np
```

## License

MIT © [Shelf](https://shelf.io)
npm package: @shelf/winston-datadog-logs-transport
Description: A Datadog Logs transport for Winston
Author: Vlad Holubiev
Latest version: 2.0.1

# winston-datadog-logs-transport ![](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)

> Winston transport for Datadog Logs (not events)

There are 3 winston transports for Datadog on NPM:
[1](https://github.com/sparkida/winston-datadog),
[2](https://github.com/kioannou/winston-datadog-logger),
[3](https://github.com/outwithreality/winston-datadog-transport).

**All of them send data to [Datadog Events](https://docs.datadoghq.com/getting_started/#events) instead of [Datadog Logs](https://docs.datadoghq.com/logs/?tab=usregion)**.
This package actually is a transport for Datadog Logs, not Events.

## Install

```
$ yarn add @shelf/winston-datadog-logs-transport
```

## Usage

```javascript
import winston from 'winston';
import DatadogTransport from '@shelf/winston-datadog-logs-transport';

const logger = winston.createLogger({
  transports: [
    new DatadogTransport({
      apiKey: process.env.DD_API_KEY, // Datadog API key
      port: 443, // optional port, 443 is for EU region secure port
      host: 'tcp-intake.logs.datadoghq.eu', // optinal host, 'tcp-intake.logs.datadoghq.eu' is for EU region host
      // optional metadata which will be merged with every log message
      metadata: {
        ddsource: 'lambda',
        environment: 'prod'
      }
    })
  ]
});

logger.info('Hey there', {thisIsMy: 'metadata'});
```

## Publish

```sh
$ git checkout master
$ yarn version
$ yarn publish
$ git push origin master --tags
```

## License

MIT © [Shelf](https://shelf.io)