Open source address:Github.com/brick-desig…

Project introduction

Brick Design was designed to be a universal library that users could integrate into projects as React components. Projects were split into multiple libraries based on the functional modules in Brick Design. Each library was associated with the Redux-Bridge library through the core library. To implement the plug-and-plug structure, add whatever libraries you need, and the entire Brick Design library is an open design that allows you to extend and implement whatever features you want.

Project directory structure

├─ exercises, exercises, exercises, exercises, exercises, exercises, Exercises, Exercises, Exercises, Exercises, Exercises, Exercises, Exercises, Exercises ├─ ├─ code-generator ├─.eslintignore ├─.Eslintrc ├─.prettierIgnore ├─.prettierrc ├─.travis.Yml ├─.umirc.js ├─ Bass.config.js ├─ Lerna.json ├─ Tsconfig.base ├─ ├─ ├─ trash. JsonCopy the code

Because brick-Design includes multiple library projects and projects are related to each other, yarn Workspaces is used for multiple project management, Lerna is used for project association and versioning, Jest is used for unit testing, and rollup is used for packaging tools. The whole project is written in TypeScript.

Here are the main directories:

Docs document collection

Docs project document directory (not finished yet), use Dumi to build the document project.

Examples of case set

This directory mainly contains examples of brick Design. Currently, there is only a single project example of React-Example created using create-react-app, which is a standalone, runnable project. In addition to serving as a showcase for Brick Design, examples are also tools for debugging brick Design functional modules during development.

Packages library collection

Packages contains the brick Design library of functional modules and is the focus of development. Currently there are six libraries, each of which is a separate project, described below.

The core library

As the name implies, the core library is the state management center and data processing center of Brick Design. All operations related to page JSON belong to the core library management. Technically, the core library is a pure Redux package, and the purpose of the separate package of the core library is to achieve the universality of the core library. Because the Core library does not rely on any front-end framework, it can theoretically be used in any reUDX-enabled front-end framework, such as using visual page editing to implement Rax in Rax.

Story – bridge, library

Redux-bridge redux-Bridge redux-Bridge redux-Bridge redux-Bridge redux-Bridge redux-Bridge redux-Bridge redux-Bridge It does not depend on any front-end framework. It is a pure function that mainly provides the react Hook call mode. You can configure parameters to support different frameworks.

The react library

The React library is named to distinguish between frameworks. Brick Design aims to support not only React but also Rax and Redux-Bridge. The React library mainly contains brick Design’s drawing board and component tree components for visual editing in the React framework. The library is written based on React Hook as a whole. The React library is the most core library besides core, and is also the soul of Brick Design.

The react – web library

The React-Web library contains libraries of brick Design functionality beyond the component tree and palette, including the Select Component palette, properties configuration palette, styles configuration palette, and custom input components for properties and styles configuration. At present, the library has not been reconstructed, most of which rely on ANTD component library. Most of the components in the library are functional components, which can be used independently. Users can implement corresponding functional components or extend functional components according to the React library document.

Render library

The Render library is a pure function library that parses the JSON data generated by brick Design to generate pages, and supports plugin extensions.

Code – library of the generator

The code-generator library is designed to parse json pages from Brick Design into JSX code and parse JSX code to generate JSON objects supported by Brick Design. Implement bidirectional conversion of code to visual editing.

The structure of relationships between libraries