feat(cutout): convert to TypeScript and export types

Author: WesSouza

src/Button/Button.mdx

@@ -6,7 +6,7 @@ menu: Components
 import { Button } from './Button';
 import Window from '../Window/Window';
 import WindowContent from '../WindowContent/WindowContent';
-import Cutout from '../Cutout/Cutout';
+import { Cutout } from '../Cutout/Cutout';
 import Toolbar from '../Toolbar/Toolbar';
 
 # Button

src/Checkbox/Checkbox.mdx

@@ -6,7 +6,7 @@ menu: Components
 import { Checkbox } from './Checkbox';
 import Fieldset from '../Fieldset/Fieldset';
 import { Button } from '../Button/Button';
-import Cutout from '../Cutout/Cutout';
+import { Cutout } from '../Cutout/Cutout';
 import List from '../List/List';
 import ListItem from '../ListItem/ListItem';
 import Divider from '../Divider/Divider';

src/Cutout/Cutout.mdx

@@ -3,9 +3,9 @@ name: Cutout
 menu: Components
 ---
 
-import Cutout from './Cutout'
-import Window from '../Window/Window'
-import WindowContent from '../WindowContent/WindowContent'
+import { Cutout } from './Cutout';
+import Window from '../Window/Window';
+import WindowContent from '../WindowContent/WindowContent';
 
 # Cutout
 

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

@@ -1,12 +1,11 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 
-import Cutout from './Cutout';
+import { Cutout } from './Cutout';
 
 describe('<Cutout />', () => {
   it('should render cutout', () => {
     const { container } = render(<Cutout />);
-    const cutout = container.firstChild;
+    const cutout = container.firstElementChild;
 
     expect(cutout).toBeInTheDocument();
   });
@@ -15,7 +14,7 @@ describe('<Cutout />', () => {
     const { container } = render(
       <Cutout style={{ backgroundColor: 'papayawhip' }} />
     );
-    const cutout = container.firstChild;
+    const cutout = container.firstElementChild;
 
     expect(cutout).toHaveAttribute('style', 'background-color: papayawhip;');
   });
@@ -34,7 +33,7 @@ describe('<Cutout />', () => {
   it('should render custom props', () => {
     const customProps = { title: 'cutout' };
     const { container } = render(<Cutout {...customProps} />);
-    const cutout = container.firstChild;
+    const cutout = container.firstElementChild;
 
     expect(cutout).toHaveAttribute('title', 'cutout');
   });

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

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

src/Cutout/Cutout.js renamed to src/Cutout/Cutout.tsx

@@ -1,9 +1,15 @@
-import React from 'react';
-import propTypes from 'prop-types';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { insetShadow, createScrollbars } from '../common';
+import { CommonStyledProps } from '../types';
 
-export const StyledCutout = styled.div`
+type CutoutProps = {
+  children?: React.ReactNode;
+  shadow?: boolean;
+} & React.HTMLAttributes<HTMLDivElement> &
+  CommonStyledProps;
+
+export const StyledCutout = styled.div<Pick<CutoutProps, 'shadow'>>`
   position: relative;
   box-sizing: border-box;
   padding: 2px;
@@ -44,23 +50,15 @@ const Content = styled.div`
   ${createScrollbars()}
 `;
 
-const Cutout = React.forwardRef(function Cutout(props, ref) {
-  const { children, ...otherProps } = props;
+const Cutout = forwardRef<HTMLDivElement, CutoutProps>(function Cutout(
+  { children, shadow = true, ...otherProps },
+  ref
+) {
   return (
-    <StyledCutout ref={ref} {...otherProps}>
+    <StyledCutout ref={ref} shadow={shadow} {...otherProps}>
       <Content>{children}</Content>
     </StyledCutout>
   );
 });
 
-Cutout.defaultProps = {
-  children: null,
-  shadow: true
-};
-
-Cutout.propTypes = {
-  children: propTypes.node,
-  shadow: propTypes.bool
-};
-
-export default Cutout;
+export { Cutout, CutoutProps };

src/DatePicker/DatePicker.js

@@ -1,16 +1,15 @@
-import React, { Component } from 'react';
 import propTypes from 'prop-types';
-
+import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import Window from '../Window/Window';
-import WindowHeader from '../WindowHeader/WindowHeader';
-import WindowContent from '../WindowContent/WindowContent';
-import Select from '../Select/Select';
-import NumberField from '../NumberField/NumberField';
-import Cutout from '../Cutout/Cutout';
 import { Button } from '../Button/Button';
+import { Cutout } from '../Cutout/Cutout';
+import NumberField from '../NumberField/NumberField';
+import Select from '../Select/Select';
 import Toolbar from '../Toolbar/Toolbar';
+import Window from '../Window/Window';
+import WindowContent from '../WindowContent/WindowContent';
+import WindowHeader from '../WindowHeader/WindowHeader';
 
 const Calendar = styled(Cutout)`
   width: 234px;

src/Fieldset/Fieldset.mdx

@@ -6,8 +6,8 @@ menu: Components
 import Fieldset from './Fieldset'
 import Window from '../Window/Window'
 import WindowContent from '../WindowContent/WindowContent'
-import Cutout from '../Cutout/Cutout'
 import Checkbox from '../Checkbox/Checkbox'
+import { Cutout } from '../Cutout/Cutout';
 
 # Fieldset
 

src/NumberField/NumberField.mdx

@@ -4,7 +4,7 @@ menu: Components
 ---
 
 import NumberField from './NumberField';
-import Cutout from '../Cutout/Cutout'
+import { Cutout } from '../Cutout/Cutout';
 
 # NumberField
 

src/Select/Select.mdx

@@ -6,7 +6,7 @@ menu: Components
 import Select from './Select'
 import Window from '../Window/Window'
 import WindowContent from '../WindowContent/WindowContent'
-import Cutout from '../Cutout/Cutout'
+import { Cutout } from '../Cutout/Cutout';
 
 # Select