hack(UI Builder): Standalone UI builder

[jurokapsiar]

This is a beginning of hackathon project.

In this PR, UI Builder gets copied from react-northstar to standalone folder in apps. This branch is not intended to be merged as is.

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d02f21e82bbea3fe8422f418e208626fd5765d3f:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
global-context createContext	533 B 341 B
global-context createContextSelector	554 B 348 B
priority-overflow createOverflowManager	2.936 kB 1.212 kB
react-accordion Accordion (including children components)	78.914 kB 24.06 kB
react-alert Alert	83.511 kB 20.921 kB
react-avatar Avatar	48.381 kB 13.696 kB
react-avatar AvatarGroup	14.95 kB 5.989 kB
react-avatar AvatarGroupItem	68.349 kB 19.039 kB
react-badge Badge	22.6 kB 7.205 kB
react-badge CounterBadge	23.503 kB 7.497 kB
react-badge PresenceBadge	24.05 kB 7.067 kB
react-button Button	36.119 kB 9.647 kB
react-button CompoundButton	43.144 kB 10.86 kB
react-button MenuButton	38.813 kB 10.551 kB
react-button SplitButton	46.228 kB 11.933 kB
react-button ToggleButton	51.888 kB 11.127 kB
react-card Card - All	67.002 kB 19.261 kB
react-card Card	62.684 kB 18.177 kB
react-card CardFooter	8.561 kB 3.601 kB
react-card CardHeader	9.604 kB 3.94 kB
react-card CardPreview	8.662 kB 3.656 kB
react-combobox Combobox (including child components)	74.636 kB 24.186 kB
react-combobox Dropdown (including child components)	74.236 kB 24.086 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	188.672 kB 52.359 kB
react-components react-components: FluentProvider & webLightTheme	33.394 kB 11.007 kB
react-dialog Dialog (including children components)	82.755 kB 24.581 kB
react-divider Divider	16.459 kB 5.902 kB
react-image Image	10.78 kB 4.264 kB
react-input Input	23.757 kB 7.704 kB
react-label Label	9.338 kB 3.86 kB
react-link Link	11.784 kB 4.867 kB
react-menu Menu (including children components)	116.572 kB 35.778 kB
react-menu Menu (including selectable components)	119.641 kB 36.297 kB
react-overflow hooks only	10.685 kB 4.104 kB
react-popover Popover	102.963 kB 31.553 kB
react-portal Portal	10.576 kB 3.875 kB
react-portal-compat PortalCompatProvider	5.851 kB 1.964 kB
react-positioning usePositioning	19.7 kB 7.404 kB
react-provider FluentProvider	15.755 kB 5.883 kB
react-radio Radio	35.56 kB 11.929 kB
react-radio RadioGroup	14.248 kB 5.7 kB
react-select Select	20.846 kB 7.346 kB
react-slider Slider	31.526 kB 10.046 kB
react-spinbutton SpinButton	44.102 kB 12.425 kB
react-spinner Spinner	19.977 kB 6.438 kB
react-switch Switch	32.097 kB 10.27 kB
react-text Text - Default	11.782 kB 4.605 kB
react-text Text - Wrappers	15.092 kB 5.044 kB
react-textarea Textarea	25.013 kB 8.133 kB
react-theme Single theme token import	69 B 89 B
react-theme Teams: all themes	29.65 kB 6.444 kB
react-theme Teams: Light theme	17.486 kB 5.057 kB
react-tooltip Tooltip	41.535 kB 14.639 kB
react-utilities SSRProvider	180 B 159 B

_{🤖 This report was generated against c63200d5cd47dc36f9d8f3ad07c5fecb7e5c6d41}

[size-auditor[bot]]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: c63200d5cd47dc36f9d8f3ad07c5fecb7e5c6d41 (build)

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1294	1305	5000
Button	mount	834	941	5000
FluentProvider	mount	1461	1520	5000
FluentProviderWithTheme	mount	621	567	10
FluentProviderWithTheme	virtual-rerender	597	585	10
FluentProviderWithTheme	virtual-rerender-with-unmount	626	620	10
MakeStyles	mount	1859	1864	50000
SpinButton	mount	2358	2449	5000

[fabricteam]

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentSlotsPerf.default	963	866	1.11:1
AvatarMinimalPerf.default	163	149	1.09:1
DividerMinimalPerf.default	299	281	1.06:1
SegmentMinimalPerf.default	291	275	1.06:1
ChatWithPopoverPerf.default	308	293	1.05:1
FormMinimalPerf.default	317	302	1.05:1
VideoMinimalPerf.default	626	598	1.05:1
AnimationMinimalPerf.default	447	431	1.04:1
ButtonMinimalPerf.default	137	132	1.04:1
ChatDuplicateMessagesPerf.default	238	228	1.04:1
MenuMinimalPerf.default	699	675	1.04:1
FlexMinimalPerf.default	235	229	1.03:1
GridMinimalPerf.default	277	270	1.03:1
LayoutMinimalPerf.default	298	288	1.03:1
PopupMinimalPerf.default	535	518	1.03:1
SkeletonMinimalPerf.default	276	267	1.03:1
IconMinimalPerf.default	533	519	1.03:1
ToolbarMinimalPerf.default	780	759	1.03:1
BoxMinimalPerf.default	280	275	1.02:1
ListMinimalPerf.default	422	413	1.02:1
ListNestedPerf.default	454	444	1.02:1
LoaderMinimalPerf.default	552	541	1.02:1
RosterPerf.default	1775	1741	1.02:1
ProviderMinimalPerf.default	339	332	1.02:1
TableMinimalPerf.default	330	322	1.02:1
ButtonOverridesMissPerf.default	1085	1074	1.01:1
DropdownManyItemsPerf.default	542	535	1.01:1
EmbedMinimalPerf.default	3072	3054	1.01:1
HeaderMinimalPerf.default	292	289	1.01:1
HeaderSlotsPerf.default	624	616	1.01:1
ItemLayoutMinimalPerf.default	965	958	1.01:1
MenuButtonMinimalPerf.default	1412	1402	1.01:1
ProviderMergeThemesPerf.default	1056	1048	1.01:1
ReactionMinimalPerf.default	305	303	1.01:1
SliderMinimalPerf.default	1336	1319	1.01:1
TableManyItemsPerf.default	1555	1546	1.01:1
TextMinimalPerf.default	280	278	1.01:1
TreeMinimalPerf.default	670	665	1.01:1
AlertMinimalPerf.default	219	220	1:1
ButtonSlotsPerf.default	457	457	1:1
CardMinimalPerf.default	434	433	1:1
DatepickerMinimalPerf.default	4761	4784	1:1
DialogMinimalPerf.default	640	638	1:1
DropdownMinimalPerf.default	2247	2247	1:1
InputMinimalPerf.default	936	938	1:1
SplitButtonMinimalPerf.default	3650	3661	1:1
StatusMinimalPerf.default	559	558	1:1
TextAreaMinimalPerf.default	397	397	1:1
AttachmentMinimalPerf.default	117	118	0.99:1
CheckboxMinimalPerf.default	1722	1732	0.99:1
ImageMinimalPerf.default	315	319	0.99:1
ListWith60ListItems.default	512	519	0.99:1
RefMinimalPerf.default	181	182	0.99:1
CustomToolbarPrototype.default	2228	2250	0.99:1
CarouselMinimalPerf.default	383	389	0.98:1
ChatMinimalPerf.default	589	598	0.98:1
LabelMinimalPerf.default	309	316	0.98:1
TooltipMinimalPerf.default	1915	1960	0.98:1
TreeWith60ListItems.default	126	128	0.98:1
ListCommonPerf.default	494	508	0.97:1
RadioGroupMinimalPerf.default	350	359	0.97:1
PortalMinimalPerf.default	136	141	0.96:1
AccordionMinimalPerf.default	110	121	0.91:1

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	1219	1187	5000
Breadcrumb	mount	2916	2946	1000
Checkbox	mount	2680	2649	5000
CheckboxBase	mount	2396	2389	5000
ChoiceGroup	mount	4403	4398	5000
ComboBox	mount	1281	1237	1000
CommandBar	mount	9683	9618	1000
ContextualMenu	mount	11339	11413	1000
DefaultButton	mount	1396	1403	5000
DetailsRow	mount	3634	3610	5000
DetailsRowFast	mount	3701	3649	5000
DetailsRowNoStyles	mount	3512	3470	5000
Dialog	mount	3154	3069	1000
DocumentCardTitle	mount	579	580	1000
Dropdown	mount	3253	3251	5000
FocusTrapZone	mount	2035	2038	5000
FocusZone	mount	1942	1953	5000
GroupedList	mount	53740	60476	2
GroupedList	virtual-rerender	24860	25441	2
GroupedList	virtual-rerender-with-unmount	94940	94611	2
GroupedListV2	mount	565	570	2
GroupedListV2	virtual-rerender	541	533	2
GroupedListV2	virtual-rerender-with-unmount	546	560	2
IconButton	mount	1939	1944	5000
Label	mount	718	734	5000
Layer	mount	4354	4256	5000
Link	mount	825	821	5000
MenuButton	mount	1692	1665	5000
MessageBar	mount	2344	2310	5000
Nav	mount	3335	3270	1000
OverflowSet	mount	1380	1361	5000
Panel	mount	2556	2511	1000
Persona	mount	1316	1292	1000
Pivot	mount	1650	1650	1000
PrimaryButton	mount	1538	1525	5000
Rating	mount	7105	7005	5000
SearchBox	mount	1509	1502	5000
Shimmer	mount	2892	2875	5000
Slider	mount	2132	2041	5000
SpinButton	mount	4675	4709	5000
Spinner	mount	808	793	5000
SplitButton	mount	3122	3342	5000
Stack	mount	856	852	5000
StackWithIntrinsicChildren	mount	2379	2355	5000
StackWithTextChildren	mount	4798	4792	5000
SwatchColorPicker	mount	10627	10575	5000
TagPicker	mount	2611	2692	5000
TeachingBubble	mount	88853	89746	5000
Text	mount	798	788	5000
TextField	mount	1615	1615	5000
ThemeProvider	mount	1534	1528	5000
ThemeProvider	virtual-rerender	1088	1085	5000
ThemeProvider	virtual-rerender-with-unmount	2141	2139	5000
Toggle	mount	1104	1109	5000
buttonNative	mount	545	538	5000

[msft-fluent-ui-bot]

Because this pull request has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

The pull request will still be available for reference. If it's still relevant to merge at some point, you can reopen or make a new version based on the latest code.