Merge pull request #505 from catho/QTM-493

fix(QTM-493): Updates component types
catho · Jun 16, 2023 · de21510 · de21510
2 parents 3a14f88 + e072ca6
commit de21510
Show file tree

Hide file tree

Showing 69 changed files with 962 additions and 294 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -43,5 +43,13 @@
   "globals": {
     "window": true,
     "document": true
-  }
+  },
+  "overrides": [
+    {
+      "files": "*.d.ts",
+      "excludedFiles": ["*.js, *.jsx"],
+      "parser": "@typescript-eslint/parser",
+      "plugins": ["@typescript-eslint"]
+    }
+  ]
 }
diff --git a/components/Accordion/index.d.ts b/components/Accordion/index.d.ts
@@ -1,4 +1,4 @@
-import { ReactNode, Component } from 'react';
+import { ReactNode, FC } from 'react';
 
 export interface AccordionProps {
     theme?: {
@@ -15,4 +15,5 @@ export interface AccordionProps {
     }>;
 }
 
-export default class Accordion extends Component<AccordionProps> {}
+declare const Accordion: FC<AccordionProps>;
+export default Accordion;
diff --git a/components/Alert/index.d.ts b/components/Alert/index.d.ts
@@ -1,4 +1,4 @@
-import { ReactNode, MouseEventHandler, TouchEventHandler, Component } from 'react';
+import { ReactNode, MouseEventHandler, TouchEventHandler, FC } from 'react';
 import { IconNames } from '../Icon';
 
 export interface AlertProps {
@@ -17,4 +17,5 @@ export interface AlertProps {
     };
 }
 
-export default class Alert extends Component<AlertProps> {}
+declare const Alert: FC<AlertProps>;
+export default Alert;
diff --git a/components/AutoComplete/index.d.ts b/components/AutoComplete/index.d.ts
@@ -1,5 +1,4 @@
-import { Component } from 'react';
-
+import { FC } from 'react';
 export interface AutoCompleteProps {
   theme?: {
     colors?: object;
@@ -19,4 +18,5 @@ export interface AutoCompleteProps {
   onSelectedItem?: (item: string) => void;
 }
 
-export default class AutoComplete extends Component<AutoCompleteProps> { }
+declare const AutoComplete: FC<AutoCompleteProps>;
+export default AutoComplete;
diff --git a/components/Avatar/index.d.ts b/components/Avatar/index.d.ts
@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { FC } from 'react';
 
 export interface AvatarProps {
     picture?: string;
@@ -9,4 +9,5 @@ export interface AvatarProps {
     onClick?: () => void;
 }
 
-export default class Avatar extends Component<AvatarProps> { }
+declare const Avatar: FC<AvatarProps>;
+export default Avatar;
diff --git a/components/Badge/index.d.ts b/components/Badge/index.d.ts
@@ -1,4 +1,4 @@
-import { Component, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 
 export interface BadgeProps {
     skin?: 'primary' | 'secondary' | 'success' | 'error' | 'neutral';
@@ -15,4 +15,5 @@ export interface BadgeProps {
     };
 }
 
-export default class Badge extends Component<BadgeProps> {}
+declare const Badge: FC<BadgeProps>;
+export default Badge;
diff --git a/components/Breadcrumbs/index.d.ts b/components/Breadcrumbs/index.d.ts
@@ -1,5 +1,5 @@
 
-import { Component } from 'react';
+import { FC } from 'react';
 
 export interface BreadcrumbsProps {
   items: Array<{
@@ -13,5 +13,6 @@ export interface BreadcrumbsProps {
   };
 }
 
-export default class Breadcrumbs extends Component<BreadcrumbsProps> {}
+declare const Breadcrumbs: FC<BreadcrumbsProps>;
+export default Breadcrumbs;
 
diff --git a/components/Breakpoints/index.d.ts b/components/Breakpoints/index.d.ts
@@ -16,6 +16,6 @@ export interface Breakpoints {
         columns: number;
     };
 }
-declare const breakPoints: Breakpoints;
+declare const breakpoints: Breakpoints;
 
-export default breakPoints;
+export default breakpoints;
diff --git a/components/Button/index.d.ts b/components/Button/index.d.ts
@@ -1,4 +1,4 @@
-import { Component, ButtonHTMLAttributes, ReactNode, MouseEventHandler } from 'react';
+import { FC, ButtonHTMLAttributes, ReactNode, MouseEventHandler } from 'react';
 import { IconNames } from '../Icon';
 import IconButton from './IconButton';
 
@@ -25,6 +25,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     };
 }
 
-export default class Button extends Component<ButtonProps> {
-    static Icon: IconButton;
-}
+declare const Button: FC<ButtonProps> & {
+    Icon: IconButton;
+};
+
+export default Button;
diff --git a/components/Card/Content.d.ts b/components/Card/Content.d.ts
@@ -1,9 +1,10 @@
-import { ComponentType } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 
-type Content = ComponentType<{
+export interface ContentProps extends HTMLAttributes<HTMLDivElement> {
     theme?: { baseFontSize?: number; spacing?: object };
-}> & {
-    displayName: 'Card.Content';
-};
+    children: ReactNode | ReactNode[];
+}
 
-export default Content;
+declare const Content: FC<ContentProps>;
+
+export default Content;
diff --git a/components/Card/Description.d.ts b/components/Card/Description.d.ts
@@ -1,10 +1,11 @@
-import { ComponentType } from 'react';
+import { ReactNode, FC, HTMLAttributes } from 'react';
 
-type Description = ComponentType<{
+export interface DescriptionProps extends HTMLAttributes<HTMLDivElement> {
     small?: boolean;
     theme?: { baseFontSize?: number; spacing?: object };
-}> & {
-    displayName: 'Card.Description';
-};
+    children: ReactNode | ReactNode[];
+}
 
+declare const Description: FC<DescriptionProps>;
+
 export default Description;
diff --git a/components/Card/Footer.d.ts b/components/Card/Footer.d.ts
@@ -1,9 +1,10 @@
-import { ComponentType } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 
-type Footer = ComponentType<{
+export interface FooterProps extends HTMLAttributes<HTMLElement> {
     theme?: { spacing?: object };
-}> & {
-    displayName: 'Card.Footer';
-};
+    children: ReactNode | ReactNode[];
+}
 
+declare const Footer: FC<FooterProps>;
+
 export default Footer;
diff --git a/components/Card/Header.d.ts b/components/Card/Header.d.ts
@@ -1,9 +1,10 @@
-import { ComponentType } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 
-type Header = ComponentType<{
+export interface HeaderProps extends HTMLAttributes<HTMLElement> {
     theme?: { spacing?: object };
-}> & {
-    displayName: 'Card.Header';
-};
+    children: ReactNode | ReactNode[];
+}
 
+declare const Header: FC<HeaderProps>;
+
 export default Header;
diff --git a/components/Card/HeaderText.d.ts b/components/Card/HeaderText.d.ts
@@ -1,7 +1,9 @@
-import { ComponentType } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 
-type HeaderText = ComponentType & {
-    displayName: 'Card.HeaderText';
-};
+export interface HeaderTextProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode | ReactNode[];
+}
+
+declare const HeaderText: FC<HeaderTextProps>;
 
 export default HeaderText;
diff --git a/components/Card/Media.d.ts b/components/Card/Media.d.ts
@@ -1,11 +1,9 @@
-import { ComponentType } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
-type Media = ComponentType<{
-    className?: string;
-    style?: {};
+export interface MediaProps extends HTMLAttributes<HTMLImageElement> {
     theme?: { colors?: {}; spacing?: {} };
-}> & {
-    displayName: 'Card.Media';
-};
+}
+
+declare const Media: FC<MediaProps>;
 
 export default Media;
diff --git a/components/Card/Thumbnail.d.ts b/components/Card/Thumbnail.d.ts
@@ -1,12 +1,12 @@
-import { ComponentType } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
-type Thumbnail = ComponentType<{
+export interface ThumbnailProps extends HTMLAttributes<HTMLImageElement> {
     src: string;
     alt: string;
     rounded?: boolean;
     theme?: { colors?: object };
-}> & {
-    displayName: 'Card.Thumbnail';
-};
+}
+
+declare const Thumbnail: FC<ThumbnailProps>;
 
 export default Thumbnail;
diff --git a/components/Card/Title.d.ts b/components/Card/Title.d.ts
@@ -1,10 +1,10 @@
-import { ComponentType } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
-type Title = ComponentType<{
+export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
     small?: boolean;
     theme?: { baseFontSize?: object };
-}> & {
-    displayName: 'Card.Title';
-};
+}
 
-export default Title;
+declare const Title: FC<TitleProps>;
+
+export default Title;
diff --git a/components/Card/index.d.ts b/components/Card/index.d.ts
@@ -1,4 +1,4 @@
-import { Component, MouseEvent } from 'react';
+import { FC, MouseEvent } from 'react';
 import Content from './Content';
 import Description from './Description';
 import Footer from './Footer';
@@ -8,28 +8,23 @@ import Media from './Media';
 import Thumbnail from './Thumbnail';
 import Title from './Title';
 
-type Props = {
+export interface CardProps {
     onClick?: (e: MouseEvent) => void;
     theme?: {
-        colors?: object
+        colors?: object;
     },
-    backgroundOpacity?: number
+    backgroundOpacity?: number;
 }
 
-export default class Card extends Component<Props> {
-    static Content: Content;
-
-    static Description: Description;
-
-    static Footer: Footer;
-
-    static Header: Header;
-
-    static HeaderText: HeaderText;
-
-    static Media: Media;
-
-    static Thumbnail: Thumbnail;
-
-    static Title: Title;
+declare const Card: FC<CardProps> & {
+    Content: typeof Content;
+    Description: typeof Description;
+    Footer: typeof Footer;
+    Header: typeof Header;
+    HeaderText: typeof HeaderText;
+    Media: typeof Media;
+    Thumbnail: typeof Thumbnail;
+    Title: typeof Title;
 }
+
+export default Card;
diff --git a/components/Carousel/index.d.ts b/components/Carousel/index.d.ts
@@ -1,14 +1,13 @@
-import { Component } from 'react';
-
-export type NonEmptyArray<T> = [T, ...T[]];
+import { FC } from 'react';
+import { NonEmptyArray } from '../shared/types';
 
 export interface CarouselProps {
   dotsPagination?: boolean,
   speed?: number,
   slidesToScroll?: number,
   arrowColor?: 'primary' | 'success' | 'error' | 'neutral' | 'warning',
   cardSize?: 'small' | 'medium' | 'large',
-  cards:NonEmptyArray<{
+  cards: NonEmptyArray<{
     imagePath?: string,
     imageDescription?: string,
     title?: string,
@@ -22,4 +21,5 @@ export interface CarouselProps {
   };
 }
 
-export default class Carousel extends Component<CarouselProps> {}
+declare const Carousel: FC<CarouselProps>;
+export default Carousel;
diff --git a/components/ChargeBar/index.d.ts b/components/ChargeBar/index.d.ts
@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { FC } from 'react';
 
 export interface ChargeBarProps {
     skin?: 'neutral' | 'primary' | 'secondary' | 'success';
@@ -14,4 +14,5 @@ export interface ChargeBarProps {
     label?: string;
 }
 
-export default class ChargeBar extends Component<ChargeBarProps> {}
+declare const ChargeBar: FC<ChargeBarProps>;
+export default ChargeBar;