fix: spread Box props correctly

Closes issue #190 

* test: add test that reproduces the bug

* fix: add default theme declaration

* fix: avoid collision of `color` prop

* chore: remove StyledComponentBase typing

* fix: update prop compatibility

* test: remove snapshot

Author: jonotrujillo

src/components/Box/Box.spec.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import * as React from 'react';
 import { Colors } from '../../essentials';
-import { Box } from './Box';
+import { Box, BoxProps } from './Box';
 
 describe('Box', () => {
     it('renders without any props', () => {
@@ -33,4 +33,12 @@ describe('Box', () => {
             render(<Box gridColumnGap={2} gridTemplateRows="1fr auto 10%" />).container.firstChild
         ).toMatchSnapshot();
     });
+
+    it('accepts props spreading', () => {
+        const renderBox = () => {
+            const props = { backgroundColor: Colors.POSITIVE_GREEN_900 };
+            return <Box {...props} />;
+        };
+        expect(renderBox).not.toThrow();
+    });
 });

src/components/Box/Box.tsx

@@ -1,4 +1,4 @@
-import styled, { StyledComponentBase } from 'styled-components';
+import styled from 'styled-components';
 import {
     background,
     BackgroundProps,
@@ -24,13 +24,13 @@ interface BoxProps
     extends SpaceProps,
         LayoutProps,
         PositionProps,
-        ColorProps,
+        Omit<ColorProps, 'color'>, // HACK: avoid collision of `color` prop
         FlexboxProps,
         GridProps,
         BackgroundProps,
         TextAlignProps {}
 
-const Box: StyledComponentBase<'div', never, BoxProps, 'theme'> = styled.div.attrs({ theme })<BoxProps>`
+const Box = styled.div.attrs({ theme })<BoxProps>`
     ${compose(space, layout, position, color, flexbox, grid, background, textAlign)}
 `;
 

src/components/FilePicker/FilePicker.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef, FC, useRef, useState } from 'react';
+import React, { ComponentPropsWithoutRef, FC, MouseEventHandler, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { MarginProps } from 'styled-system';
 import { Colors, MediaQueries } from '../../essentials';
@@ -61,7 +61,6 @@ interface OutlinerProps extends BoxProps {
     disabled: boolean;
     error: boolean;
     hasValidFile: boolean;
-    onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
 // NOTE: we want to affect the color of only one icon SVG and not the ICON_FILE_FEEDBACK_COLOR
@@ -146,7 +145,7 @@ const FilePicker: FC<FilePickerProps> = ({
         onFileChange(eventFile, e);
         setFile(eventFile);
     };
-    const onClickHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const onClickHandler: MouseEventHandler = e => {
         // Avoid label trigger file selection twice
         e.preventDefault();
         // Avoid button trigger file selection twice

src/components/Search/Search.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { Colors, Elevation } from '../../essentials';
 import { CloseIcon, MagnifyingGlassIcon } from '../../icons/index';
 import { useControlledState } from '../../utils/hooks/useControlledState';
-import { Box } from '../Box/Box';
+import { Box, BoxProps } from '../Box/Box';
 
 import { Input } from '../Input/Input';
 
@@ -14,7 +14,9 @@ const ActiveStyle = `
     color: ${Colors.ACTION_BLUE_900};
 `;
 
-const SearchResultsContainer = styled(Box)`
+interface SearchResultsContainerProps extends BoxProps, Pick<SearchProps, 'inverted'> {}
+
+const SearchResultsContainer = styled(Box)<SearchResultsContainerProps>`
     position: absolute;
     z-index: ${Elevation.SUGGESTIONS_LIST};
     margin-top: 0.0625rem;
@@ -32,7 +34,11 @@ const ActiveBox = styled(Box)`
     }
 `;
 
-const SearchInputContainer = styled(Box)`
+interface SearchInputContainerProps extends BoxProps {
+    isInFocus: boolean;
+}
+
+const SearchInputContainer = styled(Box)<SearchInputContainerProps>`
     box-sizing: border-box;
     background: white;
     border-radius: 0.25rem;

src/essentials/theme.ts

@@ -1,8 +1,9 @@
+import { DefaultTheme } from 'styled-components';
 import { Colors, SemanticColors } from './Colors/Colors';
 import { Spaces } from './Spaces/Spaces';
 import { Breakpoints, MediaQueries } from './Breakpoints/Breakpoints';
 
-const theme = {
+const theme: DefaultTheme = {
     breakpoints: Breakpoints,
     colors: Colors,
     // todo: rename semanticColors to colors in the next major release

src/styled.d.ts

@@ -0,0 +1,35 @@
+import 'styled-components';
+import { BreakpointsArray, MediaQueries } from './essentials/Breakpoints/Breakpoints';
+import { Colors, SemanticColors } from './essentials/Colors/Colors';
+import { Spaces } from './essentials';
+
+declare module 'styled-components' {
+    export interface DefaultTheme {
+        colors: typeof Colors;
+        semanticColors: typeof SemanticColors;
+        breakpoints: BreakpointsArray;
+        fontSizes: string[];
+        fontWeights: {
+            normal: number;
+            semibold: number;
+            bold: number;
+        };
+        fonts: {
+            normal: string;
+            monospace: string;
+        };
+        mediaQueries: typeof MediaQueries;
+        space: typeof Spaces;
+        radii: string[];
+        iconSizes: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        shadows: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+    }
+}