Skip to content

Commit

Permalink
feat: ignore images from coverage (#1479)
Browse files Browse the repository at this point in the history 
Co-authored-by: rzpcibot <tools+cibot@razorpay.com>
  • Loading branch information
@kamleshchandnani @rzpcibot
kamleshchandnani and rzpcibot authored Aug 2, 2023
1 parent 81b5ab8 commit 6a1d8d7
Show file tree
Hide file tree
Showing 3 changed files with 155 additions and 4 deletions.
67 changes: 67 additions & 0 deletions packages/plugin-figma-blade-coverage/src/bladeLibraryConstants.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
export const paymentLightThemeData = {
components: {
Tag: {
key: '81164abfd2c6ffeae87ae0719cd52a1ce62d6473',
},
'BottomSheet/Header': {
key: '03fa4ffc23c92fdf4b0afa2b3d4977d8e0d01323',
},
Expand All @@ -12,6 +15,9 @@ export const paymentLightThemeData = {
'Bottom Sheet': {
key: '18c8adc53a8c9c098e19259036c5ddec47debda4',
},
'Accordion Group': {
key: 'a776cbd4cade27a19e056919a098bbe0dc5745f0',
},
'ActionListItems Group': {
key: '1e18a66e07ce9830b6a4e440a9b7c02ae55d069b',
},
Expand Down Expand Up @@ -4095,9 +4101,15 @@ export const paymentLightThemeData = {

export const bankingDarkThemeData = {
components: {
Tag: {
key: '2dcc0c0d31f0cc40b5b9c1e8a4b7866270511056',
},
Link: {
key: '003d08a00aa841104a655caddf61a1651f85ff04',
},
'Accordion Group': {
key: 'd9add274971a2f47efaf48045402c6d010dca28c',
},
'ActionListItems Group': {
key: '0245d993ec15fcebd8259d8bc13053012301e4d2',
},
Expand Down Expand Up @@ -8215,3 +8227,58 @@ export const BLADE_COLOR_STYLE_IDS = [
(colorStyle) => colorStyle.id.split(',')[0],
),
];

const allowedBackgroundColorTokenNames = [
'Brand/Primary',
'Brand/Secondary',
'Brand/Gray',
'Surface/Background',
];
export const BLADE_BOX_BACKGROUND_COLOR_STYLE_IDS = [
...Object.entries(paymentLightThemeData.colorStyles)
.map(([colorStyleKey, colorStyleObj]) => {
return allowedBackgroundColorTokenNames.reduce<string[]>((acc, backgroundTokenName) => {
if (colorStyleKey.includes(backgroundTokenName)) {
return [...acc, colorStyleObj.id.split(',')[0]];
}
return acc;
}, []);
})
.flat()
.filter(Boolean),
...Object.entries(bankingDarkThemeData.colorStyles)
.map(([colorStyleKey, colorStyleObj]) => {
return allowedBackgroundColorTokenNames.reduce<string[]>((acc, backgroundTokenName) => {
if (colorStyleKey.includes(backgroundTokenName)) {
return [...acc, colorStyleObj.id.split(',')[0]];
}
return acc;
}, []);
})
.flat()
.filter(Boolean),
];

const allowedBorderColorTokenNames = ['Surface/Border'];
export const BLADE_BOX_BORDER_COLOR_STYLE_IDS = [
...Object.entries(paymentLightThemeData.colorStyles)
.map(([colorStyleKey, colorStyleObj]) => {
return allowedBorderColorTokenNames.reduce((_, borderTokenName) => {
if (colorStyleKey.includes(borderTokenName)) {
return colorStyleObj.id.split(',')[0];
}
return '';
}, '');
})
.filter(Boolean),
...Object.entries(bankingDarkThemeData.colorStyles)
.map(([colorStyleKey, colorStyleObj]) => {
return allowedBorderColorTokenNames.reduce((_, borderTokenName) => {
if (colorStyleKey.includes(borderTokenName)) {
return colorStyleObj.id.split(',')[0];
}
return '';
}, '');
})
.filter(Boolean),
];
74 changes: 70 additions & 4 deletions packages/plugin-figma-blade-coverage/src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import {
} from '@create-figma-plugin/utilities';

import {
BLADE_BOX_BACKGROUND_COLOR_STYLE_IDS,
BLADE_BOX_BORDER_COLOR_STYLE_IDS,
BLADE_COLOR_STYLE_IDS,
BLADE_COMPONENT_IDS,
BLADE_TEXT_STYLE_IDS,
Expand All @@ -24,7 +26,7 @@ type CoverageMetrics = {
};

const MAIN_FRAME_NODES = ['FRAME', 'SECTION'];
const NODES_SKIP_FROM_COVERAGE = ['GROUP', 'SECTION', 'VECTOR', 'FRAME'];
const NODES_SKIP_FROM_COVERAGE = ['GROUP', 'SECTION', 'VECTOR', 'FRAME', 'ELLIPSE'];
const nonBladeHighlighterNodes: BaseNode[] = [];
const bladeCoverageCards: BaseNode[] = [];

Expand Down Expand Up @@ -69,6 +71,7 @@ const renderCoverageCard = async ({
nonBladeColorStyles,
nonBladeTextStyles,
totalLayers,
bladeCoverage,
}: {
mainFrameNode: SceneNode;
} & CoverageMetrics): Promise<void> => {
Expand Down Expand Up @@ -104,7 +107,6 @@ const renderCoverageCard = async ({
BLADE_INTENT_COLOR_KEYS[intent as 'positive' | 'negative' | 'notice'].id = colorStyle.id;
}

const bladeCoverage = Number((bladeComponents / totalLayers) * 100);
let coverageColorIntent = BLADE_INTENT_COLOR_KEYS.negative.id;
let bladeCoverageType = 'Very Low 😭';
const PROGRESS_BAR_MAX_WIDTH = 254;
Expand Down Expand Up @@ -277,10 +279,46 @@ const calculateCoverage = (node: SceneNode): CoverageMetrics | null => {
nonBladeColorStyles++;
highlightNonBladeNode(traversedNode);
}
} else if (traversedNode.type === 'RECTANGLE') {
let isImage = false;

if (traversedNode.fills !== figma.mixed) {
// figma considers images as rectangles with fille type as IMAGE
isImage = Boolean(traversedNode.fills.find((fill) => fill.type === 'IMAGE'));
}

if (isImage) {
NODES_SKIP_FROM_COVERAGE.push('RECTANGLE');
}

if (!isImage && (traversedNode.strokeStyleId || traversedNode.fillStyleId)) {
// check if rectangle uses blade surface.border.* colors for border
if (traversedNode.strokeStyleId) {
const traversedNodeColorStyleId = traversedNode.strokeStyleId.split(',')[0];
if (BLADE_BOX_BORDER_COLOR_STYLE_IDS.includes(traversedNodeColorStyleId ?? '')) {
bladeColorStyles++;
} else {
nonBladeColorStyles++;
highlightNonBladeNode(traversedNode);
}
}
// check if rectangle uses blade brand.* or surface.background.* colors for background
if (traversedNode.fillStyleId && traversedNode.fillStyleId !== figma.mixed) {
const traversedNodeFillStyleId = traversedNode.fillStyleId.split(',')[0];
if (BLADE_BOX_BACKGROUND_COLOR_STYLE_IDS.includes(traversedNodeFillStyleId ?? '')) {
bladeColorStyles++;
} else {
nonBladeColorStyles++;
highlightNonBladeNode(traversedNode);
}
}
}
}

if (
![...NODES_SKIP_FROM_COVERAGE, 'INSTANCE', 'TEXT', 'LINE'].includes(traversedNode.type) &&
![...NODES_SKIP_FROM_COVERAGE, 'INSTANCE', 'TEXT', 'LINE', 'RECTANGLE'].includes(
traversedNode.type,
) &&
getParentNode(traversedNode)?.type !== 'PAGE'
) {
highlightNonBladeNode(traversedNode);
Expand All @@ -293,6 +331,14 @@ const calculateCoverage = (node: SceneNode): CoverageMetrics | null => {
// exclude the main frame itself from the count to remove false negatives
totalLayers++;
}

// remove rectangle node index for next iteration because we don't want to remove all the rectangle nodes, only the image ones
const rectangleImageNodeIndex = NODES_SKIP_FROM_COVERAGE.findIndex(
(nodeName) => nodeName === 'RECTANGLE',
);
if (rectangleImageNodeIndex !== -1) {
NODES_SKIP_FROM_COVERAGE.splice(rectangleImageNodeIndex, 1);
}
},
(traversedNode) => {
// callback to stopTraversal for children of a node
Expand Down Expand Up @@ -331,7 +377,10 @@ const calculateCoverage = (node: SceneNode): CoverageMetrics | null => {
nonBladeTextStyles,
nonBladeColorStyles,
totalLayers,
bladeCoverage: Number((bladeComponents / totalLayers) * 100),
bladeCoverage:
bladeComponents === 0 && totalLayers === 0
? 0
: Number((bladeComponents / totalLayers) * 100),
};
};

Expand All @@ -358,11 +407,28 @@ const getPageMainFrameNodes = (nodes: readonly SceneNode[]): SceneNode[] => {
return mainFrameNodes;
};

const removeOldGroupNodes = (): void => {
// remove all teh old group nodes
const bladeCoverageCardsGroup = figma.currentPage.findOne(
(node) => node.name === 'Blade Coverage Cards',
);
const nonBladeItemsGroup = figma.currentPage.findOne((node) => node.name === 'Non Blade Items');

if (bladeCoverageCardsGroup) {
bladeCoverageCardsGroup.remove();
}
if (nonBladeItemsGroup) {
nonBladeItemsGroup.remove();
}
};

const main = async (): Promise<void> => {
try {
figma.skipInvisibleInstanceChildren = true;
figma.notify('Calculating Coverage', { timeout: Infinity });

removeOldGroupNodes();

let nodes: readonly SceneNode[] = [];
if (figma.currentPage.selection.length > 0) {
// you already have the selection, run the plugin
Expand Down
18 changes: 18 additions & 0 deletions packages/plugin-figma-blade-coverage/src/utils/getComponentKeyToNameMap.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,24 @@
* '042e23e06d6b21818f6ecfa2ef75f8112a5a4d32': 'Modal',
* }
*/

/** usage:
traverseNode(
mainFrameNode,
(traversedNode) => {
if (traversedNode.type === 'INSTANCE') {
console.log(getComponentKeyToNameMap(traversedNode));
}
},
(node) => {
if (node.type === 'INSTANCE') {
return true;
}
return false;
},
);
*/

export const getComponentKeyToNameMap = (node: InstanceNode): Record<string | number, string> => {
if ((node.mainComponent?.parent as ComponentSetNode)?.key) {
return {
Expand Down

0 comments on commit 6a1d8d7

Please sign in to comment.