refactor: responsive grid rewrite + remove react-grid-system package

example/app/data/DemoDataSource/recipes/plugins/responsive_grid/example/dashboard.recipe.json

@@ -6,55 +6,45 @@
     "type": "CORE:UiRecipe",
     "config": {
       "type": "PLUGINS:dm-core-plugins/responsive_grid/ResponsiveGridPluginConfig",
-      "rows": [
+      "views": [
         {
-          "type": "PLUGINS:dm-core-plugins/responsive_grid/RowItem",
-          "columns": [
-            {
-              "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnItem",
-              "viewConfig": {
-                "type": "CORE:ReferenceViewConfig",
-                "recipe": "aRecipeName",
-                "scope": "aNestedObjectWithCustomUI"
-              },
-              "size": {
-                "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize",
-                "sm": 12,
-                "md": 4
-              }
-            },
-            {
-              "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnItem",
-              "viewConfig": {
-                "type": "CORE:ReferenceViewConfig",
-                "recipe": "aRecipeName",
-                "scope": "aNestedObjectWithCustomUI"
-              },
-              "size": {
-                "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize",
-                "sm": 12,
-                "md": 4
-              }
-            }
-          ]
+          "type": "PLUGINS:dm-core-plugins/responsive_grid/GridItem",
+          "viewConfig": {
+            "type": "CORE:ReferenceViewConfig",
+            "recipe": "aRecipeName",
+            "scope": "aNestedObjectWithCustomUI"
+          },
+          "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:ReferenceViewConfig",
-                "recipe": "aRecipeName",
-                "scope": "aNestedObjectWithCustomUI"
-              },
-              "size": {
-                "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize",
-                "sm": 12,
-                "md": 4
-              }
-            }
-          ]
+          "type": "PLUGINS:dm-core-plugins/responsive_grid/GridItem",
+          "viewConfig": {
+            "type": "CORE:ReferenceViewConfig",
+            "recipe": "aRecipeName",
+            "scope": "aNestedObjectWithCustomUI"
+          },
+          "size": {
+            "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize",
+            "sm": 12,
+            "md": 4
+          }
+        },
+        {
+          "type": "PLUGINS:dm-core-plugins/responsive_grid/GridItem",
+          "viewConfig": {
+            "type": "CORE:ReferenceViewConfig",
+            "recipe": "aRecipeName",
+            "scope": "aNestedObjectWithCustomUI"
+          },
+          "size": {
+            "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize",
+            "sm": 12,
+            "md": 4
+          }
         }
       ]
     },

packages/dm-core-plugins/blueprints/responsive_grid/ColumnItem.json

@@ -1,5 +1,5 @@
 {
-  "name": "ColumnItem",
+  "name": "GridItem",
   "type": "dmss://system/SIMOS/Blueprint",
   "attributes": [
     {

packages/dm-core-plugins/blueprints/responsive_grid/ResponsiveGridPluginConfig.json

@@ -8,17 +8,17 @@
       "attributeType": "string"
     },
     {
-      "name": "showItemBorders",
+      "name": "views",
       "type": "CORE:BlueprintAttribute",
-      "attributeType": "boolean",
-      "default": false,
-      "optional": true
+      "attributeType": "PLUGINS:dm-core-plugins/responsive_grid/GridItem",
+      "dimensions": "*"
     },
     {
-      "name": "rows",
+      "name": "spacing",
       "type": "CORE:BlueprintAttribute",
-      "attributeType": "PLUGINS:dm-core-plugins/responsive_grid/RowItem",
-      "dimensions": "*"
+      "attributeType": "number",
+      "default": 1,
+      "optional": true
     }
   ]
 }

packages/dm-core-plugins/package.json

@@ -20,8 +20,7 @@
     "react-hook-form": "^7.48.2",
     "react-toastify": "^9.1.3",
     "ts-node": "^10.9.1",
-    "yaml": "^2.3.2",
-    "react-grid-system": "^8.1.9"
+    "yaml": "^2.3.2"
   },
   "devDependencies": {
     "@biomejs/biome": "1.4.1",

packages/dm-core-plugins/src/grid/GridPlugin.tsx

@@ -52,7 +52,10 @@ export const GridPlugin = (
   }
 
   return (
-    <Grid className='dm-parent-plugin' {...internalConfig.size}>
+    <Grid
+      className='dm-plugin-padding dm-parent-plugin'
+      {...internalConfig.size}
+    >
       <GridItems
         idReference={idReference}
         items={internalConfig.items}

packages/dm-core-plugins/src/responsive_grid/ResponsiveGridPlugin.tsx

@@ -1,45 +1,37 @@
 import { IUIPlugin, ViewCreator } from '@development-framework/dm-core'
 import { Typography } from '@equinor/eds-core-react'
 import React from 'react'
-import { Col, Container, Row } from 'react-grid-system'
-import { TCol, TGridPluginConfig, TRow } from './types'
-
-const defaultConfig: TGridPluginConfig = {
-  rows: [],
-}
+import * as Styled from './styles'
+import { TCol, TGridPluginConfig, defaultConfig } from './types'
 
 export const ResponsiveGridPlugin = (
   props: IUIPlugin & { config: TGridPluginConfig }
 ): React.ReactElement => {
-  const { config, idReference, type, onSubmit, onChange } = props
+  const { config, idReference, onSubmit, onChange } = props
 
   const internalConfig: TGridPluginConfig = {
     ...defaultConfig,
     ...config,
   }
 
   return (
-    <Container style={{ width: '100%' }}>
-      {internalConfig.rows.map((row: TRow) => {
-        const columns = row.columns.map((col: TCol) => {
-          return (
-            <Col {...col.size}>
-              <div style={{ marginBottom: '20px' }}>
-                {col?.title && (
-                  <Typography variant='h4'>{col.title}</Typography>
-                )}
-                <ViewCreator
-                  idReference={idReference}
-                  viewConfig={col.viewConfig}
-                  onSubmit={onSubmit}
-                  onChange={onChange}
-                />
-              </div>
-            </Col>
-          )
-        })
-        return <Row gutterWidth={row.gutterWidth || 30}>{columns}</Row>
+    <Styled.Grid
+      className='dm-plugin-padding dm-parent-plugin'
+      spacing={internalConfig.spacing}
+    >
+      {internalConfig.views.map((col: TCol) => {
+        return (
+          <Styled.GridItem size={col.size}>
+            {col?.title && <Typography variant='h4'>{col.title}</Typography>}
+            <ViewCreator
+              idReference={idReference}
+              viewConfig={col.viewConfig}
+              onSubmit={onSubmit}
+              onChange={onChange}
+            />
+          </Styled.GridItem>
+        )
       })}
-    </Container>
+    </Styled.Grid>
   )
 }

packages/dm-core-plugins/src/responsive_grid/styles.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+import { TBreakpoint, TBreakpoints, breakpoints } from './types'
+
+const createSpacingStyles = (spacing: TBreakpoints) =>
+  Object.entries(spacing)
+    .filter((bp) => bp[0] !== 'type')
+    .map(
+      (bp) => `
+        @media (min-width: ${breakpoints[bp[0] as TBreakpoint]}px) {
+            gap: ${bp[1]}rem;
+        }
+    `
+    )
+    .join('')
+
+const createGridItemColumnSizes = (sizes: TBreakpoints) =>
+  Object.entries(sizes)
+    .filter((bp) => bp[0] !== 'type')
+    .map(
+      (bp) => `
+            @media (min-width: ${breakpoints[bp[0] as TBreakpoint]}px) {
+                grid-column: span ${bp[1]};
+            }
+        `
+    )
+    .join('')
+
+export const Grid = styled.div<{ spacing?: TBreakpoints }>`
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  width: 100%;
+  gap: 1rem;
+  ${({ spacing }) => (spacing ? createSpacingStyles(spacing) : '')}
+`
+
+export const GridItem = styled.div<{ size: TBreakpoints }>`
+    grid-column: span 12;
+    ${({ size }) => createGridItemColumnSizes(size)}
+`

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

@@ -1,32 +1,28 @@
 import { TViewConfig } from '@development-framework/dm-core'
 
-export type TColSize = {
-  xs: number
-  sm: number
-  md: number
-  lg: number
-  xl: number
-  xxl: number
+export type TBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+export type TBreakpoints = Record<TBreakpoint, number>
+
+export const breakpoints: TBreakpoints = {
+  xs: 576,
+  sm: 768,
+  md: 992,
+  lg: 1200,
+  xl: 1600,
+  xxl: 1920,
 }
 
 export type TCol = {
   viewConfig: TViewConfig
-  size: TColSize
+  size: TBreakpoints
   title?: string
 }
 
-export type TRow = {
-  columns: TCol[]
-  gutterWidth: number
-}
-
 export type TGridPluginConfig = {
-  rows: TRow[]
+  views: TCol[]
+  spacing?: TBreakpoints
 }
 
-export type TItemBorder = {
-  size: string
-  style: string
-  color: string
-  radius: string
+export const defaultConfig: TGridPluginConfig = {
+  views: [],
 }