Fluentui: Move React components out of utilities package to remove react dependency

[johannes-z]

Describe the feature that you would like added

Right now @uifabric/utilities defines react components, such as BaseComponent and styled, which is mainly used by office-ui-fabric-react. Because of this, @uifabric/utilities cannot be used outside of OfficeDev/office-ui-fabric-react, i.e. when porting react components to another UI library.

What component or utility would this be added to

@uifabric/react and all consuming packages.

Have you discussed this feature with our team, and if so, who

No

Additional context/screenshots

I'm authoring a port of office-ui-fabric-react to Vue (project). @uifabric/styling, @uifabric/merge-styles, etc. can be used without any issues, because they don't have a dependency to third party libraries. If the BaseComponent, styled, and other react components were moved out of @uifabric/utilities, this package could also be used in other projects. Right now, the whole package has to be copied and adjusted so it doesn't depend on react anymore.

[khmakoto]

@johannes-z thanks for filing this issue! This is a valid concern, though I'm not sure if/when we would do this since we don't have many cycles to spare and this would be lower in our priority list.

cc'ing @dzearing and @micahgodbolt

[dzearing]

I think this is pretty important to dissect, and we are evaluating which utilities we want to add/remove/deprecate currently. Especially as we evaluate other stacks like vue or web components.

We do not want to break the API surface of utilities, so removing things can't be done. However, we can split out units into separate packages to avoid pulling in everything.

Is there a short list of components you need split out?

[dzearing]

Breaking up into a proposal:
https://github.com/OfficeDev/office-ui-fabric-react/issues/11947

[johannes-z]

@dzearing I'd argue that most of the non-react utilities are used either as a direct dependency for the component library, or indirectly when other utility functions use them. Anyway, here's a list of utilities that I currently use for the Vue library:

• css
• Async
• IDisposable
• EventGroup
• Customizations
• memoizeFunction
• classNamesFunction
• isIE11
• KeyCodes
• IsFocusVisibleClassName
• getWindow
• getDocument
• ICalloutPositionedInfo
• assign
• IRectangle
• IPosition
• RectangleEdge
• getId
• elementContains
• getRTL
• getInitials
• on
• doesElementContainFocus
• getDocument
• getScrollbarWidth
• Rectangle