feat(bar): convert to TypeScript and export types

Author: WesSouza

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { renderWithTheme } from '../../test/utils';
 
 import Bar from './Bar';

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

@@ -1,8 +1,7 @@
-import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { AppBar, Bar, Button, Toolbar } from 'react95';
 import styled from 'styled-components';
 
-import { Bar, AppBar, Toolbar, Button } from 'react95';
-
 const Wrapper = styled.div`
   padding: 5rem;
   background: ${({ theme }) => theme.desktopBackground};
@@ -12,7 +11,7 @@ export default {
   title: 'Bar',
   component: Bar,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-};
+} as ComponentMeta<typeof Bar>;
 
 export function Default() {
   return (

src/Bar/Bar.js renamed to src/Bar/Bar.tsx

@@ -1,8 +1,13 @@
-import React from 'react';
-import propTypes from 'prop-types';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
+import { CommonStyledProps } from '../types';
 
-const StyledBar = styled.div`
+type BarProps = {
+  size?: string | number;
+} & React.HTMLAttributes<HTMLDivElement> &
+  CommonStyledProps;
+
+const StyledBar = styled.div<BarProps & { size?: string }>`
   display: inline-block;
   box-sizing: border-box;
   height: ${({ size }) => size};
@@ -13,20 +18,16 @@ const StyledBar = styled.div`
   border-right: 2px solid ${({ theme }) => theme.borderDark};
   background: ${({ theme }) => theme.material};
 `;
+
 // TODO: add horizontal variant
 // TODO: allow user to specify number of bars (like 3 horizontal bars for drag handle)
-const Bar = React.forwardRef(function Bar(props, ref) {
-  const { size: sizeProp, ...otherProps } = props;
+const Bar = forwardRef<HTMLDivElement, BarProps>(function Bar(
+  { size: sizeProp = '100%', ...otherProps },
+  ref
+) {
   const size = typeof sizeProp === 'number' ? `${sizeProp}px` : sizeProp;
 
   return <StyledBar size={size} ref={ref} {...otherProps} />;
 });
 
-Bar.defaultProps = {
-  size: '100%'
-};
-Bar.propTypes = {
-  size: propTypes.oneOfType([propTypes.string, propTypes.number])
-};
-
 export default Bar;