open-index/open-npm huggingface dataset:
npm package: @funboxteam/eslint-config
Description: ESLint rules that follow our style guide
Author: FunBox LLC
Latest version: 7.4.0

# @funboxteam/eslint-config

[![npm](https://img.shields.io/npm/v/@funboxteam/eslint-config.svg)](https://www.npmjs.com/package/@funboxteam/eslint-config)

ESLint rules that follow our style guide.

Based on the well-known [Airbnb JS Style Guide](https://github.com/airbnb/javascript).

[По-русски](./README.ru.md)

## Installation

```bash
npm install --save-dev @funboxteam/eslint-config
``` 

## Usage

Include into a project config using flag [-c](http://eslint.org/docs/user-guide/command-line-interface#-c---config),
and pass paths for files as arguments:

```sh
eslint -c node_modules/@funboxteam/eslint-config/.eslintrc.js src/app src/sandbox
```

To lint tests files use the separated config:

```sh 
eslint -c node_modules/@funboxteam/eslint-config/.eslintrc.tests.js src/tests
```

Also you can create your own `.eslintrc.js` and extend this config there: 

```js
module.exports = {
  extends: '@funboxteam',
  env: {
    browser: true
  },
  globals: {
    fetcher: 'readonly',
    System: 'readonly',
    moment: 'readonly'
  },
  settings: {
    'import/resolver': {
      webpack: {
        config: 'config/webpack.config.dev.js',
      }
    }
  },
}
```

Same for tests' config:

```
module.exports = {
  extends: '@funboxteam/eslint-config/tests',
  globals: {
    __utils__: 'readonly',
  }
}
``` 

Read more about `.eslintrc.js` in [ESLint docs](https://eslint.org/docs/user-guide/configuring).

[![Sponsored by FunBox](https://funbox.ru/badges/sponsored_by_funbox_centered.svg)](https://funbox.ru)
npm package: @funboxteam/eslint-plugin-no-only-tests
Description: Disallow the use of describe.only() and it.only()
Author: Artem Frolkov
Latest version: 5.0.0

# @funboxteam/eslint-plugin-no-only-tests

[![npm](https://img.shields.io/npm/v/@funboxteam/eslint-plugin-no-only-tests.svg)](https://www.npmjs.com/package/@funboxteam/eslint-plugin-no-only-tests)

Disallow the use of `describe.only()` and `it.only()`.

[По-русски](./README.ru.md)

## Rationale

When developers fix tests they may make the process easier by filtering tests using method `only` on `it` & `describe`.

However, such filters should not be in the repo when the project is running on CI. 
So, we add this rule to our [ESLint config](https://github.com/funbox/eslint-config) to check the existence of `only` 
in the tests files. And we run linter using precommit-hook, which make it possible to prevent committing 
when `only` does exist in the code.  

## Installation

You'll first need to install [ESLint](http://eslint.org):

```
$ npm i eslint --save-dev
```

Next, install the plugin:

```
$ npm install @funboxteam/eslint-plugin-no-only-tests --save-dev
```

## Usage

Add `@funboxteam/eslint-plugin-no-only-tests` to the `plugins` section of your `.eslintrc` configuration file. 
You can omit the `eslint-plugin-` prefix:

```json
{
  "plugins": [
    "@funboxteam/no-only-tests"
  ]
}
```


Then configure the rule under the `rules` section.

```json
{
  "rules": {
    "@funboxteam/no-only-tests/no-only": 2
  }
}
```

[![Sponsored by FunBox](https://funbox.ru/badges/sponsored_by_funbox_centered.svg)](https://funbox.ru)
npm package: @funboxteam/fazio
Description: A tool to find an npm dep somewhere on your filesystem
Author: Igor Adamenko
Latest version: 1.0.0

# fazio

[![npm](https://img.shields.io/npm/v/@funboxteam/fazio.svg)](https://www.npmjs.com/package/@funboxteam/fazio)

A tool for sneaking around your filesystem to find the installed npm deps you asking for.

## Rationale

[It happens](https://therecord.media/malware-found-in-npm-package-with-millions-of-weekly-downloads/) 
that popular npm packages are got compromised and you have to be sure that you don't have one installed
on your machine. Fazio does the job.

## Installation

```
$ npm install -g @funboxteam/fazio
```

## Usage

```
$ fazio -p 'ua-parser-js@0.7.29 || 0.8.0 || 1.0.0' -d ~
```

You may pass as many packages to search for, and as many directories to look through as you want using `-p` & `-d` flags:

```
$ fazio -p 'chokidar@2' -p 'fsevents@<2' -d ~/projects -d ~/work
```

By default Fazio also checks the globally installed deps. If you want to skip it, pass `--no-global-check` flag.

You can use the package via npx without installing the Fazio globally:

```
$ npx @funboxteam/fazio --package 'ua-parser-js@0.7.29 || 0.8.0 || 1.0.0' --directory ~ --verbose
npx: installed 5 in 0.908s
Directories to scan:
  /home/ai
  /home/ai/.nvm/versions/node/v14.18.0/lib

× /home/ai/freelance/important-project/node_modules/ua-parser-js@0.7.21
× /home/ai/work/homepage/node_modules/ua-parser-js@0.7.24
→ /home/ai/projects/sandbox/node_modules/ua-parser-js@0.7.29
× /home/ai/projects/igoradamenko.com/node_modules/ua-parser-js@0.7.23

1 package found.
3 packages omitted.
```

[![Sponsored by FunBox](https://funbox.ru/badges/sponsored_by_funbox_centered.svg)](https://funbox.ru)
npm package: @funboxteam/free-port-finder
Description: Tiny utility for checking ports availability
Author: Dmitry Shvalyov
Latest version: 4.0.0

# @funboxteam/free-port-finder

[![npm](https://img.shields.io/npm/v/@funboxteam/free-port-finder.svg)](https://www.npmjs.com/package/@funboxteam/free-port-finder)

The package checks availability of the passed port, or tries to find the first available port starting from the passed one.

[По-русски](./README.ru.md)

## Rationale

When you start a TCP (or HTTP) server on localhost you want to be sure that the desirable port isn't occupied 
or you don't really care and want to get the first available one. 

This tiny tool takes on this task. 

## Installation

```bash
npm install --save-dev @funboxteam/free-port-finder
```

## Usage

`findFreePort(port: number, host?: string): Promise<number>` searches for the available port starting from the passed one:

```js
const { findFreePort } = require('@funboxteam/free-port-finder');

const port = 3000;

findFreePort(port)
  .then(freePort => {
    config.devServer.port = freePort;
  });
```

`isPortFree(port: number, host?: string): Promise<bool>` checks the availability of the passed port:

```js
const { isPortFree } = require('@funboxteam/free-port-finder');

const port = 3000;

isPortFree(port)
  .then(isFree => {
    if (isFree) {
      // start
    } else {
      // cancel
    }
  });
```

It is possible to pass host value as second parameter. The default host value is `'0.0.0.0'`.

To check if port on specified host is available:

```js
const { isPortFree } = require('@funboxteam/free-port-finder');

const port = 3000;
const host = '127.0.0.1';

isPortFree(port, host)
  .then(isFree => {
    if (isFree) {
      // start
    } else {
      // cancel
    }
  });
```

## How it works

In order to understand whether the port is free or not, this package tries to
run a TCP-server on the specified port. If the server starts, then package kills
it and signals that the port is free. If an `EADDRINUSE` error occurs, it signals
that the port is busy. If any other error occurs, then package throws it out.

This solution has both pros and cons.

**Cons:**<br/>
In some OS incorrect `SO_REUSEADDR` processing is possible, and a free port can
be signaled as busy (but not vice versa).

**Pros:**<br/>
It would be possible to go the other way, and try to connect to sockets at
a specified address, rather than run server on them. But in this case,
it is possible that the connection to a socket may initiate some process
in its handler, which could potentially be irreversible. Therefore,
current solution is safe.

[![Sponsored by FunBox](https://funbox.ru/badges/sponsored_by_funbox_centered.svg)](https://funbox.ru)
npm package: @funboxteam/rebuild-in-progress-webpack-plugin
Description: Creates the file indicator at the beginning of the build and deletes it at the end.
Author: Slava Rachek
Latest version: 4.1.0

# @funboxteam/rebuild-in-progress-webpack-plugin

[![npm](https://img.shields.io/npm/v/@funboxteam/rebuild-in-progress-webpack-plugin.svg)](https://www.npmjs.com/package/@funboxteam/rebuild-in-progress-webpack-plugin)

Webpack plugin that creates the file indicator at the beginning of the build and deletes it at the end.

[По-русски](./README.ru.md)

## Rationale

Sometimes external programs have to know the project building state. E.g. it's important to have this knowledge for 
tests running (especially E2E), because testing should be started when the project is completely built.

To solve this problem **RebuildInProgress** plugin was created. It creates the file `node_modules/.rebuildInProgress` 
when webpack starts to build the project and removes it at the end. 

## Usage

Add the plugin in `plugins` array as usual:

```javascript
const RebuildInProgressPlugin = require('@funboxteam/rebuild-in-progress-webpack-plugin');

module.exports = {
  plugins: [
    new RebuildInProgressPlugin()
  ]
}
```

Set the path to the file if the default one isn't suitable:

```javascript
const RebuildInProgressPlugin = require('@funboxteam/rebuild-in-progress-webpack-plugin');
const rebuildInProgressPath = 'node_modules/.alternativeName';

module.exports = {
  plugins: [
    new RebuildInProgressPlugin(rebuildInProgressPath)
  ]
}
```

## Build state watching

Here's an example of watching for build state using 
[`fs`]((https://nodejs.org/docs/latest/api/fs.html#fs_fs_watch_filename_options_listener)):

```javascript
const fs = require('fs');
const rebuildInProgressPath = 'node_modules/.rebuildInProgress';

fs.watch(path.dirname(rebuildInProgressPath), (eventType, filename) => {
  if (eventType === 'rename' && filename === path.basename(rebuildInProgressPath)) {
    if (fs.existsSync(rebuildInProgressPath)) {
      // Build has been started
    } else {
      // Build has been completed
    }
  }
});
```

[![Sponsored by FunBox](https://funbox.ru/badges/sponsored_by_funbox_centered.svg)](https://funbox.ru)
npm package: @funboxteam/scss-imports-loader
Description: Global imports for SCSS files
Author: Igor Adamenko
Latest version: 2.1.2

# @funboxteam/scss-imports-loader

[![npm](https://img.shields.io/npm/v/@funboxteam/scss-imports-loader.svg)](https://www.npmjs.com/package/@funboxteam/scss-imports-loader)

Webpack loader that injects predefined `@import` rules into the processed files.

[По-русски](./README.ru.md)

## Rationale

When we write styles using SCSS we store some global variables and mixins in the separated files. Most of them are used
in every component, and therefore in order not to constantly duplicate imports to decided to find a way to list those
files once and make them to be injected everywhere.

It was possible to use [`additionalData`](https://webpack.js.org/loaders/sass-loader/#additionaldata) from sass-loader,
but the plugin way turned out to be more convenient.

## Getting Started

Install the loader in your project:

```bash
npm install --save-dev @funboxteam/scss-imports-loader
```

Add it into the project's Webpack config so that it is called before sass-loader, and set `options.path` to the list
of injected paths to files:

```js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // ...
          'sass-loader',
          {
            loader: '@funboxteam/scss-imports-loader',
            options: {
              paths: [
                'app/styles/variables/colors',
                'app/styles/variables/breakpoints',
                'app/styles/variables/layout',
                'app/styles/variables/typography',
                'app/styles/mixins/respond-to',
                'app/styles/mixins/placeholder',
                'app/styles/mixins/text-cut',
                'app/styles/mixins/visually-hidden',
              ],
            },
          },
          // ...
        ],
      },
    ],
  },
};
```

## Implementation details

If you pass the same imports like above, then these strings will be added into the beginning of the every processed 
SCSS file during the build stage: 

```scss
@import 'app/styles/variables/colors';
@import 'app/styles/variables/breakpoints';
@import 'app/styles/variables/layout';
@import 'app/styles/variables/typography';
@import 'app/styles/mixins/respond-to';
@import 'app/styles/mixins/placeholder';
@import 'app/styles/mixins/text-cut';
@import 'app/styles/mixins/visually-hidden';
```

That means the paths in `options.path` have to be “available to resolve” by Webpack. 

In general, the imported files don't have to be SCSS files.
It's enough that the set of loaders listed in the Webpack config can handle them.

[![Sponsored by FunBox](https://funbox.ru/badges/sponsored_by_funbox_centered.svg)](https://funbox.ru)
npm package: @funboxteam/scss-lint-config
Description: Config for Stylelint SCSS linting
Author: FunBox LLC
Latest version: 6.1.0

# @funboxteam/scss-lint-config

[![npm](https://img.shields.io/npm/v/@funboxteam/scss-lint-config.svg)](https://www.npmjs.com/package/@funboxteam/scss-lint-config)

[Stylelint](https://stylelint.io) rules that follow our style guide for SCSS.

[По-русски](./README.ru.md)

## Installation

First, install Stylelint that meets 
the [peerDependencies requirements](./package.json):

```bash
npm install --save-dev stylelint
```

If using Stylelint v14 or higher, also install postcss-scss:

```bash
npm install --save-dev postcss-scss
```

Then install the config:

```bash
npm install --save-dev @funboxteam/scss-lint-config
```

## Usage

Include into a project config and pass desired [options](https://stylelint.io/user-guide/cli/):

```bash
stylelint "src/**/*.scss" --cache --config node_modules/@funboxteam/scss-lint-config/.stylelintrc
```

For Stylelint v13 `--syntax scss` option is required.

Also you can create your own config based on this one:

```js
module.exports = {
  extends: '@funboxteam/scss-lint-config/.stylelintrc.json',
  rules: [
    // your rule settings here
  ]
};
```

[![Sponsored by FunBox](https://funbox.ru/badges/sponsored_by_funbox_centered.svg)](https://funbox.ru)