open-index/open-npm huggingface dataset:
npm package: @lugia/theme-css-hoc
Description: An example of lerna package.
Author: #lugia#
Latest version: 1.1.28

# 说明
 CSSComponent支撑模块，用来将ThemeConfig转换为CSS
````
import {styled, css, keyframes}, CSSComponent from '@lugia/theme-css-provider';

````
CSSComponent: 提供ThemeMeta自动转换的功能
keyframes: 等价于styled的keyframes
css: 等价于styled的css
styled: 等价于styled
npm package: @lugia/theme-hoc
Description: Theme hoc
Author: #lugia#
Latest version: 1.1.21

# 说明
 赋予一个React组件有theme(主题配置的能力) 
# API说吗
````
import ThemeHoc from '@lugia/theme-hoc';

type ThemeHocOption = {
  enabledState: {
    hover: boolean, 
    active: boolean,
  },
};

type ProviderComponent = React.ComponentType<any>;


ThemeHoc  (
  Target: ProviderComponent,
  widgetName: string,
  opt?: ThemeHocOption = { hover: false, active: false },
): Function;

````
Target: 被包括的目标组件组件。
widgetName: 目标组件的react组件显示名，是为了更方便的定位组件以及测试用例。
opt: 配置是否自动注入状态捕获。其中,true标识开启状态，false为关闭状态。默认是不开启状态。hover鼠标移入移除组件。actived是鼠标摁住不放状态。
npm package: @lugia/theme-hoc-devtools
Description: Theme debugger support
Author: #lugia#
Latest version: 1.0.8

# 说明
 赋予一个React组件有theme(主题配置的能力) 
# API说吗
````
import ThemeHoc from '@lugia/theme-hoc';

type ThemeHocOption = {
  enabledState: {
    hover: boolean, 
    active: boolean,
  },
};

type ProviderComponent = React.ComponentType<any>;


ThemeHoc  (
  Target: ProviderComponent,
  widgetName: string,
  opt?: ThemeHocOption = { hover: false, active: false },
): Function;

````
Target: 被包括的目标组件组件。
widgetName: 目标组件的react组件显示名，是为了更方便的定位组件以及测试用例。
opt: 配置是否自动注入状态捕获。其中,true标识开启状态，false为关闭状态。默认是不开启状态。hover鼠标移入移除组件。actived是鼠标摁住不放状态。
npm package: @lugindev/brohelper
Description: user browser and device info
Author: Lugin Dmitriy
Latest version: 1.0.6

# Brohelper

Brohelper - browser helper. A set of simple helper methods with information about the browser and device.

**This is a set of ES6 modules**

## Install
```JavaScript
npm i @lugindev/brohelper
```

```JavaScript
import * as brohelper from '@lugindev/brohelper'
//or
import { methodName } from '@lugindev/brohelper'
```

## Methods

| methodName                  | return  | desc                                                    |
|-----------------------------|---------|---------------------------------------------------------|
| **browserScrollBarWidth()** | Number  | Browser scrollbar width                                 |
| **browserIsIE()**           | Boolean | Browser is Internet Explorer                            |
| **browserIsEdge()**         | Boolean | Browser is Edge                                         |
| **deviceIsMac()**           | Boolean | Detect MacOS. This method return true also for iPad Pro |
| **deviceIsWin()**           | Boolean | Detect Windows OS                                       |
| **deviceUseCursor()**       | Boolean | Check user devise use cursor(mouse) or not              |

Will be supplemented ...
npm package: @lugindev/truescrollbar
Description: True simple custom scrollbar vanilla js
Author: Lugin Dmitriy
Latest version: 1.0.10

# TrueScrollBar

TrueScrollBar - light weight custom scrollbar library (min.css + min.js ~ **7kB**)

- The library does not remove the native scroll. She hides it.
- Appearance is easy to customize with CSS
- Browser support IE11+
- Vanilla js

---

![alt text](./assets/tsb-screen.png "Screen")

## Todo

1. Install
2. Use
3. Put a star on [GitHub](https://github.com/lugin-design/truescrollbar)

## Usage

### Install with NPM
```JavaScript
npm i @lugindev/truescrollbar
```

```JavaScript
import TrueScrollBar from '@lugindev/truescrollbar'
import '@lugindev/truescrollbar/TrueScrollBar.min.css'
```

### From CDN [jsdelivr](https://www.jsdelivr.com/package/npm/@lugindev/truescrollbar?path=src)

```HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lugindev/truescrollbar@1/src/TrueScrollBar.min.css">
<script src="https://cdn.jsdelivr.net/npm/@lugindev/truescrollbar@1/src/TrueScrollBar.min.js"></script>
```

### Use in JS
```JavaScript
const el = document.querySelector('.you-element')
new TrueScrollBar(el)

// with options
new TrueScrollBar(document.body, {takeMarkup: true})

```
### Use in VUE
```HTML
<template lang="pug">

   div(ref='myScroll')
       p TrueScrollBar ease to use and customize
       p TrueScrollBar ease to use and customize
       p TrueScrollBar ease to use and customize

</template>

<script>
   import TrueScrollBar from '@lugindev/truescrollbar'
   import '@lugindev/truescrollbar/TrueScrollBar.min.css'

   export default {
       mounted() {
           new TrueScrollBar(this.$refs.myScroll)
       }
   }
</script>

<style lang="sass">
   .tsb-scroll
       // customize
</style>
```

## Options

```JavaScript
{
    // Render TrueScrollBar only desktop
    // I see no reason to replace scrollbar on mobile
    // {Boolean} default: false
    desktopOnly: false,

    // If true: scrollbar will take up space in the markup
    // Default scrollbar is position: absolute
    // {Boolean} default: false
    takeMarkup: false,

    // Enable reading right to left direction
    // {Boolean} default: false
    rtl: false
}
```
npm package: @lugn/safely
Description: One of the primary motivations for this package is when you have a large amount of, potentially dirty, data. Imagine you want to lower case a lot of data, but, since it might be dirty, you cannot simply write: `x.toLowerCase()` because you have no idea if
Author: Jonas Thiesen
Latest version: 1.2.0

# What's this package trying to solve?
## Dirty data...
One of the primary motivations for this package is when you have a large amount of, potentially dirty, data. Imagine you want to lower case a lot of data, but, since it might be dirty, you cannot simply write: `x.toLowerCase()` because you have no idea if `x` is `null`, `5`, or something completely different – remember, you are working with potentially dirty data. You could check for `undefined`, `null`, etc., but that will quickly get ugly to look at. You could also wrap it in a `try/catch`, but that will also quickly become cluncky to write. The solution? How about wrapping the potentially dangerous operation in `safely` and let that take care of all the nasty stuff?

# Install
With your package manager of choice:

**Yarn**
```
yarn add @lugn/safely
```

**NPM**
```
npm i @lugn/safely
```

# How to use
You supply a function you want to make safe to `safely`. This prevents your function from throwing an error

## Example
```js
const dangerousLowerCase = str => str.toLowerCase()
const safeLowerCase = safely(dangerousLowerCase)

dangerousLowerCase('HELLO WORLD') // hello world
safeLowerCase('HELLO WORLD')      // hello world

dangerousLowerCase(5)             // TypeError
safeLowerCase(5)                  // null

dangerousLowerCase(null)          // TypeError
safeLowerCase(null)               // null
```

You can also provide an optional second argument to `safely`. This will be supplied with the error that was thrown when calling the function. This will allow you to change the value that is returned to something else instead of `null`. You can also use it to log the error.

## Example
```js
const dangerousLowerCase = str => str.toLowerCase()
const safeLowerCase = safely(dangerousLowerCase, () => 'n/a')

// Very primitive logger...
const logger = error => console.log(error)
const safeLowerCaseLogger = safely(dangerousLowerCase, error => logger(error))

safeLowerCase(null)       // n/a
safeLowerCaseLogger(null) // undefined (logs the error)
```

When doing some error handling, it might be relevant to know what the value was. This could be useful for logging, but maybe you want it to be handled a specific way depending on the value.

## Example
```js
const handleError = (error, value) => {
  console.log(`Error caused by: ${value}`, error)
}

const processResponse = obj => obj.response.data.number
const safeProcessResponse = safely(processResponse, (error, ([value])) => handleError(error, value))

const apiResponse = { response: null }
safeProcessResponse(apiResponse) // undefined (logs the error together with the value)
```
npm package: @lugou/commit-config-preset
Description: lugou commit config preset
Author: lugou
Latest version: 1.0.1


<h1 align="center">commit-config-preset <sup>lugou</sup></h1>

<p align="center">
<a href="https://www.npmjs.com/package/@lugou/commit-config-preset" target="__blank"><img src="https://api.iconify.design/simple-icons:git.svg?color=%23878787" height="32" alt="commit-config-preset" /></a>
</p>

<p align="center">commit 规则<br>
</p>

## 使用方式

```bash
yarn add @lugou/commit-config-preset -D
pnpm add @lugou/commit-config-preset -D
```

### .cz-config.js

```js
const lugouConfig = require("@lugou/commit-config-preset");
module.exports = {
  ...lugouConfig,
  // 你的其他配置
};
```
npm package: @lugou/eslint-config-typescript
Description: typescript and eslint config
Author: lugou
Latest version: 1.0.1

<h1 align="center">eslint-config-typescript <sup>lugou</sup></h1>

<p align="center">
<a href="https://www.npmjs.com/package/@lugou/eslint-config-typescript" target="__blank"><img src="https://api.iconify.design/teenyicons:typescript-solid.svg?color=%23878787" height="32"   alt="eslint-config-typescript" /></a>
</p>

<p align="center">typescript eslint 规则<br>
</p>

## 使用方式

```bash
yarn add @lugou/eslint-config-typescript --dev
pnpm add @lugou/eslint-config-typescript --dev
```

```js
// .eslintrc.js
module.exports = {
  extends: ["@lugou/eslint-config-typescript"],
  rules: {
    // 自定义你的规则
  },
};
```
npm package: @lugou/eslint-config-vue3
Description: vue3 eslint config
Author: lugou
Latest version: 1.0.1

<h1 align="center">eslint-config-vue3 <sup>lugou</sup></h1>

<p align="center">
<a href="https://www.npmjs.com/package/@lugou/eslint-config-vue3" target="__blank"><img src="https://api.iconify.design/teenyicons:vue-outline.svg?color=%23878787" height="32" alt="eslint-config-vue3" /></a>
<a href="https://www.npmjs.com/package/@lugou/eslint-config-vue3" target="__blank"><img src="https://api.iconify.design/teenyicons:eslint-solid.svg?color=%23878787" height="32" alt="eslint-config-vue3" /></a>
</p>

<p align="center">vue3 eslint 规则<br>
</p>

## 使用方式

```bash
yarn add @lugou/eslint-config-vue3 --dev
pnpm add @lugou/eslint-config-vue3 --dev
```

```js
// .eslintrc.js
module.exports = {
  extends: ["@lugou/eslint-config-vue3"],
  rules: {
    // 自定义你的规则
  },
};
```
npm package: @lugou/prettier-config-preset
Description: lugou prettier config preset
Author: lugou
Latest version: 1.0.1


<h1 align="center">prettier-config-preset <sup>lugou</sup></h1>

<p align="center">
<a href="https://www.npmjs.com/package/@lugou/prettier-config-preset" target="__blank"><img src="https://api.iconify.design/simple-icons:prettier.svg?color=%23878787" height="32" alt="prettier-config-preset" /></a>
</p>

<p align="center">prettier 规则<br>
</p>

## 使用方式

```bash
yarn add @lugou/prettier-config-preset --dev
pnpm add @lugou/prettier-config-preset --dev
```

### package.json

```json
{
  "prettier": "@lugou/prettier-config-preset"
}
```

### .prettierrc.js (CJS 使用方式)

```js
const lugouConfig = require("@lugou/prettier-config-preset");
module.exports = {
  ...lugouConfig,
  // 你的其他配置
};
```

### `ESM` 使用方式

```js
import lugouConfig from "@lugou/prettier-config-preset";
```