feat(appbar): convert to TypeScript and export types

Author: WesSouza

src/AppBar/AppBar.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 
 import AppBar from './AppBar';
@@ -8,21 +7,21 @@ const defaultProps = { children: '' };
 describe('<AppBar />', () => {
   it('should render header', () => {
     const { container } = render(<AppBar {...defaultProps} />);
-    const headerEl = container.firstChild;
+    const headerEl = container.firstElementChild;
 
-    expect(headerEl.tagName).toBe('HEADER');
+    expect(headerEl && headerEl.tagName).toBe('HEADER');
   });
 
   it('should render children', () => {
     const { container } = render(<AppBar>A nice app bar</AppBar>);
-    const headerEl = container.firstChild;
+    const headerEl = container.firstElementChild;
 
     expect(headerEl).toHaveTextContent('A nice app bar');
   });
 
   it('should render fixed prop properly', () => {
     const { container, rerender } = render(<AppBar {...defaultProps} fixed />);
-    const headerEl = container.firstChild;
+    const headerEl = container.firstElementChild;
 
     expect(headerEl).toHaveStyleRule('position', 'fixed');
 
@@ -35,15 +34,15 @@ describe('<AppBar />', () => {
     const { container } = render(
       <AppBar {...defaultProps} style={{ backgroundColor: 'papayawhip' }} />
     );
-    const headerEl = container.firstChild;
+    const headerEl = container.firstElementChild;
 
     expect(headerEl).toHaveAttribute('style', 'background-color: papayawhip;');
   });
 
   it('should render custom props', () => {
     const customProps = { title: 'cool-header' };
     const { container } = render(<AppBar {...defaultProps} {...customProps} />);
-    const headerEl = container.firstChild;
+    const headerEl = container.firstElementChild;
 
     expect(headerEl).toHaveAttribute('title', 'cool-header');
   });

src/AppBar/AppBar.spec.js renamed to src/AppBar/AppBar.spec.tsx

@@ -9,6 +9,7 @@ import {
   ListItem,
   Divider
 } from 'react95';
+import { ComponentMeta } from '@storybook/react';
 import logoIMG from '../assets/images/logo.png';
 
 const Wrapper = styled.div`
@@ -20,7 +21,7 @@ export default {
   title: 'AppBar',
   component: AppBar,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-};
+} as ComponentMeta<typeof AppBar>;
 
 export function Default() {
   const [open, setOpen] = React.useState(false);

src/AppBar/AppBar.stories.js renamed to src/AppBar/AppBar.stories.tsx

@@ -0,0 +1,36 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { CommonStyledProps } from '../types';
+import { createBorderStyles, createBoxStyles } from '../common';
+
+export type AppBarProps = {
+  children: React.ReactNode;
+  fixed?: boolean;
+} & React.HTMLAttributes<HTMLElement> &
+  CommonStyledProps;
+
+const StyledAppBar = styled.header<AppBarProps>`
+  ${createBorderStyles()};
+  ${createBoxStyles()};
+
+  position: ${props => (props.fixed ? 'fixed' : 'absolute')};
+  top: 0;
+  right: 0;
+  left: auto;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const AppBar = forwardRef<HTMLElement, AppBarProps>(function AppBar(
+  { children, fixed = true, ...otherProps },
+  ref
+) {
+  return (
+    <StyledAppBar fixed={fixed} ref={ref} {...otherProps}>
+      {children}
+    </StyledAppBar>
+  );
+});
+
+export default AppBar;