Schemablocks NPM

schemablocks

Generate a React backend interface for firebase/firestore based on JSON schema.

Disclaimer

You shouldn't use this library yet. It's still under heavy development and mainly meant for internal use ;)

Installation

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.

export default function QuoteBlock({ block }) {
  const {data} = block;
  return (
    <div>
      <h2>{data.quote}</h2>
    </div>
  )
}

export const QuoteBlockSchema = {
  "id": "quote",
  "type": "object",
  "properties": {
    "quote": {
      "type": "string",
      "controls": { "name": "Quote" }
    }
  }
}

Index

Using next.js 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.

import ContentBlocks from "schemablocks/ContentBlocks";
export default function Index({ data }) {

  const blocks = {
    "QuoteBlock": QuoteBlock
  }
  
  return <ContentBlocks data={data?.[0]} blocks={data.blocks} />
}

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 we create pages/admin.js and wire everything together:

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 <Panel slugs={slugs} />
}

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.

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:

{
  "richText": {
    "type": "string",
    "controls": {
      "name": "Rich Text Input",
      "type": "richText"
    }
  }
}

Every injected Component can expect the following props:

{
  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 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:

import {setMediaLibraryConfig} from 'schemablocks';

export default function View() {
  setMediaLibraryConfig({
    firestoreCollection: 'mediaLibrary',
    imageMagicUrl: '<URL TO A FIREBASE FUNCTION THAT RESIZES LIBRARY IMAGES>',
  });
  
  return (
    ...
  )
}

To use it, you can use the following controls:

{
  "images": {
    "type": "object",
    "controls": {
      "type": "image",
      "name": "Single Image",
      "noEdit": true,
      "multiSelect": false
    },
    "properties": "#MediaProperties"
  }
}

Go check out the mediaBlock in the Playground to find out more.