open-index/open-npm huggingface dataset:
npm package: @resora/plugin-clear-router
Description: Opt-in bridge plugin for using resora return values inside clear-router handlers.
Latest version: 0.1.1

# @resora/plugin-clear-router

Opt-in bridge plugins for using `resora` resources inside `clear-router` routes and controller handlers without changing either core package.

## Why

`resora` resources are thenables, while `clear-router` resolves returned values from both inline handlers and controller actions. Registering these plugins lets Resora bind the active clear-router request context before the handler runs, so plain `return new Resource(...)` works for direct callbacks and controller methods.

## Usage

```ts
import { registerPlugin } from 'resora';
import { clearRouterExpressPlugin } from '@resora/plugin-clear-router';

registerPlugin(clearRouterExpressPlugin);
```

```ts
import { Router, Controller } from 'clear-router';
import { Resource } from 'resora';

class UserController extends Controller {
  index() {
    return new Resource({ id: 1, name: 'Ada' });
  }
}

Router.get('/users', [UserController, 'index']);
```

```ts
import { registerPlugin } from 'resora';
import { clearRouterH3Plugin } from '@resora/plugin-clear-router';

registerPlugin(clearRouterH3Plugin);
```

## Exports

- `clearRouterExpressPlugin`
- `clearRouterH3Plugin`
- `clearRouterPlugin`
npm package: @resource-sentry/core
Description: Bring static resources to JavaScript.
Author: Nicolas Siver
Latest version: 1.1.1

# <img src='./identity/logo.svg' alt='Recource Sentry Logo' height='140' />

![Version](https://img.shields.io/npm/v/@resource-sentry/core.svg)
![Dependencies](https://david-dm.org/resource-sentry/core.svg)

Bring static resources (SCSS, JSON, XML, Property Files, etc.) to JavaScript.
The modular architecture where every static resource could be interpreted differently.

## Table of contents:

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 

- [Motivation](#motivation)
- [Configuration](#configuration)
  - [Config](#config)
  - [Settings](#settings)
- [Convention](#convention)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->


## Motivation

Multi-language support? Project variables. Style variables. What if you want utilize power of namespaces in XML to build a collaborative source for multi-language support? 
What if you want to store style-related variables in SCSS, but you need to make some computation in runtime. Most of the data formats are not supported by browsers, - solution is to compile resources before code will be executed on user's machine and use "resources" as an efficient JavaScript code.

## Configuration

The main configuration is an Object. Configuration can be provided as a `rs.config.js` file.
Every configuration should include the root property `config` and optional `settings`.

Example: 

```js
module.exports = {config: {}, settings: {}};
```

### Config

Required. Determines about readers and writers.

- `input <Array>`, list of reader instances
- `output <Writer>`, instance of a writer

### Settings

Optional. Determines behavior of the tool.

- `watch <Boolean|Object>`, enables file watcher for reader inputs. Object could be used to provide `Chokidar` options.

## Convention

Custom readers and writers should use the same prefix.

- Reader: `rs-reader-xxx`. Example: `rs-reader-fast-xml`
- Writer: `rs-writer-xxx`. Example: `rs-writer-es3`
npm package: @resource-sentry/reader-json
Description: Resource Sentry JSON Reader.
Author: Nicolas Siver
Latest version: 1.0.0

# Reader: JSON

Combines all properties from a single or directory of JSON files.
The reader can walk through deeply nested objects with some conventional limitations.

- Visits only first element of Array
- Adds parent property to the qualifying name
- Converts `Boolean` to a `Number` (Example: 0 or 1)
- Converts `null` to a `NULL <String>`
- Converts empty `Array` to a `NULL <String>`

![Version](https://img.shields.io/npm/v/@resource-sentry/reader-json.svg)
![Dependencies](https://david-dm.org/resource-sentry/reader-json.svg)

## Installation

> yarn add --dev @resource-sentry/reader-json

## Configuration

- `entry`, path to a single _or_ a directory of JSON files
- `deep`, limit for nesting. Where `0` disables walk through nested objects. By default there is no limitation if this _optional_ parameter is not provided.

## Example

```json
{
  "title": "My Title",
  "desc": {
    "header": "Big Header"
  }
}
```

JSON will be explored and added into `rs.js` file ready for use in production code.

```js
import * as Rs from './rs';

Rs.getResource(Rs.Text.TITLE); // Return "My Title"
Rs.getResource(Rs.Text.DESC_HEADER); // Return "Big Header"
```
npm package: @resource-sentry/reader-localization
Description: Resource Sentry localization JSON reader.
Author: Nicolas Siver
Latest version: 1.1.0

# Reader: Localization

Recursively walks through file-system and builds optimized SVG snippets ready to be injected in HTML.
Reader complies with `RFC 5646`, `RFC 5234` specifications.

![Version](https://img.shields.io/npm/v/@resource-sentry/reader-localization.svg)
![Dependencies](https://david-dm.org/resource-sentry/reader-localization.svg)

## Installation

> yarn add --dev @resource-sentry/reader-localization

This reader replaces the Reader for JSON key values.
When the English language is analyzed, the same keys for texts will be created as if it would be used in Reader JSON.
It's required that language files have the same structure, i.e. all languages have the same set of keys.

## Configuration

English is considered a default language.

- `entry`, path to a directory with JSON language files.
- `soft`, skips language tag validation

## Example: Language File

```json
{
  "text": {
    "message": "Hello World"
  }
}
```

Reader will build a vocabulary of available languages and represent them in `rs.js` file ready for use in production code.
Maximum support available is up to:

- `255` languages
- `255` extended language tags
- `63` writing system variations
- `63` linguistic variations associated with or appropriate to a specific country, territory, or region

```javascript
import Rs from './rs';

Rs.getText(Rs.Text.TEXT_MESSAGE, 'en-US'); // "Hello World"
```
npm package: @resource-sentry/reader-properties
Description: Resource Sentry Properties Reader.
Author: Nicolas Siver
Latest version: 1.0.0

# Reader: Properties

Extracts all values from the properties file. Ignores empty lines and comment lines (`#` and `!`).
Supports multi-line properties. 

Note: properties files are popular in Java world.

![Version](https://img.shields.io/npm/v/@resource-sentry/reader-properties.svg)
![Dependencies](https://david-dm.org/resource-sentry/reader-properties.svg)

## Installation

> yarn add --dev @resource-sentry/reader-properties

## Configuration

- `entry`, path to a Properties file.

## Example

```
# File: "my-demo.properties"
hello:world
easyCount = 8
```

Properties will be compiled into `rs.js` file ready for use in production code.

```js
import Rs from './rs';

Rs.getResource(Rs.Text.HELLO); // Returns "world"
Rs.getResource(Rs.Value.EASY_COUNT); // Returns 8
```
npm package: @resource-sentry/reader-scss
Description: Resource Sentry SCSS Reader.
Author: Nicolas Siver
Latest version: 1.0.0

# Reader: SCSS

Extracts all variables from the provided `.scss` file. This plugin does not perform recursive walk, but it works with a single file.

Supports: `color`, `dimension`, `operation`, `text`, `simple value` and `variable` variables.

![Version](https://img.shields.io/npm/v/@resource-sentry/reader-scss.svg)
![Dependencies](https://david-dm.org/resource-sentry/reader-scss.svg)

## Installation

> yarn add --dev @resource-sentry/reader-scss

## Configuration

- `entry`, path to SCSS file.

## Example

```scss
$prf-value-one-hundred: 100;
$breakpoint: 768px;
$rhythm: 4px;
$padding-s: 2*$rhythm;
```

SCSS variables will be compiled into `rs.js` file ready for use in production code.

```js
import Rs from './rs';

Rs.getResource(Rs.Value.PRF_VALUE_ONE_HUNDRED); // Return 100
Rs.getResource(Rs.Dimension.BREAKPOINT); // Return 768
Rs.getResource(Rs.Dimension.RHYTHM); // Return 4
Rs.getResource(Rs.Dimension.PADDING_S); // Return 8
```
npm package: @resource-sentry/reader-svg
Description: Resource Sentry SVG Reader.
Author: Nicolas Siver
Latest version: 1.2.0

# Reader: SVG

Recursively walks through file-system and builds optimized SVG snippets ready to be injected in HTML.

![Version](https://img.shields.io/npm/v/@resource-sentry/reader-svg.svg)
![Dependencies](https://david-dm.org/resource-sentry/reader-svg.svg)

## Installation

> yarn add --dev @resource-sentry/reader-svg

## Configuration

- `entry`, path to a directory with SVG files.

## Example

```
-- [images]
---- logo.svg
---- header.svg
---- [media]
------ play.svg
------ stop.svg
```

SVG files will be optimized and added into `rs.js` file ready for use in production code.

```js
import Rs from './rs';

Rs.getResource(Rs.Graphic.LOGO); // Returns XML code for the "logo.svg" asset
Rs.getResource(Rs.Graphic.MEDIA_STOP); // Returns XML code for the "stop.svg" asset
```
npm package: @resource-sentry/writer-es2015
Description: Resource Sentry Writer with an output target as ECMAScript 2015.
Author: Nicolas Siver
Latest version: 1.4.1

# Writer: ES2015

Resource Sentry Writer with an output target as ECMAScript 2015.

Represents category types as ES6 module with simple API.

Use `Rs.getText(ID, locale)` for multi-language support.
Current implementation performs RFC 4647 Lookup to find the best language for the provided locale.

![Version](https://img.shields.io/npm/v/@resource-sentry/writer-es2015.svg)
![Dependencies](https://david-dm.org/resource-sentry/writer-es2015.svg)

## Installation

> yarn add --dev @resource-sentry/writer-es2015

## Configuration

- `path`, output directory for the final JavaScript `rs.js` file.

## Example

After all reader have finished the work. Writer would produce `rs.js` resource file at the provided destination.

```js
import Rs from './rs';

Rs.getResource(Rs.Text.HELLO); 
Rs.getResource(Rs.Value.EASY_COUNT); 
Rs.getText(Rs.Text.WORLD, 'en-US');
```
npm package: @resourcebundles/cli
Description: CLI for inspecting and manipulating Resource Bundles
Author: uhyo
Latest version: 0.1.2

# `@resourcebundles/cli`

CLI to inspect and create Resource Bundles.

## Installation

```sh
npm install -g @resourcebundles/cli
```

## Usage

### Inspecting Resource Bundle Metadata

```sh
rbn read bundle.rbn
```

Shows metadata of resource bundles (URLs of resources in given bundle, size of each resource and headers of each resource). Following output formats are supported via the `--output` option:

- `human-readable` (default): human-readable outputs
- `json`: JSON that includes full metadata
- `url-only`: resource URLs only, one URL per line

### Extracting a Resource Bundle

```sh
rbn extract bundle.rbn --out outDir/
```

Extracts all resources in given resource bundle as files.

HTTP headers associated to each resource are ignored.

### Creating a Resource Bundle

```sh
rbn create file1.txt file2.txt file3.txt > bundle.rbn
```

Outputs a Resouce Bundles that includes all given files.

By default, the `content-type` header is automatically generated for each file based on file names. Also, the `:status` pseudo-header is automatically set to `200`.

To include other headers, pass like `-H name=value -H name2=value2`. Given headers are set to all resources in the generated bundle. Unfortunately, currently there is no option to set response headers individually (expect for automatically generated `content-type`).

By default, relative paths from the current directory is used as resource URLs. To change the directory from which relative paths are calculated, use `--rootDir` option.
npm package: @resourcebundles/static-server
Description: Static server that serves from Resource Bundle
Author: uhyo
Latest version: 0.1.1

# `@resourcebundles/static-server`

Server that serves from a Resource Bundle.

Try out with `example/example.rbn` in this repository!

## Installation

```sh
npm install -g @resourcebundles/static-server
```

## Usage

### CLI

```sh
rbn-static-server bundle.rbn
```

#### options

- `--port`: the port to listen to. Default: `8080`
- `--host`: the address to bind. Default: `127.0.0.1`

### Fastify Plugin

```ts
import fastify from "fastify";
import { resourceBundleStaticPlugin } from "@resourcebundles/static-server";

const app = fastify();

app.register(resourceBundleStaticPlugin, {
  file: "./bundle.rbn",
});
```
npm package: @resourcefulhumans/rheactor-aws-lambda
Description: Core components for RESTful AWS lambda endpoints
Author: Resourceful Humans GmbH
Latest version: 3.2.0

# rheactor-aws-lambda

[![npm version](https://img.shields.io/npm/v/@resourcefulhumans/rheactor-aws-lambda.svg)](https://www.npmjs.com/package/@resourcefulhumans/rheactor-aws-lambda)
[![Build Status](https://travis-ci.org/ResourcefulHumans/rheactor-aws-lambda.svg?branch=master)](https://travis-ci.org/ResourcefulHumans/rheactor-aws-lambda)
[![monitored by greenkeeper.io](https://img.shields.io/badge/greenkeeper.io-monitored-brightgreen.svg)](http://greenkeeper.io/) 
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)
[![semantic-release](https://img.shields.io/badge/semver-semantic%20release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![Test Coverage](https://codeclimate.com/github/ResourcefulHumans/rheactor-aws-lambda/badges/coverage.svg)](https://codeclimate.com/github/ResourcefulHumans/rheactor-aws-lambda/coverage)
[![Code Climate](https://codeclimate.com/github/ResourcefulHumans/rheactor-aws-lambda/badges/gpa.svg)](https://codeclimate.com/github/ResourcefulHumans/rheactor-aws-lambda)

Core components for RESTful AWS lambda endpoints.

See [`rheactor-image-service`](https://github.com/ResourcefulHumans/rheactor-image-service/blob/master/package.json) for a concrete usage example.
npm package: @resourcefulhumans/rheactor-bdd-contexts
Description: Yadda BDD contexts for RHeactor applications.
Author: Resourceful Humans
Latest version: 2.1.0

# rheactor-bdd-contexts

[![Build Status](https://travis-ci.org/ResourcefulHumans/rheactor-bdd-contexts.svg?branch=master)](https://travis-ci.org/ResourcefulHumans/rheactor-bdd-contexts)
[![monitored by greenkeeper.io](https://img.shields.io/badge/greenkeeper.io-monitored-brightgreen.svg)](http://greenkeeper.io/) 
[![npm version](https://img.shields.io/npm/v/@resourcefulhumans/rheactor-bdd-contexts.svg)](https://www.npmjs.com/package/@resourcefulhumans/rheactor-bdd-contexts)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)
[![semantic-release](https://img.shields.io/badge/semver-semantic%20release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![Code Climate](https://codeclimate.com/github/ResourcefulHumans/rheactor-bdd-contexts/badges/gpa.svg)](https://codeclimate.com/github/ResourcefulHumans/rheactor-bdd-contexts)

[Yadda](https://github.com/acuminous/yadda) BDD contexts for [RHeactor applications](https://github.com/search?utf8=%E2%9C%93&q=topic%3Arheactor+org%3AResourcefulHumans&type=Repositories&ref=searchresults).
npm package: @resourcefulhumans/rheactor-errors
Description: A collection of errors
Author: Resourceful Humans
Latest version: 1.1.0

# rheactor-errors

[![Build Status](https://travis-ci.org/ResourcefulHumans/rheactor-errors.svg?branch=master)](https://travis-ci.org/ResourcefulHumans/rheactor-errors)
[![npm version](https://img.shields.io/npm/v/@resourcefulhumans/rheactor-errors.svg)](https://www.npmjs.com/package/@resourcefulhumans/rheactor-errors)
[![monitored by greenkeeper.io](https://img.shields.io/badge/greenkeeper.io-monitored-brightgreen.svg)](http://greenkeeper.io/) 
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)
[![semantic-release](https://img.shields.io/badge/semver-semantic%20release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![Test Coverage](https://codeclimate.com/github/ResourcefulHumans/rheactor-errors/badges/coverage.svg)](https://codeclimate.com/github/ResourcefulHumans/rheactor-errors/coverage)
[![Code Climate](https://codeclimate.com/github/ResourcefulHumans/rheactor-errors/badges/gpa.svg)](https://codeclimate.com/github/ResourcefulHumans/rheactor-errors)

A collection of errors

Note that Babel [does not support extending builtin classes](https://github.com/babel/babel/commit/3878bd812c73bdd18b1011be59515dad985940fd), so we use [this way](http://stackoverflow.com/a/35858868) to create the error objects:
  
```javascript
class MyError {
  constructor(message) {
    this.name = MyError.name
    this.message = message
    this.stack = (new Error(message)).stack
  }
}
MyError.prototype = Object.create(Error.prototype)
```
npm package: @resourcefulhumans/update-lambda-environment-config
Description: A helper script to update lambda environment variables with the current version and deploy time
Author: Resourceful Humans
Latest version: 1.1.0

# update-lambda-environment-config

[![npm version](https://img.shields.io/npm/v/@resourcefulhumans/update-lambda-environment-config.svg)](https://www.npmjs.com/package/@resourcefulhumans/update-lambda-environment-config)
[![Build Status](https://travis-ci.org/ResourcefulHumans/update-lambda-environment-config.svg?branch=master)](https://travis-ci.org/ResourcefulHumans/update-lambda-environment-config)
[![monitored by greenkeeper.io](https://img.shields.io/badge/greenkeeper.io-monitored-brightgreen.svg)](http://greenkeeper.io/) 
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)
[![semantic-release](https://img.shields.io/badge/semver-semantic%20release-e10079.svg)](https://github.com/semantic-release/semantic-release)

This script takes the output of `aws lambda get-function-configuration` and returns an updated environment configuration string with added version, deployTime and node environment from environment variables.

## Example

Given this is the configuration for your lambda:
    
    { 
       "FunctionName": "myLambdaFunction", 
       … 
       "Environment": { 
           "Variables": { 
               "FOO": "BAR" 
           } 
        } 
    } 
    
If called like this:

    $ VERSION=1.2.3
    $ DEPLOY_TIME=1234567890
    $ NODE_ENV=production
    $ VARS=`aws lambda get-function-configuration \
    --function-name myLambdaFunction \
    | ./node_modules/.bin/update-lambda-environment-config`
    
it sets `$VARS` to this
    
    FOO="BAR",VERSION="1.2.3",DEPLOY_TIME="1234567890",NODE_ENV="production"

which can be used for updating it via `aws lambda update-function-configuration`:

    aws lambda update-function-configuration \
    --function-name "myLambdaFunction" \
    --environment "Variables={$(VARS)}"

See it in action [here](https://github.com/ResourcefulHumans/starhs-api-proxy-aws-lambda/blob/master/Makefile).
npm package: @resources/indieauth-client
Description: functions for adding indieauth support
Latest version: 1.0.0

# @resources/indieauth-client

This contains functions for building an IndieAuth client. There is an example in `examples/express` that is tested with WordPress.

This is all written in Markdown with files embedded in it using [@ResourcesCo/notebook](https://github.com/ResourcesCo/notebook). The Markdown files are in `.notebook`. These also contain a guide through the different steps to sign in with IndieAuth.
npm package: @resourge/pagination
Description: `Pagination` is a small function that returns an array containing information for the pagination creation.
Author: resourge
Latest version: 1.2.0

# [Pagination](./src/lib/pagination/README.md)

`Pagination` is a small function that returns an array containing information for the pagination creation. 

## Installation

Install using [Yarn](https://yarnpkg.com):

```sh
yarn add @resourge/pagination
```

or NPM:

```sh
npm install @resourge/pagination --save
```

## Usage

```Typescript
import { pagination } from '@resourge/pagination';

pagination({
  /**
   * Current page
   */
  page: 0,
  /**
   * Total page number
   */
  totalPages: 10,
  /**
   * Number of "pages" displaying.
   * * Note: Current page will try to stay in the middle
   */
  displayRange: 5,
  /**
   * If pagination is disabled
   */
  disabled: false,
  /**
   * Method for "page" click
   */
  onPageChange: (page: number) => {},
  /**
   * Defines the "page" for first page
   * * When undefined the item will not be included
   */
  firstLabel: () => 'First Page',
  /**
   * Defines the "page" for previous page
   * * When undefined the item will not be included
   */
  previousLabel: () => 'Previous Page',
  /**
   * Defines the "page" for next page
   * * When undefined the item will not be included
   */
  nextLabel: () => 'Next Page',
  /**
   * Defines the "page" for last page
   * * When undefined the item will not be included
   */
  lastLabel: () => 'Last Page'
})
```

## Others

react-hook: [React-hook-pagination](../react-hook-pagination/README.md)

react component: [React-pagination](../lib/react-pagination/README.md)

## License

MIT Licensed.
npm package: @resourge/react-hook-form
Description: `react-hook-pagination` is a small hook that returns an array containing "pages" for the pagination creation.
Author: resourge
Latest version: 1.2.0

# [React-hook-pagination](./src/lib/react-hook-pagination/README.md)

`react-hook-pagination` is a small hook that returns an array containing "pages" for the pagination creation. 

## Installation

Install using [Yarn](https://yarnpkg.com):

```sh
yarn add @resourge/react-hook-pagination
```

or NPM:

```sh
npm install @resourge/react-hook-pagination --save
```

## Usage

```Typescript
import { usePagination } from '@resourge/react-hook-pagination';

const Pagination = ({
  getHref
}: {
  getHref?: (page: number) => string
}) => {
  const pages = usePagination({
    /**
     * Current page
     */
    page: 0,
    /**
     * Total page number
     */
    totalPages: 10,
    /**
     * Number of "pages" displaying.
     * * Note: Current page will try to stay in the middle
     */
    displayRange: 5,
    /**
     * If pagination is disabled
     */
    disabled: false,
    /**
     * Method for "page" click
     */
    onPageChange: (page: number) => {},
    /**
     * Method to render the "page" for first page
     * * When undefined the item will not be included
     */
    renderFirst: () => 'First Page',
    /**
     * Method to render the "page" for previous page
     * * When undefined the item will not be included
     */
    renderPrevious: () => 'Previous Page',
    /**
     * Method to render the "page" for next page
     * * When undefined the item will not be included
     */
    renderNext: () => 'Next Page',
    /**
     * Method to render the "page" for last page
     * * When undefined the item will not be included
     */
    renderLast: () => 'Last Page'
  })
  return (
    <ul>
      {
        pages
        .map(({ label, page, disabled, selected, onClick }, index) => (
          <li 
            key={`pagination_page_item_${index}`}
            // styles for disabled 
            // styles for selected 
          >
            <a href={getHref && getHref(page)} onClick={onClick}>
              { label }
            </a>
          </li>
        ))
      }
    </ul>
  );
};
```

## Others

javascript: [Pagination](../pagination/README.md)

react component: [React-pagination](../lib/react-pagination/README.md)

## License

MIT Licensed.
npm package: @resourge/react-pagination
Description: `react-pagination` is a small, highly customizable, component to render the pagination.
Author: resourge
Latest version: 1.2.0

# [React-pagination](./src/lib/react-pagination/README.md)

`react-pagination` is a small, highly customizable, component to render the pagination. 

## Installatio   

Install using [Yarn](https://yarnpkg.com):

```sh
yarn add @resourge/react-pagination
```

or NPM:

```sh
npm install @resourge/react-pagination --save
```

## Usage

```Typescript
import { Pagination } from '@resourge/react-pagination';

function App() {
  const [page, setPage] = useState(0);
  return (
    <Pagination 
      /**
       * Current page
       */
      page={page}
      /**
       * Total page number
       */
      totalPages={10}
      /**
       * Number of "pages" displaying.
       * * Note: Current page will try to stay in the middle
       */
      displayRange={5}
      /**
       * If pagination is disabled
       */
      disabled={false}
      /**
       * Method for "page" click
       */
      onPageChange={setPage}
      /**
       * Method to render the "page" for first page
       * * When undefined the item will not be included
       */
      renderFirst={() => 'Icon for first Page'}
      /**
       * Method to render the "page" for previous page
       * * When undefined the item will not be included
       */
      renderPrevious={() => 'Icon for previous Page'}
      /**
       * Method to render the "page" for next page
       * * When undefined the item will not be included
       */
      renderNext={() => 'Icon for next Page'}
      /**
       * Method to render the "page" for last page
       * * When undefined the item will not be included
       */
      renderLast={() => 'Icon for last Page'}
    />
  )
}
```

## Others

javascript: [Pagination](../pagination/README.md)

react-hook: [React-hook-pagination](../react-hook-pagination/README.md)

## License

MIT Licensed.
npm package: @resourge/react-search-params
Description: react-search-params is a simple hook to control current url search. Also provides so methods that extend URLSearchParams.
Author: resourge
Latest version: 1.13.0

# @resourge/react-search-params

`@resourge/react-search-params` is a simple hook to control current url. Also provides some methods that extend URLSearchParams.

## Features

- Add's beforeURLChange and URLChange event to native javascript.
- Has no dependencies. 
- It uses javascript URLSearchParams to parse search.
- Decodes search params into primitive values. (ex: "?productId=10&productName=Apple" will become { product: 10, productName: "Apple" }).


## Installation

Install using [Yarn](https://yarnpkg.com):

```sh
yarn add @resourge/react-search-params
```

or NPM:

```sh
npm install @resourge/react-search-params --save
```

## Basic usage

```jsx
import React from 'react';
import { useSearchParams } from '@resourge/react-search-params';

export default function Form() {
  const [params, setParams] = useSearchParams(
    ({ url }) => window.history.replaceState(null, '', url.href)
  )

  return (
    <div> 
	  App
      <button onClick={() => setParams({ productId: Math.random() })}>
        Set new params
      </button>
	</div>
  );
}
```

## Documentation

### useSearchParams

```Typescript
const [params, setParams] = useSearchParams(
  // Method to control navigation
  ({ url }) => window.history.replaceState(null, '', url.href),
  // Ex: react-router ({ url }) => history.replace(url.href),
  { }, // default params
  { } // config
)
```

#### Config

| Name | Type | Required | Description |
| ---- | ---- | -------- | ----------- |
| **navigate** | `(config: SearchParams<T>) => void` | true | Method to navigate. |
| **defaultParams** | `object` | false | To define default values |
| **config** | `{ hash?: boolean }` | false | When hash is true it will use `URL hash` instead of `URL` to get `search` |

### useUrl

Returns the current URL object.

```Typescript
const url = useUrl();
```

## License

MIT Licensed.
npm package: @respctclub/sdk
Description: 🛠 An SDK for building applications on top of Respct.club.
Latest version: 0.0.4

Factory     --> 0x7E1BF78FCAf743B2b135fB8E116918D18cbed9A1
INIT HASH   --> 0xaa3cec7c96b59ea0fd2ec14c4ab0bc5dd7526d90d75adee2d375f0cb4ec91376
WMATIC      --> 0x31915B268e1dB532205e4BC595e975e4149De709
Router01    --> 0xF34C8A221E75AF3ddb21502Abede8314a36f517A
MainRouter  --> 0x924fEA4BD4c52400b609350bf254Ba9414e102c5
npm package: @respctclub/uikit
Description: Set of UI components for RespctClub projects
Latest version: 0.0.4

# 🥞 Pancake UIkit

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

Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @pancakeswap-libs/uikit`

## Setup

### Theme

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

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

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@pancakeswap-libs/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://pancakeswap.github.io/pancake-uikit/)
npm package: @respite/action
Description: > TODO: description
Author: Jack Ellis
Latest version: 4.0.2

# `@respite/action`

A small wrapper around any actioning function that adds some useful metadata.

This will just cover getting started and the api, for an overarching explanation of respite, see the [repo readme](https://github.com/jackmellis/respite/blob/main/README.md)

## Getting started

```
npm install @respite/core @respite/action
```

## Usage

```tsx
const {
  action: onSubmit,
  error,
  submitting,
} = useAction(values => post('/api/save', values));

return (
  <button onClick={() => onSubmit(values)} disabled={submitting}>
    Submit
  </div>
);
```

## useAction

```ts
(key?: any, callback: Function): {
  action: Function,
  status: Status,
  data: any,
  error: any,
  submitting: boolean,
  reset: () => void,
  invalidate: ({
    key?: any,
    deps?: any[],
    exact?: boolean,
    predicate?: (query: Query) => boolean,
  }) => void,
}
```

The most common use case is to pair this with `@respite/query` to invalidate a query upon success:

```ts
useAction(async (values) => {
  await post("/api/save", values);

  query.invalidate();
});
```

If you don't have the query to hand or you have multiple queries, `useAction` returns a helpful `invalidate` method:

```ts
const { invalidate } = useAction(async (values) => {
  await post("/api/save", values);

  invalidate({ key: "my-query-key" });
});
```

> The `key` parameter is optional and is only used to drive the `@respite/exchange` library.

- action
- status
- data
- error
- submitting
- reset
  Resets `status`, `data`, `error`, and `submitting` to their original values
- invalidate
  Allows you to invalidate queries during the action

## useSnapshot

```ts
<T>(query: Query<T>): (value: T | (prev: T) => T) => () => void;
```

Allows you to take a snapshot of a query, update its value, then roll back if required. This is mainly useful for doing optimistic updates during an action:

```ts
const setData = useSnapshot(query);

return useAction(async (values) => {
  const rollback = setData((prev) => ({ ...prev, ...values }));

  try {
    await post("/api/save", values);
  } catch {
    rollback();
  }
});
```
npm package: @respite/exchange
Description: > TODO: description
Author: Jack Ellis
Latest version: 4.0.0

# `@respite/exchange`

This is a very small library that lets you to link your respite actions and queries in an agnostic location in your code base.

For some context: right now if you have an action that updates your data on the back end, you have to then manually invalidate your queries as part of the action:

```ts
return useAction(async () => {
  const result = await doSomeMutating();

  myQuery.invalidate();

  return result;
})
```
or invalidate a whole collection of queries:
```ts
const action = useAction(async () => {
  const result = await doSomeMutating();

  action.invalidate({ key: 'myQuery' });

  return result;
});

return action;
```

The problem with this is that a) you have to break out of your mutating process to clear your queries, and then return to the mutating again, and b) you're tightly coupling your actions to your queries. Sometimes you don't even know what queries are depending on the data you've just updated!

`@respite/exchange` offers a way for you to declare which queries are invalidated by which actions, separate to the actions themselves.

With exchange, your action would look like this:

```ts
return useAction('my-action', doSomeMutating);
```

and then, separately, you would link your actions and queries like this:
```ts
useExchange([ 'myQuery', 'my-action' ]);
```
Now whenever your action is triggered, the query will be invalidated, but neither action nor query are coupled!

You can pass in multiple actions and multiple queries, it's entirely up to you how you want to organise your exchanges:

```ts
useExchange(
  [ 'myQuery', [ 'update', 'create', 'delete' ] ],
  [ ['authQuery', 'userQuery' ], 'updateUser' ],
  [ [ 'basketQuery', 'voucherQuery' ], [ 'updateBasket', 'applyVoucher' ] ],
);
```
npm package: @respite/select
Description: > TODO: description
Author: Jack Ellis
Latest version: 4.0.2

# `@respite/select`

A simple selector hook for queries and atoms

This will just cover getting started and the api, for an overarching explanation of respite, see the [repo readme](https://github.com/jackmellis/respite/blob/main/README.md)

## Getting started

```
npm install @respite/core @respite/select
```

## Usage

```ts
const derivedQuery = useSelector(query, (state) => state.someProperty);
const derivedAtom = useSelector(myAtom, (state) => state.someProperty);
```

## useSelector

```ts
<T, R>(query: Query<T>, selector(t: T) => R, deps?: any[]): Query<R>
<T, R>(atom: Atom<T>, selector(t: T) => R,deps?: any[]): R;
```

For queries it returns a derived query using the selector function. The derived query is also lazy.

For atoms, the selector just immediately returns the derived value. In theory there isn't much difference between writing a selector or using a molecule to derive state from another atom. But often in practice a selector is much quicker to quickly set up for a one-off use.

## useSelectAll

```ts
<T, R>(queries: Array<Query<T>>, selector(...t: T[]) => R, deps?: any[]): Query<R>
<T, R>(atoms: Array<Atom<T>>, selector(...t: T[]) => R,deps?: any[]): R;
```

Similar to `useSelector` but accepts an array of queries/atoms.

> Only an array of atoms or an array of molecules is accounted for. Mixing atoms and molecules is not supported currently

## useSelectValue

```ts
<T, R>(query: Query<T>, selector(t: T) => R, deps?: any[]): R;
<T, R>(atom: Atom<T>, selector(t: T) => R,deps?: any[]): R;
```

Similar to `useSelector` except it immediately returns the transformed value instead of returning a query object
npm package: @respo/composer-app
Description: Composer app creator for Respo
Author: jiyinyiyong
Latest version: 0.1.19-a3


Composer
------

> Template generating tool for Respo.

Introduction:

* [TodoMVC in a visual way with Respo Composer](https://www.reddit.com/r/Clojure/comments/azj16g/todomvc_in_a_visual_way_with_respo_composer/)
* [前端框架的图形化探索方向一个尝试, Respo Composer](https://zhuanlan.zhihu.com/p/58753227)
* [Docs on `composer.core/render-markup`](https://github.com/Respo/composer.core)

### Usage

[![Clojars Project](https://img.shields.io/clojars/v/respo/composer.svg)](https://clojars.org/respo/composer) ![respo/composer-app](https://img.shields.io/npm/v/@respo/composer-app.svg)

```edn
[respo/composer "0.1.18"]
```

```bash
npm install -g @respo/composer-app

composer-app
# open http://composer.respo-mvc.org/
```

Elements tree editor:

![](http://wx3.sinaimg.cn/large/62752320gy1g0p1xvwfyhj20x80nytd7.jpg)

Templates overview:

![](http://wx4.sinaimg.cn/large/62752320gy1g0r8etufhwj20yq0u0n2o.jpg)

Explainations for the properties are documented at https://github.com/Respo/composer.core .

### Workflow

https://github.com/Cumulo/cumulo-workflow

### License

MIT
npm package: @respond-run/html
Description: A tiny HTML tagged template utility for building safe HTML strings with support for interpolation, escaping, and raw HTML
Latest version: 0.7.0

# @respond-run/html

A small utility for building safe HTML strings with support for interpolation, escaping, raw HTML, and whitespace cleanup.

## Features

- Escapes interpolated values by default  
- Inlines raw HTML via the `raw()` helper  
- Trims common indent and collapses excess whitespace in multi-line templates  
- Drops `null` and `undefined` values  

## Installation

```bash
npm install @respond-run/html
```

## Usage

```ts
import { html, raw } from '@respond-run/html'

const output = html(
  `
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>$.title</title>
        $.styleLink
      </head>
      <body>
        $.body
      </body>
    </html>
  `,
  {
    title: '<My & Page>',
    styleLink: raw('<link rel="stylesheet" href="/main.css">'),
    body: [
      '<p>Safe text</p>',
      raw('<p>Unescaped <strong>HTML</strong></p>')
    ]
  }
)

console.log(output)
// → '<!doctype html><html lang="en"><head><meta charset="UTF-8"/><title>&lt;My &amp; Page&gt;</title><link rel="stylesheet" href="/main.css"></head><body><p>Safe text</p><p>Unescaped <strong>HTML</strong></p></body></html>'
```

### API

```ts
/**
 * Build an HTML string from a template and a vars map.
 */
function html(
  template: string,
  vars: Record<string, any>
): string

/**
 * Mark a value as raw HTML to be inlined without escaping.
 */
function raw(value: any): { __html: string }
```

## Tests

Run the unit suite with Vitest:

```bash
npm run test
```

## License

MIT
npm package: @response/buffer
Description: A class representing a raw response backed by a `Buffer`.
Latest version: 0.1.2

# Buffer Response

A class representing a raw response backed by a `Buffer`.

## Installation

```sh
npm install @response/buffer
```

## Usage

```js
const buffer = require('@response/buffer')
const http = require('http')

const png = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==', 'base64')

http.createServer((req, res) => {
  // Status 200, type application/octet-stream
  buffer(png).write(res)

  // Status 200, type application/octet-stream
  buffer(200, png).write(res)

  // Status 200, type image/png
  buffer(200, png, { 'Content-Type': 'image/png' }).write(res)
})
```

## Mutable Properties

- `statusCode: number` - The status code
- `headers: object` - The custom headers
- `data: Buffer` - The raw data
npm package: @response/empty
Description: A class representing an empty response.
Latest version: 0.1.2

# Empty Response

A class representing an empty response.

## Installation

```sh
npm install @response/empty
```

## Usage

```js
const empty = require('@response/empty')
const http = require('http')

http.createServer((req, res) => {
  // Status 204
  empty().write(res)

  // Status 200
  empty(200).write(res)

  // Status 200 & custom headers
  empty(200, { 'X-Powered-By': 'Foobar' }).write(res)
})
```

## Mutable Properties

- `statusCode: number` - The status code
- `headers: object` - The custom headers
npm package: @response/html
Description: A class representing an HTML text response.
Latest version: 0.1.2

# HTML Response

A class representing an HTML text response.

## Installation

```sh
npm install @response/html
```

## Usage

```js
const html = require('@response/html')
const http = require('http')

http.createServer((req, res) => {
  // Status 200
  html('<p>Hello, World!</p>').write(res)

  // Status 500
  html(500, '<p>Error</p>').write(res)

  // Status 500 & custom headers
  html(500, '<p>Error</p>', { 'X-Powered-By': 'Foobar' }).write(res)
})
```

## Mutable Properties

- `statusCode: number` - The status code
- `headers: object` - The custom headers
- `data: string` - The HTML data
npm package: @response/json
Description: A class representing an JSON text response.
Latest version: 0.1.2

# JSON Response

A class representing an JSON text response.

## Installation

```sh
npm install @response/json
```

## Usage

```js
const json = require('@response/json')
const http = require('http')

http.createServer((req, res) => {
  // Status 200
  json({ status: 'success' }).write(res)

  // Status 500
  json(500, { status: 'error' }).write(res)

  // Status 500 & custom headers
  json(500, { status: 'error' }, { 'X-Powered-By': 'Foobar' }).write(res)
})
```

## Mutable Properties

- `statusCode: number` - The status code
- `headers: object` - The custom headers
- `data: object | object[]` - The JSON data to be stringified
npm package: @response/redirect
Description: A class representing a redirect response.
Latest version: 0.1.2

# Redirect Response

A class representing a redirect response.

## Installation

```sh
npm install @response/redirect
```

## Usage

```js
const redirect = require('@response/redirect')
const http = require('http')

http.createServer((req, res) => {
  // Status 302
  redirect('/thing').write(res)

  // Status 301
  redirect(301, '/thing').write(res)

  // Status 301 & custom headers
  redirect(301, '/thing', { 'X-Powered-By': 'Foobar' }).write(res)
})
```

## Mutable Properties

- `statusCode: number` - The status code
- `headers: object` - The custom headers
- `url: string` - The target of the redirect
npm package: @response/string
Description: A class representing a raw response backed by a string.
Latest version: 0.1.2

# String Response

A class representing a raw response backed by a string.

## Installation

```sh
npm install @response/string
```

## Usage

```js
const string = require('@response/string')
const http = require('http')

http.createServer((req, res) => {
  // Status 200, type text/plain
  string('Hello,World').write(res)

  // Status 200, type text/plain
  string(200, 'Hello,World').write(res)

  // Status 200, type text/csv
  string(200, 'Hello,World', { 'Content-Type': 'text/csv' }).write(res)
})
```

## Mutable Properties

- `statusCode: number` - The status code
- `headers: object` - The custom headers
- `data: string` - The raw data
npm package: @response/types
Description: Typings for usage with the other `@response/*` packages.
Latest version: 0.1.2

# Typings for @response

Typings for usage with the other `@response/*` packages.

## Installation

```sh
npm install @response/types
```

## Types

### `Response`

A generic interface that all responses conform to.

### `Headers`

The format of the headers objects.

### `ServerResponseLike`

A subset of `NodeJS.ServerResponse` that the responses can write themselves to.
npm package: @responseams/app-config
Description: The Configuration builder utility for Response's Nuxt app.
Author: Scott Plunkett
Latest version: 0.4.0

# `@responseams/app-config`

Allows programatically building a Response App config for the Nuxt.js application using
a declarative chaining API with TypeScript or JavaScript.

## Usage

```js
const Response = require('@responseams/app-config');

return new Response().withApiURL('http://api.mydomain.com').getObject();
```
npm package: @responseams/app-utils
Description: Utilities and helpers for the Response web application and its extensions.
Author: Scott Plunkett
Latest version: 0.4.0

# `@responseams/app-utils`

Provides a number of helpers used by various Response extensions when interacting with the App and
presenting data to the users.

## Usage

```js
import { text } from '@responseams/app-utils';

text.capitalize('scott');
// Scott
```
npm package: @responsekit/core
Description: Simple helpers to translate successful or unsuccessful business logic responses into appropriate controller responses.
Author: IRCraziestTaxi
Latest version: 1.0.1

# @responsekit/core
Simple helpers to translate successful or unsuccessful business logic responses into appropriate controller responses.

## Install
To use responsekit:

```
npm install --save @responsekit/core
```

## GenericResponse
Use the `GenericResponse` class as a standardized interface for responses to processed requests.

Consider a request for paged objects:

```ts
new GenericResonse({
    count: totalCount,
    message: `Your request returned ${results.length} out of ${totalCount} results.`,
    status: ResponseStatus.Success,
    value: results
});
```

## Rejection
Use the `Rejection` class as a standardized way to send error messages with a reason based on an HTTP status code.

```ts
// Creates a Rejection with a RejectionReason of 500.
new Rejection("Something went wrong.");

// Creates a Rejection with a RejectionReason of 400.
new Rejection("Invalid request.", RejectionReason.BadRequest);

// Also creates a Rejection with a RejectionReason of 400.
Rejection.BadRequest("Invalid request.");
```

## CommandResult
The `CommandResult` type represents a handled request that resulted either in success or failure (in which case a `Rejection` may have been returned). Consider, for example, using `tsmediator` to process commands that will return a `GenericResponse` or a `Rejection` based on the results of the business logic.

```ts
const result: CommandResult<Thing> = await new Mediator().Send("CommandHandler", command);

if (result instanceof Rejection) {
    // Return a response whose status is result.reason and whose payload contains result.message.
}

// Return a response with status 200 (or similar) whose payload is the GenericResponse that is the result.
```

## Other helpful libraries
To achieve the functionality above using `tsmediator` and/or `express`, check out the [`@responsekit/tsmediator`](https://github.com/IRCraziestTaxi/responsekit-tsmediator) and [`@responsekit/express`](https://github.com/IRCraziestTaxi/responsekit-express) packages.
npm package: @responsekit/express
Description: Wraps a base controller that returns express Responses with responsekit payloads.
Author: IRCraziestTaxi
Latest version: 1.0.0

# @responsekit/express
Wraps a base controller that returns express Responses with responsekit payloads.

## Install
To use `@responsekit/express`:

```
npm install --save @responsekit/core @responsekit/express
```

## CommandResultController
Extend your controller from `CommandResultController` to send a response based on a `CommandResult` and an express `Response`.

For example, using `routing-controllers`:

```ts
import { CommandResult } from "@responsekit/core";
import { CommandResultController } from "@responsekit/express";
import { JsonController, Post, Res } from "routing-controllers";
import { Mediator } from "tsmediator";
import { AddThingCommand } from "../commands/addThing/AddThingCommand";
import { Thing } from "../entities/Thing";

@JsonController("/things")
export class ThingController extends CommandResultController {
    @Post()
    public async addThing(
        @Body()
        command: AddThingCommand,
        @Res()
        response: Response
    ): Promise<Response> {
        const result: CommandResult<Thing> = await new Mediator().Send("AddThingHandler", command);

        // Return a response with the default HTTP status code of 200 if result was successful
        // or the appropriate HTTP status code based on the returned Rejection.
        return this.sendResponse(result, response);

        // Return a response with a custom HTTP status code of 201 if result was successful
        // or the appropriate HTTP status code based on the returned Rejection.
        return this.sendResponse(result, response, 201);
    }
}
```

For an extension of `tsmediator`'s `Mediator` that handles returning thrown `Rejection`s in a `Validate` method, for instance, check out the `@responsekit/tsmediator` package.