@kadconsulting/dry/dist/src/components/Document/DocumentTypes.d.ts

KAD Reusable Component Library

import type { CSSProperties, HTMLAttributes, ReactElement } from 'react';
import { ButtonProps } from '../Button';
import { AccordionProps } from '../Accordion';
import { BadgeProps } from '../Badge';
import { ContentSectionProps } from '../ContentSection';
import { NavBarProps } from '../NavBar';
import { TextInputProps } from '../TextInput';
import { ViewportBreakpointProviderProps } from '../ViewportBreakpointProvider';
import { DropdownSelectProps } from '../DropdownSelect';
import { ToastProps } from '../Toast';
import { TextareaProps } from '../Textarea';
import { ModalProps } from '../Modal';
import { LoadingSpinnerProps } from '../LoadingSpinner';
import { CheckboxProps } from '../Checkbox';
import { CheckboxGroupProps } from '../CheckBoxGroup';
import { CardProps } from '../Card';
import { CardCarouselProps } from '../CardCarousel';
import { AttachmentsProps } from '../Attachments';
import { ExportCSVButtonProps } from '../ExportCSVButton';
import { DropdownItemProps } from '../DropdownItem';
import { ConfirmationDialogProps } from '../ConfirmationDialog';
import { ProgressStepsProps } from '../ProgressSteps';
import { ImageProps } from '../@primitives';
import { RadioButtonProps } from '../RadioButton';
/**
 * Shared types
 */
export type MediaQueries = {
    mediaQueries: {
        all?: CSSProperties;
        mobile?: CSSProperties;
        tablet?: CSSProperties;
        desktop?: CSSProperties;
    };
};
/**
 * Styles can support multiple media queries or one style
 * object shared by all breakpoints. Each breakpoint extends
 * all, if provided, but the higher specificity of each
 * breakpoint overrides lower specificity of `all` styles.
 */
export type Style = CSSProperties | MediaQueries;
/**
 * Applies media query possibilities to a style object for
 * constituent elements (and thus overrides the type of
 * HTMLElement['style'] to accommodate), but otherwise
 * extends HTMLElement so that it can accept all normal DOM
 * props ('class', 'id', aria-*', 'data-*', etc.).
 */
export type Element<E extends HTMLAttributes<HTMLElement>> = E & {
    /** Custom styles to be applied. */
    style?: Style;
};
/** Document elements that can recursively render Documents within must pass these props to descendant Documents */
export type RecursiveDocumentProps = {
    /** Directory from which this Document will retrieve icon components; passed by Document component  */
    iconsDirectory: string;
    /** Directory from which this Document will retrieve images; passed by Document component  */
    imagesDirectory: string;
};
/**
 * Text types
 */
export type Span = Element<HTMLAttributes<HTMLSpanElement>> & {
    contentType: 'span';
    text: Span[] | string;
};
export type Heading = Element<HTMLAttributes<HTMLHeadingElement>> & {
    text: Span[] | string;
    contentType: 'heading';
    hierarchy: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
};
export type Paragraph = Element<HTMLAttributes<HTMLParagraphElement>> & {
    hierarchy: 'p';
    text: Span[] | string;
    contentType: 'paragraph';
};
/**
 * Component Types
 */
export type ListType = HTMLUListElement | HTMLOListElement;
export type List = Element<HTMLAttributes<ListType>> & RecursiveDocumentProps & {
    /** List items themselves can nest content */
    items: DocumentType[];
    contentType: 'list';
    /** Specify whether the list text should appear dark on a light background or light on a dark background; default: 'light-contrast' */
    color: 'light-contrast' | 'dark-contrast';
    /** The list type to be displayed (unordered or ordered) */
    listType: 'ul' | 'ol';
};
export type Columns = Element<HTMLAttributes<HTMLDivElement>> & RecursiveDocumentProps & {
    /** The content to be displayed inside the columns; this uses CSS column-count to allocate content evenly across the specified number of columns, depending on the height of the container  */
    content: DocumentType;
    columnCount: number;
    contentType: 'columns';
};
export type Grid = Element<HTMLAttributes<HTMLDivElement>> & RecursiveDocumentProps & {
    /** The content to be displayed inside each grid item */
    items: DocumentType[];
    columnCount: number;
    contentType: 'grid';
};
export type LineBreak = Element<HTMLAttributes<HTMLBRElement>> & {
    contentType: 'linebreak';
};
export type Tag = Element<HTMLAttributes<HTMLDivElement>> & {
    contentType: 'tag';
    /** The text to be displayed inside the tag */
    text: string;
};
export type Button = Element<ButtonProps> & {
    contentType: 'button';
};
export type Accordion = Element<AccordionProps> & {
    contentType: 'accordion';
};
export type Badge = Element<BadgeProps> & {
    contentType: 'badge';
};
export type ContentSection = Element<ContentSectionProps> & {
    contentType: 'contentSection';
};
export type NavBar = Element<NavBarProps> & {
    contentType: 'navBar';
};
export type TextInput = Element<TextInputProps> & {
    contentType: 'textInput';
};
export type ViewportBreakpointProvider = Element<ViewportBreakpointProviderProps> & {
    contentType: 'viewportBreakpointProvider';
};
export type DatePicker = {
    contentType: 'datePicker';
};
export type Avatar = {
    contentType: 'avatar';
};
export type DropdownSelect = Element<DropdownSelectProps> & {
    contentType: 'dropdownSelect';
};
export type DataTable = {
    contentType: 'dataTable';
};
export type Document = {
    contentType: 'document';
};
export type Toast = Element<ToastProps> & {
    contentType: 'toast';
};
export type Textarea = Element<TextareaProps> & {
    contentType: 'textarea';
};
export type Modal = Element<ModalProps> & {
    contentType: 'modal';
};
export type LoadingSpinner = Element<LoadingSpinnerProps> & {
    contentType: 'loadingSpinner';
};
export type Checkbox = Element<CheckboxProps> & {
    contentType: 'checkbox';
};
export type CheckboxGroup = Element<CheckboxGroupProps> & {
    contentType: 'checkboxGroup';
};
export type Card = Element<CardProps> & {
    contentType: 'card';
};
export type CardCarousel = Element<CardCarouselProps> & {
    contentType: 'cardCarousel';
};
export type AttachmentsModal = {
    contentType: 'attachmentsModal';
};
export type Attachments = Element<AttachmentsProps> & {
    contentType: 'attachments';
};
export type ExportCSVButton = Element<ExportCSVButtonProps> & {
    contentType: 'exportCSVButton';
};
export type DropdownItem = Element<DropdownItemProps> & {
    contentType: 'dropdownItem';
};
export type ConfirmationDialog = Element<ConfirmationDialogProps> & {
    contentType: 'confirmationDialog';
};
export type ProgressSteps = Element<ProgressStepsProps> & {
    contentType: 'progressSteps';
};
export type Image = Element<ImageProps> & {
    contentType: 'image';
};
export type RadioButton = Element<RadioButtonProps> & {
    contentType: 'radioButton';
};
export type RadioButtonGroup = {
    contentType: 'radioButtonGroup';
};
export type Div = {
    contentType: 'div';
};
export type DocumentElement = {
    contentType: 'element';
    content: ReactElement;
};
export type Content = Heading | Paragraph | Span | List | LineBreak | Columns | Grid | Document | Image | Tag | Button | Accordion | Badge | ContentSection | NavBar | TextInput | ViewportBreakpointProvider | DatePicker | Avatar | DropdownSelect | DataTable | Toast | Textarea | Modal | LoadingSpinner | Checkbox | CheckboxGroup | Card | CardCarousel | AttachmentsModal | Attachments | ExportCSVButton | DropdownItem | ConfirmationDialog | ProgressSteps | Image | RadioButton | RadioButtonGroup | Div;
export type DocumentType = Content[];
export type DocumentProps = {
    content: DocumentType;
    iconsDirectory: string;
    /** Path (originating from the public directory) from which to dynamically load images */
    imagesDirectory: string;
    className?: string;
    style?: CSSProperties;
};