feat: Add css utilities to Box, Stack and Group components

packages/webapp/src/components/Layout/Box/Box.tsx

@@ -1,13 +1,15 @@
 import React, { forwardRef, Ref } from 'react';
 import { HTMLDivProps, Props } from '@blueprintjs/core';
+import { SystemProps, x } from '@xstyled/emotion';
 
-export interface BoxProps extends Props, HTMLDivProps {
+export interface BoxProps
-  className?: string;
+  extends SystemProps,
-}
+    Props,
+    Omit<HTMLDivProps, 'color'> {}
 
 export const Box = forwardRef(
   ({ className, ...rest }: BoxProps, ref: Ref<HTMLDivElement>) => {
-    const Element = 'div';
+    const Element = x.div;
 
     return <Element className={className} ref={ref} {...rest} />;
   },

packages/webapp/src/components/Layout/Group/Group.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import { SystemProps } from '@xstyled/emotion';
 import { Box } from '../Box';
 import { filterFalsyChildren } from './_utils';
 
@@ -12,7 +12,9 @@ export const GROUP_POSITIONS = {
   apart: 'space-between',
 };
 
-export interface GroupProps extends React.ComponentPropsWithoutRef<'div'> {
+export interface GroupProps
+  extends SystemProps,
+    Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
   /** Defines justify-content property */
   position?: GroupPosition;
 
@@ -27,34 +29,30 @@ export interface GroupProps extends React.ComponentPropsWithoutRef<'div'> {
 
   /** Defines align-items css property */
   align?: React.CSSProperties['alignItems'];
-
-  flex?: React.CSSProperties['flex'];
 }
 
-const defaultProps: Partial<GroupProps> = {
+export function Group({
-  position: 'left',
+  position = 'left',
-  spacing: 20,
+  spacing = 20,
-  flex: 'none'
+  align = 'center',
-};
+  noWrap,
-
+  children,
-export function Group({ children, ...props }: GroupProps) {
+  ...props
-  const groupProps = {
+}: GroupProps) {
-    ...defaultProps,
-    ...props,
-  };
   const filteredChildren = filterFalsyChildren(children);
 
-  return <GroupStyled {...groupProps}>{filteredChildren}</GroupStyled>;
+  return (
+    <Box
+      boxSizing={'border-box'}
+      display={'flex'}
+      flexDirection={'row'}
+      alignItems={align}
+      flexWrap={noWrap ? 'nowrap' : 'wrap'}
+      justifyContent={GROUP_POSITIONS[position]}
+      gap={`${spacing}px`}
+      {...props}
+    >
+      {filteredChildren}
+    </Box>
+  );
 }
-
-const GroupStyled = styled(Box)`
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  flex: ${(props: GroupProps) => (props.flex)};
-  align-items: ${(props: GroupProps) => (props.align || 'center')};
-  flex-wrap: ${(props: GroupProps) => (props.noWrap ? 'nowrap' : 'wrap')};
-  justify-content: ${(props: GroupProps) =>
-    GROUP_POSITIONS[props.position || 'left']};
-  gap: ${(props: GroupProps) => props.spacing}px;
-`;

packages/webapp/src/components/Layout/Stack/Stack.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import styled from 'styled-components';
+import { x, SystemProps } from '@xstyled/emotion';
-import { Box } from '../Box';
 
-export interface StackProps extends React.ComponentPropsWithoutRef<'div'> {
+export interface StackProps
+  extends SystemProps,
+    Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
   /** Key of theme.spacing or number to set gap in px */
   spacing?: number;
 
@@ -11,30 +12,22 @@ export interface StackProps extends React.ComponentPropsWithoutRef<'div'> {
 
   /** justify-content CSS property */
   justify?: React.CSSProperties['justifyContent'];
-
-  flex?: React.CSSProperties['flex'];
 }
 
-const defaultProps: Partial<StackProps> = {
+export function Stack({
-  spacing: 20,
+  spacing = 20,
-  align: 'stretch',
+  align = 'stretch',
-  justify: 'top',
+  justify = 'top',
-  flex: 'none',
+  ...restProps
-};
+}: StackProps) {
-
+  return (
-export function Stack(props: StackProps) {
+    <x.div
-  const stackProps = {
+      display={'flex'}
-    ...defaultProps,
+      flexDirection="column"
-    ...props,
+      justifyContent="justify"
-  };
+      gap={`${spacing}px`}
-  return <StackStyled {...stackProps} />;
+      alignItems={align}
+      {...restProps}
+    />
+  );
 }
-
-const StackStyled = styled(Box)`
-  display: flex;
-  flex-direction: column;
-  align-items: ${(props: StackProps) => props.align};
-  justify-content: justify;
-  gap: ${(props: StackProps) => props.spacing}px;
-  flex: ${(props: StackProps) => props.flex};
-`;

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.tsx

@@ -1,10 +1,7 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
-import styled from 'styled-components';
 
-import { CLASSES } from '@/constants/classes';
+import { Row, Col, Paper, Stack } from '@/components';
-import { Row, Col, Paper } from '@/components';
 import { CreditNoteFormFooterLeft } from './CreditNoteFormFooterLeft';
 import { CreditNoteFormFooterRight } from './CreditNoteFormFooterRight';
 import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';
@@ -14,8 +11,8 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
  */
 export default function CreditNoteFormFooter() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+    <Stack mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
-      <CreditNoteFooterPaper>
+      <Paper p={'20px'}>
         <Row>
           <Col md={8}>
             <CreditNoteFormFooterLeft />
@@ -26,10 +23,7 @@ export default function CreditNoteFormFooter() {
             <CreditNoteFormFooterRight />
           </Col>
         </Row>
-      </CreditNoteFooterPaper>
+      </Paper>
-    </div>
+    </Stack>
   );
 }
-const CreditNoteFooterPaper = styled(Paper)`
-  padding: 20px;
-`;

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx

@@ -1,23 +1,28 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
 import { useFormikContext } from 'formik';
-import { CLASSES } from '@/constants/classes';
 import CreditNoteFormHeaderFields from './CreditNoteFormHeaderFields';
 
 import { getEntriesTotal } from '@/containers/Entries/utils';
-import { PageFormBigNumber } from '@/components';
+import { Group, PageFormBigNumber } from '@/components';
 
 /**
  * Credit note header.
  */
 function CreditNoteFormHeader() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+    <Group
+      position="apart"
+      align={'flex-start'}
+      display="flex"
+      bg="white"
+      p="25px 32px"
+      borderBottom="1px solid #d2dce2"
+    >
       <CreditNoteFormHeaderFields />
       <CreditNoteFormBigNumber />
-    </div>
+    </Group>
   );
 }
 

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteItemsEntriesEditorField.tsx

@@ -1,11 +1,10 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
 import { FastField } from 'formik';
-import { CLASSES } from '@/constants/classes';
 import ItemsEntriesTable from '@/containers/Entries/ItemsEntriesTable';
 import { useCreditNoteFormContext } from './CreditNoteFormProvider';
 import { entriesFieldShouldUpdate } from './utils';
+import { Box } from '@/components';
 
 /**
  * Credit note items entries editor field.
@@ -14,7 +13,7 @@ export default function CreditNoteItemsEntriesEditorField() {
   const { items } = useCreditNoteFormContext();
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+    <Box p="18px 32px 0">
       <FastField
         name={'entries'}
         items={items}
@@ -38,6 +37,6 @@ export default function CreditNoteItemsEntriesEditorField() {
           />
         )}
       </FastField>
-    </div>
+    </Box>
   );
 }

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx

@@ -6,20 +6,21 @@ import { x } from '@xstyled/emotion';
 
 import EstimateFormHeaderFields from './EstimateFormHeaderFields';
 import { getEntriesTotal } from '@/containers/Entries/utils';
-import { PageFormBigNumber } from '@/components';
+import { Group, PageFormBigNumber } from '@/components';
 
 // Estimate form top header.
 function EstimateFormHeader() {
   return (
-    <x.div
+    <Group
-      display="flex"
+      position="apart"
+      align={'flex-start'}
       bg="white"
       p="25px 32px"
       borderBottom="1px solid #d2dce2"
     >
       <EstimateFormHeaderFields />
       <EstimateFormBigTotal />
-    </x.div>
+    </Group>
   );
 }
 

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateItemsEntriesField.tsx

@@ -1,8 +1,7 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
+import { x } from '@xstyled/emotion';
 import { FastField } from 'formik';
-import { CLASSES } from '@/constants/classes';
 import ItemsEntriesTable from '@/containers/Entries/ItemsEntriesTable';
 import { useEstimateFormContext } from './EstimateFormProvider';
 import { entriesFieldShouldUpdate } from './utils';
@@ -14,7 +13,7 @@ export default function EstimateFormItemsEntriesField() {
   const { items } = useEstimateFormContext();
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+    <x.div p="18px 32px 0">
       <FastField
         name={'entries'}
         items={items}
@@ -38,6 +37,6 @@ export default function EstimateFormItemsEntriesField() {
           />
         )}
       </FastField>
-    </div>
+    </x.div>
   );
 }

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx

@@ -2,10 +2,8 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { useFormikContext } from 'formik';
-import { x } from '@xstyled/emotion';
+import { Group, PageFormBigNumber } from '@/components';
-
 import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
-import { PageFormBigNumber } from '@/components';
 import { useInvoiceDueAmount } from './utils';
 
 /**
@@ -13,15 +11,16 @@ import { useInvoiceDueAmount } from './utils';
  */
 function InvoiceFormHeader() {
   return (
-    <x.div
+    <Group
-      display="flex"
+      position="apart"
+      align={'flex-start'}
       bg="white"
       p="25px 32px"
       borderBottom="1px solid #d2dce2"
     >
       <InvoiceFormHeaderFields />
       <InvoiceFormBigTotal />
-    </x.div>
+    </Group>
   );
 }
 

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormBody.tsx

@@ -2,15 +2,14 @@
 import React from 'react';
 import { FastField } from 'formik';
 import PaymentReceiveItemsTable from './PaymentReceiveItemsTable';
-import classNames from 'classnames';
+import { Box } from '@/components';
-import { CLASSES } from '@/constants/classes';
 
 /**
  * Payment Receive form body.
  */
 export default function PaymentReceiveFormBody() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+    <Box p="18px 32px 0">
       <FastField name={'entries'}>
         {({ form: { values, setFieldValue }, field: { value } }) => (
           <PaymentReceiveItemsTable
@@ -22,6 +21,6 @@ export default function PaymentReceiveFormBody() {
           />
         )}
       </FastField>
-    </div>
+    </Box>
   );
 }

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFooter.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { x } from '@xstyled/emotion';
 
-import { Row, Col, Paper } from '@/components';
+import { Row, Col, Paper, Box } from '@/components';
 import { PaymentReceiveFormFootetLeft } from './PaymentReceiveFormFootetLeft';
 import { PaymentReceiveFormFootetRight } from './PaymentReceiveFormFootetRight';
 import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';
@@ -12,7 +12,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
  */
 export default function PaymentReceiveFormFooter() {
   return (
-    <x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
+    <Box mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
       <Paper p={'20px'}>
         <Row>
           <Col md={8}>
@@ -25,6 +25,6 @@ export default function PaymentReceiveFormFooter() {
           </Col>
         </Row>
       </Paper>
-    </x.div>
+    </Box>
   );
 }

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { sumBy } from 'lodash';
 import { useFormikContext } from 'formik';
-import { Money } from '@/components';
+import { Group, Money } from '@/components';
 import { FormattedMessage as T } from '@/components';
 
 import { CLASSES } from '@/constants/classes';
@@ -14,12 +14,16 @@ import PaymentReceiveHeaderFields from './PaymentReceiveHeaderFields';
  */
 function PaymentReceiveFormHeader() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+    <Group
-      <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+      position="apart"
-        <PaymentReceiveHeaderFields />
+      align={'flex-start'}
-        <PaymentReceiveFormBigTotal />
+      bg="white"
-      </div>
+      p="25px 32px"
-    </div>
+      borderBottom="1px solid #d2dce2"
+    >
+      <PaymentReceiveHeaderFields />
+      <PaymentReceiveFormBigTotal />
+    </Group>
   );
 }
 

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormPage.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import { css } from '@xstyled/emotion';
+import { css } from '@emotion/css';
 import {
   PaymentReceiveFormProvider,
   usePaymentReceiveFormContext,

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx

@@ -16,7 +16,7 @@ import { useReceiptFormContext } from './ReceiptFormProvider';
 import ReceiptFromHeader from './ReceiptFormHeader';
 import ReceiptItemsEntriesEditor from './ReceiptItemsEntriesEditor';
 import ReceiptFormFloatingActions from './ReceiptFormFloatingActions';
-import ReceiptFormFooter from './ReceiptFormFooter';
+import { ReceiptFormFooter } from './ReceiptFormFooter';
 import ReceiptFormDialogs from './ReceiptFormDialogs';
 import ReceiptFormTopBar from './ReceiptFormTopbar';
 
@@ -162,7 +162,7 @@ function ReceiptFormRoot({
           overflow: 'hidden',
           display: 'flex',
           flexDirection: 'column',
-          flex: 1
+          flex: 1,
         })}
       >
         <PageForm flex={1}>

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.tsx

@@ -1,18 +1,15 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
+import { x } from '@xstyled/emotion';
-import styled from 'styled-components';
-
-import { CLASSES } from '@/constants/classes';
 import { Paper, Row, Col } from '@/components';
 import { ReceiptFormFooterLeft } from './ReceiptFormFooterLeft';
 import { ReceiptFormFooterRight } from './ReceiptFormFooterRight';
 import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';
 
-export default function ReceiptFormFooter({}) {
+export function ReceiptFormFooter({}) {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+    <x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
-      <ReceiptFooterPaper>
+      <Paper p={'20px'}>
         <Row>
           <Col md={8}>
             <ReceiptFormFooterLeft />
@@ -23,11 +20,7 @@ export default function ReceiptFormFooter({}) {
             <ReceiptFormFooterRight />
           </Col>
         </Row>
-      </ReceiptFooterPaper>
+      </Paper>
-    </div>
+    </x.div>
   );
 }
-
-const ReceiptFooterPaper = styled(Paper)`
-  padding: 20px;
-`;

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx

@@ -1,13 +1,9 @@
 // @ts-nocheck
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
 import { useFormikContext } from 'formik';
-
+import { Group, PageFormBigNumber } from '@/components';
-import { CLASSES } from '@/constants/classes';
-import { PageFormBigNumber } from '@/components';
 import ReceiptFormHeaderFields from './ReceiptFormHeaderFields';
-
 import { getEntriesTotal } from '@/containers/Entries/utils';
 
 /**
@@ -18,12 +14,18 @@ function ReceiptFormHeader({
   onReceiptNumberChanged,
 }) {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+    <Group
+      position="apart"
+      align={'flex-start'}
+      display="flex"
+      bg="white"
+      p="25px 32px"
+    >
       <ReceiptFormHeaderFields
         onReceiptNumberChanged={onReceiptNumberChanged}
       />
       <ReceiptFormHeaderBigTotal />
-    </div>
+    </Group>
   );
 }
 

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormPage.tsx

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import { useParams } from 'react-router-dom';
+import { css } from '@emotion/css';
 
 import {
   ReceiptFormProvider,
@@ -30,7 +31,13 @@ function ReceiptFormPageContent() {
   const { isBootLoading } = useReceiptFormContext();
 
   return (
-    <DashboardInsider loading={isBootLoading}>
+    <DashboardInsider
+      loading={isBootLoading}
+      className={css`
+        min-height: calc(100vh - var(--top-offset));
+        max-height: calc(100vh - var(--top-offset));
+      `}
+    >
       <ReceiptForm />
     </DashboardInsider>
   );

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptItemsEntriesEditor.tsx

@@ -1,8 +1,7 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
+import { x } from '@xstyled/emotion';
 import { FastField } from 'formik';
-import { CLASSES } from '@/constants/classes';
 import ItemsEntriesTable from '@/containers/Entries/ItemsEntriesTable';
 import { useReceiptFormContext } from './ReceiptFormProvider';
 import { entriesFieldShouldUpdate } from './utils';
@@ -11,8 +10,12 @@ export default function ReceiptItemsEntriesEditor({ defaultReceipt }) {
   const { items } = useReceiptFormContext();
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+    <x.div p="18px 32px 0">
-      <FastField name={'entries'} items={items} shouldUpdate={entriesFieldShouldUpdate}>
+      <FastField
+        name={'entries'}
+        items={items}
+        shouldUpdate={entriesFieldShouldUpdate}
+      >
         {({
           form: { values, setFieldValue },
           field: { value },
@@ -31,6 +34,6 @@ export default function ReceiptItemsEntriesEditor({ defaultReceipt }) {
           />
         )}
       </FastField>
-    </div>
+    </x.div>
   );
 }