open-index/open-npm huggingface dataset:
npm package: @ldecafmeyer/create-powersync
Description: !!UNOFFICIAL!! CLI for easily creating PowerSync web applications
Author: Luc de Cafmeyer
Latest version: 0.3.2

# Create PowerSync
   
**!!UNOFFICIAL!!** CLI for quickly bootstrapping PowerSync web applications.

## Usage

Using [pnpm](https://pnpm.io/):

```sh
pnpm dlx @ldecafmeyer/create-powersync
```

Using [npm](https://www.npmjs.com/):

```sh
npx @ldecafmeyer/create-powersync@latest
```

## Development

This project uses [pnpm](https://pnpm.io/) for the CLI.

Install packages:

```sh
pnpm install
```

Start development:

```sh
pnpm dev
```

Run the CLI:

```sh
node index.js
```
npm package: @ldelia/react-media
Description: A React components collection for media-related features.
Author: Lisandro Delia
Latest version: 1.0.0

# React Media

A React components collection for media-related features.

## Available Components

- Timeline ([Docs](./src/components/timeline/README.md))
- ReproductionWidget ([Docs](./src/components/reproduction-widget/README.md))

## Storybook

Launch the Storybook playground:

##### `npm run storybook`

Make sure storybook is already installed by running npx storybook@latest init

## Test suite collection

Launch the test suite collection:

##### `npm test`


## Publishing on npm

Build the project

##### `npm run build`

Publish the project

##### `npm publish`
npm package: @ldellaquila/uikit
Description: Set of UI components for pancake projects
Latest version: 0.29.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: @ldesign/desktop
Description: 基于vue2和@vue/composition-api桌面端组件库
Author: ldesign
Latest version: 0.5.0

<p align="center" dir="ltr" style="display:flex;flex-direction:row;justify-content:center;">
    <img alt="logo" src="https://yun.swimly.cn/source/logo.svg" width="100" height="100" style="margin-bottom: 10px;">
</p>

<h1 align="center" style="display:flex;flex-direction:row;justify-content:center;">LDesign Desktop</h1>

<p align="center" dir="ltr" style="display:flex;flex-direction:row;justify-content:center;">基于`vue2`的桌面端组件库</p>

<p align="center" dir="ltr" style="display:flex;flex-direction:row;justify-content:center;">
  <img src="https://img.shields.io/npm/v/@ldesign/desktop?style=flat-square" alt="npm version" />
  <img src="https://img.shields.io/npm/dm/@ldesign/desktop.svg?style=flat-square&color=#4fc08d" alt="downloads" />
  <img src="https://img.badgesize.io/https:/unpkg.com/@ldesign/desktop/dist/ldesign.min.js?label=gzip%20size&compression=gzip&color=&style=flat-square#4fc08d" alt="Gzip Size" />
</p>

---

<p align="center" dir="ltr">
  🔥 <a href="https://swimly.cn/desktop">文档网站（国内）</a>
  &nbsp;
  🌈 <a href="https://git.longrise.cn:6285/ldesign/ldesign-desktop">代码仓库</a>
</p>

---

@ldesign/desktop 是基于`vue@2.6.14`开发用于 `桌面端` 的组件库，切记保证本地的 vue 版本号不要高于 2.6.x，如果使用报错，请检查本地项目的 package.json，确保`vue`以及`vue-template-compiler`的版本号为：`2.6.x`。

```
{ javascript
  "dependencies": {
    ...,
    "vue": "~2.6.14",
  },
  "devDependencies": {
    ...,
    "vue-template-compiler": "~2.6.14"
  }
}
```

#### 特性

- 用于桌面端系统及网站，统一的接口风格，一致的UI表现

- 基于 vue(2.6.14)，`@vue/composition-api`开发，既能使用2.0的语法，也能尝鲜3.0的语法

- 支持暗黑模式及主题定制，基于`less`变量和`css`变量，更换主题方式灵活

- 支持按需加载，通过`es`和`esm`模块引入，能最小限度减小项目大小

#### 安装

```bash
npm i @ldesign/desktop

// 最好还要安装@vue/composition-api

npm i @vue/composition-api
```

#### 基本用法

推荐使用 `Webpack` 或 `Rollup` 等支持 tree-shaking 特性的构建工具，无需额外配置即可实现组件按需引入：

```
import Vue from 'vue'
import LDesign from '@ldesign/desktop';
import compositionAPI from '@vue/composition-api';
// 这里面主要是主题以及reset样式，组件自身的样式已经跟随组件一同加载，如果需要自定义主题，也可通过改变该文件来实现
import '@ldesign/desktop/es/style/index.css';

Vue.use(LDesign)
Vue.use(compositionAPI)
```

> 注意：如果没有安装`@vue/composition-api`，项目可能会报错。
npm package: @ldesign/desktop-next
Description: 基于vue3的桌面端组件库
Author: ldesign
Latest version: 0.5.1

<p align="center" dir="ltr" style="display:flex;flex-direction:row;justify-content:center;">
    <img alt="logo" src="https://yun.swimly.cn/source/ldesign/logo.svg" height="60" style="margin-bottom: 10px;">
</p>

<h1 align="center" style="display:flex;flex-direction:row;justify-content:center;">桌面端组件库（vue3）</h1>

<p align="center" dir="ltr" style="display:flex;flex-direction:row;justify-content:center;margin-bottom: 24px;">基于`vue3`的桌面端组件库</p>

<p align="center" dir="ltr" style="display:flex;flex-direction:row;justify-content:center;gap:16px;margin: 16px 0;">
  <img src="https://img.shields.io/npm/v/@ldesign/desktop-next?style=flat-square" alt="npm version" />
  <img src="https://img.shields.io/npm/dm/@ldesign/desktop-next.svg?style=flat-square&color=#4fc08d" alt="downloads" />
  <img src="https://img.badgesize.io/https:/unpkg.com/@ldesign/desktop-next/dist/ldesign.min.js?label=gzip%20size&compression=gzip&color=&style=flat-square#4fc08d" alt="Gzip Size" />
</p>

---

<p align="center" dir="ltr">
  🔥 <a href="https://yun.swimly.cn/ldesign/desktop-next">文档网站</a>
  &nbsp;
  🌈 <a href="https://git.longrise.cn:6285/ldesign/ldesign-desktop-next">代码仓库</a>
</p>

---

@ldesign/desktop 是基于`vue@3`开发用于 `桌面端` 的组件库。

#### 特性

- 用于桌面端系统及网站，统一的接口风格，一致的UI表现

- 基于 vue3

- 支持暗黑模式及主题定制，基于`less`变量和`css`变量，更换主题方式灵活

- 支持按需加载，通过`es`和`esm`模块引入，能最小限度减小项目大小

#### 安装

```bash
npm i @ldesign/desktop-next
```

#### 基本用法

推荐使用 `Webpack` 或 `Rollup` 等支持 tree-shaking 特性的构建工具，无需额外配置即可实现组件按需引入：

```
import Vue from 'vue'
import LDesign from '@ldesign/desktop-next';
import '@ldesign/desktop/es/style/index.css';

Vue.use(LDesign)
```
npm package: @ldesign/desktop-profession-next
Description: 基于vue3的桌面端业务组件库
Author: ldesign
Latest version: 0.3.1

<p align="center" dir="ltr" style="display:flex;flex-direction:row;justify-content:center;">
    <img alt="logo" src="https://yun.swimly.cn/source/ldesign/logo.svg" height="60" style="margin-bottom: 10px;">
</p>

<h1 align="center" style="display:flex;flex-direction:row;justify-content:center;">桌面端业务组件库（vue3）</h1>

<p align="center" dir="ltr" style="display:flex;flex-direction:row;justify-content:center;margin-bottom: 24px;">基于`vue3`的桌面端业务组件库</p>

<p align="center" dir="ltr" style="display:flex;flex-direction:row;justify-content:center;gap:16px;margin: 16px 0;">
  <img src="https://img.shields.io/npm/v/@ldesign/desktop-profession-next?style=flat-square" alt="npm version" />
  <img src="https://img.shields.io/npm/dm/@ldesign/desktop-profession-next.svg?style=flat-square&color=#4fc08d" alt="downloads" />
  <img src="https://img.badgesize.io/https:/unpkg.com/@ldesign/desktop-profession-next/dist/ldesign.min.js?label=gzip%20size&compression=gzip&color=&style=flat-square#4fc08d" alt="Gzip Size" />
</p>

---

<p align="center" dir="ltr">
  🔥 <a href="https://yun.swimly.cn/ldesign/desktop-next">文档网站</a>
  &nbsp;
  🌈 <a href="https://git.longrise.cn:6285/ldesign/ldesign-desktop-next">代码仓库</a>
</p>

---

@ldesign/desktop 是基于`vue@3`开发用于 `桌面端` 的业务组件库。

#### 特性

- 用于桌面端系统及网站，统一的接口风格，一致的UI表现

- 基于 vue3

- 支持暗黑模式及主题定制，基于`less`变量和`css`变量，更换主题方式灵活

- 支持按需加载，通过`es`和`esm`模块引入，能最小限度减小项目大小

#### 安装

```bash
npm i @ldesign/desktop-profession-next
```

#### 基本用法

推荐使用 `Webpack` 或 `Rollup` 等支持 tree-shaking 特性的构建工具，无需额外配置即可实现组件按需引入：

```
import Vue from 'vue'
import LDesignProfession from '@ldesign/desktop-profession-next';
import '@ldesign/desktop/es/style/index.css';

Vue.use(LDesignProfession)
```
npm package: @ldesign/eslint-config-monorepo
Description: [![npm](https://img.shields.io/npm/v/@ldesign/eslint-config?color=a1b858&label=)](https://npmjs.com/package/@ldesign/eslint-config)
Author: Anthony Fu
Latest version: 0.33.2

# @ldesign/eslint-config

[![npm](https://img.shields.io/npm/v/@ldesign/eslint-config?color=a1b858&label=)](https://npmjs.com/package/@ldesign/eslint-config)

- Single quotes, no semi
- Auto fix for formatting (aimed to be used standalone without Prettier)
- Designed to work with TypeScript, Vue out-of-box
- Lint also for json, yaml, markdown
- Sorted imports, dangling commas
- Reasonable defaults, best practices, only one-line of config
- **Style principle**: Minimal for reading, stable for diff

## Usage

### Install

```bash
pnpm add -D eslint @ldesign/eslint-config
```

### Config `.eslintrc`

```json
{
  "extends": "@ldesign"
}
```

> You don't need `.eslintignore` normally as it has been provided by the preset.

### Add script for package.json

For example:

```json
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}
```

### Config VS Code auto fix

Install [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and create `.vscode/settings.json`

```json
{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```

### TypeScript Aware Rules

Type aware rules are enabled when a `tsconfig.eslint.json` is found in the project root. Refer to [this file](https://github.com/ldesign/eslint-config/blob/main/packages/typescript/index.js#L17).

## Extended Reading

Learn more about the context - [Why I don't use Prettier](https://ldesign.me/posts/why-not-prettier).

## Check Also

- [ldesign/dotfiles](https://github.com/ldesign/dotfiles) - My dotfiles
- [ldesign/vscode-settings](https://github.com/ldesign/vscode-settings) - My VS Code settings
- [ldesign/ts-starter](https://github.com/ldesign/ts-starter) - My starter template for TypeScript library
- [ldesign/vitesse](https://github.com/ldesign/vitesse) - My starter template for Vue & Vite app

## License

[MIT](./LICENSE) License &copy; 2019-PRESENT [Anthony Fu](https://github.com/ldesign)