fix(typescript): fix divider, flex and grid types (#399)

* fix(typescript): fix divider, flex and grid types * feat(grid): add children props to grid Co-authored-by: Camille Souza <camille.souza@aiqfome.com>
aiqfome · Jul 4, 2022 · ca482bf · ca482bf
1 parent 60bfb16
commit ca482bf
Show file tree

Hide file tree

Showing 7 changed files with 3,482 additions and 3,253 deletions.
diff --git a/package.json b/package.json
@@ -24,12 +24,12 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.4",
     "@types/jest": "^26.0.14",
-    "@types/react": "^16.9.52",
+    "@types/react": "^18.0.14",
     "@types/react-dates": "^21.8.0",
     "@types/react-router-dom": "^5.1.6",
     "@types/react-test-renderer": "^16.9.3",
-    "@types/styled-components": "^5.1.4",
-    "@types/styled-system": "^5.1.10",
+    "@types/styled-components": "^5.1.25",
+    "@types/styled-system": "^5.1.15",
     "@typescript-eslint/eslint-plugin": "4.0.1",
     "@typescript-eslint/parser": "4.0.1",
     "babel-loader": "^8.1.0",
@@ -71,7 +71,7 @@
     "react-spring": "^8.0.27",
     "react-table": "^7.6.0",
     "storybook": "^6.4.0",
-    "styled-components": "^5.2.0",
+    "styled-components": "^5.3.5",
     "styled-system": "^5.1.5",
     "uuid": "^8.3.1"
   }

diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
@@ -12,10 +12,12 @@ import styled from 'styled-components'
 
 import { Flex } from '../Flex'
 
-export interface Props extends SpaceProps, ColorProps, LayoutProps {
-  children?: any
-  color?: string
-}
+export type Props = SpaceProps &
+  ColorProps &
+  LayoutProps & {
+    children?: any
+    color?: string
+  }
 
 const LineStyled = styled.hr<Props>`
   ${layout}

diff --git a/src/components/Flex/Flex.tsx b/src/components/Flex/Flex.tsx
@@ -28,33 +28,32 @@ import {
   TextAlignProps
 } from 'styled-system'
 
-export interface Props
-  extends BackgroundProps,
-    SpaceProps,
-    DefaultTheme,
-    LayoutProps,
-    FontSizeProps,
-    FontWeightProps,
-    PositionProps,
-    ColorProps,
-    FlexProps,
-    FlexboxProps,
-    BorderProps,
-    TextAlignProps {
-  variant?: 'auto' | 'centralized' | 'fullCentralized'
-  isClickable?: boolean
-  color?: string
-  fullHeight?: boolean
-  children?: any
-  className?: string
-  onClick?: (e: any) => void
-  onDragOver?: (e: any) => void
-  onDragEnter?: (e: any) => void
-  onDragLeave?: (e: any) => void
-  onDragEnd?: (e: any) => void
-  onDrop?: (e: any) => void
-  style?: any
-}
+export type Props = BackgroundProps &
+  SpaceProps &
+  DefaultTheme &
+  LayoutProps &
+  FontSizeProps &
+  FontWeightProps &
+  PositionProps &
+  ColorProps &
+  FlexProps &
+  FlexboxProps &
+  BorderProps &
+  TextAlignProps & {
+    variant?: 'auto' | 'centralized' | 'fullCentralized'
+    isClickable?: boolean
+    color?: string
+    fullHeight?: boolean
+    children?: any
+    className?: string
+    onClick?: (e: any) => void
+    onDragOver?: (e: any) => void
+    onDragEnter?: (e: any) => void
+    onDragLeave?: (e: any) => void
+    onDragEnd?: (e: any) => void
+    onDrop?: (e: any) => void
+    style?: any
+  }
 
 const FlexStyled = styled.div<Props>`
   ${background}

diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx
@@ -15,14 +15,14 @@ import {
   FontWeightProps
 } from 'styled-system'
 
-export interface Props
-  extends SpaceProps,
-    LayoutProps,
-    FontSizeProps,
-    GridProps,
-    FontWeightProps {
-  color?: string
-}
+export type Props = SpaceProps &
+  LayoutProps &
+  FontSizeProps &
+  GridProps &
+  FontWeightProps & {
+    color?: string
+    children?: any
+  }
 
 export const GridStyled = styled.div<Props>`
   ${color}

diff --git a/src/components/Multistep/Multistep.stories.tsx b/src/components/Multistep/Multistep.stories.tsx
@@ -9,8 +9,11 @@ export default {
   title: 'Multistep'
 }
 
-// eslint-disable-next-line react/prop-types
-const Step: React.FC = ({ children }) => {
+export interface Props {
+  children?: any
+}
+
+const Step: React.FC<Props> = ({ children }) => {
   return <h1>{children}</h1>
 }
 

diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
@@ -15,17 +15,16 @@ import {
   TypographyProps
 } from 'styled-system'
 
-export interface Props
-  extends ColorProps,
-    SpaceProps,
-    LayoutProps,
-    FontSizeProps,
-    FontWeightProps,
-    TypographyProps {
-  cursor?: string
-  truncate?: boolean
-  whiteSpace?: 'nowrap' | 'normal' | 'pre'
-}
+export type Props = ColorProps &
+  SpaceProps &
+  LayoutProps &
+  FontSizeProps &
+  FontWeightProps &
+  TypographyProps & {
+    cursor?: string
+    truncate?: boolean
+    whiteSpace?: 'nowrap' | 'normal' | 'pre'
+  }
 
 export const Text = styled.span<Props>`
   ${color}