open-index/open-npm huggingface dataset:
npm package: @ruhibloodworth/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 1.1.0

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

* [Getting Started](https://github.com/facebook/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
* [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
npm package: @ruhisfi/geodata
Description: Library for working with geographical data.
Author: Toni Ruhanen
Latest version: 1.0.1

# GeoData

GeoData is a TypeScript library that provides utilities for working with geographical data, including retrieving country information, determining if two countries share a border, and calculating the distance between two countries.

## Features

- Retrieve country information by ISO 3166-1 alpha-2 code.
- Check if two countries share a border.
- Calculate the distance between two countries using their coordinates.

## Usage

Importing the library:

```typescript
import { GeoData } from "@ruhisfi/geodata";
```

Retrieve country information:

```typescript
const country = GeoData.getCountry("US");
console.log(country); // Output: { code: "US", name: "United States of America", region: "North America", lat: 37.0902, lon: -95.7129, borders: ["CA", "MX"] }
```

Check if two countries share a border:

```typescript
const sharesBorder = GeoData.doesBorder("US", "CA");
console.log(sharesBorder); // Output: true
```

Caculate the distance between two countries:

```typescript
const distance = GeoData.getDistance("FI", "US");
console.log(distance); // Output: Distance in kilometers
```

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
npm package: @ruhith/generate-robots-text
Description: Generate Robots.txt file with your custom configs
Author: ruhith
Latest version: 1.0.1

# generate-robots-text

Generate Robots.txt file with your custom configs

## Installation

## Usage

1. After installation first create the main config file by running the following command

```


generate-robot -c

or

generate-robot --config
```

2. then edit the config file 

### robot-txt.config.js
```
module.exports = {
    destinationPath : "",
    policy:
        {
            userAgent: "",
            disallow: [],
            allow: []
        },
};

```

### example

```

module.exports = {
    destinationPath : "/public",
    policy:
        {
            userAgent: "*",
            disallow: ["testDisallow", "/enterprise/orgs-terms"],
            allow: ["/browse/", "/contact/"]
        },
};

```

3. run following commond to generate the robots.txt file

```
generate-robot -r

or

generate-robot --robot

```

## All set
npm package: @ruhulrahman/next-tw-components
Description: A reusable form component library built with Next.js and Tailwind CSS for React projects.
Author: Ruhul Amin
Latest version: 1.0.3

This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

## Getting Started

First, run the development server:

```bash
npm i @ruhulrahman/next-tw-components
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
npm package: @rui-jie/rjelement-components
Description: a public component Library from rjelement was base on Vue.js
Author: zhangziguang8
Latest version: 0.1.37

# PublicComponents

基于 `Vue.js` 的公共组件仓库，使用 webpack 搭建一个 library 脚手架可以参考这个仓库的源码。

## npm 安裝 / yarn

```bash
npm i rjelement-components --save-dev
```

```bash
yarn add rjelement-components -D
```

## 引入方式

### 全量引入

```javascript
// main.js
import Vue from 'vue'
import Rjelement from 'rjelement-components'

Vue.use(Rjelement) // 会执行Rjelement的install方法，内部全部组件全局注册
```

### 按需引入

首先安装`babel-plugin-import`

```bash
yarn add babel-plugin-import -D
```

配置`babel.config.js` / vuecli2.0 创建的项目配置`.babelrc` 

```javascript
"plugins": [
  ["import", {
    "libraryName": "rjelement-components",
    "libraryDirectory": "packages/components"
  }]
]
```


使用`webpack-bundle-analyzer`可以查看模块按需引入的打包依赖图。

## 按需引入示例

```
<template>
  <rj-drawer title="xxx" :visable="true">
  </rj-drawer>
</template>
<script type="es6">
import { drawer } from 'rjelement-components'
export default {
  components: {
    'rj-drawer': drawer
  },
}
</script>
```

## 公共组件编写

参考 [组件编写约定](http://gitlab.ruijie.com.cn/Architecture/rjelementComponent/tree/master/packages/README.md)
npm package: @rui-jie/webmenucommonfactory
Description: ces全套项目菜单及外连接配置
Author: zhangziguang
Latest version: 1.0.10

# ces全套项目菜单及外连接配置
> 所有相关项目菜单连接，都配置于此，各拆分出的项目，均需要实现其配置中的菜单项。

## 使用方法

安装
```
npm install ruijie.webmenucommonfactory --registry http://yapi.ruijie.com.cn:4873/

// 或者
yarn add ruijie.webmenucommonfactory --registry http://yapi.ruijie.com.cn:4873/

```
配置 `vue.config.js` 中 `transpileDependencies`项，为`[...,'ruijie.webmenucommonfactory'] `解决依赖包无法被编译问题 


在 `vueRouter` 配置中引用

```vue
import menuCommonFactory from 'ruijie.webmenucommonfactory';
import Main from '../views/main'; // 主页面
export const layoutRoute = menuCommonFactory([
  {
    path: '/fanli',
    component: Main,
    name: 'fanli', // 需要实现的连接，保证于 ruijie.webmenucommonfactory 配置一致
    meta: {
      title: '返利中心',
      icon: 'iconfont icontoreview'
    },
    children: [
      {
        path: '/fanli1',
        name: 'fanli1',
        meta: {
          title: '返利1'
        }
      },
      {
        path: '/fanli2',
        name: 'fanli2',
        meta: {
          title: '返利2'
        }
      }
    ]
  }
], Main);
```
## 注意 
1. 在所有配置中，`name` 值必须唯一，不可重复。
2. 保证实现后的链接地址与 `ruijie.webmenucommonfactory` 中配置一致，否则其他系统使用时，会出现访问地址错误问题。
3. 实现中不要写 `target` 字段值
4. 关于菜单部分开发思路转变，应改变成，先编辑上传该依赖包，完善所有链接配置，然后由各个独立系统，实现其相应部分。
5. `ruijie.webmenucommonfactory` 每次更新，所有相关独立系统都应该重新安装此依赖并且重新打包。
npm package: @ruichen0101/react-filter-bar
Description: [live demo](https://ruichen0101.github.io/react-filter-bar/)
Author: RuiChen
Latest version: 0.1.1

# React Filter Bar

[live demo](https://ruichen0101.github.io/react-filter-bar/)

## Install

```
npm i @ruichen0101/react-filter-bar
```

## Stylesheets

Make sure you import the global style in index.js/tsx.

```javascript
import '@ruichen0101/react-filter-bar/dist/css/ReactFilterBar.min.css';
```

## Usage

```javascript
import ReactFilterBar, { FilterItem, FilterType } from "@ruichen0101/react-filter-bar";

<ReactFilterBar
    filterSetting={[{
        key: "user.id",
        text: "Id",
        type: FilterType.inputEq,
    }, {
        key: "user.name",
        text: "name",
    }, {
        key: "user.email",
        text: "email",
    }, {
        key: "user.status",
        text: "status",
        type: FilterType.dropdown,
        options: [
            { text: 'normal', value: 1 },
            { text: 'blocked', value: -1 },
            { text: 'deleted', value: -99 }
        ]
    }]}
    onFilterUpdate={(result) => {
        console.log(result);
    }}
/>
```
npm package: @ruichongde/feishu-send-file
Description: OpenClaw plugin - Upload file via Feishu Open API
Latest version: 1.0.0

# feishu_send_file

OpenClaw 插件 - 通过飞书 Open API 上传文件。

## 功能

- 将本地文件上传到飞书开放平台
- 获取 `file_key` 后可用于调用发送消息接口
- 支持所有文件类型，自动识别文件类型
- 文件大小限制：最大 30 MB

## 支持的文件类型

| 扩展名 | file_type |
|--------|-----------|
| .opus | opus |
| .mp4 | mp4 |
| .pdf | pdf |
| .doc/.docx | doc |
| .xls/.xlsx | xls |
| .ppt/.pptx | ppt |
| 其他 | stream |

## 作为 OpenClaw 工具使用

### 参数

| 参数 | 类型 | 必填 | 说明 |
|------|------|------|------|
| `file_path` | string | 是 | 要上传的文件绝对路径 |
| `app_id` | string | 否 | 飞书应用ID（不填则自动获取） |
| `app_secret` | string | 否 | 飞书应用密钥（不填则自动获取） |
| `duration` | number | 否 | 音频/视频时长，单位毫秒 |

### 凭证获取优先级

1. 工具调用参数传入
2. 当前飞书通道配置
3. 当前工作目录 `feishu_config.json`
4. 环境变量 `FEISHU_APP_ID` / `FEISHU_APP_SECRET`
5. 插件全局配置

### 输出示例

**成功：**
```json
{
  "success": true,
  "file_key": "file_456a92d6-c6ea-4de4-ac3f-7afcf44ac78g",
  "file_name": "example.pdf",
  "file_type": "pdf",
  "file_size_bytes": 123456
}
```

**失败：**
```json
{
  "success": false,
  "error": "文件大小超过30MB限制",
  "code": "FILE_TOO_LARGE"
}
```

## 作为 CLI 工具使用

### 安装

```bash
npm install -g @ruichongde/feishu-send-file
```

### 使用

```bash
feishu_send_file \
  --app-id your_feishu_app_id \
  --app-secret your_feishu_app_secret \
  --file-path /absolute/path/to/file.pdf \
  [--duration 3000]
```

## 飞书应用配置

1. 在 [飞书开发者平台](https://open.feishu.cn/) 创建应用
2. 开启机器人能力
3. 添加权限：`im:resource` 或 `im:resource:upload`
4. 发布版本并等待企业管理员审核

##  License

MIT
npm package: @ruichongde/feishu-send-image
Description: OpenClaw plugin - Send image via Feishu Open API
Latest version: 1.0.0

# feishu_send_image

> OpenClaw Agent skill - Send image via Feishu Open API

通过飞书 Open API 发送图片消息的 Node.js CLI 工具，可通过 `npm install -g` 全局安装。

## 功能特点

- 遵循飞书 Open API 三段式标准流程：获取令牌 → 上传图片 → 发送消息
- 自动重试机制：网络错误/5xx 错误自动重试 1 次（间隔 2 秒）
- 敏感凭证通过命令行参数传递，适配 OpenClaw 多 Agent 动态场景，支持动态切换 app_id/app_secret
- 不硬编码凭证，满足安全要求
- 支持图片格式检查和大小验证（最大 20MB）
- 输出标准化 JSON 格式，方便 Agent 解析

## 安装

```bash
npm install -g feishu_send_image
```

> **注意**：飞书应用需要开通 `im:message` 和 `im:resource` 权限。

## 使用方法

```bash
feishu_send_image \
  --app-id your_feishu_app_id \
  --app-secret your_feishu_app_secret \
  --image-path /absolute/path/to/image.png \
  --receive-id ou_xxxxxxxx
```

### 参数说明

- `--app-id`: 飞书应用 ID（必填）
- `--app-secret`: 飞书应用密钥（必填）
- `--image-path`: 图片文件的**绝对路径**（必填）
- `--receive-id`: 接收者的 open_id（通常以 `ou_` 开头）（必填）
- `--version`: 显示版本号
- `--help`: 显示帮助信息

### 输出格式

**成功示例**：
```json
{
  "success": true,
  "message_id": "msg-xxxxxxx",
  "image_key": "img-xxxxxxx"
}
```

**失败示例**：
```json
{
  "success": false,
  "error": "Image file not found: /path/to/image.png",
  "code": "FILE_NOT_FOUND"
}
```

## 支持的图片格式

- JPG/JPEG
- PNG
- GIF
- WebP

## 图片大小限制

最大 20MB，符合飞书 Open API 限制。

## 错误码说明

| 错误码 | 说明 |
|--------|------|
| `MISSING_PARAMS` | 缺少必填参数（--app-id, --app-secret, --image-path, --receive-id 均为必填） |
| `FILE_NOT_FOUND` | 图片文件不存在 |
| `FILE_TOO_LARGE` | 图片超过 20MB 限制 |
| `INVALID_FORMAT` | 不支持的图片格式 |
| 其他 | 飞书 API 返回的原始错误码 |

## 权限要求

在 [飞书开发者平台](https://open.feishu.cn/) 创建应用后，需要开通以下权限：

- `im:message`（发送消息）
- `im:resource`（上传资源）

申请权限后需要发布版本并等待企业管理员审核通过。

## 开发

本地开发测试：

```bash
# 克隆项目
git clone <repo-url>
cd feishu_send_image

# 安装依赖
npm install

# 本地全局链接
npm link

# 测试
feishu_send_image --help
```

## License

MIT
npm package: @ruids/css
Description: Ruis CSS
Latest version: 1.6.0

# ruids CSS

ruids CSS - Utility CSS classes for applying spacing, colors, typography, shadows, flex, and transitions to elements.

## Getting started

Import the styles.css file into your stylesheet.

```
@import '@ruids/css/dist/styles.css'
```

## Spacing

**Margin**

**Padding**

### Typography

**Font Families**

```
.font-sans
.font-mono
```

**Typography Scale**

```
Scale:
xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl

Class name composition example:

 .text-base
```

**Weights**

```
Scale:
hairline thin light normal medium semibold bold extrabold black

Class name composition example:

.font-normal
```

**Line Height**

```
Scale:
none tight snug normal relaxed 3 4 5 6 7 8 9 10

Classname composition example:

.leading-tight
```

**Letter Spacing**

```
Scale:
tighter tight normal wide wider widest

Classname composition example:

.tracking-tight
```

## Shadows

```
Scale:
xs sm md lg xl 2xl inner outline none

Class name composition example:

.shadow (base)
.shadow-inner
```

### Glows

```
Scale:
primary, negative, positive, warning

Class name composition example:

.glow-warning
```
npm package: @ruifpb/download2
Description: Download and extract files
Author: Rui Barbosa
Latest version: 8.0.1

# download [![Build Status](https://travis-ci.org/kevva/download.svg?branch=master)](https://travis-ci.org/kevva/download)

> Download and extract files

*See [download-cli](https://github.com/kevva/download-cli) for the command-line version.*


## Install

```
$ npm install download
```


## Usage

```js
const fs = require('fs');
const download = require('download');

(async () => {
	await download('http://unicorn.com/foo.jpg', 'dist');

	fs.writeFileSync('dist/foo.jpg', await download('http://unicorn.com/foo.jpg'));

	download('unicorn.com/foo.jpg').pipe(fs.createWriteStream('dist/foo.jpg'));

	await Promise.all([
		'unicorn.com/foo.jpg',
		'cats.com/dancing.gif'
	].map(url => download(url, 'dist')));
})();
```

### Proxies

To work with proxies, read the [`got documentation`](https://github.com/sindresorhus/got#proxies).


## API

### download(url, destination?, options?)

Returns both a `Promise<Buffer>` and a [Duplex stream](https://nodejs.org/api/stream.html#stream_class_stream_duplex) with [additional events](https://github.com/sindresorhus/got#streams-1).

#### url

Type: `string`

URL to download.

#### destination

Type: `string`

Path to where your file will be written.

#### options

Type: `Object`

Same options as [`got`](https://github.com/sindresorhus/got#options) and [`decompress`](https://github.com/kevva/decompress#options) in addition to the ones below.

##### extract

Type: `boolean`<br>
Default: `false`

If set to `true`, try extracting the file using [`decompress`](https://github.com/kevva/decompress).

##### filename

Type: `string`

Name of the saved file.
npm package: @ruijadom/telescope
Description: Meta package for Telescope - Developer tool for seamless navigation between UI components in the browser and their source code in your editor
Author: Rui Jadom
Latest version: 0.1.3

# Telescope

Developer tool for seamless navigation between React components in the browser and their source code in Cursor editor.

## Installation

```bash
npm install --save-dev @ruijadom/telescope
```

This meta package installs all Telescope packages:

- `@@ruijadom/telescope/core` - Core types and server
- `@@ruijadom/telescope/browser-runtime` - Browser component detection
- `@@ruijadom/telescope/cursor-integration` - Cursor editor integration
- `@@ruijadom/telescope/vite-plugin` - Vite plugin
- `@@ruijadom/telescope/webpack-plugin` - Webpack plugin
- `@@ruijadom/telescope/cli` - Command line interface

## Quick Start

### With Vite

```javascript
// vite.config.js
import { telescopePlugin } from '@ruijadom/telescope/vitePlugin';

export default {
  plugins: [telescopePlugin()]
};
```

### With Webpack

```javascript
// webpack.config.js
const { TelescopeWebpackPlugin } = require('@ruijadom/telescope/webpackPlugin');

module.exports = {
  plugins: [new TelescopeWebpackPlugin()]
};
```

### Start the Server

```bash
npx telescope start
```

## Documentation

For full documentation, visit the [main repository](https://github.com/yourusername/@ruijadom/telescope).

## License

MIT
npm package: @ruijadom/telescope-browser
Description: Browser runtime for component detection and overlay UI
Author: Rui Jadom
Latest version: 0.3.0

# @ruijadom/telescope-browser

Browser runtime for component detection and overlay UI.

## Installation

```bash
npm install @ruijadom/telescope-browser
```

## What's Included

- **Component Detector**: Detects React components using Fiber internals
- **Overlay UI**: Interactive overlay for component inspection
- **WebSocket Client**: Communicates with Telescope server
- **Tree View**: Visual component hierarchy
- **Analysis Panel**: Test ID coverage analysis

## Usage

This package is automatically injected by the Vite or Webpack plugin. You don't need to import it manually.

### Manual Initialization

If you need to initialize manually:

```typescript
import { initialize } from '@ruijadom/telescope-browser';

initialize();
```

### Browser Global

The browser runtime is available globally as `window.Telescope`:

```javascript
// Check if Telescope is active
console.log(window.Telescope);
```

## Features

- Click-to-inspect component detection
- Real-time component tree visualization
- Test ID coverage analysis
- Keyboard shortcuts (Ctrl/Cmd + Shift)

## Documentation

For full documentation, see the [main Telescope repository](https://github.com/ruijadom/telescope).

## License

MIT
npm package: @ruijadom/telescope-cli
Description: Command line interface for Telescope
Author: Rui Jadom
Latest version: 0.1.1

# @ruijadom/telescope-cli

Command line interface for Telescope.

## Installation

```bash
npm install --save-dev @ruijadom/telescope-cli
```

Or use directly with npx:

```bash
npx telescope --help
```

## Commands

### Initialize Configuration

Create a `telescope.config.js` file in your project:

```bash
npx telescope init
```

### Start Server

Start the Telescope WebSocket server:

```bash
npx telescope start
```

The server typically starts automatically when you run your dev server with the Telescope plugin configured.

### Check Status

Check if the Telescope server is running:

```bash
npx telescope status
```

### Stop Server

Stop the running Telescope server:

```bash
npx telescope stop
```

## Global Installation

Install globally for easier access:

```bash
npm install -g @ruijadom/telescope-cli

# Now use without npx
telescope start
telescope status
```

## Configuration

The CLI reads configuration from `telescope.config.js` in your project root. Generate a default config with:

```bash
telescope init
```

## Documentation

For full documentation, see the [main Telescope repository](https://github.com/ruijadom/telescope).

## License

MIT
npm package: @ruijadom/telescope-core
Description: Core types, configuration management, and WebSocket server for Telescope
Author: Rui Jadom
Latest version: 0.1.1

# @ruijadom/telescope-core

Core types, configuration management, and WebSocket server for Telescope.

## Installation

```bash
npm install @ruijadom/telescope-core
```

## What's Included

- **Types**: TypeScript definitions for all Telescope components
- **Configuration**: Configuration management and validation
- **Server**: WebSocket server for browser-editor communication
- **Utilities**: Helper functions and error handling

## Usage

This package is typically used internally by other Telescope packages. You generally don't need to install it directly unless you're building custom integrations.

### Configuration

```typescript
import { TelescopeConfig, ConfigManager } from '@ruijadom/telescope-core';

const config: TelescopeConfig = {
  editor: {
    name: 'cursor',
    command: 'cursor',
    args: ['-g']
  },
  server: {
    port: 3737,
    host: 'localhost'
  }
};

const manager = new ConfigManager(config);
```

### Server

```typescript
import { TelescopeServer } from '@ruijadom/telescope-core';

const server = new TelescopeServer(config);
await server.start();
```

## Documentation

For full documentation, see the [main Telescope repository](https://github.com/ruijadom/telescope).

## License

MIT
npm package: @ruijadom/telescope-cursor
Description: Cursor editor integration for file opening, code insertion, and AI services
Author: Rui Jadom
Latest version: 0.1.1

# @ruijadom/telescope-cursor

Cursor editor integration for file opening, code insertion, and AI services.

## Installation

```bash
npm install @ruijadom/telescope-cursor
```

## What's Included

- **Cursor Opener**: Opens files in Cursor at specific line numbers
- **Code Inserter**: Inserts generated code into source files
- **AI Service**: Generates test IDs using Cursor's AI or external providers

## Usage

This package is used internally by Telescope. You generally don't need to use it directly.

### Opening Files

```typescript
import { CursorOpener } from '@ruijadom/telescope-cursor';

const opener = new CursorOpener(config);
await opener.open('/path/to/file.tsx', 42, 10);
```

### Inserting Code

```typescript
import { CodeInserter } from '@ruijadom/telescope-cursor';

const inserter = new CodeInserter(config);
await inserter.insertTestId('/path/to/file.tsx', 42, 'data-testid="my-button"');
```

### AI Services

```typescript
import { AIService } from '@ruijadom/telescope-cursor';

const ai = new AIService(config);
const suggestions = await ai.generateTestIds(componentData);
```

## Supported Editors

- Cursor (primary)
- VS Code (compatible)
- WebStorm (experimental)

## Documentation

For full documentation, see the [main Telescope repository](https://github.com/ruijadom/telescope).

## License

MIT
npm package: @ruijadom/telescope-vite
Description: Vite plugin for Telescope integration
Author: Rui Jadom
Latest version: 0.1.1

# @ruijadom/telescope-vite

Vite plugin for Telescope integration.

## Installation

```bash
npm install --save-dev @ruijadom/telescope-vite
```

## Usage

Add the plugin to your `vite.config.ts`:

```typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { telescopePlugin } from '@ruijadom/telescope-vite';

export default defineConfig({
  plugins: [
    react(),
    telescopePlugin()
  ]
});
```

## Configuration

Pass options to customize Telescope:

```typescript
telescopePlugin({
  // Server configuration
  port: 3737,
  host: 'localhost',
  
  // Enable/disable in development
  enabled: true,
  
  // Editor configuration
  editor: {
    name: 'cursor',
    command: 'cursor',
    args: ['-g']
  }
})
```

## What It Does

1. Injects Telescope browser runtime into your app
2. Starts WebSocket server for browser-editor communication
3. Transforms components to add metadata
4. Preserves source maps for accurate navigation

## Requirements

- Vite 4.0+ or 5.0+
- React 16.8+

## Documentation

For full documentation, see the [main Telescope repository](https://github.com/ruijadom/telescope).

## License

MIT
npm package: @ruijadom/telescope-webpack
Description: Webpack plugin for Telescope integration
Author: Rui Jadom
Latest version: 0.1.1

# @ruijadom/telescope-webpack

Webpack plugin for Telescope integration.

## Installation

```bash
npm install --save-dev @ruijadom/telescope-webpack
```

## Usage

Add the plugin to your `webpack.config.js`:

```javascript
const { TelescopeWebpackPlugin } = require('@ruijadom/telescope-webpack');

module.exports = {
  // ... other webpack config
  plugins: [
    new TelescopeWebpackPlugin()
  ]
};
```

## Configuration

Pass options to customize Telescope:

```javascript
new TelescopeWebpackPlugin({
  // Server configuration
  port: 3737,
  host: 'localhost',
  
  // Enable/disable in development
  enabled: true,
  
  // Editor configuration
  editor: {
    name: 'cursor',
    command: 'cursor',
    args: ['-g']
  }
})
```

## What It Does

1. Injects Telescope browser runtime into your app
2. Starts WebSocket server for browser-editor communication
3. Adds custom loader for component transformation
4. Preserves source maps for accurate navigation

## Requirements

- Webpack 5.0+
- React 16.8+

## Documentation

For full documentation, see the [main Telescope repository](https://github.com/ruijadom/telescope).

## License

MIT
npm package: @ruijie-sso/api
Description: api library for SSO Admin
Author: Ruijie Team
Latest version: 1.0.12-beta

# api

全局后端端口

## 拆分策略

按照后端接口路径拆分

- linkid 去掉中间的 api
- /api 开头的接口的为 sso 项目

### linkid

> 举例

/linkid/protected/api/password/reset

- 存储目录 /linkid/protected/password
- 文件名 LindIdProtectedPasswordService
- 方法名 reset

### sso

/api/protected/face/submit

- 目录 /sso/protected
- 文件名 SsoProtectedFaceService
- 方法名 submit
npm package: @ruijie-sso/common-new
Description: common-new library for SSO Admin
Author: Ruijie Team
Latest version: 1.0.8

# common-new

公共库集合

## LocationService

处理链接跳转的，跳转链接，刷新页面，设置 url 参数，获取 url 参数等

## help-center ---- 帮助中心

帮助中心，对授权的用户可进行文件的上传、下载，以及链接的跳转等操作。

1. 目前使用的地方有两个：
   - 组织中心（organization-center）
   - admin 系统（admin）
2. 使用：
   - 通过路由引入 module，并跳转到帮助中心模块。

```js

      {
        "path": "help",
        "loadChildren": () => import('@ruijie-sso/common-new/help-center').then(m => m.HelpCenterModule)
      }

```

## log-schema

根据 schema 动态展示带有不同搜索条件的日志页面；

1. 内容

- 包括一些日志页面的基类、时间范围搜索、详情抽屉、选择展示列配置等；

2. 使用

- 在使用的地方引入`LogSchemaModule`
  `import { LogSchemaModule } from '@ruijie-sso/common-new/log-schema'`

## member-search

成员搜索，通过下拉框选择搜索条件，并可以在基本搜索和高级搜索间切换

1. 内容

- 包括基本搜索框、高级搜索抽屉等；

2. 使用

- 在使用的地方引入`MemberSearchModule`
  `import { MemberSearchModule } from '@ruijie-sso/common-new/member-search'`

## org-post-tree

组织部门&岗位树 module，展示组织部门或者岗位的不同层级树结构。

- `HighlightedPipe` 为搜索关键词高亮处理管道

1. 使用

- 在使用的地方引入`OrgPostTreeModule`
  `import { OrgPostTreeModule } from '@ruijie-sso/common-new/org-post-tree'`

## org-tree

组织部门树 module，展示组织部门的不同层级树结构，且根据需要可展示部门图标，可进行 check 选择，如果开启了操作展示，可进行组织部门的新增，复用、排序、编辑、删除等操作；

1. 使用

- 在使用的地方引入`OrgTreeModule`
  `import { OrgTreeModule } from '@ruijie-sso/common-new/org-tree'`

## search-list

搜索列表，并对搜索关键词高亮显示

1. 使用

- 在使用的地方引入`SearchListModule`
  `import { SearchListModule } from '@ruijie-sso/common-new/search-list'`

## show-export-col

根据配置，导出展示列数据 && 修改展示列

1. 使用

- 在使用的地方引入`ShowExportColModule`
  `import { ShowExportColModule } from '@ruijie-sso/common-new/show-export-col'`
- 组件继承 `ShowExpColComponentBase`类
npm package: @ruijie-sso/exception-tools
Description: exception-tools library for SSO Admin
Author: Ruijie Team
Latest version: 1.0.12-beta

# exception-tools

对异常处理工具集

## 错误码处理

针对只有错误码换 `message` 的情况

原理是通过 js 生成每一个错误码的 json 文件，再通过统一的 service 来动态获取每一种 code 对应的 message

### 为什么这么设计

- 错误码未来分中英文
- 错误码无法预知它只会在那个模块出现
- 后端会保证每种错误码对应一个 message
- 未来错误码可能变成接口，数据存放在数据库中

### 新增错误码

- 修改文件路径 `tools/error-code/build.ts`
- 在 errorCodes 里添加相关错误码

```ts
const errorCodes: { [key: string]: string } = {
  你的错误码: '错误码message'
};
```

- 执行 `按升序排列行` 保证顺序为了好管理
  - 选中所有 code
  - command+shift+p（mac vscode）
  - 输入 sort 关键词
  - 选中`按升序排列行`

执行 `yarn run:tools tools/error-code/build.ts` 即可实时更新错误码 json 文件

### 项目中使用

- 使用 `pipe` errorCode 做转换
- 使用 `service` ErrorCodeService 做数据请求
npm package: @ruijie-sso/sms-code
Description: sms-code library for SSO Admin
Author: Ruijie Team
Latest version: 1.0.12-beta

# sms-code

验证码组件，用状态管理的方式管理手机短信验证码发送情况，数据持久化缓存到用户本机，实现不同验证码共享发送时间效果
npm package: @ruijingrs/deckgl-windy-layer
Description: A windy layer by deck.gl
Author: ruijingrs
Latest version: 1.0.11

# deckgl-windy-layer

A windy layer for deck.gl

## Install

```bash
npm install @ruijingrs/deckgl-windy-layer
# or
yarn add @ruijingrs/deckgl-windy-layer
```

## Use in React

```typescript
import { useState } from 'react';
import StreamLineWindLayer from '@ruijingrs/deckgl-windy-layer';

export const useWindyLayer = () => {
  const [windyLayer, setWindyLayer] = useState<any[]>([]);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (!visible) {
      setWindyLayer([]);
      return;
    }

    const image = new Image();
    image.crossOrigin = 'anonymous';
    const src = `windy tile url`;
    image.src = src;
    image.onload = () => {
      const windy = new StreamLineWindLayer(
        {
          id: 'windy-layer',
        },
        {
          image,
          bounds: [60, 16, 144, 64],
          p2p: 1 / 1500,
          maxAge: 200,
          minAge: 30,
          color: [40, 108, 255, 255],
        }
      );
      setWindyLayer([windy]);
    };
  }, []);

  return windyLayer;
};
```

```tsx
import DeckGL from '@deck.gl/react/typed';

const Map = () => {
  const windyLayer = useWindyLayer();

  return <DeckGL layers={windyLayer} />;
};
```

## Props

| 名称       | 类型                     | 默认              | 描述             |
| ---------- | ------------------------ | ----------------- | ---------------- |
| p2p        | number                   | 1 / 250           | 像素与粒子转换比 |
| minAge     | number                   | 60                | 粒子最小生命周期 |
| maxAge     | number                   | 300               | 粒子最大生命周期 |
| width      | number                   | 4                 | 粒子尺寸         |
| minWidth   | number                   | 2                 | 粒子最小尺寸     |
| maxWidth   | number                   | 4                 | 粒子最大尺寸     |
| widthScale | number                   | 1                 | 粒子缩放比例     |
| image      | HTMLImageElement \| null | null              | 风向瓦片图片     |
| color      | number[]                 | [255,255,255,255] | 粒子颜色         |