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

bigcapitalhq · Oct 12, 2024 · ddea7be · ddea7be
1 parent b7b86bb
commit ddea7be
Show file tree

Hide file tree

Showing 18 changed files with 134 additions and 136 deletions.
diff --git 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<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} />;
   },

diff --git 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<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> = {
-  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 <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;
-`;
diff --git 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<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> = {
-  spacing: 20,
-  align: 'stretch',
-  justify: 'top',
-  flex: 'none',
-};
-
-export function Stack(props: StackProps) {
-  const stackProps = {
-    ...defaultProps,
-    ...props,
-  };
-  return <StackStyled {...stackProps} />;
+export function Stack({
+  spacing = 20,
+  align = 'stretch',
+  justify = 'top',
+  ...restProps
+}: StackProps) {
+  return (
+    <x.div
+      display={'flex'}
+      flexDirection="column"
+      justifyContent="justify"
+      gap={`${spacing}px`}
+      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};
-`;
diff --git 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;
-`;
diff --git 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>
   );
 }
 

diff --git a/...app/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteItemsEntriesEditorField.tsx b/...app/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>
   );
 }
diff --git 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>
   );
 }
 

diff --git 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>
   );
 }
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx
@@ -2,26 +2,25 @@
 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';
 
 /**
  * Invoice form header section.
  */
 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>
   );
 }
 

diff --git a/...ebapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormBody.tsx b/...ebapp/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>
   );
 }
diff --git a/...app/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFooter.tsx b/...app/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>
   );
 }