Merge pull request #86 from sitegeist/feature/dataUriPrototypes

FEATURE: Add data-uri prototypes

Classes/Sitegeist/Monocle/FusionObjects/DataUriImplementation.php

@@ -0,0 +1,42 @@
+<?php
+namespace Sitegeist\Monocle\FusionObjects;
+
+use Neos\Flow\Annotations as Flow;
+use Neos\Fusion\FusionObjects\AbstractFusionObject;
+
+/**
+ * Renderer props for a prototype Object
+ */
+class DataUriImplementation extends AbstractFusionObject
+{
+
+    /**
+     * @return string
+     */
+    public function getType()
+    {
+        return $this->fusionValue('type');
+    }
+
+    /**
+     * @return string
+     */
+    public function getContent()
+    {
+        return $this->fusionValue('content');
+    }
+
+    /**
+     * Render a prototype
+     *
+     * @return mixed
+     */
+    public function evaluate()
+    {
+        $type = $this->getType();
+        $content = $this->getContent();
+        if ($type && $content) {
+            return  'data:' . $type . ';base64,' . base64_encode($content);
+        }
+    }
+}

README.md

@@ -112,6 +112,37 @@ therefore highly reusable.
 The distinction between rendering- and mapping-prototypes can be compared to
 presentational-components vs. container-components in the ReactJS world.
 
+### Simulate API-Endpoints
+
+Monocle has fusion-prototypes to simulate json api responses for components.
+
+- `Sitegeist.Monocle:DataUri`: Generic data uri implementation that expects `type` and `content` as string
+- `Sitegeist.Monocle:DataUri.Json`: And endpoint-mock with media-type `application/json` that will pass `content` trough Json.stringify
+- `Sitegeist.Monocle:DataUri.Text`: And endpoint-mock with media-type `text/plain`
+
+The DataUri-Prototypes will encode the content as base64.
+
+```
+prototype(Vendor.Package:Component.SearchExample) < prototype(Neos.Fusion:Component) {
+	@styleguide {
+		props {
+			endpointUrl = Sitegeist.Monocle:DataUri.Json {
+				content = Neos.Fusion:RawArray {
+					term = 'hamburch'
+					suggestedTerm = 'hamburg'
+				}
+			}
+		}
+	}
+
+	endpointUrl = null
+
+	renderer = afx`
+		<div data-endpoint-url={props.endpointUrl} />
+	`
+}
+```
+
 ### Preview Configuration
 
 Some configuration is available to configure the preview.

Resources/Private/Fusion/Prototypes/DataUri/DataUri.fusion

@@ -0,0 +1,6 @@
+prototype(Sitegeist.Monocle:DataUri) {
+	@class = 'Sitegeist\\Monocle\\FusionObjects\\DataUriImplementation'
+
+	type = null
+	content = null
+}

Resources/Private/Fusion/Prototypes/DataUri/Json.fusion

@@ -0,0 +1,8 @@
+prototype(Sitegeist.Monocle:DataUri.Json) < prototype(Neos.Fusion:Component) {
+	content = null
+
+	renderer = Sitegeist.Monocle:DataUri {
+		type = 'application/json'
+		content = ${Json.stringify(props.content)}
+	}
+}

Resources/Private/Fusion/Prototypes/DataUri/Text.fusion

@@ -0,0 +1,8 @@
+prototype(Sitegeist.Monocle:DataUri.Text) < prototype(Neos.Fusion:Component) {
+	content = null
+
+	renderer = Sitegeist.Monocle:DataUri {
+		type = 'text/plain'
+		content = ${props.content}
+	}
+}