Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/plouc/compoz
compoz is a page builder built on top of React
https://github.com/plouc/compoz
components page-builder react ui
Last synced: 4 months ago
JSON representation
compoz is a page builder built on top of React
- Host: GitHub
- URL: https://github.com/plouc/compoz
- Owner: plouc
- License: mit
- Created: 2019-03-09T08:57:25.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-15T06:40:32.000Z (almost 6 years ago)
- Last Synced: 2024-10-10T08:07:34.695Z (4 months ago)
- Topics: components, page-builder, react, ui
- Language: TypeScript
- Homepage:
- Size: 543 KB
- Stars: 7
- Watchers: 3
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# compoz
**compoz** is a page builder, it abstracts the creation of Pages composed of Blocks.
It provides an UI to configure the Pages & Blocks.
Pages and Blocks are stored inside a Storage.
The configuration and rendering of Blocks is driven by BlockModules.
## The model
The `page` interface:
```typescript
interface Page {
/**
* Page's unique identifier, should be generated
* by the Storage.
*/
id: string
/**
* Page display name.
*/
label: string
/**
* Page root block identifier.
*/
rootBlockId: string
}
```
The `block` interface:
```typescript
interface Block {
/**
* The type must be unique, you cannot have two
* similar types in a single application
* as this field is used as a discriminator
* to determine which configurator/renderer
* to use.
*/
type: T
/**
* Block's unique identifier, should be generated
* by the Storage.
*/
id: string
/**
* Block display name.
*/
label: string
/**
* You can add tags to a block, it helps finding blocks
* having a specific purpose.
*/
tags: string[]
/**
* Settings depends on the block type.
*/
settings: Settings
/**
* Child blocks, not all block types support children.
* It depends on the module the block depends on.
* @see BlockModule.shouldAddChild
* @see BlockModule.shouldBeAdded
*/
children: string[]
}
```
`Block` is a generic interface, `settings` depends on the block type.
## Modules
Modules are used to augment the ability of **compoz**,
They must conform to the following interface:
```typescript
interface BlockModule = Block> {
schema: any
/**
* Those values are used to pre-populate
* the block's values when creating a new one.
*/
defaults: {
label: string
settings?: any
}
/**
* Must return a component used to visually
* identify the block type easily.
*/
icon: FunctionComponent<{
size?: number | string
color?: string
}>
/**
* Defines the block's admin UI component.
*/
configurator: BlockConfigurator
/**
* Defines the block's rendering component
*/
renderer: BlockRenderer
/**
* Determine if we're allowed to add a child for
* this type of block.
*/
shouldAddChild: (block: B) => boolean
/**
* Determine if we're allowed to add this type
* of block, can be customized according to the
* parent we're trying to add this block to.
*/
shouldBeAdded: (parent: Block) => boolean
}
```
**compoz** provides few pre-made modules:
- `@compoz/api-call-block-module`
- `@compoz/bar-chart-block-module`
- `@compoz/container-block-module`
- `@compoz/iterator-block-module`
- `@compoz/json-block-module`
- `@compoz/markdown-block-module`
- `@compoz/pie-chart-block-module`
- `@compoz/proxy-block-module`