Skip to content

Commit 3faeaf5

Browse files
bluebill1049bluebill1049
authored
Feature/testing (#4)
* clean up code * add testing * 1.0.1-rc.0 * fix readme * add test for header * more unit tests * update all files * update readme
1 parent 0bd198d commit 3faeaf5

24 files changed

+4949
-331
lines changed

‎.eslintrc.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
module.exports = {
2+
parser: '@typescript-eslint/parser',
3+
extends: [
4+
'plugin:@typescript-eslint/recommended',
5+
'plugin:react/recommended',
6+
],
7+
parserOptions: {
8+
ecmaVersion: 2018,
9+
sourceType: 'module',
10+
},
11+
plugins: ['react-hooks'],
12+
rules: {
13+
curly: 'error',
14+
'@typescript-eslint/indent': 'off',
15+
'@typescript-eslint/no-non-null-assertion': 'off',
16+
'@typescript-eslint/no-explicit-any': 'off',
17+
'@typescript-eslint/explicit-function-return-type': 'off',
18+
'@typescript-eslint/no-object-literal-type-assertion': 'off',
19+
'react-hooks/rules-of-hooks': 'error',
20+
'react-hooks/exhaustive-deps': 'error',
21+
'no-console': 'error',
22+
},
23+
settings: {
24+
react: {
25+
pragma: 'React',
26+
version: 'detect',
27+
},
28+
},
29+
};

‎README.md

+5-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
<h1 align="center">React Hook Form Dev Tools</h1>
21
<p align="center"><b>🤹‍♀️ Under development</b></p>
32

43
<div align="center">
@@ -13,13 +12,11 @@
1312

1413
<div align="center">
1514

16-
[![npm downloads](https://img.shields.io/npm/dm/react-hook-form.svg?style=flat-square)](https://www.npmjs.com/package/react-hook-form)
17-
[![npm](https://img.shields.io/npm/dt/react-hook-form.svg?style=flat-square)](https://www.npmjs.com/package/react-hook-form)
18-
![dep](https://badgen.net/david/dep/bluebill1049/react-hook-form)
19-
[![npm](https://badgen.net/bundlephobia/minzip/react-hook-form)](https://badgen.net/bundlephobia/minzip/react-hook-form)
20-
[![Coverage Status](https://coveralls.io/repos/github/bluebill1049/react-hook-form/badge.svg?branch=master)](https://coveralls.io/github/bluebill1049/react-hook-form?branch=master)
15+
[![npm downloads](https://img.shields.io/npm/dm/react-hook-form-devtools.svg?style=flat-square)](https://www.npmjs.com/package/react-hook-form-devtools)
16+
[![npm](https://img.shields.io/npm/dt/react-hook-form-devtools.svg?style=flat-square)](https://www.npmjs.com/package/react-hook-form-devtools)
17+
[![npm](https://badgen.net/bundlephobia/minzip/react-hook-form-devtools)](https://badgen.net/bundlephobia/minzip/react-hook-form-devtools)
2118

22-
[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=React+hooks+for+form+validation+without+the+hassle&url=https://github.com/bluebill1049/react-hook-form)&nbsp;[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/react-hook-form)
19+
[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=React+hooks+for+form+validation+without+the+hassle&url=https://github.com/bluebill1049/react-hook-form-devtools)&nbsp;[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/react-hook-form)
2320

2421
</div>
2522

@@ -36,7 +33,7 @@ This React Component will help you to debug when you are working React Hook Form
3633
```typescript jsx
3734
import React from 'react';
3835
import { useForm } from 'react-hook-form';
39-
import DevTool from './devlTool';
36+
import { DevTool } from 'react-hook-form-devtools';
4037
import './App.css';
4138

4239
const App = () => {

‎app/src/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { useForm } from 'react-hook-form';
3-
import DevTool from './devlTool';
3+
import { DevTool } from './devlTool';
44
import './App.css';
55

66
const App = () => {

‎app/src/devlTool/devTool.tsx

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import * as React from 'react';
2+
import { Control } from 'react-hook-form';
3+
import { Animate } from 'react-simple-animate';
4+
import Header from './header';
5+
import Panel from './panel';
6+
import colors from './colors';
7+
import Logo from './logo';
8+
import { PanelShadow } from './panelShadow';
9+
import { Button } from './styled';
10+
11+
export default ({ control }: { control: Control }) => {
12+
const [visible, setVisible] = React.useState(true);
13+
14+
return (
15+
<>
16+
<Animate
17+
play={!visible}
18+
duration={0.2}
19+
start={{
20+
position: 'fixed',
21+
top: 0,
22+
right: 0,
23+
transform: 'translateX(0)',
24+
}}
25+
end={{
26+
top: 0,
27+
right: 0,
28+
position: 'fixed',
29+
transform: 'translateX(280px)',
30+
}}
31+
>
32+
<div
33+
style={{
34+
position: 'fixed',
35+
height: '100vh',
36+
width: 250,
37+
zIndex: 99999,
38+
background: colors.buttonBlue,
39+
top: 0,
40+
right: 0,
41+
display: 'grid',
42+
textAlign: 'left',
43+
color: 'white',
44+
fontSize: 14,
45+
gridTemplateRows: '40px auto',
46+
}}
47+
>
48+
<Header setVisible={setVisible} control={control} />
49+
<Panel control={control} />
50+
</div>
51+
<PanelShadow visible={visible} />
52+
</Animate>
53+
54+
{!visible && (
55+
<Button
56+
title="Show dev panel"
57+
style={{
58+
position: 'fixed',
59+
zIndex: 99999,
60+
top: 3,
61+
right: 3,
62+
padding: 3,
63+
margin: 0,
64+
background: 'none',
65+
}}
66+
>
67+
<Logo setVisible={setVisible} />
68+
</Button>
69+
)}
70+
</>
71+
);
72+
};

‎app/src/devlTool/devlTool.tsx

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import * as React from 'react';
2+
import { Control } from 'react-hook-form';
3+
import { Animate } from 'react-simple-animate';
4+
import Header from './header';
5+
import Panel from './panel';
6+
import colors from './colors';
7+
import Logo from './logo';
8+
import { Button } from '../app/src/devlTool/styled';
9+
10+
export const DevTool = ({ control }: { control: Control }) => {
11+
const [visible, setVisible] = React.useState(true);
12+
13+
return (
14+
<>
15+
<Animate
16+
play={!visible}
17+
duration={0.2}
18+
start={{
19+
position: 'fixed',
20+
top: 0,
21+
right: 0,
22+
transform: 'translateX(0)',
23+
}}
24+
end={{
25+
top: 0,
26+
right: 0,
27+
position: 'fixed',
28+
transform: 'translateX(280px)',
29+
}}
30+
>
31+
<div
32+
style={{
33+
position: 'fixed',
34+
height: '100vh',
35+
width: 250,
36+
zIndex: 99999,
37+
background: colors.primary,
38+
top: 0,
39+
right: 0,
40+
display: 'grid',
41+
textAlign: 'left',
42+
color: 'white',
43+
fontSize: 14,
44+
gridTemplateRows: '40px auto',
45+
}}
46+
>
47+
<Header setVisible={setVisible} control={control} />
48+
<Panel control={control} />
49+
</div>
50+
<Animate
51+
play={visible}
52+
duration={0.1}
53+
start={{
54+
transform: 'translateX(8px)',
55+
}}
56+
end={{
57+
transform: 'translateX(0)',
58+
}}
59+
delay={0.3}
60+
>
61+
<div>
62+
<div
63+
style={{
64+
position: 'fixed',
65+
height: '100vh',
66+
width: 250,
67+
zIndex: 99998,
68+
background: 'black',
69+
top: 7,
70+
right: 7,
71+
boxShadow: 'rgba(15, 15, 29, 0.4) -3px 3px 6px 0px',
72+
}}
73+
/>
74+
<span
75+
style={{
76+
width: 0,
77+
height: 0,
78+
position: 'fixed',
79+
zIndex: 99998,
80+
borderTop: '10px solid transparent',
81+
borderBottom: '10px solid transparent',
82+
borderRight: `10px solid black`,
83+
right: 247,
84+
top: -3,
85+
}}
86+
/>
87+
88+
<span
89+
style={{
90+
width: 0,
91+
height: 0,
92+
position: 'fixed',
93+
zIndex: 99998,
94+
borderTop: '10px solid transparent',
95+
borderBottom: '10px solid transparent',
96+
borderRight: `10px solid ${colors.buttonBlue}`,
97+
right: 247,
98+
top: 36,
99+
}}
100+
/>
101+
<span
102+
style={{
103+
width: 10,
104+
height: 21,
105+
position: 'fixed',
106+
zIndex: 99998,
107+
right: 247,
108+
top: 48,
109+
background: colors.buttonBlue,
110+
}}
111+
/>
112+
<span
113+
style={{
114+
width: 0,
115+
height: 0,
116+
position: 'fixed',
117+
zIndex: 99998,
118+
borderTop: '10px solid transparent',
119+
borderBottom: '10px solid transparent',
120+
borderLeft: `10px solid ${colors.buttonBlue}`,
121+
right: 247,
122+
top: 54,
123+
}}
124+
/>
125+
</div>
126+
</Animate>
127+
</Animate>
128+
129+
{!visible && (
130+
<Button
131+
title="Show dev panel"
132+
style={{
133+
position: 'fixed',
134+
zIndex: 99999,
135+
top: 3,
136+
right: 3,
137+
padding: 3,
138+
margin: 0,
139+
background: 'none',
140+
}}
141+
>
142+
<Logo setVisible={setVisible} />
143+
</Button>
144+
)}
145+
</>
146+
);
147+
};

‎app/src/devlTool/formStateTable.tsx

-102
This file was deleted.

0 commit comments

Comments
 (0)