open-index/open-npm huggingface dataset:
npm package: @fond-of/prettier-config
Description: Common prettier config for JavaScript projects at fond-of
Author: Philipp Brumm
Latest version: 0.0.1

# `@fond-of/prettier-config`

## Usage

**Install**:

```bash
yarn add --dev @fond-of/prettier-config
```

**Edit `package.json`**:

```json
{
  "prettier": "@fond-of/prettier-config"
}
```
npm package: @fond-web/eslint-config
Description: 一个可复用、可扩展的 ESLint 配置预设，用于在团队或个人项目中保持一致的代码风格和质量。
Latest version: 1.0.5

# @senran/eslint-config

一个基于 ESLint Flat Config 的多用途配置预设，内置 React/Vue/Svelte/Solid/Next.js、JSONC/YAML/TOML、格式化器、正则、UnoCSS 等常用集成，并自带 `css-property-order`、`import-length-order` 等自定义规则，帮助团队快速统一代码质量。

## 目录

```text
.github/              CI、工作流
src/                  配置与规则实现
test/                 规则与集成测试（Vitest）
  rules/              自定义规则单元测试
  integrations/       端到端 ESLint 场景测试
```

## 安装

```bash
pnpm install
# 或 npm / yarn 视项目需要
```

## 使用方式

在项目根目录创建 `eslint.config.js`（或 `.ts`）：

```ts
import eslint from "@senran/eslint-config";

export default eslint({
  react: true,
  vue: false,
  // 根据需要开启更多集成
});
```

常用 `pnpm` 命令：

| 命令            | 说明                                   |
| --------------- | -------------------------------------- |
| `pnpm build`    | 运行类型生成与 Rollup 打包             |
| `pnpm test`     | 执行所有规则与集成测试（Vitest）       |
| `pnpm lint`     | 使用当前配置对仓库执行 ESLint          |
| `pnpm lint:fix` | 自动修复仓库内的 lint 问题             |
| `pnpm gen`      | 运行 `scripts/typegen.ts` 生成类型定义 |

## 测试体系

- **规则级单元测试**：位于 `test/rules/*`，例如 `css-property-order`、`import-length-order` 会读取 `test/fixtures/rules/...` 的夹具，验证所有分支逻辑与自动修复。
- **集成级端到端测试**：位于 `test/integrations/*`，针对 `src/integrations` 中的每个模块准备真实项目结构（`test/fixtures/integrations/<name>`），运行 ESLint Composer 组合出的配置进行断言。覆盖范围包括 React/Vue/Svelte/Solid/Next、Vitest、JSONC/YAML/TOML、formatter、node/pnpm、comments、disables、忽略策略、排序等模块。格式化类测试会在控制台输出自动修复后的代码片段，便于排查。

执行所有测试：

```bash
pnpm vitest test/integrations
pnpm vitest test/rules
```

## 参与贡献

1. Fork & clone 仓库，执行 `pnpm install`
2. 修改代码并确保 `pnpm test` 全部通过
3. 提交 PR，说明本次变更内容与动机

如需新增 ESLint 集成，建议：

1. 先在 `src/integrations` 中实现逻辑
2. 在 `test/fixtures/integrations/<name>` 添加夹具（`options.json`、`files/`、`expect.json`）
3. 在 `test/integrations/<name>.test.ts` 调用 `lintIntegrationFixture` 并断言

## 许可证

[MIT](LICENSE)
npm package: @fondakogb/carousel-loop
Description: A typescript based infinite carousel for react-native
Author: fondakogb
Latest version: 1.1.0

## react-native-carousel-loop

Fork of https://github.com/sannajammeh/react-native-carousel-loop
wiht few pull merges from original implementation of https://github.com/phil-r/react-native-looped-carousel.

NOTE source map files are not re-generated (I left the same as in the forked repo)
## Example usage

```tsx
import React, { Component } from 'react';
import { Text, View, Dimensions } from 'react-native';
import Carousel from 'react-native-looped-carousel';

const { width, height } = Dimensions.get('window');
const size = { width, height };
export default function Example() {
  const handleNextPage = (index: number) => {
    console.log(index);
  };
  return (
    <View style={{ flex: 1 }}>
      <Carousel delay={2000} style={size} autoplay pageInfo onAnimateNextPage={handleNextPage}>
        <View style={[{ backgroundColor: '#BADA55' }, size]}>
          <Text>1</Text>
        </View>
        <View style={[{ backgroundColor: 'red' }, size]}>
          <Text>2</Text>
        </View>
        <View style={[{ backgroundColor: 'blue' }, size]}>
          <Text>3</Text>
        </View>
      </Carousel>
    </View>
  );
}
```

### Props

```typescript
interface CarouselProps {
  autoplay?: boolean; // false
  delay?: number; // 4000
  currentPage?: number; // 0
  style?: ViewProps['style']; // undefined
  pageStyle?: ViewProps['style']; // undefined
  contentContainerStyle?: ViewProps['style']; // undefined
  pageInfo?: boolean; // false
  pageInfoBackgroundColor?: string; // 'rgba(0, 0, 0, 0.25)'
  pageInfoTextStyle?: TextProps['style']; // undefined
  pageInfoBottomContainerStyle?: ViewProps['style']; // undefined
  pageInfoTextSeparator?: string; // ' / '
  bullets: boolean; // false
  bulletsContainerStyle?: TextProps['style']; // undefined
  bulletStyle?: TextProps['style']; // undefined
  arrows?: boolean; // false
  arrowsContainerStyle?: TextProps['style']; // undefined
  arrowStyle?: TextProps['style']; // undefined
  leftArrowStyle?: TextProps['style']; // undefined
  rightArrowStyle?: TextProps['style']; // undefined
  leftArrowText?: string; // undefined
  rightArrowText?: string; // undefined
  chosenBulletStyle?: TextProps['style']; // undefined
  onAnimateNextPage?: (index: number) => void; // undefined
  onPageBeingChanged?: (index: number) => void; // undefined
  swipe?: boolean; // true
  isLooped?: boolean; // true
  keyboardShouldPersistTaps?: string; // 'never'
}
```
npm package: @fonds/utils
Description: @fonds/utils
Author: fonds-tech
Latest version: 1.0.9

# @fonds/utils

轻量的 TypeScript 工具集，聚焦常见的类型与格式校验（邮箱、手机号、URL、颜色值、空值等）。按需引入即可在浏览器或 Node.js 环境使用。

## 安装

```bash
pnpm add @fonds/utils
# 或
npm install @fonds/utils
```

## 快速上手

```ts
import { isEmail, isEmpty, isEqual, isPhoneNo } from '@fonds/utils'

isEmail('user@example.com') // true
isPhoneNo('13812345678') // true
isEmpty({}) // true
isEqual({ a: 1 }, { a: 1 }) // true
```

## API 速览

- `isDef(value)`：值不为 `undefined`、`null`、空字符串
- `isHexColor(value)`：3/6 位十六进制颜色
- `isEmail(value)`：邮箱格式
- `isEqual(a, b)`：深度相等
- `isPhoneNo(value)`：中国大陆手机号
- `isUrl(url)`：URL 格式
- `isImage(value)`：图片扩展名
- `isDocument(value)`：常见文档扩展名
- `isDate(value)`：可被 `Date` 解析
- `isDigits(value)`：仅数字字符
- `isPercentage(value)`：形如 `0%`、`12%` 的百分比
- `isNumber(value)`：整数/小数/带千分位的数字
- `isString(value)`：字符串类型
- `isFunction(value)`：函数类型
- `isBoolean(value)`：布尔类型
- `isPromise(value)`：Promise 或类 Promise
- `isArray<T>(value)`：数组
- `isObject(value)`：对象（含数组，排除 `null`）
- `isEmpty(value)`：空值判断（`undefined`、`null`、空串、`false`、`0`、`NaN`、空数组/对象）
- `isNoEmpty(value)`：`!isEmpty`
- `isContains(value, param)`：是否包含指定项/子串

## 开发与脚本

- `pnpm dev`：watch 模式构建
- `pnpm build`：产物输出到 `dist/`（含类型）
- `pnpm test`：使用 Vitest 运行单测
- `pnpm lint` / `pnpm typecheck`：ESLint 与 TypeScript 类型检查

## 许可

MIT
npm package: @fonimus/ts-cli
Description: Ts cli example
Author: fonimus
Latest version: 2.1.1

# Ts Cli

![npm (scoped)](https://img.shields.io/npm/v/@fonimus/ts-cli)
![npm](https://img.shields.io/npm/dw/@fonimus/ts-cli)

## Installation

````bash
npm install -g @fonimus/ts-cli
````

## Usage

````text
Usage: ts-cli [options] [command]

Ts Cli

Options:
  -V, --version   output the version number
  -h, --help      display help for command

Commands:
  version         Display tool version
  help [command]  display help for command

````
npm package: @fonixtree/magic-box
Description: MagicBox
Author: Cylon Team
Latest version: 0.0.9

# MagicBox Decorator - 魔方装修工具

MagicBox（魔方） 是装修工具的名称，也是核心组件的名称。

## 1.Usage

    yarn add @whalecloud/magic-box

- 设计态使用 Designer 组件
- 预览态使用 Previewer 组件

Designer & Previewer 是两个巨型 React 组件，所有功能都封装在组件内部，所有必备的参数和定制都通过 props 传递进来。


<img src="./src/assets/imgs/designer.png">


<img src="./src/assets/imgs/previewer.png">

## 2. Screen Shots


## 3. Architecture

### 3.1 Grid Layout

<img src="./src/assets/imgs/bootstrap.png">

设计器整体采用行列布局，也就是 Row（ MRow 类） 和 Column（ MCol 类） 模型，此设计参考了 Bootstrap 的栅格布局模型。

MRow 表示一行，MCol 表示一列，MRow 中只能放置 MCol。虽然组件没有约束一行中最多放多少列，但是建议参考 Bootstrap 的思路，最多放 12 列。

MCol 内部可以放真正的业务组件，也可以继续放置 MRow，可以形成无限嵌套。

### 3.2 Data Driven & UI isolation

Designer 和 Renderer 都基于数据驱动模式工作，整体是一份巨大的 JSON 数据。

数据中只记录组件类型和数据，不记录组件具体的展示逻辑，UI 展示逻辑由不同类型的 Render 具体负责，在对页面布局要求不高的场景下，PC、手机端、Pad 可以共用一份数据。

数据格式示例：

``` json
{
    index: 0,
    id: 'df019a54-e3fb-40f8-b916-d2cde8325475',
    pid: -1,
    childNodes: [
        {
            type: 'MRow',
            id: '9c40cfe6-c6ff-418f-8ae6-5e1818189172',
            title: 'MRow',
            pid: 'df019a54-e3fb-40f8-b916-d2cde8325475',
            index: 0,
            childNodes: [
                {
                    type: 'MCol',
                    id: '9d027c88-ad6d-43c3-850e-ab8bae6b8ab4',
                    title: 'MCol',
                    pid: '9c40cfe6-c6ff-418f-8ae6-5e1818189172',
                    index: 0,
                    childNodes: [
                        {
                            type: 'GalaryTemplate4',
                            id: '80c970f7-5f30-4f72-b6a9-455399ac2aea',
                            title: '4 Images',
                            pid: '9d027c88-ad6d-43c3-850e-ab8bae6b8ab4',
                            index: 0,
                        },
                    ],
                },
            ],
        }
...
```

### 3.3. Directory Structure

```

document updating...

```

### 3.4. Core Components

核心组件只有2个：

- MagicBox: 是整个设计器和渲染器的核心，MagicBox 在逻辑上可以看成超级 DIV，它在 DIV 的基础上增加了拖拽布局和渲染功能。**重要：因为 react-dnd 目前只能支持函数式组件，所以这里只能写成函数形式。**MagicBox 在 designer 模式和 renderer 模式下具有不同的外观和功能。MagicBox 切分成2个内部组件分别实现设计器和渲染器功能 DesignerBox 和 RendererBox。在 designer 模式下，具有拖拽布局功能。在 renderer 模式下纯展现，其功能退化成一层空的容器 div，不再具有拖拽交互功能。
- DropZone: 封装放置区域逻辑，当把对象拖动到 DropZone 并放开鼠标时，会触发 drop 动作。
MagicBox 和 DropZone 基于 react-dnd 进行了再次封装，它们是内部核心机制，设计器的外部调用方不需要关心这两个类的实现细节，只要关注暴露的参数即可，下是 MagicBox 的核心参数：

``` javascript
id,
pid,
index,
nodeData,
children,
onHover,
onDrop,
componentMap,
acceptTypes = ['MagicBox', 'MRow'], //盒子内部可以接受的类型只有 MagicBox 和 MRow，MagicBox 默认可以接受自己，形成无限嵌套。
isValidDest = false,
canDrag = true,
isLeaf = false,
isSelected = false,
innerDirection = 'vertical',
```
npm package: @fonixtree/magic-box-um
Description: MagicBox
Author: Cylon Team
Latest version: 0.0.53

# MagicBox Decorator - 魔方装修工具

MagicBox（魔方） 是装修工具的名称，也是核心组件的名称。


## 1.Usage

    yarn add @whalecloud/magic-box

- 设计态使用 Designer 组件
- 预览态使用 Previewer 组件

Designer & Previewer 是两个巨型 React 组件，所有功能都封装在组件内部，所有必备的参数和定制都通过 props 传递进来。


<img src="./src/assets/imgs/designer.png">


<img src="./src/assets/imgs/previewer.png">

## 2. Screen Shots


## 3. Architecture

### 3.1 Grid Layout

<img src="./src/assets/imgs/bootstrap.png">

设计器整体采用行列布局，也就是 Row（ MRow 类） 和 Column（ MCol 类） 模型，此设计参考了 Bootstrap 的栅格布局模型。

MRow 表示一行，MCol 表示一列，MRow 中只能放置 MCol。虽然组件没有约束一行中最多放多少列，但是建议参考 Bootstrap 的思路，最多放 12 列。

MCol 内部可以放真正的业务组件，也可以继续放置 MRow，可以形成无限嵌套。

### 3.2 Data Driven & UI isolation

Designer 和 Renderer 都基于数据驱动模式工作，整体是一份巨大的 JSON 数据。

数据中只记录组件类型和数据，不记录组件具体的展示逻辑，UI 展示逻辑由不同类型的 Render 具体负责，在对页面布局要求不高的场景下，PC、手机端、Pad 可以共用一份数据。

数据格式示例：

``` json
{
    index: 0,
    id: 'df019a54-e3fb-40f8-b916-d2cde8325475',
    pid: -1,
    childNodes: [
        {
            type: 'MRow',
            id: '9c40cfe6-c6ff-418f-8ae6-5e1818189172',
            title: 'MRow',
            pid: 'df019a54-e3fb-40f8-b916-d2cde8325475',
            index: 0,
            childNodes: [
                {
                    type: 'MCol',
                    id: '9d027c88-ad6d-43c3-850e-ab8bae6b8ab4',
                    title: 'MCol',
                    pid: '9c40cfe6-c6ff-418f-8ae6-5e1818189172',
                    index: 0,
                    childNodes: [
                        {
                            type: 'GalaryTemplate4',
                            id: '80c970f7-5f30-4f72-b6a9-455399ac2aea',
                            title: '4 Images',
                            pid: '9d027c88-ad6d-43c3-850e-ab8bae6b8ab4',
                            index: 0,
                        },
                    ],
                },
            ],
        }
...
```

### 3.3. Directory Structure

```

document updating...

```

### 3.4. Core Components

核心组件只有2个：

- MagicBox: 是整个设计器和渲染器的核心，MagicBox 在逻辑上可以看成超级 DIV，它在 DIV 的基础上增加了拖拽布局和渲染功能。**重要：因为 react-dnd 目前只能支持函数式组件，所以这里只能写成函数形式。**MagicBox 在 designer 模式和 renderer 模式下具有不同的外观和功能。MagicBox 切分成2个内部组件分别实现设计器和渲染器功能 DesignerBox 和 RendererBox。在 designer 模式下，具有拖拽布局功能。在 renderer 模式下纯展现，其功能退化成一层空的容器 div，不再具有拖拽交互功能。
- DropZone: 封装放置区域逻辑，当把对象拖动到 DropZone 并放开鼠标时，会触发 drop 动作。
MagicBox 和 DropZone 基于 react-dnd 进行了再次封装，它们是内部核心机制，设计器的外部调用方不需要关心这两个类的实现细节，只要关注暴露的参数即可，下是 MagicBox 的核心参数：

``` javascript
id,
pid,
index,
nodeData,
children,
onHover,
onDrop,
componentMap,
acceptTypes = ['MagicBox', 'MRow'], //盒子内部可以接受的类型只有 MagicBox 和 MRow，MagicBox 默认可以接受自己，形成无限嵌套。
isValidDest = false,
canDrag = true,
isLeaf = false,
isSelected = false,
innerDirection = 'vertical',
```
npm package: @fonkel/eslint-config-fonkel
Description: Default ESLint config for Fonkel
Author: Fonkel
Latest version: 0.2.8

# @fonkel/eslint-config-fonkel
Default ESLint config for [Fonkel](https://fonkel.io).

## Installation
Install using your Node.js package manager of choice:
```bash
pnpm i @fonkel/eslint-config-fonkel -D # or npm/yarn/etc.
```

You need to have NPM package `eslint` installed in order to start using ESLint with this configuration. Assuming your IDE of choice is VSCode, it's recommended to install [VSCode plugin "ESLint" by Dirk Baeumer](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and set it up as follows in your VSCode workspace's `settings.json`:
```json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.packageManager": "{{ insert workspace NPM package manager here }}",
  "eslint.validate": [
    "javascript",
  ],
}
```

Your `.eslintrc.json` should at the very least look like this to use this config:
```json
{
  "extends": "@fonkel/eslint-config-fonkel"
}
```



See https://eslint.org/docs/developer-guide/shareable-configs for more info on shareable ESLint configs.