open-index/open-npm huggingface dataset:
npm package: @fruits-chain/orange-types
Description: Typescript definitions from orange project module federation
Latest version: 1.1.6

# @fruits-chain/orange-types

> 交易平台 WEB 联邦模块项目`common-web`对外暴露的模块类型定义

## 使用

### 安装

```base
yarn add @fruits-chain/orange-types
```

### 配置

> 编辑项目根目录`tsconfig.json`文件

```json
{
  "compilerOptions": {
    ...
    "types": [..., "@fruits-chain/orange-types"]
  }
}
```

## 更新此项目

1. 在[公共模块项目](https://git.hjgpscm.com/orange/orange-common-web)更新后，请更新对应模块的类型定义
2. 在`orange-types-test.ts`更新类型测试示例
npm package: @fruits-chain/react-native-wechat
Description: React-Native Native Module for Wechat SDK
Author: limoer
Latest version: 0.2.0

# react-native-wechat

微信 SDK React-Native 原生模块（持续更新中）

## Installation

```sh
npm install react-native-wechat
```

## Usage

```js
import { registerApp, shareText } from 'react-native-wechat';

// ...

const success = await registerApp('your appId');
if (success) {
  console.log('注册成功');
  shareText({
    text: '测试文本分享',
  });
}
```

## API

### registerApp(appId: string): Promise<boolean>

注册应用

### isWXAppInstalled(): Promise<boolean>

检测本机是否安装微信

### shareText(config: ShareTextConfig, callback?: CommonCallback): void

文本分享

### shareImage(config: ShareImageConfig, callback?: CommonCallback): void

图片分享

### shareWebpage(config: ShareWebpageConfig, callback?: CommonCallback): void

网页分享

### shareVideo(config: ShareVideoConfig, callback?: CommonCallback): void

视频分享

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @fruits-chain/react-router-component2filepath-loader
Description: A loader to make the component in react-router config be a filepath
Author: changhuali
Latest version: 0.0.1

# @fruits-chain/react-router-component2filepath-loader

A loader to make the component in react-router config be a filepath.

## Install

```shell
# NPM
npm install --save-dev @fruits-chain/react-router-component2filepath-loader
# Yarn
yarn add -D @fruits-chain/react-router-component2filepath-loader
```
npm package: @fruits-chain/sop
Description: A component for sop
Author: changhuali
Latest version: 1.6.6

# sop

> SOP 业务公共组件, 内部对 SOP 表单、预览进行了封装

## 使用

```sh
yarn add @fruits-chain/sop @fruits-chain/upload
```

_请确保项目安装了上述包中`peerDependencies`列出的所有三方包，并仔细检查版本。_

## API

### Form

> SOP 表单组件

**使用**

```tsx
import React from 'react'
import { SopForm, useSopForm } from '@fruits-chain/sop'

const Demo = () => {
  const form = useSopForm()
  return (
    <SopForm
      loading={false}
      uuid={'uuid'}
      form={form}
      data={[]}
      title={'title'}
      uploadProps={
        {
          // upload props
        }
      }
    />
  )
}
```

### Preview

> SOP 预览组件

**使用**

```tsx
import React from 'react'
import { SopPreview } from '@fruits-chain/sop'

const Demo = () => {
  return <SopPreview loading={false} data={[]} title={'title'} />
}
```

### useSopForm

> 创建`SopForm`组件的`form`属性实例，相较`xiaoshu`的`form`, 其多了一个属性`strictValidation`, 其值为`bool`类型, 用来控制表单是否需要严格校验, 在调用`form.validateFields`方法时, 用户应该手动设置该属性的值
npm package: @fruits-chain/sop-pro
Description: A higher abstracted component for sop
Author: changhuali
Latest version: 1.6.6

# sop-pro

> SOP 业务公共组件, 相比`@fruits-chain/sop`组件, 内部对 SOP 模板、答案、暂存、等功能进行了封装, 并内置了 loading、error 等状态下的 UI

> 默认内置了时间水印, 可以通过 watermark 属性传递用户自定义的水印文案

## 使用

```sh
yarn add @fruits-chain/sop-pro @fruits-chain/sop @fruits-chain/upload
```

_请确保项目安装了上述包中`peerDependencies`列出的所有三方包，并仔细检查版本。_

## API

### Form

> SOP 表单组件

**使用**

```tsx
import React from 'react'
import { Form, useSopRef } from '@fruits-chain/sop-pro'

const watermark = {
  // 改为true时, 如果获取水印文案失败(包括内部的时间获取), 则不能进行上传
  required: false,
  // 普通文本
  content: () => Promise.resolve(['第一行水印', '第二行水印']),
  // 支持富文本/图片, 详细见@fruits-chain/react-native-upload watermark配置
  richContent: [],
}

const Demo = () => {
  const sopFormRef = useSopRef()
  return (
    <Form
      ref={sopFormRef}
      title={'每个模板的title'} // 可以为render函数
      uuid={'全局唯一id'} // 推荐由路由+业务id+操作类型组成
      businessId={'业务id'}
      watermark={watermark} // 非必传, 默认{ required: false, content: () => Promise.resolve([]) }
      uploadProps={
        {
          // upload props, 此处的watermark会覆盖前面的watermark
        }
      }
      sopIds={'SOP ID组成的数组'}
    />
  )
}
```

### Preview

> SOP 预览组件

**使用**

```tsx
import React from 'react'
import { Preview } from '@fruits-chain/sop-pro'

const Demo = () => {
  return (
    <Preview
      title={'每个模板的title'}
      businessId={'业务id'}
      sopIds={'SOP ID组成的数组'}
    />
  )
}
```

### useSopRef

> 创建`Form`组件的`ref`, 组件内部通过`ref`向外暴露了部分`API`

**form**

> `SopForm`表单`form`属性实例

**requestTempSave**

> 请求暂存, 返回一个`Promise<bool>`对象, 成功结果为`true`, 失败结果为`false`

**requestSave**

> 请求保存修改后的数据, 返回一个`Promise<bool>`对象, 成功结果为`true`, 失败结果为`false`

**clear**

> 清除当前表单内后台上传存储的本地资源，比如当用户已经将数据同步到后端后，应该手动调用此方法

**refresh**

> 刷新 SOP 模板及答案的数据

### usePreviewRef

**refresh**

> 刷新 SOP 模板及答案的数据

### useWatermark

> 创建一个生成水印的函数, 内置了生成时间水印/地理位置信息文案
npm package: @fruits-chain/upload
Description: A component for upload
Author: changhuali
Latest version: 1.6.0

# upload

> 后台上传公共组件, 相比`@fruits-chain/react-native-upload`组件, 内部增加了后台上传功能, 用户在上传图片时, 不需要等待上传完成即可退出操作界面, 下次进入该页面时, 本地数据(上传中和上传完成的图片)会自动同步到组件内部

## 使用

```sh
yarn add @fruits-chain/upload
```

```tsx
import React, { useEffect } from 'react'
import { useBackUploadManager, init } from '@fruits-chain/upload'

const App = () => {
  // 获取run方法
  const { run } = useBackUploadManager(state => ({
    run: state.run,
  }))

  // 注意: 需要用户决定init和run方法的调用时机, 下面仅作为示例
  useEffect(() => {
    // 初始化上传API, useBackUploadManager内部会执行此回调函数上传文件
    init(async file => {
      return await yourUploadAPI(file)
    })
    // 继续执行未完成的任务
    run()
  }, [run])

  return <YourAppContent />
}
```

_请确保项目安装了上述包中`peerDependencies`列出的所有三方包，并仔细检查版本。_

## API

### Upload

> 上传组件, 支持`@fruits-chain/react-native-upload`上传组件的所有属性配置, 但是目前仅支持作为`受控组件`使用

**使用**

```tsx
import React from 'react'
import Upload from '@fruits-chain/upload'

const Demo = () => {
  return <Upload groupUuid={'所属分组唯一id'} uuid={'当前上传组件的唯一id'} />
}
```

> 为什么会有`组`的概念, 主要是方便内部做资源管理, 比如按`组`清除缓存等

> uuid 的作用, 组件内部在同步缓存的数据到组件状态时, 需要通过`groupUuid`和`uuid`对资源进行匹配

### init

> 初始化后台上传, 其参数为执行上传 API 的回调函数

使用

```tsx
import { init } from '@fruits-chain/upload'

init(async file => {
  return await yourUploadAPI(file)
})
```

### useBackUploadManager

> 一个`zustand` store, 内部负责整个后台上传的调度, 也暴露了诸如`run`、`setFinishedTask`、`clear`等方法供外部使用

_由于`useBackUploadManager`是一个`React hook`, 所以他只能在组件内部使用_

#### run

> 开始处理未完成的任务

使用

```tsx
const { run } = useBackUploadManager(state => ({
  run: state.run,
}))

run()
```

#### setFinishedTask

> 清理已完成的任务

使用

```tsx
const { setFinishedTask } = useBackUploadManager(state => ({
  setFinishedTask: state.setFinishedTask,
}))

// 清除某个组已完成的任务
setFinishedTask(groupUuid)
// 清除某个组下某个上传组件已完成的任务
setFinishedTask(groupUuid, uploadUuid)
```

#### clear

> 清理所有任务

使用

```tsx
const { clear } = useBackUploadManager(state => ({
  clear: state.clear,
}))

clear()
```
npm package: @fruits-chain/utils
Description: 前端工具集
Latest version: 1.0.8

# @fruits-chain/utils

Opinionated collection of common JavaScript / TypeScript utils.

- Tree-shakable ESM
- Fully typed - with TSDocs

## License

[MIT](./LICENSE) License © 2022 [Fruit-Chain Team](https://github.com/hjfruit)
npm package: @fruits-chain/web-tracker
Description: chushu web埋点脚本
Author: hemuxue https://github.com/Hemuxue
Latest version: 0.2.3

## Chushu WEB 埋点脚本

1. 异常信息收集和上报
2. 元数据信息收集和上报
3. 基于`Apollo Link`实现的接口调用数据收集与上报
4. 页面*Page View*访问数据采集
5. `web-vitals`页面性能指标数据采集
6. 行为数据收集

### 使用

#### 初始化脚本

> 在项目入口文件，一般为`index.tsx`导入`initWebTracker`并初始化

```typescript
import { initWebTracker } from '@fruits-chain/web-tracker'

// tips: uploadUrl和accessKey如果不传入，则会读取`process.env`环境变量中的值`CHUSHU_UPLOAD_HOST`和`CHUSHU_AK`
initWebTracker({
  pv: true,
  webVitals: true,
  uploadUrl: 'xx',
  accesskey: 'xx',
  events: ['click'],
})
```

#### 记录 userHash

> 需要在用户登录后，基于用户的唯一身份标识调用`recordUserHash`生成用户唯一标识，该数据会作为上报数据的唯一标识

```typescript
import { initWebTracker } from '@fruits-chain/web-tracker'

function fetchUser() {
  try {
    const res = await client.query<GetUserInfoQuery>({
      query: GetUserInfoDocument,
    })
    const info = res?.data?.getUserInfo
    set({ info: info })
    const tracker = initWebTracker() // tracker是单例的，如果已经被初始化过，则直接返回
    // 通过userId生成useHash标识上报数据
    tracker.recordUserHash(info.userId)
    return info
  } catch {}
}
```

### 接入自定义`Apollo Link`

> 如果你的项目中有使用`Apollo Client`，可以通过添加`chushuLink`收集`graphql`异常以及`graphql`接口调用记录

```typescript
import { ApolloClient, HttpLink, concat } from '@apollo/client'
import { chushuLink } from '@fruits-chain/web-tracker'

export default new ApolloClient({
  link: concat(chushuLink, concat(otherLink1, concat(otherLink2, httpLink))),
  ...
})
```