Skip to content

Commit fb6d9cb

Browse files
fcollonvalfcollonval
authored
Add typing on react components (#1)
* Add typing to checkbox * Add typing for react components
1 parent 685dbf8 commit fb6d9cb

File tree

17 files changed

+136
-44
lines changed

17 files changed

+136
-44
lines changed

‎.eslintignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
node_modules
2-
2+
**/dist
33
**/node_modules
44
**/lib
55
**/build

‎packages/components/docs/api-report.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
## API Report File for "@jupyter-notebook/ui-components"
1+
## API Report File for "@jupyter-notebook/web-components"
22

33
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
44

‎packages/components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "@jupyter-notebook/ui-components",
2+
"name": "@jupyter-notebook/web-components",
33
"version": "0.1.0",
44
"description": "A component library for building extensions in Jupyter frontends.",
55
"homepage": "https://github.com/jupyterlab-contrib/jupyter-ui-toolkit#readme",

‎packages/lab-example/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@
4848
"watch:labextension": "jupyter labextension watch ."
4949
},
5050
"dependencies": {
51-
"@jupyter-notebook/ui-components": "^0.1.0",
52-
"@jupyter-notebook/react-ui-components": "^0.1.0",
51+
"@jupyter-notebook/web-components": "^0.1.0",
52+
"@jupyter-notebook/react-components": "^0.1.0",
5353
"@jupyterlab/application": "^3.1.0",
5454
"@jupyterlab/apputils": "^3.0.0",
5555
"@lumino/widgets": "^1.30.0",

‎packages/lab-example/src/index.tsx‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import {
1010
Tag,
1111
TextArea,
1212
TextField
13-
} from '@jupyter-notebook/react-ui-components';
13+
} from '@jupyter-notebook/react-components';
1414
import {
1515
allComponents,
1616
provideJupyterDesignSystem
17-
} from '@jupyter-notebook/ui-components';
17+
} from '@jupyter-notebook/web-components';
1818
import {
1919
JupyterFrontEnd,
2020
JupyterFrontEndPlugin
@@ -83,26 +83,21 @@ const plugin: JupyterFrontEndPlugin<void> = {
8383
};
8484

8585
function Artwork(): JSX.Element {
86-
// TODO provide typing for Jupyter React components - see https://www.fast.design/docs/integrations/react#typescript-and-tsx-support
8786
const onClick = () => {
8887
alert('Reacting on React click event.');
8988
};
9089
return (
9190
<div className="jp-FlexRow">
9291
<div className="jp-FlexColumn">
9392
<div className="jp-FlexRow">
94-
{/* @ts-expect-error property appearance not defined */}
9593
<Button appearance="primary" onClick={onClick}>
9694
Button
9795
</Button>
98-
{/* @ts-expect-error property appearance not defined */}
9996
<Button appearance="secondary">Button</Button>
100-
{/* @ts-expect-error property appearance not defined */}
10197
<Button appearance="icon" aria-label="Confirm">
10298
<span className="fa fa-cog"></span>
10399
</Button>
104100
</div>
105-
{/* @ts-expect-error property value not defined */}
106101
<TextField value="Populated text">Text Field Label</TextField>
107102
<div className="jp-FlexColumn">
108103
<label>Label</label>
@@ -113,29 +108,22 @@ function Artwork(): JSX.Element {
113108
</Dropdown>
114109
</div>
115110
<TextArea>Text Area Label</TextArea>
116-
{/* @ts-expect-error property href not defined */}
117111
<Link href="#">Link Text</Link>
118112
</div>
119113
<div className="jp-FlexColumn">
120-
{/* @ts-expect-error property orientation not defined */}
121114
<RadioGroup orientation="vertical">
122115
<label slot="label">Label</label>
123-
{/* @ts-expect-error property checked not defined */}
124116
<Radio checked>Radio Label</Radio>
125117
<Radio>Radio Label</Radio>
126-
{/* @ts-expect-error property disabled not defined */}
127118
<Radio disabled>Radio Label</Radio>
128119
</RadioGroup>
129120
<div>
130121
<label>Label</label>
131122
<div className="jp-FlexColumn">
132-
{/* @ts-expect-error property autofocus checked not defined */}
133123
<Checkbox autofocus checked>
134124
Label
135125
</Checkbox>
136-
{/* @ts-expect-error property checked not defined */}
137126
<Checkbox checked>Label</Checkbox>
138-
{/* @ts-expect-error property disabled not defined */}
139127
<Checkbox disabled>Label</Checkbox>
140128
</div>
141129
</div>

‎packages/react-components/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "@jupyter-notebook/react-ui-components",
2+
"name": "@jupyter-notebook/react-components",
33
"version": "0.1.0",
44
"description": "A component library for building extensions in Jupyter frontends.",
55
"homepage": "https://github.com/jupyterlab-contrib/jupyter-ui-toolkit#readme",
@@ -29,7 +29,7 @@
2929
"test": "jest --verbose --coverage"
3030
},
3131
"dependencies": {
32-
"@jupyter-notebook/ui-components": "^0.1.0",
32+
"@jupyter-notebook/web-components": "^0.1.0",
3333
"@microsoft/fast-react-wrapper": "^0.1.17",
3434
"react": "^17.0.0"
3535
},

‎packages/react-components/src/button/index.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,28 @@
44
import {
55
provideJupyterDesignSystem,
66
jpButton
7-
} from '@jupyter-notebook/ui-components';
7+
} from '@jupyter-notebook/web-components';
88
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
99
import React from 'react';
1010

1111
const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
1212

13-
export const Button = wrap(jpButton());
13+
export const Button: React.DetailedHTMLFactory<
14+
React.HTMLAttributes<HTMLElement> & {
15+
appearance?: 'primary' | 'secondary' | 'icon';
16+
'aria-label'?: string;
17+
autofocus?: boolean;
18+
disabled?: boolean;
19+
form?: string;
20+
formaction?: string;
21+
formenctype?: string;
22+
formmethod?: string;
23+
formtarget?: string;
24+
name?: string;
25+
type?: string;
26+
value?: string;
27+
},
28+
HTMLElement
29+
> = wrap(jpButton()) as any;
1430
// @ts-expect-error unknown property
1531
Button.displayName = 'Jupyter.Button';

‎packages/react-components/src/checkbox/index.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,23 @@
44
import {
55
provideJupyterDesignSystem,
66
jpCheckbox
7-
} from '@jupyter-notebook/ui-components';
7+
} from '@jupyter-notebook/web-components';
88
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
99
import React from 'react';
1010

1111
const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
1212

13-
export const Checkbox = wrap(jpCheckbox());
13+
export const Checkbox: React.DetailedHTMLFactory<
14+
React.HTMLAttributes<HTMLElement> & {
15+
autofocus?: boolean;
16+
checked?: boolean;
17+
disabled?: boolean;
18+
readonly?: boolean;
19+
required?: boolean;
20+
value?: string;
21+
indeterminate?: boolean;
22+
},
23+
HTMLElement
24+
> = wrap(jpCheckbox()) as any;
1425
// @ts-expect-error unknown property
1526
Checkbox.displayName = 'Jupyter.Checkbox';

‎packages/react-components/src/dropdown/index.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,19 @@
44
import {
55
provideJupyterDesignSystem,
66
jpDropdown
7-
} from '@jupyter-notebook/ui-components';
7+
} from '@jupyter-notebook/web-components';
88
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
99
import React from 'react';
1010

1111
const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
1212

13-
export const Dropdown = wrap(jpDropdown());
13+
export const Dropdown: React.DetailedHTMLFactory<
14+
React.HTMLAttributes<HTMLElement> & {
15+
disabled?: boolean;
16+
open?: boolean;
17+
position?: 'above' | 'below';
18+
},
19+
HTMLElement
20+
> = wrap(jpDropdown()) as any;
1421
// @ts-expect-error unknown property
15-
Dropdown.displayName = 'Jupyter.Dropdown';
22+
Dropdown.displayName = 'Jupyter.Dropdown';

‎packages/react-components/src/link/index.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,24 @@
44
import {
55
provideJupyterDesignSystem,
66
jpLink
7-
} from '@jupyter-notebook/ui-components';
7+
} from '@jupyter-notebook/web-components';
88
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
99
import React from 'react';
1010

1111
const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
1212

13-
export const Link = wrap(jpLink());
13+
export const Link: React.DetailedHTMLFactory<
14+
React.HTMLAttributes<HTMLElement> & {
15+
download?: boolean;
16+
href?: string;
17+
hreflang?: string;
18+
ping?: string;
19+
referrerpolicy?: string;
20+
rel?: string;
21+
target?: string;
22+
type?: string;
23+
},
24+
HTMLElement
25+
> = wrap(jpLink()) as any;
1426
// @ts-expect-error unknown property
1527
Link.displayName = 'Jupyter.Link';

0 commit comments

Comments
 (0)