# schemablocks > Generate a React backend interface for firebase/firestore based on [JSON schema](http://json-schema.org/). Latest version **1.0.50** (published 2022-10-28) · ISC license · 0 weekly downloads ## Install ```sh npm install schemablocks pnpm add schemablocks yarn add schemablocks bun add schemablocks ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.50 | | Published | 2022-10-28 | | First published | 2021-03-05 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 13 | | Unpacked size | 323.9 KB | | Known vulnerabilities | 0 (+3 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 2 | | Maintainers | max_uh | ## Links - npm: https://www.npmjs.com/package/schemablocks - Repository: https://github.com/moccadroid/schemablocks - Homepage: https://github.com/moccadroid/schemablocks#readme - Issues: https://github.com/moccadroid/schemablocks/issues - npm.io page: https://npm.io/package/schemablocks ## Dependencies (13) - [cors](https://npm.io/package/cors.md) ^2.8.5 - [dayjs](https://npm.io/package/dayjs.md) ^1.10.4 - [sharp](https://npm.io/package/sharp.md) ^0.31.1 - [zustand](https://npm.io/package/zustand.md) ^3.4.1 - [fs-extra](https://npm.io/package/fs-extra.md) ^9.1.0 - [jsonschema](https://npm.io/package/jsonschema.md) ^1.4.0 - [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.1.5 - [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.1.5 - [@material-ui/lab](https://npm.io/package/@material-ui/lab.md) ^5.0.0-alpha.32 - [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.2.0 - [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^5.0.0-alpha.25 - [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^5.0.0-alpha.25 - [react-beautiful-dnd](https://npm.io/package/react-beautiful-dnd.md) ^13.0.0 ## Recent versions - 1.0.50 (latest) — 2022-10-28 - 1.0.49 — 2022-02-11 - 1.0.48 — 2021-11-23 - 1.0.47 — 2021-10-04 - 1.0.46 — 2021-09-24 - 1.0.45 — 2021-09-24 - 1.0.44 — 2021-08-09 - 1.0.43 — 2021-08-08 - 1.0.42 — 2021-08-03 - 1.0.41 — 2021-06-28 - 1.0.40 — 2021-06-08 - 1.0.39 — 2021-05-18 - 1.0.38 — 2021-05-14 - 1.0.37 — 2021-05-03 - 1.0.36 — 2021-05-03 - … 36 more at https://npm.io/package/schemablocks/versions ## README # schemablocks Generate a React backend interface for firebase/firestore based on [JSON schema](http://json-schema.org/). ## Disclaimer You shouldn't use this library yet. It's still under heavy development and mainly meant for internal use ;) ## Installation ```sh npm install --save schemablocks ``` ## Usage Schemablocks is meant to be used by the person building and maintaning the frontend. "frontend" in this case describes the actual graphical part of the website. Whereas "backend" is the admin interface used to enter and edit data. By creating schemas for the data the frontend uses, schemablocks allows the frontend developer to automatically generate complex admin interfaces e.g. the backend without any extra code. ## Frontend Usage Every schemablocks project starts by building a frontend block with the accompanying schema. ### QuoteBlock Here we use a simple QuoteBlock. For the sake of brevity we omit all stylings. Documentation for all the properties you can use in the schema can be found [here](#). ```javascript export default function QuoteBlock({ block }) { const {data} = block; return (

{data.quote}

) } export const QuoteBlockSchema = { "id": "quote", "type": "object", "properties": { "quote": { "type": "string", "controls": { "name": "Quote" } } } } ``` ### Index Using [next.js](https://nextjs.org/) and Firebase SDK we can write a page that loads this data and uses ContentBlocks to select and display it. Notice the use of ContentBlocks to automatically select and render the appropriate blocks. ```javascript import ContentBlocks from "schemablocks/ContentBlocks"; export default function Index({ data }) { const blocks = { "QuoteBlock": QuoteBlock } return } export async function getServerSideProps() { const snapshot = await firebase.firestore().collection("schemablocks") .where("slug", "==", "index") .where("lang", "==", "en"); const data = {}; snapshot.forEach(doc => data = doc.data()); return { props: { data }} } ``` ## Backend Usage Also using [next.js](https://nextjs.org/) we create pages/admin.js and wire everything together: ```javascript import {useSchemaBlocksData, setFirebase, Panel} from "schemablocks"; import firebase from "./firebase.config"; import QuoteBlock, {QuoteBlockSchema} from "./Quoteblock" const schemas = [{ name: "Quote", schema: QuoteBlockSchema, block: QuoteBlock }]; export default function Admin() { setFirebase(firebase); const [data, saveData, deleteData] = useSchemaBlocksData({ collection: 'schemablocks', slug: 'demo' }); const slugs = [{ name: "Index", collection: "schemablocks", slug: "index", schemas }] return } ``` That's it! To add more blocks to your page (and the backend), don't forget to register them in the schemas array above and also register it in the ContentBlocks object so it will be found and displayed. ## Advanced schemablocks concepts ### ControlType Injection You can inject your own input elements to be used in the backend interface. ```javascript import {addControlInput} from "schemablocks"; import RichTextInput from "./RichTextInput"; export default function View() { addControlInput("richText", RichTextInput); return ( ... ) } ``` You can then use the new Input as a type in your schema: ```json { "richText": { "type": "string", "controls": { "name": "Rich Text Input", "type": "richText" } } } ``` Every injected Component can expect the following props: ```javascript { onChange: (value) => {}, // sets the components value in the parent SchemaBlock controls, // corresponds to the schema field "controls" error, // the possible error returned by jsonSchema validation defaultValue, // either the defaultValue from the schema, or the value from loaded data extData, // externally loaded data (undocumented still) id, // the id of the inputBlock as uuidv4, type, //either the controls.type or (if missing) the jsonschema type disabled // please implement this in your custom input so slugLocks work properly } ``` Go see [RichTextInput](https://github.com/moccadroid/schemablocks/tree/master/playground/src/components/inputs) for an example in action. ### Media Library The media library is still quite experimental and the code is very specific to our current setup. It uses Firebase Storage and Fireabase Functions to store and resize the Images. The code for the necessary Firebase function will be released soon (when I figure out how to do this properly here). To enable Media Library the following setup is necessary: ```javascript import {setMediaLibraryConfig} from 'schemablocks'; export default function View() { setMediaLibraryConfig({ firestoreCollection: 'mediaLibrary', imageMagicUrl: '', }); return ( ... ) } ``` To use it, you can use the following controls: ```json { "images": { "type": "object", "controls": { "type": "image", "name": "Single Image", "noEdit": true, "multiSelect": false }, "properties": "#MediaProperties" } } ``` Go check out the [mediaBlock](https://github.com/moccadroid/schemablocks/tree/master/playground/src/components/blocks/mediaBlock) in the [Playground](#Playground) to find out more. ## Playground Run the playground examples to see schemablocks in action ### Installation Clone this repo and run ```sh npm run i-all && npm run dev ``` ## Schema Documentation coming soon... --- _Source: https://npm.io/package/schemablocks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._