Refactor React components & update deps

hyperglass/ui/components/Card/CardBody.js

@@ -4,7 +4,7 @@ import { Flex, useColorMode } from "@chakra-ui/core";
 const bg = { light: "white", dark: "original.dark" };
 const color = { light: "original.dark", dark: "white" };
 
-const CardBody = ({ onClick = () => false, children, ...props }) => {
+export const CardBody = ({ onClick = () => false, children, ...props }) => {
   const { colorMode } = useColorMode();
   return (
     <Flex
@@ -23,7 +23,3 @@ const CardBody = ({ onClick = () => false, children, ...props }) => {
     </Flex>
   );
 };
-
-CardBody.displayName = "CardBody";
-
-export default CardBody;

hyperglass/ui/components/Card/CardFooter.js

@@ -1,25 +1,19 @@
 import * as React from "react";
 import { Flex } from "@chakra-ui/core";
 
-const CardFooter = ({ children, ...props }) => {
-  return (
-    <Flex
-      p={4}
-      roundedBottomLeft={4}
-      roundedBottomRight={4}
-      direction="column"
-      borderTopWidth="1px"
-      overflowX="hidden"
-      overflowY="hidden"
-      flexDirection="row"
-      justifyContent="space-between"
-      {...props}
-    >
-      {children}
-    </Flex>
-  );
-};
-
-CardFooter.displayName = "CardFooter";
-
-export default CardFooter;
+export const CardFooter = ({ children, ...props }) => (
+  <Flex
+    p={4}
+    roundedBottomLeft={4}
+    roundedBottomRight={4}
+    direction="column"
+    borderTopWidth="1px"
+    overflowX="hidden"
+    overflowY="hidden"
+    flexDirection="row"
+    justifyContent="space-between"
+    {...props}
+  >
+    {children}
+  </Flex>
+);

hyperglass/ui/components/Card/CardHeader.js

@@ -3,7 +3,7 @@ import { Flex, Text, useColorMode } from "@chakra-ui/core";
 
 const bg = { light: "blackAlpha.50", dark: "whiteAlpha.100" };
 
-const CardHeader = ({ children, ...props }) => {
+export const CardHeader = ({ children, ...props }) => {
   const { colorMode } = useColorMode();
   return (
     <Flex
@@ -19,7 +19,3 @@ const CardHeader = ({ children, ...props }) => {
     </Flex>
   );
 };
-
-CardHeader.displayName = "CardHeader";
-
-export default CardHeader;

hyperglass/ui/components/Card/index.js

@@ -1,5 +1,3 @@
-import CardBody from "./CardBody";
-import CardFooter from "./CardFooter";
-import CardHeader from "./CardHeader";
-
-export { CardBody, CardFooter, CardHeader };
+export { CardBody } from "./CardBody";
+export { CardFooter } from "./CardFooter";
+export { CardHeader } from "./CardHeader";