From 4ad673b8ec8e9f1b9c1551c5ac9d3073283d9925 Mon Sep 17 00:00:00 2001
From: Andrea Vesterhus <andrea.vesterhus@bouvet.no>
Date: Fri, 10 May 2024 11:55:20 +0200
Subject: [PATCH] feat: stack docs

---
 .../blueprints/stack/StackPluginConfig.json   |  5 +-
 .../blueprints/stack/docs/Documentation.md    | 28 ++++++++
 .../blueprints/stack/docs/Examples/Basic.json | 71 +++++++++++++++++++
 3 files changed, 102 insertions(+), 2 deletions(-)
 create mode 100644 packages/dm-core-plugins/blueprints/stack/docs/Documentation.md
 create mode 100644 packages/dm-core-plugins/blueprints/stack/docs/Examples/Basic.json

diff --git a/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json b/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json
index ba4d6571e..548c04548 100644
--- a/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json
+++ b/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json
@@ -10,6 +10,7 @@
     {
       "name": "items",
       "type": "CORE:BlueprintAttribute",
+      "description": "Pass list of viewConfigs",
       "attributeType": "CORE:ViewConfig",
       "dimensions": "*"
     },
@@ -55,7 +56,7 @@
     {
       "name": "wrapItems",
       "type": "CORE:BlueprintAttribute",
-      "description": "When using horizontal direction, make items wrap under eachother when width is getting too small to fit all items",
+      "description": "When using horizontal direction, make items wrap under each other when width is getting too small to fit all items",
       "attributeType": "boolean",
       "optional": true,
       "default": false
@@ -63,7 +64,7 @@
     {
       "name": "classNames",
       "type": "CORE:BlueprintAttribute",
-      "description": "Add tailwind classNames to wrapper",
+      "description": "Add classNames to wrapper",
       "attributeType": "string",
       "dimensions": "*",
       "optional": true
diff --git a/packages/dm-core-plugins/blueprints/stack/docs/Documentation.md b/packages/dm-core-plugins/blueprints/stack/docs/Documentation.md
new file mode 100644
index 000000000..7134e877a
--- /dev/null
+++ b/packages/dm-core-plugins/blueprints/stack/docs/Documentation.md
@@ -0,0 +1,28 @@
+`StackPlugin` allows you to stack views next to each other horizontally or vertically. 
+
+## Table of contents
+- [Passing views](#passing-views)
+- [Placement config](#placement-config)
+
+### Passing views \{#passing-views}
+Simply pass viewConfigs in the order you want to showcase to the `items` config field.
+
+```json title="view-items.recipe.json"
+items: [
+    {
+        "type": "CORE:ViewConfig",
+        "scope": "movies"
+    },
+    {
+        "type": "CORE:ViewConfig",
+        "scope": "shows"
+    },
+    {
+        "type": "CORE:ViewConfig",
+        "scope": "music",
+    }
+]
+```
+
+### Placement config \{#placement-config}
+In the plugins [config blueprint](./Blueprints.md) you can see all the ways you can place and space views.
\ No newline at end of file
diff --git a/packages/dm-core-plugins/blueprints/stack/docs/Examples/Basic.json b/packages/dm-core-plugins/blueprints/stack/docs/Examples/Basic.json
new file mode 100644
index 000000000..905380210
--- /dev/null
+++ b/packages/dm-core-plugins/blueprints/stack/docs/Examples/Basic.json
@@ -0,0 +1,71 @@
+{
+  "title": "Basic Example",
+  "description": "Minimal example of how to pass views through stack component",
+  "note": "",
+  "showDemo": true,
+  "entityFilePrefix": "sections",
+  "blueprint": {
+    "name": "Section",
+    "type": "CORE:Blueprint",
+    "description": "",
+    "attributes": [
+      {
+        "name": "type",
+        "type": "dmss://system/SIMOS/BlueprintAttribute",
+        "attributeType": "string",
+        "optional": false
+      }
+    ]
+  },
+  "entity": {
+    "type": "./Section",
+    "_id": "1179c897-df62-445f-87e4-f393b4253936"
+  },
+  "recipe": {
+    "name": "section",
+    "type": "CORE:UiRecipe",
+    "description": "stack recipe",
+    "plugin": "@development-framework/dm-core-plugins/stack",
+    "config": {
+      "type": "PLUGINS:dm-core-plugins/list/ListPluginConfig",
+      "items": [
+        {
+          "type": "CORE:InlineRecipeViewConfig",
+          "recipe": {
+            "name": "box",
+            "type": "CORE:UiRecipe",
+            "plugin": "custom-box-plugin",
+            "config": {
+              "type": "PLUGINS:custom-box-plugin-blueprint",
+              "content": "Item 1"
+            }
+          }
+        },
+        {
+          "type": "CORE:InlineRecipeViewConfig",
+          "recipe": {
+            "name": "box2",
+            "type": "CORE:UiRecipe",
+            "plugin": "custom-box-plugin",
+            "config": {
+              "type": "PLUGINS:custom-box-plugin-blueprint",
+              "content": "Item 2"
+            }
+          }
+        },
+        {
+          "type": "CORE:InlineRecipeViewConfig",
+          "recipe": {
+            "name": "box3",
+            "type": "CORE:UiRecipe",
+            "plugin": "custom-box-plugin",
+            "config": {
+              "type": "PLUGINS:custom-box-plugin-blueprint",
+              "content": "Item 3"
+            }
+          }
+        }
+      ]
+    }
+  }
+}