feat(alert): tailwind migration (#1756)

* refactor(alert): migrate to tailwind * refactor: remove styled usage * fix: layou due to border-box * fix: responsive override
getlago · Sep 23, 2024 · 309c9d0 · 309c9d0
1 parent 3f5c89f
commit 309c9d0
Show file tree

Hide file tree

Showing 15 changed files with 59 additions and 145 deletions.
diff --git a/src/components/coupons/AddBillableMetricToCouponDialog.tsx b/src/components/coupons/AddBillableMetricToCouponDialog.tsx
@@ -124,7 +124,9 @@ export const AddBillableMetricToCouponDialog = forwardRef<
         searchQuery={getBillableMetrics}
         value={selectedBillableMetric?.id}
       />
-      <StyledAlertBox type="warning">{translate('text_64352657267c3d916f962763')}</StyledAlertBox>
+      <Alert type="warning" className="mb-8">
+        {translate('text_64352657267c3d916f962763')}
+      </Alert>
     </Dialog>
   )
 })
@@ -134,7 +136,3 @@ AddBillableMetricToCouponDialog.displayName = 'AddBillableMetricToCouponDialog'
 const StyledComboBox = styled(ComboBox)`
   margin-bottom: ${theme.spacing(8)};
 `
-
-const StyledAlertBox = styled(Alert)`
-  margin-bottom: ${theme.spacing(8)};
-`
diff --git a/src/components/creditNote/CreditNoteFormCalculation.tsx b/src/components/creditNote/CreditNoteFormCalculation.tsx
@@ -559,13 +559,13 @@ export const CreditNoteFormCalculation = ({
       )}
 
       {_get(formikProps.errors, 'payBack.0.value') === LagoApiError.DoesNotMatchItemAmounts && (
-        <StyledAlert type="danger">
+        <Alert className="mt-6" type="danger">
           {translate('text_637e334680481f653e8caa9d', {
             total: intlFormatNumber(totalTaxIncluded || 0, {
               currency,
             }),
           })}
-        </StyledAlert>
+        </Alert>
       )}
     </div>
   )
@@ -624,10 +624,6 @@ const StyledTextInput = styled(AmountInputField)`
   }
 `
 
-const StyledAlert = styled(Alert)`
-  margin-top: ${theme.spacing(6)};
-`
-
 const InlineLabel = styled.div`
   display: flex;
   align-items: center;

diff --git a/src/components/designSystem/Alert.tsx b/src/components/designSystem/Alert.tsx
@@ -1,129 +1,85 @@
-import { Stack } from '@mui/material'
-import { cx } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
 import { ReactNode } from 'react'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 
-import { ResponsiveStyleValue, setResponsiveProperty } from '~/core/utils/responsiveProps'
-import { theme } from '~/styles'
+import { tw } from '~/styles/utils'
 
 import { Button, ButtonProps as TButtonProps } from './Button'
 import { Icon, IconColor, IconName } from './Icon'
 import { Typography } from './Typography'
 
-type ContainerSize = 0 | 4 | 16 | 48
-
-enum AlertType {
-  info = 'info',
-  success = 'success',
-  danger = 'danger',
-  warning = 'warning',
-}
+type AlertType = 'info' | 'success' | 'danger' | 'warning'
 
 type AlertButtonProps = Partial<Omit<Omit<TButtonProps, 'variant' | 'icon'>, 'size'>> & {
   label: string
 }
 
 interface AlertProps {
   children: ReactNode
-  type: keyof typeof AlertType
+  type: AlertType
   ButtonProps?: AlertButtonProps
   className?: string
-  containerSize?: ResponsiveStyleValue<ContainerSize>
   fullWidth?: boolean
 }
 
-const getIcon = (type: keyof typeof AlertType): { name: IconName; color: IconColor } => {
+const getIcon = (type: AlertType): { name: IconName; color: IconColor } => {
   switch (type) {
-    case AlertType.success:
+    case 'success':
       return { name: 'validate-unfilled', color: 'success' }
-    case AlertType.warning:
+    case 'warning':
       return { name: 'warning-unfilled', color: 'warning' }
-    case AlertType.danger:
+    case 'danger':
       return { name: 'error-unfilled', color: 'error' }
     default:
       return { name: 'info-circle', color: 'info' }
   }
 }
 
+const alertStyles = cva('rounded-xl px-4', {
+  variants: {
+    backgroundColor: {
+      info: 'bg-purple-100',
+      success: 'bg-green-100',
+      danger: 'bg-red-100',
+      warning: 'bg-yellow-100',
+    },
+    isFullWidth: {
+      true: 'w-full rounded-none',
+    },
+  },
+})
+
 export const Alert = ({
   ButtonProps: { label, ...ButtonProps } = {} as AlertButtonProps,
   children,
   className,
-  containerSize = 16,
   fullWidth,
   type,
   ...props
 }: AlertProps) => {
   const iconConfig = getIcon(type)
 
   return (
-    <Container
-      $isFullWidth={fullWidth}
-      $containerSize={containerSize}
-      className={cx(className, [`alert-type--${type}`])}
+    <div
+      className={tw(alertStyles({ backgroundColor: type, isFullWidth: fullWidth }), className)}
       data-test={`alert-type-${type}`}
       {...props}
     >
-      <Stack
-        direction="row"
-        gap={4}
-        alignItems="center"
-        justifyContent="space-between"
-        py={theme.spacing(4)}
-      >
-        <Stack direction="row" gap={4} alignItems="center">
+      <div className="flex flex-row items-center justify-between gap-4 py-4">
+        <div className="flex flex-row items-center gap-4">
           <Icon name={iconConfig.name} color={iconConfig.color} />
           <Content color="textSecondary">{children}</Content>
-        </Stack>
+        </div>
         {!!ButtonProps.onClick && !!label && (
           <Button variant="quaternary-dark" size="medium" {...ButtonProps}>
             {label}
           </Button>
         )}
-      </Stack>
-    </Container>
+      </div>
+    </div>
   )
 }
 
-const Container = styled.div<{
-  $isFullWidth?: boolean
-  $containerSize: ResponsiveStyleValue<ContainerSize>
-}>`
-  border-radius: 12px;
-
-  &.alert-type--${AlertType.info} {
-    background-color: ${theme.palette.info[100]};
-  }
-
-  &.alert-type--${AlertType.success} {
-    background-color: ${theme.palette.success[100]};
-  }
-
-  &.alert-type--${AlertType.warning} {
-    background-color: ${theme.palette.warning[100]};
-  }
-
-  &.alert-type--${AlertType.danger} {
-    background-color: ${theme.palette.error[100]};
-  }
-
-  ${({ $isFullWidth }) =>
-    $isFullWidth &&
-    css`
-      border-radius: 0;
-      width: 100%;
-    `}
-
-  > div {
-    ${({ $containerSize }) => {
-      return css`
-        ${setResponsiveProperty('paddingLeft', $containerSize)}
-        ${setResponsiveProperty('paddingRight', $containerSize)}
-      `
-    }}
-  }
-`
-
 const Content = styled(Typography)`
   && {
     word-break: break-word;

diff --git a/src/components/designSystem/Dialog.tsx b/src/components/designSystem/Dialog.tsx
@@ -1,6 +1,5 @@
 import { alpha, Dialog as MuiDialog } from '@mui/material'
-import { forwardRef, ReactNode, useImperativeHandle, useState } from 'react'
-import { useEffect } from 'react'
+import { forwardRef, ReactNode, useEffect, useImperativeHandle, useState } from 'react'
 import styled from 'styled-components'
 
 import { ButtonGroup, theme } from '~/styles'
@@ -100,7 +99,7 @@ const StyledDialog = styled(MuiDialog)`
     .dialogPaper {
       display: flex;
       flex-direction: column;
-      max-width: 496px;
+      max-width: 576px;
       margin: 0 auto;
       border-radius: 12px;
       box-shadow: ${theme.shadows[4]};

diff --git a/src/components/plans/ChargeAccordion.tsx b/src/components/plans/ChargeAccordion.tsx
@@ -455,9 +455,9 @@ export const ChargeAccordion = memo(
           {/* Charge main infos */}
           <ChargeModelWrapper data-test="charge-model-wrapper">
             {!!shouldDisplayAlreadyUsedChargeAlert && (
-              <ChargeModelWrapperAlert type="warning">
+              <Alert type="warning" className="mb-4">
                 {translate('text_6435895831d323008a47911f')}
-              </ChargeModelWrapperAlert>
+              </Alert>
             )}
             <ComboBox
               disableClearable
@@ -985,10 +985,6 @@ const ChargeModelWrapper = styled.div`
   padding: ${theme.spacing(4)} ${theme.spacing(4)} 0 ${theme.spacing(4)};
 `
 
-const ChargeModelWrapperAlert = styled(Alert)`
-  margin-bottom: ${theme.spacing(4)};
-`
-
 const ValidationIcon = styled(Icon)`
   display: flex;
   align-items: center;

diff --git a/src/components/subscriptions/SubscriptionCurrentUsageTable.tsx b/src/components/subscriptions/SubscriptionCurrentUsageTable.tsx
@@ -192,13 +192,7 @@ export const SubscriptionCurrentUsageTable = ({
 
             return extensions?.details?.taxError?.length
           }) ? (
-            <LocalTaxAlert
-              fullWidth
-              containerSize={{
-                default: 16,
-              }}
-              type="warning"
-            >
+            <Alert fullWidth type="warning" className="shadow-t">
               <Stack>
                 <Typography variant="body" color="grey700">
                   {translate('text_1724165657161stcilcabm7x')}
@@ -208,7 +202,7 @@ export const SubscriptionCurrentUsageTable = ({
                   {translate(LocalTaxProviderErrorsEnum.GenericErrorMessage)}
                 </Typography>
               </Stack>
-            </LocalTaxAlert>
+            </Alert>
           ) : (
             <GenericPlaceholder
               title={translate('text_62c3f3fca8a1625624e83379')}
@@ -399,10 +393,6 @@ const SkeletonItem = styled.div`
   }
 `
 
-const LocalTaxAlert = styled(Alert)`
-  box-shadow: ${theme.shadows[5]};
-`
-
 const NoFocusLink = styled(Link)`
   text-decoration: none !important;
   /* Link as a button-like action here, and there is no place to display the focus ring, so better to hide it and break the internet */

diff --git a/src/layouts/CustomerInvoiceDetails.tsx b/src/layouts/CustomerInvoiceDetails.tsx
@@ -716,14 +716,7 @@ const CustomerInvoiceDetails = () => {
       </PageHeader>
 
       {!!errorMessage && (
-        <Alert
-          fullWidth
-          containerSize={{
-            default: 16,
-            md: 48,
-          }}
-          type="warning"
-        >
+        <Alert fullWidth className="md:px-12" type="warning">
           <Stack>
             <Typography variant="body" color="grey700">
               {translate('text_1724165657161stcilcabm7x')}

diff --git a/src/pages/Invitation.tsx b/src/pages/Invitation.tsx
@@ -403,9 +403,9 @@ const Invitation = () => {
                     })}
                   </PasswordValidation>
                 ) : (
-                  <ValidPasswordAlert type="success" data-test="success">
+                  <Alert type="success" data-test="success" className="mt-3">
                     {translate('text_63246f875e2228ab7b63dd02')}
-                  </ValidPasswordAlert>
+                  </Alert>
                 )}
               </div>
             </InputWrapper>
@@ -453,11 +453,6 @@ const PasswordValidation = styled.div<{ $visible: boolean }>`
   flex-wrap: wrap;
 `
 
-const ValidPasswordAlert = styled(Alert)`
-  flex: 1;
-  margin-top: ${theme.spacing(3)};
-`
-
 const ValidationLine = styled.div`
   display: flex;
   height: 20px;

diff --git a/src/pages/__devOnly/DesignSystem.tsx b/src/pages/__devOnly/DesignSystem.tsx
@@ -166,10 +166,7 @@ const DesignSystem = () => {
                 <Block $marginBottom={theme.spacing(6)}>
                   <Alert
                     fullWidth
-                    containerSize={{
-                      default: 16,
-                      md: 48,
-                    }}
+                    className="md:px-12"
                     type="danger"
                     ButtonProps={{
                       label: 'Retry',

diff --git a/src/pages/auth/ResetPassword.tsx b/src/pages/auth/ResetPassword.tsx
@@ -207,9 +207,9 @@ const ResetPassword = () => {
                       )
                     })
                   ) : (
-                    <StyledAlert type="success" data-test="success">
+                    <Alert className="mb-3" type="success" data-test="success">
                       {translate('text_63246f875e2228ab7b63dd02')}
-                    </StyledAlert>
+                    </Alert>
                   )}
                 </PasswordValidation>
               </PasswordBlock>
@@ -250,11 +250,6 @@ const PasswordValidation = styled.div<{ $visible: boolean }>`
   flex-wrap: wrap;
 `
 
-const StyledAlert = styled(Alert)`
-  flex: 1;
-  margin-bottom: ${theme.spacing(3)};
-`
-
 const ValidationLine = styled.div`
   display: flex;
   height: 20px;

diff --git a/src/pages/auth/SignUp.tsx b/src/pages/auth/SignUp.tsx
@@ -298,9 +298,9 @@ const SignUp = () => {
                       })}
                     </PasswordValidation>
                   ) : (
-                    <ValidPasswordAlert type="success" data-test="success">
+                    <Alert className="mt-4" type="success" data-test="success">
                       {translate('text_620bc4d4269a55014d493fbe')}
-                    </ValidPasswordAlert>
+                    </Alert>
                   )}
                 </div>
               </>
@@ -350,11 +350,6 @@ const PasswordValidation = styled.div<{ $visible: boolean }>`
   flex-wrap: wrap;
 `
 
-const ValidPasswordAlert = styled(Alert)`
-  flex: 1;
-  margin-top: ${theme.spacing(4)};
-`
-
 const ValidationLine = styled.div`
   display: flex;
   height: 20px;

diff --git a/src/pages/developers/ApiKeys.tsx b/src/pages/developers/ApiKeys.tsx
@@ -110,7 +110,7 @@ const ApiKeys = () => {
 
 const Page = styled.div`
   padding: ${theme.spacing(8)} ${theme.spacing(12)};
-  max-width: ${theme.spacing(168)};
+  max-width: ${theme.spacing(192)};
 `
 
 const Title = styled(Typography)`

diff --git a/src/pages/developers/Webhooks.tsx b/src/pages/developers/Webhooks.tsx
@@ -170,7 +170,7 @@ const Webhooks = () => {
 
 const Page = styled.div`
   padding: ${theme.spacing(8)} ${theme.spacing(12)};
-  max-width: ${theme.spacing(168)};
+  max-width: ${theme.spacing(192)};
 `
 
 const Title = styled(Typography)`