# microcastle

> Frontend only CMS

Latest version **0.1.1** (published 2017-03-30) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install microcastle
pnpm add microcastle
yarn add microcastle
bun add microcastle
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2017-03-30 |
| First published | 2016-03-04 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 16 |
| Known vulnerabilities | 0 (+5 in 3 direct dependencies) |
| Install scripts | no |
| Author | Media Cabin |
| Maintainers | lqdh |
| Keywords | cms, react, microcastle, content, editor |

## Links

- npm: https://www.npmjs.com/package/microcastle
- Repository: https://bitbucket.org/mediacabin/microcastle
- npm.io page: https://npm.io/package/microcastle

## Dependencies (16)

- [ramda](https://npm.io/package/ramda.md) ^0.23.0
- [react](https://npm.io/package/react.md) 15.4.2
- [redux](https://npm.io/package/redux.md) ^3.6.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [marked](https://npm.io/package/marked.md) ^0.3.6
- [immutable](https://npm.io/package/immutable.md) ^3.8.1
- [react-dnd](https://npm.io/package/react-dnd.md) ^2.1.4
- [react-dom](https://npm.io/package/react-dom.md) ^15.4.2
- [simplemde](https://npm.io/package/simplemde.md) ^1.11.2
- [codemirror](https://npm.io/package/codemirror.md) ^5.23.0
- [react-icons](https://npm.io/package/react-icons.md) ^2.2.3
- [react-redux](https://npm.io/package/react-redux.md) ^5.0.2
- [redux-thunk](https://npm.io/package/redux-thunk.md) ^2.2.0
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.22.0
- [react-dnd-html5-backend](https://npm.io/package/react-dnd-html5-backend.md) ^2.1.2
- [react-textarea-autosize](https://npm.io/package/react-textarea-autosize.md) ^4.0.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2017-03-30
- 0.1.0 — 2017-03-30
- 0.0.7 — 2016-05-16
- 0.0.6 — 2016-04-20
- 0.0.4 — 2016-03-31
- 0.0.3 — 2016-03-22
- 0.0.2 — 2016-03-22
- 0.0.22 — 2016-03-07
- 0.0.1 — 2016-03-04

## README

# 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)

---
_Source: https://npm.io/package/microcastle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._