chore: some tw component migration

getlago · Sep 30, 2024 · af56e26 · af56e26
1 parent 81221f7
commit af56e26
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 139 deletions.
diff --git a/src/components/addOns/AddOnItem.tsx b/src/components/addOns/AddOnItem.tsx
@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client'
+import { cx } from 'class-variance-authority'
 import { RefObject } from 'react'
 import { generatePath, useNavigate } from 'react-router-dom'
-import styled from 'styled-components'
 
 import { DeleteAddOnDialogRef } from '~/components/addOns/DeleteAddOnDialog'
 import {
@@ -70,11 +70,11 @@ export const AddOnItem = ({
         data-test={name}
         {...navigationProps}
       >
-        <AddOnNameSection>
+        <div className="mr-auto flex min-w-0 items-center">
           <Avatar className="mr-3" size="big" variant="connector">
             <Icon name="puzzle" color="dark" />
           </Avatar>
-          <NameBlock>
+          <div className="min-w-0">
             <Typography color="textSecondary" variant="bodyHl" noWrap>
               {name}
             </Typography>
@@ -89,21 +89,20 @@ export const AddOnItem = ({
                 ),
               })}
             </Typography>
-          </NameBlock>
-        </AddOnNameSection>
-        <CouponInfosSection $shouldShowItemActions={shouldShowItemActions}>
-          <SmallCell>{customersCount}</SmallCell>
-          <MediumCell>{formatTimeOrgaTZ(createdAt)}</MediumCell>
-        </CouponInfosSection>
-        {shouldShowItemActions && <ButtonMock />}
+          </div>
+        </div>
+        <div className={cx('flex', shouldShowItemActions ? 'mr-6' : 'mr-0')}>
+          <Typography className="mr-6 hidden w-24 text-right md:block">{customersCount}</Typography>
+          <Typography className="w-28">{formatTimeOrgaTZ(createdAt)}</Typography>
+        </div>
+        {shouldShowItemActions && <div className="w-10" />}
       </ListItemLink>
 
       {shouldShowItemActions &&
         (hasPermissions(['addonsUpdate']) || hasPermissions(['addonsDelete'])) && (
           <Popper
             PopperProps={{ placement: 'bottom-end' }}
             opener={({ isOpen }) => (
-              // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
               <PopperOpener>
                 <Tooltip
                   placement="top-end"
@@ -167,40 +166,3 @@ export const AddOnItemSkeleton = () => {
     </BaseListItem>
   )
 }
-
-const AddOnNameSection = styled.div`
-  margin-right: auto;
-  display: flex;
-  align-items: center;
-  min-width: 0;
-`
-
-const NameBlock = styled.div`
-  min-width: 0;
-`
-
-const CouponInfosSection = styled.div<{ $shouldShowItemActions: boolean }>`
-  display: flex;
-  margin-right: ${({ $shouldShowItemActions }) => ($shouldShowItemActions ? theme.spacing(6) : 0)};
-
-  > *:not(:last-child) {
-    margin-right: ${theme.spacing(6)};
-
-    ${theme.breakpoints.down('md')} {
-      display: none;
-    }
-  }
-`
-
-const MediumCell = styled(Typography)`
-  width: 112px;
-`
-
-const SmallCell = styled(Typography)`
-  text-align: right;
-  width: 96px;
-`
-
-const ButtonMock = styled.div`
-  width: 40px;
-`
diff --git a/src/components/billableMetrics/BillableMetricItem.tsx b/src/components/billableMetrics/BillableMetricItem.tsx
@@ -1,7 +1,6 @@
 import { gql } from '@apollo/client'
 import { memo, RefObject } from 'react'
 import { generatePath } from 'react-router-dom'
-import styled from 'styled-components'
 
 import {
   Avatar,
@@ -64,21 +63,23 @@ export const BillableMetricItem = memo(
           tabIndex={0}
           {...navigationProps}
         >
-          <BillableMetricName>
-            <Avatar size="big" variant="connector">
+          <div className="flex min-w-0 flex-1 items-center">
+            <Avatar className="mr-3" size="big" variant="connector">
               <Icon name="pulse" color="dark" />
             </Avatar>
-            <NameBlock>
+            <div className="mr-6 min-w-0">
               <Typography color="textSecondary" variant="bodyHl" noWrap>
                 {name}
               </Typography>
               <Typography variant="caption" noWrap>
                 {code}
               </Typography>
-            </NameBlock>
-          </BillableMetricName>
-          <CellSmall align="right">{formatTimeOrgaTZ(createdAt)}</CellSmall>
-          <ButtonMock />
+            </div>
+          </div>
+          <Typography className="mr-6 w-28" align="right">
+            {formatTimeOrgaTZ(createdAt)}
+          </Typography>
+          <div className="w-10" />
         </ListItemLink>
         {(hasPermissions(['billableMetricsUpdate']) ||
           hasPermissions(['billableMetricsDelete'])) && (
@@ -145,33 +146,4 @@ export const BillableMetricItemSkeleton = () => {
   )
 }
 
-const NameBlock = styled.div`
-  min-width: 0;
-  margin-right: ${theme.spacing(6)};
-`
-
-const CellSmall = styled(Typography)`
-  width: 112px;
-  margin-right: ${theme.spacing(6)};
-`
-
-const BillableMetricName = styled.div`
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-
-  > *:last-child {
-    margin-right: ${theme.spacing(6)};
-  }
-`
-
-const ButtonMock = styled.div`
-  width: 40px;
-`
-
 BillableMetricItem.displayName = 'BillableMetricItem'
diff --git a/src/components/coupons/AddBillableMetricToCouponDialog.tsx b/src/components/coupons/AddBillableMetricToCouponDialog.tsx
@@ -1,6 +1,5 @@
 import { gql } from '@apollo/client'
 import { forwardRef, useMemo, useState } from 'react'
-import styled from 'styled-components'
 
 import { Alert, Button, Dialog, DialogRef, Typography } from '~/components/designSystem'
 import { ComboBox } from '~/components/form'
@@ -10,7 +9,6 @@ import {
   useGetBillableMetricsForCouponsLazyQuery,
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
-import { theme } from '~/styles'
 
 import { Item } from '../form/ComboBox/ComboBoxItem'
 
@@ -105,8 +103,9 @@ export const AddBillableMetricToCouponDialog = forwardRef<
         </>
       )}
     >
-      <StyledComboBox
+      <ComboBox
         name="selectedBillableMetric"
+        className="mb-8"
         data={comboboxBillableMetricsData}
         label={translate('text_64352657267c3d916f962757')}
         loading={loading}
@@ -124,15 +123,11 @@ export const AddBillableMetricToCouponDialog = forwardRef<
         searchQuery={getBillableMetrics}
         value={selectedBillableMetric?.id}
       />
-      <Alert type="warning" className="mb-8">
+      <Alert className="mb-8" type="warning">
         {translate('text_64352657267c3d916f962763')}
       </Alert>
     </Dialog>
   )
 })
 
 AddBillableMetricToCouponDialog.displayName = 'AddBillableMetricToCouponDialog'
-
-const StyledComboBox = styled(ComboBox)`
-  margin-bottom: ${theme.spacing(8)};
-`
diff --git a/src/components/coupons/AddPlanToCouponDialog.tsx b/src/components/coupons/AddPlanToCouponDialog.tsx
@@ -1,6 +1,5 @@
 import { gql } from '@apollo/client'
 import { forwardRef, useMemo, useState } from 'react'
-import styled from 'styled-components'
 
 import { Button, Dialog, DialogRef, Typography } from '~/components/designSystem'
 import { ComboBox } from '~/components/form'
@@ -10,7 +9,6 @@ import {
   useGetPlansForCouponsLazyQuery,
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
-import { theme } from '~/styles'
 
 import { Item } from '../form/ComboBox/ComboBoxItem'
 
@@ -102,8 +100,9 @@ export const AddPlanToCouponDialog = forwardRef<DialogRef, AddPlanToCouponDialog
           </>
         )}
       >
-        <StyledComboBox
+        <ComboBox
           name="selectedPlan"
+          className="mb-8"
           data={comboboxPlansData}
           label={translate('text_63d3a658c6d84a5843032145')}
           loading={loading}
@@ -127,7 +126,3 @@ export const AddPlanToCouponDialog = forwardRef<DialogRef, AddPlanToCouponDialog
 )
 
 AddPlanToCouponDialog.displayName = 'AddPlanToCouponDialog'
-
-const StyledComboBox = styled(ComboBox)`
-  margin-bottom: ${theme.spacing(8)};
-`
diff --git a/src/components/customers/CustomerCreditNotesList.tsx b/src/components/customers/CustomerCreditNotesList.tsx
@@ -1,5 +1,4 @@
 import { gql } from '@apollo/client'
-import styled from 'styled-components'
 
 import CreditNotesList from '~/components/customers/creditNotes/CreditNotesList'
 import { Avatar, Icon, Typography } from '~/components/designSystem'
@@ -16,7 +15,6 @@ import {
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useDebouncedSearch } from '~/hooks/useDebouncedSearch'
 import ErrorImage from '~/public/images/maneki/error.svg'
-import { NAV_HEIGHT, theme } from '~/styles'
 import { SectionHeader, SideSection } from '~/styles/customer'
 
 import { SearchInput } from '../SearchInput'
@@ -59,9 +57,9 @@ export const CustomerCreditNotesList = ({
       <SectionHeader variant="subhead" color="grey700" $hideBottomShadow>
         {translate('text_63725b30957fd5b26b308dd7')}
       </SectionHeader>
-      <TotalCreditAmountWrapper>
-        <TotalCreditAmountLeftWrapper>
-          <Avatar size="big" variant="connector">
+      <div className="mb-8 flex h-18 items-center justify-between rounded-xl border border-grey-400 px-4 py-3">
+        <div className="flex items-center">
+          <Avatar className="mr-3" size="big" variant="connector">
             <Icon name="wallet" color="dark" />
           </Avatar>
           <div>
@@ -74,7 +72,7 @@ export const CustomerCreditNotesList = ({
               })}
             </Typography>
           </div>
-        </TotalCreditAmountLeftWrapper>
+        </div>
         <Typography variant="body" color="grey700">
           {intlFormatNumber(
             deserializeAmount(
@@ -87,17 +85,17 @@ export const CustomerCreditNotesList = ({
             },
           )}
         </Typography>
-      </TotalCreditAmountWrapper>
+      </div>
 
-      <HeaderWithSearch>
+      <div className="flex h-18 items-center justify-between shadow-b">
         <Typography variant="subhead" color="grey700">
           {translate('text_63725b30957fd5b26b308ddf')}
         </Typography>
         <SearchInput
           onChange={debouncedSearch}
           placeholder={translate('text_63c6edd80c57d0dfaae3898e')}
         />
-      </HeaderWithSearch>
+      </div>
       {!!error && !isLoading ? (
         <GenericPlaceholder
           title={translate('text_636d023ce11a9d038819b579')}
@@ -121,32 +119,3 @@ export const CustomerCreditNotesList = ({
     </SideSection>
   )
 }
-
-const TotalCreditAmountWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: ${NAV_HEIGHT}px;
-  padding: ${theme.spacing(3)} ${theme.spacing(4)};
-  margin-bottom: ${theme.spacing(8)};
-  box-sizing: border-box;
-  border: 1px solid ${theme.palette.grey[400]};
-  border-radius: 12px;
-`
-
-const TotalCreditAmountLeftWrapper = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
-const HeaderWithSearch = styled.div`
-  height: ${NAV_HEIGHT}px;
-  box-shadow: ${theme.shadows[7]};
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -118,9 +118,11 @@ const config = {
       screens: {
         md: '776px',
       },
+      spacing: {
+        18: '4.5rem',
+      },
     },
   },
-
   plugins: [
     plugin(function ({ addUtilities, theme }) {
       // Dividers