feat: stack plugin

packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json

@@ -0,0 +1,72 @@
+{
+  "name": "StackPluginConfig",
+  "type": "dmss://system/SIMOS/Blueprint",
+  "attributes": [
+    {
+      "name": "type",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "string"
+    },
+    {
+      "name": "items",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "CORE:ViewConfig",
+      "dimensions": "*"
+    },
+    {
+      "name": "direction",
+      "type": "CORE:BlueprintAttribute",
+      "description": "horizontal or vertical",
+      "attributeType": "string",
+      "optional": true,
+      "default": "vertical"
+    },
+    {
+      "name": "horizontalPlacement",
+      "type": "CORE:BlueprintAttribute",
+      "description": "left, center, right or spaceItems",
+      "attributeType": "string",
+      "optional": true,
+      "default": "left"
+    },
+    {
+      "name": "verticalPlacement",
+      "type": "CORE:BlueprintAttribute",
+      "description": "top, center or bottom",
+      "attributeType": "string",
+      "optional": true,
+      "default": "top"
+    },
+    {
+      "name": "spacing",
+      "type": "CORE:BlueprintAttribute",
+      "description": "REM value. Default is 2 = 32px",
+      "attributeType": "number",
+      "optional": true,
+      "default": 2
+    },
+    {
+      "name": "maxWidth",
+      "type": "CORE:BlueprintAttribute",
+      "description": "Set max-width of wrapper if you want to use less than 100% width.",
+      "attributeType": "string",
+      "optional": true
+    },
+    {
+      "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",
+      "attributeType": "boolean",
+      "optional": true,
+      "default": false
+    },
+    {
+      "name": "classNames",
+      "type": "CORE:BlueprintAttribute",
+      "description": "Add tailwind classNames to wrapper",
+      "attributeType": "string",
+      "dimensions": "*",
+      "optional": true
+    }
+  ]
+}

packages/dm-core-plugins/blueprints/stack/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "stack",
+  "type": "CORE:Package",
+  "isRoot": false,
+  "_meta_": {
+    "type": "CORE:Meta",
+    "version": "0.0.1",
+    "dependencies": [
+      {
+        "type": "CORE:Dependency",
+        "alias": "CORE",
+        "address": "system/SIMOS",
+        "version": "0.0.1",
+        "protocol": "dmss"
+      },
+      {
+        "type": "CORE:Dependency",
+        "alias": "PLUGINS",
+        "address": "system/Plugins",
+        "version": "0.0.1",
+        "protocol": "dmss"
+      }
+    ]
+  }
+}

packages/dm-core-plugins/src/index.tsx

@@ -22,6 +22,13 @@ export default ({
       }))
     ),
   },
+  '@development-framework/dm-core-plugins/stack': {
+    component: lazy(() =>
+      import('./stack/StackPlugin').then((module) => ({
+        default: module.StackPlugin,
+      }))
+    ),
+  },
   '@development-framework/dm-core-plugins/data_grid': {
     component: lazy(() =>
       import('./data-grid/DataGridPlugin').then((module) => ({

packages/dm-core-plugins/src/stack/StackPlugin.tsx

@@ -0,0 +1,51 @@
+import { IUIPlugin, Stack, ViewCreator } from '@development-framework/dm-core'
+import {
+  DirectionTypes,
+  StackProps,
+} from '@development-framework/dm-core/dist/components/common/Stack/types'
+import { StackPluginConfig, defaultConfig } from './types'
+
+export const StackPlugin = (props: IUIPlugin) => {
+  const { idReference } = props
+  const config: StackPluginConfig = { ...defaultConfig, ...props.config }
+
+  // map plugin language to stack props/css language
+  const configMap: { [name: string]: string } = {
+    vertical: 'column',
+    horizontal: 'row',
+    horizontalPlacement:
+      config.direction === 'horizontal' ? 'alignItems' : 'justifyContent',
+    verticalPlacement:
+      config.direction === 'horizontal' ? 'justifyContent' : 'alignItems',
+    left: 'flex-start',
+    center: 'center',
+    right: 'flex-end',
+    top: 'flex-start',
+    bottom: 'flex-end',
+    spaceItems: 'space-between',
+  }
+
+  const stackProps: StackProps = {
+    direction: configMap[config.direction] as DirectionTypes,
+    [configMap.verticalPlacement]: configMap[config.verticalPlacement],
+    [configMap.horizontalPlacement]: configMap[config.horizontalPlacement],
+    className: config.classNames?.join(' '),
+    spacing: config.spacing,
+    wrap: config.wrap ? 'wrap' : 'no-wrap',
+    style: { maxWidth: config.maxWidth },
+  }
+
+  return (
+    <Stack {...stackProps}>
+      {config.items?.map((item, index) => (
+        <ViewCreator
+          key={`${item.recipe}_${index}`}
+          idReference={idReference}
+          viewConfig={item}
+          onSubmit={props.onSubmit}
+          onChange={props.onChange}
+        />
+      ))}
+    </Stack>
+  )
+}

packages/dm-core-plugins/src/stack/types.ts

@@ -0,0 +1,23 @@
+import { TViewConfig } from '@development-framework/dm-core'
+
+export type StackPluginConfig = {
+  items: TViewConfig[]
+  direction: 'horizontal' | 'vertical'
+  horizontalPlacement: 'left' | 'center' | 'right' | 'spaceItems'
+  verticalPlacement: 'top' | 'center' | 'bottom'
+  spacing: number
+  maxWidth: string
+  wrap: boolean
+  classNames: string[]
+}
+
+export const defaultConfig: StackPluginConfig = {
+  items: [],
+  direction: 'vertical',
+  horizontalPlacement: 'left',
+  verticalPlacement: 'top',
+  spacing: 2,
+  maxWidth: 'none',
+  wrap: false,
+  classNames: [],
+}

packages/dm-core/src/components/common/Stack/types.ts

@@ -42,7 +42,7 @@ export interface StackProps extends React.ComponentPropsWithoutRef<'div'> {
     | 'max-content'
   grow?: number
   shrink?: number
-  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse'
+  direction?: DirectionTypes
   wrap?: 'initial' | 'no-wrap' | 'wrap' | 'wrap-reverse'
   order?: number
   className?: string

packages/dm-core/src/types.ts

@@ -225,6 +225,7 @@ export type TViewConfig = {
   eds_icon?: string
   roles?: string[]
   showRefreshButton?: boolean
+  recipe?: string | TUiRecipe
 }
 
 export type TReferenceViewConfig = TViewConfig & {