Microcastle

Backend agnostic data store and editor for react and redux

Building

npm install

npm run-script build

Guide

Before You Start

Microcastle uses react for rendering, redux for it's data flow, and immutable.js for perfomance reasons. Before you get started with microcastle you should have a good understanding of them and also how a unidirectional data flow works.

How Does Microcastle Work

Microcastle comes in two main parts: a data store and an editor that edits data in that store.

The store is a simple database like object with a layout similar to other common databases: schemas (analogous to tables) which contain entries (analogous to rows) which then contain attributes (analogous to columns). You are responsible for providing microcastle with schemas for your data, the initial state of your data and then rendering the data on your site.

The editor is overlaid the page and supports many data types (text, arrays, images, etc). you are responsible for providing hooks for the user to open the editor.

Setting Up Microcastle

to set up microcastle in your project

npm install microcastle --save

import it in your project

import Microcastle from 'microcastle';

connect the editor and the database to your reducers

const reducer = combineReducers({
  microcastle: Microcastle.MicrocastleDataStore.reducer,
  microcastleEditor: Microcastle.MicrocastleEditorStore.reducer,
});

setup an initial state for both in your redux store

const initalState = {
  microcastleEditor: new Immutable.Map({}),
  microcastle: Immutable.fromJS({
    People: {
      Bob: {
        job: 'Middle Manager',
        lastName: 'Bobson',
      },
    },
  }),
};

const store = createStore(reducer, initialState);

define the schemas you are going to use

const mySchemas = {
  People: {
    attributes: {
      job: {
        type: 'text',
        onChange: handleJobChangeFn,
      },
      lastName: {
        type: 'text',
        onChange: handleLastNameChangeFn,
      },
    },
    onNew: handleNewFn,
    onEdit: handleEditFn,
  },
};

then include the editor component somewhere at the top of your react app but below your redux provider

<Microcastle.MicrocastleEditor schemas={mySchemas} />

now you need to actually use it in your site

Using It On Your Site

Connect your component to the microcastle schemas it needs

const connectedComponent = Microcastle.Microcastle(myComponent, ["People"]);

your component will then have a prop called microcastle (the dispatch method too) that can be used to get data

const bobsJon = this.props.microcastle.get('People', 'Bob', 'job');

and to open the editor dispatch an event

const openEditorForBobsJob = () => {
  this.props.dispatch(
    Microcastle.MicrocastleEditorStore.actions. editSingle(
      'People', 'Bob', 'job',
      this.props.microcastle.get('People', 'Bob', 'job')
    )
  )
};

return <a onClick={openEditorForBobsJob}>Edit</a>;

it's as simple as that 🌚

API

Editor Actions

Microcastle.MicrocastleEditorStore.actions.editSingle(schemaName, entryID, attributeName, currentValue)

Open the editor and edit a single attribute.

Microcastle.MicrocastleEditorStore.actions.editEntry(schemaName, entryID, currentValue)

Open the editor and edit a single an entire entry.

Microcastle.MicrocastleEditorStore.actions.createNew(schemaName)

Open the editor and create a new entry.

Store Actions

Microcastle.DataStore.actions.updateData(schemaName, entryID, attributeName, value)

Update a attribute in the datastore

Microcastle.DataStore.actions.insertData(schemaName, entryID, entryValue)

Insert a new entry into the datastore

Connector

Connector Function

Microcastle.Microcastle(component, arrayOfSchemasToConnect)

Connected Props

props.microcastle.get(schemaName, entryID, attributeName)

Gets the value of attribute

props.microcastle.getEntries(schemaName)

Returns immutable js map of {entryName: {attributeName: attributeValue}}

Get all entries in a schema.

Editor Component

<Microcastle.MicrocastleEditor schemas={schemas} />

Schema

The Schema needs to be in the layout of:

{
  SCHEMA_NAME: {
    attributes: {
      ATTRIBUTE_NAME: {
        type: 'TYPE_NAME',
        options?: {
          subtype?: 'TYPE_NAME',
          suboptions?: { ... },
        },
        onChange: SOME_FUNCTION,
      },
      OTHER_ATTRIBUTE_NAME: { ... },
    },
    onNew: SOME_FUNCTION,
    onEdit: SOME_FUNCTION,
  },
  OTHER_SCHEMA_NAME: { ... },
}

OnNew Function

takes: createdEntry

must return: Promise that resolves to an object of {EntryID: Entry}

You must specify this function, in it you should sync with your server or edit the entry however you want. Example:

onNew: (v) => new Promise((resolve, reject) => {
  let rand = Math.random().toString(36).substring(7);
  resolve({[rand]: v});
})

OnEdit Function

takes: editedEntry

must return: Promise that resolves to an Entry

You must specify this function, in it you should sync with your server or edit the entry however you want. Example:

onNew: (v) => new Promise((resolve, reject) => {
  resolve(v);
})

onChange Function

takes: changedAttribute

must return: Promise that resolves to the attribute value

You must specify this function, in it you should sync with your server or edit the attribute value however you want. Example:

onChange: (v) => new Promise((resolve, reject) => {
  resolve(v);
})

Types

Text

Simple Text field

Options: None

Image

Image

Options: None

Array

Array of another type

Options: subtype

Relation

Lets user pick a field from another Schema

Options: relative

Select

Dropdown field

Options: choices (array)