Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UILISTS-91] Create typings for ui-lists components usage #47

Merged
merged 22 commits into from
Jan 5, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 50 additions & 38 deletions components/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* form elements */
export { default as AutoSuggest } from './lib/AutoSuggest';
export { default as Badge, BadgeProps } from './lib/Badge';
export { default as Button, ButtonProps } from './lib/Button';
export { default as Button, ButtonProps, ButtonStyle } from './lib/Button';
export { default as ButtonGroup } from './lib/ButtonGroup';
export { default as Checkbox, CheckboxProps } from './lib/Checkbox';
export { default as CurrencySelect } from './lib/CurrencySelect';
@@ -13,23 +13,27 @@ export {
staticFirstWeekDay,
staticLangCountryCodes,
} from './lib/Datepicker';
export {
getLocaleDateFormat,
getLocalizedTimeFormatInfo,
} from './util/dateTimeUtils';
export { getLocaleDateFormat, getLocalizedTimeFormatInfo } from './util/dateTimeUtils';
export { default as DateRangeWrapper } from './lib/DateRangeWrapper';
export { default as FormattedDate } from './lib/FormattedDate';
export { default as FormattedTime } from './lib/FormattedTime';
export { default as EmptyMessage } from './lib/EmptyMessage';
export { default as FormattedUTCDate } from './lib/FormattedUTCDate';
export { default as Label, LabelProps } from './lib/Label';
export { default as TextLink } from './lib/TextLink';
export { Loading, LoadingPane, LoadingView } from './lib/Loading';
export { default as TextLink, TextLinkProps } from './lib/TextLink';
export {
Loading,
LoadingProps,
LoadingPane,
LoadingPaneProps,
LoadingView,
LoadingViewProps,
} from './lib/Loading';
export { default as RadioButton, RadioButtonProps } from './lib/RadioButton';
export { default as RadioButtonGroup } from './lib/RadioButtonGroup';
export { default as RadioButtonGroup, RadioButtonGroupProps } from './lib/RadioButtonGroup';
export { default as Select, SelectProps, SelectOptionType } from './lib/Select';
export { default as Spinner } from './lib/Spinner';
export { default as TextArea } from './lib/TextArea';
export { default as TextArea, TextAreaProps } from './lib/TextArea';
export { default as TextField, TextFieldProps } from './lib/TextField';
export { default as Timepicker, TimepickerProps } from './lib/Timepicker';
export { default as Tooltip } from './lib/Tooltip';
@@ -40,7 +44,13 @@ export {
MultiSelectionDefaultOptionType,
} from './lib/MultiSelection';
export { default as RepeatableField } from './lib/RepeatableField';
export { default as Popper, AVAILABLE_PLACEMENTS } from './lib/Popper';
export {
default as Popper,
AVAILABLE_PLACEMENTS,
PopperProps,
PopperPlacement,
PopperModifiers,
} from './lib/Popper';

/* data containers */
export { default as Card, CardProps } from './lib/Card';
@@ -58,25 +68,28 @@ export { default as List } from './lib/List';
/* layout containers */
export { default as Pane, PaneProps } from './lib/Pane';
export { default as PaneBackLink, PaneBackLinkProps } from './lib/PaneBackLink';
export {
default as PaneCloseLink,
PaneCloseLinkProps,
} from './lib/PaneCloseLink';
export { default as PaneCloseLink, PaneCloseLinkProps } from './lib/PaneCloseLink';
export { default as PaneFooter, PaneFooterProps } from './lib/PaneFooter';
export { default as PaneHeader, PaneHeaderProps } from './lib/PaneHeader';
export {
default as PaneHeaderIconButton,
PaneHeaderIconButtonProps,
} from './lib/PaneHeaderIconButton';
export { default as PaneMenu, PaneMenuProps } from './lib/PaneMenu';
export {
default as PaneSubheader,
PaneSubheaderProps,
} from './lib/PaneSubheader';
export { default as PaneSubheader, PaneSubheaderProps } from './lib/PaneSubheader';
export { default as Paneset, PanesetProps } from './lib/Paneset';
export { default as Layer } from './lib/Layer';
export { Grid, Row, Col } from './lib/LayoutGrid';
export { default as Layout } from './lib/Layout';
export { default as Layer, LayerProps } from './lib/Layer';
export {
Grid,
Row,
Col,
GridProps,
RowProps,
ColProps,
ColumnSize,
ViewportSize,
} from './lib/LayoutGrid';
export { default as Layout, LayoutProps } from './lib/Layout';
export { default as LayoutBox } from './lib/LayoutBox';
export { default as LayoutHeader } from './lib/LayoutHeader';
export {
@@ -99,7 +112,7 @@ export {
/* misc */
export { default as Icon } from './lib/Icon';
export { default as IconButton, IconButtonProps } from './lib/IconButton';
export { default as MessageBanner } from './lib/MessageBanner';
export { default as MessageBanner, MessageBannerProps } from './lib/MessageBanner';
export { default as Modal } from './lib/Modal';
export { default as ModalFooter } from './lib/ModalFooter';
export { default as Avatar } from './lib/Avatar';
@@ -109,16 +122,16 @@ export { default as DropdownMenu, DropdownMenuProps } from './lib/DropdownMenu';
export { default as DropdownButton } from './lib/DropdownButton';
export { default as MenuSection } from './lib/MenuSection';
export { default as FocusLink } from './lib/FocusLink';
export { default as Headline } from './lib/Headline';
export { default as Headline, HeadlineProps, HeadlineSize, HeadlineWeight } from './lib/Headline';
export { HotKeys, FocusTrap } from './lib/HotKeys';
export { default as Highlighter } from './lib/Highlighter';
export { default as MenuItem } from './lib/MenuItem';
export { default as MetaSection } from './lib/MetaSection';
export { default as MetaSection, MetaSectionProps } from './lib/MetaSection';
export { default as NavList } from './lib/NavList';
export { default as NavListItem } from './lib/NavListItem';
export { default as NavListSection } from './lib/NavListSection';
export { default as NoValue } from './lib/NoValue';
export { default as Popover } from './lib/Popover';
export { default as Popover, PopoverProps } from './lib/Popover';
export { default as Selection, OptionSegment } from './lib/Selection';
export { default as SRStatus } from './lib/SRStatus';
export { default as PasswordStrength } from './lib/PasswordStrength';
@@ -136,9 +149,9 @@ export {
export { default as ErrorBoundary } from './lib/ErrorBoundary';

/* structures */
export { default as ConfirmationModal } from './lib/ConfirmationModal';
export { default as ConfirmationModal, ConfirmationModalProps } from './lib/ConfirmationModal';
export { default as ErrorModal } from './lib/ErrorModal';
export { default as InfoPopover } from './lib/InfoPopover';
export { default as InfoPopover, InfoPopoverProps } from './lib/InfoPopover';
export { default as SearchField } from './lib/SearchField';
export { default as ConflictDetectionBanner } from './lib/ConflictDetectionBanner';
export {
@@ -150,6 +163,7 @@ export {
/* specific use */
export {
default as FilterGroups,
FilterGroupsProps,
filterState,
filters2cql,
handleClearAllFilters,
@@ -159,8 +173,14 @@ export {
onChangeFilter,
FILTER_SEPARATOR,
FILTER_GROUP_SEPARATOR,
TransitionToParamsFunc,
QueryParamFunc,
FilterGroupsConfigValue,
FilterGroupsConfigGroup,
FilterGroupsConfig,
FilterGroupsState,
} from './lib/FilterGroups';
export { default as FilterControlGroup } from './lib/FilterControlGroup';
export { default as FilterControlGroup, FilterControlGroupProps } from './lib/FilterControlGroup';
export { default as FilterPaneSearch } from './lib/FilterPaneSearch';
export { default as ExportCsv } from './lib/ExportCsv';
export { default as exportToCsv } from './lib/ExportCsv/exportToCsv';
@@ -183,17 +203,9 @@ export {
currenciesOptions,
} from './util/currencies';

export {
default as countries,
countriesByCode,
countryCodes,
} from './util/countries';
export { default as countries, countriesByCode, countryCodes } from './util/countries';

export {
formattedLanguageName,
languageOptions,
default as languages,
} from './util/languages';
export { formattedLanguageName, languageOptions, default as languages } from './util/languages';

export { default as nativeChangeFieldValue } from './util/nativeChangeFieldValue';

12 changes: 7 additions & 5 deletions components/lib/Accordion/Accordion.d.ts
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import { Component, CSSProperties, ReactNode, RefObject } from 'react';
import { HotKeysProps } from '../HotKeys';
import { DefaultAccordionHeaderProps } from './headers/DefaultAccordionHeader';

export interface AccordionProps extends Partial<DefaultAccordionHeaderProps> {
export type AccordionProps<HeaderProps = DefaultAccordionHeaderProps> = Partial<HeaderProps> & {
/** The containing accordionSet */
accordionSet?: ReactNode;
/** The accordion's contents */
@@ -21,8 +21,8 @@ export interface AccordionProps extends Partial<DefaultAccordionHeaderProps> {
disabled?: boolean;
/** Supplies a custom header */
header?: ReactNode;
/** Adds props to the default header */
headerProps?: Partial<DefaultAccordionHeaderProps>;
/** Adds props to the header (additional props on the root `<Accordion>` will also be passed) */
headerProps?: Partial<HeaderProps>;
/** The id of the accordion */
id?: string;
/** A label for the accordion */
@@ -37,7 +37,7 @@ export interface AccordionProps extends Partial<DefaultAccordionHeaderProps> {
separator?: boolean;
toggleKeyHandlers?: HotKeysProps['handlers'];
toggleKeyMap?: HotKeysProps['keyMap'];
}
};

/**
* Displays information in an accordion
@@ -51,4 +51,6 @@ export interface AccordionProps extends Partial<DefaultAccordionHeaderProps> {
* </Accordion>
* </AccordionSet>
*/
export default class Accordion extends Component<AccordionProps> {}
export default class Accordion<HeaderProps = DefaultAccordionHeaderProps> extends Component<
AccordionProps<HeaderProps>
> {}
13 changes: 4 additions & 9 deletions components/lib/Button/Button.d.ts
Original file line number Diff line number Diff line change
@@ -8,6 +8,8 @@ import {
} from 'react';
import { LinkProps } from 'react-router-dom';

export type ButtonStyle = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'dropdownItem';

export interface ButtonBaseProps extends AriaAttributes {
/** Changes the (flex box) alignment of the button */
align?: 'start' | 'center' | 'end';
@@ -20,13 +22,7 @@ export interface ButtonBaseProps extends AriaAttributes {
/** Add a custom CSS class to the button */
buttonClass?: string;
/** Sets the style of the button */
buttonStyle?:
| 'default'
| 'primary'
| 'success'
| 'warning'
| 'danger'
| 'dropdownItem';
buttonStyle?: ButtonStyle;
/** The button for the label */
children: ReactNode;
/** Forces the button to 100% width */
@@ -61,7 +57,6 @@ export type ButtonProps = ButtonBaseProps &
* <Button>Sample</Button>
*/
export const Button: ForwardRefExoticComponent<
PropsWithoutRef<ButtonProps> &
RefAttributes<HTMLAnchorElement | HTMLButtonElement>
PropsWithoutRef<ButtonProps> & RefAttributes<HTMLAnchorElement | HTMLButtonElement>
>;
export default Button;
2 changes: 1 addition & 1 deletion components/lib/Button/index.d.ts
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default, ButtonProps } from './Button';
export { default, ButtonProps, ButtonStyle } from './Button';
6 changes: 3 additions & 3 deletions components/lib/Checkbox/Checkbox.d.ts
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ import {
FunctionComponent,
InputHTMLAttributes,
ReactNode,
RefObject,
Ref,
} from 'react';

export interface CheckboxProps extends AriaAttributes, InputHTMLAttributes<HTMLInputElement> {
@@ -32,9 +32,9 @@ export interface CheckboxProps extends AriaAttributes, InputHTMLAttributes<HTMLI
/** Add a class to the inner input */
innerClass?: string;
/** Reference to the inner input */
inputRef?: RefObject<HTMLInputElement> | ((node: HTMLInputElement | null) => void);
inputRef?: Ref<HTMLInputElement>;
/** The checkbox's label */
label?: string;
label?: ReactNode;
/** Add a class to the label */
labelClass?: string;
/** Set a name for the input */
57 changes: 57 additions & 0 deletions components/lib/ConfirmationModal/ConfirmationModal.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { FunctionComponent, MouseEventHandler, ReactNode } from 'react';
import { ButtonStyle } from '../Button';

export interface ConfirmationModalProps {
/** The modal's H1 tag and ARIA-label */
heading: string;
/** The modal's message, rendered within a `<p>` tag (unless overrode in `bodyTag`) */
message?: ReactNode;

/** If the modal is open */
open: boolean;
/** Callback for when the Submit button is clicked */
onConfirm: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
/** Callback for when the Cancel button is clicked */
onCancel: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;

/** If the confirm button should be disabled */
isConfirmButtonDisabled?: boolean;

/** Custom text for the Cancel action */
cancelLabel?: ReactNode;
/** Custom text for the Submit action */
confirmLabel?: ReactNode;

/** Style of the Submit action button */
buttonStyle?: ButtonStyle;
/** Style of the Cancel action button */
cancelButtonStyle?: ButtonStyle;

/** The tag to render the modal's body as */
bodyTag?: string;
}

/**
* Renders a basic confirmation modal with customizable cancel and submit buttons
* @example
* const [open, setOpen] = useState(false);
*
* const handleConfirm = useCallback(() => {
* setOpen(false);
* // do something
* });
*
* const handleCancel = useCallback(() => {
* setOpen(false);
* });
*
* <ConfirmationModal
* open={open}
* heading="Please confirm!"
* message="Description of the thing that needs confirming"
* onConfirm={handleConfirm}
* onCancel={handleCancel}
* />
*/
export const ConfirmationModal: FunctionComponent<ConfirmationModalProps>;
export default ConfirmationModal;
3 changes: 1 addition & 2 deletions components/lib/ConfirmationModal/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
declare const ConfirmationModal: any;
export default ConfirmationModal;
export { default, ConfirmationModalProps } from './ConfirmationModal';
10 changes: 5 additions & 5 deletions components/lib/Datepicker/Datepicker.d.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Moment } from 'moment';
import Popper from 'popper.js';
import { AriaAttributes, Component, FocusEventHandler, ReactNode, RefObject } from 'react';
import { AriaAttributes, Component, FocusEventHandler, ReactNode, Ref } from 'react';
import { Merge } from 'type-fest';
import { PopperModifiers, PopperPlacement } from '../Popper';
import { TextFieldProps } from '../TextField';

export interface DatepickerProps extends AriaAttributes {
@@ -20,15 +20,15 @@ export interface DatepickerProps extends AriaAttributes {
/** Adds a custom ID to the control */
id?: string;
/** Ref to the internal text field */
inputRef?: RefObject<HTMLInputElement> | ((el: HTMLInputElement) => void);
inputRef?: Ref<HTMLInputElement>;
/** Label the datepicker */
label?: ReactNode;
/** Set the locale for use */
locale?: string;
/** Remove bottom margin */
marginBottom0?: boolean;
/** Popper modifiers */
modifiers?: Popper.Modifiers;
modifiers?: PopperModifiers;
/** Fired when the user clicks out of/deselects the control */
onBlur?: FocusEventHandler<HTMLInputElement>;
/** Fired anytime internal state changes */
@@ -40,7 +40,7 @@ export interface DatepickerProps extends AriaAttributes {
/** Parses a date for local display in the text field */
parser?: (value: string) => string;
/** Where the overlay should be placed in relation to the field */
placement?: Popper.Placement;
placement?: PopperPlacement;
/** If the control is readonly */
readOnly?: boolean;
/** If the field is required */
Loading