Remove commons export at component root

[micahgodbolt]

Current Behavior

Commons types are exported from the root of each component, and could be taken on as a dependency if you imported directly from the component. We want to eventually remove the common types, and don't want anyone taking dependencies on them.

New Behavior

This PR removes the exporting of most Commons types, and changes the template for future components. For those that require sharing Commons between components, the Commons type is omitted from the top level export.

Related Issue(s)

This is a replacement for #21607

Fixes #

[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 939639c:

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

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-accordion Accordion (including children components)	54.905 kB 17.567 kB
react-avatar Avatar	44.339 kB 12.767 kB
react-badge Badge	20.831 kB 6.533 kB
react-badge CounterBadge	21.699 kB 6.827 kB
react-badge PresenceBadge	21.785 kB 6.507 kB
react-button Button	27.932 kB 8.025 kB
react-button CompoundButton	33.196 kB 8.987 kB
react-button MenuButton	29.584 kB 8.598 kB
react-button SplitButton	35.729 kB 9.676 kB
react-button ToggleButton	37.209 kB 8.627 kB
react-card Card - All	48.512 kB 14.352 kB
react-card Card	43.987 kB 13.188 kB
react-card CardFooter	7.615 kB 3.23 kB
react-card CardHeader	8.893 kB 3.675 kB
react-card CardPreview	7.806 kB 3.357 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	165.717 kB 46.859 kB
react-components react-components: FluentProvider & webLightTheme	32.479 kB 10.625 kB
react-divider Divider	15.256 kB 5.511 kB
react-image Image	10.067 kB 3.934 kB
react-input Input	21.5 kB 7.116 kB
react-label Label	8.303 kB 3.472 kB
react-link Link	11.064 kB 4.487 kB
react-menu Menu (including children components)	102.89 kB 31.719 kB
react-menu Menu (including selectable components)	105.245 kB 32.089 kB
react-popover Popover	95.816 kB 29.246 kB
react-portal Portal	6.249 kB 2.163 kB
react-positioning usePopper	22.808 kB 7.935 kB
react-provider FluentProvider	13.962 kB 5.231 kB
react-slider Slider	22.928 kB 7.747 kB
react-spinner Spinner	6.773 kB 2.879 kB
react-switch Switch	25.387 kB 8.204 kB
react-text Text - Default	10.755 kB 4.212 kB
react-text Text - Wrappers	14.067 kB 4.558 kB
react-theme Single theme token import	69 B 89 B
react-theme Teams: all themes	29.426 kB 6.551 kB
react-theme Teams: Light theme	18.42 kB 5.27 kB
react-tooltip Tooltip	42.455 kB 14.61 kB
react-utilities SSRProvider	189 B 161 B

_{🤖 This report was generated against e223a41e350d67e89465eac1530d3f76551905ea}

[size-auditor]

Asset size changes

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

Baseline commit: b2b3ec1da3d75ad5fc54654645bb992340679d29 (build)

[khmakoto]

Approved with a bunch of very picky nits.

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	860	826	5000
BaseButton	mount	968	989	5000
Breadcrumb	mount	2781	2761	1000
ButtonNext	mount	498	509	5000
Checkbox	mount	1611	1588	5000
CheckboxBase	mount	1366	1355	5000
ChoiceGroup	mount	4945	4950	5000
ComboBox	mount	993	1017	1000
CommandBar	mount	10696	10569	1000
ContextualMenu	mount	8741	8583	1000
DefaultButton	mount	1200	1214	5000
DetailsRow	mount	3819	3890	5000
DetailsRowFast	mount	3878	3891	5000
DetailsRowNoStyles	mount	3703	3735	5000
Dialog	mount	3097	3113	1000
DocumentCardTitle	mount	191	183	1000
Dropdown	mount	3337	3320	5000
FluentProviderNext	mount	1959	1943	5000
FluentProviderWithTheme	mount	170	173	10
FluentProviderWithTheme	virtual-rerender	109	136	10
FluentProviderWithTheme	virtual-rerender-with-unmount	195	198	10
FocusTrapZone	mount	1910	1892	5000
FocusZone	mount	1821	1877	5000
IconButton	mount	1793	1833	5000
Label	mount	392	378	5000
Layer	mount	3134	3139	5000
Link	mount	513	519	5000
MakeStyles	mount	1783	1732	50000
MenuButton	mount	1551	1576	5000
MessageBar	mount	2104	2064	5000
Nav	mount	3377	3370	1000
OverflowSet	mount	1159	1135	5000
Panel	mount	2575	2600	1000
Persona	mount	888	895	1000
Pivot	mount	1490	1508	1000
PrimaryButton	mount	1362	1341	5000
Rating	mount	7868	7949	5000
SearchBox	mount	1401	1372	5000
Shimmer	mount	2618	2613	5000
Slider	mount	2049	2013	5000
SpinButton	mount	5162	5118	5000
Spinner	mount	473	466	5000
SplitButton	mount	3237	3298	5000
Stack	mount	555	567	5000
StackWithIntrinsicChildren	mount	2370	2338	5000
StackWithTextChildren	mount	5395	5390	5000
SwatchColorPicker	mount	12603	11794	5000
TagPicker	mount	2741	2759	5000
TeachingBubble	mount	13461	13544	5000
Text	mount	457	449	5000
TextField	mount	1491	1449	5000
ThemeProvider	mount	1319	1275	5000
ThemeProvider	virtual-rerender	650	672	5000
ThemeProvider	virtual-rerender-with-unmount	1988	1951	5000
Toggle	mount	842	838	5000
buttonNative	mount	159	157	5000

Perf Analysis (@fluentui/react-northstar)

⚠️ No perf measurements available

[micahgodbolt]

@behowell considering that api extractor doesn't actually benefit from having commons exported from the types file, I'd certainly consider exporting it on a per case basis.

[micahgodbolt]

scaling this back to only change the index file for components that need to share the commons type internally. All others will just have the export removed