From a5bca34e3c62c283bee74c9458c9a7667661f6f6 Mon Sep 17 00:00:00 2001 From: Andrea Vesterhus Date: Tue, 21 May 2024 09:12:05 +0200 Subject: [PATCH] feat: missing mediaviewer and responsive grid docs --- .../docs/MediaViewerPlugin/Documentation.md | 3 + .../MediaViewerPlugin/Examples/Basic.json | 51 +++++++++ .../ResponsiveGridPlugin/Documentation.md | 80 +++++++++++++ .../ResponsiveGridPlugin/Examples/Basic.json | 105 ++++++++++++++++++ 4 files changed, 239 insertions(+) create mode 100644 packages/dm-core-plugins/docs/MediaViewerPlugin/Documentation.md create mode 100644 packages/dm-core-plugins/docs/MediaViewerPlugin/Examples/Basic.json create mode 100644 packages/dm-core-plugins/docs/ResponsiveGridPlugin/Documentation.md create mode 100644 packages/dm-core-plugins/docs/ResponsiveGridPlugin/Examples/Basic.json diff --git a/packages/dm-core-plugins/docs/MediaViewerPlugin/Documentation.md b/packages/dm-core-plugins/docs/MediaViewerPlugin/Documentation.md new file mode 100644 index 000000000..2b48d7c37 --- /dev/null +++ b/packages/dm-core-plugins/docs/MediaViewerPlugin/Documentation.md @@ -0,0 +1,3 @@ +MediaViewerPlugin allows users to upload, preview and download assets. + +Previews exists for image, video and audio filetypes + some application filetypes like like pdf, json, xml and javascript. \ No newline at end of file diff --git a/packages/dm-core-plugins/docs/MediaViewerPlugin/Examples/Basic.json b/packages/dm-core-plugins/docs/MediaViewerPlugin/Examples/Basic.json new file mode 100644 index 000000000..aa8d47816 --- /dev/null +++ b/packages/dm-core-plugins/docs/MediaViewerPlugin/Examples/Basic.json @@ -0,0 +1,51 @@ +{ + "title": "Basic Example", + "description": "Minimal example of how to configure media viewer plugin", + "note": "", + "showDemo": false, + "entityFilePrefix": "sections", + "blueprint": { + "name": "MediaViewer", + "type": "CORE:Blueprint", + "attributes": [ + { + "name": "type", + "type": "CORE:BlueprintAttribute", + "attributeType": "string" + }, + { + "name": "name", + "type": "CORE:BlueprintAttribute", + "attributeType": "string" + }, + { + "name": "file", + "type": "CORE:BlueprintAttribute", + "attributeType": "CORE:File", + "contained": false + } + ] + }, + "entity": { + "name": "mediaViewerMOV", + "type": "./MediaViewer", + "file": { + "type": "dmss://system/SIMOS/Reference", + "address": "./static/example_image", + "referenceType": "link" + } + }, + "recipe": { + "name": "MediaExample", + "type": "CORE:UiRecipe", + "description": "Media example with basic config", + "plugin": "@development-framework/dm-core-plugins/media-viewer", + "config": { + "type": "PLUGINS:dm-core-plugins/media_viewer/MediaViewerConfig", + "description": "some description", + "caption": "some header", + "showMeta": true, + "width": 1000 + } + } +} diff --git a/packages/dm-core-plugins/docs/ResponsiveGridPlugin/Documentation.md b/packages/dm-core-plugins/docs/ResponsiveGridPlugin/Documentation.md new file mode 100644 index 000000000..74b58579c --- /dev/null +++ b/packages/dm-core-plugins/docs/ResponsiveGridPlugin/Documentation.md @@ -0,0 +1,80 @@ +Plugin based on [react-grid-system](https://www.npmjs.com/package/react-grid-system) npm package which is a Bootstrap-like responsive grid system. + +### Passing views + +ResponsiveGridPlugin config takes a list of rows. + +```json {3} + "config": { + "type": "PLUGINS:dm-core-plugins/responsive_grid/ResponsiveGridPluginConfig", + "rows": [] + } +``` + +A list of rows expects a column attribute which contains a list of `ColumnItems`. A ColumnItem expects a viewConfig and also allows you set what kind of width the column item should have based on various breakpoints. + +```json {6} + "config": { + "type": "PLUGINS:dm-core-plugins/responsive_grid/ResponsiveGridPluginConfig", + "rows": [ + { + "type": "PLUGINS:dm-core-plugins/responsive_grid/RowItem", + "columns": [ + { + "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnItem", + "viewConfig": {}, + "size": { + "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize", + "sm": 12, + "md": 4 + } + }, + { + "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnItem", + "viewConfig": {}, + "size": { + "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize", + "sm": 12, + "md": 4 + } + } + ] + }, + ] + } +``` + +### Sizing and breakpoints + +#### Breakpoints +CSS breakpoints allow you to style the website and specify layout according to the device width it's being viewed on. This plugin uses react-grid-system default breakpoints. + +| **size** | **pixels** | +| -------- | ---------- | +| xs | 576 | +| sm | 768 | +| md | 992 | +| lg | 1200 | +| xl | 1600 | +| xxl | 1920 | + +#### Sizing +A grid is based on 12 grid columns, meaning that you can split these 12 columns/section on the column items you have passed in the row. A full width item would have to span all 12 columns so we would pass a 12 to a breakpoint. +```json {3} +"size": { + "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize", + "xs": 12, +} +``` + +#### Sizing based on breakpoints +When sizing for a breakpoint we define the value it's supposed to be for the width the breakpoint it represents and anything wider UNLESS a bigger breakpoint has been defined with another value. + +In this example: on small devices the configured item would span 12 grid columns on devices smaller than 992px in width and span 4 grid columns on bigger than 992px in width. +```json {3-4} +"size": { + "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize", + "xs": 12, + "md": 4, +} +``` \ No newline at end of file diff --git a/packages/dm-core-plugins/docs/ResponsiveGridPlugin/Examples/Basic.json b/packages/dm-core-plugins/docs/ResponsiveGridPlugin/Examples/Basic.json new file mode 100644 index 000000000..5bf388e2b --- /dev/null +++ b/packages/dm-core-plugins/docs/ResponsiveGridPlugin/Examples/Basic.json @@ -0,0 +1,105 @@ +{ + "title": "Basic Example", + "description": "Minimal example of how to configure responsive grid plugin", + "note": "As you can see in the config - this example is configured for items to take up 4/12 column on medium (md) sized screens or bigger, and 12/12 columns on small screens.", + "showDemo": true, + "entityFilePrefix": "example", + "blueprint": { + "type": "CORE:Blueprint", + "name": "Example", + "description": "", + "attributes": [ + { + "type": "dmss://system/SIMOS/BlueprintAttribute", + "name": "type", + "attributeType": "string", + "optional": false + } + ] + }, + "entity": { + "type": "./Example", + "_id": "1179c897-df62-445f-87e4-f393b4253936" + }, + "recipe": { + "type": "CORE:UiRecipe", + "name": "grid_example", + "description": "Person form", + "plugin": "@development-framework/dm-core-plugins/responsive_grid", + "config": { + "type": "PLUGINS:dm-core-plugins/responsive_grid/ResponsiveGridPluginConfig", + "rows": [ + { + "type": "PLUGINS:dm-core-plugins/responsive_grid/RowItem", + "columns": [ + { + "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnItem", + "viewConfig": { + "type": "CORE:InlineRecipeViewConfig", + "recipe": { + "type": "CORE:UiRecipe", + "name": "box", + "plugin": "custom-box-plugin", + "config": { + "type": "PLUGINS:custom-box-plugin-blueprint", + "content": "Item 1" + } + } + }, + "size": { + "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize", + "sm": 12, + "md": 4 + } + }, + { + "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnItem", + "viewConfig": { + "type": "CORE:InlineRecipeViewConfig", + "recipe": { + "type": "CORE:UiRecipe", + "name": "box", + "plugin": "custom-box-plugin", + "config": { + "type": "PLUGINS:custom-box-plugin-blueprint", + "content": "Item 2" + } + } + }, + "size": { + "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize", + "sm": 12, + "md": 4 + } + } + ] + }, + { + "type": "PLUGINS:dm-core-plugins/responsive_grid/RowItem", + "columns": [ + { + "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnItem", + "viewConfig": { + "type": "CORE:InlineRecipeViewConfig", + "recipe": { + "type": "CORE:UiRecipe", + "name": "box", + "plugin": "custom-box-plugin", + "config": { + "type": "PLUGINS:custom-box-plugin-blueprint", + "content": "Item 3" + } + } + }, + "size": { + "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize", + "sm": 12, + "md": 4 + } + } + ] + } + ] + } + } +}