open-index/open-npm huggingface dataset:
npm package: @grnx-utils/apollo
Description: [![npm version](https://img.shields.io/npm/v/@grnx-utils/apollo.svg?style=flat)](https://www.npmjs.com/package/@grnx-utils/apollo)  ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)<br/> <h3></h3>
Author: Gearonix egor.uzhanin@gmail.com
Latest version: 0.1.1

## [@grnx-utils/apollo](https://github.com/Gearonix/grnx-utils/tree/master/packages/apollo)
[![npm version](https://img.shields.io/npm/v/@grnx-utils/apollo.svg?style=flat)](https://www.npmjs.com/package/@grnx-utils/apollo)  ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)<br/>
<h3></h3>

Wrapper over [@apollo/client](https://www.apollographql.com/docs/react/), which makes the syntax cleaner.

For example, instead of this:
```ts
const response = await apollo.mutate({
    mutation: gql,
    variables: {
        _graphql: {
            username,
            id
        }
    }
})

const result = response.data.yourMethod
```

You can do this:
```ts
const result = await apollo.request<Res, Body>(gql, { username, id }, 'mutate')
```

## Installation

```
yarn add @grnx-utils/apollo -D
```

## Usage
```ts
// apollo-config.ts
import { createApolloClient } from '@grnx-utils/apollo'

const apollo = createApolloClient({
    url: 'http://localhost:6868',
    /** Enable library logs
     *  @default false
     */ 
    isDev: process.env.NODE_ENV === 'development',
    /** Additions @apollo/client config
     *  @default {}
     */
    extend: {
        queryDeduplication: false
    }
})
```

## Configure API ([apollo.request](./src/middleware/core.ts))

```ts
const response = await apollo.request<ResponsePayload, RequestBody>(
    /** graphql query
     *  @type {ApolloOperation}
     */
    mutation,
    /** graphql body
     *  @type {Record<string, unknown>}
     */
    { username: 'test' },
    /** graphql method
     *  @type {'query' | 'mutate'}
     *  @default 'query'
     */
    'mutate'
)
```
## Examples

### Case with query

```ts
// fetch-users.ts
import type { ApolloOperation } from '@grnx-utils/apollo'
import { apollo } from './apollo-config.ts'
import { gql } from 'graphql-tag'

interface User {
    name: string
    id: number
}

const query: ApolloOperation = {
    gql: gql`
    query {
      getUsers {
        name
        id
      }
    }
  `, 
  method: 'getUsers'
}

const users = await apollo.request<User[], void>(query, { page: 0 })
```

### Case with mutation
```ts
// delete-user.ts
import { apollo } from './apollo-config.ts'

export interface ApolloBody {
    username: string
}

const mutation: ApolloOperation = {
    gql: gql`
     mutation SignIn($payload: SignIn!) {
      signIn(_graphql: $payload) {
        accessToken
      }
    }
  `,
   method: 'signIn'
}

const payload = await apollo.request<User[], ApolloBody>(mutation, { username: 'test' }, 'mutate')
```
npm package: @grnx-utils/css-presets
Description: [![npm version](https://img.shields.io/npm/v/@grnx-utils/css-presets.svg?style=flat)](https://www.npmjs.com/package/@grnx-utils/css-presets)  ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)<br/> <h3></h3>
Latest version: 0.1.1

## [@grnx-utils/css-presets](https://github.com/Gearonix/grnx-utils/tree/master/packages/css-presets)
[![npm version](https://img.shields.io/npm/v/@grnx-utils/css-presets.svg?style=flat)](https://www.npmjs.com/package/@grnx-utils/css-presets)  ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)<br/>
<h3></h3>

Provides a set of mixins and variables for different CSS libraries and frameworks

## Installation

```
yarn add @grnx-utils/css-presets -D
```

## Usage

### Styled components

```ts
import styled from 'styled-components'

import { absolute, antdColor, color, flex, hover, margin, wh } from '@grnx-utils/css-presets'

export const TerminalButtons = styled.div`
  ${absolute({
    right: '44px',
    top: '23px'
  })}
  ${flex('flex-end')};
  gap: 23px;
  ${wh('100px', '22px')};
  cursor: pointer;
  svg {
    path {
      stroke: ${color('secondaryGrey')};
      ${({ theme }) => hover(theme.light)};
    }
    ${wh('22px')}
    color: ${color('secondaryGrey')};
    ${({ theme }) => hover(theme.light)}
  }
`
```

### SCSS

```scss
@use '@grnx-utils/css-presets/scss/index.scss' as s;
@use './variables.scss' as v;

.content-buttons {
  @include s.size(100%, 40px);
  @include s.flex(flex-start, center);
  @include s.customScroll;
  

  padding-bottom: 10px;
  // Your custom variables
  border-bottom: v.$br v.$bg-150;
  position: relative;

  .content {
      svg {
        @include s.size(15px, 15px);
      }
      @include absolute(50%, 50%);
  }
  
  .title {
    @include itemBorder;
  }
}
```
npm package: @grnx-utils/eslint
Description: [![npm version](https://img.shields.io/npm/v/@grnx-utils/eslint.svg?style=flat)](https://www.npmjs.com/package/@grnx-utils/eslint)  [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#
Latest version: 3.0.2

## [@grnx-utils/eslint](https://github.com/Gearonix/grnx-utils/tree/master/packages/eslint)
[![npm version](https://img.shields.io/npm/v/@grnx-utils/eslint.svg?style=flat)](https://www.npmjs.com/package/@grnx-utils/eslint)  [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request) <br/>
<h3></h3>

Custom `eslint` configuration built on top of [eslint-kit](https://github.com/eslint-kit/eslint-kit) presets. <br/>
Adds eslint plugins like `@nx` , `prefer-arrow` and more.
The config will be expanded in the future.

[Eslint-kit](https://github.com/eslint-kit/eslint-kit) is a library that provides ready-made
eslint presets and it belongs to Evgeny Zakharov.

## Installation

```
yarn add @grnx-utils/eslint eslint@^8.46.0 prettier@^3.0.0 typescript@^5.2.2 eslint-kit@10.0.0 -D
```

## Usage
After installing, add the `.eslintrc.js` file in your project root:
```js
const grnx = require('@grnx-utils/eslint')


module.exports = grnx({
  root: __dirname,   // project root (required)
  monorepo: true,
  tsconfig: 'tsconfig.base.json'   // when using a monorepo like Nx
})

```

> **Warning**
> The package may not work with node 21 and higher.


## Configure API

```js
grnx({
  /** project root
   * @type {string}
   * @example __dirname
   */
  root: __dirname,
  /** enables monorepo mode
   * @default false
   */
  monorepo: true,
  /** eslint ignore patterns
   * @default ['**//*'] (in monorepo mode)
   */
  ignore: ['**/*'],
  /** tsconfig path
   * @example tsconfig.base.json
   * @default tsconfig.json
   */
  tsconfig: 'tsconfig.json',
  /** extensions provided by eslint-kit
   * in the default configuration there
   * are only 5 presets
   * @default []
   */
  extensions: ['vue', 'solidJs'],
  /**
   * enables eslint-kit allowDebug
   * @default false
   */
  allowDebug: true,
  /** enables presets.imports() - unstable preset,
   * errors are possible.
   * @default true
   */
  enableImports: false,
  /** additional eslint rules
   * @default {}
   */
  ext: {
    'react-hooks/exhaustive-deps': 'warn'
  }
})
```
<br/>

### List of packages used by @grnx-utils/eslint
Will be expanded in the future.

- [eslint-kit](https://github.com/eslint-kit/eslint-kit)
- [prettier-plugin-layout](https://github.com/LIMPIX31/plugin-layout)
- [@nx/eslint-plugin](https://nx.dev/packages/eslint-plugin)
- [eslint-plugin-prefer-arrow](https://github.com/TristonJ/eslint-plugin-prefer-arrow)

---

> **Warning**
> The package does not support the new `eslint.config.js` <br/>
> file provided by the latest versions of eslint. Possible configuration errors
npm package: @grnx-utils/local-storage
Description: [![npm version](https://img.shields.io/npm/v/@grnx-utils/local-storage.svg?style=flat)](https://www.npmjs.com/package/@grnx-utils/local-storage)  ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)<br/> <h3></h3>
Author: Gearonix egor.uzhanin@gmail.com
Latest version: 0.1.0

## [@grnx-utils/local-storage](https://github.com/Gearonix/grnx-utils/tree/master/packages/local-storage)
[![npm version](https://img.shields.io/npm/v/@grnx-utils/local-storage.svg?style=flat)](https://www.npmjs.com/package/@grnx-utils/local-storage)  ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)<br/>
<h3></h3>

Provides a convenient API for working with localStorage.

## Features:
- Automatic parsing if the value is in JSON format
- Automatic JSON.stringify if you want to set non-primitive type to localStorage
- `Next.js` support (check if `typeof window !== 'undefined'`)
- Ability to add a prefix to keys (useful if you have several applications on the same domain. For example, turns `AUTH_TOKEN` into `myapp__AUTH_TOKEN`)
- Ability to disable setting new values if necessary
- LocalStorage key typing (with typescript)

## Installation

```
yarn add @grnx-utils/local-storage -D
```

## Basic Usage

```ts
import { createStorage } from '@grnx-utils/local-storage'

export enum LocalStorage {
    someKey = 'someKey'
}

const storage = createStorage<LocalStorage>({
    layer: 'my-app'
})

```

```ts
storage.set('someKey', {
    someKey: 'value'
})

storage.get('someKey') // { someKey: 'value' }

storage.clear('someKey')

storage.get('someKey') // void

storage.disable() // will stop work
```
## Comparison with regular localStorage
```ts
// @grnx-utils/local-storage

storage.set('someKey', {
    someKey: 'value'
})

// common localStorage

if (typeof window !== 'undefined') {
    localStorage.setItem(
        'my-app__someKey',
        JSON.stringify({
            someKey: 'value'
        })
    )
}
```

## Configure API
```ts
const storage = createStorage<LocalStorage>({
    /** Application layer
     * @type string
     * @default - undefined
     */
    layer: 'my-app',
    /**
     * @type boolean
     * @default - false
     */
    isDisabled: true
})

```
npm package: @grnx-utils/react
Description: [![npm version](https://img.shields.io/npm/v/@grnx-utils/react.svg?style=flat)](https://www.npmjs.com/package/@grnx-utils/react)  ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)<br/> <h3></h3>
Latest version: 0.0.2

## [@grnx-utils/react](https://github.com/Gearonix/grnx-utils/tree/master/packages/react)
[![npm version](https://img.shields.io/npm/v/@grnx-utils/react.svg?style=flat)](https://www.npmjs.com/package/@grnx-utils/react)  ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)<br/>
<h3></h3>

Provides a set of components that make react syntactically better.
The library will expand.

## Installation

```
yarn add @grnx-utils/react -D
```

## Available Components
- [`Display`](./src/components/display.tsx)
- [`Ternary`](./src/components/ternary.tsx)
- [`Map`](./src/components/map.tsx)
npm package: @grnx-utils/react-hooks
Description: [![npm version](https://img.shields.io/npm/v/@grnx-utils/react-hooks.svg?style=flat)](https://www.npmjs.com/package/@grnx-utils/react-hooks)  ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)<br/> <h3></h3>
Latest version: 0.2.1

## [@grnx-utils/react-hooks](https://github.com/Gearonix/grnx-utils/tree/master/packages/types)
[![npm version](https://img.shields.io/npm/v/@grnx-utils/react-hooks.svg?style=flat)](https://www.npmjs.com/package/@grnx-utils/react-hooks)  ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)<br/>
<h3></h3>

A collection of react hooks such as `useDebounce`, `useLocalStorage`, `useFilteredEffect`, `useAsyncEffect` and many others.
## Installation

```
yarn add @grnx-utils/react-hooks -D
```

## Available Hooks
- [`useAltKeyDown`](./src/hooks/use-alt-keydown.ts)
- [`useAsyncEffect`](./src/hooks/use-async-effect.ts)
- [`useBooleanState`](./src/hooks/use-boolean-state.ts)
- [`useDebounce`](./src/hooks/use-debounce.ts)
- [`useFilteredEffect`](./src/hooks/use-filtered-effect.ts)
- [`useFullScreen`](./src/hooks/use-full-screen.ts)
- [`useInterval`](./src/hooks/use-interval.ts)
- [`useLocalStorage`](./src/hooks/use-local-storage.ts)
- [`useOverflow`](./src/hooks/use-overflow.ts)
- [`useThrottle`](./src/hooks/use-throttle.ts)

## Development and contribution

### Internal scripts

#### Run vitest

```shell
nx test react-hooks --ui --coverage
```
npm package: @grnx-utils/types
Description: [![npm version](https://img.shields.io/npm/v/@grnx-utils/types.svg?style=flat)](https://www.npmjs.com/package/@grnx-utils/types)  ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)<br/> <h3></h3>
Latest version: 1.0.2

## [@grnx-utils/types](https://github.com/Gearonix/grnx-utils/tree/master/packages/types)
[![npm version](https://img.shields.io/npm/v/@grnx-utils/types.svg?style=flat)](https://www.npmjs.com/package/@grnx-utils/types)  ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)<br/>
<h3></h3>

Collection of types and interfaces for your project. You don't have to download libraries like [utility-types](https://github.com/piotrwitek/utility-types) or copy your types from project to project.

The package provides the usual types like `Nullable<T>`, but also adds types for `react` and `preact`.
## Installation

```
yarn add @grnx-utils/types -D
```


> **Info**
> To use `react` or `preact` types, 
> you must have the appropriate dependencies installed.