Skip to content

Commit f6d18db

Browse files
author
Tejas Kumar
committed
Add type checking
1 parent 86c0ecb commit f6d18db

30 files changed

Lines changed: 1263 additions & 671 deletions

‎onegraph.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
declare module "onegraph-auth";
2+
declare module "../../utils/react-keyframes/";

‎package.json‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,23 @@
3333
"scripts": {
3434
"build": "gatsby build",
3535
"develop": "gatsby develop",
36-
"test": "echo \"Error: no test specified\" && exit 1"
36+
"test": "echo \"Error: no test specified\" && exit 1",
37+
"type-check": "tsc --noEmit",
38+
"type-check:watch": "tsc --noEmit --watch"
3739
},
3840
"devDependencies": {
41+
"@babel/cli": "^7.2.3",
42+
"@babel/core": "^7.4.0",
43+
"@babel/plugin-proposal-class-properties": "^7.4.0",
44+
"@babel/plugin-proposal-object-rest-spread": "^7.4.0",
45+
"@babel/preset-env": "^7.4.1",
46+
"@babel/preset-typescript": "^7.3.2",
47+
"@types/styled-components": "^4.1.12",
48+
"@types/typography": "^0.16.2",
3949
"dotenv": "^7.0.0",
4050
"eslint-plugin-typescript": "^0.14.0",
4151
"standard": "^12.0.1",
52+
"typescript": "^3.3.3",
4253
"typescript-eslint-parser": "^22.0.0"
4354
},
4455
"standard": {
@@ -47,4 +58,4 @@
4758
"typescript"
4859
]
4960
}
50-
}
61+
}

‎src/components/atoms/Arrow.tsx‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,21 @@
1-
import React from 'react'
2-
import styled from 'styled-components'
1+
import React from "react";
2+
import styled from "styled-components";
33

44
const SVG = styled.svg`
55
path {
6-
fill: ${props =>
7-
props.color ? props.theme[props.color].main : props.theme.primary.main};
6+
fill: ${props => (props.color ? props.theme[props.color].main : props.theme.primary.main)};
87
}
9-
`
8+
`;
109

11-
const Arrow = ({ color, direction }) => (
12-
<SVG
13-
color={color}
14-
width="24"
15-
height="18"
16-
viewBox="0 0 24 18"
17-
fill="none"
18-
xmlns="http://www.w3.org/2000/svg"
19-
>
20-
{direction === 'right' && (
10+
const Arrow: React.FC<{ color: string; direction: string }> = ({ color, direction }) => (
11+
<SVG color={color} width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
12+
{direction === "right" && (
2113
<path d="M22.7958 9.79582C23.2353 9.3563 23.2353 8.6437 22.7958 8.20418L15.6334 1.04178C15.1939 0.602255 14.4813 0.602255 14.0418 1.04178C13.6023 1.4813 13.6023 2.1939 14.0418 2.63342L20.4084 9L14.0418 15.3666C13.6023 15.8061 13.6023 16.5187 14.0418 16.9582C14.4813 17.3977 15.1939 17.3977 15.6334 16.9582L22.7958 9.79582ZM0 10.1255L22 10.1255V7.87454L0 7.87454L0 10.1255Z" />
2214
)}
23-
{direction === 'left' && (
15+
{direction === "left" && (
2416
<path d="M1.20418 8.20418C0.764657 8.6437 0.764657 9.3563 1.20418 9.79582L8.36658 16.9582C8.8061 17.3977 9.5187 17.3977 9.95822 16.9582C10.3977 16.5187 10.3977 15.8061 9.95822 15.3666L3.59164 9L9.95822 2.63342C10.3977 2.1939 10.3977 1.48129 9.95823 1.04177C9.5187 0.602254 8.8061 0.602254 8.36658 1.04177L1.20418 8.20418ZM24 7.87454L2 7.87454L2 10.1255L24 10.1255L24 7.87454Z" />
2517
)}
2618
</SVG>
27-
)
19+
);
2820

29-
export default Arrow
21+
export default Arrow;

‎src/components/atoms/CharacterTitle.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from 'react'
2-
import styled, { keyframes } from 'styled-components'
1+
import React from "react";
2+
import styled from "styled-components";
33

44
const Container = styled.div`
55
border-radius: 6px;
@@ -10,19 +10,19 @@ const Container = styled.div`
1010
padding: 2px 20px;
1111
z-index: -1;
1212
user-select: none;
13-
`
13+
`;
1414

1515
const Title = styled.h3`
1616
color: ${props => props.theme.secondary.main};
1717
text-transform: uppercase;
1818
font-size: 1.75rem;
1919
font-weight: normal;
20-
`
20+
`;
2121

22-
const CharacterTitle = ({ name }) => (
22+
const CharacterTitle: React.FC<{ name: string }> = ({ name }) => (
2323
<Container>
2424
<Title>{name}</Title>
2525
</Container>
26-
)
26+
);
2727

28-
export default CharacterTitle
28+
export default CharacterTitle;

‎src/components/atoms/Enter.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import React, { useRef, useEffect } from 'react'
1+
import React, { useRef, useEffect } from "react";
22

3-
const Enter = ({ onClick }) => {
4-
const enterText = useRef(null)
3+
const Enter: React.FC<{ onClick: () => void}> = ({ onClick }) => {
4+
const enterText = useRef<null | HTMLButtonElement>(null);
55
useEffect(() => {
6-
enterText.current.focus()
7-
}, [enterText])
6+
if (enterText.current) {
7+
enterText.current.focus();
8+
}
9+
}, [enterText]);
810
return (
9-
<button ref={enterText} tabIndex="1" onClick={onClick}>
11+
<button ref={enterText} tabIndex={1} onClick={onClick}>
1012
Enter
1113
</button>
12-
)
13-
}
14+
);
15+
};
1416

15-
export default Enter
17+
export default Enter;

‎src/components/atoms/Eyes.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
1-
import React from 'react'
2-
import styled from 'styled-components'
1+
import React from "react";
32

4-
const Eye = styled.circle`
5-
fill: #1b2d3c;
6-
`
7-
8-
const Eyes = ({ isTalking }) => (
3+
const Eyes = () => (
94
<React.Fragment>
105
<circle fill="#1b2d3c" cx="82.5" cy="89.5" r="8.5" />
116
<circle fill="#1b2d3c" cx="149.5" cy="91.5" r="8.5" />
127
</React.Fragment>
13-
)
8+
);
149

15-
export default Eyes
10+
export default Eyes;

‎src/components/atoms/InputRadio.tsx‎

Lines changed: 55 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
1-
import React, { useRef, useEffect } from 'react'
2-
import styled from 'styled-components'
3-
import { addFocus } from '../../utils/mixins'
1+
import React, { useRef, useEffect } from "react";
2+
import { addFocus } from "../../utils/mixins";
3+
import styled from "../../utils/styled";
4+
import { Story, IStory } from "../../utils/story";
45

5-
const Container = styled.div`
6-
input:focus + ${Label}::before, input:active + ${Label}::before {
7-
${addFocus}
8-
}
9-
`
10-
11-
const Label = styled.label`
6+
const Label = styled.label<{ checked: boolean }>`
127
margin-left: 0.5rem;
138
font-size: 1.25rem;
149
position: relative;
1510
1611
&::before {
17-
content: '';
12+
content: "";
1813
display: inline-block;
1914
height: 12px;
2015
width: 12px;
@@ -23,10 +18,15 @@ const Label = styled.label`
2318
position: absolute;
2419
left: -19px;
2520
top: 4px;
26-
background-color: ${props =>
27-
props.checked ? props.theme.primary.main : ''};
21+
background-color: ${props => (props.checked ? props.theme.primary.main : "")};
2822
}
29-
`
23+
`;
24+
25+
const Container = styled.div`
26+
input:focus + ${Label}::before, input:active + ${Label}::before {
27+
${addFocus}
28+
}
29+
`;
3030

3131
const Input = styled.input`
3232
font-size: 1.25rem;
@@ -35,39 +35,50 @@ const Input = styled.input`
3535
&:active {
3636
outline: none;
3737
}
38-
`
38+
`;
3939

40-
const InputRadio = ({ currentValue, input, onChange, transition }) => {
41-
const inputRadioRef = useRef(null)
40+
export interface InputRadioProps {
41+
currentValue: string;
42+
input: IStory["INPUT"];
43+
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
44+
transition: () => void;
45+
}
46+
47+
const InputRadio: React.FC<InputRadioProps> = ({ currentValue, input, onChange, transition }) => {
48+
const inputRadioRef = useRef<HTMLInputElement>(null);
4249
useEffect(() => {
43-
inputRadioRef.current.focus()
44-
}, [inputRadioRef])
50+
if (inputRadioRef.current) {
51+
inputRadioRef.current.focus();
52+
}
53+
}, [inputRadioRef]);
4554
return (
4655
<React.Fragment>
47-
{input['OPTIONS'].map((option, index) => (
48-
<Container key={option}>
49-
<Input
50-
ref={index === 0 ? inputRadioRef : null}
51-
tabIndex={index === 0 ? '1' : ''}
52-
value={option}
53-
checked={option === currentValue}
54-
onChange={onChange}
55-
onKeyUp={e => {
56-
if ((e.keyCode === 13 || e.keyCode === 39) && currentValue) {
57-
transition()
58-
}
59-
}}
60-
type="radio"
61-
name={option}
62-
id={option}
63-
/>
64-
<Label checked={option === currentValue} htmlFor={option}>
65-
{option}
66-
</Label>
67-
</Container>
68-
))}
56+
{input &&
57+
input.OPTIONS &&
58+
input.OPTIONS.map((option, index) => (
59+
<Container key={option}>
60+
<Input
61+
ref={index === 0 ? inputRadioRef : null}
62+
tabIndex={index === 0 ? 1 : 0}
63+
value={option}
64+
checked={option === currentValue}
65+
onChange={onChange}
66+
onKeyUp={e => {
67+
if ((e.keyCode === 13 || e.keyCode === 39) && currentValue) {
68+
transition();
69+
}
70+
}}
71+
type="radio"
72+
name={option}
73+
id={option}
74+
/>
75+
<Label checked={option === currentValue} htmlFor={option}>
76+
{option}
77+
</Label>
78+
</Container>
79+
))}
6980
</React.Fragment>
70-
)
71-
}
81+
);
82+
};
7283

73-
export default InputRadio
84+
export default InputRadio;

‎src/components/atoms/InputText.tsx‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, { useRef, useEffect } from 'react'
2-
import styled from 'styled-components'
3-
import { hideElement, addFocus } from '../../utils/mixins'
1+
import React, { useRef, useEffect } from "react";
2+
import styled from "styled-components";
3+
import { hideElement, addFocus } from "../../utils/mixins";
44

55
const Label = styled.label`
66
${hideElement}
7-
`
7+
`;
88

99
const Input = styled.input`
1010
background-color: ${props => props.theme.background.main};
@@ -29,37 +29,39 @@ const Input = styled.input`
2929
border-bottom: solid 2px ${props => props.theme.focus.main};
3030
${addFocus}
3131
}
32-
`
32+
`;
3333

3434
const InputText = ({ input, value, onChange, transition }) => {
35-
const inputTextRef = useRef(null)
35+
const inputTextRef = useRef<HTMLInputElement>(null);
3636
useEffect(() => {
37-
inputTextRef.current.focus()
38-
}, [inputTextRef])
37+
if (inputTextRef.current) {
38+
inputTextRef.current.focus();
39+
}
40+
}, [inputTextRef]);
3941
return (
4042
<React.Fragment>
41-
<Label id={`${input['KEY']}-label`} htmlFor={input['KEY']}>
42-
{input['KEY']}
43+
<Label id={`${input["KEY"]}-label`} htmlFor={input["KEY"]}>
44+
{input["KEY"]}
4345
</Label>
4446
<Input
45-
aria-labelledby={`${input['KEY']}-label`}
47+
aria-labelledby={`${input["KEY"]}-label`}
4648
required
47-
placeholder={input['PLACEHOLDER'] || input['KEY']}
49+
placeholder={input["PLACEHOLDER"] || input["KEY"]}
4850
ref={inputTextRef}
4951
tabIndex="1"
5052
value={value}
5153
onChange={onChange}
5254
onKeyUp={e => {
53-
if ((e.keyCode === 13 || e.keyCode === 39) && value !== '') {
54-
transition()
55+
if ((e.keyCode === 13 || e.keyCode === 39) && value !== "") {
56+
transition();
5557
}
5658
}}
5759
type="text"
58-
name={input['KEY']}
59-
id={input['KEY']}
60+
name={input["KEY"]}
61+
id={input["KEY"]}
6062
/>
6163
</React.Fragment>
62-
)
63-
}
64+
);
65+
};
6466

65-
export default InputText
67+
export default InputText;

‎src/components/atoms/Laptop.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from 'react'
2-
import styled from 'styled-components'
1+
import React from "react";
2+
import styled from "styled-components";
33

44
const SVG = styled.svg`
55
pointer-events: all;
@@ -8,9 +8,9 @@ const SVG = styled.svg`
88
&:focus {
99
cursor: pointer;
1010
}
11-
`
11+
`;
1212
//TODO add ids to the different pieces of the svg so you can target them and pass the theme colors instead of hardcoded
13-
const Laptop = ({ login }) => (
13+
const Laptop: React.FC<{ login: () => void }> = ({ login }) => (
1414
<SVG
1515
onClick={() => login()}
1616
fill="none"
@@ -81,6 +81,6 @@ const Laptop = ({ login }) => (
8181
<path d="m318 43h25v14h-25z" />
8282
</g>
8383
</SVG>
84-
)
84+
);
8585

86-
export default Laptop
86+
export default Laptop;

0 commit comments

Comments
 (0)