From 60fc83bad6814a6d63a33388a066e682b2eb62fd Mon Sep 17 00:00:00 2001 From: Andrea Vesterhus Date: Wed, 7 Feb 2024 12:44:22 +0100 Subject: [PATCH 1/7] feat: stack plugin --- .../blueprints/stack/StackPluginConfig.json | 72 +++++++++++++++++++ .../blueprints/stack/package.json | 25 +++++++ packages/dm-core-plugins/src/index.tsx | 7 ++ .../dm-core-plugins/src/stack/StackPlugin.tsx | 50 +++++++++++++ packages/dm-core-plugins/src/stack/types.ts | 23 ++++++ .../src/components/common/Stack/types.ts | 2 +- packages/dm-core/src/types.ts | 1 + 7 files changed, 179 insertions(+), 1 deletion(-) create mode 100644 packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json create mode 100644 packages/dm-core-plugins/blueprints/stack/package.json create mode 100644 packages/dm-core-plugins/src/stack/StackPlugin.tsx create mode 100644 packages/dm-core-plugins/src/stack/types.ts diff --git a/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json b/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json new file mode 100644 index 000000000..32a6cded4 --- /dev/null +++ b/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": "horizontal" + }, + { + "name": "verticalPlacement", + "type": "CORE:BlueprintAttribute", + "description": "left, center, right or spaceItems", + "attributeType": "string", + "optional": true, + "default": "left" + }, + { + "name": "horizontalPlacement", + "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 vertical 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 + } + ] +} diff --git a/packages/dm-core-plugins/blueprints/stack/package.json b/packages/dm-core-plugins/blueprints/stack/package.json new file mode 100644 index 000000000..a61001436 --- /dev/null +++ b/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" + } + ] + } +} diff --git a/packages/dm-core-plugins/src/index.tsx b/packages/dm-core-plugins/src/index.tsx index bb2cb5fe1..fe73ad94f 100644 --- a/packages/dm-core-plugins/src/index.tsx +++ b/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) => ({ diff --git a/packages/dm-core-plugins/src/stack/StackPlugin.tsx b/packages/dm-core-plugins/src/stack/StackPlugin.tsx new file mode 100644 index 000000000..d36cfc5db --- /dev/null +++ b/packages/dm-core-plugins/src/stack/StackPlugin.tsx @@ -0,0 +1,50 @@ +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 } = { + horizontal: 'column', + vertical: 'row', + verticalPlacement: + config.direction === 'horizontal' ? 'alignItems' : 'justifyContent', + horizontalPlacement: + 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 !== undefined ? config.spacing : 1.5, + wrap: config.wrap ? 'wrap' : 'no-wrap', + } + + return ( + + {config.items?.map((item, index) => ( + + ))} + + ) +} diff --git a/packages/dm-core-plugins/src/stack/types.ts b/packages/dm-core-plugins/src/stack/types.ts new file mode 100644 index 000000000..e30445c62 --- /dev/null +++ b/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' + verticalPlacement: 'left' | 'center' | 'right' | 'spaceItems' + horizontalPlacement: 'top' | 'center' | 'bottom' + spacing: number + maxWidth: string + wrap: boolean + classNames: string[] +} + +export const defaultConfig: StackPluginConfig = { + items: [], + direction: 'horizontal', + verticalPlacement: 'left', + horizontalPlacement: 'top', + spacing: 2, + maxWidth: '100%', + wrap: false, + classNames: [], +} diff --git a/packages/dm-core/src/components/common/Stack/types.ts b/packages/dm-core/src/components/common/Stack/types.ts index fa1e41084..28f5365b4 100644 --- a/packages/dm-core/src/components/common/Stack/types.ts +++ b/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 diff --git a/packages/dm-core/src/types.ts b/packages/dm-core/src/types.ts index 3960f2c17..dba97fe4d 100644 --- a/packages/dm-core/src/types.ts +++ b/packages/dm-core/src/types.ts @@ -225,6 +225,7 @@ export type TViewConfig = { eds_icon?: string roles?: string[] showRefreshButton?: boolean + recipe?: string } export type TReferenceViewConfig = TViewConfig & { From f8642210f6a8de94833bc380bb62483ae221991c Mon Sep 17 00:00:00 2001 From: Andrea Vesterhus Date: Wed, 7 Feb 2024 12:54:49 +0100 Subject: [PATCH 2/7] fix: correct max-width usage --- packages/dm-core-plugins/src/stack/StackPlugin.tsx | 1 + packages/dm-core-plugins/src/stack/types.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/dm-core-plugins/src/stack/StackPlugin.tsx b/packages/dm-core-plugins/src/stack/StackPlugin.tsx index d36cfc5db..b1567c66d 100644 --- a/packages/dm-core-plugins/src/stack/StackPlugin.tsx +++ b/packages/dm-core-plugins/src/stack/StackPlugin.tsx @@ -32,6 +32,7 @@ export const StackPlugin = (props: IUIPlugin) => { className: config.classNames?.join(' '), spacing: config.spacing !== undefined ? config.spacing : 1.5, wrap: config.wrap ? 'wrap' : 'no-wrap', + style: { maxWidth: config.maxWidth }, } return ( diff --git a/packages/dm-core-plugins/src/stack/types.ts b/packages/dm-core-plugins/src/stack/types.ts index e30445c62..de28ee9d2 100644 --- a/packages/dm-core-plugins/src/stack/types.ts +++ b/packages/dm-core-plugins/src/stack/types.ts @@ -17,7 +17,7 @@ export const defaultConfig: StackPluginConfig = { verticalPlacement: 'left', horizontalPlacement: 'top', spacing: 2, - maxWidth: '100%', + maxWidth: 'none', wrap: false, classNames: [], } From 641924c542e30903ac172f25811edbf04fb1d41e Mon Sep 17 00:00:00 2001 From: Andrea Vesterhus Date: Wed, 7 Feb 2024 13:05:49 +0100 Subject: [PATCH 3/7] fix: allow recipe as object in TViewConfig --- packages/dm-core/src/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dm-core/src/types.ts b/packages/dm-core/src/types.ts index dba97fe4d..714bbd2c8 100644 --- a/packages/dm-core/src/types.ts +++ b/packages/dm-core/src/types.ts @@ -225,7 +225,7 @@ export type TViewConfig = { eds_icon?: string roles?: string[] showRefreshButton?: boolean - recipe?: string + recipe?: string | TUiRecipe } export type TReferenceViewConfig = TViewConfig & { From adcfa34a3a19b91b003cb76268a04e91062044f3 Mon Sep 17 00:00:00 2001 From: Andrea Vesterhus Date: Thu, 8 Feb 2024 10:15:25 +0100 Subject: [PATCH 4/7] fix: correct directions --- packages/dm-core-plugins/src/stack/StackPlugin.tsx | 10 +++++----- packages/dm-core-plugins/src/stack/types.ts | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/dm-core-plugins/src/stack/StackPlugin.tsx b/packages/dm-core-plugins/src/stack/StackPlugin.tsx index b1567c66d..6aee14d64 100644 --- a/packages/dm-core-plugins/src/stack/StackPlugin.tsx +++ b/packages/dm-core-plugins/src/stack/StackPlugin.tsx @@ -11,11 +11,11 @@ export const StackPlugin = (props: IUIPlugin) => { // map plugin language to stack props/css language const configMap: { [name: string]: string } = { - horizontal: 'column', - vertical: 'row', - verticalPlacement: - config.direction === 'horizontal' ? 'alignItems' : 'justifyContent', + vertical: 'column', + horizontal: 'row', horizontalPlacement: + config.direction === 'horizontal' ? 'alignItems' : 'justifyContent', + verticalPlacement: config.direction === 'horizontal' ? 'justifyContent' : 'alignItems', left: 'flex-start', center: 'center', @@ -30,7 +30,7 @@ export const StackPlugin = (props: IUIPlugin) => { [configMap.verticalPlacement]: configMap[config.verticalPlacement], [configMap.horizontalPlacement]: configMap[config.horizontalPlacement], className: config.classNames?.join(' '), - spacing: config.spacing !== undefined ? config.spacing : 1.5, + spacing: config.spacing, wrap: config.wrap ? 'wrap' : 'no-wrap', style: { maxWidth: config.maxWidth }, } diff --git a/packages/dm-core-plugins/src/stack/types.ts b/packages/dm-core-plugins/src/stack/types.ts index de28ee9d2..6b46cb94d 100644 --- a/packages/dm-core-plugins/src/stack/types.ts +++ b/packages/dm-core-plugins/src/stack/types.ts @@ -3,8 +3,8 @@ import { TViewConfig } from '@development-framework/dm-core' export type StackPluginConfig = { items: TViewConfig[] direction: 'horizontal' | 'vertical' - verticalPlacement: 'left' | 'center' | 'right' | 'spaceItems' - horizontalPlacement: 'top' | 'center' | 'bottom' + horizontalPlacement: 'left' | 'center' | 'right' | 'spaceItems' + verticalPlacement: 'top' | 'center' | 'bottom' spacing: number maxWidth: string wrap: boolean @@ -13,9 +13,9 @@ export type StackPluginConfig = { export const defaultConfig: StackPluginConfig = { items: [], - direction: 'horizontal', - verticalPlacement: 'left', - horizontalPlacement: 'top', + direction: 'vertical', + horizontalPlacement: 'left', + verticalPlacement: 'top', spacing: 2, maxWidth: 'none', wrap: false, From eb129ac9ea190a2069451b4dff28d8d3fa0dfe16 Mon Sep 17 00:00:00 2001 From: Andrea Vesterhus Date: Thu, 8 Feb 2024 10:17:03 +0100 Subject: [PATCH 5/7] fix: correct directions in blueprint --- .../dm-core-plugins/blueprints/stack/StackPluginConfig.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json b/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json index 32a6cded4..894971fdb 100644 --- a/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json +++ b/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json @@ -19,10 +19,10 @@ "description": "horizontal or vertical", "attributeType": "string", "optional": true, - "default": "horizontal" + "default": "vertical" }, { - "name": "verticalPlacement", + "name": "horizontalPlacement", "type": "CORE:BlueprintAttribute", "description": "left, center, right or spaceItems", "attributeType": "string", @@ -30,7 +30,7 @@ "default": "left" }, { - "name": "horizontalPlacement", + "name": "verticalPlacement", "type": "CORE:BlueprintAttribute", "description": "top, center or bottom", "attributeType": "string", From 34decd6b544a53422e14f061c403e42b5f7f724c Mon Sep 17 00:00:00 2001 From: Andrea Vesterhus Date: Thu, 8 Feb 2024 10:37:13 +0100 Subject: [PATCH 6/7] fix: wrond direction in description --- .../dm-core-plugins/blueprints/stack/StackPluginConfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json b/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json index 894971fdb..ab86da451 100644 --- a/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json +++ b/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json @@ -55,7 +55,7 @@ { "name": "wrapItems", "type": "CORE:BlueprintAttribute", - "description": "When using vertical 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 eachother when width is getting too small to fit all items", "attributeType": "boolean", "optional": true, "default": false From b4e79774780aa1fdd8b91458fac2e6a0da5c2ee9 Mon Sep 17 00:00:00 2001 From: Andrea Vesterhus Date: Thu, 8 Feb 2024 12:23:00 +0100 Subject: [PATCH 7/7] refactor: spaceItems -> spaceEvenly --- .../dm-core-plugins/blueprints/stack/StackPluginConfig.json | 2 +- packages/dm-core-plugins/src/stack/StackPlugin.tsx | 2 +- packages/dm-core-plugins/src/stack/types.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json b/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json index ab86da451..ba4d6571e 100644 --- a/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json +++ b/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json @@ -24,7 +24,7 @@ { "name": "horizontalPlacement", "type": "CORE:BlueprintAttribute", - "description": "left, center, right or spaceItems", + "description": "left, center, right or spaceEvenly", "attributeType": "string", "optional": true, "default": "left" diff --git a/packages/dm-core-plugins/src/stack/StackPlugin.tsx b/packages/dm-core-plugins/src/stack/StackPlugin.tsx index 6aee14d64..b1a75fe7f 100644 --- a/packages/dm-core-plugins/src/stack/StackPlugin.tsx +++ b/packages/dm-core-plugins/src/stack/StackPlugin.tsx @@ -22,7 +22,7 @@ export const StackPlugin = (props: IUIPlugin) => { right: 'flex-end', top: 'flex-start', bottom: 'flex-end', - spaceItems: 'space-between', + spaceEvenly: 'space-between', } const stackProps: StackProps = { diff --git a/packages/dm-core-plugins/src/stack/types.ts b/packages/dm-core-plugins/src/stack/types.ts index 6b46cb94d..c941ee32e 100644 --- a/packages/dm-core-plugins/src/stack/types.ts +++ b/packages/dm-core-plugins/src/stack/types.ts @@ -3,7 +3,7 @@ import { TViewConfig } from '@development-framework/dm-core' export type StackPluginConfig = { items: TViewConfig[] direction: 'horizontal' | 'vertical' - horizontalPlacement: 'left' | 'center' | 'right' | 'spaceItems' + horizontalPlacement: 'left' | 'center' | 'right' | 'spaceEvenly' verticalPlacement: 'top' | 'center' | 'bottom' spacing: number maxWidth: string