open-index/open-npm huggingface dataset:
npm package: @jimblackler/canvg
Description: JavaScript SVG parser and renderer on Canvas.
Author: Gabe Lerner
Latest version: 4.0.1-mod

# canvg

<img align="right" width="120" height="120" alt="Logo" src="website/static/img/logo.svg">

[![NPM version][npm]][npm-url]
[![Dependencies status][deps]][deps-url]
[![Build status][build]][build-url]
[![Coverage status][coverage]][coverage-url]

[npm]: https://img.shields.io/npm/v/canvg.svg
[npm-url]: https://npmjs.com/package/canvg

[deps]: https://img.shields.io/librariesio/release/npm/canvg
[deps-url]: https://libraries.io/npm/canvg/tree

[build]: https://img.shields.io/github/workflow/status/canvg/canvg/CI.svg
[build-url]: https://github.com/canvg/canvg/actions

[coverage]: https://img.shields.io/codecov/c/github/canvg/canvg.svg
[coverage-url]: https://app.codecov.io/gh/canvg/canvg

JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders the result on Canvas. It also can be used to rasterize SVG images.

<a href="#quickstart">Quickstart</a>
<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
<a href="#docs">Docs</a>
<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
<a href="https://canvg.js.org/demo/">Demo</a>
<br />
<hr />

## Quickstart

Install this library using your favorite package manager:

```sh
pnpm add canvg
# or
yarn add canvg
# or
npm i canvg
```

Then, just import `Canvg` and use it:

```js
import { Canvg } from 'canvg';

let v = null;

window.onload = async () => {
  const canvas = document.querySelector('canvas');
  const ctx = canvas.getContext('2d');

  v = await Canvg.from(ctx, './svgs/1.svg');

  // Start SVG rendering with animations and mouse handling.
  v.start();
};

window.onbeforeunload = () => {
  v.stop();
};
```

[Description of all exports you can find in Documentation.](https://canvg.js.org/api)

<br />

[![supported by Cube](https://user-images.githubusercontent.com/986756/154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https://cube.dev/?ref=eco-canvg)

## Docs

- [Migration to v4](https://canvg.js.org/docs/migration-to-v4)
- [API](https://canvg.js.org/api/classes/Canvg)
- [Examples](https://canvg.js.org/examples)

## What's implemented?

The end goal is everything from the [SVG spec](http://www.w3.org/TR/SVG/). The majority of the rendering and animation is working. If you would like to see a feature implemented, don't hesitate to add it to the issues list, or better is to create pull request 😎
npm package: @jimblackler/cm6-theme-basic-light
Description: Basic Light theme for the CodeMirror code editor
Author: Takuya Matsuyama
Latest version: 0.2.1

<!-- NOTE: README.md is generated from src/README.md -->

# cm6-theme-basic-light [![NPM version](https://img.shields.io/npm/v/cm6-theme-basic-light.svg)](https://www.npmjs.org/package/cm6-theme-basic-light)

[ [**WEBSITE**](https://codemirror.net/6/) | [**ISSUES**](https://github.com/codemirror/codemirror.next/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/theme-one-dark/blob/main/CHANGELOG.md) ]

This package implements the basic light theme for the
[CodeMirror](https://codemirror.net/6/) code editor.

The [project page](https://codemirror.net/6/) has more information, a
number of [examples](https://codemirror.net/6/examples/) and the
[documentation](https://codemirror.net/6/docs/).

This code is released under an
[MIT license](https://github.com/craftzdog/cm6-themes/tree/main/LICENSE).

We aim to be an inclusive, welcoming community. To make that explicit,
we have a [code of
conduct](http://contributor-covenant.org/version/1/1/0/) that applies
to communication around the project.

## API Reference

@basicLight

@basicLightTheme

@basicLightHighlightStyle
npm package: @jimbly/graphite-tcp
Description: Graphite TCP client for Node.js
Author: fermads
Latest version: 1.0.5

# Graphite TCP

Graphite TCP client for Node.js

* Uses the plaintext Graphite protocol
* Group values for a configurable interval and send 1 request
* No other module dependencies

## Install
```
npm install graphite-tcp
```

## Usage
```js
var graphite = require('graphite-tcp')
var metric = graphite.createClient([options])
metric.add(name, value)
metric.put(name, value)
```

`options` is an object with the following defaults:

```js
{
  host: '127.0.0.1', // graphite server host or ip
  port: 2003, // graphite server tcp port
  family: '4', // TCP family
  prefix: '', // a prefix to prepend to the name of all metrics
  suffix: '', // a suffix to append to the name of all metrics
  verbose: false, // log messages to console
  interval: 5000, // group metrics for 5s and send only 1 request
  callback: null // callback(error, metrics) called when metrics are sent
}
```

## Example
```js
var os = require('os')
var graphite = require('graphite-tcp')
var metric = graphite.createClient({
  prefix: 'productname',
  suffix: os.hostname(),
  interval: 60000,
  verbose: true,
  callback: function(error, metricsSent) {
    console.log('Metrics sent\n'+ metricsSent)
  }
})

metric.add('my.test.metric1', 10) // add 10
metric.add('my.test.metric1', 20) // add 20 (previous 10 + 20 = 30)
metric.put('my.test.metric2', 1) // put 1
metric.put('my.test.metric2', 5) // put 5 (overwrite 1 with 5)
```

Will generate

```
productname.my.test.metric1.machinename 30 1447193969
productname.my.test.metric2.machinename 5 1447193969
```

# API

### metric.add
During the `interval` time option, if 2 or more metrics with the same name
are sent, metrics will be added (summed)

```js
metric.add('my.test.metric', 20)
metric.add('my.test.metric', 10)
```
What will actually be sent to the server after `interval` is

```
my.test.metric 30
```

### metric.put
During the `interval` time option, if 2 or more metrics with the same name
are sent, the last one will be used

```js
metric.put('my.test.metric', 20)
metric.put('my.test.metric', 10)
```
What will actually be sent to the server after `interval` is

```
my.test.metric 10
```

### metric.close
Close the underlying UDP client socket

```js
metric.close()
```

## License

Licensed under the MIT license.
Credit to @fermads for his graphite-udp repo
npm package: @jimbly/minidump
Description: Read and process minidump file
Latest version: 0.0.6

# minidump - Process minidump files

[![CircleCI](https://dl.circleci.com/status-badge/img/gh/electron/node-minidump/tree/main.svg?style=shield)](https://dl.circleci.com/status-badge/redirect/gh/electron/node-minidump/tree/main)
[![npm version](http://img.shields.io/npm/v/minidump.svg)](https://npmjs.org/package/minidump)

## Installing

```sh
npm install minidump
```

## Building (for development)

* `git clone --recurse-submodules https://github.com/electron/node-minidump`
* `npm install`

## Docs

```javascript
var minidump = require('minidump');
```

### minidump.addSymbolPath(path1, ..., pathN)

Add search paths for looking up symbol files.

### minidump.walkStack(minidumpFilePath, [symbolPaths, ]callback)

Get the stack trace from `minidumpFilePath`, the `callback` would be called
with `callback(error, report)` upon completion.

### minidump.dump(minidumpFilePath, callback)

Parse and dump the raw contents of the minidump as text using `minidump_dump`.

### minidump.dumpSymbol(binaryPath, callback)

Dump debug symbols in minidump format from `binaryPath`, the `callback` would
be called with `callback(error, minidump)` upon completion.
npm package: @jimbojet/lint
Description: Zero-config ESLint flat config factory for (strict, agglutinative) entire-stack formatting and linting: TypeScript, JavaScript, Svelte, HTML, (Tailwind) CSS, Jest, JSON/5/C, and sadly YAML.
Author: Jimmy Zhening Luo
Latest version: 11.6.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# DEPRECATED

## This package is deprecated. Please use [`linted`](https://npmjs.com/package/linted) instead
npm package: @jimbolla/react-redux
Description: Official React bindings for Redux
Author: Dan Abramov
Latest version: 5.0.0

React Redux
=========================

Official React bindings for [Redux](https://github.com/reactjs/redux).  
Performant and flexible.

[![build status](https://img.shields.io/travis/reactjs/react-redux/master.svg?style=flat-square)](https://travis-ci.org/reactjs/react-redux) [![npm version](https://img.shields.io/npm/v/react-redux.svg?style=flat-square)](https://www.npmjs.com/package/react-redux)
[![npm downloads](https://img.shields.io/npm/dm/react-redux.svg?style=flat-square)](https://www.npmjs.com/package/react-redux)
[![redux channel on slack](https://img.shields.io/badge/slack-redux@reactiflux-61DAFB.svg?style=flat-square)](http://www.reactiflux.com)


## Installation

React Redux requires **React 0.14 or later.**

```
npm install --save react-redux
```

This assumes that you’re using [npm](http://npmjs.com/) package manager with a module bundler like [Webpack](http://webpack.github.io) or [Browserify](http://browserify.org/) to consume [CommonJS modules](http://webpack.github.io/docs/commonjs.html).

If you don’t yet use [npm](http://npmjs.com/) or a modern module bundler, and would rather prefer a single-file [UMD](https://github.com/umdjs/umd) build that makes `ReactRedux` available as a global object, you can grab a pre-built version from [cdnjs](https://cdnjs.com/libraries/react-redux). We *don’t* recommend this approach for any serious application, as most of the libraries complementary to Redux are only available on [npm](http://npmjs.com/).

## React Native

As of React Native 0.18, React Redux 4.x should work with React Native. If you have any issues with React Redux 4.x on React Native, run `npm ls react` and make sure you don’t have a duplicate React installation in your `node_modules`. We recommend that you use `npm@3.x` which is better at avoiding these kinds of issues.

If you are on an older version of React Native, you’ll need to keep using [React Redux 3.x branch and documentation](https://github.com/reactjs/react-redux/tree/v3.1.0) because of [this problem](https://github.com/facebook/react-native/issues/2985).

## Documentation

- [Redux: Usage with React](http://redux.js.org/docs/basics/UsageWithReact.html)
- [API](docs/api.md#api)
  - [`<Provider store>`](docs/api.md#provider-store)
  - [`connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])`](docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)
- [Troubleshooting](docs/troubleshooting.md#troubleshooting)

## How Does It Work?

We do a deep dive on how React Redux works in [this readthesource episode](https://www.youtube.com/watch?v=VJ38wSFbM3A).  
Enjoy!

## License

MIT
npm package: @jimcase/capacitor-exit-app
Description: This package has the ability to shut down the app in the capacitor environment.
Author: jimase
Latest version: 1.0.7

# capacitor-exit-app

This package has the ability to shut down the app in the capacitor environment.

## Install

```bash
npm install @jimcase/capacitor-exit-app
npx cap sync
```

### Typescript API

<docgen-index>

* [`exitApp()`](#exitapp)

</docgen-index>

<docgen-api>
<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->

### exitApp()

```typescript
exitApp() => Promise<void>
```

--------------------

</docgen-api>
npm package: @jimdo/md5-loader
Description: returns md5 hash of a specified path
Author: Tim Sebastian @timse
Latest version: 0.1.2

#md5-loader

The md5 loader lets you `import` the checksum of a directory as a variable.

## Potential use case

In a redux app there is the chance you want to persist the store or parts of it in the `localStorage`/`sessionStorage` and rehydrate your app on page-reload or a later session.
However this means you may get very old data from the store if your app has changed significantly in the mean time. Therefore you need some kind of versioning in the localStorage/sessionStorage.

The md5-loader allows you to get the md5-checksum of e.g. your `reducer`-directory, so everytime a reducer changes, the version for the store will change. This allows you to check on rehydration if the versions match and reject or migrate the stored state.

## Parameters

As webpack tries to import content before passing them to the loader you cant specify the directory like you would be used in a *normal* loader.
Instead you should use the `md5-loader` inline and specify the `path` to the directory as a loader *query-parameter*.
As there is no actual file required the loader also does not get the `context` in which it is running, thus you must specify the path to the directory absolute from the root of your project (where your node_modules live etc.).

## Example

```js
var checksum = require('md5-loader?path=some/path/from/root/of/project!');
console.log(checksum);
// logs the md5-checksum of the above directory
```
npm package: @jimdo/serverless-dotenv
Description: serverless plugin to fetch environment variables and write it to a .env file
Author: Henrik Fricke
Latest version: 1.0.0

# Serverless Plugin Dotenv

## About the plugin

This serverless plugin generates a `.env` file based on the environment variables in the `serverless.yml`. The idea is to use this environment variables for further tasks like integration tests etc. It works great with `serverless offline`, so you can start serverless offline, the plugin will hook into the process and create the `.env` file. You will find the `.env` file in the `.serverless` folder of your project.

It will collect the global environment variables of the poject as well as all environment variables of the functions. It will also add `API_ENDPOINT` and `IS_OFFLINE` to your environment if you run the plugin via `serverless offline`. 

## Usage

Add the npm package to your project:

```bash
# Via yarn
$ yarn add @jimdo/serverless-dotenv

# Via npm
$ npm instal @jimdo/serverless-dotenv --save
```

Add the plugin to your `serverless.yml`:

```yaml
plugins:
  - '@jimdo/serverless-dotenv'
```

That's it! You can now type `serverless dotenv` in your terminal to generate the `.env` file based on your serverless configuration. Alternative you can just start `serverless offline` to generate it.

## Contribution

Feel free to contribute to this project! Our JavaScript is written based on [standardJS](https://standardjs.com). We recommend to use a `standardJS` [plugin](https://standardjs.com/index.html#are-there-text-editor-plugins) for your Editor, but you can also lint your code with `yarn run lint` - respectively `npm run lint`. Please don't forget to add unit and/or integration tests. Thanks <3
npm package: @jimdo/webpack-stats-diff
Description: Diffs two webpack stats outputs (e.g. via [stats-webpack-plugin](https://www.npmjs.com/package/stats-webpack-plugin)) and gives back an object with file size changes in a human readable format
Author: Paul Mölders
Latest version: 1.0.3

# webpack-stats-diff

Diffs two webpack stats outputs (e.g. via [stats-webpack-plugin](https://www.npmjs.com/package/stats-webpack-plugin)) and gives back an object with file size changes in a human readable format

## Install it
```
npm i --save-dev @jimdo/webpack-stats-diff
```

## Run it
```
# Download production stats.json 
wget -q -O production-stats.json http://jenkins.prod.aws.jimdo-server.com/job/production-pipeline/job/assets-for-cdn-to-s3/lastSuccessfulBuild/artifact/target/stats.json
# Fetch branch stats.json
cp ../jimdo/build/assets/stats.json ./branch-stats.json
# Run tool
$(npm bin)/webpack-stats-diff ./production-stats.json ./branch-stats.json
```

## Example output
```
{
  "lazy/Siteadmin.Newemail": "-113.89kB",
  "lazy/Blog": "-113.95kB",
  "cms.js": "114.9kB",
  "wrapper.angular.js": "-114.75kB"
}
```
npm package: @jimeh87/pencil
Description: Mouse / Touch coordinate canvas detection directive.
Author: Jim Rennie
Latest version: 1.0.2

# Pencil

A Canvas mouse / touch detection directive for Angular. It uses Bresenham's Line Drawing Algorithm to insure a smooth draw.

## Demo

[StackBlitz Demo](https://stackblitz.com/edit/pencil-sample)

## Running application Example

[https://gameoflife.xyz](https://gameoflife.xyz)

See [github page](https://github.com/Jimeh87/pencil) for further documentation.
npm package: @jimengio/3d-model-viewer
Description: threejs-based 3D model viewer used in JimengIO
Latest version: 0.2.0

## 3D Model Viewer

> threejs based on 3D model component used in JimengIO

### Usages

![](https://img.shields.io/npm/v/@jimengio/3d-model-viewer.svg?style=flat-square)

```bash
yarn add @jimengio/3d-model-viewer
```

```ts
import { ThreeDViewer, Old3dModelViewer } from "@jimengio/3d-model-viewer";
```

- `ThreeDViewer` 支持stl、obj格式的3D模型展示组件
- `Old3dModelViewer` 老版本显示 GLTF 格式的组件, 使用的是极坐标.

#### `ThreeDViewer`

```jsx
<ThreeDViewer
  url={gltfDemo}
  renderSize={{
    width: 500,
    height: 500,
  }}
  backgroundColor="#000"
  isDragging
  isZoom
  isRotate
  materialColor="#fff"
  initPostion={
    cameraPosition:[0,0,0]
  }
  style={{}}
  onLoadComplete={()=>{}}
  onListen={(listenParam)=>{}}
/>
```

#### `Old3dModelViewer`

```jsx
let [radius, setRadius] = useState(2.4);
let [polarAngle, setPolarAngle] = useState(90);
let [equatorAngle, setEquatorAngle] = useState(90);

<ThreeModelViewer
  url={gltfDemo}
  radius={radius}
  minRadius={0.01}
  maxRadius={20}
  backgroundColor={"black"}
  polarAngle={polarAngle}
  equatorAngle={equatorAngle}
  key={gltfDemo}
  size={{ width: 800, height: 800 }}
  onRadiusChange={(z) => {
    setRadius(z);
  }}
  onAnglesChange={(polarAngle, equatorAngle) => {
    setPolarAngle(polarAngle);
    setEquatorAngle(equatorAngle);
  }}
/>;
```

### Building

Dev:

```bash
yarn dll
yarn dev
```

Compile library:

```bash
yarn compile
```

Release:

```bash
yarn release
# yarn serve
```

### Workflow

https://github.com/jimengio/ts-workflow

### License

MIT
npm package: @jimengio/code-rule-editor
Description: Code rule editor of JimengIO
Author: JIMENGIO
Latest version: 0.2.0

## Code Rule Editor

> WIP...

Live demo http://fe.jimu.io/code-rule-editor/

### Usage

![](https://img.shields.io/npm/v/@jimengio/code-rule-editor.svg?style=flat-square)

```bash
yarn add @jimengio/code-rule-editor
```

```tsx
let [segments, setSegments] = useState([]);

<CodeRuleEditor
  segments={[]}
  onSubmit={(xs) => {
    setSegments(xs);
  }}
/>;
```

### Workflow

https://github.com/jimengio/ts-workflow

### License

MIT
npm package: @jimengio/dev-switcher
Description: Cumulo Workflow
Author: jiyinyiyong
Latest version: 0.2.1-a1


Dev Apps Switcher
------

![](https://img.shields.io/npm/v/@jimengio/dev-switcher.svg)

> a devtool.

### Usage

Add a `webpack.dev.js` which is:

```js
let path = require("path");

module.exports = {
  resolve: {
    alias: {
      "pages/apps": path.join(__dirname, "ts/pages/dev-apps"),
    },
  },
};
```

`dev-apps.ts` is the forked file which is a mirror of `app.ts` that this tool would modify:

```bash
yarn global add @jimengio/dev-switcher

# at the directory where `dev-apps.ts` is located
dev-switcher
```

### Workflow

https://github.com/Cumulo/cumulo-workflow

### License

MIT
npm package: @jimengio/doc-frame
Description: > Common UI for docs page.
Latest version: 0.1.13

## Doc Frame

> Common UI for docs page.

Previews http://fe.jimu.io/doc-frame/

### Usage

![](https://img.shields.io/npm/v/@jimengio/doc-frame.svg?style=flat-square)

```bash
yarn add --dev @jimengio/doc-frame
```

- DocSidebar

```tsx
import { DocSidebar, ISidebarEntry } from "@jimengio/doc-frame";

let docItems: ISidebarEntry[] = [
  {
    title: "Demo 1",
    cnTitle: "例1",
    path: "demo1",
  },
  {
    title: "Demo 2",
    cnTitle: "例2",
    path: "demo2",
  },
];

<DocSidebar items={docItems} currentPath={path} onSwitch={(item) => setPath(item.path)} />;
```

- DocBlock

Markdown content rendered into block. When `embed` mode is activated, all borders and margins are removed:

```tsx
<DocBlock content="markdown content" embed></DocBlock>
```

- DocDemo

A card container with title and link:

```tsx
<DocDemo title="Demo of demo" link={"TODO"}>
  <div>The demo</div>
</DocDemo>
```

- DocSnippet

```tsx
<DocSnippet code={code} lang={"typescript"} />
```

### Workflow

https://github.com/jimengio/ts-workflow

### License

MIT
npm package: @jimengio/dropdown
Description: [![npm](https://img.shields.io/npm/v/@jimengio/dropdown)](https://www.npmjs.com/package/@jimengio/dropdown)
Author: jimengio
Latest version: 0.1.41-a1

## Meson Dropdown

[![npm](https://img.shields.io/npm/v/@jimengio/dropdown)](https://www.npmjs.com/package/@jimengio/dropdown)

> A collection of components of displaying information.

**In the migration...** original: [meson-display](https://github.com/jimengio/meson-display)

### Preview

[dropdown-area](http://fe.jimu.io/dropdown/#/dropdown-area)
[dropdown-menu](http://fe.jimu.io/dropdown/#/dropdown-menu)

### Usage

```bash
yarn add @jimengio/dropdown
```

* Dropdown area

Demos http://fe.jimu.io/dropdown/#/dropdown-area

```tsx
import { DropdownArea } from "@jimengio/dropdown"

// make sure you got container element in HTML
// <div class="meson-dropdown-container"></div>

<DropdownArea className={styleTrigger} renderContent={(onClose) => "Some content"} hideClose>
  <div>No close button</div>
</DropdownArea>
```

* Dropdown Menu

```tsx
let items: IMenuListItem[] = [
  {
    value: "a",
    title: "A",
  },
  {
    value: "b",
    title: "使用 optionLabelProp 指定回填到选择框的 Option 属性。uses B",
  },
  {
    value: "c",
    title: "多选，从已有条目中选择。",
  },
  {
    value: "d",
    title: "弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。",
  },
];

<DropdownMenu className={styleShortInput}
              value={selected}
              allowClear={false}
              items={items}
              onSelect={(value) => setSelected(value as string)}
              disabled={false}
              placeholder={"请选择"}
              emptyLocale={"没有数据"}  />
```

### Workflow

https://github.com/jimengio/ts-workflow

### License

MIT
npm package: @jimengio/fa-icons
Description: Simple wrapper over FontAwesome icons with React Component
Author: JIMENG.IO
Latest version: 0.2.0

## Simpler wrapper on FontAwesome with types

> based on FontAwesome v4.7.0

![](https://img.shields.io/npm/v/@jimengio/fa-icons.svg?style=flat-square)

```bash
npm install @jimengio/fa-icons
```

```tsx
import FaIcon from "@jimengio/fa-icons";
import { EFaIcon } from "@jimengio/fa-icons";

<FaIcon name={EFaIcon.Home} />;
```

### License

MIT
npm package: @jimengio/fe-api-proxy
Description: ![](https://img.shields.io/npm/v/@jimengio/fe-api-proxy.svg)
Author: JIMENG
Latest version: 0.3.1

## API proxy tool

![](https://img.shields.io/npm/v/@jimengio/fe-api-proxy.svg)

### Usage

```bash
npm install -g @jimengio/fe-api-proxy

# default
fi-proxy

# with local port
L_PORT=8116 fi-proxy
```

Features:

- starts a server listening `8000`
- redirects sites and apis
- adds CORS headers for apis

Occupied ports:

- `/fi` `8888`
- `/config` `8080`
- `/account` `9999`
- `/system` `7777`
- `/mobile` `8010`
- `/api-playground` `8020`
- `/signin` `8030`
- `/setup` `8030`, 共用项目和端口
- `/mobile-ipc` `8040`, Shopfloor App
- `/admin` `8899`
npm package: @jimengio/files-picker
Description: > UI component of selecting files
Author: JimengIO
Latest version: 0.1.0

## Files Picker

> UI component of selecting files

### 用法

![](https://img.shields.io/npm/v/@jimengio/files-picker.svg?style=flat-square)

```bash
yarn add @jimengio/files-picker
```

API host 需要业务当中配置,

```ts
configureUploading({ apiHost: "https://demo-host.com", locales: {} });
```

提供了几个简单的 API 请求用来简化请求的书写:

```js
uploadByUrl;
getDownloadUrl;
getUploadUrl;
downloadAsFile;
```

当前模块提供了四个组件:

- `UploadWrapper` 可以包裹一个 ReactNode, 点击该区域得到 `files` 变量.
- `BaseUpload` 封装了一个上传组件.
- `BaseDisplay` 封装了一个用于下载的组件.
- `Dropzone` 封装了一个可以拖拽文件上传的组件。

### 图片缩放

图片对称 url 后增加参数来控制图片操作:

```
?x-process=100
```

```js
processImageUrl(imageUrl, "100");
```

完整文档参考内部文档 `?pageId=22708556`

```
//  100         - 100 pixels square, cropping as needed
//  200x        - 200 pixels wide, proportional height
//  x0.15       - 15% original height, proportional width
//  0x0         - no resizing
//  100x150     - 100 by 150 pixels, cropping as needed
//  150,fit     - scale to fit 150 pixels square, no cropping
//  100,r90     - 100 pixels square, rotated 90 degrees
//  100,fv,fh   - 100 pixels square, flipped horizontal and vertical
//  200x,q60    - 200 pixels wide, proportional height, 60% quality
//  200x,png    - 200 pixels wide, converted to PNG format
//  cw100,ch100 - crop image to 100px square, starting at (0,0)
//  cx10,cy20,cw100,ch200 - crop image starting at (10,20) is 100px wide and 200px tall
```

### Workflow

https://github.com/jimengio/ts-workflow

### License

MIT
npm package: @jimengio/flex-styles
Description: Flexbox related styles for common layouts
Author: JIMENG
Latest version: 0.2.0

## Flex styles

> 通用样式

### Usage

![](https://img.shields.io/npm/v/@jimengio/flex-styles.svg?style=flat-square)

```bash
yarn add @jimengio/flex-styles
```

Layout styles:

```js
// layout styles

center;
column;
columnParted;
expand;
flex; // alias for expand, same
fullscreen;
noShrink;
row;
rowCenter;
rowMiddle;
rowParted;

// preset styles

absCenter;
absLeftCenter;
absRightCenter;
absRightTop;
alignItemBottom;
alignItemCenter;
displayFlex;
flexWrap;
fullHeight;
inlineBlock;
inlineRow;
inlineRowMiddle;
maxHeight80vh;
middleSection;
minHeight;
relative;
verticalAlignBottom;
xHiddenYAuto;
```

Also a `Space` component for fixing layout:

```tsx
import { Space } from "@jimengio/flex-styles"

<Space width={8} />

// or
<Space height={8} />
```

### License

MIT
npm package: @jimengio/image-viewer
Description: [![npm](https://img.shields.io/npm/v/@jimengio/image-viewer)](https://www.npmjs.com/package/@jimengio/image-viewer)
Author: jimengio
Latest version: 0.1.18

## Image Viewer Component

[![npm](https://img.shields.io/npm/v/@jimengio/image-viewer)](https://www.npmjs.com/package/@jimengio/image-viewer)

> for zooming/rotating images.

original: [meson-display](https://github.com/jimengio/meson-display)

Not yet:

- animations
- dragging

### Usage

```tsx
import { ImageViewer } from "@jimengio/image-viewer";

<ImageViewer
  visible={visible}
  imageUrl={"http://cache.house.sina.com.cn/citylifehouse/citylife/de/26/20090508_7339__.jpg"}
  onClose={() => {
    setVisible(false);
  }}
  hasLeftOne={false}
  hasRightOne={false}
  closeOnBackdrop={false}
/>;
```

### Workflow

https://github.com/jimengio/ts-workflow

### License

MIT
npm package: @jimengio/ipeca-ui
Description: > UI components for IPC.
Author: jimengio
Latest version: 0.2.1

## Ipeca UI

> UI components for IPC.

http://fe.jimu.io/ipeca-ui/

### Usage

![](https://img.shields.io/npm/v/@jimengio/ipeca-ui.svg?style=flat-square)

```bash
yarn add @jimengio/ipeca-ui
```

> TODO, find more https://github.com/jimengio/ipeca-ui/tree/master/example/demo .

### Workflow

https://github.com/jimengio/ts-workflow

### License

MIT
npm package: @jimengio/jimo-antd-theme
Description: Antd theme for jimengio
Author: JimengIo
Latest version: 0.3.0-alpha

# jimo-antd-theme

Antd theme for jimengio

[![Build Status](https://travis-ci.org/jimengio/jimo-antd-theme.svg?branch=master)](https://travis-ci.org/jimengio/jimo-antd-theme)
[![npm](https://img.shields.io/npm/v/@jimengio/jimo-antd-theme.svg)](https://www.npmjs.com/package/@jimengio/jimo-antd-theme)
[![GitHub license](https://img.shields.io/github/license/jimengio/jimo-antd-theme)](./LICENSE)

## Theme

Preview: https://jimengio.github.io/jimo-antd-theme/

[Antd variables](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less)

1. platform / platformV3
2. q806V3 / q806HCV3
3. ...

### css

```shell
lib
├── platform.min.css
├── platform_v3.min.css
├── platform_hc.min.css
├── platform_hc_v3.min.css
├── q806_hc_v3.min.css
├── q806_v3.min.css
```

### less

```shell
lib
├── platform.theme.less
├── platform_v3.theme.less
├── platform_hc.theme.less
├── platform_hc_v3.theme.less
├── q806_v3.theme.less
├── q806_hc_v3.theme.less
```

## Usage

### Installation

```shell
yarn add -D @jimengio/jimo-antd-theme
```

### less

```tsx
import "antd/dist/antd.less";
import "@jimengio/jimo-antd-theme/lib/platform.theme.less";
```

### webpack

```tsx
// Entry file

// import "antd/dist/antd.css";
import "antd/dist/antd.less";
```

```js
const jimoTheme = require("@jimengio/jimo-antd-theme");

// add rule
exports.matchLessRule = {
  test: /\.less$/,
  use: [
    {
      loader: "style-loader",
    },
    {
      loader: "css-loader",
    },
    {
      loader: "less-loader",
      options: {
        modifyVars: {
          ...jimoTheme.platform,
        },
        javascriptEnabled: true,
      },
    },
  ],
};
```

### css

不是很推荐，根据具体 `antd` 版本打包，会有兼容性问题

```tsx
// import "antd/dist/antd.min.css";
import "@jimengio/jimo-antd-theme/lib/platform.min.css";
```

## Dev

```
# install dependencies
yarn

# example
yarn example

# build package
yarn build

# sync less type (src)
yarn gen-type
# generated from local files
yarn gen-type local

# generate less files (lib)
yarn gen-less

# generate css files (example/lib)
yarn gen-css [compress, type, build]

# generate css file (for example)
yarn gen-css
# generate compressed css file (for example)
yarn gen-css compress
# generate typescript css string file (for example)
yarn gen-css type
# generate compressed css file (for lib)
yarn gen-css build

```

## License

[MIT](./LICENSE)
npm package: @jimengio/jimo-basics
Description: > Very basic UI components.
Latest version: 0.1.11

## Jimo Basics

> Very basic UI components.

http://fe.jimu.io/jimo-basics/

### Usage

![](https://img.shields.io/npm/v/@jimengio/jimo-basics.svg?style=flat-square)

```bash
yarn add @jimengio/jimo-basics
```

Button:

```tsx
<JimoButton prepend={`+`} text={"DEMO"} fillColor onClick={() => {}} />
```

Tabs:

```tsx
let items: IJimoTabItem[] = [{ title: "A", value: "a" }, { title: "This is b", value: "b" }];

<JimoTabs
  items={items}
  value={tab}
  onClick={(value) => {
    setTab(value.value);
  }}
/>;
```

Todo page component:

```tsx
<TodoFeature title="A not finished feature" description={"Some description"} />
```

### Workflow

https://github.com/jimengio/ts-workflow

### License

MIT
npm package: @jimengio/locales-editor
Description: Cumulo Workflow
Author: jiyinyiyong
Latest version: 0.2.26


Locales Editor
------

A tiny tool to for generating locales.

### Usage

![npm](https://img.shields.io/npm/v/@jimengio/locales-editor.svg)

```bash
yarn global add @jimengio/locales-editor
open http://fe.jimu.io/locales-editor/
locales-editor # in the folder contains locales.edn
```

`locales.edn` is the snapshot defined in our own project

To perform file generation only:

```bash
op=compile locales-editor
```

To skip generating `zh.ts` and `en.ts`:

```bash
typesOnly=true locales-editor
```

### Translation

Current translation is using https://ai.youdao.com/docs/doc-trans-api.s#p08

Add `:app-id` and `:app-secret` are filled in `:settings`.

### Workflow

https://github.com/Cumulo/cumulo-workflow

### License

MIT
npm package: @jimengio/meson-grid
Description: > Simplified React Grid based on JSON configurations.
Latest version: 0.1.0

## Meson Grid

> Simplified React Grid based on JSON configurations.

http://fe.jimu.io/meson-grid/#/

### Usage

![](https://img.shields.io/npm/v/@jimengio/meson-grid.svg?style=flat-square)

```bash
yarn add @jimengio/meson-grid
```

```tsx
import { MesonGrid } from "@jimengio/meson-grid";

<MesonGrid
  className={styleArea}
  configs={{
    // 设定栅格宽/高的大小
    sizes: [6, 6],
    // 也可以用 xGap, yGap 分别设定
    gap: 12,
  }}
  // 位置处理
  items={[
    { name: "a", from: [0, 0], span: [2, 2] },
    { name: "a", from: [2, 0], span: [4, 1] },
    { name: "b", from: [2, 1], span: [2, 2] },
    { name: "b", from: [0, 2], span: [2, 2] },
    { name: "b", from: [2, 3], span: [2, 2] },
  ]}
  // 注册组件
  components={{
    a: elementA,
    b: elementB,
  }}
  // 开发环境可以打开参考线方便调试
  showGuideLines={showLines}
/>;
```

### Workflow

https://github.com/jimengio/ts-workflow

### License

MIT
npm package: @jimengio/meson-modal
Description: Modal component for Meson Form and other usages
Latest version: 0.3.11

## Meson Modal

> Modal components for Meson form and other cases... Customized for JimengIO projects.

### Usage

![](https://img.shields.io/npm/v/@jimengio/meson-modal.svg?style=flat-square)

```bash
yarn add @jimengio/meson-modal
```

- Modal

Demo http://fe.jimu.io/meson-modal/#/modal

```tsx
import { MesonModal } from "@jimengio/meson-modal";

<MesonModal
  title={"DEMO modal"}
  visible={noMovingVisible}
  onClose={() => {
    setNoMovingVisible(false);
  }}
  disableMoving
  renderContent={() => {
    return (
      <div>
        <span
          onClick={() => {
            setNoMovingVisible(false);
          }}
        >
          Close
        </span>
      </div>
    );
  }}
/>;
```

- Drawer

Demo http://fe.jimu.io/meson-modal/#/drawer

```tsx
import { MesonDrawer } from "jimengio/meson-drawer";

<MesonDrawer
  title={"Custom header"}
  width={800}
  visible={customVisible}
  headerClassName={styleHeader}
  onClose={() => {
    setCustomVisible(false);
  }}
  renderContent={() => {
    return <div>NOTHING</div>;
  }}
/>;
```

- Confirm API

```tsx
import { useConfirmPop } from "jimengio/meson-drawer";

let confirmPlugin = useConfirmPop();

let onClick = () => {
  let result = await confirmPlugin.forConfirmation({ title: "title", text: "desc" });
  console.log("result", result);
};

<div>{confirmPlugin.ui}</div>;
```

### Workflow

https://github.com/jimengio/ts-workflow

### License

MIT
npm package: @jimengio/mocked-proxy
Description: Mocked Proxy ----
Latest version: 0.1.5


Mocked Proxy
----

### Usage

![](https://img.shields.io/npm/v/@jimengio/mocked-proxy.svg?style=flat-square)

```bash
yarn global add @jimengio/mocked-proxy

# 在 json/ 目录, 需要对应的配置文件
mocked-proxy

# 在 ddi-json/ 目录, 用于 DDI 项目的配置
mocked-proxy
```

配置文件是 [`json/config.edn`](json/config.edn), 同级路径还有对应的 JSON mock 文件. 其中 API 的 mock 可以使用配置:

* `:file`, 代理到文件

```edn
{:path "api/user/info", :type :file, :status 200, :file "user-info.json"}
```

* `:json` 代理到数据, 以 JSON 格式返回, 通过 EDN 格式定义

```edn
{:path "api/test/json", :type :json :status 200 :data {"code" 200, "message" "This is a test json message in EDN"}}
```

* `:text` 返回纯文本

```edn
{:path "api/test/text", :type :text :status 200 :text "text message"}
```

### 启用/禁用

`:mock-all? false` 字段控制是否启用的所有的 mock 规则.

具体到每一条规则, 可以通过 `:enabled? true` 来启用:

```edn
{:path "api/user/info", :type :file, :status 200, :file "user-info.json", :enabled? true}
```

其中 `:path` 字段的规则支持变量 `api/cores/plants/:plant-id/inspects/:target`, 然后命中指定的 URL.

### TODO

目前只是粗粒度的 mock, 没有进一步区分请求:

* `:query` 还没有支持
* `:method` 还没有支持

简单的规则用到的时候再加上.

### 关于 EDN

EDN 是 Clojure 当中的数据格式, 跟 JSON 类似, 大致可以认为是符号比较少的 JSON:

* 数字, 字符串, 布尔值, 数组, 这些语法一样,
* `{}` 跟对象类型, 但是中间不写分号, 逗号可有可无.
* `:text` 是关键字类型, 对应到 JSON 的 string.
* `nil` 对应 JSON 当中的 `null`

具体参考 https://learnxinyminutes.com/docs/edn/

### License

MIT
npm package: @jimengio/project-stats
Description: Scripts for scanning project status
Author: jiyinyiyong
Latest version: 0.1.2


Project Stats
----

> scripts to gather file informations.

### Usage

[![npm](https://img.shields.io/npm/v/@jimengio/project-stats)](https://www.npmjs.com/package/@jimengio/project-stats)

```bash
yarn global add @jimengio/project-stats
```

### `unimported`

`unimported` is a command for listing files not required from entry file:

```bash
project-unimported src/main.tsx
```

it relies on `package.json` and `tsconfig.json` for configs.

### `uppercase`

List all files with uppercase letter in filename:

```bash
project-uppercase src/
```

### `frequency`

Find editing frequency of each file from Git history:

```bash
project-frequency

project-frequency src # paths begin with "src"
```

### `usages`

Detect usages of `useState`(currently only useState):

```bash
project-usages

limitSize=5 project-usages
```

### `file-size`

```bash
project-file-size

limitSize=800 project-file-size
```

### Stats(TODO)

```bash
project-stats config.edn
```

```edn
{
  :base "/home/jimeng/repo/web/"
  :pick-entries ["shared" "system"]
  :highlights [
    {:type :lines, :succeed 800}
    {:type :frequency, :content "useState", :succeed 10}
  ]
}
```

### Workflow

Workflow https://github.com/mvc-works/calcit-workflow

### License

MIT
npm package: @jimengio/qrcode-popup
Description: > QR Code and Barcode scanner wrapped with React popup. Based on `react-qr-reader` and `@ericblade/quagga2`.
Latest version: 0.2.8

## QR Code Popup

> QR Code and Barcode scanner wrapped with React popup. Based on `react-qr-reader` and `@ericblade/quagga2`.

Previews https://fe.jimu.io/qrcode-popup/#/qr-code .

### Usage

[![npm](https://img.shields.io/npm/v/@jimengio/qrcode-popup)](https://www.npmjs.com/package/@jimengio/qrcode-popup)

```bash
yarn add @jimengio/qrcode-popup
```

```tsx
import QrCodePopup from "@jimengio/qrcode-popup/lib/qrcode-popup";
import BarcodePopup from "@jimengio/qrcode-popup/lib/barcode-popup";
```

### Workflow

https://github.com/jimengio/ts-workflow

### License

MIT
npm package: @jimengio/rebase-hell
Description: git helper tool
Author: jiyinyiyong
Latest version: 0.2.16



Rebase Hell is a tool to do rebase with clicks
------

![rebase-hell on npm](https://img.shields.io/npm/v/@jimengio/rebase-hell.svg)

### Usage

```bash
yarn global add @jimengio/rebase-hell
```

And open http://fe.jimu.io/rebase-hell/

### PR 配置

* 安装 hub 命令行工具 https://hub.github.com
* 在 GitHub 上生成有仓库可读权限的 Token [教程](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line)
* 在环境变量添加 toke, 比如 `.bashrc` 里配置 `export GITHUB_TOKEN=<token>`
  * Gitea 对应要添加 `GITEA_TOKEN`, `GITEA_HOST`(e.g. `https://git.xxx.com/api/v1/`), `GITEA_DOMAIN`(e.g. `git.xxx.com`)
* 配置完成后启动, 在 "Pick PR" 功能当中输入一个或者多个 issue id 来生成命令

### Docs

* https://git-scm.com/docs/pretty-formats
* https://hub.github.com/hub-pull-request.1.html

### Jump among Projects

命令行启动时会读取当前项目信息. 但是经常会有多个项目需要维护. 所以增加了 `switch` 自命令.

在 rebase-hell 已经运行的情况下, 在包含 `.git/` 的项目路径下执行命令:

```bash
rebase-hell switch
```

可以直接切换项目, 不用重新启动的命令.

### Background service

可以设置一个 `ecosystem.config.js` 配置文件:

```bash
module.exports = {
  apps : [{
    name: "RebaseHell",
    cwd: "/your-name/git-repo/",
    script: "rebase-hell",
    env: {
      NODE_ENV: "development",
    },
    env_production: {
      NODE_ENV: "production",
    }
  }]
}
```

然后通过 pm2 启动已经安装好的命令,

```bash
pm2 start ecosystem.config.js
```

### Workflow

https://github.com/Cumulo/cumulo-workflow

### License

MIT
npm package: @jimengio/rough-table
Description: > A table component for places where antd is too large to fit.
Latest version: 0.2.29-a3

## Rough Table

> A table component for places where antd is too large to fit.

### Usage

![](https://img.shields.io/npm/v/@jimengio/rough-table.svg?style=flat-square)

Currently the main component maintained is `RoughDivTable`. As the name indicated this component is rendered in `<div/>`s. And it has very few features in order to keep fast.

目前提供做 3 个表格组件:

- `RoughTable` 基于 `<table>` 简单封装的 table
- `RoughDivTable` 用 `<div>` 配合 Flexbox 简单封装的 table
- `ScrollDivTable` 用 `<div>` 实现的带横向滚动的 table

```ts
import { RoughDivTable } from "@jimengio/rough-table";

let columns: IRoughTableColumn<IData>[] = [
  { title: "物料编号", dataIndex: "code", render: (item: IData["code"], record: IData) => item },
  { title: "名称", dataIndex: "name", render: (item: IData["name"], record: IData) => item },
  { title: "型号", dataIndex: "model", render: (item: IData["model"], record: IData) => item },
  { title: "操作", dataIndex: "model", width: 80, render: (item: any, record: IData) => <ActionLinks actions={actions} spaced /> },
];

<RoughDivTable data={data} columns={columns} rowPadding={24} pageOptions={{ current: 1, total: 100, pageSize: 10, onChange: (x) => {} }} />;
```

Details about props:

```ts
// a faked data...
interface IData {
  name: string;
}

export interface IRoughTableColumn<IData> {
  title: ReactNode;
  hidden?: boolean;
  width?: number | string;
  className?: string;
  style?: CSSProperties;
  dataIndex: keyof T;
  render?: (value: any, record: T, itemIndex?: number) => ReactNode;
}

interface IProps {
  className?: string;
  data: { [k: string]: any }[];
  /** it renders each item of data into an array */
  columns: IRoughTableColumn<IData>;
  rowPadding?: number;
  cellClassName?: string;
  /** Display empty symbol rather than set it transparent */
  showEmptySymbol?: boolean;
  selectedKeys?: string[];
  rowKey?: string;
  onRowClick?: (record: IData) => void;
  /** antd pagination */
  pageOptions?: PaginationProps;
  /** Default locale is "no data" */
  emptyLocale?: string;
}
```

`ActionLinks` creates the links of editing:

```tsx
import { ActionLinks, IActionLinkItem } from "@jimengio/rough-table";

let actions: IActionLinkItem[] = [
  {
    text: "修改",
    onClick: () => {},
  },
  {
    text: "删除",
    onClick: () => {},
  },
];

<ActionLinks actions={actions} spaced />;
```

### Workflow

https://github.com/jimengio/ts-workflow

### License

MIT