Refactor plugin to make it fast refreshable

Summary: Refactored Navigation plugin to make it fast-refreshable: moved the main component into a separate file and exported all components as named functions. Without these changes every change of UI triggered full reload.

Reviewed By: timur-valiev

Differential Revision: D29814077

fbshipit-source-id: 5285bdc5f14a5163f9501c0d45a3affefb08fc8e

desktop/plugins/public/navigation/components/IconButton.tsx

@@ -43,23 +43,23 @@ const RippleEffect = styled.div({
   },
 });
 
-const IconButton = styled.div({
+const IconButtonContainer = styled.div({
   ':active': {
     animation: `${shrinkAnimation} .25s ease forwards`,
   },
 });
 
-export default function (props: Props) {
+export function IconButton(props: Props) {
   return (
     <RippleEffect>
-      <IconButton className="icon-button" onClick={props.onClick}>
+      <IconButtonContainer className="icon-button" onClick={props.onClick}>
         <Glyph
           name={props.icon}
           size={props.size}
           color={props.color}
           variant={props.outline ? 'outline' : 'filled'}
         />
-      </IconButton>
+      </IconButtonContainer>
     </RippleEffect>
   );
 }