accounts-frontend/packages/app/components/auth/factory.tsx

import React, { ComponentProps, ComponentType } from 'react';
import { Button } from 'app/components/ui/form';
import RejectionLink from 'app/components/auth/RejectionLink';
import AuthTitle from 'app/components/auth/AuthTitle';
import { MessageDescriptor } from 'react-intl';
import { Color } from 'app/components/ui';
import BaseAuthBody from './BaseAuthBody';

export type Factory = () => {
  Title: ComponentType;
  Body: typeof BaseAuthBody;
  Footer: ComponentType;
  Links: ComponentType;
};

type RejectionLinkProps = ComponentProps<typeof RejectionLink>;
interface FactoryParams {
  title: MessageDescriptor;
  body: typeof BaseAuthBody;
  footer: {
    color?: Color;
    label: string | MessageDescriptor;
    autoFocus?: boolean;
  };
  links?: RejectionLinkProps | Array<RejectionLinkProps>;
}

export default function ({
  title,
  body,
  footer,
  links,
}: FactoryParams): Factory {
  return () => ({
    Title: () => <AuthTitle title={title} />,
    Body: body,
    Footer: () => <Button type="submit" {...footer} />,
    Links: () =>
      links ? (
        <span>
          {([] as Array<RejectionLinkProps>)
            .concat(links)
            .map((link, index) => [
              index ? ' | ' : '',
              <RejectionLink {...link} key={index} />,
            ])}
        </span>
      ) : null,
  });
}