refactor(appbar): change to named exports

Author: WesSouza

src/AppBar/AppBar.mdx

@@ -3,21 +3,20 @@ name: AppBar
 menu: Components
 ---
 
-import AppBar from './AppBar'
-import Toolbar from '../Toolbar/Toolbar'
-import Button from '../Button/Button'
-import TextField from '../TextField/TextField'
-import List from '../List/List'
-import ListItem from '../ListItem/ListItem'
-import Divider from '../Divider/Divider'
+import { AppBar } from './AppBar';
+import Toolbar from '../Toolbar/Toolbar';
+import Button from '../Button/Button';
+import TextField from '../TextField/TextField';
+import List from '../List/List';
+import ListItem from '../ListItem/ListItem';
+import Divider from '../Divider/Divider';
 
 # AppBar
 
 ## Usage
 
 #### Default
 
-
 <Playground>
   {() => {
     const [open, setOpen] = React.useState(false);
@@ -62,7 +61,7 @@ import Divider from '../Divider/Divider'
           </Button>
         </div>
       );
-    }
+    };
     return (
       <AppBar style={{ position: 'relative' }}>
         <Toolbar style={{ justifyContent: 'space-between' }}>
@@ -74,7 +73,7 @@ import Divider from '../Divider/Divider'
           />
         </Toolbar>
       </AppBar>
-    )
+    );
   }}
 </Playground>
 

src/AppBar/AppBar.spec.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 
-import AppBar from './AppBar';
+import { AppBar } from './AppBar';
 
 const defaultProps = { children: '' };
 

src/AppBar/AppBar.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { CommonStyledProps } from '../types';
 import { createBorderStyles, createBoxStyles } from '../common';
 
-export type AppBarProps = {
+type AppBarProps = {
   children: React.ReactNode;
   fixed?: boolean;
 } & React.HTMLAttributes<HTMLElement> &
@@ -33,4 +33,4 @@ const AppBar = forwardRef<HTMLElement, AppBarProps>(function AppBar(
   );
 });
 
-export default AppBar;
+export { AppBar, AppBarProps };

src/Bar/Bar.mdx

@@ -3,10 +3,10 @@ name: Bar
 menu: Components
 ---
 
-import Bar from '../Bar/Bar'
-import AppBar from '../AppBar/AppBar.js'
-import Toolbar from '../Toolbar/Toolbar.js'
-import Button from '../Button/Button.js'
+import { Bar } from '../Bar/Bar';
+import { AppBar } from '../AppBar/AppBar.js';
+import Toolbar from '../Toolbar/Toolbar.js';
+import Button from '../Button/Button.js';
 
 # Bar
 

src/index.ts

@@ -4,7 +4,7 @@ export { createScrollbars } from './common/index';
 
 /* components */
 export * from './Anchor/Anchor';
-export { default as AppBar } from './AppBar/AppBar';
+export * from './AppBar/AppBar';
 export * from './Avatar/Avatar';
 export * from './Bar/Bar';
 export { default as Button } from './Button/Button';