open-index/open-npm huggingface dataset:
npm package: @sinosun/lib
Description: sinosun jsbridge and net toolkit
Author: thomas
Latest version: 1.2.8

## 使用
```bash
npm i @sinosun/lib
```

## LICENSE

MIT

1.1.8
修改：
打开小应用并返回数据逻辑，由h5处理修改为由app处理
注意：需要更新对应版本app

1.1.9
修改：
mPaas离线资源包入口页面重定向到实际地址逻辑
注意：要求所有html页面路径长度与入口页面路径长度需要一致

1.2.0
修改：
mPaas下 app执行前后台切换会触发 resume事件 并且没有传递数据 前端拿到这个事件返回为空 需要做兼容处理

1.2.1
修改：
pcweb兼容

1.2.2
修改：
后端返回错误依然需要返回结果数据方便前端根据错误展示

1.2.3
修改：
bsl 模式开发支持 隧道模式和非隧道模式 - 郑晓春

1.2.4
修改：
netApi网络异常处理 网络性错误提示语上抛业务显示 - 缪君

1.2.5
修改：回退reFresh 参数丢失问题
页面回退 参数丢失，把app传入的参数传给业务组件 - 丁锋

1.2.6
修改：暗黑模式支持
根据进入页面识别是暗黑模式，设置appTitleBar样式 - 丁锋

1.2.7
修改：请求中断 不抛错 mpass 抛出启动参数 
页面在请求配置项文件需要拼接完整地址，以前是从app拿地址会出问题，现在要从前端拿这样mpass离线包需要
获取启动参数里面地址，需要区分是mpass离线包还是非离线包，需要我们把启动参数传给业务端判断，火狐浏览器
请求中断会抛错，请求封装会把错误抛给前端，需要我们自己过滤这个错误 - 丁锋
npm package: @sinotron/cli
Description: Simple framework for Typescript Electron projects
Author: Ikenna Agbasimalo
Latest version: 0.0.7-alpha

# Sinotron CLI

Cli tool that scaffolds an Electron project using electron-vite, and creates an organisational structure for
Electron app development.

### Installation

```shell
npm install -g sinotron
# You can also use yarn or pnpm or bun
```

# Usage

```shell
Usage: sinotron [options] [command]

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

Commands:
  setup [options]                  Setup the framework in the current project root.
  project [options] [projectName]  Create electron-vite project in the current folder.
  api [apiName]                    Generate api client and service files
  help [command]                   display help for command
```

### `project` Command

Create an electron-vite project in the current folder.

```shell
Usage: sinotron project [options] [projectName]

Arguments:
  projectName  The project name

Options:
  -h, --help   display help for command
```

### `setup` Command

Setup the framework in the current project root.

```shell
Usage: sinotron setup [options]

Options:
  --force     Overwrite framework directory if exists
  --vscode    Launch the project in VSCode
  -h, --help  display help for command

```

### `api` Command

Generate api client and service files

```shell
Usage: sinotron api [options] [apiName]

Arguments:
  apiName     The api name.

Options:
  -h, --help  display help for command
```
npm package: @sinouhe_bordet/tiny
Description: Removes all spaces from a string
Latest version: 2.0.0

# @sinouhe_bordet/tiny

[![npm (scoped)](https://img.shields.io/npm/v/@sinouhe_bordet/tiny)](https://github.com/sinouhe-bordet/tiny)
[![npm bundle size](https://img.shields.io/bundlephobia/min/@sinouhe_bordet/tiny)](https://github.com/sinouhe-bordet/tiny)

A tiny boi

##Install
$ npm install @bamblehorse/tiny

##Usage
const tiny = require("@bamblehorse/tiny");

tiny("So much space!");
//=> "Somuchspace!"

tiny(1337);
//=> Uncaught TypeError: Tiny wants a string!
//    at tiny (<anonymous>:2:41)
//    at <anonymous>:1:1
npm package: @sinoui/alert
Description: 警告提示，展现需要关注的信息。
Latest version: 2.0.0

# @sinoui/alert

[![npm version](https://img.shields.io/npm/v/@sinoui/alert)](https://www.npmjs.com/package/@sinoui/alert)
[![downloads](https://img.shields.io/npm/dm/@sinoui/alert)](https://www.npmjs.com/package/@sinoui/alert)

警告提示，展现需要关注的信息。[官方文档](https://sinoui.github.io/alert/)

## 安装

```shell
yarn add @sinoui/alert
```

## 简单示例

```tsx
import React from 'react';
import Alert from '@sinoui/alert';

function Demo() {
  return <Alert message="提示信息" />;
}
```

更多示例请参考[官方文档](https://sinoui.github.io/alert/)。

## 本地开发

项目中有以下有用的命令。

### `yarn start`

在开发和监听模式下启动项目。当代码发生变化时就会重新编译代码。它同时会实时地向你汇报项目中的代码错误。

### `yarn build`

打包，并将打包文件放在`dist`文件夹中。使用 rollup 对代码做优化并打包成多种格式（`Common JS`，`UMD`和`ES Module`）。

### `yarn lint`

`yarn lint`会检查整个项目是否有代码错误、风格错误。

开启 vscode 的 eslint、prettier 插件，在使用 vscode 编码时，就会自动修正风格错误、提示语法错误。

### `yarn format`

`yarn format`可以自动调整整个项目的代码风格问题。

### `yarn test`

`yarn test`以监听模式启动 jest，运行单元测试。

开启 vscode 的 jest 插件，会在文件变化时自动运行单元测试。

### 预览文档

```shell
yarn doc:dev
```

### 编译并打包文档

```shell
yarn doc:publish
```

### 发布文档

在发布文档之前，在`package.json`中配置好`homepage`，如下所示：

```json
{
  "homepage": "https://sinouiincubator.github.io/editable-data-table"
}
```

配置完之后就可以执行下面的命令行发布文档：

```shell
yarn doc:publish
```
npm package: @sinoui/calendar
Description: 遵循 Material Design 的日历效果实现
Latest version: 0.1.0-beta.0

# calendar [![npm version](https://img.shields.io/npm/v/@sinoui/calendar)](https://www.npmjs.com/package/@sinoui/calendar) [![downloads](https://img.shields.io/npm/dm/@sinoui/calendar)](https://www.npmjs.com/package/@sinoui/calendar)

日历。遵循 [Material Design States](https://material.io/design/interaction/states.html#usage) 规范。 [文档](https://sinoui.github.io/calendar)

## 安装

```shell
yarn add @sinoui/calendar
```

## 使用

```tsx
import Calendar from '@sinoui/calendar';

function CalendarDemo() {
  return <Calendar />;
}
```

## 本地开发

项目中有以下有用的命令。

### `yarn start`

在开发和监听模式下启动项目。当代码发生变化时就会重新编译代码。它同时会实时地向你汇报项目中的代码错误。

### `yarn build`

打包，并将打包文件放在`dist`文件夹中。使用 rollup 对代码做优化并打包成多种格式（`Common JS`，`UMD`和`ES Module`）。

### `yarn lint`

`yarn lint`会检查整个项目是否有代码错误、风格错误。

开启 vscode 的 eslint、prettier 插件，在使用 vscode 编码时，就会自动修正风格错误、提示语法错误。

### `yarn format`

`yarn format`可以自动调整整个项目的代码风格问题。

### `yarn test`

`yarn test`以监听模式启动 jest，运行单元测试。

开启 vscode 的 jest 插件，会在文件变化时自动运行单元测试。

### 预览文档

```shell
yarn doc:dev
```

### 编译并打包文档

```shell
yarn doc:publish
```

### 发布文档

在发布文档之前，在`package.json`中配置好`homepage`，如下所示：

```json
{
  "homepage": "https://sinouiincubator.github.io/editable-data-table"
}
```

配置完之后就可以执行下面的命令行发布文档：

```shell
yarn doc:publish
```

# calendar
npm package: @sinoui/core
Description: sinoui基础组件库
Latest version: 1.1.24

# @sinoui/core

这是由[ts-lib-scripts](https://github.com/sinoui/ts-lib-scripts)创建的 TypeScript 库项目。

## 本地开发

项目中有以下有用的命令。

## `yarn storybook`

启动组件示例项目。

## 启动文档服务

首先安装 docs 相关的依赖：

```shell
cd docs
yarn install
```

然后启动文档服务：

```shell
yarn start
```

### `yarn build`

打包，并将打包文件放在`dist`文件夹中。使用 rollup 对代码做优化并打包成多种格式（`Common JS`，`UMD`和`ES Module`）。

### `yarn lint`

`yarn lint`会检查整个项目是否有代码错误、风格错误。

开启 vscode 的 eslint、prettier 插件，在使用 vscode 编码时，就会自动修正风格错误、提示语法错误。

### `yarn format`

`yarn format`可以自动调整整个项目的代码风格问题。

### `yarn test`

`yarn test`以监听模式启动 jest，运行单元测试。

开启 vscode 的 jest 插件，会在文件变化时自动运行单元测试。

## 组件清单

| 编号 | 组件名     | 描述         | 状态   |
| ---- | ---------- | ------------ | ------ |
| 0    | BaseButton | 基础按钮组件 | v1.0.0 |
| 1    | Button     | 按钮组件     | v1.0.0 |
| 2    | TextInput  | 文本输入框   | v0.1.0 |

## 规范

需要导出的组件，均需要在 `src` 下创建组件目录，并且在 `index.ts` 中导出。如：

```
core
|__ src
    |__ BaseButton
      |__ BaseButton.tsx
      |__ BaseButton.test.tsx
      |__ index.ts
    |__ Button
      |__ Button.tsx
      |__ Button.test.tsx
      |__ index.ts
    |__ LoadingButton
      |__ LoadingButton.tsx
      |__ LoadingButton.test.tsx
      |__ index.ts
    |__ index.ts
|__ stories
    |__ 0-BaseButton.stories.tsx
    |__ 1-Button.stories.tsx
    |__ 2-LoadingButton.stories.tsx
```

导入：

```tsx
import BaseButton from '@sinoui/core/BaseButton';
import Button from '@sinoui/core/Button';
import LoadingButton from '@sinoui/core/LoadingButton';
```

或者：

```tsx
import { BaseButton, Button, LoadingButton } from '@sinoui/core';
```

在 `stories` 中采用 `import BaseButton from '@sinoui/core/BaseButton'`，而不能用 `import { BaseButton } from '../src'`：

- ✅ `import BaseButton from '@sinoui/core/BaseButton'`
- 🔴 `import BaseButton from '../src/BaseButton'`
- 🔴 `import { BaseButton } from '@sinoui/core'`
- 🔴 `import { BaseButton } from '../src'`

### 关于第三方依赖

1. 不能将 `react`、`react-dom` 放入到 dependencies 中
2. 不能将 `@types/*` 放入到 dependencies 中
3. 不能将工具相关的依赖放入到 dependencies 中

### 关于 ref

尽量将 DOM 元素通过 ref 的方式暴露出去。

### 关于单元测试

坚持测试驱动开发。在代码评审环节，加上测试代码质量的评审。

### 关于 eslint 错误与警告提示

不能有任何 eslint 错误提示。尽量消除 eslint 警告提示。

### 关于组件文档

组件文档分成示例和 API 文档两部分。示例用来介绍组件用途、用法、样式定制等，API 文档中介绍组件属性。

注意：在线修改代码还需要调整后才可使用。
npm package: @sinoui/data-grid
Description: 支持伸缩的列表
Author: JackingLiu
Latest version: 0.1.31

# sinoui-data-grid

支持虚拟滚动的列表，目前只支持一种靠左布局，且每个单元格数据不支持换行，超出部分会隐藏。
npm package: @sinoui/data-table
Description: sinoui数据表格
Author: JackingLiu
Latest version: 0.1.31

# sinoui-data-table

> sinoui 数据表格组件。

## roadmap

### next

* 100%单元测试
* 支持不分页渲染所有的数据
* 数据分组展示
* demo：添加`<Toolbar>`展示

### v1.0.0

* 以`<TableColumn/>`组件的方式定义表格
* 支持分页
* 支持主题定制
* 支持排序
* 支持数据行选择
* 无数据时显示提示
* 可监听数据行单击和双击事件

## 使用教程

### 安装

sinoui-data-table 依赖[sinoui-components](http://218.240.159.110:10080/newoa/sinoui-components)，所以需要同时安装 sinoui-data-table 和 sinoui-components 以及 styled-components：

```shell
yarn add sinoui-components sinoui-data-table styled-components
```

### 例子

准备数据：

```javascript
import moment from 'moment';

const users = [];

const begin = new Date(1980, 0, 18);

for (let i = 0; i < 100; i += 1) {
  users.push({
    id: i,
    userName: `张三${i + 1}`,
    age: 21,
    sex: '男',
    telephone: '13455555555',
    birthday: moment(begin)
      .add(i, 'month')
      .toDate(),
  });
}

function getSortedUsers(name, direction) {
  return name
    ? users
        .slice()
        .sort(
          (user1, user2) =>
            direction === 'desc'
              ? user2[name] - user1[name]
              : user1[name] - user2[name],
        )
    : users;
}
```

使用`DataTable`展示人员信息：

```javascript
import DataTable, { TableColumn } from '@sinoui/data-table';
import { withState } from 'recompose';

const enhance = withState('sort', 'setSort', null);

const DataTableDemo = enhance(({ sort, setSort, ...props }) => (
  <DataTable
    selectable
    data={getSortedUsers(sort && sort.name, sort && sort.direction)}
    onChange={(pageNo, pageSize, _sort) => {
      setSort(_sort);
    }}
    onSelect={action('选择行事件')}
    onRowClick={action('单击一行数据')}
    onRowDblClick={action('双击一行数据')}
    keyName="id"
    {...props}
  >
    <TableColumn
      name="userName"
      title="姓名"
      sortable
      sortActive
      sortDirection="asc"
      width={150}
    />
    <TableColumn name="sex" title="性别" sortable width={80} />
    <TableColumn name="age" title="年龄" sortable numeric width={80} />
    <TableColumn
      name="birthday"
      title="出生日期"
      sortable
      render={(data) => moment(data).format('YYYY-MM-DD')}
      width={200}
      numeric
    />
    <TableColumn name="telephone" title="联系电话" width={200} numeric />
  </DataTable>
));
```
npm package: @sinoui/datepicker
Description: 日期选择
Author: JackingLiu
Latest version: 0.1.31

# DatePicker

日期选择组件。

特性：

- [] 区别显示“今日”、“选中”、“不可用”、“当前月”、“不在当前月”的日期
- [] 日期区间的显示
- [] 日期 hover 时的样式
- [] 便捷的选择年份
- [] 便捷的选择月份
- [] 便捷的选择今日
- [] 可定制按钮
- [] 日期选择组件
- [] 日期区间选择组件
npm package: @sinoui/http-send-file
Description: 文件上传
Latest version: 1.0.2

# @sinoui/http-send-file

[![npm version](https://img.shields.io/npm/v/@sinoui/http-send-file)](https://www.npmjs.com/package/@sinoui/http-send-file)
[![downloads](https://img.shields.io/npm/dm/@sinoui/http-send-file)](https://www.npmjs.com/package/@sinoui/http-send-file)

@sinoui/http-send-file 旨在提供一种便捷的方式用于文件上传。

## 安装

执行下面的命令即可快速安装：

- 使用 npm

  ```shell
  npm install --save @sinoui/http-send-file
  ```

- 使用 yarn

  ```shell
  yarn add @sinoui/http-send-file
  ```

## 快速使用

`html文件`

```html
<html>
  <body>
    <input id="file" type="file" />
    <input type="button" value="文件上传" onclick="uploadFile()" />
  </body>
</html>
```

`js文件`

```ts
import sendFile from '@sinoui/http-send-file';

async function uploadFile() {
  const file = document.getElementById('file').files[0];
  try {
    await sendFile('http://localhost:3000/files', file);
    console.log('上传成功');
  } catch (error) {
    console.error('上传失败');
  }
}
```

### 上传一组文件

一组文件对象添加到 FormData 时组织`key`的方式：indices | repeat。

Java 后端可以解析`repeat`格式的，`Node`、`Python`、`Ruby`后端可以解析`indices`格式的。

```ts
import sendFile from '@sinoui/http-send-file';

async function uploadFileDemo() {
  await sendFile(url, files, {
    arrayFormat: 'indices',
  });
}
```

### 添加额外数据

```ts
import sendFile from '@sinoui/http-send-file';

async function uploadFileDemo() {
  await sendFile(url, files, 'usePhotot', {
    data: {
      userId: '123',
      userName: 'zhangsan',
    },
  });
}
```

### 文件上传进度

```ts
import sendFile from '@sinoui/http-send-file';

const onUploadProgress = (progressEvent: ProgressEvent) => {
  console.log(
    `上传进度：${((progressEvent.loaded / progressEvent.total) * 100) | 0}%`,
  );
};

async function uploadFileDemo() {
  await sendFile(url, files, {
    onUploadProgress,
  });
}
```

## `sendFile()`方法参数说明

- `url` (string)

  指定文件上传的 url

- `files` (Blob[] | Blob)

  需要上传的文件，可以是单个的或者是数组

- `fileFieldName` (string)

  指定表单域的名称，默认为`file`

- `options` (object)

  请求配置，支持所有的[Axios 请求配置](https://github.com/axios/axios#request-config)，除此之外，还包括`arrayFormat`。其中：

  - arrayFormat

    一组文件对象添加到 FormData 时组织`key`的方式。默认为`repeat`。

    > - `repeat`: file=file1&file=file2&file=file3
    >
    > - `indices`: file[0]=file1&file[1]=file2&file[2]=file3

  - data

    指定需要的额外数据。必须是可以加入到`FormData`中的对象，如：

    ```js
    const extraFormData = {
      userId: '123',
      userName: '张三',
    };
    ```

    对象中的属性值只支持原始类型。

  - onUploadProgress

    文件上传进度回调函数

**_注意：_**如果需要稳定上传大文件,推荐使用[send-big-file](https://github.com/sinouiincubator/send-big-file)。
npm package: @sinoui/icons
Description: [![npm version](https://img.shields.io/npm/v/@sinoui/icons)](https://www.npmjs.com/package/@sinoui/icons) [![downloads](https://img.shields.io/npm/dm/@sinoui/icons)](https://www.npmjs.com/package/@sinoui/icons)
Latest version: 2.0.0-alpha.1