Skip to content

Commit 30882da

Browse files
nikita-popov-acunikita-popov-acu
committed
AC-355486: UI library update
1 parent dce3460 commit 30882da

9 files changed

Lines changed: 144 additions & 40 deletions

File tree

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,4 +74,7 @@ TEST-results.xml
7474
!webpack.config.js
7575
!jest.config.js
7676

77+
# Add Display Properties plugin
78+
!display-properties.js
79+
7780
**/dist/

‎figma-plugin/src/figma-field-set.ts‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {QPFieldset} from '@modern-ui-to-figma/elements';
33
import {AcuElementType} from '@modern-ui-to-figma/elements';
44
import {Grid} from '@modern-ui-to-figma/elements';
55
import {QPField} from '@modern-ui-to-figma/elements';
6+
import {LabelLength} from '@modern-ui-to-figma/elements';
67
import {compFieldset} from './figma-main';
78
import {FigmaGrid} from './figma-grid';
89
import {FigmaRow} from './figma-row';
@@ -19,20 +20,10 @@ export class FigmaFieldSet extends FigmaNode {
1920
'Show Row 7#5419:8',
2021
'Show Row 8#5419:7',
2122
'Show Row 9#5419:5',
22-
'Show Row 10#5419:12',
23-
'Show Row 11#5419:10',
24-
'Show Row 12#5419:3',
25-
'Show Row 13#5419:2',
26-
'Show Row 14#5419:6',
27-
'Show Row 15#5419:4',
28-
'Show Row 16#5419:16',
29-
'Show Row 17#5419:18',
30-
'Show Row 18#5419:1',
31-
'Show Row 19#5419:0',
32-
'Show Row 20#5419:14'
23+
'Show Row 10#5419:12'
3324
];
3425

35-
constructor(fs: QPFieldset, width = 0) {
26+
constructor(fs: QPFieldset, width = 0, labelLength: LabelLength = LabelLength.s) {
3627
super('FieldSet', 'INSTANCE', width);
3728
this.tryToFind = false;
3829
this.componentNode = compFieldset;
@@ -47,6 +38,7 @@ export class FigmaFieldSet extends FigmaNode {
4738
}
4839

4940
this.componentProperties['Wrapping'] = fs.Style;
41+
this.componentProperties['Label Length'] = labelLength;
5042

5143
let rowNumber = 0;
5244
for (const child of fs.Children) {
@@ -55,6 +47,9 @@ export class FigmaFieldSet extends FigmaNode {
5547
this.children.push(new FigmaGrid(child as unknown as Grid, 'Grid', false));
5648
} else
5749
this.children.push(new FigmaRow(child as QPField, `Row ${++rowNumber}`, this));
50+
51+
if (rowNumber == 10)
52+
break;
5853
}
5954

6055
for (let i = 0; i < FigmaFieldSet.showRowPropNames.length; i++)

‎figma-plugin/src/figma-main.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { QPImage } from '@modern-ui-to-figma/elements';
1616
import { QPRichTextEditor } from '@modern-ui-to-figma/elements';
1717
import { QPSplitContainer } from '@modern-ui-to-figma/elements';
1818
import { Template } from '@modern-ui-to-figma/elements';
19+
import { LabelLength } from '@modern-ui-to-figma/elements';
1920
import { QPTree } from '@modern-ui-to-figma/elements';
2021
import { AcuElement } from '@modern-ui-to-figma/elements';
2122
import { QPFieldset } from '@modern-ui-to-figma/elements';
@@ -267,13 +268,13 @@ export async function DrawFromJSON(input: string, reuseSummary: boolean): Promis
267268
}
268269
}
269270

270-
export function addChild(parent: FigmaNode, parentType: AcuElementType, child: AcuElement, slotWidth: number): void {
271+
export function addChild(parent: FigmaNode, parentType: AcuElementType, child: AcuElement, slotWidth: number, labelLength: LabelLength = LabelLength.s): void {
271272
switch (child.Type) {
272273
case AcuElementType.FieldSet:
273-
parent.children.push(new FigmaFieldSet(child as QPFieldset, slotWidth));
274+
parent.children.push(new FigmaFieldSet(child as QPFieldset, slotWidth, labelLength));
274275
break;
275276
case AcuElementType.FieldsetSlot:
276-
parent.children.push(new FigmaSlot(child as FieldsetSlot, slotWidth));
277+
parent.children.push(new FigmaSlot(child as FieldsetSlot, slotWidth, labelLength));
277278
break;
278279
case AcuElementType.Grid: {
279280
const grid = new FigmaGrid((child as unknown) as Grid, 'Grid', true);
@@ -362,6 +363,10 @@ async function CreateCanvas(screenName: string, screenTitle: string | null, back
362363
fieldHeader.componentProperties['Show Back Link#3139:0'] = backLink != null;
363364
fieldHeader.componentProperties['Link Value ▶#6711:0'] = backLink ?? '';
364365
fieldHeader.componentProperties['Title Value ▶#6711:8'] = screenTitle ?? '';
366+
const fieldToolbar = new FigmaNode('Toolbar');
367+
fieldToolbar.componentProperties['Filterbar#9334:0'] = false;
368+
fieldHeader.children.push(fieldToolbar);
369+
365370
frameCanvas.children.push(fieldHeader);
366371

367372
childrenNumber += countChildren(frameScreenVertical);

‎figma-plugin/src/figma-row.ts‎

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,25 @@ import {compCheckbox, logger} from './figma-main';
1616
import {FigmaCheckbox} from './figma-checkbox';
1717
import {FigmaValue} from './figma-value';
1818

19+
const supportedStatuses = ["Open", "Unpaid", "Paid", "New", "In Process", "Info Requested", "On Hold"] as const;
20+
1921
export class FigmaRow extends FigmaNode {
2022

2123
static rowTypes = new Map<QPFieldElementType, string>([
2224
[QPFieldElementType.Currency, 'Currency'],
2325
[QPFieldElementType.CheckBox, 'Checkbox'],
2426
[QPFieldElementType.DateTimeEdit, 'Date'],
25-
[QPFieldElementType.DropDown, 'Label + Field'],
26-
[QPFieldElementType.TextEditor, 'Label + Field'],
27-
[QPFieldElementType.Selector, 'Label + Field'],
28-
[QPFieldElementType.NumberEditor, 'Label + Number Field'],
29-
[QPFieldElementType.Status, 'Label + Field'],
30-
[QPFieldElementType.Button, 'Button'],
31-
[QPFieldElementType.RadioButton, 'Radio Button'],
32-
[QPFieldElementType.MultilineTextEditor, 'Label + Text Area'],
33-
[QPFieldElementType.HorizontalContainer, 'Label + Field'],
34-
[QPFieldElementType.LabelFieldCheckbox, 'Label + Field + Checkbox'],
35-
[QPFieldElementType.LabelFieldButton, 'Label + Field + Button']
27+
[QPFieldElementType.DropDown, 'Field'],
28+
[QPFieldElementType.TextEditor, 'Field'],
29+
[QPFieldElementType.Selector, 'Field'],
30+
[QPFieldElementType.NumberEditor, 'Number Field'],
31+
[QPFieldElementType.Status, 'Field'],
32+
[QPFieldElementType.Button, 'Button Left'],
33+
[QPFieldElementType.RadioButton, 'Radiobutton'],
34+
[QPFieldElementType.MultilineTextEditor, 'Text Area'],
35+
[QPFieldElementType.HorizontalContainer, 'Field'],
36+
[QPFieldElementType.LabelFieldCheckbox, 'Field + Checkbox'],
37+
[QPFieldElementType.LabelFieldButton, 'Field + Button']
3638
]);
3739

3840
constructor(field: QPField, name: string, parent: FigmaNode | null = null) {
@@ -61,7 +63,13 @@ export class FigmaRow extends FigmaNode {
6163
logger.Warn(`${field.ElementType} row type is not supported`, this.acuElement.Id, field);
6264
elementType = QPFieldElementType.TextEditor;
6365
}
64-
this.componentProperties['Type'] = FigmaRow.rowTypes.get(elementType)!;
66+
67+
if (elementType != QPFieldElementType.HorizontalContainer) {
68+
//this.componentProperties['Type'] = FigmaRow.rowTypes.get(elementType)!;
69+
let rightContentField = new FigmaNode('👉 RIGHT_CONTENT');
70+
rightContentField.componentProperties['Property'] = FigmaRow.rowTypes.get(elementType)!;
71+
this.children.push(rightContentField);
72+
}
6573

6674
let labelField;
6775
let valueField;
@@ -73,12 +81,14 @@ export class FigmaRow extends FigmaNode {
7381
typedField = field as QPFieldCheckbox;
7482
valueField = new FigmaCheckbox(typedField, 'Checkbox');
7583
this.children.push(valueField);
84+
labelField = new FigmaNode('👉 LEFT_CONTENT');
85+
labelField.componentProperties['Show Value#9992:0'] = false;
86+
this.children.push(labelField);
7687
break;
7788
case QPFieldElementType.RadioButton:
78-
this.componentProperties['Label Position'] = 'Top';
79-
this.componentProperties['Label Length'] = 's';
89+
this.componentProperties['Show LeftContent#9784:31'] = false;
8090
typedField = field as QPFieldRadioButton;
81-
valueField = new FigmaNode('Radiobuttons');
91+
valueField = new FigmaNode('Radio Button');
8292
valueField.componentProperties['Name#8227:0'] = typedField.RadioName ?? '';
8393
valueField.componentProperties['Checked'] = typedField.Checked ? 'True' : 'False';
8494
this.children.push(valueField);
@@ -89,6 +99,9 @@ export class FigmaRow extends FigmaNode {
8999
valueField.componentProperties['Type'] = 'Secondary';
90100
valueField.componentProperties['Value ▶#3133:332'] = typedField.Value ?? '';
91101
this.children.push(valueField);
102+
labelField = new FigmaNode('👉 LEFT_CONTENT');
103+
labelField.componentProperties['Show Value#9992:0'] = false;
104+
this.children.push(labelField);
92105
break;
93106
case QPFieldElementType.MultilineTextEditor:
94107
typedField = field as QPFieldMultilineTextEditor;
@@ -112,14 +125,17 @@ export class FigmaRow extends FigmaNode {
112125
this.children.push(valueField);
113126

114127
const status = new FigmaNode('Status');
115-
status.componentProperties['Status'] = typedField.Value ?? '';
128+
const value = typedField.Value ?? supportedStatuses[0];
129+
status.componentProperties['Status'] = supportedStatuses.includes(value as typeof supportedStatuses[number])
130+
? value
131+
: supportedStatuses[0];
116132
this.children.push(status);
117133
}
118134
break;
119135
case QPFieldElementType.HorizontalContainer: {
120136
let width = 0;
121137
const itemSpacing = 8;
122-
const labelWisth = 200;
138+
const labelWidth = 200;
123139
if (parent) {
124140
parent.detach = true;
125141
width = parent.width;
@@ -139,7 +155,7 @@ export class FigmaRow extends FigmaNode {
139155
labelField.componentProperties['Label Value ▶#3141:62'] = '';
140156
this.children.push(labelField);
141157
if (width > 0)
142-
width = (width - labelWisth) / typedField.Children.length - itemSpacing;
158+
width = (width - labelWidth) / typedField.Children.length - itemSpacing;
143159

144160
this.children.push(container);
145161
let childNumber = 1;

‎figma-plugin/src/figma-slot.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import {FigmaNode} from './figma-node';
22
import {FieldsetSlot} from '@modern-ui-to-figma/elements';
33
import {QPSplitPanel} from '@modern-ui-to-figma/elements';
4+
import {LabelLength} from '@modern-ui-to-figma/elements';
45
import {addChild} from './figma-main';
56

67
export class FigmaSlot extends FigmaNode {
7-
constructor(slot: FieldsetSlot | QPSplitPanel, width = 0) {
8+
constructor(slot: FieldsetSlot | QPSplitPanel, width = 0, labelLength: LabelLength = LabelLength.s) {
89
super('slot', 'FRAME', width);
910
this.tryToFind = false;
1011
this.acuElement = slot;
1112

1213
for (const child of slot.Children)
13-
addChild(this, slot.Type, child, width);
14+
addChild(this, slot.Type, child, width, labelLength);
1415
}
1516
}

‎figma-plugin/src/figma-template.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export class FigmaTemplate extends FigmaNode {
2424
let slotWidth = proportionalWidth;
2525
if (sum > 0)
2626
slotWidth = (this.width - (horizontalSpacing * (template.Children.length - 1))) * parts[slotIndex++] / sum;
27-
addChild(this, template.Type, child, slotWidth);
27+
addChild(this, template.Type, child, slotWidth, template.LabelLength);
2828
}
2929
}
3030
}

‎figma-plugin/src/figma-toolbar.ts‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {QPToolBar, QPToolBarItemButton, QPToolBarItemType, QPToolBarType} from '
44
export class figmaToolbar extends FigmaNode {
55

66
toolBarTypes = new Map<QPToolBarType, string>([
7-
[QPToolBarType.List, 'List'],
7+
[QPToolBarType.List, 'Generic Inquiry'],
88
[QPToolBarType.Record, 'Record'],
99
[QPToolBarType.FilterBar, 'Filter bar']
1010
]);
@@ -24,10 +24,13 @@ export class figmaToolbar extends FigmaNode {
2424
super('Toolbar');
2525
this.acuElement = toolbar;
2626

27-
const displayedButtonsMax = toolbar.ToolBarType == QPToolBarType.Record ? 15 : 11;
27+
const displayedButtonsMax = toolbar.ToolBarType == QPToolBarType.Record ? 15 : 10;
2828
if (this.toolBarTypes.has(toolbar.ToolBarType))
2929
this.componentProperties['Type'] = this.toolBarTypes.get(toolbar.ToolBarType)!;
30-
this.componentProperties['Show Right Actions#6826:45'] = toolbar.ShowRightAction;
30+
31+
if (toolbar.ToolBarType == QPToolBarType.Record) {
32+
this.componentProperties['Collapse button#6826:45'] = toolbar.ShowRightAction;
33+
}
3134

3235
if (toolbar.ToolBarType == QPToolBarType.FilterBar) {
3336
// console.log(111);
@@ -40,7 +43,15 @@ export class figmaToolbar extends FigmaNode {
4043

4144
const buttons = new FigmaNode('Buttons');
4245
buttons.childIndex = 0;
43-
this.children.push(buttons);
46+
47+
if (toolbar.ToolBarType == QPToolBarType.List) {
48+
const buttons0 = new FigmaNode('Buttons0');
49+
buttons0.childIndex = 0;
50+
buttons0.children.push(buttons);
51+
this.children.push(buttons0);
52+
} else {
53+
this.children.push(buttons);
54+
}
4455

4556
for (let i = 0; i < displayedButtonsMax; i++) {
4657
const button = new FigmaNode('Button');

‎figma-plugin/tools/display-properties-plugin/display-properties.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
async function getComponentOrInstanceProperties() {
2+
const node = figma.currentPage.selection[0];
3+
4+
if (!node) {
5+
figma.closePlugin();
6+
return { error: "No node selected." };
7+
}
8+
9+
const result = {
10+
nodeType: node.type,
11+
name: node.name,
12+
properties: {}
13+
};
14+
15+
if (node.type === "INSTANCE") {
16+
const main = await node.getMainComponentAsync();
17+
result.mainComponent = main ? main.name : "Unknown component";
18+
19+
const props = node.componentProperties;
20+
if (props) {
21+
// Sort property names alphabetically
22+
Object.keys(props)
23+
.sort()
24+
.forEach((propName) => {
25+
const propInfo = props[propName];
26+
result.properties[propName] = {
27+
type: propInfo.type,
28+
value: propInfo.value,
29+
bound: propInfo.boundVariable ? propInfo.boundVariable.id : null
30+
};
31+
});
32+
}
33+
} else if (node.type === "COMPONENT" || node.type === "COMPONENT_SET") {
34+
const defs = node.componentPropertyDefinitions;
35+
if (defs) {
36+
// Sort property names alphabetically
37+
Object.keys(defs)
38+
.sort()
39+
.forEach((propName) => {
40+
result.properties[propName] = {
41+
type: defs[propName].type
42+
};
43+
});
44+
}
45+
} else {
46+
result.error = "Selected node is not a component, component set, or instance.";
47+
}
48+
49+
figma.closePlugin();
50+
return result;
51+
}
52+
53+
// Run and store the result
54+
getComponentOrInstanceProperties().then((res) => {
55+
console.log(res); // JSON object
56+
});

‎figma-plugin/tools/display-properties-plugin/manifest.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "DisplayProperties",
3+
"id": "1561019879202449842",
4+
"api": "1.0.0",
5+
"main": "display-properties.js",
6+
"capabilities": [],
7+
"enableProposedApi": false,
8+
"documentAccess": "dynamic-page",
9+
"editorType": [
10+
"figma"
11+
],
12+
"networkAccess": {
13+
"allowedDomains": [
14+
"none"
15+
]
16+
}
17+
}

0 commit comments

Comments
 (0)