From 1dc611cbbcbbf03c6979542eb7641dd1645f8022 Mon Sep 17 00:00:00 2001 From: LotteMoors Date: Mon, 31 Jan 2022 15:50:53 +0100 Subject: [PATCH 1/3] chore: add docsjs & tsd-jsdoc Add script: npm run types => generates file with compiled types (docsjs -> typescript) in types/typings.d.ts. Add docsjs & tsd-jsdoc(compiler) dependency. --- package.json | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index a4a1b91..2e9ed70 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.0.19", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", + "types": "./types/types.d.ts", "scripts": { "prepublish": "npm run test && npm run build", "start": "start-storybook -p 9009 -s public", @@ -12,7 +13,8 @@ "lint": "npm run lint:scss && npm run lint:js", "lint:js": "eslint --ext js,jsx,ts .", "lint:scss": "stylelint '?(.)**/*.{css,scss}' --aei", - "build-storybook": "build-storybook -s public" + "build-storybook": "build-storybook -s public", + "types": "jsdoc -t node_modules/tsd-jsdoc/dist -r src/. -d types" }, "publishConfig": { "@acpaas-ui:registry": "https://nexusrepo.antwerpen.be/repository/npm-private" @@ -35,6 +37,7 @@ "@popperjs/core": "^2.6.0", "array-tree-filter": "^2.1.0", "classnames": "^2.2.6", + "docsjs": "^1.2.7", "lodash.debounce": "^4.0.8", "prop-types": "^15.7.2", "ramda": "^0.27.1", @@ -91,6 +94,7 @@ "stylelint": "^13.2.1", "stylelint-config-standard": "^20.0.0", "stylelint-scss": "^3.18.0", + "tsd-jsdoc": "^2.5.0", "typescript": "^3.8.3" } } From 7c8010cb7c64c7b1c3093c5bdf1c104126d48d99 Mon Sep 17 00:00:00 2001 From: LotteMoors Date: Mon, 31 Jan 2022 15:51:29 +0100 Subject: [PATCH 2/3] chore: add types/ map to .gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 0f7f11b..d3fd097 100644 --- a/.gitignore +++ b/.gitignore @@ -84,6 +84,7 @@ jspm_packages/ # TypeScript v1 declaration files typings/ +types/ # TypeScript cache *.tsbuildinfo From 28e075c7c40cba0685cba792a21cfcdb6df80dcb Mon Sep 17 00:00:00 2001 From: LotteMoors Date: Mon, 31 Jan 2022 15:53:22 +0100 Subject: [PATCH 3/3] chore(components): add docsjs typings --- src/components/ActionBar/ActionBar.jsx | 10 +++++ src/components/Cascader/Cascader.jsx | 40 +++++++++++++++++ src/components/Cascader/Menus/Menus.jsx | 29 ++++++++++++ src/components/Container/Container.jsx | 7 +++ .../ContextHeader/ContextHeader.jsx | 17 +++++++ .../ControlledModal/ControlledModal.jsx | 13 ++++++ .../Dnd/DndContainer/DndContainer.jsx | 7 +++ .../Dnd/DndDragDroppable/DndDragDroppable.jsx | 21 ++++----- .../EllipsisWithTooltip.jsx | 12 +++++ src/components/FileUpload/FileUpload.jsx | 28 ++++++++++++ .../FileUploadZone/FileUploadZone.jsx | 18 ++++++++ .../ValidationList/ValidationList.jsx | 13 ++++++ src/components/Filter/Filter.jsx | 20 +++++++++ src/components/NavList/NavList.jsx | 13 ++++++ .../PaginatedTable/PaginatedTable.jsx | 45 +++++++++++++++++++ src/components/ProgressBar/ProgressBar.jsx | 7 +++ .../ScrollableTabs/ScrollableTabs.jsx | 12 +++++ src/components/Status/Status.jsx | 5 +++ src/components/Table/Table.jsx | 45 +++++++++++++++++++ src/components/Table/TableCell/TableCell.jsx | 14 ++++++ .../Table/TableHeader/TableHeader.jsx | 18 ++++++++ .../Table/TableLoader/TableLoader.jsx | 6 +++ .../TablePlaceholder/TablePlaceholder.jsx | 10 +++++ src/components/Table/TableRow/TableRow.jsx | 14 ++++++ src/components/Timepicker/Timepicker.jsx | 23 ++++++++++ src/components/Tooltip/Tooltip.jsx | 12 +++++ 26 files changed, 449 insertions(+), 10 deletions(-) diff --git a/src/components/ActionBar/ActionBar.jsx b/src/components/ActionBar/ActionBar.jsx index 1a2f73f..f67c51e 100644 --- a/src/components/ActionBar/ActionBar.jsx +++ b/src/components/ActionBar/ActionBar.jsx @@ -10,6 +10,16 @@ import { ActionBarContentSection } from './ActionBar.slots'; const cx = classNames.bind(styles); +/** + * @typedef ActionBarProps + * @prop {string} [className] + * @prop {React.ReactNode} [children] + * @prop {React.ReactNode} [container] + * @prop {boolean} [disablePortal] + * @prop {boolean} isOpen + */ + +/** @param {ActionBarProps} props */ const ActionBar = ({ children, className, diff --git a/src/components/Cascader/Cascader.jsx b/src/components/Cascader/Cascader.jsx index 64b349f..b1c0fd3 100644 --- a/src/components/Cascader/Cascader.jsx +++ b/src/components/Cascader/Cascader.jsx @@ -9,6 +9,46 @@ import { ALLOWED_KEYS, BUILT_IN_PLACEMENTS, REOPEN_POPUP_KEYS } from './Cascader import { Menus } from './Menus'; import './Cascader.scss'; +/** + * @typedef {object} CascaderOption +* Value of the option +* @prop {string|number} value +* Human readable label +* @prop {React.ReactNode} label +* True when loading +* @prop {boolean} CascaderOptionsProps.loading +* Indicates the end of a cascader tree +* @prop {boolean} CascaderOptionsProps.isLeaf + */ + +/** + * @typedef CascaderProps + * Component class prefix + * @prop {string} [prefixCls] + * Default value + * @prop {string[] | number[]} [defaultValue] + * Value + * @prop {string[] | number[]} [value] + * Cascader options + * @prop {object[]} [options] + * @prop {string | number} [options.value] + * @prop {React.ReactNode} [options.label] + * @prop {boolean} [options.loading] + * @prop {boolean} [options.isLeaf] + * @prop {CascaderOption[]} [options.children] + * Change the value on each selection, by default it will only + * trigger the onchange event when selecting a leaf option + * @prop {boolean} [changeOnSelect] + * Callback when finisching the cascader select + * @prop {Function} [onChange] + * Lazy load children + * @prop {Function} [loadData] + * Selecting an option is not possible when disabled + * @prop {boolean} [disabled] + * @prop {React.ReactElement} [children] + */ + +/** @param {CascaderProps} props */ const Cascader = ({ defaultValue, value, diff --git a/src/components/Cascader/Menus/Menus.jsx b/src/components/Cascader/Menus/Menus.jsx index c5971b1..b369e48 100644 --- a/src/components/Cascader/Menus/Menus.jsx +++ b/src/components/Cascader/Menus/Menus.jsx @@ -3,6 +3,35 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; +/** + * @typedef {object} CascaderOption +* Value of the option +* @prop {string|number} value +* Human readable label +* @prop {React.ReactNode} label +* True when loading +* @prop {boolean} CascaderOptionsProps.loading +* Indicates the end of a cascader tree +* @prop {boolean} CascaderOptionsProps.isLeaf + */ + +/** + * @typedef MenusProps + * @prop {string} [prefixCls] + * Value + * @prop {string[] | number[]} [value] + * Callback when selecting an option + * @prop {function} [onSelect] + * Options + * @prop {object[]} [options] + * @prop {string | number} [options.value] + * @prop {React.ReactNode} [options.label] + * @prop {boolean} [options.loading] + * @prop {boolean} [options.isLeaf] + * @prop {CascaderOption[]} [options.children] + */ + +/** @param {MenusProps} props */ const Menus = ({ value = [], options = [], diff --git a/src/components/Container/Container.jsx b/src/components/Container/Container.jsx index d161c65..fbd5b19 100644 --- a/src/components/Container/Container.jsx +++ b/src/components/Container/Container.jsx @@ -2,6 +2,13 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; +/** + * @typedef {object} ContainerProp + * @prop {string} [className] + * @prop {React.ReactNode} [children] + */ + +/** @param {ContainerProp} props */ const Container = ({ className, children }) => (
{children} diff --git a/src/components/ContextHeader/ContextHeader.jsx b/src/components/ContextHeader/ContextHeader.jsx index 03b4ce9..ad92e16 100644 --- a/src/components/ContextHeader/ContextHeader.jsx +++ b/src/components/ContextHeader/ContextHeader.jsx @@ -11,6 +11,23 @@ import { ContextHeaderActionsSection, ContextHeaderTopSection } from './ContextH const cx = classNames.bind(styles); +/** + * @typedef ContextHeaderProps + * @prop {string} [className] + * @prop {React.ReactNode|React.ReactNode[]} [children] + * @prop {string | React.ReactNode} [title] + * @prop {object[]} [badges] + * @prop {'primary' | 'secondary' | 'success' | 'warning' | 'danger'} badges.type + * @prop {string} badges.name + * @prop {object[]} [tabs] + * @prop {string} tabs.name + * @prop {string} tabs.target + * @prop {boolean} [tabs.active] + * @prop {boolean} [tabs.disabled] + * @prop {Function} [linkProps] + * + */ +/** @param {ContextHeaderProps} props */ const ContextHeader = ({ className, children, diff --git a/src/components/ControlledModal/ControlledModal.jsx b/src/components/ControlledModal/ControlledModal.jsx index fbff7d1..6bdf69e 100644 --- a/src/components/ControlledModal/ControlledModal.jsx +++ b/src/components/ControlledModal/ControlledModal.jsx @@ -13,6 +13,19 @@ import { const cx = classnames.bind(styles); +/** + * @typedef ControlledModalProp + * @prop {string} [className] + * @prop {React.ReactElement} [children] + * @prop {string} [overlayClassName] + * @prop {Element} [node] + * @prop {Function} [onClose] + * @prop {boolean} show + * @prop {'large'} [size] + * @prop {boolean} [lockBodyScroll] + */ + +/** @param {ControlledModalProp} props */ const ControlledModal = ({ children, className, overlayClassName, lockBodyScroll = true, node, onClose, show, size, }) => { diff --git a/src/components/Dnd/DndContainer/DndContainer.jsx b/src/components/Dnd/DndContainer/DndContainer.jsx index 0d96e7b..9cd47e8 100644 --- a/src/components/Dnd/DndContainer/DndContainer.jsx +++ b/src/components/Dnd/DndContainer/DndContainer.jsx @@ -5,6 +5,13 @@ import { HTML5Backend } from 'react-dnd-html5-backend'; const DNDContext = createDndContext(HTML5Backend); +/** + * @typedef {object} DndContainerProp + * @prop {boolean} [draggable] + * @prop {React.ReactNode[] | React.ReactNode} [children] + */ + +/** @param {DndContainerProp} props */ const DndContainer = ({ draggable, children }) => { const manager = useRef(DNDContext); diff --git a/src/components/Dnd/DndDragDroppable/DndDragDroppable.jsx b/src/components/Dnd/DndDragDroppable/DndDragDroppable.jsx index cda44eb..e0c5e61 100644 --- a/src/components/Dnd/DndDragDroppable/DndDragDroppable.jsx +++ b/src/components/Dnd/DndDragDroppable/DndDragDroppable.jsx @@ -1,7 +1,17 @@ -import { PropTypes } from 'prop-types'; import { useRef } from 'react'; import { useDrag, useDrop } from 'react-dnd'; +/** + * @typedef DndDragDroppableProp + * @prop {string[]} [accept] + * @prop {boolean} [allowHorizontalDrag] + * @prop {number} [index] + * @prop {Function} [moveRow] + * @prop {Function} [children] + * @prop {*} [id] + */ + +/** @param {DndDragDroppableProp} props */ const DndDragDroppable = ({ allowHorizontalDrag = false, accept, @@ -81,13 +91,4 @@ const DndDragDroppable = ({ return children({ dragDropRef, isDragging }); }; -DndDragDroppable.propTypes = { - accept: PropTypes.arrayOf(PropTypes.string), - allowHorizontalDrag: PropTypes.bool, - index: PropTypes.number, - moveRow: PropTypes.func, - children: PropTypes.func, - id: PropTypes.any, // eslint-disable-line -}; - export default DndDragDroppable; diff --git a/src/components/EllipsisWithTooltip/EllipsisWithTooltip.jsx b/src/components/EllipsisWithTooltip/EllipsisWithTooltip.jsx index abd8e7c..2a8c799 100644 --- a/src/components/EllipsisWithTooltip/EllipsisWithTooltip.jsx +++ b/src/components/EllipsisWithTooltip/EllipsisWithTooltip.jsx @@ -8,6 +8,18 @@ import styles from './EllipsisWithTooltip.module.scss'; const cx = classnames.bind(styles); +/** + * @typedef EllipsisProp + * @prop {string} [className] + * @prop {string} [value] + * @prop {React.ReactNode[] | React.ReactNode} children + * @prop {object} [style] + * @prop {TooltipTypeMap.DEFAULT| TooltipTypeMap.PRIMARY | TooltipTypeMap.SECONDARY} [type] + * @prop {number} [delayShow] + * + */ + +/** @param {EllipsisProp} props */ const EllipsisWithTooltip = ({ children, style, diff --git a/src/components/FileUpload/FileUpload.jsx b/src/components/FileUpload/FileUpload.jsx index f3fde9f..6dc357e 100644 --- a/src/components/FileUpload/FileUpload.jsx +++ b/src/components/FileUpload/FileUpload.jsx @@ -10,6 +10,34 @@ import { FileUploadZone } from './FileUploadZone'; import { Uploader } from './Uploader'; import { ValidationList } from './ValidationList'; +/** + * @typedef FileUploadProps + * @prop {string} id + * @prop {boolean} [disabled] + * @prop {string} [ariaLabelRemove] + * @prop {object} [options] + * @prop {string[]} [options.allowedMimeTypes] + * @prop {string[]} [options.allowedFileTypes] + * @prop {number} [options.maxFileSize] + * @prop {string} [options.type] + * @prop {string} [options.url] + * @prop {number} [options.fileLimit] + * @prop {object} [options.messages] + * @prop {string} [options.messages.INVALID_FILE_TYPE] + * @prop {string} [options.messages.INVALID_FILE_SIZE] + * @prop {string} [options.messages.INVALID_MIME_TYPE] + * @prop {string} [options.messages.REQUEST_ERROR] + * @prop {object} [options.requestHeader] + * @prop {string} [options.requestHeader.key] + * @prop {string} [options.requestHeader.value] + * @prop {object[]} [files] + * @prop {string} files.id + * @prop {string} files.name + * @prop {Function} [selectUploadedFiles] + * @prop {Function} [removeFile] + * @prop {React.ReactNode[] | React.ReactNode} [children] + */ +/** @param {FileUploadProps} props */ const FileUpload = ({ id = '', ariaLabelRemove = 'Verwijder', diff --git a/src/components/FileUpload/FileUploadZone/FileUploadZone.jsx b/src/components/FileUpload/FileUploadZone/FileUploadZone.jsx index a0a5f1b..62822a6 100644 --- a/src/components/FileUpload/FileUploadZone/FileUploadZone.jsx +++ b/src/components/FileUpload/FileUploadZone/FileUploadZone.jsx @@ -7,6 +7,24 @@ import { ProgressBar } from '../../ProgressBar'; import { FileUploadDescription, FileUploadMessage } from '../FileUpload.slots'; import { Uploader } from '../Uploader'; +/** + * @typedef FileUploadZoneProps + * @prop {boolean} [autoUpload] + * @prop {string} [id] + * @prop {Uploader} [uploader] + * @prop {boolean} [disabled] + * @prop {boolean} [multiple] + * @prop {string} [ariaId] + * @prop {Function} [uploadedFiles] + * @prop {Function} [invalidFiles] + * @prop {Function} [onRequestError] + * @prop {Function} [onCustomClick] + * @prop {Function} [onCustomDrop] + * @prop {string[]} [allowedMimeTypes] + * @prop {string[]} [allowedFileTypes] + * @prop {React.ReactNode[] | React.ReactNode} [children] + */ +/** @param {FileUploadZoneProps} props */ const FileUploadZone = ({ autoUpload = true, id = '', diff --git a/src/components/FileUpload/ValidationList/ValidationList.jsx b/src/components/FileUpload/ValidationList/ValidationList.jsx index 686cf96..86331f1 100644 --- a/src/components/FileUpload/ValidationList/ValidationList.jsx +++ b/src/components/FileUpload/ValidationList/ValidationList.jsx @@ -3,6 +3,19 @@ import React from 'react'; import { VALIDATION_MESSAGES_DEFAULT } from '../FileUpload.const'; +/** + * @typedef ValidationListProp + * @prop {object[]} [invalidFiles] + * @prop {string[]} [invalidFiles.reasons] + * @prop {File} [invalidFiles.file] + * @prop {string} [ariaLabelRemove] + * @prop {Function} [removeInvalidFile] + * @prop {object} [messages] + * @prop {string} [messages.INVALID_FILE_TYPE] + * @prop {string} [messages.INVALID_FILE_SIZE] + * @prop {string} [messages.INVALID_MIME_TYPE] + */ +/** @param {ValidationListProp} props */ const ValidationList = ({ invalidFiles = [], messages = VALIDATION_MESSAGES_DEFAULT, diff --git a/src/components/Filter/Filter.jsx b/src/components/Filter/Filter.jsx index 084eb6f..888bfbd 100644 --- a/src/components/Filter/Filter.jsx +++ b/src/components/Filter/Filter.jsx @@ -10,6 +10,26 @@ import { useSlot } from '../../hooks/useSlot'; import './Filter.scss'; import { FilterBody } from './Filter.slots'; +/** + * @typedef FilterProps + * @prop {string} [actionsClassName] + * @prop {React.ReactNode[] | React.ReactNode} [children] + * @prop {string} [className] + * @prop {string} [title] + * @prop {string} [noFilterText] + * @prop {Function} [onConfirm] + * @prop {string} [confirmText] + * @prop {Function} [onClean] + * @prop {string} [cleanText] + * @prop {object[]} [activeFilters] + * @prop {string} [activeFilters.valuePrefix] + * @prop {string} [activeFilters.value] + * @prop {string} [activeFilters.key] + * @prop {Function} [onFilterRemove] + * @prop {boolean} [enableSubmitOnEnter] + */ + +/** @param {FilterProps} props */ const Filter = ({ actionsClassName, className, diff --git a/src/components/NavList/NavList.jsx b/src/components/NavList/NavList.jsx index 5cc1d27..2ae0d0b 100644 --- a/src/components/NavList/NavList.jsx +++ b/src/components/NavList/NavList.jsx @@ -5,6 +5,19 @@ import sanitizeHtml from 'sanitize-html'; import './NavList.scss'; +/** + * @typedef NavListProps + * @prop {string} [className] + * @prop {React.ElementType} [linkComponent] + * @prop {object[]} items + * @prop {boolean} [items.hasError] + * @prop {string} items.label + * @prop {string} [items.description] + * @prop {'large'} [size] + * @prop {boolean} [lockBodyScroll] + */ + +/** @param {NavListProps} props */ const NavList = ({ className, linkComponent: LinkComponent = 'a', items }) => (
    {items.map(({ diff --git a/src/components/PaginatedTable/PaginatedTable.jsx b/src/components/PaginatedTable/PaginatedTable.jsx index 96e3072..b60ff3e 100644 --- a/src/components/PaginatedTable/PaginatedTable.jsx +++ b/src/components/PaginatedTable/PaginatedTable.jsx @@ -7,6 +7,51 @@ import { Table } from '../Table'; import './PaginatedTable.scss'; +/** + * @typedef PaginatedTableProps + * @prop {string} [className] + * @prop {boolean} [hideResultsMessage] + * @prop {Function} [resultsMessage] + * + * Pagination props + * @prop {number} [currentPage] + * @prop {number} [itemsPerPage] + * @prop {Function} [onPageChange] + * @prop {number} [totalValues] + * + * Table props + * @prop {object[]} [rows] + * @prop {object[]} [columns] + * @prop {string} columns.label + * @prop {string} [columns.value] + * @prop {Function} [columns.component] + * @prop {Function} [columns.headerComponent] + * @prop {Function} [columns.format] + * @prop {boolean} [columns.hidden] + * @prop {boolean} [columns.hideLabel] + * @prop {boolean} [columns.disabled] + * @prop {boolean} [columns.ellipsis] + * @prop {string} [columns.width] + * @prop {boolean} [columns.disableSorting] + * @prop {string[]} [columns.classList] + * @prop {string} [columns.fallback] + * @prop {boolean} [loading] + * @prop {boolean} [responsive] + * @prop {boolean} [fixed] + * @prop {boolean} [hasClickAction] + * @prop {object} [activeSorting] + * @prop {string} [activeSorting.key] + * @prop {'asc' | 'desc'} [activeSorting.order] + * @prop {string} [noDataMessage] + * @prop {string} [loadDataMessage] + * @prop {string} [noColumnsMessage] + * @prop {Function} [orderBy] + * @prop {Function} [rowClicked] + * @prop {boolean} [striped] + * @prop {'primary' | 'secondary'} [type] + */ + +/** @param {PaginatedTableProps} props */ const PaginatedTable = ({ className, currentPage = 1, diff --git a/src/components/ProgressBar/ProgressBar.jsx b/src/components/ProgressBar/ProgressBar.jsx index 3d8ea33..4962b7d 100644 --- a/src/components/ProgressBar/ProgressBar.jsx +++ b/src/components/ProgressBar/ProgressBar.jsx @@ -2,6 +2,13 @@ import PropTypes from 'prop-types'; import React from 'react'; +/** + * @typedef {object} ProgressBarProps + * @prop {number | string} [value] + * @prop {number | string} [max] + */ + +/** @param {ProgressBarProps} props */ const ProgressBar = ({ value = 0, max = 0, diff --git a/src/components/ScrollableTabs/ScrollableTabs.jsx b/src/components/ScrollableTabs/ScrollableTabs.jsx index 1c743de..f0a1cb7 100644 --- a/src/components/ScrollableTabs/ScrollableTabs.jsx +++ b/src/components/ScrollableTabs/ScrollableTabs.jsx @@ -9,6 +9,18 @@ import styles from './ScrollableTabs.module.scss'; const cx = classnames.bind(styles); +/** + * @typedef ScrollableTabsProps + * @prop {string} [className] + * @prop {object[]} [items] + * @prop {string} item.name + * @prop {string} item.target + * @prop {boolean} [item.active] + * @prop {boolean} [item.disabled] + * @prop {Function} [linkProps] + */ + +/** @param {ScrollableTabsProps} props */ const ScrollableTabs = ({ className, items = [], linkProps = (props) => props }) => { /** * Hooks diff --git a/src/components/Status/Status.jsx b/src/components/Status/Status.jsx index e31107d..11479cf 100644 --- a/src/components/Status/Status.jsx +++ b/src/components/Status/Status.jsx @@ -3,6 +3,11 @@ import React from 'react'; import { typeMap } from './Status.helpers'; +/** + * @typedef {{label: string, type: 'ACTIVE' | 'INACTIVE' | 'ARCHIVED' }} StatusProps + */ + +/** @param {StatusProps} props */ const Status = ({ label, type, diff --git a/src/components/Table/Table.jsx b/src/components/Table/Table.jsx index 321c5bc..620922b 100644 --- a/src/components/Table/Table.jsx +++ b/src/components/Table/Table.jsx @@ -15,6 +15,51 @@ import './Table.scss'; const DND_ITEM_TYPE = 'row'; +/** + * @typedef TableProps + * @prop {string} [dataKey] + * @prop {string} [className] + * @prop {string} [tableClassName] + * @prop {object[]} [rows] + * + * @prop {object[]} [columns] + * @prop {string} columns.label + * @prop {string} [columns.value] + * @prop {Function} [columns.component] + * @prop {Function} [columns.headerComponent] + * @prop {Function} [columns.format] + * @prop {boolean} [columns.hidden] + * @prop {boolean} [columns.hideLabel] + * @prop {boolean} [columns.disabled] + * @prop {boolean} [columns.ellipsis] + * @prop {string} [columns.width] + * @prop {boolean} [columns.disableSorting] + * @prop {string[]} [columns.classList] + * @prop {string} [columns.fallback] + * + * @prop {[] | object} [expandedRows] + * @prop {boolean} [loading] + * @prop {boolean} [responsive] + * @prop {boolean} [fixed] + * @prop {boolean} [hasClickAction] + * + * @prop {object[]} [activeSorting] + * @prop {string} [activeSorting.key] + * @prop {'asc' | 'desc'} [activeSorting.order] + * + * @prop {string} [noDataMessage] + * @prop {string} [loadDataMessage] + * @prop {string} [noColumnsMessage] + * @prop {Function} [orderBy] + * @prop {Function} [rowClicked] + * @prop {Function} [rowExpansionTemplate] + * @prop {boolean} [draggable] + * @prop {boolean} [striped] + * @prop {'primary' | 'secondary'} [type] + * @prop {Function} [moveRow] + */ + +/** @param {TableProps} props */ const Table = ({ dataKey, className, diff --git a/src/components/Table/TableCell/TableCell.jsx b/src/components/Table/TableCell/TableCell.jsx index 9d1bf96..c6c4e72 100644 --- a/src/components/Table/TableCell/TableCell.jsx +++ b/src/components/Table/TableCell/TableCell.jsx @@ -5,6 +5,20 @@ import React from 'react'; import { isNil } from '../../../helpers'; import { EllipsisWithTooltip } from '../../EllipsisWithTooltip'; +/** + * @typedef TableCellProps + * @prop {string} [as] + * @prop {string[]} [classList] + * @prop {string} [className] + * @prop {boolean} [ellipsis] + * @prop {Function} [component] + * @prop {object} [rowData] + * @prop {number} [rowIndex] + * @prop {number | string | boolean} [value] + * @prop {object[]} [style] + */ + +/** @param {TableCellProps} props */ const TableCell = ({ as: HTMLTag = 'td', classList, diff --git a/src/components/Table/TableHeader/TableHeader.jsx b/src/components/Table/TableHeader/TableHeader.jsx index 20b8fae..e713d54 100644 --- a/src/components/Table/TableHeader/TableHeader.jsx +++ b/src/components/Table/TableHeader/TableHeader.jsx @@ -3,6 +3,24 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; +/** + * @typedef TableHeaderProps + * @prop {string} [as] + * @prop {string[]} [classList] + * @prop {string} [className] + * @prop {string} label + * @prop {string} [value] + * @prop {Function} [component] + * @prop {boolean} [disableSorting] + * @prop {object[]} [activeSorting] + * @prop {string} [activeSorting.key] + * @prop {'asc' | 'desc'} [activeSorting.order] + * @prop {Function} [onSortClick] + * @prop {string} [width] + * @prop {boolean} [hideLabel] + */ + +/** @param {TableHeaderProps} props */ const TableHeader = ({ activeSorting = { key: '', order: 'asc' }, as: HTMLTag = 'th', diff --git a/src/components/Table/TableLoader/TableLoader.jsx b/src/components/Table/TableLoader/TableLoader.jsx index b3753e0..5645d9a 100644 --- a/src/components/Table/TableLoader/TableLoader.jsx +++ b/src/components/Table/TableLoader/TableLoader.jsx @@ -4,6 +4,12 @@ import React from 'react'; import '../Table.scss'; +/** + * @typedef {object} TableLoaderProp + * @prop {string} [loadDataMessage] + */ + +/** @param {TableLoaderProp} props */ const TableLoader = ({ loadDataMessage, }) => ( diff --git a/src/components/Table/TablePlaceholder/TablePlaceholder.jsx b/src/components/Table/TablePlaceholder/TablePlaceholder.jsx index 57ad733..aa469e7 100644 --- a/src/components/Table/TablePlaceholder/TablePlaceholder.jsx +++ b/src/components/Table/TablePlaceholder/TablePlaceholder.jsx @@ -4,6 +4,16 @@ import React from 'react'; import '../Table.scss'; +/** + * @typedef TablePlaceholderProps + * @prop {boolean} hasCols + * @prop {boolean} hasData + * @prop {string} [className] + * @prop {string} [noColumnsMessage] + * @prop {string} [noDataMessage] + */ + +/** @param {TablePlaceholderProps} props */ const TablePlaceholder = ({ hasCols, hasData, diff --git a/src/components/Table/TableRow/TableRow.jsx b/src/components/Table/TableRow/TableRow.jsx index a7faef3..055a8d5 100644 --- a/src/components/Table/TableRow/TableRow.jsx +++ b/src/components/Table/TableRow/TableRow.jsx @@ -2,6 +2,20 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; +/** + * @typedef TableRowProps + * @prop {React.ReactNode} children + * @prop {string} [className] + * @prop {boolean} [collapseOnDrag] + * @prop {boolean} [hasClickAction] + * @prop {boolean} [isDragging] + * @prop {boolean} [isLast] + * @prop {number} [level] + * @prop {Function} [onClick] + * @prop {Function | {current: Element}} [trRef] + */ + +/** @param {TableRowProps} props */ const TableRow = ({ children, className, diff --git a/src/components/Timepicker/Timepicker.jsx b/src/components/Timepicker/Timepicker.jsx index eb9b319..d515bd4 100644 --- a/src/components/Timepicker/Timepicker.jsx +++ b/src/components/Timepicker/Timepicker.jsx @@ -11,6 +11,29 @@ import { } from './Timepicker.helpers'; import './Timepicker.scss'; +/** + * @typedef TimePickerProps + * @prop {string} id + * @prop {string} [className] + * @prop {boolean} [required] + * @prop {boolean} [disabled] + * @prop {number | string} [value] + * @prop {string} [hourLabel] + * @prop {string} [minuteLabel] + * @prop {string} [secondLabel] + * @prop {string} [millisecondLabel] + * @prop {string} [hourPlaceholder] + * @prop {string} [minutePlaceholder] + * @prop {string} [secondPlaceholder] + * @prop {string} [millisecondPlaceholder] + * @prop {number} [hourStep] + * @prop {number} [minuteStep] + * @prop {number} [secondStep] + * @prop {number} [millisecondStep] + * @prop {Function} [onChange] + */ + +/** @param {TimePickerProps} props */ const Timepicker = ({ id, className, diff --git a/src/components/Tooltip/Tooltip.jsx b/src/components/Tooltip/Tooltip.jsx index 8cb90fa..ef6f2cc 100644 --- a/src/components/Tooltip/Tooltip.jsx +++ b/src/components/Tooltip/Tooltip.jsx @@ -13,6 +13,18 @@ import { usePopper } from 'react-popper'; import { TooltipTypeMap } from './Tooltip.const'; import './Tooltip.scss'; +/** + * @typedef TooltipProps + * @prop {React.ReactNode[] | React.ReactNode} children + * @prop {TooltipTypeMap.DEFAULT | TooltipTypeMap.PRIMARY | TooltipTypeMap.SECONDARY} [type] + * @prop {Function | {current: Element}} targetRef + * @prop {boolean} isVisible + * @prop {boolean} [disablePortal] + * @prop {React.ReactNode} [container] + * @prop {string} [placement] + */ + +/** @param {TooltipProps} props */ const Tooltip = ({ children, targetRef,