Skip to content

Commit 369480b

Browse files
proxignapsehenningmu
authored
Typescript support (#188)
* Install typescript. * Configure TypeScript for declaration output. * Install @types/classnames * Install @types/react-dom. * Declare types. * Fix optionality. * Add null guard on clearTimeout. * declaration:build script * Fix property type. * Fix typing. * Rename declaration:build to build-types. * Fix type to include children. * Add typecast. * Refactor to expose typeguard and fix out-of-bounds issue. * Repeat type guard to make compile. * Constraint label to string. * Fix label proptype. * Fix Modal's handleOverlayClick * Added static release artefacts Co-authored-by: Ernesto Garcia <gnapse@gmail.com> Co-authored-by: Henning Muszynski <henningmu@users.noreply.github.com>
1 parent cb1f152 commit 369480b

File tree

120 files changed

+4668
-133
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

120 files changed

+4668
-133
lines changed

.storybook/stories/components/ModalStory.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const ModalDocumentationChapters = [
3737

3838
const ModalHeaderOnlyStory = () => {
3939
const modal = (
40-
<Modal.Box>
40+
<Modal.Box closeOnOverlayClick>
4141
<Modal.Header title="Header of Modal" />
4242
</Modal.Box>
4343
)
@@ -52,7 +52,7 @@ const ModalHeaderOnlyChapter = {
5252

5353
const ModalHeaderAndBodyStory = () => {
5454
const modal = (
55-
<Modal.Box>
55+
<Modal.Box closeOnOverlayClick>
5656
<Modal.Header
5757
title="Header of Modal"
5858
subtitle="This is a smaller description"
@@ -73,7 +73,7 @@ const ModalHeaderAndBodyChapter = {
7373

7474
const ModalHeaderBodyAndActionsStory = () => {
7575
const modal = (
76-
<Modal.Box>
76+
<Modal.Box closeOnOverlayClick>
7777
<Modal.Header
7878
title="Header of Modal"
7979
subtitle="This is a smaller description"
@@ -116,7 +116,7 @@ const ModalHeaderBodyAndActionsChapter = {
116116

117117
const ModalScrollableBodyStory = () => {
118118
const modal = (
119-
<Modal.Box>
119+
<Modal.Box closeOnOverlayClick>
120120
<Modal.Header title="Header of Modal with Scrollable Body" />
121121
<Modal.Body>
122122
The Body of a Modal can contain whatever you like! Like this
@@ -204,7 +204,7 @@ const ModalScrollableBodyChapter = {
204204

205205
const PlainMediumModalStory = () => {
206206
const modal = (
207-
<Modal.Box medium>
207+
<Modal.Box medium closeOnOverlayClick>
208208
<Modal.Header title="Header of Modal" />
209209
<Modal.Body plain>
210210
The Body of a Modal can contain whatever you like! Like this
@@ -243,6 +243,7 @@ const ModalPlaygroundStory = () => {
243243
<section>
244244
<div id="modal_box" />
245245
<Modal.Box
246+
closeOnOverlayClick
246247
medium={boolean('Box: Medium', false)}
247248
large={boolean('Box: Large', false)}
248249
>

CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
44

5+
## 3.1.0
6+
7+
- [Feature] Adds typings for all components and utilities
8+
59
## 3.0.1
610

711
- [Fix] Formatting in the `<Time />` component wasn't working as expected, this is now fixed.

dist/components/Avatar.d.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export default Avatar;
2+
export type AvatarSize = "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
3+
export type Props = {
4+
className?: string;
5+
colorList?: string[];
6+
size?: "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
7+
avatarUrl?: string;
8+
user: {
9+
name?: string;
10+
email?: string;
11+
};
12+
};
13+
/**
14+
* @typedef {Object} Props
15+
* @property {string | undefined} [className]
16+
* @property {string[] | undefined} [colorList]
17+
* @property {AvatarSize | undefined} [size]
18+
* @property {string | undefined} [avatarUrl]
19+
* @property {{name?: string, email?: string}} user
20+
*/
21+
/** @type {React.FC<Props>} */
22+
declare const Avatar: React.FC<Props>;
23+
import React from "react";

dist/components/Button.d.ts

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
export default Button;
2+
export type Props = {
3+
onClick?: (event?: React.MouseEvent<Element, MouseEvent>) => void;
4+
disabled?: boolean;
5+
loading?: boolean;
6+
className?: string;
7+
secondary?: boolean;
8+
small?: boolean;
9+
white?: boolean;
10+
large?: boolean;
11+
danger?: boolean;
12+
data_tip?: string;
13+
name?: React.ReactNode;
14+
close?: boolean;
15+
};
16+
/**
17+
* @typedef {Object} Props
18+
* @property {(event?: React.MouseEvent) => void} [onClick]
19+
* @property {boolean} [disabled]
20+
* @property {boolean} [loading]
21+
* @property {string} [className]
22+
* @property {boolean} [secondary]
23+
* @property {boolean} [small]
24+
* @property {boolean} [white]
25+
* @property {boolean} [large]
26+
* @property {boolean} [danger]
27+
* @property {string} [data_tip]
28+
* @property {React.ReactNode} [name]
29+
* @property {boolean} [close]
30+
*/
31+
/** @extends {React.Component<Props>} */
32+
declare class Button extends React.Component<Props, any, any> {
33+
constructor(props: Readonly<Props>);
34+
constructor(props: Props, context?: any);
35+
/**
36+
* @param {React.MouseEvent} event
37+
*/
38+
_onClick: (event: React.MouseEvent<Element, MouseEvent>) => void;
39+
render(): JSX.Element;
40+
}
41+
declare namespace Button {
42+
export const displayName: string;
43+
export namespace defaultProps {
44+
export const secondary: boolean;
45+
export const small: boolean;
46+
export const white: boolean;
47+
export const loading: boolean;
48+
export const disabled: boolean;
49+
export const danger: boolean;
50+
}
51+
export namespace propTypes {
52+
export const name: PropTypes.Requireable<PropTypes.ReactNodeLike>;
53+
export const onClick: PropTypes.Requireable<(...args: any[]) => any>;
54+
const secondary_1: PropTypes.Requireable<boolean>;
55+
export { secondary_1 as secondary };
56+
const small_1: PropTypes.Requireable<boolean>;
57+
export { small_1 as small };
58+
export const large: PropTypes.Requireable<boolean>;
59+
const white_1: PropTypes.Requireable<boolean>;
60+
export { white_1 as white };
61+
const loading_1: PropTypes.Requireable<boolean>;
62+
export { loading_1 as loading };
63+
const disabled_1: PropTypes.Requireable<boolean>;
64+
export { disabled_1 as disabled };
65+
const danger_1: PropTypes.Requireable<boolean>;
66+
export { danger_1 as danger };
67+
export const data_tip: PropTypes.Requireable<PropTypes.ReactNodeLike>;
68+
export const className: PropTypes.Requireable<string>;
69+
}
70+
}
71+
import React from "react";
72+
import PropTypes from "prop-types";

dist/components/Checkbox.d.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export default Checkbox;
2+
export type Props = {
3+
checked?: boolean;
4+
disabled?: boolean;
5+
onChange?: (checked: boolean) => void;
6+
label?: string;
7+
};
8+
/**
9+
* @typedef {Object} Props
10+
* @property {boolean | undefined} [checked]
11+
* @property {boolean | undefined} [disabled]
12+
* @property {(checked: boolean) => void} [onChange]
13+
* @property {string} [label]
14+
*/
15+
/** @type {React.FC<Props>} */
16+
declare const Checkbox: React.FC<Props>;
17+
import React from "react";

dist/components/ColorPicker.d.ts

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
export default ColorPicker;
2+
export type NamedColor = {
3+
name?: string;
4+
color?: string;
5+
};
6+
export type Props = {
7+
small?: boolean;
8+
color: number;
9+
onChange?: (color: number) => void;
10+
colorList?: (string | {
11+
name?: string;
12+
color?: string;
13+
})[];
14+
};
15+
export type ColorItemProps = {
16+
color: string;
17+
colorIndex: number;
18+
isActive?: boolean;
19+
onClick?: (colorIndex: number) => void;
20+
tooltip?: React.ReactNode;
21+
};
22+
/**
23+
* @typedef {Object} Props
24+
* @property {boolean | undefined} [small]
25+
* @property {number} color
26+
* @property {((color: number) => void) | undefined} [onChange]
27+
* @property {(string | NamedColor)[]} [colorList]
28+
*/
29+
/** @type {React.FC<Props>} */
30+
declare const ColorPicker: React.FC<Props>;
31+
/**
32+
* @typedef {Object} ColorItemProps
33+
* @property {string} color
34+
* @property {number} colorIndex
35+
* @property {boolean | undefined} [isActive]
36+
* @property {((colorIndex: number) => void) | undefined} [onClick]
37+
* @property {React.ReactNode} [tooltip]
38+
*/
39+
/** @type {React.FC<ColorItemProps>} */
40+
export const ColorItem: React.FC<ColorItemProps>;
41+
/** @typedef {{name?: string; color?: string}} NamedColor */
42+
export const COLORS: string[];
43+
import React from "react";

dist/components/Dropdown.d.ts

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
declare namespace _default {
2+
export { Box };
3+
export { Trigger };
4+
export { Body };
5+
}
6+
export default _default;
7+
export type BoxProps = {
8+
onShowBody?: () => void;
9+
onHideBody?: () => void;
10+
allowBodyInteractions?: boolean;
11+
top?: boolean;
12+
right?: boolean;
13+
scrolling_parent?: string;
14+
children: [React.ReactElement<TriggerProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>, React.ReactElement<{}, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)> | ((props: {}) => JSX.Element)];
15+
className?: string;
16+
};
17+
export type BoxState = Object;
18+
export type top = boolean;
19+
export type show_body = boolean;
20+
export type TriggerProps = {
21+
onClick?: (event?: React.MouseEvent<Element, MouseEvent>) => void;
22+
};
23+
/**
24+
* @typedef {Object} BoxProps
25+
* @property {() => void} [onShowBody]
26+
* @property {() => void} [onHideBody]
27+
* @property {boolean} [allowBodyInteractions]
28+
* @property {boolean} [top]
29+
* @property {boolean} [right]
30+
* @property {string} [scrolling_parent]
31+
* @property {[React.ReactElement<TriggerProps>, React.ReactElement<{}> | ((props: {}) => JSX.Element)]} children
32+
* @property {string} [className]
33+
*/
34+
/**
35+
* @typedef {Object} BoxState
36+
* @typedef {boolean} top
37+
* @typedef {boolean} show_body
38+
*/
39+
/** @extends {React.Component<BoxProps, BoxState>} */
40+
declare class Box extends React.Component<BoxProps, Object, any> {
41+
/**
42+
* @param {BoxProps} props
43+
* @param {unknown} context
44+
*/
45+
constructor(props: BoxProps, context: unknown);
46+
state: {
47+
show_body: boolean;
48+
top: boolean;
49+
};
50+
/**
51+
* @param {MouseEvent} event
52+
*/
53+
_handleClickOutside(event: MouseEvent): void;
54+
/**
55+
* @param {HTMLElement} body
56+
*/
57+
_setPosition(body: HTMLElement): void;
58+
_toggleShowBody(): void;
59+
_timeout: NodeJS.Timeout;
60+
componentWillUnmount(): void;
61+
_getTriggerComponent(): React.ReactElement<TriggerProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
62+
_getBodyComponent(): JSX.Element;
63+
render(): JSX.Element;
64+
}
65+
declare namespace Box {
66+
export const displayName: string;
67+
export namespace propTypes {
68+
export const top: PropTypes.Requireable<boolean>;
69+
export const right: PropTypes.Requireable<boolean>;
70+
export const scrolling_parent: PropTypes.Requireable<string>;
71+
export const allowBodyInteractions: PropTypes.Requireable<boolean>;
72+
export const onShowBody: PropTypes.Requireable<(...args: any[]) => any>;
73+
export const onHideBody: PropTypes.Requireable<(...args: any[]) => any>;
74+
export const className: PropTypes.Requireable<string>;
75+
export const children: PropTypes.Requireable<any>;
76+
}
77+
}
78+
/**
79+
* @typedef {Object} TriggerProps
80+
* @property {(event?: React.MouseEvent) => void} [onClick]
81+
*/
82+
/** @extends {React.Component<TriggerProps>} */
83+
declare class Trigger extends React.Component<TriggerProps, any, any> {
84+
/**
85+
* @param {TriggerProps} props
86+
* @param {unknown} context
87+
*/
88+
constructor(props: TriggerProps, context: unknown);
89+
/**
90+
* @param {React.MouseEvent} event
91+
*/
92+
_onClick(event: React.MouseEvent<Element, MouseEvent>): void;
93+
render(): JSX.Element;
94+
}
95+
declare namespace Trigger {
96+
const displayName_1: string;
97+
export { displayName_1 as displayName };
98+
export namespace propTypes_1 {
99+
export const onClick: PropTypes.Requireable<(...args: any[]) => any>;
100+
const children_1: PropTypes.Requireable<any>;
101+
export { children_1 as children };
102+
}
103+
export { propTypes_1 as propTypes };
104+
}
105+
declare class Body extends React.Component<any, any, any> {
106+
constructor(props: Readonly<any>);
107+
constructor(props: any, context?: any);
108+
render(): JSX.Element;
109+
}
110+
declare namespace Body {
111+
const displayName_2: string;
112+
export { displayName_2 as displayName };
113+
export namespace propTypes_2 {
114+
const top_1: PropTypes.Requireable<boolean>;
115+
export { top_1 as top };
116+
const right_1: PropTypes.Requireable<boolean>;
117+
export { right_1 as right };
118+
export const setPosition: PropTypes.Requireable<(...args: any[]) => any>;
119+
const children_2: PropTypes.Requireable<any>;
120+
export { children_2 as children };
121+
}
122+
export { propTypes_2 as propTypes };
123+
}
124+
import React from "react";
125+
import PropTypes from "prop-types";

dist/components/ErrorMessage.d.ts

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
export default ErrorMessage;
2+
export type Props = {
3+
timeout: number;
4+
onHide?: () => void;
5+
message: string;
6+
};
7+
/**
8+
* @typedef {Object} Props
9+
* @property {number} timeout
10+
* @property {() => void} [onHide]
11+
* @property {string} message
12+
*/
13+
/** @extends {React.Component<Props>} */
14+
declare class ErrorMessage extends React.Component<Props, any, any> {
15+
/**
16+
* @param {Props} props
17+
* @param {unknown} context
18+
*/
19+
constructor(props: Props, context: unknown);
20+
state: {
21+
visible: boolean;
22+
};
23+
/**
24+
* @param {Props} next_props
25+
*/
26+
UNSAFE_componentWillReceiveProps(next_props: Props): void;
27+
/**
28+
* @param {string} message
29+
*/
30+
_isValidMessage(message: string): boolean;
31+
_clearTimeout: () => void;
32+
_triggerDelayedHide: () => void;
33+
timeout: NodeJS.Timeout;
34+
_hide: () => void;
35+
render(): false | JSX.Element;
36+
}
37+
declare namespace ErrorMessage {
38+
export const displayName: string;
39+
export namespace defaultProps {
40+
export const timeout: number;
41+
}
42+
export namespace propTypes {
43+
export const message: PropTypes.Requireable<PropTypes.ReactNodeLike>;
44+
const timeout_1: PropTypes.Requireable<number>;
45+
export { timeout_1 as timeout };
46+
export const onHide: PropTypes.Requireable<(...args: any[]) => any>;
47+
}
48+
}
49+
import React from "react";
50+
import PropTypes from "prop-types";

0 commit comments

Comments
 (0)