feat(desktop): convert to TypeScript and export types

Author: WesSouza

src/Desktop/Desktop.mdx

@@ -3,7 +3,7 @@ name: Desktop
 menu: Components
 ---
 
-import Desktop from '../Desktop/Desktop';
+import { Desktop } from '../Desktop/Desktop';
 
 # Desktop
 

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

@@ -1,20 +1,22 @@
 import React from 'react';
 import { renderWithTheme } from '../../test/utils';
 
-import Desktop from './Desktop';
+import { Desktop } from './Desktop';
 
 describe('<Desktop />', () => {
   it('should render', () => {
     const { container } = renderWithTheme(<Desktop />);
-    const desktopElement = container.firstChild;
+    const desktopElement = container.firstElementChild;
 
     expect(desktopElement).toBeInTheDocument();
   });
 
   it('should handle custom props', () => {
-    const customProps = { title: 'potatoe' };
+    const customProps: React.HTMLAttributes<HTMLDivElement> = {
+      title: 'potatoe'
+    };
     const { container } = renderWithTheme(<Desktop {...customProps} />);
-    const desktopElement = container.firstChild;
+    const desktopElement = container.firstElementChild;
 
     expect(desktopElement).toHaveAttribute('title', 'potatoe');
   });

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

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

src/Desktop/Desktop.js renamed to src/Desktop/Desktop.tsx

@@ -1,9 +1,13 @@
-import React from 'react';
-import propTypes from 'prop-types';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 
 import { StyledCutout } from '../Cutout/Cutout';
 
+type DesktopProps = {
+  backgroundStyles?: React.CSSProperties;
+  children?: React.ReactNode;
+};
+
 const Wrapper = styled.div`
   position: relative;
   display: inline-block;
@@ -102,9 +106,10 @@ const Stand = styled.div`
   }
 `;
 
-const Desktop = React.forwardRef(function Desktop(props, ref) {
-  const { backgroundStyles, children, ...otherProps } = props;
-
+const Desktop = forwardRef<HTMLDivElement, DesktopProps>(function Desktop(
+  { backgroundStyles, children, ...otherProps },
+  ref
+) {
   return (
     <Wrapper ref={ref} {...otherProps}>
       <Inner>
@@ -117,14 +122,4 @@ const Desktop = React.forwardRef(function Desktop(props, ref) {
   );
 });
 
-Desktop.defaultProps = {
-  backgroundStyles: null
-};
-
-Desktop.propTypes = {
-  backgroundStyles: propTypes.object,
-  // eslint-disable-next-line react/require-default-props
-  children: propTypes.node
-};
-
-export default Desktop;
+export { Desktop, DesktopProps };

src/index.ts

@@ -12,7 +12,7 @@ export { default as Checkbox } from './Checkbox/Checkbox';
 export { default as ColorInput } from './ColorInput/ColorInput';
 export * from './Counter/Counter';
 export { default as Cutout } from './Cutout/Cutout';
-export { default as Desktop } from './Desktop/Desktop';
+export * from './Desktop/Desktop';
 export * from './Divider/Divider';
 export { default as Fieldset } from './Fieldset/Fieldset';
 export { default as Hourglass } from './Hourglass/Hourglass';