open-index/open-npm huggingface dataset:
npm package: @foxpage/eslint-config-foxpage-component
Description: foxpage component eslint
Author: melody-yangjie
Latest version: 0.2.0

# @foxpage/eslint-config-foxpage-component

为 `foxpage-component-boilerplate` 项目提供 `eslint` 相关配置.

## Usage

在项目根目录的 `.eslintrc` 文件内配置:

``` json
{
  "root": true,
  "extends": "@foxpage/eslint-config-foxpage-component",
  "rules": {}
}
```

### Customer Rules

添加自定义 `ESLint rule`:

``` json
{
  "root": true,
  "extends": "@foxpage/eslint-config-foxpage-component",
  "rules": {
    "no-unused-vars": [1]
  }
}
```
npm package: @foxpage/foxpage-admin
Description: foxpage admin
Author: drxiao
Latest version: 0.4.1

# `foxpage-admin`

`foxpage-admin` is the front-end project for `FoxPage`.

### front-end stack

```txt
react + redux + saga + immer + styled-components + Webpack
```

### UI

```txt
Ant Design
```

### start

```txt
npm start
```

### build

```txt
npm run build
```

### development

```txt
http://127.0.0.1:3002/page/#/
```

### production

```txt
http://127.0.0.1/page/#/
```
npm package: @foxpage/foxpage-component-context
Description: foxpage component context
Author: melody-yangjie
Latest version: 0.2.0

# @foxpage/foxpage-component-context

为 foxpage 页面提供页面维度的静态数据及API的数据存储功能

## 使用

用户可以直接在组件内部通过 `useFoxpageContext` 获取数据, 方式如下:

``` tsx
import React from 'react';
import { useFoxpageContext } from '@foxpage/foxpage-component-context';
import { ComponentProps } from './typing';

const HelloWorld: React.FC<ComponentProps> = props => {
  const foxpageContext = useFoxpageContext();
  console.debug('HelloWorld foxpageContext: ', foxpageContext);
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
};

export default HelloWorld;
```

## 扩展 FoxpageContext 数据

在生产环境需要按foxpage平台规范实现满足声明周期钩子函数的插件来扩展数据, 详情请查看官方文档.

测试环境只需要实现一个简单的 `storybook decorators` 插件即可, 示例如下:

``` js
// .storybook/decorators/foxpage-customer-context.js
import React from 'react';
import { FoxpageCtxOverridesProvider } from '@foxpage/foxpage-component-context';

export const FoxpageCustomerContextDecorator = (StoryFn) => {
  return (
    <FoxpageCtxOverridesProvider value={{
      // 扩展 locale 字段, 组件可直接使用 locale 字段
      locale: 'zh-HK',
    }}>
      <StoryFn />
    </FoxpageCtxOverridesProvider>
  )
};
```

在 `.storybook/preview.js` 中接入上述实现的 `decorator` 插件
``` js
import { makeFoxpageContextDecorator } from '@foxpage/foxpage-component-storybook-addon';
import { FoxpageCustomerContextDecorator } from './decorators/foxpage-customer-context';

export const decorators = [
  // 注意: 放在 `makeFoxpageContextDecorator()` 前, 靠后的先执行，需要 `makeFoxpageContextDecorator` 预设好基础环境, 才可扩展
  FoxpageCustomerContextDecorator,
  makeFoxpageContextDecorator(),
];

export const parameters = {
  foxpageContext: {
    context: {
      // 这里可设置默认值，优先级最低
      locale: 'en-US',
    }
  }
};

```
npm package: @foxpage/foxpage-component-editor-storybook-addon
Description: FoxPage component editor storybook addon
Author: melody-yangjie
Latest version: 0.3.47

## Config
register in .storybook/addon.ts

```
import '@foxpage/foxpage-component-editor-storybook-addon/lib/register';
```

## Useage

in your *.stories.js file:

```
// import addon
import { withFoxpageEditor, mountEditor } from '@foxpage/foxpage-component-editor-storybook-addon';

// import component and editor
import Component from '../src/index';
import Editor from '../editor/index';

// init stories
const stories = storiesOf('Use foxpage-editor-addon', module);
stories.addDecorator(withFoxpageEditor);

stories.add('editable story', () => {
  // mount edit with props
  const props = mountEditor(Editor, {
    promoId: 593,
    blockId: 1,
  });

  // use props
  return <Component {...props} />
});

```
npm package: @foxpage/foxpage-component-helper
Description: foxpage component helper 
Author: melody-yangjie
Latest version: 0.0.3

# @foxpage/foxpage-component-helper

为 `@foxpage/foxpage-cli` `foxpage-component-framework` 项目提供通用工具方法.

主要包含 `logger`, `path`, `paths`, `utils` 模块.
npm package: @foxpage/foxpage-component-jest-preset
Description: foxpage component jest preset
Author: melody-yangjie
Latest version: 0.1.12

# @foxpage/foxpage-component-jest-preset

为 `foxpage-component-boilerplate` 项目提供 `jest` 相关配置.

## Usage

在项目根目录的 `jest.config.js` 文件内配置:

``` js
const { createJestConfig } = require('@foxpage/foxpage-component-jest-preset');

const config = createJestConfig();

module.exports = config;
```

## option

`createJestConfig` 方法参数配置

- `mapLocalPackages`: 是否开启本地 `package` 的 `map` 关系, 会自动通过 `config.moduleNameMapper` 添加所有本地 `package` 的路劲索引而不是通过 `node_modules` 查找. (default: false)

``` js
// 如需开启，请自行配置
const config = createJestConfig({
  mapLocalPackages: true
});
```

## Customer config

可以直接修改 `createJestConfig` 方法生成的 `config` 对象来修改 `jest` 配置数据

``` js
const { createJestConfig } = require('@foxpage/foxpage-component-jest-preset');

const config = createJestConfig();

config.cache = false;
console.log(config);

module.exports = config;
```

## notice

`setupFiles` 的默认配置是 `.foxpage/jest/setup`. 可以直接在 `.foxpage/jest/setup.js` 文件内配置 `jest setup` 逻辑;

`setupFilesAfterEnv` 的默认配置是 `.foxpage/jest/setupEnv`, 且默认开启 `jest-enzyme`. 可以直接在 `.foxpage/jest/setupEnv.js` 文件内配置 `jest setupEnv` 逻辑;

`cacheDirectory` 的默认配置是 `.cache/jest`, 且默认开启 `cache`;
npm package: @foxpage/foxpage-component-shared
Description: foxpage component shared 
Author: melody-yangjie
Latest version: 0.1.14

# @foxpage/foxpage-component-shared

为 `@foxpage/foxpage-cli` `foxpage-component-framework` 项目提供通用工具方法.

主要包含 `logger`, `path`, `paths`, `utils` 模块.
npm package: @foxpage/foxpage-component-storybook-preset
Description: foxpage storybook preset
Author: melody-yangjie
Latest version: 0.4.5

# @foxpage/foxpage-component-storybook-addon

为 `foxpage-component-boilerplate` 开发组件提供 `storybook` 插件 `preset` 配置

包含 `addon` 预设配置, `webpack` 预设配置, 让用户无需关心内部实现

## Usage

``` js
// .storybook/main.js

module.exports = {
  addons: [
    {
      name: '@foxpage/foxpage-component-storybook-preset/preset',
      options: {},
    },
  ],
  // 可自定义设置
  // webpackFinal: async config => {
  //   return config;
  // },
};

```
npm package: @foxpage/foxpage-component-webpack
Description: foxpage component webpack configs
Author: melody-yangjie
Latest version: 0.3.7

# @foxpage/foxpage-component-webpack

为 `@foxpage/foxpage-cli` 项目提供 webpack 配置数据

## Usage

你无需手动使用, `foxpage` 指令工具会帮你做所有的事情

## Customer config

在组件的 `production` `node` `debug` `editor` 的构建流程(mode)中, 用户可以在 `<root>/.foxpage/webpack.js` 文件中配置所有组件通用的 `webpack` 构建配置, 也可以在 `<root>/packages/<package>/.foxpage/webpack.js` 文件中为某个组件单独设置 `webpack` 构建配置 (一般情况下用户只需要额外配置 `externals` 信息用于资源优化)

例如, 组件构建时需要移除掉 `antd` 的资源（在 foxpage 平台上注册时 添加 dependencies 指定依赖 antd 的资源, 在加载组件资源前会先加载组件依赖的资源）:

``` js
// '<root>/.foxpage/webpack.js' or '<root>/packages/<package>/.foxpage/webpack.js'
const webpackFinal = (mode, config) => {
  if (['debug', 'production', 'node'].includes(mode)) {
    config.externals['antd'] = {
      root: "antd",
      commonjs: "antd",
      commonjs2: "antd",
      amd: 'antd',
    };
  }
  return config;
};

module.exports = webpackFinal;
```
npm package: @foxpage/foxpage-core
Description: foxpage core 
Author: drxiao
Latest version: 1.2.17

# Foxpage core

Foxpage core, contains `parser`,`merger`eg.

## Dsl merge

```ts
import { merger } from '@foxpage/foxpage-core';

const result = merger.merge(baseContent, curContent, {
  strategy: merger.MergeStrategy.COMBINE_BY_EXTEND,
});
```
npm package: @foxpage/foxpage-plugin-ares
Description: foxpage server ares
Author: yhdeng
Latest version: 1.0.1

# @foxpage/foxpage-plugin-ares

The plugin for foxpage to get resource list

## Usage

Import this plugin in foxpage-server env config file

```typescript
export default {
  ...
    "plugins": ["@foxpage/foxpage-plugin-ares"],
  ...
}
```

## Methods

#### resourceList(options:ResourceListOptions)

Search resource list from the special server with resource name

```typescript
interface ResourceListOptions {
  type: string; // default is 'ares', if not , then response empty array direct
  name?: string; // search resource name
  resourceConfig?: any; // the resource server address config, include host and path
  groupConfig?: any; // the resource group's manifest file path config
  appConfig?: any; // the resource group's application config
}
```
npm package: @foxpage/foxpage-plugin-ares-packages
Description: foxpage server ares
Author: yhdeng
Latest version: 1.0.1

# @foxpage/foxpage-plugin-ares

The plugin for foxpage to get resource list

## Usage

Import this plugin in foxpage-server env config file

```typescript
export default {
  ...
    "plugins": ["@foxpage/foxpage-plugin-ares"],
  ...
}
```

## Methods

#### resourceList(options:ResourceListOptions)

Search resource list from the special server with resource name

```typescript
interface ResourceListOptions {
  type: string; // default is 'ares', if not , then response empty array direct
  name?: string; // search resource name
  resourceConfig?: any; // the resource server address config, include host and path
  groupConfig?: any; // the resource group's manifest file path config
  appConfig?: any; // the resource group's application config
}
```
npm package: @foxpage/foxpage-plugin-aws-s3
Description: foxpage server aws s3
Author: yhdeng
Latest version: 0.4.2

# @foxpage/foxpage-plugin-aws-s3

The plugin for foxpage to get resource list

## Usage

Import this plugin in foxpage-server env config file

```typescript
export default {
  ...
    "plugins": ["@foxpage/foxpage-plugin-aws-s3"],
  ...
}
```

## Methods

#### storageInit(options:S3ConfigType)

Init plugin config

#### storageObjectUpload( objectName: string,content: string | Uint8Array | Buffer)

Upload object to s3 with content

#### storageObjectUploadByPath( objectName: string,pathName: string,options?: { bucket?: string; prefix?: string })

Upload object to s3 with content path

#### storageObjectDownload(objectName: string, targetName?: string)

Download object from s3 by object name (path)

#### storageObjectDelete(objectName: string)

Remove s3 object

#### storageObjectContent(objectName: string)

Get s3 object content detail

#### storageObjectList(prefix: string, options?: StorageListOptions)

Get s3 the special path's object list

#### storageDownloadFolders( prefix: string,target: string = '',options?: { bucketName?: string })

Download objects from s3 by the special path

#### storageZipFolders(source: string, target: string)

Zip the download objects folder to a file

#### storageZipFileContent(target: string)

Get the local zip file content
npm package: @foxpage/foxpage-plugin-file-parse
Description: foxpage file parse plugin
Author: xdr肖达荣
Latest version: 1.0.1

# `@foxpage/foxpage-plugin-file-parse`

> TODO: description

## Usage

```
const foxpagePluginFileParse = require('@foxpage/foxpage-plugin-file-parse');

// TODO: DEMONSTRATE API
```
npm package: @foxpage/foxpage-plugin-preview-component
Description: foxpage component preview plugin
Author: xdr肖达荣
Latest version: 1.0.2

# `@foxpage/foxpage-plugin-preview-component`

> TODO: description

## Usage

```
const foxpagePluginPreviewComponent = require('@foxpage/foxpage-plugin-preview-component');

// TODO: DEMONSTRATE API
```
npm package: @foxpage/foxpage-plugin-react-helmet
Description: react helmet plugin for foxpage
Author: drxiao
Latest version: 1.0.3

# `@foxpage/foxpage-plugin-react-helmet`

> TODO: description

## Usage

```
const foxpagePluginReactHelmet = require('@foxpage/foxpage-plugin-react-helmet');

// TODO: DEMONSTRATE API
```
npm package: @foxpage/foxpage-plugin-react-helmet-styled
Description: foxpage plugin contains helmet and styled-component
Author: drxiao
Latest version: 1.0.1

# `@foxpage/foxpage-plugin-react-helmet-styled`

> TODO: description

## Usage

```
const foxpagePluginReactHelmetStyled = require('@foxpage/foxpage-plugin-react-helmet-styled');

// TODO: DEMONSTRATE API
```
npm package: @foxpage/foxpage-plugin-styled-component
Description: foxpage styled component plugin for collect styles
Author: drxiao
Latest version: 1.0.2

# `@foxpage/foxpage-plugin-styled-component`

> TODO: description

## Usage

```
const foxpagePluginStyledComponent = require('@foxpage/foxpage-plugin-styled-component');

// TODO: DEMONSTRATE API
```
npm package: @foxpage/foxpage-plugin-unpkg
Description: foxpage server unpkg
Author: yhdeng
Latest version: 0.3.13

# @foxpage/foxpage-plugin-unpkg

The plugin for foxpage to get resource list

## Usage

Import this plugin in foxpage-server env config file

```typescript
export default {
  ...
    "plugins": ["@foxpage/foxpage-plugin-unpkg"],
  ...
}
```

## Methods

#### resourceList(options:ResourceListOptions)

Search resource list from the special server with resource name

```typescript
interface ResourceListOptions {
  type: string; // default is 'unpkg', if not , then response empty array direct
  name?: string; // search resource name
  resourceConfig?: any; // the resource server address config, include host and path
  appConfig?: any; // the resource group's application config
}
```
npm package: @foxpage/foxpage-plugin-urlquery-parse
Description: foxpage urlquery parse plugin
Author: xdr肖达荣
Latest version: 1.0.1

# `@foxpage/foxpage-plugin-urlobj-parse`

> TODO: description

## Usage

```
const foxpagePluginUrlobjParse = require('@foxpage/foxpage-plugin-urlobj-parse');

// TODO: DEMONSTRATE API
```
npm package: @foxpage/foxpage-plugin-visual-editor
Description: foxpage visual editor plugin
Author: xdr肖达荣
Latest version: 1.0.2

# `@foxpage/foxpage-plugin-visual-viewer`

> TODO: description

## Usage

```
const foxpagePluginVisualViewer = require('@foxpage/foxpage-plugin-visual-viewer');

// TODO: DEMONSTRATE API
```
npm package: @foxpage/foxpage-plugin-visual-html
Description: foxpage visual html plugin
Author: xdr肖达荣
Latest version: 1.0.0

# `@foxpage/foxpage-plugin-visual-html`

> TODO: description

## Usage

```
const foxpagePluginVisualHtml = require('@foxpage/foxpage-plugin-visual-html');

// TODO: DEMONSTRATE API
```