@springtree/makeup-react-renderer

Make up react renderer

This project will render make up blocks and also have a preview component to develop them in combination with the make up editor. This project will contain the necessary components to both render and preview blocks.

Consumption

Rendering

Lets say you have a make up page with id foo and you want to render it somewhere on the website. You would need to import the Renderer component and pass it a page fetched by that id (use eva-sdk-js)

You will also need to pass the Renderer component an endPointUrl so it can fetch stylesheets associated with it.

Example:

<Renderer page={page} components={/** Component object here */} endPointUrl="http://example.com" />

The Renderer component requires you to pass it all the components you would like make up to render as a prop named components of type object.

The structure looks something like this. The key of the object will represent the ID of the block make up knows about, and the value will represent the actual react component.

{
    counter: Counter,
    header: Header
}

To tell make up about the existance of a react component in that list, you would have to add it in the blocks manager under blocks/manage in the make up editor. It will ask you for the ID you are using up here and a name to easily find the component later on. It will also ask you for the inputs of this component, which are basically the react props this component needs to be rendered (Incase it has any) Try to make these as descriptive as possible.

Editing content

This is something that is setup once, but its important the component list that is provided to the preview stays up to date.

But basically you will need to have two routes that the editor will point to when editing blocks and pages.

Preview end point

/preview Which should render the Preview Component in this library

This component also needs a prop named components which should be provided with the exact same list you provide the Renderer component with.

Block end point

/makeup-block-preview Which should render the BlockPreview component exposed by this library.

This component will be responsible for communication with the editor for previewing HTML blocks.

Development

I use storybook for development, so here is how you would develop on the preview or block preview component

1. Ensure whatever component you want to work on is the first story under stories/index.js
2. npm run storybook
3. Take the the url where the server is running and put it in the environment file of make up (Under websiteUrls) and make sure it ends with iframe.html
4. Ensure make up editor looks at the correct path, by default it adds /makeup-preview and /makeup-block-preview we don't want that in this case so comment that piece of code in editor-page.component.ts and block-preview.component.ts In the future you will be able to modify the URL immediately in the view.

Example

{
    "companyName": "",
    "siteGroup": [
        {
        "defaultToken": "",
        "applicationId": 1,
        "endPointUrl": "",
        "displayName": "",
        "id": "",
        "websiteUrls": [{
            "url": "http://localhost:6006/iframe.html", // this is the important part
            "culture": "nl-NL"
        }]
        }
    ]
}

The development workflow of this project can be dramatically improved, but due to time constraints I will keep it as it is.

Building

Builds a consumable version of the project, after running a build you can publish the package to npm or install it locally.

Publishing

Just run npm publish there is a prepublish hook which will build the project for you once you do that.