chore: integrate nx devtools

[Hotell]

Pull request checklist

• Addresses an existing issue: part of Implement build infra around TS path aliases for convergence #16889
• [ ] Include a change request file using $ yarn change

Description of changes

• adds nx devtools integration
• integrates nx with existing create-package plop generator (for nx.json and workspace.json)

---

About NX demo

CI

1. dev changes implementation of react-image (contrived example - adding console.log)
2. now his CI pipeline would run only at affected tree, which will drastically speed up CI

• Run tests only on affected tree: nx affected --base=origin/master --target=test
• Run build only on affected tree: nx affected --base=origin/master --target=build
• Run lint only on affected tree: nx affected --base=origin/master --target=lint
  

Actionables:

• get rid of react-examples - instead use proper hierarchical storybook config ()
• this will again, drastically speed up pipeline

DX (migration phase)

• all existing commands work as expected from root of monorepo

nx run @fluentui/react-image:start
nx run @fluentui/react-image:test

# etc....

• this is ok as 1st step, although to get proper DX we need to gradually migrate to leverage nx executors

Why:

• when I run nx run @fluentui/react-image:test --help , I'll get nothing
• 

Where we wanna go:

DX (caching)

• local cache by default, running repeated commands (like nx run @fui/react-mage:test) will finish instantly if there were no code changes in particular project

[size-auditor]

Asset size changes

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

Baseline commit: a48d8dfd969f944c44b8c902cc9d418c333d063d (build)

[codesandbox-ci]

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 ad8e27a:

Sandbox	Source
Fluent UI Button	Configuration
codesandbox-react-template	Configuration
codesandbox-react-northstar-template	Configuration

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	870	854	5000
BaseButton	mount	885	857	5000
Breadcrumb	mount	2632	2566	1000
ButtonNext	mount	499	477	5000
Checkbox	mount	1550	1586	5000
CheckboxBase	mount	1249	1284	5000
ChoiceGroup	mount	4664	4623	5000
ComboBox	mount	979	986	1000
CommandBar	mount	9917	10035	1000
ContextualMenu	mount	6046	6079	1000
DefaultButton	mount	1141	1132	5000
DetailsRow	mount	3611	3661	5000
DetailsRowFast	mount	3669	3612	5000
DetailsRowNoStyles	mount	3443	3444	5000
Dialog	mount	2112	2122	1000
DocumentCardTitle	mount	137	147	1000
Dropdown	mount	3240	3141	5000
FocusTrapZone	mount	1804	1769	5000
FocusZone	mount	1763	1824	5000
IconButton	mount	1726	1675	5000
Label	mount	347	329	5000
Layer	mount	1725	1755	5000
Link	mount	459	431	5000
MakeStyles	mount	1761	1760	50000
MenuButton	mount	1462	1433	5000
MessageBar	mount	1957	2016	5000
Nav	mount	3234	3204	1000
OverflowSet	mount	1016	1013	5000
Panel	mount	2017	2007	1000
Persona	mount	800	817	1000
Pivot	mount	1380	1366	1000
PrimaryButton	mount	1230	1288	5000
Rating	mount	7494	7431	5000
SearchBox	mount	1276	1274	5000
Shimmer	mount	2458	2489	5000
Slider	mount	1962	1924	5000
SpinButton	mount	4792	4921	5000
Spinner	mount	398	403	5000
SplitButton	mount	3075	3039	5000
Stack	mount	486	480	5000
StackWithIntrinsicChildren	mount	1488	1483	5000
StackWithTextChildren	mount	4422	4406	5000
SwatchColorPicker	mount	10134	10084	5000
Tabs	mount	1390	1372	1000
TagPicker	mount	2409	2342	5000
TeachingBubble	mount	11692	11654	5000
Text	mount	400	398	5000
TextField	mount	1339	1321	5000
ThemeProvider	mount	1169	1140	5000
ThemeProvider	virtual-rerender	584	582	5000
ThemeProviderNext	mount	9056	9047	5000
Toggle	mount	790	768	5000
buttonNative	mount	114	111	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AlertMinimalPerf.default	279	254	1.1:1
PortalMinimalPerf.default	159	149	1.07:1
SkeletonMinimalPerf.default	360	337	1.07:1
AttachmentMinimalPerf.default	156	147	1.06:1
DividerMinimalPerf.default	372	352	1.06:1
RefMinimalPerf.default	234	221	1.06:1
TextAreaMinimalPerf.default	477	450	1.06:1
AvatarMinimalPerf.default	191	182	1.05:1
ButtonMinimalPerf.default	173	164	1.05:1
ListWith60ListItems.default	633	604	1.05:1
PopupMinimalPerf.default	710	679	1.05:1
TextMinimalPerf.default	343	328	1.05:1
CarouselMinimalPerf.default	455	436	1.04:1
MenuMinimalPerf.default	836	801	1.04:1
AnimationMinimalPerf.default	415	403	1.03:1
AttachmentSlotsPerf.default	1155	1116	1.03:1
ChatWithPopoverPerf.default	355	343	1.03:1
LoaderMinimalPerf.default	679	657	1.03:1
MenuButtonMinimalPerf.default	1555	1508	1.03:1
ButtonSlotsPerf.default	548	535	1.02:1
ButtonUseCssPerf.default	775	762	1.02:1
CardMinimalPerf.default	542	531	1.02:1
DatepickerMinimalPerf.default	5318	5237	1.02:1
DialogMinimalPerf.default	734	723	1.02:1
FlexMinimalPerf.default	290	283	1.02:1
FormMinimalPerf.default	399	393	1.02:1
LayoutMinimalPerf.default	371	362	1.02:1
ListCommonPerf.default	624	611	1.02:1
RadioGroupMinimalPerf.default	416	409	1.02:1
SegmentMinimalPerf.default	337	331	1.02:1
TableManyItemsPerf.default	1852	1808	1.02:1
ChatMinimalPerf.default	595	588	1.01:1
CheckboxMinimalPerf.default	2691	2668	1.01:1
DropdownManyItemsPerf.default	664	660	1.01:1
DropdownMinimalPerf.default	3020	3002	1.01:1
EmbedMinimalPerf.default	4064	4006	1.01:1
HeaderMinimalPerf.default	352	347	1.01:1
ImageMinimalPerf.default	358	353	1.01:1
LabelMinimalPerf.default	387	383	1.01:1
ProviderMinimalPerf.default	946	941	1.01:1
SplitButtonMinimalPerf.default	3618	3571	1.01:1
TableMinimalPerf.default	392	390	1.01:1
CustomToolbarPrototype.default	3710	3688	1.01:1
ButtonOverridesMissPerf.default	1658	1652	1:1
ButtonUseCssNestingPerf.default	1021	1025	1:1
GridMinimalPerf.default	320	319	1:1
HeaderSlotsPerf.default	725	722	1:1
ListMinimalPerf.default	496	496	1:1
ListNestedPerf.default	542	540	1:1
SliderMinimalPerf.default	1511	1507	1:1
ToolbarMinimalPerf.default	907	909	1:1
TooltipMinimalPerf.default	933	933	1:1
AccordionMinimalPerf.default	149	151	0.99:1
ReactionMinimalPerf.default	365	369	0.99:1
ItemLayoutMinimalPerf.default	1208	1227	0.98:1
ProviderMergeThemesPerf.default	1603	1629	0.98:1
StatusMinimalPerf.default	655	665	0.98:1
TreeMinimalPerf.default	740	758	0.98:1
VideoMinimalPerf.default	614	626	0.98:1
BoxMinimalPerf.default	337	349	0.97:1
InputMinimalPerf.default	1219	1252	0.97:1
RosterPerf.default	1134	1185	0.96:1
TreeWith60ListItems.default	166	175	0.95:1
ChatDuplicateMessagesPerf.default	266	287	0.93:1
IconMinimalPerf.default	568	613	0.93:1