packages/ui: add Flex

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>
   );
 }

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>
   );
 }

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>
   );
 }

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)}
+`;