open-index/open-npm huggingface dataset:
npm package: @liindata/ls-manage-product
Description: Vue 3 dashboard components built on Element Plus.
Author: mrceel
Latest version: 0.0.6

# ls-manage-product

Vue 3 dashboard components built on Element Plus.

## Install

```bash
npm install @liindata/ls-manage-product
```

Peer dependencies:

- `vue`
- `element-plus`

## Usage

```ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import { LsManageProduct } from '@liindata/ls-manage-product'
import '@liindata/ls-manage-product/style.css'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.use(LsManageProduct)
app.mount('#app')
```

## Components

- `LsCardList`
- `LsCardText`
npm package: @liinkiing/eslint-config
Description: I was tired of copy / pasting my ESLint config, so I've made one.
Author: Omar Jbara
Latest version: 3.0.0

## @liinkiing/eslint-config
I was tired of copy / pasting my ESLint config, so I've made one.

You can extend one of the following configurations:

- `@liinkiing/eslint-config/base`
- `@liinkiing/eslint-config/prettier` (default)
- `@liinkiing/eslint-config/node`
- `@liinkiing/eslint-config/react`
- `@liinkiing/eslint-config/next` (for usage with NextJS)
npm package: @liinkiing/react-hooks
Description: A list of custom react hooks
Author: Omar Jbara
Latest version: 1.11.0

## React hooks
A simple personal list of useful hooks I've made for React.

## Installation
With yarn
```bash
$ yarn add @liinkiing/react-hooks
```

With npm
```bash
$ npm i @liinkiing/react-hooks
```

## Documentation
https://liinkiing.github.io/react-hooks/globals.html

## Example
```typescript jsx
import * as React from 'react'
import {FunctionComponent} from 'react'
import {useResize, useKeyboardShortcuts} from '@liinkiing/react-hooks';

const App: FunctionComponent = props => {
  const { height, width } = useResize()
  console.log(height, width)
  
  useKeyboardShortcuts([
    {
      action: () => { console.log("You've pressed I or S")},
      keys: ["I", "S"]
    },
    {
      action: () => { console.log("You've pressed O")},
      keys: ["O"]
    },
    {
      action: () => { console.log("You've pressed U")},
      keys: ["U"]
    }
  ])
  return (
    <div>
      <h1>App</h1>
    </div>
  )
}

export default App
```
npm package: @liinkiing/react-tabs
Description: A composable React tabs library
Author: liinkiing
Latest version: 1.1.1

# @liinkiing/react-tabs

> A composable React tabs library

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

## Install

```bash
npm install --save @liinkiing/react-tabs
```
Or
```bash
yarn add @liinkiing/react-tabs
```
Internally, it uses [framer/motion](https://github.com/framer/motion) packages for the animations between the tab content. It is referenced as a peerDependency, and you should add `framer-motion` to your packages if you are not already using it. 

```bash
npm install --save framer-motion
```
Or
```bash
yarn add framer-motion
```
## Usage

You can use the `animate`, `initial` and `exit` props in `<Tabs>` component to customize the behaviour of the transitions.
 
```tsx
import * as React from 'react'

import { Tab, Tabs } from '@liinkiing/react-tabs'

class Example extends React.Component {
  render () {
    return (
      <Tabs
          {/* These values are the ones by default */}
          initial={{opacity: 0, x: 40}}
          animate={{opacity: 1, x: 0}}
          exit={{opacity: 0, x: 40}}
        >
        <Tab>
          <Tab.Title>First tab</Tab.Title>
          <Tab.Content>First Content</Tab.Content>
        </Tab>
        <Tab>
          <Tab.Title>Second tab</Tab.Title>
          <Tab.Content>Second content</Tab.Content>
        </Tab>
      </Tabs>
    )
  }
}
```

## License

MIT © [liinkiing](https://github.com/liinkiing)
npm package: @liinkiing/use-mercure
Description: [![Version](https://img.shields.io/npm/v/@liinkiing/use-mercure.svg)](https://npmjs.org/package/@liinkiing/use-mercure) [![Downloads/week](https://img.shields.io/npm/dw/@liinkiing/use-mercure.svg)](https://npmjs.org/package/@liinkiing/use-mercure) [![Li
Author: Omar Jbara
Latest version: 1.1.0

## @liinkiing/use-mercure

[![Version](https://img.shields.io/npm/v/@liinkiing/use-mercure.svg)](https://npmjs.org/package/@liinkiing/use-mercure)
[![Downloads/week](https://img.shields.io/npm/dw/@liinkiing/use-mercure.svg)](https://npmjs.org/package/@liinkiing/use-mercure)
[![License](https://img.shields.io/npm/l/@liinkiing/use-mercure.svg)](https://github.com/Liinkiing/use-mercure/blob/master/package.json)

A hook to integrate  [Mercure](https://mercure.rocks/) EventSource in React.

## Installation
With yarn
```bash
$ yarn add @liinkiing/use-mercure
```

With npm
```bash
$ npm i @liinkiing/use-mercure
```

## Example
```typescript jsx
import React, { useState } from 'react';
import { MercureProvider, useMercure } from '@liinkiing/use-mercure';

interface MessageFromMercure {
  readonly id: string;
  readonly body: string;
}

type Messages = readonly MessageFromMercure[];

const Example: React.FC = () => {
  const [messages, setMessages] = useState<Messages>([]);

  // By using TypeScript generics, you have type-safety for the
  // data coming from your Mercure hub
  useMercure<MessageFromMercure>('http://example.com/topic', message => {
    setMessages([...messages, message]);
  }, [messages]); // array of deps

  return messages.length ? (
    <ul>
      {messages.map(message => (
        <li key={message.id}>{message.body}</li>
      ))}
    </ul>
  ) : (
    <p>No messages...</p>
  );
};

const App: React.FC = () => (
  <MercureProvider
    options={{
      hubUrl: 'http://yourmercure.hub/.well-known/mercure',
      withCredentials: true /* default to false */,
    }}
  >
    <Example />
  </MercureProvider>
);
```
npm package: @liinkiing/use-socket
Description: Hook into socket!
Author: Omar Jbara
Latest version: 1.0.3

## use-socket
A hook to use with [socket.io](https://socket.io).

## Installation
With yarn
```bash
$ yarn add @liinkiing/use-socket
```

With npm
```bash
$ npm i @liinkiing/use-socket
```

## Documentation
https://liinkiing.github.io/use-socket/globals.html

## Example
```typescript jsx
import React, { FunctionComponent, useState } from 'react'
import { SocketProvider, useSocketOn, useSocket, useSocketEmit } from '@liinkiing/use-socket';

const Chat: FunctionComponent = () => {
  const [messages, setMessages] = useState([]);

  const socket = useSocket() // if you want to get access to your socket object

  // useSocketEmit("chat:send", { id: 'random', body: 'blabla'})
  // you can use this only if you are in the root body of your functional component
  // generally, you would use `socket = useSocket()` and then `socket.emit`, but maybe
  // this hook can serve ¯\_(ツ)_/¯

  useSocketOn("chat:message", newMessage =>
    setMessages([newMessage, ...messages])
  );

  return messages.length ? (
    <ul>
      {messages.map(message => (
        <li key={message.id}>{message.body}</li>
      ))}
    </ul>
  ) : (
    <p>No messages...</p>
  );
};

const App: FunctionComponent = () => (
  <SocketProvider url="https://your-ws-endpoint-here/">
    <Chat />
  </SocketProvider>
);
```
npm package: @liinkiing/ytomp3
Description: A simple tool to export a YouTube video to a mp3
Author: Omar Jbara
Latest version: 1.5.4

@liinkiing/ytomp3
======

A simple tool to export a YouTube video to a mp3

[![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io)
[![Version](https://img.shields.io/npm/v/@liinkiing/ytomp3.svg)](https://npmjs.org/package/@liinkiing/ytomp3)
[![Downloads/week](https://img.shields.io/npm/dw/@liinkiing/ytomp3.svg)](https://npmjs.org/package/@liinkiing/ytomp3)
[![License](https://img.shields.io/npm/l/@liinkiing/ytomp3.svg)](https://github.com/Liinkiing/@liinkiing/ytomp3/blob/master/package.json)

# Installation
```bash
# with npm
$ npm i -g @liinkiing/ytomp3

# with yarn
$ yarn global add @liinkiing/ytomp3

# with npx
$ npx @liinkiing/ytomp3
```

# Usage
```
USAGE
  $ ytomp3 [YOUTUBE_URL] # Convert a YouTube video to a mp3 file or a YouTube playlist to a zip file

ARGUMENTS
  YOUTUBE_URL  The youtube video or playlist URL (supports music.youtube.com)

OPTIONS
    -b, --bitrate=128|256|320  (required) [default: 128] Set the bitrate of the sound
    -t, --noThumbnail          Don't attach a thumbnail in the sound ID3 tags
    -n, --name=name            (required) [default: exported] The output file name
```
npm package: @liip-lausanne/eslint-config
Description: Liip Lausanne EsLint common configuration
Author: Liip
Latest version: 2.1.0

[![npm version](https://badge.fury.io/js/%40liip-lausanne%2Feslint-config.svg)](https://badge.fury.io/js/%40liip-lausanne%2Feslint-config)
[![test](https://github.com/liip-lausanne/eslint-config/actions/workflows/test.yml/badge.svg)](https://github.com/liip-lausanne/eslint-config/actions/workflows/test.yml)

# @liip-lausanne/eslint-config

Liip Lausanne EsLint common configuration (i.e. JavaScript styleguide). This preset should be used with Prettier. See [here](https://liip-lausanne.github.io/coding-standards/javascript/#code-styling) for the detailed setup.

## Usage

Version 2.x works with ESLint 9 and 10; the repo is tested with ESLint 10 and Node.js 24. For the legacy `.eslintrc` format use version 1 of this config.

Install the package first:

```
npm i -D @liip-lausanne/eslint-config
```

Load the plugin into your EsLint flat configuration (eslint.config.js):

```js
import eslintPluginLiipLausanne from '@liip-lausanne/eslint-config';

export default {
  // ...
  eslintPluginLiipLausanne,
  // ...
};
```

If you don’t have an EsLint config yet, you can generate one using `eslint --init`.

## Rules

All the rules are defined in [index.js](https://github.com/liip-lausanne/eslint-config/blob/main/index.js).

### Code example

```javascript
/**
 * A block comment when you have to talk a lot
 */

import module from 'module';

export default class MyClass {
  constructor(options) {
    this.people = ['john', 'vanessa', 'gina'];
    this.options = {
      display: true,
      layout: 'basic',
      ...options,
    };

    this.addEventListeners();
    this.createPeopleCards();
  }

  addEventListeners() {
    const link = document.querySelector('.link');
    const el = document.querySelector('.element');

    link.addEventListener('click', this.open.bind(this));
    el.addEventListener('click', this.toggle.bind(this));
  }

  createPeopleCards() {
    this.peopleCards = this.people.map(
      (people) => `<div class="people">${people.name}</div>`
    );
  }

  open(e) {
    const parentNode = e.currentTarget.parentElement;
    let result;

    // Small comment for whatever you like
    switch (parentNode.type) {
      case 'text':
        result = `Lorem ipsum ${parentNode.value} dolor sit amet`;
        break;
      case 'textarea':
        result = parentNode.value;
        break;
      default:
        result = 42;
    }

    return result;
  }

  toggle(e) {
    e.preventDefault();

    if (e.target) {
      this.people.push(e.target.name);
      module.foo();
    } else if (e.name === 'john') {
      module.hereItIs();
    } else {
      module.bar();
    }
  }
}
```
npm package: @liip/npm-icons
Description: Import svg icons using cli
Author: Renato Moor
Latest version: 1.0.0

## [Official Documentation](https://liip.github.io/npm-icons/website)

To get started quickly you can add `liip-npm-icons` dependency to your project:

```bash
npm install @liip/npm-icons
```

Then create a config file `.npm-iconsrc.json`
and where you want to download your icons
```json[.npm-iconsrc.json]
{
  "iconsPath": "./src/assets/icons",
}
```


## Extended configuration
You would need to add the following variable to your `.npm-iconsrc.json`
```json[.npm-iconsrc.json]
{
  "iconsPath": "./src/assets/icons",
  "iconsSvgBaseUrl": "https://icons.liip.ch/icons",
  "iconsJsonUrl": "https://icons.liip.ch/icons.json",
  "iconsTypes": ["regular", "light"],
  "authorization": {
    "username": null,
    "password": null
  }
}
```
In case you want to add the username and password as environment variable you can use:

```.dotenv
ICONS_AUTH_USERNAME="yourUsername"
ICONS_AUTH_PASSWORD="yourPassword"
```

### Basic command use
```bash
npx icons add <icon-name>
```

### import icons from icons list file
File required one icon name per line  
File example (icons-list.txt):
```text
house
shop
music-ticket
```

command example:
```bash
npx icons add -l icons-list.txt
```
## Vue 3 integration

Requirements: 
 - Vue 3
 - Vite

 1. First we need to install vite-svg-loader to be able to use svg files as vue components:
```bash
npm install vite-svg-loader --save-dev
```
 2. Add svgLoader to `vite.config.js`
```javascript[vite.config.js]
import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [vue(), svgLoader()]
})
```
 4. Add the vue icon component `BaseIcon`
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import BaseIcon from '@liip/npm-icons'

createApp(App)
  .use(BaseIcon)
  .mount('#app')
```

 5. Use the baseIcon component passing the icon name
```vue
<template>
  <BaseIcon name="house" />
</template>
```

 6. (Optional) In case your icons are not located on- `/src/assets/icons`
```vue
<template>
  <BaseIcon name="house" iconsPath="/different/icons/path" />
</template>
```

## Contribute
To contribute first clone the project:
```bash
git clone git@github.com:liip/npm-icons.git
```

### Release
The tool release-it is used to make a release
so it is as simple as running the following command:
```bash
npm run release 
```

### Update documentation
Our documentation is made with nuxt-content and the docs theme
If you want to make any changes you need execute the following commands:
```bash
cd docs
npm install
npm run dev
```

#### Deployment
The deployment is made with github pages using static files thanks to 
nuxt generate.
If you want to deploy some changes just run `npm run release` and 
then answer yes to the question `Do you want to build the docs?`
then release-it will run `nuxt generate` and commit the changes into the 
tag commit.
npm package: @liip/styleguide
Description: Liip.ch official web styleguide
Author: Liip AG
Latest version: 8.2.0

# Liip Styleguide

A living documentation of the components used, essentially, on [liip.ch](https://www.liip.ch). The goal of this documentation is to illustrate all the elements available and therefor have an overview of the style and behavior of the interface of the website.

For more information about this project, visit [styleguide.liip.ch](http://styleguide.liip.ch).

## Project setup

1. Clone the repository
```bash
git clone git@github.com:liip/styleguide.git
```
2. Run `npm install` to install dependencies
3. Run `npm start` to start the development server

Go to [localhost:3000](http://localhost:3000/).

## Build a static version

```bash
npm run build
```

Webpack bundle files in the `dist` folder which is then copied over to the `build` folder where Fractal exports the documentation. We have two different folder to be able to include `dist` within the npm package while ignoring the `build`.

## Release a new version

Bump the version in package.json, update the Changelog, build, commit, tag, push, publish to npm repository and deploy automatically:

```bash
npm run release
```

Package lives at [npmjs.com/package/@liip/styleguide](https://www.npmjs.com/package/@liip/styleguide).
Documentation is deployed to [styleguide.liip.ch](https://styleguide.liip.ch).

## Contribute

### Commit guidelines

Follow the [Angular commit guidelines](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines) to help generating a clean and readable Changelog.

### Issues

Use [issues](https://github.com/liip/styleguide/issues) to report anything, from bugs to feature requests.

### Code

To contribute to this project, [open a pull request](https://github.com/liip/styleguide/pulls).

If you make changes in the JavaScript, setup [EsLint](https://eslint.org/) in your editor or run `npm run lint` to ensure consistency.

You might be interested in the [coding standards](https://github.com/team-rawbot/coding-standards) applied to this project.
npm package: @liixing/react-native-vlc-media-player
Description: React native media player for video streaming and playing. Supports RTSP,RTMP and other protocols supported by VLC player
Author: lixing9605@gmail.com
Latest version: 2.0.22

// setCropRatioWithNumerator

- (void)setCropRatioWithNumerator:(unsigned int)numerator denominator:(unsigned int)denominator
  {
  libvlc_video_set_crop_ratio(\_playerInstance, numerator, denominator);
  }.
npm package: @lijiakai/myui
Description: A Vue 3 component library built with Vite
Latest version: 0.1.0

# Vue Component Library

基于 Vite 8 + Vue 3 + TypeScript + Vitest + VitePress 的前端组件库脚手架。

## 常用命令

- 安装依赖：`npm install` 或 `pnpm install`
- 本地开发（示例/调试库）：`npm run dev`
- 构建组件库：`npm run build`
- 运行单元测试：`npm test`
- 测试 watch 模式：`npm run test:watch`
- 文档站开发：`npm run docs:dev`
- 文档站构建：`npm run docs:build`

## 目录结构

- `src/`：组件库源码
  - `components/`：单个 Vue 组件
  - `index.ts`：库对外导出入口
- `docs/`：VitePress 文档
  - `.vitepress/config.ts`：VitePress 配置
  - 其他 Markdown 文档：组件文档、使用示例