[BD-46] feat: defined types for Paragon export

.eslintignore

@@ -7,3 +7,4 @@ dependent-usage-analyzer/
 build-scss.js
 component-generator/
 example/
+*.d.ts

src/ActionRow/index.jsx → src/ActionRow/index.tsx

@@ -2,17 +2,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+export interface ActionRowProps {
+  as?: React.ElementType;
+  isStacked?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}
+
 function ActionRow({
-  as,
+  as = 'div',
   isStacked,
   children,
+  className,
   ...props
-}) {
+}: ActionRowProps) {
   return React.createElement(
     as,
     {
       ...props,
-      className: classNames(props.className, {
+      className: classNames(className, {
         'pgn__action-row': !isStacked,
         'pgn__action-row-stacked': isStacked,
       }),
@@ -39,7 +47,7 @@ ActionRow.defaultProps = {
   isStacked: false,
 };
 
-function ActionRowSpacer() {
+function ActionRowSpacer(): React.ReactElement {
   return <span className="pgn__action-row-spacer" />;
 }
 

src/Alert/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import BaseAlert, { AlertProps } from 'react-bootstrap/Alert';
+
+declare const ALERT_CLOSE_LABEL_TEXT: string;
+export interface BaseAlertProps extends AlertProps {
+  icon?: React.ReactElement,
+  actions?: Array<React.ReactElement>,
+  dismissible?: boolean,
+  onClose?: () => void,
+  closeLabel?: React.ReactElement,
+  stacked?: boolean,
+}
+declare const Alert: React.ForwardRefExoticComponent<BaseAlertProps> & {
+  Link: typeof BaseAlert.Link;
+  Heading: typeof BaseAlert.Heading;
+};
+export { ALERT_CLOSE_LABEL_TEXT };
+export default Alert;

src/Annotation/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export interface AnnotationProps {
+  className?: string,
+  variant?: 'error' | 'success' | 'warning' | 'light' | 'dark',
+  children?: React.ReactNode,
+  arrowPlacement?: 'top' | 'right' | 'bottom' | 'left',
+}
+declare const Annotation: React.ForwardRefExoticComponent<AnnotationProps>;
+export default Annotation;

src/Avatar/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export interface AvatarProps {
+  alt?: string,
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'huge',
+  src?: string,
+}
+declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;

src/AvatarButton/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export interface AvatarButtonProps {
+  alt?: string,
+  size?: 'xs' | 'sm' | 'md',
+  src?: string,
+}
+declare const AvatarButton: React.FC<AvatarButtonProps>;
+export default AvatarButton;

src/Badge/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BadgeProps } from 'react-bootstrap/Badge';
+
+interface IBadge extends BadgeProps {
+  children?: React.ReactNode,
+}
+
+declare const Badge: React.ForwardRefExoticComponent<IBadge>;
+export default Badge;

src/Breadcrumb/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export interface BreadcrumbProps {
+  links: Array<{
+    label: string,
+    href?: string,
+    className?: string,
+  }>,
+  activeLabel?: string,
+  spacer?: React.ReactElement,
+  clickHandler?: Function,
+  variant?: 'light' | 'dark',
+  isMobile?: boolean,
+  ariaLabel?: string,
+  linkAs?: React.ElementType,
+}
+declare const Breadcrumb: React.FC<BreadcrumbProps>;
+export default Breadcrumb;

src/Breadcrumb/index.jsx

@@ -40,7 +40,9 @@ Breadcrumb.propTypes = {
    * prop as these objects will get passed down as props to the underlying component defined by `linkAs` prop.
    */
   links: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
+    label: PropTypes.string.isRequired,
+    href: PropTypes.string,
+    className: PropTypes.string,
   })).isRequired,
   /** allows to add a label that is not a link to the end of the breadcrumb. */
   activeLabel: PropTypes.string,

src/Button/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ButtonProps } from 'react-bootstrap/Button';
+import { ButtonGroupProps, ButtonToolbarProps } from "react-bootstrap";
+import { BsPrefixRefForwardingComponent } from "react-bootstrap/helpers";
+
+export interface BaseButtonProps extends ButtonProps {
+  iconBefore?: React.ReactElement,
+  iconAfter?: React.ReactElement,
+}
+
+declare type Button = BsPrefixRefForwardingComponent<'button', BaseButtonProps>;
+declare type ButtonGroup = BsPrefixRefForwardingComponent<'div', ButtonGroupProps>;
+declare type ButtonToolbar = BsPrefixRefForwardingComponent<'div', ButtonToolbarProps>;
+
+declare const Button: Button;
+declare const ButtonGroup: ButtonGroup;
+declare const ButtonToolbar: ButtonToolbar;
+export { ButtonGroup, ButtonToolbar };
+export default Button;

src/Card/CardBody.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export interface CardBodyProps {
+  className?: string,
+  children?: React.ReactNode,
+}
+declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps>;
+export default CardBody;

src/Card/CardCarousel/CardCarousel.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export interface CardCarouselProps {
+  ariaLabel: string,
+  children: React.ReactNode,
+  title?: React.ReactNode,
+  subtitle?: React.ReactNode,
+  columnSizes?: {
+    xs?: number,
+    sm?: number,
+    md?: number,
+    lg?: number,
+    xl?: number,
+  },
+  hasInteractiveChildren?: boolean,
+  canScrollHorizontal?: boolean,
+  disableOpacityMasks?: boolean,
+  onScrollPrevious?: Function,
+  onScrollNext?: Function,
+  CardCarouselControls?: React.ElementType,
+}
+declare const CardCarousel: React.ForwardRefExoticComponent<CardCarouselProps>;
+export default CardCarousel;

src/Card/CardCarousel/CardCarouselControls.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+
+declare const CardCarouselControls: React.FC;
+export default CardCarouselControls;

src/Card/CardCarousel/CardCarouselHeader.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export interface CardCarouselHeaderProps {
+  title?: React.ReactNode,
+  subtitle?: React.ReactNode,
+}
+declare const CardCarouselHeader: React.FC<CardCarouselHeaderProps>;
+export default CardCarouselHeader;

src/Card/CardCarousel/CardCarouselItems.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export interface CardCarouselItemsProps {
+  children: React.ReactNode,
+}
+declare const CardCarouselItems: React.FC<CardCarouselItemsProps>;
+export default CardCarouselItems;

src/Card/CardCarousel/CardCarouselProvider.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export interface CardCarouselProviderProps {
+  columnSizes?: {
+    xs?: number,
+    sm?: number,
+    md?: number,
+    lg?: number,
+    xl?: number,
+  },
+  hasInteractiveChildren?: boolean,
+  canScrollHorizontal?: boolean,
+  CardCarouselControls?: React.ElementType,
+  children: React.ReactNode,
+}
+declare const CardCarouselProvider: React.FC<CardCarouselProviderProps>;
+declare const CardCarouselContext: React.Context<{}>;
+export { CardCarouselContext };
+export default CardCarouselProvider;

src/Card/CardCarousel/CardCarouselSubtitle.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+
+export interface CardCarouselSubtitleProps {
+  as?: React.ElementType | string
+  className?: string,
+  children: React.ReactNode,
+}
+declare const CardCarouselSubtitle: React.FC<CardCarouselSubtitleProps>;
+export default CardCarouselSubtitle;

src/Card/CardCarousel/CardCarouselTitle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export interface CardCarouselTitleProps {
+  as?: React.ElementType | string
+  className?: string,
+  children: React.ReactNode,
+}
+declare const CardCarouselTitle: React.FC<CardCarouselTitleProps>;
+export default CardCarouselTitle;

src/Card/CardCarousel/index.d.ts

@@ -0,0 +1,3 @@
+import CardCarousel from "./CardCarousel";
+
+export default CardCarousel;

src/Card/CardContext.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export interface CardContextProviderProps {
+  orientation?: 'horizontal' | 'vertical',
+  isLoading?: boolean,
+  variant?: 'light' | 'dark' | 'muted',
+  children?: React.ReactNode,
+}
+declare const CardContextProvider: React.FC<CardContextProviderProps>;
+declare const CardContext: React.Context<{}>;
+export { CardContextProvider };
+export default CardContext;

src/Card/CardDeck.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export declare const CARD_DECK_ITEM_CLASS_NAME = 'pgn__card-deck-card-item';
+export interface CardDeckProps {
+  columnSizes?: {
+    xs?: number,
+    sm?: number,
+    md?: number,
+    lg?: number,
+    xl?: number,
+  },
+  hasInteractiveChildren?: boolean,
+  canScrollHorizontal?: boolean,
+  hasOverflowScrollItems?: boolean,
+  className?: string,
+  children: React.ReactNode,
+}
+declare const CardDeck: React.ForwardRefExoticComponent<CardDeckProps>;
+export default CardDeck;

src/Card/CardDivider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export interface CardDividerProps {
+  className?: string,
+}
+declare const CardDivider: React.ForwardRefExoticComponent<CardDividerProps>;
+export default CardDivider;

src/Card/CardFooter.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export interface CardFooterProps {
+  isStacked?: boolean,
+  textElement?: React.ReactNode,
+  skeletonHeight?: number,
+  skeletonWidth?: number,
+  orientation?: 'horizontal' | 'vertical',
+  className?: string,
+  children?: React.ReactNode,
+}
+declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps>;
+export default CardFooter;

src/Card/CardGrid.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export interface CardGridProps {
+  className?: string,
+  children?: React.ReactNode,
+  columnSizes?: {
+    xs?: number,
+    sm?: number,
+    md?: number,
+    lg?: number,
+    xl?: number,
+  },
+}
+declare const CardGrid: React.FC<CardGridProps>;
+export default CardGrid;

src/Card/CardHeader.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export interface CardHeaderProps {
+  actions?: React.ReactNode,
+  size?: 'sm' | 'md',
+  subtitle?: React.ReactNode,
+  title?: React.ReactNode,
+  skeletonHeight?: number,
+  skeletonWidth?: number,
+  className?: string,
+}
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps>;
+export default CardHeader;

src/Card/CardImageCap.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export interface CardImageCapProps {
+  src?: string,
+  fallbackSrc?: string,
+  srcAlt?: string,
+  logoSrc?: string,
+  fallbackLogoSrc?: string,
+  logoAlt?: string,
+  skeletonHeight?: number,
+  skeletonWidth?: number,
+  logoSkeleton?: boolean,
+  logoSkeletonHeight?: number,
+  logoSkeletonWidth?: number,
+  className?: string,
+  children?: React.ReactNode,
+}
+declare const CardImageCap: React.ForwardRefExoticComponent<CardImageCapProps>;
+export default CardImageCap;

src/Card/CardSection.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export interface CardSectionProps {
+  title?: React.ReactNode,
+  actions?: React.ReactNode,
+  muted?: boolean,
+  skeletonHeight?: number,
+  skeletonWidth?: number,
+  className?: string,
+  children?: React.ReactNode,
+}
+declare const CardSection: React.ForwardRefExoticComponent<CardSectionProps>;
+export default CardSection;

src/Card/CardStatus.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export interface CardStatusProps {
+  variant?: 'success' | 'primary' | 'warning' | 'danger',
+  icon?: React.ReactElement,
+  title?: React.ReactNode,
+  className?: string,
+  children?: React.ReactNode,
+}
+declare const CardStatus: React.ForwardRefExoticComponent<CardStatusProps>;
+export default CardStatus;