From ddea7be24a6ffc6a1d089bdac0edf201ac683773 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sun, 13 Oct 2024 01:06:17 +0200 Subject: [PATCH] feat: Add css utilities to Box, Stack and Group components --- .../webapp/src/components/Layout/Box/Box.tsx | 10 ++-- .../src/components/Layout/Group/Group.tsx | 54 +++++++++---------- .../src/components/Layout/Stack/Stack.tsx | 47 +++++++--------- .../CreditNoteForm/CreditNoteFormFooter.tsx | 16 ++---- .../CreditNoteForm/CreditNoteFormHeader.tsx | 15 ++++-- .../CreditNoteItemsEntriesEditorField.tsx | 7 ++- .../EstimateForm/EstimateFormHeader.tsx | 9 ++-- .../EstimateItemsEntriesField.tsx | 7 ++- .../InvoiceForm/InvoiceFormHeader.tsx | 11 ++-- .../PaymentReceiveFormBody.tsx | 7 ++- .../PaymentReceiveFormFooter.tsx | 6 +-- .../PaymentReceiveFormHeader.tsx | 18 ++++--- .../PaymentReceiveFormPage.tsx | 2 +- .../Receipts/ReceiptForm/ReceiptForm.tsx | 4 +- .../ReceiptForm/ReceiptFormFooter.tsx | 19 +++---- .../ReceiptForm/ReceiptFormHeader.tsx | 16 +++--- .../Receipts/ReceiptForm/ReceiptFormPage.tsx | 9 +++- .../ReceiptForm/ReceiptItemsEntriesEditor.tsx | 13 +++-- 18 files changed, 134 insertions(+), 136 deletions(-) diff --git a/packages/webapp/src/components/Layout/Box/Box.tsx b/packages/webapp/src/components/Layout/Box/Box.tsx index 9d104cf58..589ab9ce3 100644 --- a/packages/webapp/src/components/Layout/Box/Box.tsx +++ b/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 { - className?: string; -} +export interface BoxProps + extends SystemProps, + Props, + Omit {} export const Box = forwardRef( ({ className, ...rest }: BoxProps, ref: Ref) => { - const Element = 'div'; + const Element = x.div; return ; }, diff --git a/packages/webapp/src/components/Layout/Group/Group.tsx b/packages/webapp/src/components/Layout/Group/Group.tsx index ee0174598..761b65df9 100644 --- a/packages/webapp/src/components/Layout/Group/Group.tsx +++ b/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, '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 = { - position: 'left', - spacing: 20, - flex: 'none' -}; - -export function Group({ children, ...props }: GroupProps) { - const groupProps = { - ...defaultProps, - ...props, - }; +export function Group({ + position = 'left', + spacing = 20, + align = 'center', + noWrap, + children, + ...props +}: GroupProps) { const filteredChildren = filterFalsyChildren(children); - return {filteredChildren}; + return ( + + {filteredChildren} + + ); } - -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; -`; diff --git a/packages/webapp/src/components/Layout/Stack/Stack.tsx b/packages/webapp/src/components/Layout/Stack/Stack.tsx index 3ca710402..49ca61ce1 100644 --- a/packages/webapp/src/components/Layout/Stack/Stack.tsx +++ b/packages/webapp/src/components/Layout/Stack/Stack.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import styled from 'styled-components'; -import { Box } from '../Box'; +import { x, SystemProps } from '@xstyled/emotion'; -export interface StackProps extends React.ComponentPropsWithoutRef<'div'> { +export interface StackProps + extends SystemProps, + Omit, '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 = { - spacing: 20, - align: 'stretch', - justify: 'top', - flex: 'none', -}; - -export function Stack(props: StackProps) { - const stackProps = { - ...defaultProps, - ...props, - }; - return ; +export function Stack({ + spacing = 20, + align = 'stretch', + justify = 'top', + ...restProps +}: StackProps) { + return ( + + ); } - -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}; -`; diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.tsx index ba55d2443..a44dc70c8 100644 --- 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 ( -
- + + @@ -26,10 +23,7 @@ export default function CreditNoteFormFooter() { - -
+ + ); } -const CreditNoteFooterPaper = styled(Paper)` - padding: 20px; -`; diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx index 2b4e4d1b4..06ed4837d 100644 --- 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 ( -
+ -
+ ); } diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteItemsEntriesEditorField.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteItemsEntriesEditorField.tsx index 17709be69..a5fa7726e 100644 --- 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 ( -
+ )} -
+ ); } diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx index 74b22f9c4..ac62fc4da 100644 --- 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 ( - - + ); } diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateItemsEntriesField.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateItemsEntriesField.tsx index 977c55ef1..aba7672ce 100644 --- 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 ( -
+ )} -
+ ); } diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx index eecbc49ff..78a6e7b2f 100644 --- 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 ( - - + ); } diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormBody.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormBody.tsx index 366889e2e..4652b239e 100644 --- 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 ( -
+ {({ form: { values, setFieldValue }, field: { value } }) => ( )} -
+ ); } diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFooter.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFooter.tsx index 641c4f9ec..aca8cedce 100644 --- 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 ( - + @@ -25,6 +25,6 @@ export default function PaymentReceiveFormFooter() { - + ); } diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx index c6d08f074..2a587444d 100644 --- 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 ( -
-
- - -
-
+ + + + ); } diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormPage.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormPage.tsx index e6c522553..ad6ab9e16 100644 --- 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, diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx index 6bf507fde..24ea92cae 100644 --- 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, })} > diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.tsx index 500b1e785..056dfc129 100644 --- 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 ( -
- + + @@ -23,11 +20,7 @@ export default function ReceiptFormFooter({}) { - -
+ + ); } - -const ReceiptFooterPaper = styled(Paper)` - padding: 20px; -`; diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx index 833c5b45b..fd2f8e678 100644 --- 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 ( -
+ -
+ ); } diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormPage.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormPage.tsx index 0382cce5e..ccf7b7711 100644 --- 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 ( - + ); diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptItemsEntriesEditor.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptItemsEntriesEditor.tsx index 002559fbd..ab8b5fbe9 100644 --- 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 ( -
- + + {({ form: { values, setFieldValue }, field: { value }, @@ -31,6 +34,6 @@ export default function ReceiptItemsEntriesEditor({ defaultReceipt }) { /> )} -
+ ); }