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..ba4d6571e --- /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": "vertical" + }, + { + "name": "horizontalPlacement", + "type": "CORE:BlueprintAttribute", + "description": "left, center, right or spaceEvenly", + "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 + } + ] +} 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..b1a75fe7f --- /dev/null +++ b/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', + spaceEvenly: '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 ( + + {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..c941ee32e --- /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' + horizontalPlacement: 'left' | 'center' | 'right' | 'spaceEvenly' + 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: [], +} 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..714bbd2c8 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 | TUiRecipe } export type TReferenceViewConfig = TViewConfig & {