Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vvenv/lowdefy-chakra-ui-blocks
https://github.com/vvenv/lowdefy-chakra-ui-blocks
Last synced: about 5 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/vvenv/lowdefy-chakra-ui-blocks
- Owner: vvenv
- License: mit
- Created: 2021-07-24T10:01:10.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-07-24T10:01:13.000Z (over 3 years ago)
- Last Synced: 2024-10-27T00:09:55.538Z (19 days ago)
- Language: JavaScript
- Size: 19.2 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Lowdefy Blocks Template
This is a template repository as a basic starting point for developing custom blocks for Lowdefy. For a detailed description of how to build custom blocks, visit the [Custom Blocks](https://docs.lowdefy.com/custom-blocks) sections in the docs.
This repository contains basic example of blocks for the five different block categories; `display`, `input`, `container`, `context` and `list`. You can read more about how blocks are used in Lowdefy in the [Blocks](https://docs.lowdefy.com/blocks) section of the docs.
A Lowdefy block has two files, the block meta data and the block React component.
## Running the blocks
1. You must have [node](https://nodejs.org/en/) and [yarn](https://yarnpkg.com/getting-started/install) installed.
2. Generate a repository from the template on Github or clone this repository.
3. Run `yarn install`, then `yarn start`, then check the you block is served by viewing the meta data at: http://localhost:3002/meta/DisplayBlock.json.
4. Add the `types` to you the lowdefy.yaml. For example:
```yaml
name: my-app
lowdefy: 3.10.1
types:
DisplayBlock:
url: http://localhost:3002/meta/DisplayBlock.json
# ...
```
5. Use your new block type in your Lowdefy app.
6. Start your Lowdefy app and test if it works, run: `npx lowdefy@latest dev`
7. Continue to develop your block React component. Change to your block will need auto reload the app in the browser, you need to hit refresh.
8. Before deploying your blocks to a static file server, remember to change the `remoteEntryUrl` field in the `webpack.prod.js` file to yout block URL.
9. Deploy your blocks and enjoy your ☕️.
## Other Lowdefy Blocks Packages
- [@lowdefy/blocks-basic](https://github.com/lowdefy/lowdefy/tree/main/packages/blocks/blocksBasic): Official Lowdefy blocks some basic Html elements.
- [@lowdefy/blocks-antd](https://github.com/lowdefy/lowdefy/tree/main/packages/blocks/blocksAntd): Official Lowdefy blocks for [Antd design](https://ant.design/).
- [@lowdefy/blocks-color-selectors](https://github.com/lowdefy/lowdefy/tree/main/packages/blocks/blocksColorSelectorsd): Official Lowdefy blocks for [react-color](https://casesandberg.github.io/react-color/).
- [@lowdefy/blocks-markdown](https://github.com/lowdefy/lowdefy/tree/main/packages/blocks/blocksMarkdown): Official Lowdefy blocks to render Markdown.
- [@lowdefy/blocks-amcharts](https://github.com/lowdefy/blocks-amcharts): Lowdefy blocks to render [AmCharts v4](https://www.amcharts.com/).
- [@lowdefy/blocks-aggrid](https://github.com/lowdefy/blocks-aggrid): Lowdefy blocks to render [Ag-Grid](https://www.ag-grid.com/) tables.
## More Lowdefy resources
- Getting started with Lowdefy - https://docs.lowdefy.com/tutorial-start
- Lowdefy docs - https://docs.lowdefy.com
- Lowdefy website - https://lowdefy.com
- Community forum - https://github.com/lowdefy/lowdefy/discussions
- Bug reports and feature requests - https://github.com/lowdefy/lowdefy/issues
## Licence
[MIT](https://github.com/lowdefy/blocks-template/blob/main/LICENSE)