Merge pull request #705 from bigcapitalhq/fix-invoice-form-layout

fix: Invoice form layout
bigcapitalhq · Oct 13, 2024 · 3300a6a · 3300a6a
2 parents 817ef90 + 152a22b
commit 3300a6a
Show file tree

Hide file tree

Showing 64 changed files with 1,891 additions and 1,447 deletions.
diff --git a/packages/webapp/package.json b/packages/webapp/package.json
@@ -17,6 +17,8 @@
     "@casl/ability": "^5.4.3",
     "@casl/react": "^2.3.0",
     "@craco/craco": "^5.9.0",
+    "@emotion/css": "^11.13.4",
+    "@emotion/react": "^11.13.3",
     "@reduxjs/toolkit": "^1.2.5",
     "@stripe/connect-js": "^3.3.12",
     "@stripe/react-connect-js": "^3.3.13",
@@ -48,6 +50,7 @@
     "@typescript-eslint/eslint-plugin": "^2.10.0",
     "@typescript-eslint/parser": "^2.10.0",
     "@welldone-software/why-did-you-render": "^6.0.0-rc.1",
+    "@xstyled/emotion": "^3.8.1",
     "accounting": "^0.4.1",
     "axios": "^1.6.0",
     "basscss": "^8.0.2",
@@ -124,6 +127,7 @@
     "style-loader": "0.23.1",
     "styled-components": "^5.3.1",
     "stylis-rtlcss": "^2.1.1",
+    "theme-ui": "^0.16.2",
     "typescript": "^4.8.3",
     "yup": "^0.28.1"
   },

diff --git a/packages/webapp/src/components/App.tsx b/packages/webapp/src/components/App.tsx
@@ -35,6 +35,7 @@ const OneClickDemoPage = lazy(
 const PaymentPortalPage = lazy(
   () => import('@/containers/PaymentPortal/PaymentPortalPage'),
 );
+
 /**
  * App inner.
  */
@@ -59,7 +60,10 @@ function AppInsider({ history }) {
                 children={<EmailConfirmation />}
               />
               <Route path={'/auth'} children={<AuthenticationPage />} />
-              <Route path={'/payment/:linkId'} children={<PaymentPortalPage />} />
+              <Route
+                path={'/payment/:linkId'}
+                children={<PaymentPortalPage />}
+              />
               <Route path={'/'} children={<DashboardPrivatePages />} />
             </Switch>
           </Router>

diff --git a/packages/webapp/src/components/AppIntlProvider.tsx b/packages/webapp/src/components/AppIntlProvider.tsx
@@ -1,12 +1,31 @@
 // @ts-nocheck
 import React, { createContext } from 'react';
 
-const AppIntlContext = createContext();
+interface AppIntlContextValue {
+  currentLocale: string;
+  direction: 'rtl' | 'ltr';
+  isRTL: boolean;
+  isLTR: boolean;
+}
+
+const AppIntlContext = createContext<AppIntlContextValue>(
+  {} as AppIntlContextValue,
+);
+
+interface AppIntlProviderProps {
+  currentLocale: string;
+  isRTL: boolean;
+  children: React.ReactNode;
+}
 
 /**
  * Application intl provider.
  */
-function AppIntlProvider({ currentLocale, isRTL, children }) {
+function AppIntlProvider({
+  currentLocale,
+  isRTL,
+  children,
+}: AppIntlProviderProps) {
   const provider = {
     currentLocale,
     isRTL,
@@ -21,6 +40,7 @@ function AppIntlProvider({ currentLocale, isRTL, children }) {
   );
 }
 
-const useAppIntlContext = () => React.useContext(AppIntlContext);
+const useAppIntlContext = () =>
+  React.useContext<AppIntlContextValue>(AppIntlContext);
 
 export { AppIntlProvider, useAppIntlContext };
diff --git a/packages/webapp/src/components/Dashboard/DashboardInsider.tsx b/packages/webapp/src/components/Dashboard/DashboardInsider.tsx
@@ -2,13 +2,15 @@
 import React from 'react';
 import classnames from 'classnames';
 import { LoadingIndicator } from '../Indicator';
+import { css } from '@emotion/css';
 
 export function DashboardInsider({
   loading,
   children,
   name,
   mount = false,
   className,
+  style
 }) {
   return (
     <div
@@ -17,9 +19,11 @@ export function DashboardInsider({
           dashboard__insider: true,
           'dashboard__insider--loading': loading,
           [`dashboard__insider--${name}`]: !!name,
+
         },
         className,
       )}
+      style={style}
     >
       <LoadingIndicator loading={loading} mount={mount}>
         {children}

diff --git a/packages/webapp/src/components/Dashboard/DashboardThemeProvider.tsx b/packages/webapp/src/components/Dashboard/DashboardThemeProvider.tsx
@@ -1,9 +1,20 @@
-// @ts-nocheck
 import React from 'react';
-import { ThemeProvider, StyleSheetManager } from 'styled-components';
+import {
+  ThemeProvider as StyleComponentsThemeProvider,
+  StyleSheetManager,
+} from 'styled-components';
 import rtlcss from 'stylis-rtlcss';
+import {
+  defaultTheme,
+  ThemeProvider as XStyledEmotionThemeProvider,
+} from '@xstyled/emotion';
 import { useAppIntlContext } from '../AppIntlProvider';
 
+const theme = {
+  ...defaultTheme,
+  bpPrefix: 'bp4',
+};
+
 interface DashboardThemeProviderProps {
   children: React.ReactNode;
 }
@@ -17,7 +28,11 @@ export function DashboardThemeProvider({
     <StyleSheetManager
       {...(direction === 'rtl' ? { stylisPlugins: [rtlcss] } : {})}
     >
-      <ThemeProvider theme={{ dir: direction }}>{children}</ThemeProvider>
+      <StyleComponentsThemeProvider theme={{ dir: direction }}>
+        <XStyledEmotionThemeProvider theme={theme}>
+          {children}
+        </XStyledEmotionThemeProvider>
+      </StyleComponentsThemeProvider>
     </StyleSheetManager>
   );
 }
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/components/PageForm/PageForm.tsx b/packages/webapp/src/components/PageForm/PageForm.tsx
@@ -0,0 +1,91 @@
+import React, { FC } from 'react';
+import clsx from 'classnames';
+import { x, SystemProps } from '@xstyled/emotion';
+import { css } from '@emotion/css';
+import { Group, GroupProps } from '@/components';
+
+interface PageFormProps extends SystemProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Page form layout.
+ * @returns {React.ReactNode}
+ */
+export const PageForm = ({ children, ...props }: PageFormProps) => {
+  return (
+    <x.div display="flex" flexDirection={'column'} overflow="hidden" {...props}>
+      {children}
+    </x.div>
+  );
+};
+PageForm.displayName = 'PageFormBody';
+
+/**
+ * Page form body layout, by default the content body is scrollable.
+ * @returns {React.ReactNode}
+ */
+const PageFormBody: FC<{ children: React.ReactNode } & SystemProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <x.div flex="1" overflow="auto" {...props}>
+      {children}
+    </x.div>
+  );
+};
+PageFormBody.displayName = 'PageFormBody';
+
+/**
+ * Page form footer.
+ * @returns {React.ReactNode}
+ */
+const PageFormFooter: FC<{ children: React.ReactNode } & SystemProps> = ({ children }) => {
+  return <x.div>{children} </x.div>;
+};
+
+PageFormFooter.displayName = 'PageFormFooter';
+
+const footerActionsStyle = `
+  width: 100%;
+  background: #fff;
+  padding: 14px 18px;
+  border-top: 1px solid rgb(210, 221, 226);
+  box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
+
+  .bp4-button-group{
+    .bp4-button{
+      &:not(:last-child),
+      &.bp4-popover-wrapper:not(:last-child) {
+        border-right: 1px solid rgba(92, 112, 127, 0.3);
+        margin-right: 0;
+
+        &.bp4-intent-primary{
+          border-right: 1px solid rgba(255, 255, 255, 0.3);
+        }
+      }
+    }
+  }
+`;
+
+const PageFormFooterActions: FC<GroupProps> = ({
+  children,
+  className,
+  ...restProps
+}) => {
+  return (
+    <Group
+      spacing={20}
+      {...restProps}
+      className={clsx(css(footerActionsStyle), className)}
+    >
+      {children}
+    </Group>
+  );
+};
+PageFormFooterActions.displayName = 'PageFormFooterActions';
+
+PageForm.Body = PageFormBody;
+PageForm.Footer = PageFormFooter;
+PageForm.FooterActions = PageFormFooterActions;