feat(window): convert to TypeScript and export types

Author: WesSouza

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

@@ -1,8 +1,7 @@
-import React from 'react';
-
+import { createRef } from 'react';
 import { renderWithTheme } from '../../test/utils';
 
-import Window from './Window';
+import { Window } from './Window';
 
 describe('<Window />', () => {
   it('renders Window', () => {
@@ -28,10 +27,20 @@ describe('<Window />', () => {
 
       expect(queryByTestId('resizeHandle')).not.toBeInTheDocument();
     });
+
     it('renders resize handle when set to true', () => {
       const { queryByTestId } = renderWithTheme(<Window resizable />);
 
       expect(queryByTestId('resizeHandle')).toBeInTheDocument();
     });
+
+    it('passes resizeRef to the resizable element', () => {
+      const ref = createRef<HTMLSpanElement>();
+      const { queryByTestId } = renderWithTheme(
+        <Window resizable resizeRef={ref} />
+      );
+
+      expect(queryByTestId('resizeHandle')).toBe(ref.current);
+    });
   });
 });

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

@@ -1,13 +1,13 @@
-import React from 'react';
-import styled from 'styled-components';
+import { ComponentMeta } from '@storybook/react';
 import {
-  Window,
-  WindowContent,
-  WindowHeader,
   Button,
+  Panel,
   Toolbar,
-  Panel
+  Window,
+  WindowContent,
+  WindowHeader
 } from 'react95';
+import styled from 'styled-components';
 
 const Wrapper = styled.div`
   padding: 5rem;
@@ -66,7 +66,7 @@ export default {
   component: Window,
   subcomponents: { WindowHeader, WindowContent },
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-};
+} as ComponentMeta<typeof Window>;
 
 export function Default() {
   return (
@@ -97,7 +97,7 @@ export function Default() {
           </p>
         </WindowContent>
         <Panel variant='well' className='footer'>
-          Put some useful informations here
+          Put some useful information here
         </Panel>
       </Window>
 

src/Window/Window.js renamed to src/Window/Window.tsx

@@ -1,8 +1,15 @@
-import React from 'react';
-import propTypes from 'prop-types';
-
+import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { createBorderStyles, createBoxStyles } from '../common';
+import { CommonStyledProps } from '../types';
+
+type WindowProps = {
+  children?: React.ReactNode;
+  resizable?: boolean;
+  resizeRef?: React.Ref<HTMLSpanElement>;
+  shadow?: boolean;
+} & React.HTMLAttributes<HTMLDivElement> &
+  CommonStyledProps;
 
 const StyledWindow = styled.div`
   position: relative;
@@ -11,6 +18,7 @@ const StyledWindow = styled.div`
   ${createBorderStyles({ windowBorders: true })}
   ${createBoxStyles()}
 `;
+
 const ResizeHandle = styled.span`
   ${({ theme }) => css`
     display: inline-block;
@@ -39,27 +47,16 @@ const ResizeHandle = styled.span`
   `}
 `;
 
-const Window = React.forwardRef(function Window(props, ref) {
-  const { resizable, children, ...otherProps } = props;
-
+const Window = forwardRef<HTMLDivElement, WindowProps>(function Window(
+  { children, resizable = false, resizeRef, shadow = true, ...otherProps },
+  ref
+) {
   return (
-    <StyledWindow ref={ref} {...otherProps}>
+    <StyledWindow ref={ref} shadow={shadow} {...otherProps}>
       {children}
-      {resizable && <ResizeHandle data-testid='resizeHandle' />}
+      {resizable && <ResizeHandle data-testid='resizeHandle' ref={resizeRef} />}
     </StyledWindow>
   );
 });
 
-Window.defaultProps = {
-  resizable: false,
-  shadow: true,
-  children: null
-};
-
-Window.propTypes = {
-  shadow: propTypes.bool,
-  resizable: propTypes.bool,
-  children: propTypes.node
-};
-
-export default Window;
+export { Window, WindowProps };

src/WindowContent/WindowContent.js

@@ -1,8 +1,6 @@
-import React from 'react';
-
 import { renderWithTheme } from '../../test/utils';
 
-import WindowContent from './WindowContent';
+import { WindowContent } from './WindowContent';
 
 describe('<WindowContent />', () => {
   it('renders WindowContent', () => {

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

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { CommonStyledProps } from '../types';
+
+type WindowContentProps = {
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement> &
+  CommonStyledProps;
+
+const StyledWindowContent = styled.div`
+  padding: 16px;
+`;
+
+const WindowContent = forwardRef<HTMLDivElement, WindowContentProps>(
+  function WindowContent({ children, ...otherProps }, ref) {
+    return (
+      <StyledWindowContent ref={ref} {...otherProps}>
+        {children}
+      </StyledWindowContent>
+    );
+  }
+);
+
+export { WindowContent, WindowContentProps };

src/WindowContent/WindowContent.tsx

@@ -0,0 +1,57 @@
+import { renderWithTheme, theme } from '../../test/utils';
+
+import { WindowHeader } from './WindowHeader';
+
+describe('<WindowHeader />', () => {
+  it('renders WindowHeader', () => {
+    const { container } = renderWithTheme(<WindowHeader />);
+    const windowHeader = container.firstChild;
+
+    expect(windowHeader).toBeInTheDocument();
+  });
+
+  it('renders children', () => {
+    const textContent = 'Hi there!';
+    const { getByText } = renderWithTheme(
+      <WindowHeader>
+        <span>{textContent}</span>
+      </WindowHeader>
+    );
+    expect(getByText(textContent)).toBeInTheDocument();
+  });
+
+  describe('prop: active', () => {
+    it('displays active header by default', () => {
+      const { container } = renderWithTheme(<WindowHeader />);
+      const windowHeader = container.firstChild as HTMLDivElement;
+
+      expect(windowHeader).toHaveStyleRule('color', theme.headerText);
+      expect(windowHeader).toHaveStyleRule(
+        'background',
+        theme.headerBackground
+      );
+    });
+
+    it('displays active header when set to true', () => {
+      const { container } = renderWithTheme(<WindowHeader active />);
+      const windowHeader = container.firstChild as HTMLDivElement;
+
+      expect(windowHeader).toHaveStyleRule('color', theme.headerText);
+      expect(windowHeader).toHaveStyleRule(
+        'background',
+        theme.headerBackground
+      );
+    });
+
+    it('renders non-active header when set to false', () => {
+      const { container } = renderWithTheme(<WindowHeader active={false} />);
+      const windowHeader = container.firstChild;
+
+      expect(windowHeader).toHaveStyleRule('color', theme.headerNotActiveText);
+      expect(windowHeader).toHaveStyleRule(
+        'background',
+        theme.headerNotActiveBackground
+      );
+    });
+  });
+});

src/WindowHeader/WindowHeader.js

@@ -0,0 +1,49 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { StyledButton } from '../Button/Button';
+import { CommonStyledProps } from '../types';
+
+type WindowHeaderProps = {
+  children?: React.ReactNode;
+  active?: boolean;
+} & React.HTMLAttributes<HTMLDivElement> &
+  CommonStyledProps;
+
+const StyledWindowHeader = styled.div<Pick<WindowHeaderProps, 'active'>>`
+  height: 33px;
+  line-height: 33px;
+  padding-left: 0.25rem;
+  padding-right: 3px;
+  font-weight: bold;
+  border: 2px solid ${({ theme }) => theme.material};
+  ${({ active }) =>
+    active === false
+      ? css`
+          background: ${({ theme }) => theme.headerNotActiveBackground};
+          color: ${({ theme }) => theme.headerNotActiveText};
+        `
+      : css`
+          background: ${({ theme }) => theme.headerBackground};
+          color: ${({ theme }) => theme.headerText};
+        `}
+
+  ${StyledButton} {
+    padding-left: 0;
+    padding-right: 0;
+    height: 27px;
+    width: 31px;
+  }
+`;
+
+// TODO - should we add some aria label indicating if window is currently active?
+const WindowHeader = forwardRef<HTMLDivElement, WindowHeaderProps>(
+  function WindowHeader({ active = true, children, ...otherProps }, ref) {
+    return (
+      <StyledWindowHeader active={active} ref={ref} {...otherProps}>
+        {children}
+      </StyledWindowHeader>
+    );
+  }
+);
+
+export { WindowHeader, WindowHeaderProps };