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

2026-02-16 04:40:32 +00:00 · 2024-10-13 01:06:17 +02:00
parent b7b86bb0c5
commit ddea7be24a
18 changed files with 134 additions and 136 deletions
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.tsx
+++ b/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 } from '@/components';
+import { Row, Col, Paper, Stack } 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)}>
-      <CreditNoteFooterPaper>
+    <Stack mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
+      <Paper p={'20px'}>
        <Row>
          <Col md={8}>
            <CreditNoteFormFooterLeft />
@@ -26,10 +23,7 @@ export default function CreditNoteFormFooter() {
            <CreditNoteFormFooterRight />
          </Col>
        </Row>
-      </CreditNoteFooterPaper>
-    </div>
+      </Paper>
+    </Stack>
  );
 }
-const CreditNoteFooterPaper = styled(Paper)`
-  padding: 20px;
-`;
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx
+++ b/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>
  );
 }

--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteItemsEntriesEditorField.tsx
+++ b/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>
  );
 }
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx
+++ b/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
-      display="flex"
+    <Group
+      position="apart"
+      align={'flex-start'}
      bg="white"
      p="25px 32px"
      borderBottom="1px solid #d2dce2"
    >
      <EstimateFormHeaderFields />
      <EstimateFormBigTotal />
-    </x.div>
+    </Group>
  );
 }

--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateItemsEntriesField.tsx
+++ b/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>
  );
 }
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx
+++ b/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
-      display="flex"
+    <Group
+      position="apart"
+      align={'flex-start'}
      bg="white"
      p="25px 32px"
      borderBottom="1px solid #d2dce2"
    >
      <InvoiceFormHeaderFields />
      <InvoiceFormBigTotal />
-    </x.div>
+    </Group>
  );
 }

--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormBody.tsx
+++ b/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 { CLASSES } from '@/constants/classes';
+import { Box } from '@/components';

 /**
 * 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>
  );
 }
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFooter.tsx
+++ b/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>
  );
 }
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx
+++ b/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)}>
-      <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
-        <PaymentReceiveHeaderFields />
-        <PaymentReceiveFormBigTotal />
-      </div>
-    </div>
+    <Group
+      position="apart"
+      align={'flex-start'}
+      bg="white"
+      p="25px 32px"
+      borderBottom="1px solid #d2dce2"
+    >
+      <PaymentReceiveHeaderFields />
+      <PaymentReceiveFormBigTotal />
+    </Group>
  );
 }

--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormPage.tsx
+++ b/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,
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx
+++ b/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}>
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.tsx
@@ -1,18 +1,15 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
-import styled from 'styled-components';
-
-import { CLASSES } from '@/constants/classes';
+import { x } from '@xstyled/emotion';
 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)}>
-      <ReceiptFooterPaper>
+    <x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
+      <Paper p={'20px'}>
        <Row>
          <Col md={8}>
            <ReceiptFormFooterLeft />
@@ -23,11 +20,7 @@ export default function ReceiptFormFooter({}) {
            <ReceiptFormFooterRight />
          </Col>
        </Row>
-      </ReceiptFooterPaper>
-    </div>
+      </Paper>
+    </x.div>
  );
 }
-
-const ReceiptFooterPaper = styled(Paper)`
-  padding: 20px;
-`;
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx
+++ b/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 { CLASSES } from '@/constants/classes';
-import { PageFormBigNumber } from '@/components';
+import { Group, 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>
  );
 }

--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormPage.tsx
+++ b/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>
  );
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptItemsEntriesEditor.tsx
+++ b/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)}>
-      <FastField name={'entries'} items={items} shouldUpdate={entriesFieldShouldUpdate}>
+    <x.div p="18px 32px 0">
+      <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>
  );
 }