How to use the @uifabric/foundation.createComponent function in @uifabric/foundation

export type IExampleCardComponentStyles = IComponentStyles;

// tslint:disable-next-line:typedef
const ExampleCardComponentView: IExampleCardComponent['view'] = props => {
  if (!props.children) {
    return null;
  }

  const Slots = getSlots(props, {
    root: 'div'
  });

  return ;
};

export const ExampleCardComponent: React.StatelessComponent = createComponent({
  displayName: 'ExampleCardComponent',
  styles: undefined,
  view: ExampleCardComponentView
});

import * as React from 'react';
import { createComponent } from '@uifabric/foundation';
import { CardItemStyles as styles, CardItemTokens as tokens } from './CardItem.styles';
import { ICardItemProps } from './CardItem.types';
import { CardItemView } from './CardItem.view';

export const CardItem: React.FunctionComponent = createComponent(CardItemView, {
  displayName: 'CardItem',
  styles,
  tokens
});

export default CardItem;

import * as React from 'react';
import { createComponent } from '@uifabric/foundation';
import { CardSectionStyles as styles, CardSectionTokens as tokens } from './CardSection.styles';
import { ICardSectionProps } from './CardSection.types';
import { CardSectionView } from './CardSection.view';

export const CardSection: React.FunctionComponent = createComponent(CardSectionView, {
  displayName: 'CardSection',
  styles,
  tokens
});

export default CardSection;

import { CardStyles as styles, CardTokens as tokens } from './Card.styles';
import { ICardProps } from './Card.types';
import { CardItem } from './CardItem/CardItem';
import { ICardItemProps } from './CardItem/CardItem.types';
import { CardSection } from './CardSection/CardSection';
import { ICardSectionProps } from './CardSection/CardSection.types';

const CardStatics = {
  Item: CardItem,
  Section: CardSection
};

export const Card: React.FunctionComponent & {
  Item: React.FunctionComponent;
  Section: React.FunctionComponent;
} = createComponent(CardView, {
  displayName: 'Card',
  styles,
  tokens,
  statics: CardStatics
});

export default Card;