apps/web: use grid in render-rows.tsx

apps/web/Components/Calculation/lib/render-rows.tsx

@@ -3,13 +3,10 @@ import elementsRender from '../config/elements-render';
 import type { Elements as ActionElements } from '../config/map/actions';
 import type { Elements as ValuesElements } from '../config/map/values';
 import { Divider } from 'ui/elements';
-import type { BoxProps } from 'ui/grid';
-import { Box } from 'ui/grid';
+import type { GridProps } from 'ui/grid';
+import { Grid } from 'ui/grid';
 
-export type ElementsRow = [
-  elements: Array<ActionElements | ValuesElements>,
-  style?: BoxProps['sx']
-];
+export type ElementsRow = [elements: Array<ActionElements | ValuesElements>, style?: GridProps];
 type DividerRow = { title: string };
 
 export type FormTabRows = Array<DividerRow | ElementsRow>;
@@ -19,23 +16,20 @@ function renderFormRows(rowsConfig: FormTabRows) {
     if (Array.isArray(row)) {
       const [elements, style] = row;
       const renderedElements = elements.map((elementName) => {
-        const render = elementsRender[elementName]?.render;
+        const Render = elementsRender[elementName]?.render;
 
-        return render({});
+        return <Render key={elementName} />;
       });
 
       return (
-        <Box
+        <Grid
           key={i.toString()}
-          sx={{
-            display: 'grid',
-            gap: '10px',
-            gridTemplateColumns: ['1fr', '1fr', 'repeat(3, 1fr)'],
-            ...style,
-          }}
+          gap="10px"
+          gridTemplateColumns={['1fr', '1fr', 'repeat(3, 1fr)']}
+          {...style}
         >
           {renderedElements}
-        </Box>
+        </Grid>
       );
     }
 
@@ -44,16 +38,7 @@ function renderFormRows(rowsConfig: FormTabRows) {
     return <Divider key={i.toString()}>{title}</Divider>;
   });
 
-  return (
-    <Box
-      sx={{
-        display: 'grid',
-        gridAutoRows: 'auto',
-      }}
-    >
-      {rows}
-    </Box>
-  );
+  return <Grid gridAutoRows="auto">{rows}</Grid>;
 }
 
 export default renderFormRows;

packages/ui/grid.ts

@@ -1,5 +1,6 @@
 import type { Theme } from './utils';
 import { getStyles } from './utils';
+import type { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
 export type { BoxProps, FlexProps } from 'rebass/styled-components';
@@ -9,7 +10,33 @@ type WithArrayType<T> = {
   [K in keyof T]: Array<T[K]> | T[K];
 };
 
-export type GridProps = WithArrayType<HTMLDivElement['style']>;
+type GridSelectedProps = Pick<
+  HTMLDivElement['style'],
+  | 'alignItems'
+  | 'columnGap'
+  | 'gap'
+  | 'grid'
+  | 'gridArea'
+  | 'gridAutoColumns'
+  | 'gridAutoFlow'
+  | 'gridAutoRows'
+  | 'gridColumn'
+  | 'gridColumnEnd'
+  | 'gridColumnStart'
+  | 'gridRow'
+  | 'gridRowEnd'
+  | 'gridRowStart'
+  | 'gridTemplate'
+  | 'gridTemplateAreas'
+  | 'gridTemplateColumns'
+  | 'gridTemplateRows'
+  | 'justifyContent'
+  | 'justifyItems'
+  | 'placeContent'
+  | 'placeItems'
+  | 'rowGap'
+>;
+export type GridProps = Partial<WithArrayType<GridSelectedProps>> & PropsWithChildren;
 
 export const Grid = styled.div<GridProps>`
   display: grid;

packages/ui/utils.ts

@@ -8,15 +8,18 @@ function min(breakpoint: string, style: string) {
     }`;
 }
 export function getStyles<T>(props: Record<string, T | T[]>, theme: Theme) {
-  const cleanProps = omit(props, ['children']);
+  const cleanProps = omit(props, ['children', 'id', 'key', 'className']);
+
   return (Object.keys(cleanProps) as Array<keyof typeof props>).map((name) => {
     const styleValues = cleanProps[name];
     if (Array.isArray(styleValues)) {
       const [firstStyle, ...values] = styleValues;
+
       return theme.breakpoints
         .map((breakpoint, i) => {
           if (!values[i]) return undefined;
           const style = `${dash(name)}:${values[i]}`;
+
           return min(breakpoint, style);
         })
         .concat([`${dash(name)}:${firstStyle};`])