From d3e74c572f30f383e94868c66ff4c767a68c97dc Mon Sep 17 00:00:00 2001 From: Birk Johansson Date: Thu, 12 Oct 2023 14:35:48 +0200 Subject: [PATCH 01/18] fix(types): add type declarations for components (#1399) * fix: add types for popers * style: prettier constants decl * fix: rexport types from ui * fix: generate type script * chore: ignore declaration files * fix: add types for icons * fix: add types for alert, box, button * fix: add types for input * fix: add types for calendar * fix: add types for checkbox * fix: add types card, center, chip, cover, css * fix: add types for divier and field * fix: add types for file-input * fix: add types for logo, modal, node * fix: add types for headerbar, help, intersection, label, layer * fix: add types for legend, loader, menu, notice-box * fix: add types for orgunit-tree * fix: add types for portal, tab, tooltip * fix: add types for equired, statusicon, tag, useravatar * fix: add types for pagination * fix: edit input payloads, add radio types * fix: add types for segmented-control * fix: add types for select * fix: add types for selector-bar,switch * fix: add types for sharing-dialog and modal * fix: add types for transfer * fix: add types for textarea * fix: add types for table * fix: rexport declarations from collections/ui * style: run prettier * fix: remove generate-types script * fix: name conflicts * fix: name conflicts in rexport * chore: add @types/react to dependencies * fix: typo * style: run prettier on icons * fix: move files to types-folder and update packages * chore: eslint ignore *.d.ts * chore: run prettier * fix: fix types in package.json * fix: add forward prop types to datacell * style: prettier on package.json * style: prettier * fix: cleanup * chore: use range for peer-dep @react/types * fix: fix onClick type for layer * chore: move @types/react to peerdep * refactor(org unit tree): rename root error & loading to match exported name * chore(transferoption): add missing onClick/onDoubleClick prop TS types * chore(org unit tree): add missing / fix public TS types * fix(selector-bar): add types for selector-bar-item * style: fix selector-bar style --------- Co-authored-by: Jan-Gerke Salomon Co-authored-by: Jan-Gerke Salomon --- .eslintignore | 1 + .eslintrc.js | 1 + collections/forms/package.json | 6 +- collections/ui/package.json | 7 +- collections/ui/types/index.d.ts | 65 +++ components/alert/package.json | 6 +- components/alert/types/index.d.ts | 49 ++ components/box/package.json | 6 +- components/box/types/index.d.ts | 17 + components/button/package.json | 6 +- components/button/types/index.d.ts | 256 +++++++++++ components/calendar/package.json | 6 +- components/calendar/types/index.d.ts | 61 +++ components/card/package.json | 6 +- components/card/types/index.d.ts | 9 + components/center/package.json | 6 +- components/center/types/index.d.ts | 15 + components/checkbox/package.json | 6 +- components/checkbox/types/index.d.ts | 120 +++++ components/chip/package.json | 6 +- components/chip/types/index.d.ts | 33 ++ components/cover/package.json | 6 +- components/cover/types/index.d.ts | 14 + components/css/package.json | 6 +- components/css/types/index.d.ts | 13 + components/divider/package.json | 6 +- components/divider/types/index.d.ts | 10 + components/field/package.json | 6 +- components/field/types/index.d.ts | 97 ++++ components/file-input/package.json | 6 +- components/file-input/types/index.d.ts | 287 ++++++++++++ components/header-bar/package.json | 6 +- components/header-bar/types/index.d.ts | 10 + components/help/package.json | 6 +- components/help/types/index.d.ts | 12 + components/input/package.json | 6 +- components/input/types/index.d.ts | 240 ++++++++++ components/intersection-detector/package.json | 6 +- .../intersection-detector/types/index.d.ts | 21 + components/label/package.json | 6 +- components/label/types/index.d.ts | 12 + components/layer/package.json | 6 +- components/layer/types/index.d.ts | 40 ++ components/legend/package.json | 6 +- components/legend/types/index.d.ts | 13 + components/loader/package.json | 6 +- components/loader/types/index.d.ts | 35 ++ components/logo/package.json | 6 +- components/logo/types/index.d.ts | 29 ++ components/menu/package.json | 6 +- components/menu/types/index.d.ts | 103 +++++ components/modal/package.json | 6 +- components/modal/types/index.d.ts | 43 ++ components/node/package.json | 6 +- components/node/types/index.d.ts | 28 ++ components/notice-box/package.json | 6 +- components/notice-box/types/index.d.ts | 22 + .../organisation-unit-tree/package.json | 6 +- .../organisation-unit-tree/src/index.js | 4 +- .../src/organisation-unit-tree/index.js | 4 +- ...s => organisation-unit-tree-root-error.js} | 6 +- ...=> organisation-unit-tree-root-loading.js} | 6 +- .../organisation-unit-tree.js | 8 +- .../organisation-unit-tree/types/index.d.ts | 165 +++++++ components/pagination/package.json | 6 +- components/pagination/types/index.d.ts | 28 ++ components/popover/package.json | 6 +- components/popover/types/index.d.ts | 30 ++ components/popper/package.json | 6 +- components/popper/types/index.d.ts | 42 ++ components/portal/package.json | 6 +- components/portal/types/index.d.ts | 9 + components/radio/package.json | 6 +- components/radio/types/index.d.ts | 67 +++ components/required/package.json | 6 +- components/required/types/index.d.ts | 7 + components/segmented-control/package.json | 6 +- components/segmented-control/types/index.d.ts | 27 ++ components/select/package.json | 6 +- components/select/types/index.d.ts | 419 ++++++++++++++++++ components/selector-bar/package.json | 6 +- components/selector-bar/types/index.d.ts | 27 ++ components/sharing-dialog/package.json | 6 +- components/sharing-dialog/types/index.d.ts | 43 ++ components/status-icon/package.json | 6 +- components/status-icon/types/index.d.ts | 10 + components/switch/package.json | 6 +- components/switch/types/index.d.ts | 161 +++++++ components/tab/package.json | 6 +- components/tab/types/index.d.ts | 43 ++ components/table/package.json | 6 +- components/table/types/index.d.ts | 396 +++++++++++++++++ components/tag/package.json | 6 +- components/tag/types/index.d.ts | 30 ++ components/text-area/package.json | 6 +- components/text-area/types/index.d.ts | 209 +++++++++ components/tooltip/package.json | 6 +- components/tooltip/types/index.d.ts | 47 ++ components/transfer/package.json | 6 +- components/transfer/types/index.d.ts | 83 ++++ components/user-avatar/package.json | 6 +- components/user-avatar/types/index.d.ts | 15 + constants/package.json | 6 +- constants/types/index.d.ts | 63 +++ icons/package.json | 6 +- icons/types/index.d.ts | 259 +++++++++++ package.json | 3 + 107 files changed, 4055 insertions(+), 113 deletions(-) create mode 100644 collections/ui/types/index.d.ts create mode 100644 components/alert/types/index.d.ts create mode 100644 components/box/types/index.d.ts create mode 100644 components/button/types/index.d.ts create mode 100644 components/calendar/types/index.d.ts create mode 100644 components/card/types/index.d.ts create mode 100644 components/center/types/index.d.ts create mode 100644 components/checkbox/types/index.d.ts create mode 100644 components/chip/types/index.d.ts create mode 100644 components/cover/types/index.d.ts create mode 100644 components/css/types/index.d.ts create mode 100644 components/divider/types/index.d.ts create mode 100644 components/field/types/index.d.ts create mode 100644 components/file-input/types/index.d.ts create mode 100644 components/header-bar/types/index.d.ts create mode 100644 components/help/types/index.d.ts create mode 100644 components/input/types/index.d.ts create mode 100644 components/intersection-detector/types/index.d.ts create mode 100644 components/label/types/index.d.ts create mode 100644 components/layer/types/index.d.ts create mode 100644 components/legend/types/index.d.ts create mode 100644 components/loader/types/index.d.ts create mode 100644 components/logo/types/index.d.ts create mode 100644 components/menu/types/index.d.ts create mode 100644 components/modal/types/index.d.ts create mode 100644 components/node/types/index.d.ts create mode 100644 components/notice-box/types/index.d.ts rename components/organisation-unit-tree/src/organisation-unit-tree/{root-error.js => organisation-unit-tree-root-error.js} (70%) rename components/organisation-unit-tree/src/organisation-unit-tree/{root-loading.js => organisation-unit-tree-root-loading.js} (72%) create mode 100644 components/organisation-unit-tree/types/index.d.ts create mode 100644 components/pagination/types/index.d.ts create mode 100644 components/popover/types/index.d.ts create mode 100644 components/popper/types/index.d.ts create mode 100644 components/portal/types/index.d.ts create mode 100644 components/radio/types/index.d.ts create mode 100644 components/required/types/index.d.ts create mode 100644 components/segmented-control/types/index.d.ts create mode 100644 components/select/types/index.d.ts create mode 100644 components/selector-bar/types/index.d.ts create mode 100644 components/sharing-dialog/types/index.d.ts create mode 100644 components/status-icon/types/index.d.ts create mode 100644 components/switch/types/index.d.ts create mode 100644 components/tab/types/index.d.ts create mode 100644 components/table/types/index.d.ts create mode 100644 components/tag/types/index.d.ts create mode 100644 components/text-area/types/index.d.ts create mode 100644 components/tooltip/types/index.d.ts create mode 100644 components/transfer/types/index.d.ts create mode 100644 components/user-avatar/types/index.d.ts create mode 100644 constants/types/index.d.ts create mode 100644 icons/types/index.d.ts diff --git a/.eslintignore b/.eslintignore index 4ce89ab663..c260bbe6cd 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,4 @@ .yarn/ utilities/icons/src/react/**/*.js **/locales/ +*.d.ts diff --git a/.eslintrc.js b/.eslintrc.js index 9861b1c164..0bd37b6457 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -33,6 +33,7 @@ const config = { '*.stories*.js', '**/__stories__/*.js', '**/__stories__/**/*.js', + '*.d.ts', ], rules: { 'import/no-extraneous-dependencies': 'error', diff --git a/collections/forms/package.json b/collections/forms/package.json index 6318ab868e..1f4c6aa1f1 100644 --- a/collections/forms/package.json +++ b/collections/forms/package.json @@ -49,10 +49,12 @@ "react-final-form": "^6.5.3" }, "files": [ - "build" + "build", + "types" ], "devDependencies": { "react": "16.13", "react-dom": "16.13" - } + }, + "types": "types" } diff --git a/collections/ui/package.json b/collections/ui/package.json index d009fed03e..c9b16288b1 100644 --- a/collections/ui/package.json +++ b/collections/ui/package.json @@ -83,5 +83,10 @@ "react": "16.13", "react-dom": "16.13", "styled-jsx": "^4.0.1" - } + }, + "files": [ + "build", + "types" + ], + "types": "types" } diff --git a/collections/ui/types/index.d.ts b/collections/ui/types/index.d.ts new file mode 100644 index 0000000000..cb74eda88b --- /dev/null +++ b/collections/ui/types/index.d.ts @@ -0,0 +1,65 @@ +export * from '@dhis2/ui-constants' +export * from '@dhis2/ui-icons' + +// DEPRECATED? +export * from '@dhis2/ui-forms' + +// components +export * from '@dhis2-ui/alert' +export * from '@dhis2-ui/button' +export * from '@dhis2-ui/box' +export * from '@dhis2-ui/calendar' +export * from '@dhis2-ui/card' +export * from '@dhis2-ui/center' +export * from '@dhis2-ui/checkbox' +export * from '@dhis2-ui/chip' +export * from '@dhis2-ui/cover' +export * from '@dhis2-ui/css' +export * from '@dhis2-ui/divider' +export * from '@dhis2-ui/field' +export * from '@dhis2-ui/file-input' +export * from '@dhis2-ui/header-bar' +export * from '@dhis2-ui/help' +export * from '@dhis2-ui/input' +export * from '@dhis2-ui/intersection-detector' +export * from '@dhis2-ui/label' +export * from '@dhis2-ui/layer' +export * from '@dhis2-ui/legend' +export * from '@dhis2-ui/loader' +export * from '@dhis2-ui/logo' +export * from '@dhis2-ui/menu' +export * from '@dhis2-ui/modal' +export * from '@dhis2-ui/node' +export * from '@dhis2-ui/notice-box' +export * from '@dhis2-ui/organisation-unit-tree' +export * from '@dhis2-ui/popover' +export { Popper, PopperProps } from '@dhis2-ui/popper' +export * from '@dhis2-ui/portal' +export * from '@dhis2-ui/radio' +export * from '@dhis2-ui/required' +export { Pagination, PaginationProps } from '@dhis2-ui/pagination' +export * from '@dhis2-ui/sharing-dialog' +export { + SingleSelect, + SingleSelectField, + SingleSelectOption, + MultiSelect, + MultiSelectField, + MultiSelectOption, + SingleSelectProps, + SingleSelectFieldProps, + SingleSelectOptionProps, + MultiSelectProps, + MultiSelectFieldProps, + MultiSelectOptionProps, +} from '@dhis2-ui/select' +export * from '@dhis2-ui/selector-bar' +export * from '@dhis2-ui/switch' +export * from '@dhis2-ui/table' +export * from '@dhis2-ui/tab' +export * from '@dhis2-ui/tag' +export * from '@dhis2-ui/text-area' +export * from '@dhis2-ui/tooltip' +export * from '@dhis2-ui/transfer' +export * from '@dhis2-ui/user-avatar' +export * from '@dhis2-ui/segmented-control' diff --git a/components/alert/package.json b/components/alert/package.json index 7fb2de53db..83755deba2 100644 --- a/components/alert/package.json +++ b/components/alert/package.json @@ -39,11 +39,13 @@ "prop-types": "^15.7.2" }, "files": [ - "build" + "build", + "types" ], "devDependencies": { "react": "16.13", "react-dom": "16.13", "styled-jsx": "^4.0.1" - } + }, + "types": "types" } diff --git a/components/alert/types/index.d.ts b/components/alert/types/index.d.ts new file mode 100644 index 0000000000..388ad5dd1d --- /dev/null +++ b/components/alert/types/index.d.ts @@ -0,0 +1,49 @@ +import * as React from 'react' + +export interface ActionsAction { + label: string + onClick: React.MouseEventHandler +} + +type ActionActionTuple = [ActionsAction?, ActionsAction?] + +export interface AlertBarProps { + /** + * An array of 0-2 action objects + */ + actions?: ActionActionTuple + /** + * The message string for the alert + */ + children?: string + className?: string + /** + * Alert bars with `critical` will not autohide + */ + critical?: boolean + dataTest?: string + duration?: number + hidden?: boolean + /** + * A specific icon to override the default icon in the bar. + * If `false` is provided, no icon will be shown. + */ + icon?: Element | boolean + permanent?: boolean + success?: boolean + /** + * Alert bars with `warning` will not autohide + */ + warning?: boolean + onHidden?: (arg0: {}, argv1: null) => void +} + +export const AlertBar: React.FC + +export interface AlertStackProps { + children?: React.ReactNode + className?: string + dataTest?: string +} + +export const AlertStack: React.FC diff --git a/components/box/package.json b/components/box/package.json index 5b730bd2e5..70651ba495 100644 --- a/components/box/package.json +++ b/components/box/package.json @@ -37,11 +37,13 @@ "prop-types": "^15.7.2" }, "files": [ - "build" + "build", + "types" ], "devDependencies": { "react": "16.13", "react-dom": "16.13", "styled-jsx": "^4.0.1" - } + }, + "types": "types" } diff --git a/components/box/types/index.d.ts b/components/box/types/index.d.ts new file mode 100644 index 0000000000..5d03067df8 --- /dev/null +++ b/components/box/types/index.d.ts @@ -0,0 +1,17 @@ +import * as React from 'react' + +export interface BoxProps { + children?: React.ReactNode + className?: string + dataTest?: string + height?: string + marginTop?: string + maxHeight?: string + maxWidth?: string + minHeight?: string + minWidth?: string + overflow?: string + width?: string +} + +export const Box: React.FC diff --git a/components/button/package.json b/components/button/package.json index 47c9e0a0d7..9dd3b27688 100644 --- a/components/button/package.json +++ b/components/button/package.json @@ -41,11 +41,13 @@ "prop-types": "^15.7.2" }, "files": [ - "build" + "build", + "types" ], "devDependencies": { "react": "16.13", "react-dom": "16.13", "styled-jsx": "^4.0.1" - } + }, + "types": "types" } diff --git a/components/button/types/index.d.ts b/components/button/types/index.d.ts new file mode 100644 index 0000000000..b67e153f17 --- /dev/null +++ b/components/button/types/index.d.ts @@ -0,0 +1,256 @@ +import * as React from 'react' + +export type ButtonType = 'submit' | 'reset' | 'button' + +export interface ButtonEventPayload { + value?: string + name?: string +} + +type ButtonEventHandler = ( + arg0: ButtonEventPayload, + event: Event +) => void + +type ButtonOpenEventHandler< + Event extends React.SyntheticEvent = React.MouseEvent +> = (arg0: ButtonEventPayload & { open: boolean }, event: Event) => void + +export interface ButtonProps { + /** + * Component to render inside the button + */ + children?: React.ReactNode + /** + * A className that will be passed to the `