From a1cce58a38585607d59918164b3346c1a0610e18 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Fri, 1 Dec 2023 14:22:27 +0300
Subject: [PATCH] packages/ui: add Flex

---
 .../Calculation/Form/Insurance/FinGAPTable/index.jsx |  9 ++-------
 .../Form/Insurance/InsuranceTable/index.jsx          |  8 ++------
 .../Form/Payments/PaymentsTable/index.jsx            |  8 ++------
 packages/ui/grid.ts                                  | 12 +++++++++---
 4 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/apps/web/Components/Calculation/Form/Insurance/FinGAPTable/index.jsx b/apps/web/Components/Calculation/Form/Insurance/FinGAPTable/index.jsx
index 00c3bdd..76439c2 100644
--- a/apps/web/Components/Calculation/Form/Insurance/FinGAPTable/index.jsx
+++ b/apps/web/Components/Calculation/Form/Insurance/FinGAPTable/index.jsx
@@ -2,14 +2,9 @@ import { columns } from './config';
 import { useStore } from '@/stores/hooks';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import styled from 'styled-components';
 import { Alert, Table } from 'ui/elements';
 import { Flex } from 'ui/grid';
 
-const Grid = styled(Flex)`
-  flex-direction: column;
-`;
-
 const Validation = observer(() => {
   const { $tables, $process } = useStore();
 
@@ -67,9 +62,9 @@ const FinGAP = observer(() => {
 
 export default function FinGAPTable() {
   return (
-    <Grid>
+    <Flex flexDirection="column">
       <Validation />
       <FinGAP />
-    </Grid>
+    </Flex>
   );
 }
diff --git a/apps/web/Components/Calculation/Form/Insurance/InsuranceTable/index.jsx b/apps/web/Components/Calculation/Form/Insurance/InsuranceTable/index.jsx
index 6f3eab2..a07482d 100644
--- a/apps/web/Components/Calculation/Form/Insurance/InsuranceTable/index.jsx
+++ b/apps/web/Components/Calculation/Form/Insurance/InsuranceTable/index.jsx
@@ -5,10 +5,6 @@ import styled from 'styled-components';
 import { Alert, Table } from 'ui/elements';
 import { Flex } from 'ui/grid';
 
-const Grid = styled(Flex)`
-  flex-direction: column;
-`;
-
 const TableWrapper = styled.div`
   td > * {
     margin: 0;
@@ -55,9 +51,9 @@ const Insurance = observer(() => {
 
 export default function InsuranceTable() {
   return (
-    <Grid>
+    <Flex flexDirection="column">
       <Validation />
       <Insurance />
-    </Grid>
+    </Flex>
   );
 }
diff --git a/apps/web/Components/Calculation/Form/Payments/PaymentsTable/index.jsx b/apps/web/Components/Calculation/Form/Payments/PaymentsTable/index.jsx
index 62014f6..dc7ca4d 100644
--- a/apps/web/Components/Calculation/Form/Payments/PaymentsTable/index.jsx
+++ b/apps/web/Components/Calculation/Form/Payments/PaymentsTable/index.jsx
@@ -9,10 +9,6 @@ import { Alert, Segmented, Table } from 'ui/elements';
 import { Box, Flex } from 'ui/grid';
 import { useDebouncedCallback } from 'use-debounce';
 
-const Grid = styled(Flex)`
-  flex-direction: column;
-`;
-
 const TableWrapper = styled.div`
   td > * {
     margin: 0;
@@ -121,12 +117,12 @@ export default function TablePayments() {
   const debouncedSetMode = useDebouncedCallback(setMode, 300);
 
   return (
-    <Grid>
+    <Flex flexDirection="column">
       <ModeContext.Provider value={mode}>
         <Validation />
         <Mode setMode={debouncedSetMode} />
         <TablesGroup />
       </ModeContext.Provider>
-    </Grid>
+    </Flex>
   );
 }
diff --git a/packages/ui/grid.ts b/packages/ui/grid.ts
index 748b147..7fdaf68 100644
--- a/packages/ui/grid.ts
+++ b/packages/ui/grid.ts
@@ -3,17 +3,23 @@ import { getStyles } from './utils';
 import type { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
-export type { BoxProps, FlexProps } from 'rebass/styled-components';
-export { Box, Flex } from 'rebass/styled-components';
+export type { BoxProps } from 'rebass/styled-components';
+export { Box } from 'rebass/styled-components';
 
 type WithArrayType<T> = {
   [K in keyof T]: Array<T[K]> | T[K];
 };
 
 type AllowedProps = Omit<HTMLDivElement['style'], 'color' | 'translate'>;
-export type GridProps = Partial<WithArrayType<AllowedProps>> & PropsWithChildren;
 
+export type GridProps = Partial<WithArrayType<AllowedProps>> & PropsWithChildren;
 export const Grid = styled.div<GridProps>`
   display: grid;
   ${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
 `;
+
+export type FlexProps = GridProps;
+export const Flex = styled.div<GridProps>`
+  display: flex;
+  ${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
+`;