@kadconsulting/dry
Version:
KAD Reusable Component Library
321 lines • 15.7 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import P from './components/P';
import Pill from './components/Pill';
import Grid from './components/Grid';
import List from './components/List';
import Span from './components/Span';
import Icon from './components/Icon';
import Image from './components/Image';
import Columns from './components/Columns';
import Heading from './components/Heading';
// ====================================================================================================================
// DRY specific components
// ====================================================================================================================
export { Accordion } from '../Accordion';
export { Badge } from '../Badge';
import { Button } from '../Button';
export { ContentSection } from '../ContentSection';
export { Icon } from '../Icons/Icon';
export { NavBar } from '../NavBar';
// export {Typography} from '../Typography';
export { ViewportBreakpointProvider } from '../ViewportBreakpointProvider';
export { Avatar } from '../Avatar';
export { DataTable } from '../DataTable';
export { Document } from '../Document';
export { Toast } from '../Toast';
// export {Dropdown} from '../Dropdown';
export { Modal } from '../Modal';
export { LoadingSpinner } from '../LoadingSpinner';
export { Card } from '../Card';
export { CardCarousel } from '../CardCarousel';
export { AttachmentsModal } from '../AttachmentsModal';
export { Attachments } from '../Attachments';
export { ExportCSVButton } from '../ExportCSVButton';
export { DropdownItem } from '../DropdownItem';
export { ConfirmationDialog } from '../ConfirmationDialog';
export { ProgressSteps } from '../ProgressSteps';
export { Image } from '../@primitives';
// =================================================
// Form specific components
// =================================================
export { TextInput } from '../TextInput';
export { DateInputPicker } from '../DateInputPicker';
export { DropdownSelect } from '../DropdownSelect';
export { Checkbox } from '../Checkbox';
export { CheckboxGroup } from '../CheckBoxGroup';
export { RadioButton } from '../RadioButton';
export { RadioButtonGroup } from '../RadioButtonGroup';
export { Toggle } from '../Toggle';
export { Textarea } from '../Textarea';
// ====================================================================================================================
// End of DRY specific components
// ====================================================================================================================
import { forwardRef, useMemo } from 'react';
import LineBreak from './components/LineBreak';
import classname from 'classnames';
import './Document.scss';
import { RadioButtonGroup } from '../RadioButtonGroup';
import { ProgressSteps } from '../ProgressSteps';
import { ConfirmationDialog } from '../ConfirmationDialog';
import { DropdownItem } from '../DropdownItem';
import { ExportCSVButton } from '../ExportCSVButton';
import { Attachments } from '../Attachments';
import { AttachmentsModal } from '../AttachmentsModal';
import { CardCarousel } from '../CardCarousel';
import { Card } from '../Card';
import { CheckboxGroup } from '../CheckBoxGroup';
import { Checkbox } from '../Checkbox';
import { LoadingSpinner } from '../LoadingSpinner';
import { Modal } from '../Modal';
import { Textarea } from '../Textarea';
import { Toast } from '../Toast';
import { DataTable } from '../DataTable';
import { DropdownSelect } from '../DropdownSelect';
import { Avatar } from '../Avatar';
import { DatePicker } from '../DatePicker';
import { ViewportBreakpointProvider } from '../ViewportBreakpointProvider';
import { TextInput } from '../TextInput';
import { NavBar } from '../NavBar';
import { ContentSection } from '../ContentSection';
import { Badge } from '../Badge';
import { Accordion } from '../Accordion';
import { RadioButton } from '../RadioButton';
import { Toggle } from '../Toggle';
const Document = forwardRef(({ content, imagesDirectory, iconsDirectory, className, style }, ref) => {
/** Props that must be passed to recursive documents, if applicable */
// TODO-p1: fix the image path and icon path
const recursiveProps = useMemo(() => ({
iconsDirectory,
imagesDirectory,
}), [iconsDirectory, imagesDirectory]);
const Content = useMemo(() =>
// TODO-p1: add all DRY components and remove this any type
content.map((element, i) => {
switch (element.contentType) {
case 'element': {
return React.cloneElement(element.content, { key: i });
}
case 'div': {
/** Omit non-DOM related props to suppress "React does not recognize the `` prop on a DOM element warnings */
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx("div", { ...rest }, i);
}
case 'span': {
/** Omit non-DOM related props to suppress "React does not recognize the `` prop on a DOM element warnings */
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Span, { ...rest }, i);
}
case 'paragraph': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(P, { ...rest }, i);
}
case 'heading': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Heading, { ...rest }, i);
}
case 'list': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(List, { ...rest, ...recursiveProps }, i);
}
case 'grid': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Grid, { ...rest, ...recursiveProps }, i);
}
case 'columns': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Columns, { ...rest, ...recursiveProps }, i);
}
case 'icon': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Icon, { ...rest, iconsDirectory: iconsDirectory }, i);
}
case 'image': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return (_jsx(Image, { ...rest, imagesDirectory: imagesDirectory }, i));
}
case 'linebreak': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(LineBreak, { ...rest }, i);
}
case 'tag': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, text, ...rest } = element;
return (_jsx(Pill, { className: 'tag', ...rest, children: text }, i));
}
case 'button': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Button, { ...rest }, i);
}
case 'accordion': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Accordion, { ...rest }, i);
}
case 'badge': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Badge, { ...rest }, i);
}
case 'contentSection': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(ContentSection, { ...rest }, i);
}
case 'icon': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Icon, { ...rest }, i);
}
case 'navBar': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(NavBar, { ...rest }, i);
}
case 'textInput': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(TextInput, { ...rest }, i);
}
case 'viewportBreakpointProvider': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(ViewportBreakpointProvider, { ...rest }, i);
}
case 'datePicker': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(DatePicker, { ...rest }, i);
}
// case 'dateInputPicker': {
// /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
// const { contentType, ...rest } = element;
// return <DateInputPicker key={i} {...rest} />;
// }
case 'avatar': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Avatar, { ...rest }, i);
}
case 'dropdownSelect': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(DropdownSelect, { ...rest }, i);
}
case 'dataTable': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(DataTable, { ...rest }, i);
}
case 'document': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, style, ...rest } = element;
return _jsx(Document, { style: style, ...rest }, i);
}
case 'toast': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Toast, { ...rest }, i);
}
case 'textarea': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Textarea, { ...rest }, i);
}
case 'modal': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Modal, { ...rest }, i);
}
case 'loadingSpinner': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(LoadingSpinner, { ...rest }, i);
}
case 'checkbox': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Checkbox, { ...rest }, i);
}
case 'checkboxGroup': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(CheckboxGroup, { ...rest }, i);
}
case 'card': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Card, { ...rest }, i);
}
case 'cardCarousel': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(CardCarousel, { ...rest }, i);
}
case 'attachmentsModal': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(AttachmentsModal, { ...rest }, i);
}
case 'attachments': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Attachments, { ...rest }, i);
}
case 'exportCSVButton': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(ExportCSVButton, { ...rest }, i);
}
case 'dropdownItem': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(DropdownItem, { ...rest }, i);
}
case 'confirmationDialog': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(ConfirmationDialog, { ...rest }, i);
}
case 'progressSteps': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(ProgressSteps, { ...rest }, i);
}
case 'image': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Image, { ...rest }, i);
}
case 'radioButton': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(RadioButton, { ...rest }, i);
}
case 'radioButtonGroup': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(RadioButtonGroup, { ...rest }, i);
}
case 'toggle': {
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
const { contentType, ...rest } = element;
return _jsx(Toggle, { ...rest }, i);
}
}
}), [content, recursiveProps, imagesDirectory, iconsDirectory]);
return (_jsx("div", { style: style, className: classname('document', className), ref: ref, children: Content }));
});
export default Document;
//# sourceMappingURL=Document.js.map