open-index/open-npm huggingface dataset:
npm package: @saltpm/react-scripts
Description: A forked version of react scripts used in building salt-web.
Latest version: 5.0.1-test.3

# 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: @saltswap/eslint-config-salt
Description: Eslint config for SaltSwap
Author: saltKosher
Latest version: 1.0.0

# eslint-config-salt

Salt Eslint config with:

- Airbnb config
- Typescript
- Prettier

## Usage

```
npx install-peerdeps --dev @saltswap-libs/eslint-config-salt
```

Add `"extends": "@saltswap-libs/eslint-config-salt"` to your eslint config file.
npm package: @saltswap/uikit
Description: Set of UI components for SaltSwap projects
Latest version: 1.2.32

# 🧂 SaltSwap UIkit

[![Version](https://img.shields.io/npm/v/@saltswap/uikit)](https://www.npmjs.com/package/@saltswap/uikit) [![Size](https://img.shields.io/bundlephobia/min/@saltswap/uikit)](https://www.npmjs.com/package/@saltswap/uikit)

SaltSwap UIkit is a set of React components and hooks used to build pages on SaltSwap's apps.

It also contains a theme file for dark and light mode.

## Install

`yarn add @saltswap/uikit`

## npm

https://www.npmjs.com/package/@saltswap/uikit

## Setup

### Theme

Before using SaltSwap UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@saltswap/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@saltswap/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://saltswap.github.io/saltswap-uikit/)
npm package: @salty-ui/button
Description: A React component that is a base button.
Latest version: 2.0.0

# Button

Buttons are used as triggers for actions. They are used in forms, toolbars,
dialog footers and as stand-alone action triggers.

## Installation

```sh
yarn add @salty-ui/button

# or

npm i @salty-ui/button
```

## Import component

```jsx
import { Button } from '@salty-ui/button'
```

## Usage

```jsx
<Button colorScheme="green">Button</Button>
```

### Button Sizes

Use the `size` prop to change the size of the button. You can set the value to
`xs`, `sm`, `md`, or `lg`.

```jsx
<Stack>
  <Button size="xs">Button</Button>
  <Button size="sm">Button</Button>
  <Button size="md">Button</Button>
  <Button size="lg">Button</Button>
</Stack>
```

### Button Variant

Use the `variant` prop to change the visual style of the Button. You can set the
value to `solid`, `ghost`, `outline`, or `link`.

```jsx
<ButtonGroup>
  <Button variant="solid">Button</Button>
  <Button variant="outline">Button</Button>
  <Button variant="ghost">Button</Button>
  <Button variant="link">Button</Button>
</ButtonGroup>
```

### Button with Icon

You can add left and right icons to the Button components.

```jsx
<ButtonGroup>
  <Button leftIcon={<EmailIcon />} variant="solid">
    Email
  </Button>
  <Button rightIcon={<ArrowForwardIcon />} variant="outline">
    Call us
  </Button>
</ButtonGroup>
```

### Button loading state

Pass `isLoading` prop to the Button component to show its loading state. You can
optionally pass `loadingText` prop.

You can also use a custom spinner to render your own spinner component.

```jsx
<Stack>
  <Button isLoading colorScheme="teal" variant="solid">
    Email
  </Button>

  <Button isLoading colorScheme="teal" variant="outline" spinner={<BarSpinner />}>
    Submit
  </Button>
</Stack>
```
npm package: @salty6952/openapi
Description: [![GitHub Repo stars](https://img.shields.io/github/stars/SaltyFish6952/openapi2typescript-increment-enhance?style=social)](https://github.com/SaltyFish6952/openapi2typescript-increment-enhance) [![npm (scoped)](https://img.shields.io/npm/v/@umijs/openapi
Author: chenshuai2144
Latest version: 1.8.5-beta.1
npm package: @saltyaom/gq
Description: Graphql client at bare minimum
Author: saltyaom
Latest version: 1.1.9

# @saltyaom/gq
Light version of [@saltyaom/gql](https://github.com/saltyaom/graphql-client) at 500 bytes.

## Feature
- No dependencies.
- GraphQL at bare minimum.
- Supports on both client and server.
- Minify query on flies
- Built-in TypeScript

## Size
Should be around 500 bytes, checkout [Bundlephobia](https://bundlephobia.com/package/@saltyaom/gq) for accurate result.

## Getting start
```bash
yarn add @saltyaom/gq

// Or npm
npm install @saltyaom/gq --save
```

## Example
```jsx
import gql, { client } from '@saltyaom/gq'

client.config('http://api.opener.studio/graphql')

gql(`
  query GetHentaiById($id: Int!) {
    getHentaiById(id: $id) {
      success
      data {
        title {
          display
        }
      }
    }
  }
`,
{
  variables: {
    id: 177013
  }
}).then((data) => console.log(data))
```

## Why
Y'll made GraphQL too complex and heavy.

I just want to fetch GraphQL query here.

### Example
```typescript
import gql, { client } from '@saltyaom/gq'

client.config('http://api.opener.studio/graphql')

gql(`
  query GetHentaiById($id: Int!) {
    getHentaiById(id: $id) {
      success
      data {
        title {
          display
        }
      }
    }
  }
`,
{
  variables: {
    id: 177013
  }
}).then((data) => console.log(data))
```
npm package: @saltyaom/gql
Description: Fetch as GraphQL
Author: saltyaom
Latest version: 1.3.2

# @saltyaom/gql
Lightweight graphql client.

## Feature
- No dependencies.
- Lightweight, just 1.4 KB.
- Run on both client and server.
- Just simple fetch.
- You can write plugins, eg.
  - [@saltyaom/gql-inmemory-cache](https://github.com/saltyaom/gql-inmemory-cache)
  - [@saltyaom/gql-local-cache](https://github.com/saltyaom/gql-local-cache)
- Built-in TypeScript

## Size
1.2 is around 1.4 KB, checkout [Bundlephobia](https://bundlephobia.com/package/@saltyaom/gql) for accurate result.

## Getting start
```bash
pnpm add @saltyaom/gql
```

## Example
```jsx
import gql, { client } from '@saltyaom/gql'

client.config('https://api.hifumin.app/graphql')

gql(
  `query SaltyAomGQL($id: Int!) {
      nhql {
        by(id: $id) {
          data {
            id
            title {
              display
            }
          }
        }
      }
    }`,
  {
    variables: {
      id: 177013
    }
  }
```

## Why
Y'll made GraphQL too complex and heavy.

I just want to fetch GraphQL query here.


## Plugins
You can implement custom plugin for transforming data, caching, logging, etc.

- middlewares
	- Executes before fetch
	- Will receive (`operationName`, `variables`)
	- If any callback return truthy value, the value will be used as result and skip the fetch
	- Good for caching

- afterwares
	- Executes after fetch
	- Will receive (`data`, `operationName`, `variables`)
	- Returning new data will cause data transformation for next afterware
	- Good for logging, data-transformations.

### Example
```typescript
import gql, { client } from '@saltyaom/gql'
import LocalCache from '@saltyaom/gql-local-cache'

client.config(
  'https://api.opener.studio/graphql', 
  {
    plugins: [
      LocalCache(),
      // Or write your own plugins
      {
          afterwares: [
          ({ data, operationName, variables }) => {
            console.log('Logger:', data, operationName, variables)
          }
        ]
      }
    ]
  }
)

// You can pass generic if you're using TypeScript
gql<ReturnType, VariableType>(
  `query SaltyAomGQL($id: Int!) {
      nhql {
        by(id: $id) {
          data {
            id
            title {
              display
            }
          }
        }
      }
    }`,
  {
    variables: {
      id: 177013
    }
  }
).then((data) => {
  console.log(data)
})
```
npm package: @saltyaom/gql-inmemory-cache
Description: Inmemory Cache Plugin for @saltyaom/gql
Author: saltyaom
Latest version: 1.3.1

# @saltyaom/in-memory-cache
In-Memory Cache for [@saltyaom/gql](https://github.com/saltyaom/graphql-client)

## Example Usage
```typescript
import gql, { client } from '@saltyaom/gql'
import InMemoryCache from '@saltyaom/gql-inmemory-cache'

client.config(
  'https://api.hifumin.app', 
  {
    plugins: [InMemoryCache()]
  }
)

gql(
  `query GetHentaiById($id: Int!) {
    getHentaiById(id: $id) {
      success
      data {
        title {
          display
          japanese
        }
      }
    }
  }`,
  {
    variables: {
      id: 177013
    }
  }
).then((data) => {
  console.log(data)
})
```

## Custom Config
You can pass custom config to `localCache()`

Available config:
- ttl
  - How long should the cache live in seconds.
  - default: 86400 seconds (1 days)
npm package: @saltyaom/gql-local-cache
Description: Local Storage Cache Plugin for @saltyaom/gql
Author: saltyaom
Latest version: 1.3.0

# @saltyaom/gql-local-cache
Local Storage Cache Plugin for [@saltyaom/gql](https://github.com/saltyaom/graphql-client)

## Example Usage
```typescript
import gql, { client } from '@saltyaom/gql'
import localCache from '@saltyaom/gql-local-cache'

client.config(
  'https://api.opener.studio/graphql', 
  {
    plugins: [localCache()]
  }
)

gql(
  `query GetHentaiById($id: Int!) {
    getHentaiById(id: $id) {
      success
      data {
        title {
          display
          japanese
        }
      }
    }
  }`,
  {
    variables: {
      id: 177013
    }
  }
).then((data) => {
  console.log(data)
})
```

## Custom Config
You can pass custom config to `localCache()`

Available config:
- ttl
  - How long should the cache live in seconds.
  - default: 86400 seconds (1 days)
npm package: @saltyaom/nya
Description: Collection of common components pattern for copy-pasting via CLI.
Author: SaltyAom
Latest version: 0.0.0-experimental.2

# Nya
Collection of common components pattern for copy-pasting via CLI.

For example:
```bash
# This command will generate navbar
npx nya n navbar
```

## Meaning of the name
Nyan is an acronym of:
- N - collectio**N** of
- Y - common components pattern
- A - for copy-p**A**sting

If you don't get it, please refer to the figure below:

<img src="https://user-images.githubusercontent.com/35027979/139077662-fa5a8daf-5a51-405c-9e69-0c04549cb226.png" alt="sgel acronym" width=480 />
npm package: @saltycatfish/boxxy
Description: creates neeto boxes in a container
Author: Ryan Long
Latest version: 1.0.0

Poppy
=====

Dead simple popup messages

## Current Version
1.1.0

## Usage
Drop the poppy.min.css and poppy.min.js into your page
    
    <script src="poppy.min.js"></script>

    (function(){
      p = new Poppy();
      p.error("This is an error message");
    })();

## Author
** SaltyCatFish **

Twitter: [@SaltyCatFish](http://twitter.com/SaltyCatFish)
"# boxxy"
npm package: @saltycatfish/nunu
Description: Utilities Module
Author: Ryan Long
Latest version: 1.0.8
Deprecated: Nunu will now be Vi

# README #
![Build](https://api.travis-ci.org/SaltyCatFish/nunu.svg?branch=master)

This README would normally document whatever steps are necessary to get your application up and running.

### What is this repository for? ###

* Quick summary
* Version
* [Learn Markdown](https://bitbucket.org/tutorials/markdowndemo)

### How do I get set up? ###

* Summary of set up
* Configuration
* Dependencies
* Database configuration
* How to run tests
* Deployment instructions

### Contribution guidelines ###

* Writing tests
* Code review
* Other guidelines

### Who do I talk to? ###

* Repo owner or admin
* Other community or team contact
npm package: @saltycatfish/poppy
Description: Nice css/js popups
Author: Ryan Long
Latest version: 1.0.4

Poppy
=====

Dead simple popup messages

## Current Version
1.1.0

## Usage
Drop the poppy.min.css and poppy.min.js into your page
    
    <script src="poppy.min.js"></script>

    (function(){
      p = new Poppy();
      p.error("This is an error message");
    })();

## Author
** SaltyCatFish **

Twitter: [@SaltyCatFish](http://twitter.com/SaltyCatFish)
npm package: @saltycatfish/vi
Description: Utilities Module
Author: Ryan Long
Latest version: 1.0.8

# README #
![Build](https://api.travis-ci.org/SaltyCatFish/nunu.svg?branch=master)

This README would normally document whatever steps are necessary to get your application up and running.

### What is this repository for? ###

* Quick summary
* Version
* [Learn Markdown](https://bitbucket.org/tutorials/markdowndemo)

### How do I get set up? ###

* Summary of set up
* Configuration
* Dependencies
* Database configuration
* How to run tests
* Deployment instructions

### Contribution guidelines ###

* Writing tests
* Code review
* Other guidelines

### Who do I talk to? ###

* Repo owner or admin
* Other community or team contact
npm package: @saltyeyes/react-multi-select
Description: React Multi Select Component
Latest version: 0.2.6

# React Multi Select Component

React Multi Select Component

![Animated GIF demo](react-multi-select.gif)

[Storybook Demo](https://khan.github.io/react-multi-select/)

## Installation:
`npm install --save @khanacademy/react-multi-select`

## Usage:
See the examples in ``/src/stories/index.js` for how to use the component
npm package: @saltyquark/vue-auth
Description: Unofficial auth plugin for Vue.js 2
Author: Matt Froese
Latest version: 0.0.2

# vue-auth

`vue-auth` makes managing authenticate state easy in with Vue.

## Installation

### NPM

```
$ npm install @saltyquark/vue-auth
```

## Example

```javascript
import VueAuth from 'vue-auth'
Vue.use(Auth, {
    url: "/auth", // full url to your auth endpoint
})
```

## Documentation

- [Configuration](docs/config.md)
- [Vue Router](docs/vuerouter.md)
- [Development](docs/dev.md)

## License

[MIT](http://opensource.org/licenses/MIT)