open-index/open-npm huggingface dataset:
npm package: @infinityloop.labs/fronted-core
Description: Reusable services for React + Redux Toolkit projects, including popup service integration with `@infinityloop.labs/event-bus`.
Latest version: 0.0.1

# fronted-core

Reusable services for React + Redux Toolkit projects, including popup service integration with `@infinityloop.labs/event-bus`.

## Install

```bash
npm i @infinityloop.labs/fronted-core
```

## Popup service

```ts
import { Actions, Reducer, popup } from '@infinityloop.labs/fronted-core'

// reducer
const reducer = combineReducers({
  popup: Reducer,
})

// global service injector usage
// <ServiceInjector services={[popup.service]} />

// actions
Actions.addModal({ id: 'id', title: 'Title' })
Actions.removeModal({ id: 'id' })
```
npm package: @infinityloop.labs/frontend-modules
Description: Reusable services for React + Redux Toolkit projects, including popup service integration with `@infinityloop.labs/event-bus`.
Latest version: 0.0.3

# frontend-modules

Reusable services for React + Redux Toolkit projects, including popup service integration with `@infinityloop.labs/event-bus`.

## Install

```bash
npm i @infinityloop.labs/frontend-modules
```

## Popup service

```ts
import { Actions, Reducer, popup } from '@infinityloop.labs/frontend-modules'

// reducer
const reducer = combineReducers({
  popup: Reducer,
})

// global service injector usage
// <ServiceInjector services={[popup.service]} />

// actions
Actions.addModal({ id: 'id', title: 'Title' })
Actions.removeModal({ id: 'id' })
```
npm package: @infinityswapofficial/token-lists
Description: InfinitySwap Token Lists specification
Author: InfinitySwap
Latest version: 0.5.2

## TOKEN LIST

This package includes a JSON schema for Infinityswap's token lists, and TypeScript utilities for working with these token lists.

The JSON schema represents the technical specification for a token list that are supported on the Infinityswap platform.
Current token standard supported are IS20, ICP....
Any addition of a token to this list gets validated against the JSON schema in the CI.

JSON Schema $id
The JSON schema ID is https://infinityswap.one/tokenlist.schema.json

### USAGE

```js
import { TokenList } from '@infinityswap/token-list'

function usage() {

  // get currently listed tokens
  // takes an optional parameter env  ie ("testnet" | "prod")
  const list = await TokenList.create("testnet")

  // select TNK1 from the list
  const tkn1 = list.find(token => token.symbol === 'TKN1');

  // access TKN1 metadata
  tkn1.id;
  tkn1.name;
  tkn1.symbol;
  // ...etc


  // Load TKN1 canister specific info
  await tkn1.getCanisterInfo();

  // access info such as wasm hash, canister controllers
  tnk1.wasmHash;
  tkn1.controllers;

}
```
npm package: @infinium/hydro
Description: A fliud set of React components.
Author: Infinium LLC.
Latest version: 2.1.7

# Hydro

Hydro is a set of general, fluid React components. It's like mini UI kit.

## Links

- [**Live demo**](https://neqd5.csb.app/)
- [Sandbox link](https://codesandbox.io/s/hydro-neqd5?file=/src/App.js)

To learn how to use Hydro, [**read the wiki**.](https://github.com/Infinium8/Hydro/wiki)

## Installation

`yarn add @infinium/hydro`

or

`npm install @infinium/hydro`

## Usage

First, import the global stylesheet:

```js
import '@infinium/hydro/dist/style.css';
```

Now, just import any component as you need it.

```js
import { Button } from '@infinium/hydro';

const App = () => (
	<Button>Click me</Button>
);
```

## Features

- Built-in, _working components_ by default.
- Excellent conformity to accessibility. Every component, within reason, is usable directly from the keyboard.
- Standard keyboard events are on by default. For instance, using `esc` to close a Modal.
- Beautiful (in our opinion) default styles, with excellent support for altering the variants, etc. of each component.
- Excellent, usable defaults

## Components

All of the components are written in TypeScript. Moreover, each of the component prop types are exported individually. If you want to extract the props to an object, you can do so like:

```js
import type { TButton } from '@infinium/hydro';

const buttonProps: TButton = {
	// ...
}
```

If you're not using TypeScript, **you can read the wiki to learn about each component.**
npm package: @infinium/tree
Description: Work with tree structures in JavaScript
Author: Infinium LLC.
Latest version: 1.0.0

# Tree

A simple class representing a Tree-like data structure in JavaScript.

## Installation

`yarn add @infinium/tree`

or 

`npm install @infinium/tree`

## Basic initialization

```js
import Tree from '@infinium/tree';

// or
// const Tree = require('@infinium/tree');

const tree = new Tree();

tree.print(); // {"id":"root","data":{},"children":[]}
```

## Basic Tree Structure

The default tree, as you saw above, looks like this:

```json
{
    "id": "root",
    "data": {},
    "children": []
}
```

That is, there are no siblings for the base node, `root`. You can only ever create children.

To get the current tree in its entirety, simply access the `root` value on the current instance: `tree.root`.

The object you see above is a `Node`. It has three properties: `id: string`, `data: any`, `children: Node[]`

You can put anything you need into the `data` property.

## Usage

The `Tree` class exports a few methods to allow you to modify and traverse the tree as necessary. This section will document these methods.

### Generators

These methods recursively traverse the tree.

Use [this guide](https://www.geeksforgeeks.org/tree-traversals-inorder-preorder-and-postorder/) for understanding which function you should use.

#### `preTraversal(root: string)`

Returns a Generator that loops over each child node recursviely from starting point `root`. It defaults to the namesake. That is, if you want to traverse the entire tree, leave this argument empty.

**Usage:**

```js
for (let node of tree.traverse()) {
    console.log(node);
}
```

#### `postTraversal(root: string)`

Similar to above, but a Post-Order Traversal approach.

### Instance methods

#### `insert(parent: string, id: string, data: TNode : undefined)`

Create a new node at a specific position, `parent`.

That is, to insert directly to the top-level:

```js
tree.insert('root', 'new_node', { name: 'This is a new node.' });
tree.print()
```

This results in:

```json
{
    "id": "root",
    "data": {},
    "children":[
        {
            "id": "new_node",
            "data": {},
            "parent": "root",
            "children": []
        }
    ]
}
```

#### `find(id: string)`

Returns a Node with the specified `id`, if found.

**Usage:**

```js
console.log(tree.find('root').id) // "root"
```

#### `remove(id: string)`

Removes a Node with the specified `id`.

**Usage:**

```js
console.log(tree.remove('root')) // "false"
```

Note: You can't remove `root` because it is the base object for which all traversals operate in.

```js
console.log(tree.remove('new_node')) // "true"
```

### Other methods

#### `stringify()`

Returns a string value of the Tree.

```js
console.log(tree.stringify());
```

#### `print()`

Logs the current Tree value to the console.

```js
tree.print();
```
npm package: @infinizhen/react-webpack-babel-boilerplate
Description: A really simple and minimalistic React 18, Webpack 5 and Babel 7 boilerplate project.
Author: Miguel Rodríguez Bonhome
Latest version: 2.182.58-8.723.12

# REACT18-WEBPACK5-BABEL7 BOILERPLATE

This is a really simple and minimalistic React 18, Webpack 5 and Babel 7 boilerplate project.

By simple and minimalistic i mean **simple and minimalistic**.
It is just that. A simple project, with the most common dependencies (both prod and dev) for a minimal React project setup.

It doesn't include any test suites or CSS frameworks. It doesn't even include a router.

# Project goal

The goal is to save me (and maybe you) like 10 or 15 minutes setting up the things i will need to use on every new react project. Sometimes i don't need CSS, sometimes i don't test dumb things, sometimes a project doesn't even feature a single link.

So that's why is this simple. This is **my** bare minimum to start working on even the most trivial of projects.

# Usage

## Install with npm and execute with npx!

Install globally with npm:

`npm i @infinizhen/react-webpack-babel-boilerplate -g`

Then you can run the package a là CRA:

`npx infinizhen your-app`

or

`npx react-webpack-babel-boilerplate my-app`

## Clone the repo!

`git clone https://github.com/Infinizhen/react-webpack-babel-boilerplate.git`

# Project Structure

The project structure is just suited to my most common needs.
It is not important and obviously you don't need to follow that structure at all.

- All the code is stored in **/src**.

  > The entry point of the project is **/src/index.js**. This file renders a one-liner placeholder Component in that very file wich its only intention is to act as, well... a placeholder. It just renders a strings confiriming everything went okay when you run the app for the first time.

  > I usually write a layout component/s wich then will show other components, these are stored in **/src/layout/**.

  > Then i also usually diferentiate between "components" and "controls" even if they both are technically components, so i separate them in **/src/components/** and **/src/controls/** respectively.

- Webpack is configured to build a bundle.js in the **/public** folder, using **/src/index.html** as the template.

## package.json scripts

The most easy ones for webpack 5:

> `serve` runs `npm run webpack serve --mode development`

> `build` runs `npm run webpack --mode production`

# Configurations

## Webpack

It has the babel loader, and the style / css loader.
Even if this project comes with no css frameworks or files, this configuration is included for obvious reasons.

It also features html-webpack-plugin and mini-css-extract-plugin.

## Babel

This project uses a .babelrc file with @babel/preset-env and @babel/preset-react.

# Other features

## .browserslistrc

Babel will transpile to alive browsers with 0.25% market share or more.
npm package: @infinizhen/rpg-awesome-continued
Description: A fantasy themed font and CSS toolkit. Originally made by @nagoshiashumari and continued by @Infinizhen.
Author: Miguel Rodríguez
Latest version: 1.0.6

# [RPG Awesome Continued](http://nagoshiashumari.github.io/Rpg-Awesome/)
### A fantasy themed font and CSS toolkit.

RPG Awesome is a suite of 495 pictographic, rpg and fantasy themes icons for easy scalable vector graphics on websites, continued by [Miguel Rodríguez](https://github.com/Infinizhen) and originally created by [Daniela Howe](https://github.com/nagoshiashumari) and [Ivan Montiel](http://github.com/idmontie).

Super shoutout to [Game Icons](https://game-icons.net/) for providing a library of SVG icons that we used to create this project 🎉.

## Installation

### NPM

```
npm add --save @infinizhen/rpg-awesome-continued
```

Then in your code, you can use rpg-awesome by pathing to it:

```
./node_modules/rpg-awesome/css/rpg-awesome-continued.min.css
```

If you are using Sass, you can import it directly:

```
@import "node_modules/@infinizhen/rpg-awesome-continued/scss/rpg-awesome-continued";
```

## Developing

This project uses NPM and Grunt to compile SCSS into CSS usable by browsers.
The project also requires for you to have Ruby installed:

```sh
npm install
gem update --system && gem install scss-lint
grunt
```

## Generating and Adding New Icons

We have split up the generation process of the `/fonts` directory to
[this repo](https://github.com/nagoshiashumari/rpg-awesome-raw).

Any new icons will need to be added to that repo first. Then follow the steps located in that repo's documentation for generating new `.eot`, `.svg`, `.ttf`, and `.woff` files.

Note that when adding new icons to the font files, you will need to update the `scss/_variables.scss` file with all of the new offsets.


## License
- The Rpg Awesome font is licensed under the SIL OFL 1.1:
  - http://scripts.sil.org/OFL
- Rpg Awesome Continued CSS and SASS files are licensed under the MIT License:
  - http://opensource.org/licenses/mit-license.html
- The Rpg Awesome Continued documentation is licensed under the CC BY 3.0 License:
  - http://creativecommons.org/licenses/by/3.0/
- Attribution is appreciated but not required
- Full details: https://github.com/infinizhen/Rpg-Awesome-Continued/blob/master/LICENSE.md
npm package: @infinum/jest
Description: Set of util functions for easier jest setup that supports both server and browser environment.
Author: Infinum JavaScript Team
Latest version: 3.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @infinum/jest

Set of util functions for easier jest setup that supports both server and browser environment.

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @infinum/jest jest
# or
npm i @infinum/jest jest
```

## Usage

### Basic

```js
// jest.config.js
const { infinumJest } = require('@infinum/jest');

const createJestConfig = infinumJest();

module.exports = createJestConfig();
```

### With custom config

```js
// jest.config.js
const { infinumJest } = require('@infinum/jest');

const createJestConfig = infinumJest();

/** @type {import('jest').Config} */
const customConfig = {
	collectCoverage: true,
	collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'],
};

module.exports = createJestConfig(customConfig);
```

### With @infinum/jest/environment

```js
// jest.config.js
const { infinumJest } = require('@infinum/jest');

const createJestConfig = infinumJest();

/** @type {import('jest').Config} */
const customConfig = {
	testEnvironment: '@infinum/jest/environment',
};

module.exports = createJestConfig(customConfig);
```

## Contribution

Yes please! See the [contributing guidelines](https://github.com/infinum/react-nuts-and-bolts/blob/master/CONTRIBUTING.md) for details.

## Licence

This project is licensed under the terms of the [MIT license](https://github.com/infinum/react-nuts-and-bolts/blob/master/LICENSE).

# Credits

`jest` is maintained and sponsored by
[Infinum](https://www.infinum.com).

<p align="center">
  <a href='https://infinum.com'>
    <picture>
        <source srcset="https://assets.infinum.com/brand/logo/static/white.svg" media="(prefers-color-scheme: dark)">
        <img src="https://assets.infinum.com/brand/logo/static/default.svg">
    </picture>
  </a>
</p>