open-index/open-npm huggingface dataset:
npm package: @growcss/elaborate
Description: A lightweight toolset for writing styles in Javascript.
Author: Daniel Bannert
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# GrowCss Elaborate

#### A lightweight toolset for writing styles in JavaScript. 

```bash
npm install @growcss/elaborate
```

or if you're using yarn

```bash
yarn add @growcss/elaborate
```

Want to write styles in JavaScript, but also want Sass-style helper functions and mixins or consistent color palette throughout your app? `elaborate` is for you!

## Usage

`elaborate` modules are meant to be used as stand-alone imports. You should avoid importing the entire library directly:

```js
import { rem, em } from '@growcss/elaborate';
```

When `elaborate` modules are imported properly, tree shaking in [webpack](https://webpack.js.org/guides/tree-shaking/) and [Rollup](https://github.com/rollup/rollup#tree-shaking) can be leveraged to reduce your bundle size.
npm package: @growcss/eslint-config
Description: GrowCss Coding Standard for eslint.
Author: Daniel Bannert
Latest version: 1.1.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# eslint config

> This package provides GrowCss's .eslintrc as an extensible shared config.

## Usage

### @growcss/eslint-config

Our default export contains all of our ESLint rules, including ECMAScript 6+ and React. It requires `eslint, eslint-config-prettier, eslint-plugin-compat, eslint-plugin-jest, eslint-plugin-import, eslint-plugin-jsdoc, eslint-plugin-jsx-a11y, eslint-plugin-prefer-object-spread, eslint-plugin-prettier, eslint-plugin-promise, eslint-plugin-react, eslint-plugin-security, eslint-plugin-unicorn, @typescript-eslint/parser, @typescript-eslint/eslint-plugin, prettier, prettier-eslint`.

Install each package listed below for the default `@growcss/eslint-config`.

```bash
npm i --save-dev @growcss/eslint-config eslint eslint-config-prettier eslint-plugin-jest eslint-plugin-jsx-a11y eslint-plugin-prefer-object-spread eslint-plugin-prettier eslint-plugin-react eslint-plugin-security @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier prettier-eslint
```
npm package: @growcss/image
Description: Image element with sizing and preloading options.
Author: Daniel Bannert
Latest version: 1.0.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# GrowCss Image

Speedy, optimized images without the work.

 It provides the fastest, most optimized image loading performance possible for React websites.

## Out of the box it

- Loads the optimal size of image for each device size and screen resolution
- Holds the image position while loading so your page doesn’t jump around as images load
- Uses the “blur-up” effect i.e. it loads a tiny version of the image to show while the full image is loading
- Alternatively provides a “traced placeholder” SVG of the image.
- Lazy loads images which reduces bandwidth and speeds the initial load time
- Uses WebP images if browser supports the format

## Installation

```bash
npm install @growcss/image
```

or if you're using yarn

```bash
yarn add @growcss/image
```

## Usage

To implement Image component into your project you'll need to add the import:

```js
import {Image} from '@growcss/image';
```

After adding import into your project you can use it simply like:

```jsx
<Image alt="your alt text" src="your image" />
```

## GrowCss Image srcSet

The `srcSet` attribute is a string consisting of one or more image selection strings separated by commas. 
Each image selection string is composed of:

1. A url to an image
2. One or more spaces as a separator
3. One or _more_ descriptors separated by spaces
    - width descriptor: a positive integer directly followed by 'w'. e.g. `700w`
    - height descriptor: a positive integer directly followed by 'h'. e.g. `345h`
    - pixel density descriptor: a positive floating point number directly followed by 'x'. e.g. `2.0x`
    - media descriptor: used for the media type in source element

`GrowCss image` extends the `<Image srcSet="...">` feature by allowing multiple descriptors for an image
and mixed descriptors in a single srcSet.

### Example image srcSet

`srcSet="foo-s.jpg 150w, foo-sh.jpg 150w 2.0x, foo-m.jpg 405w, foo-mh 2.0x 405w, foo-l 1024w, foo-t 500w 750h media=(min-width: 300px)"`

### Automatic Density

If _none_ of the image selection strings includes a pixel density descriptor ('x' e.g. `4.0x`), then the image
selection process will automatically compensate for the viewport's pixel density.
npm package: @growcss/xy-grid
Description: The XY Grid is huge advancement in Grids.
Author: Daniel Bannert
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# GrowCss XY-Grid

## Installation

```bash
npm install @growcss/xy-grid
```

or if you're using yarn

```bash
yarn add @growcss/xy-grid
```

## Usage

To implement XY-Grid component into your project you'll need to add the import:

```js
import { Cell, GridX, GridContainer } from '@growcss/xy-grid';
```

After adding import into your project you can use it simply like:

```jsx
<GridContainer>
  <GridX>
    <Cell small={4}>cell</Cell>
    <Cell small={4}>cell</Cell>
    <Cell small={4}>cell</Cell>
  </GridX>
</GridContainer>
```
npm package: @growfin/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 5.0.1

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
npm package: @growflow/axios-vcr
Description: Forked axios-vcr to support XML payloads.
Author: Netto Farah
Latest version: 1.0.2

# axios-vcr
:vhs: Record and Replay requests in JavaScript

axios-vcr is a set of [axios](https://github.com/mzabriskie/axios) middlewares that allow you to record and replay axios requests.
Use it for reliable, fast and more deterministic tests.

[![Build Status](https://travis-ci.org/nettofarah/axios-vcr.svg?branch=master)](https://travis-ci.org/nettofarah/axios-vcr)

## Features
- [x] Record http requests to JSON cassette files
- [x] Replay requests from cassete files
- [x] Multiple request/response fixtures per cassette
- [ ] Cassette expiration logic
- [ ] Mocha integration
- [ ] non-global axios instances support

## Installation
```bash
$ npm install --save-dev axios-vcr
```

## Usage
Using axios-vcr is very simple. All you need to do is to provide a cassette path and wrap your axios code with `axiosVCR.mountCassette` and `axiosVCR.ejectCassette`.

```javascript
const axiosVCR = require('axios-vcr');

axiosVCR.mountCassette('./test/fixtures/cats.json')

axios.get('https://reddit.com/r/cats.json').then(response => {
  // axios-vcr will store the remote response from /cats.json
  // in ./test/fixtures/cats.json
  // Subsequent requests will then load the response directly from the file system

  axiosVCR.ejectCassette('https://reddit.com/r/cats.json')
})
```

### Usage in a test case
```javascript
it('makes your requests load faster and more reliably', function(done) {
  // mount a cassette
  axiosVCR.mountCassette('./fixtures/test_case_name.json')

  myAPI.fetchSomethingFromRemote().then(function(response) {
    assert.equal(response.something, 'some value')
    done()

    // Eject the cassette when all your promises have been fulfilled
    axiosVCR.ejectCassette('./fixture/test_case_name.json')
  })
})
```

## Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/nettofarah/axios-vcr. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Code of Conduct](https://github.com/nettofarah/axios-vcr/blob/master/CODE_OF_CONDUCT.md).

To run the specs check out the repo and follow these steps:

```bash
$ npm install
$ npm test
```

## License

The module is available as open source under the terms of the MIT License.
npm package: @growflow/eslint-config
Description: Common ESLint configs for Growflow Org.
Author: GrowFlow
Latest version: 10.4.1

# GrowFlow Shared ESLint Configuration

> Shareable [ESLint](https://eslint.org/) configuration to apply consistent syntax and styling rules across GrowFlow projects.

## Usage

You can install this package and all of its peer dependencies with [install-peerdeps](https://www.npmjs.com/package/install-peerdeps):

```
npx install-peerdeps --dev @growflow/eslint-config
```

You can then create a `.eslintrc.js` file with content similar to the following:

```js
// see https://www.npmjs.com/package/@rushstack/eslint-patch
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  extends: ['@growflow'],
  parserOptions: {
    project: 'tsconfig.json',
  },
};
```

This will apply the core eslint config settings as well as settings to eslint your tests with Jest. If you are not using Jest or only want to include the core settings for whatever reason, you can extend the core config:

```js
// see https://www.npmjs.com/package/@rushstack/eslint-patch
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  extends: ['@growflow/eslint-config/core'],
  parserOptions: {
    project: 'tsconfig.json',
  },
};
```

Or if you only want to include the Jest configuration within an `.eslintrc.js` within a `test` folder, you can do that as well:

```js
// see https://www.npmjs.com/package/@rushstack/eslint-patch
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  extends: ['@growflow/eslint-config/jest']
};
```

### Editor Integration

You should be able to use your favorite editor's (\*cough\* [VS Code](https://code.visualstudio.com/)) [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) to easily format your code on save or with the [_Format_ command](https://code.visualstudio.com/docs/editor/codebasics#_formatting).
npm package: @growflow/jest
Description: Shareable Jest configuration to get testing up and running quickly for GrowFlow frontend and backend applications
Author: GrowFlow
Latest version: 10.1.0

# GrowFlow Jest Configuration

> Shareable [Jest](https://jestjs.io/) configuration to get testing up and running quickly for GrowFlow frontend and backend applications.

## Usage

```
yarn add --dev @growflow/jest
```

You can then create a `jest.config.ts` file in your project root:

```ts
import { createJestConfig } from '@growflow/jest';

export default createJestConfig();
```

For a frontend app, you can use `createUiJestConfig`:

```ts
import { createUiJestConfig } from '@growflow/jest';

export default createUiJestConfig();
```

### Customization

You can override any part of the jest config by passing a partial configuration object to be deep merged with the base config:

```ts
import { createUiJestConfig } from '@growflow/jest';

export default createUiJestConfig({
  rootDir: '../',
  testPathIgnorePatterns: ['./test/ignorme.tsx'],
});
```

### TS Auto Mock

The base configuration can automatically configure [TS Auto Mock](https://typescript-tdd.github.io/ts-auto-mock/). In order for this to work, it has to switch the compilation of the tests to [TTypeScript](https://github.com/cevek/ttypescript) (notice the extra _T_).

For this reason, TS Auto Mock support is opt-in:

```ts
import { createJestConfig } from '@growflow/jest';

export default createJestConfig({ includeTsAutoMock: true });
```

## Writing Tests

This jest configuration will run tests given a number of different styles:

- Run tests in a `test` folder adjacent to the `src` folder.
- Run tests in a `__test__` or `__tests__` folder anywhere in the workspace.
- Run tests in a `file.spec.ts` or `file.test.js` file adjacent to the SUT.

To match GrowFlow's style, in general, integration-like tests should go into a `test` folder adjacent to `src`. Unit-style tests should go in a `__tests__` folder or a `file.test.ts` file next to the file it is testing.
npm package: @growflow/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 0.5.0

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
npm package: @growflow/tsconfig
Description: Shareable TypeScript configuration used in GrowFlow projects
Author: GrowFlow
Latest version: 7.0.0

# GrowFlow Shared TypeScript Configuration

> Shareable [TypeScript](https://www.typescriptlang.org/) configuration to apply consistent compilation rules across GrowFlow TypeScript applications.

## Usage

You can easily install this package and all of its peer dependencies with [install-peerdeps](https://www.npmjs.com/package/install-peerdeps):

```
npx install-peerdeps --dev @growflow/tsconfig
```

You can then add a `tsconfig.json` to the root of your project with contents similar to the folowing:

```json
{
  "extends": "@growflow/tsconfig",
  "include": ["src", "test"]
}
```

### Editor Integration

[VS Code](https://code.visualstudio.com/) will pick up your TypeScript configuration and Just Work™.