open-index/open-npm huggingface dataset:
npm package: @lksilva/typescripcomponents
Description: UI lib de componentes do ERP Avec
Author: Lucas Silva
Latest version: 1.0.0

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.<br>
You will also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.<br>
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.<br>
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).
npm package: @lkspc/react-router-enhancers
Description: Enhancers for react-router
Author: lkspc
Latest version: 1.0.2

# react-router-enhancers

> Enhancers for `react-router` v4+, built with React Hooks

[![NPM](https://img.shields.io/npm/v/@lkspc/react-router-enhancers.svg)](https://www.npmjs.com/package/@lkspc/react-router-enhancers)

## Features

**React Router Enhancers** export several hooks with their paired components.

#### `useScrollToTop` and `ScrollToTop`

Window scrolls to top when pathname changes.

#### `useScrollToTopOnMount` and `ScrollToTopOnMount`

Window scrolls to top when a new route mounted.

#### `useScrollRestoration` and `ScrollRestoration`

Window will scroll to top when a new route mounted and restore previous route's scroll position when navigation back.

## Installation

```bash
# npm
npm install --save @lkspc/react-router-enhancers

# yarn
yarn add @lkspc/react-router-enhancers
```

## Usage

```jsx
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { ScrollRestoration } from '@lkspc/react-router-enhancers';

class Example extends Component {
  render() {
    return (
      <BrowserRouter>
        <ScrollRestoration />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
          <Route exact path="/other" component={Other} />
        </Switch>
      </BrowserRouter>
    );
  }
}
```

For [UmiJS](https://umijs.org/docs/runtime-config#onroutechange-routes-matchedroutes-location-action-) users

```jsx
// app.js

import { createRouteChange } from '@lkspc/react-router-enhancers';

export const onRouteChange = createRouteChange();
```

## License

MIT © [lkspc](https://github.com/lkspc)
npm package: @lkspc/react-router-scroll
Description: Scroll manager for react-router
Author: lkspc
Latest version: 1.0.1

# react-router-scroll

> Scroll manager for `react-router` v4+, built with React Hooks

[![NPM](https://img.shields.io/npm/v/react-router-scroll.svg)](https://www.npmjs.com/package/@lkspc/react-router-scroll) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Features

**React Router Scroll** exports several hooks with their paired components.

#### `useScrollToTop` and `ScrollToTop`

Window scrolls to top when pathname changes.

#### `useScrollToTopOnMount` and `ScrollToTopOnMount`

Window scrolls to top when a new route mounted.

#### `useScrollRestoration` and `ScrollRestoration`

Window will scroll to top when a new route mounted and restore previous route's scroll position when navigation back.

## Install

```bash
npm install --save @lkspc/react-router-scroll
```

## Usage

```jsx
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { ScrollRestoration } from '@lkspc/react-router-scroll';

class Example extends Component {
  render() {
    return (
      <BrowserRouter>
        <ScrollRestoration />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
          <Route exact path="/other" component={Other} />
        </Switch>
      </BrowserRouter>
    );
  }
}
```

## License

MIT © [lkspc](https://github.com/lkspc)
npm package: @lkspc/wxpay
Description: payment for wechat
Author: lkspc
Latest version: 1.0.2

# WXPay

微信支付工具库

## 用法

### 初始化

```js
const wxpay = require('wxpay')(config);
```

### 统一下单

```js
wxpay.unifiedOrder({
  out_trade_no: '201804010000',
  // ...
});
```
npm package: @lkummer/break
Description: Sass mixins for systemized media queries
Author: Lior Kummer
Latest version: 1.0.0

Break is a library of Sass mixins that ease the creation of systemized media query
breakpoints.

For more information [see the documentation](https://lkummer.github.io/break/).

To get started quickly
[read the Getting Started guide](https://lkummer.github.io/break/guide/getting-started/).

# Quick Start Guide

[Break is available on NPM](https://www.npmjs.com/package/@lkummer/break).

```
$ npm add -D @lkummer/break
$ yarn add --dev @lkummer/break
```

With the module installed, systemized breakpoints can be defined and media queries
can be created with mixins.

```scss
@use '@lkummer/break' as break;

$breakpoints: (
  'small': (
    'upper': 780px
  ),
  'large': (
    'lower': 781px
  )
);

.element {
  // Media query enabled on small screens and under.
  @include break.media-under('small', $breakpoints) {
    // @content is placed in the media query.
    background: blue;
  }
}
```

Yielding the following output once processed.

```css
.element {
  @media (max-width: 780px) {
    background: blue;
  }
}
```

[Read the Getting Started guide](https://lkummer.github.io/break/guide/getting-started/).

# Development Guide

Before running the development scripts, make sure to download the dependencies.

```
$ yarn install
```

## Testing

Sass functionality is tested using True. [More information
can be found here](https://www.oddbird.net/true/docs/index.html).

Tests can be run using the `test` script.

```
$ yarn run test
```

## Linting

Linting can be run using the `lint` script.

```
$ yarn run lint
```

## Formatting

Style enforcement is done using Prettier.
Files can be formatted using the `format` script.

```
$ yarn run format
```

## Documentation

The `doc` script builds the documentation in the `dist/doc` directory.

```
$ yarn run doc
```
npm package: @lkummer/eslint-config
Description: Personalized ESLint configuration
Author: LKummer
Latest version: 1.0.1

# LKummer's ESLint Config

Personalized ESLint config, mostly fixing potential errors.
Works well with [Prettier](https://prettier.io/).

## Usage

Install using NPM:

```
npm install --save-dev @lkummer/eslint-config
```

Add the config to the `extends` section of your ESLint config:

```json
{
  "extends": ["@lkummer"]
}
```
npm package: @ll0814/create-mini-vite
Description: Scaffold a mini-vite project
Latest version: 0.1.0

# @ll0814/create-mini-vite

Scaffold a mini-vite project.

## Usage

```bash
npx @ll0814/create-mini-vite my-app
# or
npm exec @ll0814/create-mini-vite my-app
```

Then:

```bash
cd my-app
npm install
npm run dev
```

## Publish

```bash
npm login
npm publish --access public
```
npm package: @lla-editor/audio
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: “ncqwer”
Latest version: 0.0.23

# `@lla-editor/audio`

> TODO: description

## Usage

```
import audio from '@lla-editor/audio';

// TODO: DEMONSTRATE API
```
npm package: @lla-editor/callout
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: “ncqwer”
Latest version: 0.0.22

# `@lla-editor/callout`

> TODO: description

## Usage

```
import callout from '@lla-editor/callout';

// TODO: DEMONSTRATE API
```
npm package: @lla-editor/code
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: “ncqwer”
Latest version: 1.0.16

# `@lla-editor/code`

> TODO: description

## Usage

```
import code from '@lla-editor/code';

// TODO: DEMONSTRATE API
```
npm package: @lla-editor/comment-list
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: “ncqwer”
Latest version: 0.0.7

# `@lla-editor/comment-list`

> TODO: description

## Usage

```
import commentList from '@lla-editor/comment-list';

// TODO: DEMONSTRATE API
```
npm package: @lla-editor/config-preset
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: “ncqwer”
Latest version: 0.0.19

# `@lla-editor/config-preset`

> TODO: description

## Usage

```
import configPreset from '@lla-editor/config-preset';

// TODO: DEMONSTRATE API
```
npm package: @lla-editor/core
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: “ncqwer”
Latest version: 0.0.22

# `@lla-editor/core`

> TODO: description

## Usage

```
import core from '@lla-editor/core';

// TODO: DEMONSTRATE API
```
npm package: @lla-editor/custom-void
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: “ncqwer”
Latest version: 0.0.19

# `@lla-editor/custom-void`

> TODO: description

## Usage

```
import customVoid from '@lla-editor/custom-void';

// TODO: DEMONSTRATE API
```
npm package: @lla-editor/divider
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: “ncqwer”
Latest version: 0.0.22

# `@lla-editor/divider`

> TODO: description

## Usage

```
import divider from '@lla-editor/divider';

// TODO: DEMONSTRATE API
```
npm package: @lla-editor/editor
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: “ncqwer”
Latest version: 0.0.30

# `@lla-editor/editor`

> TODO: description

## Usage

```
import editor from '@lla-editor/editor';

// TODO: DEMONSTRATE API
```
npm package: @lla-editor/heading
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: “ncqwer”
Latest version: 0.0.22

# `@lla-editor/heading`

> TODO: description

## Usage

```
import heading from '@lla-editor/heading';

// TODO: DEMONSTRATE API
```
npm package: @lla-editor/image
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: “ncqwer”
Latest version: 0.0.24

# `@lla-editor/image`

> TODO: description

## Usage

```
import image from '@lla-editor/image';

// TODO: DEMONSTRATE API
```
npm package: @lla-editor/indent
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: “ncqwer”
Latest version: 0.0.22

# `@lla-editor/indent`

> TODO: description

## what
本插件提供块级元素的嵌套功能。具体实现的表现为：
  - 提供indent-container类型的Element，该元素依赖于ContainerWrapperContext来确定用于实际用于包括的组件，例如：
    - list： list-item组件需要提供特定的容器组件
    - text: 

## Usage

```
import indent from '@lla-editor/indent';

// TODO: DEMONSTRATE API
```
npm package: @lla-editor/link
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: “ncqwer”
Latest version: 0.0.18

# `@lla-editor/link`

> TODO: description

## Usage

```
import link from '@lla-editor/link';

// TODO: DEMONSTRATE API
```
npm package: @lla-editor/list
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: “ncqwer”
Latest version: 0.0.22

# `@lla-editor/list`

> TODO: description

## Usage

```
import list from '@lla-editor/list';

// TODO: DEMONSTRATE API
```
npm package: @lla-editor/quote
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: “ncqwer”
Latest version: 0.0.22

# `@lla-editor/quote`

> TODO: description

## Usage

```
import quote from '@lla-editor/quote';

// TODO: DEMONSTRATE API
```
npm package: @lla-editor/table
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Latest version: 0.0.16

# `@lla-editor/table`

> TODO: description

## Usage

```
import table from '@lla-editor/table';

// TODO: DEMONSTRATE API
```
npm package: @lla-editor/text-block
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: “ncqwer”
Latest version: 0.0.23

# `@lla-editor/text-block`

> TODO: description

## Usage

```
import textBlock from '@lla-editor/text-block';

// TODO: DEMONSTRATE API
```
npm package: @lla-editor/video
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: “ncqwer”
Latest version: 0.0.23

# `@lla-editor/video`

> TODO: description

## Usage

```
import video from '@lla-editor/video';

// TODO: DEMONSTRATE API
```
npm package: @lla-ui/signal
Description: react ui helper with tailwind
Author: “ncqwer”
Latest version: 0.0.13

# `@lla-ui/signal`

> Yet another state manager with dynamic dependency support



## Install

```bash
yarn add @lla-ui/signal
```

And wrapper your root component with

```jsx
import { SSRSupportWrapper, SharedScope } from '@lla-ui/signal';

<SSRSupportWrapper>
	<SharedScope scopeName="global">{children}</SharedScope>
</SSRSupportWrapper>
```


## Usage

```ts
import { signal, useSignal, useSignalState, dataSource} from '@lla-ui/signal';

const getCategory = signal('getCategory',async ()=>{
	const { data: category } = await fetch('getCategory',{
		method: 'post',
		headers: {
			'Content-Type':'application/json',
		}
	});
	return category;
});

const getGoods = signal('getGoods',async (get)=>{
	const category = await get(getCategory);
	const { data: category } = await fetch('getCategory',{
		method: 'post',
		headers: {
			'Content-Type':'application/json',
		},
		body: JSON.stringify({
			category
		}),
	});
	return category;
});


const [categoryState, refetch] =  useSignalState(getCategory);
const { state, data, error } = () => useSignal(getGoods)

// refetch category will force goods fetcher rerun


// to keep same interface with React.useState ,also privide 

const textAtom = atom('atom_text','hello'); // is special signal whose exec is sync and no dependency

const [text, setText] = useAtom<string>(
	textAtom,'world',
); // which is equal `const [text,setText] = React.useState('world);




// also support push-model 
const delay = atom('delay', 1000);

const dateTimeBySeconds = dataSource<number>()(
  'dataTimeBySecond',
  ({ get, set }) => {
    const d = get(delay);
    let handler: any = null;
    let flag = false;
    const id = setInterval(() => {
      set(Date.now());
      if (!flag) {
        flag = true;
        handler(() => {
          clearInterval(id);
        });
      }
    }, d);
    return new Promise((res) => {
      handler = res;
    });
  },
);

const [,changeDelay] = useSignalState(delay);
const state = useSignal(dateTimeBySeconds);

```

## Api

Todo
npm package: @lla-ui/utils
Description: mono example
Author: “ncqwer”
Latest version: 0.0.13

# `@lla-ui/utils`

> 提供项目自用的自定义 react-hooks

# Hooks 一览

- [useDerivedValue](./docs/useDerivedValue.md)
- [useFSM](./docs/useFSM.md#useFSM)
- [useFSMWithStatus](./docs/useFSM.md#useFSMWithStatus)
- [useTransitionStatus](./docs/useTransitionStatus.md#usetransitionstatus)
- [useTranstionComputedValue](./docs/useTransitionStatus.md#usetransitioncomputedvalue)
- [useTranstionClassNames](./docs/useTransitionStatus.md#usetransitioncomputedvalue)
- [useTransitionGroup](./docs/useTransitionStatus.md#usetransitiongroup)
- [useSlideTrack](./docs/useSlideTrack.md)
npm package: @llagache/bloody-parallax
Description: A quick to setup Javascript ES6 Parallax Library
Latest version: 1.0.8

# BloodyParallax
A quick to setup Javascript ES6 Parallax Library
## Usage
```
npm install @llagache/bloody-parallax
```

### Example :
index.js : 
```javascript
import BloodyParallax from "@llagache/bloody-parallax";
const parallax = new BloodyParallax({
    mouseIntensity: 0.2, 
    scrollIntensity: 0.5, 
    damping: 0.1, 
    attribute: "data-depth"
});
```
index.html : 
```html
<div data-depth="0.1">I have parallax</div>
```
### Constructor :
```javascript
/**
 * @param {object} config { 
 *   {number} scrollIntensity : 0.1, 
 *   {number} mouseIntensity : 0.1, 
 *   {number} damping : 0.1, 
 *   {string} attribute : "data-depth"
 * }
 */
new BloodyParallax({ 
    scrollIntensity, 
    mouseIntensity, 
    damping, 
    attribute
})
```
### Methods :
```javascript
/**
 * Query all the elements with the parallax attribute
 * must be called after when new elements are createds
 */
queryElements()
```
## Author

Lagache Louis ([@llagache_dev](https://twitter.com/llagache_dev))
npm package: @llagache/seedablejs
Description: A simple class based seedable random generator in javascript
Author: Lagache Louis
Latest version: 1.0.3

# SeedableJS
A simple class based seedable random generator in javascript.

## About

The goal is to provide an easy to use seeded random generator comming with
set of helpers to quickly generate random numbers, strings, arrays ...

It use a combinaison of the xmur3 hashing function and the mulberry32 pseudo random generator
https://stackoverflow.com/questions/521295/seeding-the-random-number-generator-in-javascript/47593316%2347593316


## Usage
```
npm install @llagache/seedablejs
```

### Example :
```javascript
import Seedable from "@llagache/seedablejs";
const s = new Seedable("seed");

var randomValue = s.value();
```
### Constructor :
```javascript
/**
* Create a new Seedable random generator
* @param {string?} optional seed 
*/
new Seedable(seed)
```
### Methods :
```javascript
/**
 * Update seed
 * @param {string} seed 
 */
updateSeed(seed=null)
```
```javascript
/**
 * @returns random number between 0 & 1
 */
value()
```
```javascript
/**
 * @param {number} min 
 * @param {number} max 
 * @returns random number between min & max
 */
range(min, max)
```
```javascript
/**
 * @param {array} array 
 * @returns random element from an array
 */
element(array)
```
```javascript
/**
 * @param {array} array 
 * @param {number} min 
 * @param {number} max 
 * @param {bool} autorizeDuplicate 
 * @returns mutiple (between min & max) random elements from an array
 */
elements(array, min, max, autorizeDuplicate=true)
```
```javascript
/**
 * @param {*} sizeX 
 * @param {*} sizeY 
 * @returns random image url from piscsum.photos
 */
image(sizeX, sizeY)
```
```javascript
/**
 * @param {number} min 
 * @param {number} max 
 * @returns random lorem ipsum sentence
 */
lorem(min, max)
```
```javascript
/**
 * @param {function} factoryFn 
 * @param {number} length 
 * @param {bool} unique 
 * @returns random array of elements based on the factoryFn
 */
pool(factoryFn, length, unique = false)
```
```javascript
/**
 * @param {date} start 
 * @param {date} end 
 * @returns random date between start & end
 */
date(start, end)
```
```javascript
/**
 * @param {number} length 
 * @returns random string using these char [ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789]
 */
string(length)
```
### Static Methods :
```javascript
/**
 * @param {number} length 
 * @returns random seed 
 */
Seedable.randomSeed()
```

## Author

Lagache Louis ([@llagache_dev](https://twitter.com/llagache_dev))