misc(Skeleton): use className to define style

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-width-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,

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()
+}

scripts/transforms/skeleton-migrate-width-values.js

@@ -0,0 +1,94 @@
+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) => {
+      // ...with a width attribute defined
+      const hasWidthDefined = path.value.openingElement.attributes.some(
+        (attr) => attr.name.name === 'width',
+      )
+
+      return hasWidthDefined
+    })
+    .forEach((path) => {
+      // Create a map of margin values
+      let className = ''
+
+      path.value.openingElement.attributes.forEach((attr) => {
+        //         if (attr.name.name === 'width') {
+        //           console.log(
+        //             attr,
+        //             `
+        // ------------------------------------------------------------------------------------------------------------------------------------------------------
+        // ------------------------------------------------------------------------------------------------------------------------------------------------------
+        // ------------------------------------------------------------------------------------------------------------------------------------------------------
+        // ------------------------------------------------------------------------------------------------------------------------------------------------------
+        // ------------------------------------------------------------------------------------------------------------------------------------------------------
+        //             `,
+        //           )
+
+        if (
+          attr.value.type === 'JSXExpressionContainer' &&
+          attr.value.expression.type === 'NumericLiteral'
+        ) {
+          let localValue = attr.value.expression.value
+
+          let i = 10
+
+          while (localValue % 4 !== 0 && i !== 0) {
+            if (localValue < 4) {
+              localValue = 4
+              break
+            } else {
+              localValue -= 1
+              i--
+            }
+          }
+
+          className = `w-${localValue / 4}`
+        } else if (
+          attr.value.type === 'StringLiteral' &&
+          (attr.value.value === '100%' || attr.value.value === 'inherit')
+        ) {
+          className = ''
+        } else if (attr.value.type === 'StringLiteral' && attr.value.value.includes('%')) {
+          className = `w-[${attr.value.value}]`
+        }
+      })
+
+      // 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(className)),
+        )
+      } else {
+        // If element has className attribute, update it
+        path.value.openingElement.attributes = path.value.openingElement.attributes.map((attr) => {
+          if (attr.name.name === 'className') {
+            attr.value.value += ` ${className}`
+          }
+
+          return attr
+        })
+      }
+
+      // remove width related attributes
+      path.value.openingElement.attributes = path.value.openingElement.attributes.filter(
+        (attr) => attr.name.name !== 'width',
+      )
+    })
+
+  // Save changes to the file
+  return root.toSource()
+}

src/components/creditNote/CreditNoteFormCalculation.tsx

@@ -25,8 +25,6 @@ import { theme } from '~/styles'
 
 import { CreditNoteForm, CreditTypeEnum, PayBackErrorEnum } from './types'
 
-const LOADING_VALUE_SKELETON_WIDTH = 90
-
 gql`
   fragment InvoiceForCreditNoteFormCalculation on Invoice {
     id
@@ -241,7 +239,7 @@ export const CreditNoteFormCalculation = ({
             </InlineLabel>
             <Typography color="grey700" data-test="prorated-coupon-amount">
               {estiationLoading ? (
-                <ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} />
+                <Skeleton variant="text" className="w-22" />
               ) : !proRatedCouponAmount || hasError ? (
                 '-'
               ) : (
@@ -256,7 +254,7 @@ export const CreditNoteFormCalculation = ({
           <Typography variant="bodyHl">{translate('text_636bedf292786b19d3398f02')}</Typography>
           <Typography color="grey700" data-test="total-excluded-tax">
             {estiationLoading ? (
-              <ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} />
+              <Skeleton variant="text" className="w-22" />
             ) : !totalExcludedTax || hasError ? (
               '-'
             ) : (
@@ -270,11 +268,7 @@ export const CreditNoteFormCalculation = ({
           <Line>
             <Typography variant="bodyHl">{translate('text_636bedf292786b19d3398f06')}</Typography>
             <Typography color="grey700">
-              {estiationLoading ? (
-                <ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} />
-              ) : (
-                '-'
-              )}
+              {estiationLoading ? <Skeleton variant="text" className="w-22" /> : '-'}
             </Typography>
           </Line>
         ) : !!taxes?.size ? (
@@ -287,7 +281,7 @@ export const CreditNoteFormCalculation = ({
                 </Typography>
                 <Typography color="grey700" data-test={`tax-${tax.taxRate}-amount`}>
                   {estiationLoading ? (
-                    <ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} />
+                    <Skeleton variant="text" className="w-22" />
                   ) : !tax.amount || hasError ? (
                     '-'
                   ) : (
@@ -305,7 +299,7 @@ export const CreditNoteFormCalculation = ({
             )} (0%)`}</Typography>
             <Typography color="grey700">
               {estiationLoading ? (
-                <ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} />
+                <Skeleton variant="text" className="w-22" />
               ) : hasError ? (
                 '-'
               ) : (
@@ -322,7 +316,7 @@ export const CreditNoteFormCalculation = ({
           </Typography>
           <Typography color="grey700" data-test="total-tax-included">
             {estiationLoading ? (
-              <ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} />
+              <Skeleton variant="text" className="w-22" />
             ) : !totalTaxIncluded || hasError ? (
               '-'
             ) : (
@@ -339,7 +333,7 @@ export const CreditNoteFormCalculation = ({
             </Typography>
             <Typography color="grey700">
               {estiationLoading ? (
-                <ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} />
+                <Skeleton variant="text" className="w-22" />
               ) : totalTaxIncluded === undefined || hasError ? (
                 '-'
               ) : (
@@ -447,7 +441,7 @@ export const CreditNoteFormCalculation = ({
             ) : (
               <Typography color="grey700">
                 {estiationLoading ? (
-                  <ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} />
+                  <Skeleton variant="text" className="w-22" />
                 ) : !payBack[0]?.value || hasError ? (
                   '-'
                 ) : (
@@ -630,7 +624,3 @@ const InlineLabel = styled.div`
     margin-left: ${theme.spacing(2)};
   }
 `
-
-const ValueSkeleton = styled(Skeleton)`
-  width: ${LOADING_VALUE_SKELETON_WIDTH}px;
-`

src/components/creditNote/CreditNotesTable.tsx

@@ -113,12 +113,12 @@ type TCreditNoteTableProps = {
 const CreditNoteTableItemSkeleton = () => {
   return (
     <SkeletonLine>
-      <Skeleton variant="text" width={180} />
-      <Skeleton variant="text" width={80} />
-      <Skeleton variant="text" width={160} />
-      <RightSkeleton variant="text" width={160} />
-      <Skeleton variant="text" width={112} />
-      <Skeleton variant="text" width={40} />
+      <Skeleton variant="text" className="w-45" />
+      <Skeleton variant="text" className="w-20" />
+      <Skeleton variant="text" className="w-40" />
+      <Skeleton className="hidden w-40 justify-self-end md:flex" variant="text" />
+      <Skeleton variant="text" className="w-28" />
+      <Skeleton variant="text" className="w-10" />
     </SkeletonLine>
   )
 }
@@ -384,15 +384,6 @@ const SkeletonLine = styled(BaseListItem)`
   ${Grid()}
 `
 
-const RightSkeleton = styled(Skeleton)`
-  display: flex;
-  justify-self: end;
-
-  ${theme.breakpoints.down('md')} {
-    display: none;
-  }
-`
-
 const CustomerColumn = styled(Typography)`
   ${theme.breakpoints.down('md')} {
     display: none;