Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

misc(Skeleton): migrate to remove unnecessary attribute #1854

Merged
merged 1 commit into from
Nov 8, 2024
Merged

misc(Skeleton): migrate to remove unnecessary attribute #1854

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"translations:add": "node scripts/translations/add",
"translations:inspect": "node scripts/translations/inspect",
"changelog:update": "auto-changelog --template=.changelog/regular.hbs",
"codemod": "node scripts/codemod.js",
"postinstall": "npx yarn-deduplicate"
},
"devDependencies": {
Expand Down Expand Up @@ -85,6 +86,7 @@
"html-webpack-plugin": "5.5.1",
"jest": "29.7.0",
"jest-environment-jsdom": "29.7.0",
"jscodeshift": "^17.1.1",
"postcss": "^8.4.38",
"postcss-loader": "^8.1.1",
"postcss-preset-env": "^9.5.13",
Expand Down
27 changes: 27 additions & 0 deletions scripts/codemod.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/* eslint no-console: ["error", { allow: ["info"] }] */

const path = require('path')

const { globSync } = require('glob')
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 options = {
// dry: true, // dry run (no changes are made to files)
verbose: 1,
parser: 'tsx',
}

async function main() {
try {
await jscodeshift(transformPath, paths, options)
} catch (e) {
console.info('\u001b[' + 31 + 'm' + 'Codemod transform failed' + '\u001b[0m', e)
process.exit(1)
}
}

main()
35 changes: 35 additions & 0 deletions scripts/transforms/skeleton-remove-unnecessary-height.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
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 JSX elements with the name FontAwesomeIcon...
.findJSXElements('Skeleton')
.filter((path) => {
// ...that have a variant text attribute...
const hasVariant = path.value.openingElement.attributes.some(
(attr) => attr.name.name === 'variant' && attr.value.value === 'text',
)
// ...and a height attribute with value 12
const hasHeight = path.value.openingElement.attributes.some(
(attr) => attr.name.name === 'height' && attr.value.expression.value === 12,
)

return hasVariant && hasHeight
})
// Get the height attribute node
.find(j.JSXAttribute, {
name: {
type: 'JSXIdentifier',
name: 'height',
},
})
// Remove it
.remove()

// Save changes to the file
return root.toSource()
}
1 change: 0 additions & 1 deletion src/components/coupons/CouponItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,6 @@ export const CouponItem = ({
</div>
{shouldShowItemActions && <div className="w-10" />}
</ConditionalWrapper>

{shouldShowItemActions && (
<Popper
PopperProps={{ placement: 'bottom-end' }}
Expand Down
20 changes: 8 additions & 12 deletions src/components/creditNote/CreditNoteFormCalculation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ export const CreditNoteFormCalculation = ({
</InlineLabel>
<Typography color="grey700" data-test="prorated-coupon-amount">
{estiationLoading ? (
<ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} height={12} />
<ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} />
) : !proRatedCouponAmount || hasError ? (
'-'
) : (
Expand All @@ -258,7 +258,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} height={12} />
<ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} />
) : !totalExcludedTax || hasError ? (
'-'
) : (
Expand All @@ -273,7 +273,7 @@ export const CreditNoteFormCalculation = ({
<Typography variant="bodyHl">{translate('text_636bedf292786b19d3398f06')}</Typography>
<Typography color="grey700">
{estiationLoading ? (
<ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} height={12} />
<ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} />
) : (
'-'
)}
Expand All @@ -289,11 +289,7 @@ export const CreditNoteFormCalculation = ({
</Typography>
<Typography color="grey700" data-test={`tax-${tax.taxRate}-amount`}>
{estiationLoading ? (
<ValueSkeleton
variant="text"
width={LOADING_VALUE_SKELETON_WIDTH}
height={12}
/>
<ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} />
) : !tax.amount || hasError ? (
'-'
) : (
Expand All @@ -311,7 +307,7 @@ export const CreditNoteFormCalculation = ({
)} (0%)`}</Typography>
<Typography color="grey700">
{estiationLoading ? (
<ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} height={12} />
<ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} />
) : hasError ? (
'-'
) : (
Expand All @@ -328,7 +324,7 @@ export const CreditNoteFormCalculation = ({
</Typography>
<Typography color="grey700" data-test="total-tax-included">
{estiationLoading ? (
<ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} height={12} />
<ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} />
) : !totalTaxIncluded || hasError ? (
'-'
) : (
Expand All @@ -345,7 +341,7 @@ export const CreditNoteFormCalculation = ({
</Typography>
<Typography color="grey700">
{estiationLoading ? (
<ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} height={12} />
<ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} />
) : totalTaxIncluded === undefined || hasError ? (
'-'
) : (
Expand Down Expand Up @@ -453,7 +449,7 @@ export const CreditNoteFormCalculation = ({
) : (
<Typography color="grey700">
{estiationLoading ? (
<ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} height={12} />
<ValueSkeleton variant="text" width={LOADING_VALUE_SKELETON_WIDTH} />
) : !payBack[0]?.value || hasError ? (
'-'
) : (
Expand Down
12 changes: 6 additions & 6 deletions src/components/creditNote/CreditNotesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,12 +113,12 @@ type TCreditNoteTableProps = {
const CreditNoteTableItemSkeleton = () => {
return (
<SkeletonLine>
<Skeleton variant="text" width={180} height={12} />
<Skeleton variant="text" width={80} height={12} />
<Skeleton variant="text" width={160} height={12} />
<RightSkeleton variant="text" width={160} height={12} />
<Skeleton variant="text" width={112} height={12} />
<Skeleton variant="text" width={40} height={12} />
<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} />
</SkeletonLine>
)
}
Expand Down
76 changes: 38 additions & 38 deletions src/components/customerPortal/common/SectionLoading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ const group = (

<div className="grid grid-cols-2">
<div className="flex flex-col gap-3">
<Skeleton variant="text" height={12} width={72} />
<Skeleton variant="text" height={12} width={160} />
<Skeleton variant="text" width={72} />
<Skeleton variant="text" width={160} />
</div>

<div className="flex flex-col gap-3">
<Skeleton variant="text" height={12} width={72} />
<Skeleton variant="text" height={12} width={160} />
<Skeleton variant="text" width={72} />
<Skeleton variant="text" width={160} />
</div>
</div>
</div>
Expand All @@ -22,27 +22,27 @@ const group = (
export const LoaderUsageSection = () => (
<div className="grid grid-cols-2">
<div className="flex flex-col gap-3">
<Skeleton variant="text" height={12} width={72} />
<Skeleton variant="text" height={12} width={160} />
<Skeleton variant="text" height={12} width={240} />
<Skeleton variant="text" height={12} width={72} />
<Skeleton variant="text" width={72} />
<Skeleton variant="text" width={160} />
<Skeleton variant="text" width={240} />
<Skeleton variant="text" width={72} />
</div>

<div className="flex flex-col gap-3">
<Skeleton variant="text" height={12} width={72} />
<Skeleton variant="text" height={12} width={160} />
<Skeleton variant="text" height={12} width={240} />
<Skeleton variant="text" height={12} width={72} />
<Skeleton variant="text" width={72} />
<Skeleton variant="text" width={160} />
<Skeleton variant="text" width={240} />
<Skeleton variant="text" width={72} />
</div>
</div>
)

export const LoaderUsageSubscriptionItem = () => (
<div className="flex flex-col gap-3">
<Skeleton variant="text" height={12} width={72} />
<Skeleton variant="text" height={12} width={160} />
<Skeleton variant="text" height={12} width={240} />
<Skeleton variant="text" height={12} width={72} />
<Skeleton variant="text" width={72} />
<Skeleton variant="text" width={160} />
<Skeleton variant="text" width={240} />
<Skeleton variant="text" width={72} />
</div>
)

Expand All @@ -57,47 +57,47 @@ export const LoaderWalletPage = () => (
export const LoaderWalletSection = () => (
<div className="grid grid-cols-2">
<div className="flex flex-col gap-3">
<Skeleton variant="text" height={12} width={72} />
<Skeleton variant="text" height={12} width={160} />
<Skeleton variant="text" width={72} />
<Skeleton variant="text" width={160} />
</div>

<div className="flex flex-col gap-3">
<Skeleton variant="text" height={12} width={72} />
<Skeleton variant="text" height={12} width={160} />
<Skeleton variant="text" width={72} />
<Skeleton variant="text" width={160} />
</div>
</div>
)

export const LoaderCustomerInformationSection = () => (
<div className="grid grid-cols-2 gap-6">
<div className="flex flex-col gap-3">
<Skeleton variant="text" height={12} width={72} />
<Skeleton variant="text" height={12} width={240} />
<Skeleton variant="text" width={72} />
<Skeleton variant="text" width={240} />
</div>

<div className="flex flex-col gap-3">
<Skeleton variant="text" height={12} width={72} />
<Skeleton variant="text" height={12} width={240} />
<Skeleton variant="text" width={72} />
<Skeleton variant="text" width={240} />
</div>

<div className="flex flex-col gap-3">
<Skeleton variant="text" height={12} width={72} />
<Skeleton variant="text" height={12} width={240} />
<Skeleton variant="text" width={72} />
<Skeleton variant="text" width={240} />
</div>

<div className="flex flex-col gap-3">
<Skeleton variant="text" height={12} width={72} />
<Skeleton variant="text" height={12} width={240} />
<Skeleton variant="text" width={72} />
<Skeleton variant="text" width={240} />
</div>

<div className="flex flex-col gap-3">
<Skeleton variant="text" height={12} width={72} />
<Skeleton variant="text" height={12} width={240} />
<Skeleton variant="text" width={72} />
<Skeleton variant="text" width={240} />
</div>

<div className="flex flex-col gap-3">
<Skeleton variant="text" height={12} width={72} />
<Skeleton variant="text" height={12} width={240} />
<Skeleton variant="text" width={72} />
<Skeleton variant="text" width={240} />
</div>
</div>
)
Expand All @@ -120,24 +120,24 @@ export const LoaderInvoicesListSection = () => (

export const LoaderInvoicesListTotal = () => (
<div className="flex flex-col gap-3">
<Skeleton variant="text" height={12} width={72} />
<Skeleton variant="text" height={12} width={240} />
<Skeleton variant="text" width={72} />
<Skeleton variant="text" width={240} />
</div>
)

export const LoaderSidebarOrganization = () => (
<div className="flex flex-col gap-8">
<Skeleton className="!rounded-[8px] bg-grey-200" variant="text" height={32} width={32} />
<Skeleton className="bg-grey-200" variant="text" height={12} width={228} />
<Skeleton className="bg-grey-200" variant="text" width={228} />
</div>
)

export const SectionLoading = () => {
return (
<div className="flex flex-col gap-2">
<Skeleton variant="text" height={12} width={120} />
<Skeleton variant="text" height={12} width={160} />
<Skeleton variant="text" height={12} width={200} />
<Skeleton variant="text" width={120} />
<Skeleton variant="text" width={160} />
<Skeleton variant="text" width={200} />
</div>
)
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/customerPortal/common/SectionTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const SectionTitle = ({ className, title, action, loading }: SectionTitleProps)
<div className={tw('mb-6 flex items-center pb-4 shadow-b', className)}>
{loading ? (
<div className="flex h-7 w-full items-center">
<Skeleton variant="text" width={160} height={12} />
<Skeleton variant="text" width={160} />
</div>
) : (
<>
Expand Down
2 changes: 1 addition & 1 deletion src/components/customers/CustomerInvoicesTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export const CustomerInvoicesTab = ({ customerId, customerTimezone }: CustomerIn
<div>
{initialLoad ? (
<LoadingState>
<Skeleton variant="text" width={224} height={12} marginBottom="30px" />
<Skeleton variant="text" width={224} marginBottom="30px" />
<CustomerInvoicesList
isLoading
customerTimezone={customerTimezone}
Expand Down
5 changes: 2 additions & 3 deletions src/components/customers/CustomerItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,6 @@ export const CustomerItem = memo(({ rowId, customer, editDialogRef }: CustomerIt
)}
</Popper>
)}

<DeleteCustomerDialog ref={deleteDialogRef} customer={customer} />
</ItemContainer>
)
Expand All @@ -147,8 +146,8 @@ export const CustomerItemSkeleton = () => {
return (
<BaseListItem>
<Skeleton variant="connectorAvatar" size="big" marginRight={theme.spacing(3)} />
<Skeleton variant="text" height={12} width={240} marginRight="auto" />
<Skeleton variant="text" height={12} width={240} />
<Skeleton variant="text" width={240} marginRight="auto" />
<Skeleton variant="text" width={240} />
</BaseListItem>
)
}
Expand Down
Loading
Loading