open-index/open-npm huggingface dataset:
npm package: @infrhq/react
Description: React components & bindings for the Infr Ads API
Author: infr
Latest version: 1.0.6

# Infr React Components
![Infr - API for Better Ads](https://res.cloudinary.com/dcwz20wdd/image/upload/v1689086033/Infr_-_API_for_Better_Ads_ajx7wn.jpg)

A set of React components and bindings for the Infr API for displaying ads in your React applications.

## Installation
To install the package, you can use either npm or yarn:

```bash
npm install @infrhq/react
```

```bash
yarn add @infrhq/react
```

## Usage

### Card
Import the InfrAdCard component from @infrhq/react in your application:

```jsx
import { InfrAdCard } from '@infrhq/react';
```

You can then use it in your components like this:

```jsx
<InfrAdCard publicKey={publicKey} backdrop={backdrop} systemMessage={systemMessage} theme={backgroundColor} />
```

Where:
- **publicKey** - Your Infr API's public key.
- **backdrop** - The backdrop for the ad.
- **systemMessage** - The system message for the ad.
- **theme** - The background color for the ad card. Can be "light", "dark" or any custom color code in hex.

**Note**: All of the above properties are optional, but you'd typically want to provide at least the publicKey for your Infr API.

Here's a functional example you can use directly:

```jsx

function App() {
  return (
    <div>
      <InfrAdCard publicKey="test" backdrop="Travel, vacations, hotels"/>
    </div>
  );
}
```
In this example, an ad card from Infr is displayed with a light background color.

## Development
For developing this package:

- Clone the repository
- Install the dependencies with npm install
- Use npm run build to compile the TypeScript/Babel code

## Bugs
For any bugs, please raise an issue in the GitHub repository.

## License
This package is released under the MIT license. See **LICENSE** for more details.

## Contributing
We welcome contributions! Please see our **CONTRIBUTING** guide for more details.

## Questions
For any questions or suggestions, please use the GitHub issues page.

## Links
- [Infr](https://infrhq.com/)
- [Docs](https://docs.infrhq.com/)
- [GitHub Repository](https://github.com/InfrHQ/infr-react)
npm package: @infrontlabs/react-spacing
Description: Shorthand responsive margin and padding utility component to modify an element’s spacing.
Author: Colyn Brown
Latest version: 0.1.0

# react-spacing

[![NPM](https://img.shields.io/npm/v/@infrontlabs/react-spacing.svg)](https://www.npmjs.com/package/@infrontlabs/react-spacing)


Shorthand responsive margin and padding utility component to modify an element’s spacing.

```
import Spacing from '@infrontlabs/react-spacing`

<Spacing pb={3}>Hello</Spacing>
```

### Advanced usage

Change the padding or margin on any element

```
import Spacing from '@infrontlabs/react-spacing`

<Spacing as="h1" pb={3}>Hello</Spacing>
```

With Spacing Higher Order Component

```
import Spacing, { withSpacing } from '@infrontlabs/react-spacing`

const Heading1 = withSpacing("h1")

<Heading1 pb={3}>Hello</Heading1>
```

### Default Props

Each prop can have a value between 0-5 to provide relative spacing

```
p: null,    // padding
m: null,    // margin
pt: null,   // padding-top
pr: null,   // padding-right
pb: null,   // padding-bottom
pl: null,   // padding-left
mt: null,   // margin-top
mr: null,   // margin-right
mb: null,   // margin-bottom
ml: null    // margin-left
```
npm package: @infte/components
Description: A react library developed with dumi
Latest version: 0.0.25

# infte-components

[![NPM version](https://img.shields.io/npm/v/infte-components.svg?style=flat)](https://npmjs.org/package/infte-components)
[![NPM downloads](http://img.shields.io/npm/dm/infte-components.svg?style=flat)](https://npmjs.org/package/infte-components)

A react library developed with dumi

## Usage

TODO

## Options

TODO

## Development

```bash
# install dependencies
$ yarn install

# develop library by docs demo
$ yarn start

# build library source code
$ yarn run build

# build library source code in watch mode
$ yarn run build:watch

# build docs
$ yarn run docs:build

# check your project for potential problems
$ yarn run doctor
```

## LICENSE

MIT

远程仓库的 master 分支下有了 docs-dist 这个文件夹，里面就是打包编译之后的文件。我们接着在终端输入以下命令：

# From 1.0.0 -> 1.0.1

npm version patch

# From 1.0.1 -> 1.1.0

npm version minor

# From 1.1.0 -> 2.0.0

npm version major

npm publish --access public 发包

npm login 登录

运行 npm unpublish 包名 --force 命令，即可从 npm 删除已发布的包。

shaoping ggshaoping@gmail.com

/\*\* \*/

<!-- scripts脚本命令 -->

<!-- 方法一：根据docs-dist 创建gh-pages分支。 -->

1. 打包
   npm run build

2. 提交代码到 github 远程仓库
   git add .
   git commit -m "test gh-pages"
   git push origin master
3. 生成 gh-pages 分支
   git subtree push --prefix=docs-dist origin gh-pages

<!-- 方法二：通关gh-pages创建分支 -->

"deploy": "gh-pages -d docs-dist", // 上传到 githunPage
"docs:build": "dumi build", // 打包文档
"update docs": "npm run docs:build && npm run deploy" // 打包文档并且更新 github 页面

方法一创建分支，方法二更新代码
npm package: @inftechsol/react-slate-wysiwyg
Description: This is a wysiwyg editor with Slate js in React
Author: Tóth Gergő
Latest version: 1.9.6

# @inftechsol/react-slate-wysiwyg

## About component

It is a simle Wysiwyg component using Slate (slate-react) with some basic formatting.

## Compatibility

This component use [slate-react v0.95.0](https://docs.slatejs.org/ 'slate-react v0.95.0'), [react v18.2.0](https://www.npmjs.com/package/react 'React v18.2.0'), [react-dom v18.2.0](https://www.npmjs.com/package/react-dom 'React DOM v18.2.0'). You should use FontAwesome 6 for the button icons, and Boostrap 5.

## Installation

npm i @inftechsol/react-slate-wysiwyg

## Basic usage

```jsx
import React from 'react';
import { Wysiwyg, initialValue, Editor, setEditorValue } from '@inftechsol/react-slate-wysiwyg';

const App = () => {
    const initVal = initialValue || [ type: 'align-left', style: {{ fontSize: '17px', textALign: 'left' }} ];
    const [value, setValue] = useState(initVal);

    const onChange = (value) => {
        setValue(value);
    }
    const getDataFromServer = () => {
        fetch('https://example.com/api/getData', { method: 'GET' }).then((value) => {
            setEditorValue(value, Editor);
        })
    }

    return (
        <div>
            <div>
                <button onClick={getDataFromServer}>Get Data</button>
            </div>
            <div>
                <Wysiwyg onChange={onChange} value={value} />
            </div>
        </div>
    );
};

export default App;
```

## Properties

    - Wysiwyg properties:
        - value: CustomElement[] (required) - see initialValue or Slate documents,
        - onChange: function (required)
        - className: string (optional) // default: 'react-slate-wysiwyg',
        - id: (optional) string | number
        - colors: object (optional) - Formatting buttons font color // default:  { normal: { activeColor: '#0f0', color: '#000' }, reverse: { activeColor: 'black', color: '#0f0' } },
        - reserved: (optional) boolean - colors is reserved // default false,
        - placeholder: (optional) // default: 'Ide írjon szöveget...',
        - uploadType: (optional) 'link' || 'pc' // default 'link' - PC upload is not working yet,
        - customButtons: (optional) Array - add custom Text(format) - [{ format: string, text: string }] - [{ format: ${variable}, text: ${variable} }]
npm package: @inftechsol/reactstrap-form-validation
Description: ## About component
Author: Gergő Tóth
Latest version: 0.3.9

# @inftechsol/reactstrap-form-validation

## About component

It is a simle form component with validator. This component's base is reactstrap Form, and Inputs and all props comes from there.

## Compatibility

This component use [React v18.1.0](https://www.npmjs.com/package/react 'React v18.1.0'), [react-dom v18.1.0](https://www.npmjs.com/package/react-dom 'React DOM v18.1.0'),
[Bootstrap v5.1.3](https://www.npmjs.com/package/bootstrap 'Bootstrap v5.1.3') and [reactstrap v9.0.2](https://www.npmjs.com/package/reactstrap 'Reactstrap v9.0.2').

## Installation

npm i @inftechsol/reactstrap-form-validation

## Basic usage

```jsx
import { useState } from 'react';
import { RVForm, RVFormGroup, RVInput, RVFormFeedback } from '@inftechsol/reactstrap-form-validation';
import { Button, Label } from 'reactstrap';

const App = () => {
    const defaultObj = {
        address: '',
        name: '',
        age: ''
    };

    const style = {
        padding: '20px'
    };

    const [obj, setObj] = useState(defaultObj);

    const handleInputChange = (e) => {
        const { target } = e;
        const { name, type, checked, value } = target;
        const newValue = type === 'checkbox' ? checked : value;

        setObj({
            ...obj,
            [name]: newValue
        });
    };

    const onSubmit = (e) => {
        e.preventDefault();
        console.log('Event: ', e);
    };

    return (
        <div style={style}>
            <RVForm onSubmit={onSubmit}>
                <RVFormGroup>
                    <Label>Address:</Label>
                    <RVInput required name="address" value={obj.address} onChange={handleInputChange} />
                    <RVFormFeedback>This is soooo good...</RVFormFeedback>
                </RVFormGroup>
                <RVFormGroup>
                    <Label>Name: </Label>
                    <RVInput required name="name" value={obj.name} onChange={handleInputChange} />
                    <RVFormFeedback>This field is required!</RVFormFeedback>
                </RVFormGroup>
                <RVFormGroup>
                    <Label>Age: </Label>
                    <RVInput required type="number" name="age" value={obj.age} onChange={handleInputChange} />
                    <RVFormFeedback>This field is required!</RVFormFeedback>
                </RVFormGroup>
                <Button type="submit">Send</Button>
            </RVForm>
        </div>
    );
};

export default App;
```

## Properties

All comes from reactstrap Forms and Inputs except RVForm onSubmitFrom. See
[Reactstrap form and input props](https://reactstrap.github.io/?path=/docs/components-forms--props 'Reactstrap Form and input props')
npm package: @infurnia/nodemailer
Description: Easy as cake e-mail sending from your Node.js applications
Author: Andris Reinman
Latest version: 7.0.0

# Nodemailer

[![Nodemailer](https://raw.githubusercontent.com/nodemailer/nodemailer/master/assets/nm_logo_200x136.png)](https://nodemailer.com/about/)

Send e-mails from Node.js – easy as cake! 🍰✉️

[![NPM](https://nodei.co/npm/nodemailer.png?downloads=true&downloadRank=true&stars=true)](https://nodemailer.com/about/)

See [nodemailer.com](https://nodemailer.com/) for documentation and terms.

## Having an issue?

> Nodemailer supports all Node.js versions starting from Node.js@v6.0.0. Existing test suite does not support such old Node.js versions so all features are not actually tested. From time to time some regression bugs might occur because of this.

#### First review the docs

Documentation for Nodemailer can be found at [nodemailer.com](https://nodemailer.com/about/).

#### Nodemailer throws a SyntaxError for "..."

You are using older Node.js version than v6.0. Upgrade Node.js to get support for the spread operator.

#### I'm having issues with Gmail

Gmail either works well or it does not work at all. It is probably easier to switch to an alternative service instead of fixing issues with Gmail. If Gmail does not work for you then don't use it. Read more about it [here](https://nodemailer.com/usage/using-gmail/).

#### I get ETIMEDOUT errors

Check your firewall settings. Timeout usually occurs when you try to open a connection to a port that is firewalled either on the server or on your machine.

#### I get TLS errors

-   If you are running the code in your own machine, then check your antivirus settings. Antiviruses often mess around with email ports usage. Node.js might not recognize the MITM cert your antivirus is using.
-   Latest Node versions allow only TLS versions 1.2 and higher, some servers might still use TLS 1.1 or lower. Check Node.js docs how to get correct TLS support for your app.

#### I have a different problem

If you are having issues with Nodemailer, then the best way to find help would be [Stack Overflow](https://stackoverflow.com/search?q=nodemailer) or revisit the [docs](https://nodemailer.com/about/).

### License

Nodemailer is licensed under the **MIT license**

---

The Nodemailer logo was designed by [Sven Kristjansen](https://www.behance.net/kristjansen).
npm package: @infurnia/sticky
Description: An experimental fork of the @socket.io/sticky, needed for debugging some issues
Author: Damien Arrachequesne
Latest version: 1.0.37

# Sticky sessions for Socket.IO

A simple and performant way to use [Socket.IO](https://socket.io/) within a [cluster](http://nodejs.org/docs/latest/api/cluster.html).

Unlike other packages like [sticky-session](https://github.com/indutny/sticky-session), the routing is based on the session ID (the `sid` query parameter).

![Cluster diagram](./assets/socket.io-cluster.png)

See also:

- [sticky-session](https://github.com/indutny/sticky-session) (routing based on `connection.remoteAddress`)
- [socketio-sticky-session](https://github.com/wzrdtales/socket-io-sticky-session) (routing based on the `x-forwarded-for` header)

**Table of contents**

- [Installation](#installation)
- [Usage](#usage)
- [How it works](#how-it-works)
- [Notes](#notes)
- [License](#license)

## Installation

```
npm install @socket.io/sticky
```

## Usage

```js
const cluster = require("cluster");
const http = require("http");
const { Server } = require("socket.io");
const numCPUs = require("os").cpus().length;
const { setupMaster, setupWorker } = require("@socket.io/sticky");
const { createAdapter, setupPrimary } = require("@socket.io/cluster-adapter");

if (cluster.isMaster) {
  console.log(`Master ${process.pid} is running`);

  const httpServer = http.createServer();

  setupMaster(httpServer, {
    loadBalancingMethod: "least-connection", // either "random", "round-robin" or "least-connection"
  });

  setupPrimary();

  httpServer.listen(3000);

  for (let i = 0; i < numCPUs; i++) {
    cluster.fork();
  }

  cluster.on("exit", (worker) => {
    console.log(`Worker ${worker.process.pid} died`);
    cluster.fork();
  });
} else {
  console.log(`Worker ${process.pid} started`);

  const httpServer = http.createServer();
  const io = new Server(httpServer);
  io.adapter(createAdapter());
  setupWorker(io);

  io.on("connection", (socket) => {
    /* ... */
  });
}
```

## How it works

The first HTTP request (without `sid` query parameter) is forwarded to a random worker (based on the `loadBalancingMethod` option).

The underlying Engine.IO server creates a new session and emits a `connection` event with the session ID. The worker sends this session ID to the master, which stores the relationship between the worker ID and the session ID.

For subsequent requests, the `sid` query parameter is extracted by the master process, which then forwards the handle to the right worker.

## Notes

- this package is not needed if you only use WebSockets (which might be a sensible choice as of 2021)

```js
// client-side
const socket = io({
  transports: ["websocket"] // HTTP long-polling is disabled
});
```

- in a multi-server setup, you will need to use another adapter, like the [Redis adapter](https://socket.io/docs/v4/redis-adapter/)

![Cluster diagram with Redis](./assets/socket.io-cluster-redis.png)

- this module is not compatible with an HTTPS server

For more information, please see [this issue](https://github.com/socketio/socket.io-sticky/issues/3).

## License

MIT
npm package: @infuse/eslint-config
Description: Eslint rules for the Infuse organization
Author: Jascha Ephraim
Latest version: 2.0.4

# Infuse Eslint Config

## Installation

```shell
yarn add -D eslint @infuse/eslint-config
```

## Usage

When working on a React project, for example, create `.eslintrc.json` at the root of your project with the contents:

```json
{ "extends": ["@infuse/eslint-config/react"] }
```

In your test subdirectory, create another `.eslintrc.json` with the contents:

```json
{ "extends": ["@infuse/eslint-config/jest"] }
```

The available configs are:

- `node`
- `react`
- `react-native`
- `jest`
- `mocha`
- `typescript`

## Peer Dependencies

Dependencies of ESLint configs are listed in `package.json` under `peerDependencies`. For some background, see:

- https://github.com/eslint/eslint/issues/2518
- https://github.com/eslint/rfcs/pull/5

The peer dependencies listed in this project's `package.json` are the minimum required to make all of the configs work. You will only ever need a subset of them, depending on the config you are using.

This project's `devDependencies` are those required to run the base config, because that config is used to lint the project itself. Because they are required by the base config, it might be helpful to begin by installing those `peerDependencies` that are also listed as `devDependencies`, then continue installing `peerDependencies` as required by any ESLint errors.

## Contribution

If you find yourself making an exception to these rules consistently or think that any others should be standardized, please open an issue or submit a PR. Please maintain separation of environments and proper inheritance.

All configs must be kept at the project root for nice imports (`@infuse/eslint-config/node`, etc).

To generate json specifying all rules being applied to a particular file, run:

```shell
npx eslint --print-config <file>
```