open-index/open-npm huggingface dataset:
npm package: @softbase/string-sanitizer
Description: Sanitize strings by removing HTML, special characters, and extra whitespace.
Author: Hayashi Rui
Latest version: 1.0.5

# string-sanitizer

A lightweight utility to sanitize strings by removing HTML tags, special characters, and extra whitespace.

## Install

```bash
npm i @softbase/string-sanitizer
```

#Usage
```TypeScript
import { sanitize } from 'string-sanitizer';

console.log(sanitize("  Hello <b>world</b>! 😃  ")); // Hello world
```
npm package: @softbeat/erg-import-module
Description: Ergonode import page module
Author: softbeat
Latest version: 2.0.0


<p align="center">
  <a href="https://vuejs.org" rel="noopener noreferrer">
    <img width="300" src="https://ergonode.com/wp-content/themes/ergonode/assets/img/logo.svg" alt="Egronode logo">
  </a>
</p>
<p align="center">Ergonode import module</p>
<p align="center">
  <a href="https://github.com/softbeat/erg-import-module">
    <img alt="npm" src="https://img.shields.io/npm/v/@softbeat/erg-import-module">
  </a>
  <a href="https://github.com/softbeat/erg-import-module">
    <img alt="NPM" src="https://img.shields.io/npm/l/@softbeat/erg-import-module">
  </a>
</p>
<br>
npm package: @softbinatorsoftbinator/hardhat-gas-estimator
Description: Softbinator Hardhat TypeScript plugin for estimated cost for gas
Author: andreibadea20
Latest version: 0.0.3

# Softbinator Plugin Gas Estimator

A Hardhat plugin that estimate the deployment gas for contracts.

## What

This plugin will help you to estimate the cost of deployment for a contract, based on its size. It can return the estimated value of the deployment cost on several networks and display the value both in dollars and in the native currency of the network. This plugin also works with multiple contracts.

## Installation

To install this plugin use:

```bash
npm install --save-dev @softbinator/hardhat-gas-estimator hardhat-contract-sizer

```

Import the plugin in your `hardhat.config.js`:

```js
require("@softbinator/hardhat-gas-estimator");
```

Or if you are using TypeScript, in your `hardhat.config.ts`:

```ts
import "@softbinator/hardhat-gas-estimator";
```

Also, please read the documentation from hardhat-contract-sizer.

## Required plugins

- [hardhat-contract-sizer](https://github.com/ItsNickBarry/hardhat-contract-sizer#readme)

## Tasks

This plugin adds a task to estimate the deployment gas for contracts according to their size.

```
npx hardhat estimate-gas <sizeOfContracts>
```

Example:

```
npx hardhat estimate-gas 0.5
```

You can also specify the size of several contracts:
```
npx hardhat estimate-gas 5 2
```
In the example above, 5 is the size in KB of the first contract, and 2 is the size of the second.

You can specify the size of the contracts as a parameter for the task or you can configure your hardhat.config file according to the hardhat-contract-sizer documentation. By doing this, hardhat-contract-sizer will automatically generate size for your contracts and then our task will return the estimated cost for each of them.

Example without parameter:

```
npx hardhat estimate-gas
```

## Environment extensions

This plugin adds the function to estimate the deployment gas for your contracts to the Hardhat Runtime Environment.

```
hre.estimateGas(hre, contractSize?)
```

## Configuration

This plugin extends the HardhatUserConfig with a new object, named gasEstimator, with an optional `outputFile` field. You also have to add configuration from hardhat-contract-sizer if you want it to automatically calculate the size of the contracts.

This is an example of how to set it:

```js
const config: HardhatUserConfig = {
  gasEstimator: {
    outputFile: "./yourOutputFile.txt",
  },
};
```

## Usage

There are no additional steps you need to take for this plugin to work.

Install it and access the provided functions and the provided tasks through the Hardhat Runtime Environment anywhere you need it.
npm package: @softbind/hook-use-error
Description: `npm i @softbind/hook-use-error --save`
Author: Sebastian Sobociński
Latest version: 0.0.2

# useError

## Installation

`npm i @softbind/hook-use-error --save`

## API

### `useError()`

```js
import React, { useEffect } from "react";
import { useError } from "@softbind/hook-use-error";

class ErrorBoundary extends React.Component {
  state = { hasError: false }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

const Fetcher = ({ url }) => {
  const [dispatchError] = useError()

  useEffect(() => {
    fetch(url).catch(dispatchError)
  }, [])
  
  return (
	<span>Loading...</span>
  )
}

const App = ({ children }) => (
  <ErrorBoundary>
    <Fetcher url="https://google.pl" />
  </ErrorBoundary>
);
```
npm package: @softbind/hook-use-fetch
Description: `npm i @softbind/hook-use-fetch --save`
Author: Sebastian Sobociński
Latest version: 0.0.3

# useFetch

## Installation

`npm i @softbind/hook-use-fetch --save`

## API

### `useFetch(text)`

#### Arguments
- `url: String | () => Promise<any>`: url to api or function which need to return promise.
- `opt: Object`: you can pass all options that occur in [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request)

```js
import { useFetch } from "@softbind/hook-use-fetch";

const PageTemplate = () => {
  const { loading, result, cancel, invoke } = useFetch('http://api.im?query=Dog')

  if (loading) {
    return (
      <span>Loading...</span>
    )
  }

  return (
    <div>
      {result ? JSON.stringify(result), null, 2) : null}
      {loading && <button onClick={invoke}>Refresh</button>}
      {!loading && <button onClick={cancel}>Cancel</button>}
    </div>
  );
};
```
npm package: @softbind/hook-use-idle
Description: `npm i @softbind/hook-use-idle --save`
Author: Sebastian Sobociński
Latest version: 1.0.6

# React Hooks

## Installation

`npm i @softbind/hook-use-idle --save`

## API

### `useIdle(ref, types)`

#### Arguments

- `opt: Object`: opt is a Object that you can pass. All props is available from [activity-detector](https://github.com/tuenti/activity-detector#advanced-options)

#### Returns

- `idle: Boolean`: Value that indicate when user is idle.

```js
import { useIdle } from "@softbind/react-hooks";

const MyComponent = () => {
  const idle = useIdle({ timeToIdle: 1000 });

  return <div>Idle: {idle.toString()}</div>;
};
```
npm package: @softbind/hook-use-measure
Description: `npm i @softbind/hook-use-measure --save`
Author: Sebastian Sobociński
Latest version: 1.0.6

# useMeasure

## Installation

`npm i @softbind/hook-use-measure --save`

## API

### `useMeasure(ref, types)`

#### Arguments

- `ref: HTMLElement`: ref is a HTMLElement returned from useRef hook.
- `types: string | Array<string>`: types of info that you would like to fetch from dom. Available types: `['client', 'offset', 'scroll', 'bounds', 'margin']`

#### Returns

- `measure: Object`: Current measure info based on provided `types` arg.

```js
import { useMeasure } from "@softbind/react-hooks";

const MyComponent = () => {
  const ref = useRef(null);
  const { bounds } = useMeasure(ref, "bounds");

  console.log(bounds);

  return <div ref={ref}>Test</div>;
};
```
npm package: @softbind/hook-use-title
Description: `npm i @softbind/hook-use-title --save`
Author: Sebastian Sobociński
Latest version: 0.0.4

# useTitle

## Installation

`npm i @softbind/hook-use-title --save`

## API

### `useTitle(text)`

#### Arguments

- `text: String`: is a value that you would to see in tab title.

```js
import { useTitle } from "@softbind/hook-use-title";

const PageTemplate = ({ title, children }) => {
  useTitle(title)

  return (
    <div>
      <h1>{title}</h1> {children}
    </div>
  );
};
```
npm package: @softbind/react-hooks
Description: Collection of react hooks
Author: Sebastian Sobociński
Latest version: 0.0.3

# React Hooks

A set of reusable [React Hooks](https://reactjs.org/docs/hooks-reference.html#usestate).

>Hooks are a new feature proposal that lets you use state and other React features without writing a class. They’re currently in React v16.7.0-alpha and being discussed in an open RFC.

## Installation
`npm i @softbind/react-hooks --save`

## API

### `useMeasure(ref, types)`
#### Arguments
- `ref: HTMLElement`: ref is a HTMLElement returned from useRef hook.
- `types: string | Array<string>`: types of info that you would like to fetch from dom. Available types: `['client', 'offset', 'scroll', 'bounds', 'margin']`
#### Returns
- `measure: Object`: Current measure info based on provided `types` arg.
```js
import { useMeasure } from '@softbind/react-hooks'

const MyComponent = () => {
  const ref = useRef(null)
  const { bounds } = useMeasure(ref, 'bounds')

  console.log(bounds)

  return (
    <div ref={ref}>Test</div>
  )
}
```
npm package: @softbits/angular
Description: This is an example repo of building plugins.
Latest version: 1.0.2

# stencil-ds-angular-template

This is an example repo of building plugins.

## Step 1.

- Update the `package.json` to have the correct package name for this repo.
- Replace `component-library` under `dependencies` with your core stencil package name.

## Step 2.

- Build your core stencil package.

## Step 3.

- Update `src/component-library-module.ts`.
  - You will need to import all of your components from `./directives/proxies`. Currently the file states `DemoComponent` as the only import. This will be replaced with the entire list.
  -  Then update the `DECLARATIONS` const array to also list out all of the component names. It also currently contains `DemoComponent` as the only item, but this will need to be replaced with the entire list.

## Step 4.

- Run build on this package.
npm package: @softboxlab/eslint-config-gandalf-lint-node
Description: Your bad Node code shall not pass
Author: Lucas Vilaboim
Latest version: 0.2.2

![npm](https://img.shields.io/npm/v/@softboxlab/eslint-config-gandalf-lint-node)
![build](https://img.shields.io/travis/SoftboxLab/gandalf-lint-node)
![size](https://img.shields.io/bundlephobia/min/@softboxlab/eslint-config-gandalf-lint-node)
![dependencies](https://img.shields.io/david/SoftboxLab/gandalf-lint-node)
![GitHub](https://img.shields.io/github/license/softboxlab/gandalf-lint-node)

# gandalf-lint-node

<div align="center">
	<img src="https://media.giphy.com/media/8abAbOrQ9rvLG/giphy.gif" /><br/>
  Bad Node.js Code Shall Not Pass
</div>

## Install
Install the most powerful linter of the middle-earth (and its dependencies):

Dependencies via NPM:
```bash
npm install --save-dev @softboxlab/eslint-config-gandalf-lint-node eslint
```

or via yarn:
```bash
yarn add --dev @softboxlab/eslint-config-gandalf-lint-node eslint
```

## Configure
Call the white wizard by creating a `.eslintrc` file on your root project and writing in it:
```javascript
{
    "extends": "@softboxlab/eslint-config-gandalf-lint-node"
}
```

Remember to add the `eslint` plugin on your favorite IDE, like this one: [ESLint for VSCode](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

## Usage
If you want you can create a script on your `package.json` file like so:
```json
"scripts": {
  "glint": "./node_modules/.bin/eslint ./{YOUR_PROJECT}/*.js"
}
```

And use your magic script for shall not pass any bad code:
```bash
npm run glint
```

or using yarn:

```bash
yarn glint
```

## Autorun? Automatic lint?

**If you don't fell like creating any scripts, feel free to have your files linted on the fly by your IDE (did you remember to install the `eslint` plugin on your IDE?)**



# License

The MIT License (MIT)

[Copyright (c) Feross Aboukhadijeh](https://github.com/standard/eslint-config-standard)

[Copyright (c) 2012 Airbnb](https://github.com/airbnb/javascript)

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

---

This project licence is also MIT.
npm package: @softboxlab/eslint-config-gandalf-lint-react
Description: Your bad react code shall not pass
Author: Pablo Henrique Penha Silva
Latest version: 2.0.0

![npm](https://img.shields.io/npm/v/@softboxlab/eslint-config-gandalf-lint-react)
![build](https://img.shields.io/travis/SoftboxLab/gandalf-lint-react)
![size](https://img.shields.io/bundlephobia/min/@softboxlab/eslint-config-gandalf-lint-react)
![dependencies](https://img.shields.io/david/SoftboxLab/gandalf-lint-react)
![GitHub](https://img.shields.io/github/license/softboxlab/gandalf-lint-react)

# gandalf-lint-react

<div align="center">
	<img src="https://media.giphy.com/media/8abAbOrQ9rvLG/giphy.gif" /><br/>
  Bad React Code Shall Not Pass
</div>

## Install
Install the most powerful linter of the middle-earth (and its dependencies):

Dependencies via NPM:
```bash
npm install --save-dev @softboxlab/eslint-config-gandalf-lint-react eslint
```

or via yarn:
```bash
yarn add --dev @softboxlab/eslint-config-gandalf-lint-react eslint
```

## Configure
Call the white wizard by creating a `.eslintrc` file on your root project and writing in it:
```javascript
{
    "extends": "@softboxlab/eslint-config-gandalf-lint-react"
}
```

Remember to add the `eslint` plugin on your favorite IDE, like this one: [ESLint for VSCode](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

## Usage
If you want you can create a script on your `package.json` file like so:
```json
"scripts": {
  "glint": "./node_modules/.bin/eslint ./{YOUR_PROJECT}/*.js"
}
```

And use your magic script for shall not pass any bad code:
```bash
npm run glint
```

or using yarn:

```bash
yarn glint
```

## Autorun? Automatic lint?

**If you don't fell like creating any scripts, feel free to have your files linted on the fly by your IDE (did you remember to install the `eslint` plugin on your IDE?)**



# License

The MIT License (MIT)

[Copyright (c) Feross Aboukhadijeh](https://github.com/standard/eslint-config-standard)

[Copyright (c) 2012 Airbnb](https://github.com/airbnb/javascript)

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

---

This project licence is also MIT.
npm package: @softboxlab/moo-cli
Description: A MOOvelous CLI
Author: Alex Bruno
Latest version: 0.8.1

# moo-cli

A MOOvelous CLI.

Its purpose is to standardize creation of new projects, components and resources by using solid patterns and proxying other CLIs with preset configs.

## Get started

### Using npx

`npx -p @softboxlab/moo-cli moo [command] [options]`

### Local

`npm i -g @softboxlab/moo-cli`

or

`yarn global add @softboxlab/moo-cli`

Now you can run it like this:

`moo-cli [command] [options]`

Or just:

`moo [command] [options]`

---

### Commands

`moo arch`: creates a new project

`moo comp [options] <component_name>`: creates a new component inside your new project. The options are:

Name | Description
--- | ---
`--vue` or `-v` | Choose Vue as the framework for your component
`--react` or `-r` | Choose React as the framework for your component
`--dest` or `-d` | Choose your component's directory - *default: `src/components`*
`--func` or `-f` | Make your component functional - *only works with React*
`--flux` or `-x` | Add Vuex/Redux functions - *only works with React*
`--test` or `-t` | Add tests to your component
`--airbnb` or `-a` | Add [Airbnb JS Styleguide](https://github.com/airbnb/javascript) rules
`--clean` | Create a clean component - *only works with React Class components*
`--ts` | Add TypeScript to your component

---

To know what commands/options are available, just run it with no arguments or ask for help, like this:

`moo --help` or just `moo -h`

## How to contribute

Build a `moo-cli` version

`yarn build` or `npm run build`

Create a `link` inside `dist` folder

`yarn link` or `npm link`

Install `moo-cli` in some project

`yarn add @softbox/moo-cli` or `npm i @softbox/moo-cli`

Link `moo-cli` in your project

`yarn link "@softboxlab/moo-cli"` or `npm link "@softboxlab/moo-cli"`

Then run your linked `moo-cli`

`moo -h`

`npx moo <COMMAND>` or `./node_modules/.bin/moo <COMMAND>`

### Using boilerplates in your project

We have some boilerplates that can facilitate the development of your application.

### React

#### Juggernaut

[Repository](https://github.com/SoftboxLab/juggernaut)