Merge pull request #292 from nginformatica/refactor/react-core-compon…

…ents

cypress/integration/Tooltip.feature

@@ -9,5 +9,5 @@ Feature: Tooltip
         Then I should see 'Tooltip'
         And I expect 'tooltip-onopen' spy to have been called 1 times
 
-        When I exit 1th button
+        When I exit focus
         Then I expect 'tooltip-onclose' spy to have been called 1 times

cypress/integration/common/When.cy.tsx

@@ -243,8 +243,8 @@ When('I focus {int}th button', (pos: number) => {
         .focus()
 })
 
-When('I exit {int}th button', (pos: number) => {
-    cy.get('button')
-        .eq(pos - 1)
-        .trigger('blur')
+When('I exit focus', () => {
+    cy.get('[data-testid="testing-outside-click"]')
+        .first()
+        .click(-1050, -1000, { force: true })
 })

cypress/support/factories/tooltip.tsx

@@ -10,9 +10,15 @@ interface IProps {
 
 const Component: React.FC<IProps> = props => {
     return (
-        <Tooltip onClose={props.onClose} onOpen={props.onOpen} title='Tooltip'>
-            <Button variant='outlined'>Simple tooltip</Button>
-        </Tooltip>
+        <>
+            <Tooltip
+                onClose={props.onClose}
+                onOpen={props.onOpen}
+                title='Tooltip'>
+                <Button variant='outlined'>Simple tooltip</Button>
+            </Tooltip>
+            <div data-testid='testing-outside-click'></div>
+        </>
     )
 }
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.26.6",
+    "version": "0.26.7",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.ngi.com.br/",
@@ -66,7 +66,7 @@
         "@types/jest": "24.0.22",
         "@types/node": "10.9.4",
         "@types/ramda": "0.25.36",
-        "@types/react": "16.8.18",
+        "@types/react": "18.0.26",
         "@types/react-router": "5.1.2",
         "@types/react-router-dom": "5.1.2",
         "@types/styled-components": "4.4.2",
@@ -98,8 +98,8 @@
         "node-fetch": "2.6.1",
         "node-polyfill-webpack-plugin": "2.0.1",
         "prettier": "2.8.0",
-        "react": "16.14.0",
-        "react-dom": "16.14.0",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
         "react-router": "5.1.2",
         "react-router-dom": "5.1.2",
         "styled-components": "5.0.0",

src/core/Advertise.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React from 'react'
 import { background } from '../colors'
 import MuiPaper from './Paper'
 import Typography from './Typography'
@@ -23,14 +23,14 @@ const Paper = styled(MuiPaper)`
     flex-direction: column;
 `
 
-const Advertise: FC<AdvertiseProps> = ({
+const Advertise = ({
     comment,
     author,
     padding = 4,
     commentStyle = {},
     authorStyle = {},
     ...otherProps
-}) => (
+}: AdvertiseProps) => (
     <Paper padding={padding} {...otherProps}>
         <Typography
             margin='0 12px'

src/core/AutoComplete.tsx

@@ -1,7 +1,6 @@
 import React, {
     Fragment,
     ReactNode,
-    FC,
     useState,
     useRef,
     ChangeEvent,
@@ -62,7 +61,7 @@ type TSelected = ISelected | string
 const removeAccents = (text: string) =>
     text.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
 
-const AutoComplete: FC<AutoCompleteProps> = props => {
+const AutoComplete = (props: AutoCompleteProps) => {
     const inputRef = useRef<HTMLInputElement>(null)
 
     const index = props.suggestions.findIndex(suggestion => {

src/core/Avatar.tsx

@@ -1,7 +1,7 @@
 import { Avatar as MuiAvatar } from '@material-ui/core'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 import { Theme } from '@material-ui/core/styles/createMuiTheme'
-import React, { FC } from 'react'
+import React from 'react'
 import type { DefaultProps } from './types'
 
 interface AvatarProps extends DefaultProps {
@@ -11,6 +11,7 @@ interface AvatarProps extends DefaultProps {
     src?: string
     imgProps?: object
     primary?: boolean
+    children: React.ReactNode
 }
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -21,12 +22,12 @@ const useStyles = makeStyles((theme: Theme) =>
     })
 )
 
-const Avatar: FC<AvatarProps> = ({
+const Avatar = ({
     children,
     primary,
     className,
     ...otherProps
-}) => {
+}: AvatarProps) => {
     const classes = useStyles()
 
     return (

src/core/Badge.tsx

@@ -1,10 +1,11 @@
 import { Badge as MuiBadge } from '@material-ui/core'
-import React, { FC } from 'react'
+import React from 'react'
 import { BadgeProps as MuiBadgeProps } from '@material-ui/core/Badge'
 import { makeStyles } from '@material-ui/core/styles'
 import type { DefaultProps } from './types'
 
 export interface BadgeProps extends DefaultProps, MuiBadgeProps {
+    children: React.ReactNode
     max?: number
     counter: number | string
     position?: {
@@ -25,7 +26,7 @@ const useBadgeStyles = (position: BadgeProps['position']) => {
     return getStyles()
 }
 
-const Badge: FC<BadgeProps> = props => {
+const Badge = (props: BadgeProps) => {
     const {
         children,
         counter,

src/core/Box.tsx

@@ -1,19 +1,20 @@
-import React, { FC } from 'react'
+import React from 'react'
 import type { DefaultProps } from './types'
 import Paper from './Paper'
 
 export interface BoxProps extends DefaultProps {
     minHeight?: number
+    children: React.ReactNode
 }
 
-const Box: FC<BoxProps> = ({
+const Box = ({
     children,
     margin,
     padding = 18,
     style = {},
     minHeight = 400,
     ...otherProps
-}) => (
+}: BoxProps) => (
     <Paper
         padding={padding}
         margin={margin}

src/core/Button.tsx

@@ -1,5 +1,5 @@
 import { Button as MuiButton } from '@material-ui/core'
-import React, { FC, ElementType, MouseEvent } from 'react'
+import React, { ElementType, MouseEvent } from 'react'
 import styled from 'styled-components'
 import { DefaultProps } from './types'
 
@@ -14,6 +14,7 @@ export interface ButtonProps extends DefaultProps {
     fullWidth?: boolean
     variant?: 'text' | 'outlined' | 'contained' | 'dashed'
     target?: string
+    children?: React.ReactNode
     onClick?(event: MouseEvent<HTMLButtonElement>): void
 }
 
@@ -25,14 +26,14 @@ const StyledButton = styled(MuiButton)<
     opacity: ${props => (props.selected ? 0.5 : 1)};
 `
 
-const Button: FC<ButtonProps> = ({
+const Button = ({
     children,
     margin,
     padding,
     style = {},
     variant,
     ...otherProps
-}) => (
+}: ButtonProps) => (
     <StyledButton
         {...otherProps}
         dashed={variant === 'dashed' ? 'true' : 'false'}

src/core/Card.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React from 'react'
 import { DefaultProps } from './types'
 import MuiCard, { CardProps } from '@material-ui/core/Card'
 import MuiCardActionArea, {
@@ -9,67 +9,67 @@ import MuiCardContent, { CardContentProps } from '@material-ui/core/CardContent'
 import MuiCardMedia, { CardMediaProps } from '@material-ui/core/CardMedia'
 import MuiCardHeader, { CardHeaderProps } from '@material-ui/core/CardHeader'
 
-export const CardActionArea: FC<DefaultProps & CardActionAreaProps> = ({
+export const CardActionArea = ({
     margin,
     padding,
     style,
     ...otherProps
-}) => (
+}: DefaultProps & CardActionAreaProps) => (
     <MuiCardActionArea {...otherProps} style={{ padding, margin, ...style }}>
         {otherProps.children}
     </MuiCardActionArea>
 )
 
-export const CardActions: FC<DefaultProps & CardActionsProps> = ({
+export const CardActions = ({
     margin,
     padding,
     style,
     ...otherProps
-}) => (
+}: DefaultProps & CardActionsProps) => (
     <MuiCardActions {...otherProps} style={{ padding, margin, ...style }}>
         {otherProps.children}
     </MuiCardActions>
 )
 
-export const CardContent: FC<DefaultProps & CardContentProps> = ({
+export const CardContent = ({
     margin,
     padding,
     style,
     ...otherProps
-}) => (
+}: DefaultProps & CardContentProps) => (
     <MuiCardContent {...otherProps} style={{ padding, margin, ...style }}>
         {otherProps.children}
     </MuiCardContent>
 )
 
-export const CardMedia: FC<DefaultProps & CardMediaProps> = ({
+export const CardMedia = ({
     margin,
     padding,
     style,
     ...otherProps
-}) => (
+}: DefaultProps & CardMediaProps) => (
     <MuiCardMedia {...otherProps} style={{ padding, margin, ...style }}>
         {otherProps.children}
     </MuiCardMedia>
 )
 
-export const CardHeader: FC<DefaultProps & CardHeaderProps> = ({
+export const CardHeader = ({
     margin,
     padding,
     style,
     ...otherProps
-}) => (
+}: DefaultProps & CardHeaderProps) => (
     <MuiCardHeader {...otherProps} style={{ padding, margin, ...style }}>
         {otherProps.children}
     </MuiCardHeader>
 )
 
-const Card: FC<DefaultProps & CardProps> = ({
+const Card = ({
     margin,
     padding,
     style,
     ...otherProps
-}) => (
+}: DefaultProps & CardProps) => (
     <MuiCard {...otherProps} style={{ padding, margin, ...style }}>
         {otherProps.children}
     </MuiCard>

src/core/Chapter.tsx

@@ -1,15 +1,16 @@
-import React, { CSSProperties, FC } from 'react'
+import type { TypographyProps } from '@material-ui/core/Typography'
+import React, { CSSProperties } from 'react'
 import styled from 'styled-components'
 import { background, primary as primaryColor } from '../colors'
 import { DefaultProps } from './types'
 import Typography from './Typography'
-import type { TypographyProps } from '@material-ui/core/Typography'
 
 interface LineProps extends DefaultProps {
     primary?: boolean
     width?: string
     variant?: TypographyProps['variant']
     childrenStyle?: CSSProperties
+    children?: React.ReactNode
 }
 
 const StyledLine = styled.hr<LineProps>`
@@ -34,15 +35,15 @@ const Container = styled.div`
     }
 `
 
-const Chapter: FC<LineProps> = ({
+const Chapter = ({
     padding,
     margin,
     style,
     childrenStyle,
     children,
     variant,
     ...otherProps
-}) => {
+}: LineProps) => {
     const Line = () => (
         <StyledLine style={{ padding, margin, ...style }} {...otherProps} />
     )

src/core/Chip.tsx

@@ -1,6 +1,6 @@
 import { Chip as MuiChip } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-import React, { FC } from 'react'
+import React from 'react'
 import { DefaultProps } from './types'
 import { ChipProps } from '@material-ui/core/Chip'
 
@@ -17,13 +17,13 @@ const useStyles = makeStyles({
     }
 })
 
-const Chip: FC<ChipProps & IChipProps> = ({
+const Chip = ({
     square,
     padding,
     margin,
     style = {},
     ...otherProps
-}) => {
+}: ChipProps & IChipProps) => {
     const classes = useStyles()
 
     return (

src/core/Collapse.tsx

@@ -1,20 +1,21 @@
 import { Collapse as MuiCollapse } from '@material-ui/core'
-import React, { FC } from 'react'
+import React from 'react'
 import { DefaultProps } from './types'
 
 interface CollapseProps extends DefaultProps {
     collapsedHeight?: string
     in: boolean
     timeout?: number | { enter?: number; exit?: number } | 'auto'
+    children?: React.ReactNode
 }
 
-const Collapse: FC<CollapseProps> = ({
+const Collapse = ({
     children,
     padding,
     margin,
     style = {},
     ...otherProps
-}) => (
+}: CollapseProps) => (
     <MuiCollapse style={{ padding, margin, ...style }} {...otherProps}>
         {children}
     </MuiCollapse>