fix(types): add type declarations for components #1399

Birkbjo · 2023-09-06T23:49:21Z

Adds type declarations for the public API of all components.

https://dhis2.atlassian.net/browse/LIBS-527

Todos:

re-export types from collections
Add types to files-prop in package.jsons
Add types to types: property in package.jsons
fix eslint errors (does not support typescript - tried to disable but no luck )

Public-facing components, hooks & functions

The types of the following units need to be verified by the reviewers:

dhis2-bot · 2023-09-06T23:56:08Z

🚀 Deployed on https://pr-1399--dhis2-ui.netlify.app

cypress · 2023-09-07T00:12:07Z

Passing run #3072 ↗︎

0	583	0	0	0

Details:

style: fix selector-bar style
Project: ui	Commit: `4388b385b0`
Status: Passed	Duration: 09:06 💡
Started: Oct 10, 2023 12:09 PM	Ended: Oct 10, 2023 12:18 PM

Review all test suite changes for PR #1399 ↗︎

Birkbjo · 2023-09-07T14:11:12Z

constants/index.d.ts

+    | '200'
+    | '100'
+    | '050'
+export type ColorProp = `${ColorBase}${ColorVariant}` | 'white'


Gotta love template literals

Birkbjo · 2023-09-07T15:41:42Z

components/calendar/index.d.ts

+    /**
+     * the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts
+     */
+    calendar: CalendarPickerOptions['calendar']


These are worth a look @kabaros

kabaros · 2023-09-14T11:55:08Z

components/box/types/index.d.ts

+    maxWidth?: string
+    minHeight?: string
+    minWidth?: string
+    overflow?: string


this type matches the propTypes now, but it should be tighter probably like this .. or a union type of the properties here

do you think we should take this as an opportunity to update things like that, or leave it for future?

kabaros · 2023-09-14T15:06:29Z

components/button/types/index.d.ts

+     * deletions or data changes.
+     * Mutually exclusive with `primary` and `secondary` props
+     */
+    destructive?: boolean


we're not expressing that they are mutually exclusive in the type .. for the future, we can add something like https://github.com/maninak/ts-xor to express that

kabaros · 2023-09-14T15:10:32Z

components/button/types/index.d.ts

+     * Callback to trigger on click.
+     * Called with args `({ value, name }, event)`
+     */
+    onClick?: ButtonEventHandler<React.MouseEvent<HTMLButtonElement>>


soo helpful .. for these custom handlers we have

kabaros · 2023-09-14T15:13:31Z

components/button/types/index.d.ts

+export const Button: React.FC<ButtonProps>
+
+export interface ButtonStripProps {
+    children?: React.ReactNode


should children here be something like

type StripChildren = React.ReactElement<ButtonProps> | React.ReactElement<ButtonProps>[];

?

Hm, I don't think we should be more restrictive than necessary? Wasn't like that in props, and you could eg wrap your buttons in a div.

kabaros · 2023-09-14T15:29:15Z

components/alert/types/index.d.ts

+export const AlertBar: React.FC<AlertBarProps>
+
+export interface AlertStackProps {
+    children?: React.ReactNode


same .. restrict children to Alert?

This would also be more strict than props. And again, Im usually against being that strict as there are valid reasons for wrapping elements.

kabaros · 2023-09-14T18:36:21Z

components/field/types/index.d.ts

+export const Field: React.FC<FieldProps>
+
+export interface FieldGroupProps {
+    children?: React.ReactNode


children could be tightened as well to Field | Field[]

kabaros · 2023-09-14T18:50:57Z

components/layer/types/index.d.ts

+     */
+    onBackdropClick?: LayerBackdropClickHandler
+    /**
+     * Click handler - DEPRECATED


should we use @deprecated directive to get jsdoc hint (I know it's just copied from the propTypes, but seems useless to just write DEPRECATED like this)

kabaros · 2023-09-14T20:06:02Z

components/file-input/types/index.d.ts

+    React.KeyboardEvent<HTMLInputElement>
+>
+
+export interface FileInputProps {


for all of these, we should also create types for the React Final Forms wrappers, right?

Yeah, I focused on components for now. Can take a look.

kabaros · 2023-09-14T20:30:48Z

components/popper/types/index.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { StrictModifier } from 'react-popper'
+import { VirtualElement, Options as PopperOptions } from '@popperjs/core'


nice to finally be able to reference the actual types

kabaros · 2023-09-14T20:47:49Z

components/modal/types/index.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { LayerBackdropClickHandler } from '@dhis2-ui/layer'


~~will this type be picked up properly the way we're publishing the types? (I couldn't get it to work locally) ..~~

~~(same comment in other places importing from @dhis2-u/...)~~

rereading how things are built, it should be picked up

components/selector-bar/types/index.d.ts

kabaros · 2023-09-14T21:02:18Z

components/popper/types/index.d.ts

should we also type other methods exposed here (that are not components), i.e. getReferenceElement, getBaseModifiers, usePopper

They're not exposed from collections/ui. And thus considered internal for now. But yeah, ideally they would be.

kabaros

It all looks good to me 👏🏿 - the only things I am requesting changes for are the missing types. The rest is just FYI.

kabaros · 2023-09-25T10:34:54Z

components/table/types/index.d.ts

+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    role?: string


msising loading: boolean

Table does not have loading property (only DataTableBody.

kabaros · 2023-09-25T10:40:59Z

components/table/types/index.d.ts

+
+export const StackedTable: React.FC<StackedTableProps>
+
+/** DATATABLE */


not sure why DataTable types are not under DataTable component to follow the other patterns?

Currently this follows the same pattern. The table folder-structure is a bit more nested than others. I've just added types to the root package - not to the nested folders within a package. And DataTable and Table are in the same component package (Table).

Mohammer5

Select

components/select/types/index.d.ts

…d name

…unit-tree refactor: add missing / fix types & rename components to match public export

…sfer chore(transferoption): add missing onClick/onDoubleClick prop TS types

Mohammer5

My change requests have been implemented. Unblocking merging the PR from my side

## [8.14.2-alpha.1](v8.14.1...v8.14.2-alpha.1) (2023-10-12) ### Bug Fixes * **types:** add type declarations for components ([#1399](#1399)) ([d3e74c5](d3e74c5))

dhis2-bot · 2023-10-12T13:01:24Z

🎉 This PR is included in version 8.14.2-alpha.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

# [8.16.0-alpha.1](v8.15.0...v8.16.0-alpha.1) (2023-11-28) ### Bug Fixes * **package:** include types in exports field ([e16036b](e16036b)) * minor type fixes ([#1416](#1416)) ([71f4537](71f4537)) * **types:** add type declarations for components ([#1399](#1399)) ([d3e74c5](d3e74c5)) ### Features * **types:** add types for forms collection ([#1415](#1415)) ([2e9d91a](2e9d91a))

dhis2-bot · 2023-11-28T12:26:54Z

🎉 This PR is included in version 8.16.0-alpha.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@dhis2-bot

* 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 <[email protected]> Co-authored-by: Jan-Gerke Salomon <[email protected]> * chore(release): cut 8.14.2-alpha.1 [skip release] ## [8.14.2-alpha.1](v8.14.1...v8.14.2-alpha.1) (2023-10-12) ### Bug Fixes * **types:** add type declarations for components ([#1399](#1399)) ([d3e74c5](d3e74c5)) * feat(types): add types for forms collection (#1415) * feat: add types for FF field-wrappers * feat(types): add types for transformers and validators * fix: mirror folder-structure for types * fix: remove old-types structure * fix(types): cleanup * style: run prettier * refactor: rename overridden type name to rest * style: run prettier * fix(types): make selected payload always present * chore(release): cut 8.15.0-alpha.1 [skip release] # [8.15.0-alpha.1](v8.14.2-alpha.1...v8.15.0-alpha.1) (2023-10-19) ### Features * **types:** add types for forms collection ([#1415](#1415)) ([2e9d91a](2e9d91a)) * fix: minor type fixes (#1416) * fix(types): make value and name always present in eventpayload * fix(types): export payloads and handlers * style: run prettier * chore(release): cut 8.15.0-alpha.2 [skip release] # [8.15.0-alpha.2](v8.15.0-alpha.1...v8.15.0-alpha.2) (2023-10-20) ### Bug Fixes * minor type fixes ([#1416](#1416)) ([71f4537](71f4537)) * chore(changelog): merge changelog correctly * fix(package): include types in exports field * chore(release): cut 8.15.0-alpha.3 [skip release] # [8.15.0-alpha.3](v8.15.0-alpha.2...v8.15.0-alpha.3) (2023-11-20) ### Bug Fixes * **package:** include types in exports field ([e16036b](e16036b)) * **pagination:** add row padding on small screens and demo stories ([b373859](b373859)) * **portal:** get default mount node at execution time ([20ab2ca](20ab2ca)) * **translations:** sync translations from transifex (master) ([f7cc472](f7cc472)) * **translations:** sync translations from transifex (master) ([7ea15fe](7ea15fe)) * **translations:** sync translations from transifex (master) ([fb22f68](fb22f68)) * **translations:** sync translations from transifex (master) ([071453c](071453c)) * **translations:** sync translations from transifex (master) ([4a8b0b3](4a8b0b3)) * **translations:** sync translations from transifex (master) ([ac1b242](ac1b242)) * **translations:** sync translations from transifex (master) ([28e0da7](28e0da7)) * chore(changelog): merge changelog * chore(release): cut 8.16.0-alpha.1 [skip release] # [8.16.0-alpha.1](v8.15.0...v8.16.0-alpha.1) (2023-11-28) ### Bug Fixes * **package:** include types in exports field ([e16036b](e16036b)) * minor type fixes ([#1416](#1416)) ([71f4537](71f4537)) * **types:** add type declarations for components ([#1399](#1399)) ([d3e74c5](d3e74c5)) ### Features * **types:** add types for forms collection ([#1415](#1415)) ([2e9d91a](2e9d91a)) * fix(types): minor type fixes (#1434) [skip release] * fix(types): add types for sharedPropTypes * docs(types): align type comments with propTypes * chore(changelog): align changelog with master * chore(release): cut 8.16.0-alpha.2 [skip release] # [8.16.0-alpha.2](v8.16.0-alpha.1...v8.16.0-alpha.2) (2023-11-29) ### Bug Fixes * **prop-type:** fix deprecation of buttonVariantPropType ([#1433](#1433)) ([81644a8](81644a8)) * **types:** minor type fixes ([#1434](#1434)) [skip release] ([5e1068d](5e1068d)) --------- Co-authored-by: Jan-Gerke Salomon <[email protected]> Co-authored-by: Jan-Gerke Salomon <[email protected]> Co-authored-by: @dhis2-bot <[email protected]>

# [9.0.0](v8.16.0...v9.0.0) (2023-12-08) ### Bug Fixes * **constants:** remove buttonVariantProptype from constants ([#1436](#1436)) ([d4dc535](d4dc535)) * **package:** include types in exports field ([e16036b](e16036b)) * **types:** add type declarations for components ([#1399](#1399)) ([d3e74c5](d3e74c5)) * **types:** minor type fixes ([#1434](#1434)) [skip release] ([5e1068d](5e1068d)) * minor type fixes ([#1416](#1416)) ([71f4537](71f4537)) ### Features * **types:** add types for forms collection ([#1415](#1415)) ([2e9d91a](2e9d91a)) ### BREAKING CHANGES * **constants:** `buttonVariantPropType` has been removed from constants. This is mostly intended for internal use, but was part of the public API.

dhis2-bot · 2023-12-08T17:46:19Z

🎉 This PR is included in version 9.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

dhis2-bot temporarily deployed to netlify September 6, 2023 23:56 Inactive

dhis2-bot temporarily deployed to netlify September 7, 2023 11:06 Inactive

dhis2-bot temporarily deployed to netlify September 7, 2023 11:24 Inactive

dhis2-bot temporarily deployed to netlify September 7, 2023 13:57 Inactive

Birkbjo commented Sep 7, 2023

View reviewed changes

Birkbjo marked this pull request as ready for review September 7, 2023 15:09

Birkbjo requested review from a team as code owners September 7, 2023 15:09

dhis2-bot temporarily deployed to netlify September 7, 2023 15:17 Inactive

dhis2-bot temporarily deployed to netlify September 7, 2023 15:26 Inactive

Birkbjo force-pushed the add-type-declarations branch from 52f70ad to 37b5892 Compare September 7, 2023 15:31

dhis2-bot temporarily deployed to netlify September 7, 2023 15:38 Inactive

Birkbjo commented Sep 7, 2023

View reviewed changes

dhis2-bot temporarily deployed to netlify September 7, 2023 15:49 Inactive

Birkbjo changed the base branch from master to alpha September 7, 2023 16:43

dhis2-bot temporarily deployed to netlify September 7, 2023 16:46 Inactive

dhis2-bot temporarily deployed to netlify September 7, 2023 18:48 Inactive

dhis2-bot temporarily deployed to netlify September 7, 2023 20:05 Inactive

dhis2-bot temporarily deployed to netlify September 8, 2023 14:46 Inactive

dhis2-bot temporarily deployed to netlify September 8, 2023 15:08 Inactive

Birkbjo added 8 commits September 11, 2023 14:06

fix: add types for popers

7b9ced8

style: prettier constants decl

37ce063

fix: rexport types from ui

e20ba18

fix: generate type script

acd12f6

chore: ignore declaration files

0978b70

fix: add types for icons

62ea2b5

fix: add types for alert, box, button

773e574

fix: add types for input

208b657

kabaros reviewed Sep 14, 2023

View reviewed changes

kabaros requested changes Sep 25, 2023

View reviewed changes

Mohammer5 suggested changes Sep 25, 2023

View reviewed changes

components/select/types/index.d.ts Show resolved Hide resolved

components/select/types/index.d.ts Show resolved Hide resolved

components/select/types/index.d.ts Show resolved Hide resolved

components/select/types/index.d.ts Show resolved Hide resolved

Mohammer5 and others added 4 commits October 5, 2023 14:01

refactor(org unit tree): rename root error & loading to match exporte…

a551589

…d name

chore(transferoption): add missing onClick/onDoubleClick prop TS types

b36b5af

chore(org unit tree): add missing / fix public TS types

c7501a6

Merge pull request #1411 from dhis2/origin/add-type-declarations-org-…

ae441f5

…unit-tree refactor: add missing / fix types & rename components to match public export

dhis2-bot temporarily deployed to netlify October 5, 2023 14:26 Inactive

Merge pull request #1412 from dhis2/origin/add-type-declarations-tran…

ba5b1de

…sfer chore(transferoption): add missing onClick/onDoubleClick prop TS types

dhis2-bot temporarily deployed to netlify October 6, 2023 13:20 Inactive

fix(selector-bar): add types for selector-bar-item

aac9c84

dhis2-bot temporarily deployed to netlify October 9, 2023 10:08 Inactive

Mohammer5 approved these changes Oct 9, 2023

View reviewed changes

kabaros approved these changes Oct 10, 2023

View reviewed changes

style: fix selector-bar style

4388b38

dhis2-bot temporarily deployed to netlify October 10, 2023 12:04 Inactive

Birkbjo merged commit d3e74c5 into alpha Oct 12, 2023

Birkbjo deleted the add-type-declarations branch October 12, 2023 12:35

dhis2-bot added the released on @alpha label Oct 12, 2023

dhis2-bot added the released label Dec 8, 2023

martinakraus mentioned this pull request Jun 15, 2024

[Snyk] Upgrade @dhis2/ui from 8.14.9 to 8.16.0 martinakraus/iassignment#2

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(types): add type declarations for components #1399

fix(types): add type declarations for components #1399

Birkbjo commented Sep 6, 2023 •

edited

Loading

dhis2-bot commented Sep 6, 2023 •

edited

Loading

cypress bot commented Sep 7, 2023 •

edited

Loading

Birkbjo Sep 7, 2023

Birkbjo Sep 7, 2023

kabaros Sep 14, 2023

kabaros Sep 14, 2023

kabaros Sep 14, 2023

kabaros Sep 14, 2023

Birkbjo Sep 15, 2023

kabaros Sep 14, 2023

Birkbjo Sep 15, 2023

kabaros Sep 14, 2023

kabaros Sep 14, 2023

kabaros Sep 14, 2023

Birkbjo Sep 15, 2023

kabaros Sep 14, 2023

kabaros Sep 14, 2023 •

edited

Loading

kabaros Sep 14, 2023

Birkbjo Sep 15, 2023 •

edited

Loading

kabaros left a comment

kabaros Sep 25, 2023

Birkbjo Oct 6, 2023

kabaros Sep 25, 2023 •

edited

Loading

Birkbjo Oct 6, 2023 •

edited

Loading

Mohammer5 left a comment

Mohammer5 left a comment

dhis2-bot commented Oct 12, 2023

dhis2-bot commented Nov 28, 2023

dhis2-bot commented Dec 8, 2023

		@@ -0,0 +1,43 @@
		import * as React from 'react'
		import { LayerBackdropClickHandler } from '@dhis2-ui/layer'


		export const StackedTable: React.FC<StackedTableProps>

		/** DATATABLE */

fix(types): add type declarations for components #1399

fix(types): add type declarations for components #1399

Conversation

Birkbjo commented Sep 6, 2023 • edited Loading

Public-facing components, hooks & functions

dhis2-bot commented Sep 6, 2023 • edited Loading

cypress bot commented Sep 7, 2023 • edited Loading

Passing run #3072 ↗︎

Review all test suite changes for PR #1399 ↗︎

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kabaros Sep 14, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Birkbjo Sep 15, 2023 • edited Loading

Choose a reason for hiding this comment

kabaros left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kabaros Sep 25, 2023 • edited Loading

Choose a reason for hiding this comment

Birkbjo Oct 6, 2023 • edited Loading

Choose a reason for hiding this comment

Mohammer5 left a comment

Choose a reason for hiding this comment

Mohammer5 left a comment

Choose a reason for hiding this comment

dhis2-bot commented Oct 12, 2023

dhis2-bot commented Nov 28, 2023

dhis2-bot commented Dec 8, 2023

Birkbjo commented Sep 6, 2023 •

edited

Loading

dhis2-bot commented Sep 6, 2023 •

edited

Loading

cypress bot commented Sep 7, 2023 •

edited

Loading

kabaros Sep 14, 2023 •

edited

Loading

Birkbjo Sep 15, 2023 •

edited

Loading

kabaros Sep 25, 2023 •

edited

Loading

Birkbjo Oct 6, 2023 •

edited

Loading