open-index/open-npm huggingface dataset:
npm package: @samuelint/eslint-config
Description: My goto eslint config
Author: Samuel Magny
Latest version: 1.1.0

# Samuel Magny - eslint-config

My goto eslint config

## How to use

### 1. Install

##### pnpm

```
pnpm add -D @samuelint/eslint-config
```

### 2. Configure

```
# .eslintrc.json
{
    "extends": "@samuelint/eslint-config",
    ...
}
```

OR

```
# .eslintrc.js
{
    extends: "@samuelint/eslint-config",
    ...
}
```

### 3. Enjoy

## References

https://eslint.org/docs/latest/extend/shareable-configs
npm package: @samuellouf/dialogs
Description: A JS module to show dialogs.
Author: SamuelLouf
Latest version: 1.1.0

# @samuellouf/dialogs
A JavaScript module to show dialogs.

## Introduction
*@samuellouf/dialogs* allows you to show popup dialogs.
Dialogs works on Windows, Linux, and MacOS by using Python, tkinter or msgbox (on Windows only).

## Installation
### From npm
1. Open your terminal in the folder in which you want to install *dialogs*
2. Type
```sh
npm install @samuellouf/dialogs
```

### From GitHub
1. Open your terminal in the folder in which you want to install *dialogs*
2. ```sh
npm i https://github.com/samuellouf/dialogs
```
npm package: @samuelluo/markdown-img-ready
Description: 用于检测 markdown 中图片加载是否完成
Author: Samuel Luo
Latest version: 1.0.2

# markdown-img-ready

用于检测 markdown 中图片加载是否完成

# Usage

```tsx
import Markdown from "react-markdown";
import { useImgReady } from "@samuelluo/markdown-img-ready";

export default () => {
	const content = "";
	const { ready, component: ImgComponent } = useImgReady(content);

	return (
		<Markdown
			components={{
				img: ImgComponent,
			}}
		>
			{content}
		</Markdown>
	);
};
```
npm package: @samuelluo/vue2-container
Description: a vue micro-service tools
Author: samuel-luo
Latest version: 0.0.2

# vue-container

## how to use
```vue
<vue-container entry="your micro app's url">
</vue-container>
```

> the micro app should mount and unMount the document events by itself

I'm use external sandbox from https://github.com/woai3c/mini-single-spa, thanks @woai3c
npm package: @samuelmeuli/eslint-config
Description: My ESLint configuration
Author: Samuel Meuli
Latest version: 6.0.0

# eslint-config

These are my personal configurations for [ESLint](https://github.com/eslint/eslint). They are based on [Airbnb's ESLint configurations](https://github.com/airbnb/javascript).

## Overview

This repository contains ESLint configurations for the following setups:

- JavaScript
- JavaScript with React
- TypeScript
- TypeScript with React

They are designed to be used together with [Prettier](https://github.com/prettier/prettier).

## Usage

1. **Install the required packages:**

   - JavaScript:

     ```sh
     yarn add --dev @samuelmeuli/eslint-config \
       eslint-config-prettier \
       && npx install-peerdeps --dev eslint-config-airbnb-base
     ```

   - JavaScript with React:

     ```sh
     yarn add --dev @samuelmeuli/eslint-config \
       eslint-config-prettier \
       && npx install-peerdeps --dev eslint-config-airbnb
     ```

   - TypeScript:

     ```sh
     yarn add --dev @samuelmeuli/eslint-config \
       eslint-config-prettier \
       @typescript-eslint/eslint-plugin \
       @typescript-eslint/parser \
       && npx install-peerdeps --dev eslint-config-airbnb-base
     ```

   - TypeScript with React:

     ```sh
     yarn add --dev @samuelmeuli/eslint-config \
       eslint-config-prettier \
       @typescript-eslint/eslint-plugin \
       @typescript-eslint/parser \
       && npx install-peerdeps --dev eslint-config-airbnb
     ```

2. **Create the following entry in your `package.json` file:**

   - JavaScript:

     ```json
     {
     	"eslintConfig": {
     		"root": true,
     		"extends": ["@samuelmeuli/eslint-config"]
     	}
     }
     ```

   - JavaScript with React:

     ```json
     {
     	"eslintConfig": {
     		"root": true,
     		"extends": ["@samuelmeuli/eslint-config/react"]
     	}
     }
     ```

   - TypeScript:

     ```json
     {
     	"eslintConfig": {
     		"root": true,
     		"extends": ["@samuelmeuli/eslint-config/typescript"]
     	}
     }
     ```

   - TypeScript with React:

     ```json
     {
     	"eslintConfig": {
     		"root": true,
     		"extends": ["@samuelmeuli/eslint-config/typescript-react"]
     	}
     }
     ```

3. **Add a linting script to your `package.json` file:**

   - JavaScript:

     ```json
     {
     	"scripts": {
     		"lint": "eslint --fix --max-warnings 0 ."
     	}
     }
     ```

   - JavaScript with React:

     ```json
     {
     	"scripts": {
     		"lint": "eslint --ext .js,.jsx --fix --max-warnings 0 ."
     	}
     }
     ```

   - TypeScript:

     ```json
     {
     	"scripts": {
     		"lint": "eslint --ext .ts --fix --max-warnings 0 ."
     	}
     }
     ```

   - TypeScript with React:

     ```json
     {
     	"scripts": {
     		"lint": "eslint --ext .ts,.tsx --fix --max-warnings 0 ."
     	}
     }
     ```
npm package: @samuelmeuli/font-manager
Description: Manages, downloads and applies Google Fonts for picker components
Author: Samuel Meuli
Latest version: 1.4.0

# Font Manager

Internal dependency for the [`font-picker`](https://github.com/samuelmeuli/font-picker) and [`font-picker-react`](https://github.com/samuelmeuli/font-picker-react) packages. It is used for managing the list of fonts, keeping track of the active font and downloading/activating Google Fonts.
npm package: @samuelmeuli/prettier-config
Description: My Prettier configuration
Author: Samuel Meuli
Latest version: 2.0.1

# prettier-config

This is my personal configuration for the [Prettier](https://prettier.io) code formatter.

## Installation

```sh
yarn add --dev @samuelmeuli/prettier-config
```

## Usage

Add the following keys to your `package.json` file:

```js
{
  // ...
  "scripts": {
    "format": "prettier --write '**/*.{css,html,js,json,jsx,less,md,scss,ts,tsx,vue,yaml,yml}'"
  },
  "prettier": "@samuelmeuli/prettier-config"
}
```

You can now run `yarn format` to format your code.
npm package: @samuelmeuli/stylelint-config
Description: My Stylelint configuration
Author: Samuel Meuli
Latest version: 3.0.0

# stylelint-config

This is my personal configuration for [Stylelint](https://github.com/stylelint/stylelint). It includes rules for CSS and SCSS and enforces a reasonable property order.

## Overview

The rules are based on the [sass-guidelines](https://github.com/bjankord/stylelint-config-sass-guidelines) and [rational-order](https://github.com/constverum/stylelint-config-rational-order) configurations and include a couple of custom additions and deletions.

The configuration is designed to be used together with [Prettier](https://github.com/prettier/prettier).

## Usage

1. Install the required packages:

```sh
yarn add --dev stylelint @samuelmeuli/stylelint-config
```

2. Create the following entry in your `package.json` file:

```js
{
  // ...
  "stylelint": {
    "extends": "@samuelmeuli/stylelint-config"
  }
}
```

3. Add a linting script to your `package.json` file:

```json
{
	"scripts": {
		"lint": "stylelint --fix --max-warnings 0 '**/*.{css,sass,scss}'"
	}
}
```
npm package: @samuelmeuli/tsconfig
Description: My TypeScript configuration
Author: Samuel Meuli
Latest version: 1.0.0

# tsconfig

This is the shared TypeScript configuration for my projects.

## Install

Install the package using NPM:

```sh
yarn add --dev @samuelmeuli/tsconfig
```

## Usage

Create the `tsconfig.json` file in your project root:

```json
{
  "extends": "@samuelmeuli/tsconfig"
}
```

The default configuration can be overridden or extended:

```json
{
  "extends": "@samuelmeuli/tsconfig",
  "compilerOptions": {
    "module": "ES6"
  }
}
```
npm package: @samuelncui/chonky
Description: A File Browser component for React
Author: Timur Kuzhagaliyev
Latest version: 0.2.7

<p align="center">
    <img src="https://chonky.io/chonky-logo-v2.png" alt="Chonky v2 Logo" width="500" />
    <br />
    <a href="https://www.npmjs.com/package/chonky">
        <img
            alt="NPM package"
            src="https://img.shields.io/npm/v/chonky.svg?style=flat&colorB=ffac5c"
        />
    </a>
    <a href="https://tldrlegal.com/license/mit-license">
        <img
            alt="MIT license"
            src="https://img.shields.io/npm/l/chonky?style=flat&colorB=dcd67a"
        />
    </a>
    <a href="https://www.npmjs.com/package/chonky">
        <img
            alt="NPM downloads"
            src="https://img.shields.io/npm/dt/chonky?style=flat&colorB=aef498"
        />
    </a>
    <a href="https://github.com/TimboKZ/Chonky">
        <img
            alt="GitHub stars"
            src="https://img.shields.io/github/stars/TimboKZ/Chonky?style=flat&colorB=50f4cc"
        />
    </a>
    <a href="https://discord.gg/4HJaFn9">
        <img
            alt="Chat on Discord"
            src="https://img.shields.io/discord/696033621986770957?label=discord&style=flat&colorB=08acee"
        />
    </a>
    <br />
    <br />
    <br />
</p>

Chonky is a file browser component for React. It tries to recreate the native file
browsing experience in your browser. This means your users can make selections, drag
& drop files, toggle between _List_ and _Grid_ file views, use keyboard shortcuts, and
much more!

### [Click here for documentation and examples.](https://chonky.io/)

> Please [create an issue](https://github.com/TimboKZ/Chonky/issues) if you have a
> problem or want to request a feature.

## Preview

<p align="center">
  <img src="https://chonky.io/chonky-v2-preview.gif" alt="Chonky preview">
</p>

## License

MIT © [Tim Kuzhagaliyev](https://github.com/TimboKZ) 2020
npm package: @samuelncui/chonky-icon-fontawesome
Description: FontAwesome icon component for Chonky file browser
Author: Timur Kuzhagaliyev
Latest version: 0.2.7

# `chonky-icon-fontawesome`

This package contains the icon component for [Chonky][chonky], a file browser component
for React. Please refer to [the official documentation][docs] for usage instructions.

## Usage

```shell
npm install chonky@latest chonky-icon-fontawesome@latest
```

```ts
import { setChonkyDefaults } from 'chonky';
import { ChonkyIconFA } from 'chonky-icon-fontawesome';
// Somewhere in your `index.ts`:
setChonkyDefaults({ iconComponent: ChonkyIconFA });
```

[chonky]: https://chonky.io/
[docs]: https://chonky.io/docs/2.x/installation-usage
npm package: @samuelp-mw/react-jitsi
Description: React and Typescript component to include Jitsi Meet with ease
Author: samuel.pierre@maibornwolff.de
Latest version: 1.0.2

# Jitsi Meet React Component

[![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)
[![built with typescript](https://camo.githubusercontent.com/21132e0838961fbecb75077042aa9b15bc0bf6f9/68747470733a2f2f62616467656e2e6e65742f62616467652f4275696c74253230576974682f547970655363726970742f626c7565)](https://www.typescriptlang.org/)

## Notes

The repository has been forked from https://github.com/gatteo/react-jitsi and adapted to the need for a custom Jitsi Meet implementation.

[MIT License.](./LICENSE)
npm package: @samuelpetersson/animate
Description: Animate JavaScript
Author: Samuel Petersson
Latest version: 0.7.0

# Animate

Animate async functions in controllable scopes. 

Examples: [tween](https://samuelpetersson.github.io/animate/examples/tween.html), [fixed](https://samuelpetersson.github.io/animate/examples/fixed.html)


## Install

`npm install @samuelpetersson/animate`

## Usage

```javascript
import animate, {curve, blend} from '@samuelpetersson/animate'

//Tween background color
await animate.tween({duration: 2}, blend.style(document.body, {backgroundColor:'#FF0099'}))

//Wait 1 second...
await animate.delay(1)

//Bullet time!
animate.scale = 0.1

//Tween myElement width and height
await animate.tween({duration: 2, curve: curve.smoothstep}, blend.style(myElement, {width:'100%', height:'400px'}))

//Stop all animations created in the animate scope
animate.clear()

//Create a new scope
var {tween} = animate.scope()

//Tween custom value
await tween({duration:4}, (f) => console.log('Current tween value:', f))
```

## Reference

**scope (animate)**

- `pause:boolean` Indicates whether the scope is paused or not.

- `scale:number` Delta time multiplier. (use this to speed up or slow down an entire scope)

- `scope(scale:number = 1):Scope` Returns a new scope.	

- `clear()` Clear all animations in current scope.

- `until(solve:(deltaTime:number) => boolean):Promise` Resolves when the solve function returns true. 

- `every(items:Promise[]):Promise` Resolves when all promises in the items array has resolved. 

- `delay(duration:number):Promise` Resolves when the accumulated time has reached `duration`.

- `tween({duration:number, curve:(t:number) => number}, mixer:(f:number) => void):Promise` Runs `mixer` with the accumulated time normalized (0 to 1). `duration` specifies duration in seconds. `curve` specifies a function to ease the normalized value.

- `fixed({fps:number, max:number}, update:(fixedDeltaTime:number) => boolean, render:(progress:number) => void)` Runs `update` with a fixed delta time and `render` with the progress in the last time step. `fps` specifies update frames per seconds. `max` specifies an update limit.


**curve**

- `smoothstep(t:number) => number`
- `smootherstep(t:number) => number`
- `powerIn(exp):(t:number) => number`
- `powerOut(exp):(t:number) => number`
- `powerInOut(exp):(t:number) => number`


**blend**

- `float(a:number, b:number, t:number):number` Returns float between a and b.
- `color(a:number, b:number, t:number):number` Returns color between a and b.
- `angle(a:number, b:number, t:number):number` Returns angle between a and b.
- `mixer(target:Object, values:Object, create:(property) => (t:number) => void)` Returns a new mixer function.
- `style(target:Element, values:Object)` Returns a new mixer function .
npm package: @samuelrharahap/moon
Description: 🌙 A lightweight Vue 3 component library based on https://github.com/ulissesferreira/moon
Author: Ulisses Ferreira
Latest version: 0.0.1

# 🌙 Moon

[![npm (scoped)](https://img.shields.io/npm/v/@ulissesferreira/moon)](https://www.npmjs.com/package/@ulissesferreira/moon)
[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@ulissesferreira/moon)](https://bundlephobia.com/result?p=@ulissesferreira/moon@latest)
[![NPM](https://img.shields.io/npm/l/@ulissesferreira/moon)](https://github.com/ulissesferreira/moon/blob/main/LICENSE)

A lightweight Vue 3 component library.

When you are starting a new prototype you want to be able to develop features fast. We created this component library as a way for us to build products quickly without having to deal with complicated packages and a huge bundle sizes.

## Usage

First install the library using your prefered package manager

```bash
yarn add @ulissesferreira/moon
```

then you can import the available components like so

```vue
import { Button } from '@ulissesferreira/moon'
```

## Available commands

Here is a list of all available npm commands.

**Starting the dev environment**
We use Vue Press to hold our component documentation and examples

```bash
yarn dev
```

**Building the documentation**

```bash
yarn build
```

**Serving the documentation**

```bash
yarn serve
```

**Building the library bundles**

```bash
yarn build:library
```

**Analyzing bundle sizes with [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer)**

```bash
yarn analyze
```

**Lint all files**

```bash
yarn lint
```

**Format all files**
```bash
yarn format
```
npm package: @samuelsson/eslint-config
Description: eslint config for various javascript projects
Author: Erik Samuelsson
Latest version: 2.5.2

# ESLint Config

This is for projects with TypeScript, Prettier and React.

## Installation

To be able to use this config we need to install `prettier` and `eslint` together with some base packages. We can do that with one command.

```shell
npx install-peerdeps @samuelsson/eslint-config --dev --yarn
```

This will install all required dependencies as devDependencies in your project. This will only install the bare minimum, and **you need to install additional packages** depending on what project you are developing.

Then you need to install the actual package including all configurations.

```shell
yarn add --dev @samuelsson/eslint-config
```

You also need to set some prettier rules. Create a `.prettierrc` file in the root directory and add this:

````json
{
  "singleQuote": true
}
````

When the config is installed we need to enable one of the configs. Add the property to your `package.json` and also pick what config to use.

### For projects with React and TypeScript

First install additional, required packages.

```shell
yarn add --dev \
  @typescript-eslint/eslint-plugin@^5.30.7 \
  @typescript-eslint/parser@^5.30.7 \
  eslint-config-airbnb@^19.0.4 \
  eslint-plugin-jsx-a11y@^6.6.1 \
  eslint-plugin-react@^7.30.1 \
  eslint-plugin-react-hooks@^4.6.0
```

Then add the correct config to your project. You also need to specify what environments you will be using with this project if not default es6 in browser. This example is using environments for Next.js (both browser and node) with jest, and is set in `package.json`.

```json
{
  "eslintConfig": {
    "root": true,
    "extends": "@samuelsson/eslint-config/react-typescript",
    "env": {
      "es6": true,
      "shared-node-browser": true,
      "jest": true
    }
  }
}
```

Lastly add the lint script to your `package.json`.

```json
{
  "scripts": {
    "lint": "eslint ./ --ext .js,.ts,.tsx"
  }
}
```