open-index/open-npm huggingface dataset:
npm package: @rocketsquirrelio/wp-css-reset
Description: A CSS reset for WordPress.
Author: Cody Ogden
Latest version: 0.0.5

# WP CSS Reset

This project uses modern Sass language features in `dart-sass` to provide some simple defaults for WordPress when used as a base, or components can be included and customized individually.

This project is a great companion to the `_s` starter theme.
npm package: @rocketstation/babel-plugin-component
Description: adds magic to `components/**/*.js`
Author: Rocket Station
Latest version: 1.0.1
Deprecated: use @rocketstation/babel-plugin-web-convension

# Babel Plugin Component

Babel Plugin Component adds magic to `components/**/*.js`

## Installation

```
npm i @rocketstation/babel-plugin-component
```

## Usage
`.babelrc`

```javascript
{ "plugins": ["@rocketstation/babel-plugin-component"], }
```
## Options

Name | Type | Vals | Default | Description
| - | - | - | - | - |
`metaNameAlias` | `String` | Any String | `'META_NAME'` | Defines meta name alias

## Scope
`components/**/*.js`

## Magic

- Processes `META_NAME({config})` with [@rocketstation/metaname](https://github.com/rocketstation/meta-name)

## License

Babel Plugin Component is licensed under the [MIT License](http://opensource.org/licenses/MIT)

Created by [RocketStation](http://rstation.io)
npm package: @rocketstation/babel-plugin-component-component
Description: adds magic to `components/**/component.js`
Author: Rocket Station
Latest version: 1.0.6
Deprecated: use @rocketstation/babel-plugin-web-convension

# Babel Plugin Component Component

Babel Plugin Component Component adds magic to `components/**/component.js`

## Installation

```
npm i @rocketstation/babel-plugin-component-component
```

## Usage
`.babelrc`

```javascript
{ "plugins": ["@rocketstation/babel-plugin-component-component"], }
```

## Options

Name | Type | Vals | Default | Description
| - | - | - | - | - |
`blackBoxAlias` | `String` | Any String | `'$'` | Defines black box alias

## Scope

`components/**/component.js`

## Magic

- Modifies `class {} or class Component {}` to `class PathToComponent {}`
- Modifies `$box(config)` to `$.element('div', config)`
- Modifies `$text(config)` to `$.element('span', config)`
- Modifies `$link(path, config)` to `$.element('a', { b: { href: path, ...b }, p, s })`
- Modifies `$img(path, text, config)` to `$.element('img', { b: { alt: text, src: path, ...b }, p })`
- Modifies `$shape(canvas, config)` to `$.element('svg', { b: { viewBox: canvas, ...b }, p, s })`
- Modifies `$path(shape, config)` to `$.element('path', { b: { d: shape, ...b }, p })`

## License

Babel Plugin Component Component is licensed under the [MIT License](http://opensource.org/licenses/MIT)

Created by [RocketStation](http://rstation.io)
npm package: @rocketstation/babel-plugin-component-index
Description: adds magic to `components/**/index.js`
Author: Rocket Station
Latest version: 3.0.0
Deprecated: use @rocketstation/babel-plugin-web-convension

# Babel Plugin Component Index

Babel Plugin Component Index adds magic to `components/**/index.js`

## Installation

```
npm i @rocketstation/babel-plugin-component-index
```

## Usage
`.babelrc`

```javascript
{ "plugins": ["@rocketstation/babel-plugin-component-index"], }
```

## Scope

`components/**/index.js`

## Magic

- Adds export * as actions from "./actions"; if component includes it
- Adds export * as (json|css|png|jpg|svg|gif|ttf|woff|woff2)Asset from "./asset.(json|css|png|jpg|svg|gif|ttf|woff|woff2)"; if component includes it
- Adds export * as A from "./atoms"; if component includes it
- Adds export * as Child from "./child"; if component includes it
- Adds export Component from "./component"; if component includes it
- Adds export Context from "./context"; if component includes it
- Adds export * as custom from "./custom"; if component includes it
- Adds export * as hocs from "./hocs"; if component includes it
- Adds export * as locale from "./locale"; if component includes it
- Adds export * as M from "./molecules"; if component includes it
- Adds export * as O from "./organisms"; if component includes it
- Adds export * as queries from "./queries"; if component includes it
- Adds import './sagas'; if component includes it
- Adds export * as skins from "./skins"; if component includes it

## License

Babel Plugin Component Index is licensed under the [MIT License](http://opensource.org/licenses/MIT)

Created by [RocketStation](http://rstation.io)
npm package: @rocketstation/babel-plugin-component-locale
Description: adds magic to `components/**/locale.js`
Author: Rocket Station
Latest version: 1.0.1
Deprecated: use @rocketstation/babel-plugin-convension

# Babel Plugin Component Locale

Babel Plugin Component Locale adds magic to `components/**/locale.js`

## Installation

```
npm i @rocketstation/babel-plugin-component-locale
```

## Usage
`.babelrc`

```javascript
{ "plugins": ["@rocketstation/babel-plugin-component-locale"], }
```
## Scope
`components/**/locale.js`

## Magic

- Adds `i18n.loadNamespaces('path-to-component')`
- Adds `export default $say('path-to-component')`

## License

Babel Plugin Component Locale is licensed under the [MIT License](http://opensource.org/licenses/MIT)

Created by [RocketStation](http://rstation.io)
npm package: @rocketstation/babel-plugin-component-sagas
Description: adds magic to `components/**/sagas.js`
Author: Rocket Station
Latest version: 1.1.2
Deprecated: use @rocketstation/babel-plugin-convension

# Babel Plugin Component Sagas

Babel Plugin Component Sagas adds magic to `components/**/sagas.js`

## Installation

```
npm i @rocketstation/babel-plugin-component-sagas
```

## Usage
`.babelrc`

```javascript
{ "plugins": ["@rocketstation/babel-plugin-component-sagas"], }
```
## Scope
`components/**/sagas.js`

## Magic

- Adds `import * as $ from 'redux-saga/effects'`
- Modifies from `export default function * () {}` to `sagaMiddleware.run(function * () {})`

## License

Babel Plugin Component Sagas is licensed under the [MIT License](http://opensource.org/licenses/MIT)

Created by [RocketStation](http://rstation.io)
npm package: @rocketstation/babel-plugin-convention
Description: reduces the boilerplate according to our convention
Author: Rocket Station
Latest version: 1.0.0

# Babel Plugin Convention

Babel Plugin Convention reduces the boilerplate according to our convention

## Installation

```bash
npm i -D @rocketstation/babel-plugin-convention
```

## Usage

```javascript
// babel.config.js
{ plugins: ['@rocketstation/babel-plugin-convention'] }
```

## Handlers

# universal

Scope: `**/*`

- change from `ID` to `'path-to-module'`

# web component & web segments

Scope: `web/**/component.js` || `web/**/segments.js` || `web/**/segments/*.js`

- add `import $ from '@rocketstation/black-box'`
- change from `$audio()` to `$('audio')`
- change from `$box()` to `$('div')`
- change from `$canvas()` to `$('canvas')`
- change from `$editor()` to `$('textarea')`
- change from `$form()` to `$('form')`
- change from `$frame()` to `$('iframe')`
- change from `$header()` to `$('h1')`
- change from `$img()` to `$('img')`
- change from `$input()` to `$('input')`
- change from `$label()` to `$('label')`
- change from `$link()` to `$('a')`
- change from `$meta()` to `$('meta')`
- change from `$option()` to `$('option')`
- change from `$path()` to `$('path')`
- change from `$script()` to `$('script')`
- change from `$select()` to `$('select')`
- change from `$shape()` to `$('svg')`
- change from `$text()` to `$('span')`
- change from `$title()` to `$('title')`
- change from `$video()` to `$('video')`

## License

Babel Plugin Convention is licensed under the [MIT License](http://opensource.org/licenses/MIT)

Created by [RocketStation](http://rstation.io)
npm package: @rocketstation/babel-plugin-web-convention
Description: reduces the boilerplate according to our web convention
Author: Rocket Station
Latest version: 5.2.0
Deprecated: use

# Babel Plugin Web Convension

Babel Plugin Web Convension reduces the boilerplate according to our convention

## Installation

```bash
npm i -D @rocketstation/babel-plugin-web-convension
```

## Usage

```javascript
// babel.config.js
{ plugins: ['@rocketstation/babel-plugin-web-convension'] }
```

## Handlers

# handler components

Scope: `**/*`

- change from `ID` to `'path-to-component'`

# handler component & segments

Scope: `**/component.js` || `**/segments.js` || `**/segments/*.js`


- add `import $ from '@rocketstation/black-box'`
- change from `$audio()` to `$('audio')`
- change from `$box()` to `$('div')`
- change from `$canvas()` to `$('canvas')`
- change from `$editor()` to `$('textarea')`
- change from `$frame()` to `$('iframe')`
- change from `$img()` to `$('img')`
- change from `$input()` to `$('input')`
- change from `$link()` to `$('a')`
- change from `$meta()` to `$('meta')`
- change from `$option()` to `$('option')`
- change from `$path()` to `$('path')`
- change from `$script()` to `$('script')`
- change from `$select()` to `$('select')`
- change from `$shape()` to `$('svg')`
- change from `$text()` to `$('span')`
- change from `$title()` to `$('title')`
- change from `$video()` to `$('video')`

## License

Babel Plugin Web Convension is licensed under the [MIT License](http://opensource.org/licenses/MIT)

Created by [RocketStation](http://rstation.io)
npm package: @rocketstation/black-box
Description: combines behavior, presentation, structure in one place
Author: Rocket Station
Latest version: 7.0.0

# Black Box

Black Box is a lightweight & powerful tool based on [React](https://github.com/facebook/react) & [Fela](https://github.com/rofrischmann/fela). It combines behavior, presentation, structure in one place

## Installation

```
npm i --save @rocketstation/black-box
```

## Usage

```javascript
import $ from '@rocketstation/black-box'

const MyComponent = ({ name, ...props }) =>
  $(
    'div',
    {
      onClick: () => { console.log('test') },
      skin: {
        backgroundColor: 'black',
        color: 'white',
      },
      ...props
    },
    'Hello',
    $('span', name),
    '!'
  )

ReactDOM.render(
  $(MyComponent, { name: 'John Doe' }),
  document.getElementById('app')
)
```

## Reserved Props

`skin` - if it is object or function, it will be removed from props & passed to Fela.combineRules

`key` - will be passed to the root component

## Motivation

BlackBox adds extra configuration to `React.createElement`

### Why not to use JSX

JSX is not JS. It tries to combine HTML & JS syntax inside JS. It limits JS features & adds new language hacks & overheads. Moreover, JSX requires closing tags

## License

Black Box is licensed under the [MIT License](http://opensource.org/licenses/MIT)

Created by [RocketStation](http://rstation.io)
npm package: @rocketstation/change-case
Description: it provides helpers to convert strings to kebab, snake lower & upper, camel lower & upper cases
Author: Rocket Station
Latest version: 2.0.0

# Change Case

Change Case is based on [just](https://github.com/angus-c/just). It provides helpers to convert strings to kebab, snake lower & upper, camel lower & upper cases

## Installation

```
npm i @rocketstation/change-case
```

## Usage

```javascript
import * as changeCase from '@rocketstation/change-case'

console.log(changeCase.c('foo bar', ['foo', 'bar'], 'foo', 'bar')) // fooBarFooBarFooBar
console.log(changeCase.p('foo bar', ['foo', 'bar'], 'foo', 'bar')) // FooBarFooBarFooBar
console.log(changeCase.sl('foo bar', ['foo', 'bar'], 'foo', 'bar')) // foo_bar_foo_bar_foo_bar
console.log(changeCase.su('foo bar', ['foo', 'bar'], 'foo', 'bar')) // FOO_BAR_FOO_BAR_FOO_BAR
console.log(changeCase.k('foo bar', ['foo', 'bar'], 'foo', 'bar')) // foo-bar-foo-bar-foo-bar
```

## Motivation

We were tired of writing this code again and again

## License

Change Case is licensed under the [MIT License](http://opensource.org/licenses/MIT)

Created by [RocketStation](http://rstation.io)
npm package: @rocketstation/check-if-type
Description: provides helpers to check if argument type is object, array, function
Author: Rocket Station
Latest version: 2.0.0

# Check If Type

Check If Type is based on [just](https://github.com/angus-c/just). It provides helpers to check if argument type is object, array, function

## Installation

```
npm i @rocketstation/check-if-type
```

## Usage

```javascript
import * as checkIfType from '@rocketstation/check-if-type'

console.log(checkIfType.isObj({})) // true
console.log(checkIfType.isObj([])) // false
console.log(checkIfType.isObj(() => {})) // false

console.log(checkIfType.isArr({})) // false
console.log(checkIfType.isArr([])) // true
console.log(checkIfType.isArr(() => {})) // false

console.log(checkIfType.isFn({})) // false
console.log(checkIfType.isFn([])) // false
console.log(checkIfType.isFn(() => {})) // true
```

## Motivation

We were tired of writing this code again and again

## License

Check If Type is licensed under the [MIT License](http://opensource.org/licenses/MIT)

Created by [RocketStation](http://rstation.io)
npm package: @rocketstation/hsla
Description: creates, modifies, stringifies HSLA colors
Author: Rocket Station
Latest version: 4.1.0

# HSLA

HSLA creates, modifies, stringifies HSLA colors

## Installation

```
npm i @rocketstation/hsla
```

## Usage

```javascript
import hsla from '@rocketstation/hsla'

console.log(hsla(0, 0, 0)()) // hsla(0, 0%, 0%, 1)
console.log(hsla('hsl(0, 0%, 0%)')()) // hsla(0, 0%, 0%, 1)

console.log(hsla(0, 0, 0, 100)()) // hsla(0, 0%, 0%, 1)
console.log(hsla('hsla(0, 0%, 0%, 1)')()) // hsla(0, 0%, 0%, 1)

console.log(hsla(0, 0, 0, 100)(50)) // hsla(0, 0%, 0%, 0.5)
console.log(hsla(0, 0, 0, 100)({ H: 360 S: 100 L: 100 A: 0 }) // hsla(360, 100%, 100%, 0)
console.log(hsla(180, 50, 50, 50)({ h: 180, s: 50, l: 50, a: -50 }) // hsla(360, 100%, 100%, 0)

console.log(hsla(999, 999, 999, 999)()) // hsla(360, 100%, 100%, 1)
console.log(hsla(-999, -999, -999, -999)()) // hsla(0, 0%, 0%, 0)
console.log(hsla(0.999, 0, 0)()) // hsla(1, 0%, 0%, 1)
```

## Motivation

We were tired of writing this code again and again

## License

HSLA is licensed under the [MIT License](http://opensource.org/licenses/MIT)

Created by [RocketStation](http://rstation.io)
npm package: @rocketstation/local-storage
Description: creates your personal bubble inside local storage. It assigns object to specific key and returns helpers for modifying it
Author: Rocket Station
Latest version: 3.0.0

# Local Storage

Local Storage creates your personal bubble inside local storage. It assigns object to specific key and returns helpers for modifying it

## Installation

```
npm i @rocketstation/local-storage
```

## Usage

```javascript
import localStorage from '@rocketstation/local-storage'

const ls = localStorage('key')

ls.get() // {}

ls.set({ foo: 'bar' })
ls.get() // { foo: 'bar' }

ls.remove('foo')
ls.get() // {}

ls.add('foo', 'bar')
ls.get() // { foo: 'bar }

ls.update({ bar: 'foo' })
ls.get() // { foo: 'bar,  bar: 'foo'  }

```

## Motivation

We were tired of writing this code again and again

## License

Local Storage is licensed under the [MIT License](http://opensource.org/licenses/MIT)

Created by [RocketStation](http://rstation.io)
npm package: @rocketstation/meta-name
Description: parses path to name based on provided config
Author: Rocket Station
Latest version: 3.0.1

# Meta Name

Meta Name parses path to name based on provided config

## Installation

```
npm i @rocketstation/meta-name
```

## Usage

```javascript
import parser from '@rocketstation/meta-name'

const path = 'dir/name.ext'

const parse = parser({
  dispEnd: 0,
  dispStart: 0,
  exts: ['ext'],
  filters: [],
  prefix: '',
  roots: ['dir'],
  suffix: [],
  template: ['dir', 'name'],
})

console.log(parse(path, 'k')) // dir-name
```

## Config

  `parser()`

  `dispEnd` - amount of dirs from root to be omitted. Default is `0`

  `dispStart` - amount of dirs from file to be omitted. Default is `0`

  `exts` - array of extensions to be handled. If provided, paths with invalid extensions will be omitted. Default is `undefined`

  `filters` - array of strings which must be omitted. Default is `[]`

  `prefix` - string or array of strings to be added before result. Default is `undefined`

  `roots` - array of roots to be handled. If provided, paths with invalid roots will be omitted. Default is `undefined`

  `suffix` - string or array of strings to be added after result. Default is `undefined`

  `template` - array of strings. supported values are `'root', 'dir', 'base', 'name', 'ext'`. Default is `['dir', 'name']`

  `parse()`

  `source` - any valid path. Default is `''`
  `case` - Default is `'c'`. Any case kind from [@rocketstation/change-case](https://github.com/rocketstation/change-case)

## Motivation

We were tired of writing this code again and again

## License

Meta Name is licensed under the [MIT License](http://opensource.org/licenses/MIT)

Created by [RocketStation](http://rstation.io)
npm package: @rocketstation/redux-action
Description: provides reducer, which is used to process any change of the state, & action creator, which initiates any change of the state
Author: Rocket Station
Latest version: 2.0.0

# Redux Action

Redux Action provides reducer, which is used to process any change of the state, & action creator, which initiates any change of the state

## Installation

```
npm i @rocketstation/redux-action
```

## Usage

```javascript
import { createReducer } from 'redux-action'

createStore(createReducer({}))
```

```javascript
import { changeState } from 'redux-action'

dispatch(changeState((s) => s))
```

## Motivation

We were tired of writing this code again and again

## License

Redux Action is licensed under the [MIT License](http://opensource.org/licenses/MIT)

Created by [RocketStation](http://rstation.io)
npm package: @rocketswap/uikit
Description: Set of UI components for RocketSwap projects
Latest version: 1.0.0

# 🚀 RocketSwap UIkit

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

RocketSwap UIkit is a set of React components and hooks used to build pages on the RocketSwap project.

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

## Install

`yarn add @rocketswap/uikit`

## npm

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

## Setup

### Theme

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

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

### Reset

A reset CSS is available as a global styled component.

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