misc(Skeleton): use className to define margins

getlago · Nov 18, 2024 · 6454461 · 6454461
1 parent 08a8fc0
commit 6454461
Show file tree

Hide file tree

Showing 62 changed files with 251 additions and 249 deletions.
diff --git a/scripts/codemod.js b/scripts/codemod.js
@@ -7,8 +7,10 @@ const { run: jscodeshift } = require('jscodeshift/src/Runner')
 
 const SRC_DIR = './src/'
 
-const transformPath = path.resolve('./scripts/transforms/skeleton-remove-unnecessary-height.js')
-const paths = globSync(path.join(SRC_DIR, '**/*.@(tsx)'))
+const transformPath = path.resolve('./scripts/transforms/skeleton-migrate-margin-values.js')
+const paths = globSync(path.join(SRC_DIR, '**/*.@(tsx)'), {
+  ignore: ['**/node_modules/**', '**/graphql.tsx', '**/dist/**'],
+})
 const options = {
   // dry: true, // dry run (no changes are made to files)
   verbose: 1,

diff --git a/scripts/transforms/skeleton-migrate-margin-values.js b/scripts/transforms/skeleton-migrate-margin-values.js
@@ -0,0 +1,91 @@
+module.exports = function (file, api) {
+  // Alias the jscodeshift API for ease of use.
+  const j = api.jscodeshift
+
+  // Convert the entire file source into a collection of nodes paths.
+  const root = j(file.source)
+
+  root
+    // Find all Skeleton JSX elements
+    .findJSXElements('Skeleton')
+    .filter((path) => {
+      // ...and a margin relared attribute
+      const hasAnyMarginValue = path.value.openingElement.attributes.some(
+        (attr) =>
+          attr.name.name === 'marginRight' ||
+          attr.name.name === 'marginBottom' ||
+          attr.name.name === 'marginTop',
+      )
+
+      return hasAnyMarginValue
+    })
+    // find out if className is present
+    .forEach((path) => {
+      // Create a map of margin values
+      const classNames = []
+
+      path.value.openingElement.attributes.forEach((attr) => {
+        if (
+          attr.name.name === 'marginRight' ||
+          attr.name.name === 'marginBottom' ||
+          attr.name.name === 'marginTop'
+        ) {
+          const key = attr.name.name
+          const clasNamePrefix = key === 'marginRight' ? 'mr' : key === 'marginBottom' ? 'mb' : 'mt'
+
+          let localValue = 0
+
+          if (attr.value.type === 'JSXExpressionContainer') {
+            localValue = attr.value.expression.arguments[0].value
+
+            classNames.push(`${clasNamePrefix}-${localValue}`)
+
+            return
+          } else if (typeof attr.value.value === 'number') {
+            localValue = attr.value.value
+          } else if (typeof attr.value.value === 'string') {
+            localValue = parseInt(attr.value.value, 10)
+          }
+
+          // If value divided by 4 is not 0, remove one and retry
+          let i = 10
+
+          while (localValue % 4 !== 0 && i !== 0) {
+            if (localValue < 4) {
+              localValue = 4
+              break
+            } else {
+              localValue -= 1
+              i--
+            }
+          }
+
+          classNames.push(`${clasNamePrefix}-${localValue / 4}`)
+        }
+      })
+
+      // If element does not have className attribute, create it
+      const hasClassName = path.value.openingElement.attributes.some(
+        (attr) => attr.name.name === 'className',
+      )
+
+      if (!hasClassName) {
+        // push new classNames to the element
+        path.value.openingElement.attributes.push(
+          j.jsxAttribute(j.jsxIdentifier('className'), j.stringLiteral(classNames.join(' '))),
+        )
+        // remove margin related attributes
+        path.value.openingElement.attributes = path.value.openingElement.attributes.filter(
+          (attr) =>
+            attr.name.name !== 'marginRight' &&
+            attr.name.name !== 'marginBottom' &&
+            attr.name.name !== 'marginTop',
+        )
+      }
+    })
+
+  // TODO: remove margin related attributes
+
+  // Save changes to the file
+  return root.toSource()
+}
diff --git a/src/components/customers/CustomerInvoicesTab.tsx b/src/components/customers/CustomerInvoicesTab.tsx
@@ -93,7 +93,7 @@ export const CustomerInvoicesTab = ({ customerId, customerTimezone }: CustomerIn
     <div>
       {initialLoad ? (
         <LoadingState>
-          <Skeleton variant="text" width={224} marginBottom="30px" />
+          <Skeleton variant="text" width={224} className="mb-7" />
           <CustomerInvoicesList
             isLoading
             customerTimezone={customerTimezone}

diff --git a/src/components/customers/CustomerItem.tsx b/src/components/customers/CustomerItem.tsx
@@ -144,8 +144,8 @@ CustomerItem.displayName = 'CustomerItem'
 export const CustomerItemSkeleton = () => {
   return (
     <BaseListItem>
-      <Skeleton variant="connectorAvatar" size="big" marginRight={theme.spacing(3)} />
-      <Skeleton variant="text" width={240} marginRight="auto" />
+      <Skeleton variant="connectorAvatar" size="big" className="mr-3" />
+      <Skeleton variant="text" width={240} className="mr-auto" />
       <Skeleton variant="text" width={240} />
     </BaseListItem>
   )

diff --git a/src/components/customers/CustomerMainInfos.tsx b/src/components/customers/CustomerMainInfos.tsx
@@ -246,11 +246,11 @@ export const CustomerMainInfos = ({ loading, customer, onEdit }: CustomerMainInf
           <Skeleton variant="text" width={200} />
         </SectionHeader>
         <div>
-          <Skeleton variant="text" width={80} marginBottom={theme.spacing(3)} />
+          <Skeleton variant="text" width={80} className="mb-3" />
           <Skeleton variant="text" width={200} />
         </div>
         <div>
-          <Skeleton variant="text" width={80} marginBottom={theme.spacing(3)} />
+          <Skeleton variant="text" width={80} className="mb-3" />
           <Skeleton variant="text" width={200} />
         </div>
       </LoadingDetails>

diff --git a/src/components/customers/subscriptions/SubscriptionItem.tsx b/src/components/customers/subscriptions/SubscriptionItem.tsx
@@ -132,9 +132,9 @@ SubscriptionItem.displayName = 'SubscriptionItem'
 export const SubscriptionItemSkeleton = () => {
   return (
     <SkeletonItem>
-      <Skeleton variant="connectorAvatar" size="big" marginRight="12px" />
+      <Skeleton variant="connectorAvatar" size="big" className="mr-3" />
       <div>
-        <Skeleton variant="text" width={240} marginBottom="12px" />
+        <Skeleton variant="text" width={240} className="mb-3" />
         <Skeleton variant="text" width={120} />
       </div>
     </SkeletonItem>

diff --git a/src/components/designSystem/Skeleton.tsx b/src/components/designSystem/Skeleton.tsx
@@ -21,18 +21,6 @@ interface SkeletonConnectorProps {
    */
   width?: never
   className?: string
-  /**
-   * @deprecated Use `className` and TailwindCSS instead
-   */
-  marginRight?: number | string
-  /**
-   * @deprecated Use `className` and TailwindCSS instead
-   */
-  marginBottom?: number | string
-  /**
-   * @deprecated Use `className` and TailwindCSS instead
-   */
-  marginTop?: number | string
   color?: SkeletonColor
 }
 
@@ -44,18 +32,6 @@ interface SkeletonGenericProps {
   width?: number | string
   size?: never
   className?: string
-  /**
-   * @deprecated Use `className` and TailwindCSS instead
-   */
-  marginRight?: number | string
-  /**
-   * @deprecated Use `className` and TailwindCSS instead
-   */
-  marginBottom?: number | string
-  /**
-   * @deprecated Use `className` and TailwindCSS instead
-   */
-  marginTop?: number | string
   color?: SkeletonColor
 }
 
@@ -83,16 +59,10 @@ export const Skeleton = ({
   variant,
   color,
   size,
-  marginBottom,
-  marginRight,
-  marginTop,
   width,
 }: SkeletonConnectorProps | SkeletonGenericProps) => {
   return (
     <SkeletonContainer
-      $marginRight={marginRight}
-      $marginBottom={marginBottom}
-      $marginTop={marginTop}
       $width={size ? mapAvatarSize(size) : width}
       className={tw(skeletonStyles({ variant, color, size }), className)}
     />
@@ -101,28 +71,7 @@ export const Skeleton = ({
 
 const SkeletonContainer = styled.div<{
   $width?: number | string
-  $marginRight?: number | string
-  $marginBottom?: number | string
-  $marginTop?: number | string
 }>`
   width: ${({ $width }) =>
     !$width ? 0 : typeof $width === 'number' ? `${$width}px !important` : `${$width} !important`};
-  margin-right: ${({ $marginRight }) =>
-    !$marginRight
-      ? 0
-      : typeof $marginRight === 'number'
-        ? `${$marginRight}px ! important`
-        : `${$marginRight} !important`};
-  margin-bottom: ${({ $marginBottom }) =>
-    !$marginBottom
-      ? 0
-      : typeof $marginBottom === 'number'
-        ? `${$marginBottom}px ! important`
-        : `${$marginBottom} !important`};
-  margin-top: ${({ $marginTop }) =>
-    !$marginTop
-      ? 0
-      : typeof $marginTop === 'number'
-        ? `${$marginTop}px ! important`
-        : `${$marginTop} !important`};
 `
diff --git a/src/components/designSystem/graphs/ChartHeader.tsx b/src/components/designSystem/graphs/ChartHeader.tsx
@@ -22,7 +22,7 @@ const ChartHeader = ({
     <>
       {!!loading ? (
         <div className="flex h-14 flex-col justify-between pb-2 pt-1">
-          <Skeleton variant="text" width={72} marginBottom={4} />
+          <Skeleton variant="text" width={72} className="mb-1" />
           <Skeleton variant="text" width={160} />
         </div>
       ) : (

diff --git a/src/components/details/DetailsHeader.tsx b/src/components/details/DetailsHeader.tsx
@@ -37,7 +37,7 @@ export const DetailsHeaderSkeleton = () => {
 
       <HeaderDetailsWrapper>
         <LoadingWrapper>
-          <Skeleton variant="text" width={200} marginBottom={20} />
+          <Skeleton variant="text" width={200} className="mb-4" />
           <Skeleton variant="text" width={200} />
         </LoadingWrapper>
       </HeaderDetailsWrapper>

diff --git a/src/components/form/ComboBox/ComboBox.tsx b/src/components/form/ComboBox/ComboBox.tsx
@@ -135,7 +135,7 @@ export const ComboBox = ({
         <LoadingIemsWrapper>
           {[1, 2, 3].map((i) => (
             <LoadingItem key={`combobox-loading-item-${i}`}>
-              <Skeleton variant="circular" size="small" marginRight="16px" />
+              <Skeleton variant="circular" size="small" className="mr-4" />
               <Skeleton variant="text" width="100%" />
             </LoadingItem>
           ))}

diff --git a/src/components/layouts/Settings.tsx b/src/components/layouts/Settings.tsx
@@ -36,9 +36,9 @@ export const SettingsListItemLoadingSkeleton = ({ count = 1 }: { count?: number
       key={`settings-list-item-skeleton-${index}`}
       className="flex w-full flex-col justify-between pb-8 shadow-b last:pb-0 last:[box-shadow:none]"
     >
-      <Skeleton variant="text" width={160} marginBottom={24} />
-      <Skeleton variant="text" width={320} marginBottom={28} />
-      <Skeleton variant="text" width={240} marginBottom={8} />
+      <Skeleton variant="text" width={160} className="mb-6" />
+      <Skeleton variant="text" width={320} className="mb-7" />
+      <Skeleton variant="text" width={240} className="mb-2" />
     </div>
   ))
 

diff --git a/src/components/plans/PlanItem.tsx b/src/components/plans/PlanItem.tsx
@@ -163,8 +163,8 @@ export const PlanItem = memo(
 export const PlanItemSkeleton = () => {
   return (
     <BaseListItem>
-      <Skeleton variant="connectorAvatar" size="big" marginRight={theme.spacing(3)} />
-      <Skeleton variant="text" width={240} marginRight="auto" />
+      <Skeleton variant="connectorAvatar" size="big" className="mr-3" />
+      <Skeleton variant="text" width={240} className="mr-auto" />
       <Skeleton variant="text" width={240} />
     </BaseListItem>
   )

diff --git a/src/components/plans/details/PlanSubscriptionListItem.tsx b/src/components/plans/details/PlanSubscriptionListItem.tsx
@@ -107,7 +107,7 @@ export const PlanSubscriptionListItemSkeleton = ({
       <CustomerNameWrapper>
         <Skeleton variant="circular" size="big" />
         <CustomerBlockInfos>
-          <Skeleton variant="text" width={160} marginBottom={14} />
+          <Skeleton variant="text" width={160} className="mb-3" />
           <Skeleton variant="text" width={100} />
         </CustomerBlockInfos>
       </CustomerNameWrapper>

diff --git a/src/components/settings/PreviewEmailLayout.tsx b/src/components/settings/PreviewEmailLayout.tsx
@@ -5,7 +5,6 @@ import { useContextualLocale } from '~/hooks/core/useContextualLocale'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useEmailConfig } from '~/hooks/useEmailConfig'
 import Logo from '~/public/images/logo/lago-logo-grey.svg'
-import { theme } from '~/styles'
 
 import {
   UpdateOrganizationLogoDialog,
@@ -41,7 +40,7 @@ export const PreviewEmailLayout: FC<PreviewEmailLayoutProps> = ({
     <>
       <div>
         {isLoading ? (
-          <Skeleton color="dark" variant="text" width={360} marginBottom={22} />
+          <Skeleton color="dark" variant="text" width={360} className="mb-5" />
         ) : (
           <Typography className="mb-4" variant="bodyHl" color="grey700">
             {emailObject}
@@ -53,7 +52,7 @@ export const PreviewEmailLayout: FC<PreviewEmailLayoutProps> = ({
             <>
               <Skeleton color="dark" variant="circular" size="big" className="mr-4" />
               <div>
-                <Skeleton color="dark" variant="text" width={240} marginBottom={theme.spacing(2)} />
+                <Skeleton color="dark" variant="text" width={240} className="mb-2" />
                 <Skeleton color="dark" variant="text" width={120} />
               </div>
             </>
@@ -81,12 +80,7 @@ export const PreviewEmailLayout: FC<PreviewEmailLayoutProps> = ({
           <div className="mb-8 flex items-center justify-center not-last-child:mr-3">
             {isLoading ? (
               <>
-                <Skeleton
-                  color="dark"
-                  variant="connectorAvatar"
-                  size="medium"
-                  marginRight={theme.spacing(3)}
-                />
+                <Skeleton color="dark" variant="connectorAvatar" size="medium" className="mr-3" />
                 <Skeleton color="dark" variant="text" width={120} />
               </>
             ) : (

diff --git a/src/components/settings/integrations/AnrokIntegrationSettings.tsx b/src/components/settings/integrations/AnrokIntegrationSettings.tsx
@@ -154,7 +154,7 @@ const AnrokIntegrationSettings = () => {
               <>
                 {[0, 1, 2].map((i) => (
                   <Item key={`item-skeleton-item-${i}`}>
-                    <Skeleton variant="connectorAvatar" size="big" marginRight="16px" />
+                    <Skeleton variant="connectorAvatar" size="big" className="mr-4" />
                     <Skeleton variant="text" width={240} />
                   </Item>
                 ))}
@@ -259,7 +259,6 @@ const AnrokIntegrationSettings = () => {
           </Button>
         </Stack>
       </Settings>
-
       <AddAnrokDialog ref={addAnrokDialogRef} />
       <DeleteAnrokIntegrationDialog ref={deleteDialogRef} />
       <AddEditDeleteSuccessRedirectUrlDialog ref={successRedirectUrlDialogRef} />

diff --git a/src/components/settings/integrations/IntegrationItemLine.tsx b/src/components/settings/integrations/IntegrationItemLine.tsx
@@ -35,7 +35,7 @@ const IntegrationItemLine = ({
         <Stack direction="row" alignItems="center" gap={3} sx={{ flex: 1 }}>
           <Skeleton variant="connectorAvatar" size="big" />
           <Stack sx={{ flex: 1 }}>
-            <Skeleton variant="text" width={180} marginBottom={10} />
+            <Skeleton variant="text" width={180} className="mb-2" />
             <Skeleton variant="text" width={80} />
           </Stack>
         </Stack>

diff --git a/src/components/settings/integrations/NetsuiteIntegrationSettings.tsx b/src/components/settings/integrations/NetsuiteIntegrationSettings.tsx
@@ -161,7 +161,7 @@ const NetsuiteIntegrationSettings = () => {
               <>
                 {[0, 1, 2].map((i) => (
                   <Item key={`item-skeleton-item-${i}`}>
-                    <Skeleton variant="connectorAvatar" size="big" marginRight="16px" />
+                    <Skeleton variant="connectorAvatar" size="big" className="mr-4" />
                     <Skeleton variant="text" width={240} />
                   </Item>
                 ))}
@@ -281,7 +281,6 @@ const NetsuiteIntegrationSettings = () => {
           </>
         </section>
       </Settings>
-
       <AddNetsuiteDialog ref={addNetsuiteDialogRef} />
       <DeleteNetsuiteIntegrationDialog ref={deleteDialogRef} />
       <AddEditDeleteSuccessRedirectUrlDialog ref={successRedirectUrlDialogRef} />

diff --git a/src/components/settings/integrations/XeroIntegrationSettings.tsx b/src/components/settings/integrations/XeroIntegrationSettings.tsx
@@ -162,7 +162,7 @@ const XeroIntegrationSettings = () => {
               <>
                 {[0, 1, 2].map((i) => (
                   <Item key={`item-skeleton-item-${i}`}>
-                    <Skeleton variant="connectorAvatar" size="big" marginRight="16px" />
+                    <Skeleton variant="connectorAvatar" size="big" className="mr-4" />
                     <Skeleton variant="text" width={240} />
                   </Item>
                 ))}
@@ -216,7 +216,6 @@ const XeroIntegrationSettings = () => {
           </>
         </section>
       </Settings>
-
       <AddXeroDialog ref={addXeroDialogRef} />
       <DeleteXeroIntegrationDialog ref={deleteDialogRef} />
       <AddEditDeleteSuccessRedirectUrlDialog ref={successRedirectUrlDialogRef} />