Skip to content

Commit c6f65bc

Browse files
rothbartrothbart
authored
[docs] Migrate Onepirate to TypeScript (#22295)
1 parent 6b3fd95 commit c6f65bc

Some content is hidden

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

62 files changed

+2631
-139
lines changed

‎docs/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"@types/autosuggest-highlight": "^3.1.0",
3737
"@types/css-mediaquery": "^0.1.0",
3838
"@types/json2mq": "^0.2.0",
39+
"@types/markdown-to-jsx": "^6.11.1",
3940
"@types/react-dom": "^16.9.1",
4041
"@types/react-router-dom": "^5.1.0",
4142
"@types/react-swipeable-views": "^0.13.0",
@@ -44,6 +45,7 @@
4445
"@types/react-virtualized": "^9.21.4",
4546
"@types/react-window": "^1.7.0",
4647
"@types/styled-components": "5.1.2",
48+
"@types/validator": "^13.1.0",
4749
"accept-language": "^3.0.18",
4850
"address": "^1.0.3",
4951
"ast-types": "^0.13.2",
@@ -107,6 +109,7 @@
107109
"redux-logger": "^3.0.6",
108110
"rimraf": "^3.0.0",
109111
"styled-components": "^5.0.0",
112+
"validator": "^13.1.1",
110113
"webfontloader": "^1.6.28",
111114
"webpack": "^4.41.0",
112115
"webpack-bundle-analyzer": "^3.5.1"

‎docs/src/pages/premium-themes/onepirate/ForgotPassword.js

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
/* eslint-disable import/order */
2-
import withRoot from './modules/withRoot';
3-
// --- Post bootstrap -----
4-
import * as React from 'react';
1+
import React from 'react';
52
import { Field, Form, FormSpy } from 'react-final-form';
63
import { makeStyles } from '@material-ui/core/styles';
74
import Typography from './modules/components/Typography';
@@ -12,6 +9,7 @@ import { email, required } from './modules/form/validation';
129
import RFTextField from './modules/form/RFTextField';
1310
import FormButton from './modules/form/FormButton';
1411
import FormFeedback from './modules/form/FormFeedback';
12+
import withRoot from './modules/withRoot';
1513

1614
const useStyles = makeStyles((theme) => ({
1715
form: {
@@ -31,12 +29,12 @@ function ForgotPassword() {
3129
const [sent, setSent] = React.useState(false);
3230

3331
const validate = (values) => {
34-
const errors = required(['email', 'password'], values);
32+
const errors = required(['email'], values);
3533

3634
if (!errors.email) {
37-
const emailError = email(values.email, values);
35+
const emailError = email(values.email);
3836
if (emailError) {
39-
errors.email = email(values.email, values);
37+
errors.email = email(values.email);
4038
}
4139
}
4240

@@ -65,7 +63,7 @@ function ForgotPassword() {
6563
subscription={{ submitting: true }}
6664
validate={validate}
6765
>
68-
{({ handleSubmit2, submitting }) => (
66+
{({ handleSubmit: handleSubmit2, submitting }) => (
6967
<form onSubmit={handleSubmit2} className={classes.form} noValidate>
7068
<Field
7169
autoFocus

‎docs/src/pages/premium-themes/onepirate/ForgotPassword.tsx

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React from 'react';
2+
import { Field, Form, FormSpy } from 'react-final-form';
3+
import { makeStyles } from '@material-ui/core/styles';
4+
import Typography from './modules/components/Typography';
5+
import AppFooter from './modules/views/AppFooter';
6+
import AppAppBar from './modules/views/AppAppBar';
7+
import AppForm from './modules/views/AppForm';
8+
import { email, required } from './modules/form/validation';
9+
import RFTextField from './modules/form/RFTextField';
10+
import FormButton from './modules/form/FormButton';
11+
import FormFeedback from './modules/form/FormFeedback';
12+
import withRoot from './modules/withRoot';
13+
14+
const useStyles = makeStyles((theme) => ({
15+
form: {
16+
marginTop: theme.spacing(6),
17+
},
18+
button: {
19+
marginTop: theme.spacing(3),
20+
marginBottom: theme.spacing(2),
21+
},
22+
feedback: {
23+
marginTop: theme.spacing(2),
24+
},
25+
}));
26+
27+
function ForgotPassword() {
28+
const classes = useStyles();
29+
const [sent, setSent] = React.useState(false);
30+
31+
const validate = (values: { [index: string]: string }) => {
32+
const errors = required(['email'], values);
33+
34+
if (!errors.email) {
35+
const emailError = email(values.email);
36+
if (emailError) {
37+
errors.email = email(values.email);
38+
}
39+
}
40+
41+
return errors;
42+
};
43+
44+
const handleSubmit = () => {
45+
setSent(true);
46+
};
47+
48+
return (
49+
<React.Fragment>
50+
<AppAppBar />
51+
<AppForm>
52+
<React.Fragment>
53+
<Typography variant="h3" gutterBottom marked="center" align="center">
54+
Forgot your password?
55+
</Typography>
56+
<Typography variant="body2" align="center">
57+
{"Enter your email address below and we'll " +
58+
'send you a link to reset your password.'}
59+
</Typography>
60+
</React.Fragment>
61+
<Form
62+
onSubmit={handleSubmit}
63+
subscription={{ submitting: true }}
64+
validate={validate}
65+
>
66+
{({ handleSubmit: handleSubmit2, submitting }) => (
67+
<form onSubmit={handleSubmit2} className={classes.form} noValidate>
68+
<Field
69+
autoFocus
70+
autoComplete="email"
71+
component={RFTextField}
72+
disabled={submitting || sent}
73+
fullWidth
74+
label="Email"
75+
margin="normal"
76+
name="email"
77+
required
78+
size="large"
79+
/>
80+
<FormSpy subscription={{ submitError: true }}>
81+
{({ submitError }) =>
82+
submitError ? (
83+
<FormFeedback className={classes.feedback} error>
84+
{submitError}
85+
</FormFeedback>
86+
) : null
87+
}
88+
</FormSpy>
89+
<FormButton
90+
className={classes.button}
91+
disabled={submitting || sent}
92+
size="large"
93+
color="secondary"
94+
fullWidth
95+
>
96+
{submitting || sent ? 'In progress…' : 'Send reset link'}
97+
</FormButton>
98+
</form>
99+
)}
100+
</Form>
101+
</AppForm>
102+
<AppFooter />
103+
</React.Fragment>
104+
);
105+
}
106+
107+
export default withRoot(ForgotPassword);

‎docs/src/pages/premium-themes/onepirate/Home.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
/* eslint-disable import/order */
2-
import withRoot from './modules/withRoot';
3-
// --- Post bootstrap -----
4-
import * as React from 'react';
1+
import React from 'react';
52
import ProductCategories from './modules/views/ProductCategories';
63
import ProductSmokingHero from './modules/views/ProductSmokingHero';
74
import AppFooter from './modules/views/AppFooter';
@@ -10,6 +7,7 @@ import ProductValues from './modules/views/ProductValues';
107
import ProductHowItWorks from './modules/views/ProductHowItWorks';
118
import ProductCTA from './modules/views/ProductCTA';
129
import AppAppBar from './modules/views/AppAppBar';
10+
import withRoot from './modules/withRoot';
1311

1412
function Index() {
1513
return (

‎docs/src/pages/premium-themes/onepirate/Home.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import ProductCategories from './modules/views/ProductCategories';
3+
import ProductSmokingHero from './modules/views/ProductSmokingHero';
4+
import AppFooter from './modules/views/AppFooter';
5+
import ProductHero from './modules/views/ProductHero';
6+
import ProductValues from './modules/views/ProductValues';
7+
import ProductHowItWorks from './modules/views/ProductHowItWorks';
8+
import ProductCTA from './modules/views/ProductCTA';
9+
import AppAppBar from './modules/views/AppAppBar';
10+
import withRoot from './modules/withRoot';
11+
12+
function Index() {
13+
return (
14+
<React.Fragment>
15+
<AppAppBar />
16+
<ProductHero />
17+
<ProductValues />
18+
<ProductCategories />
19+
<ProductHowItWorks />
20+
<ProductCTA />
21+
<ProductSmokingHero />
22+
<AppFooter />
23+
</React.Fragment>
24+
);
25+
}
26+
27+
export default withRoot(Index);

‎docs/src/pages/premium-themes/onepirate/Privacy.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
/* eslint-disable import/order */
2-
import withRoot from './modules/withRoot';
3-
// --- Post bootstrap -----
4-
import * as React from 'react';
1+
import React from 'react';
52
import Container from '@material-ui/core/Container';
63
import Box from '@material-ui/core/Box';
74
import Markdown from './modules/components/Markdown';
85
import Typography from './modules/components/Typography';
96
import AppAppBar from './modules/views/AppAppBar';
10-
import privacy from './modules/views/privacy.md';
117
import AppFooter from './modules/views/AppFooter';
8+
import withRoot from './modules/withRoot';
9+
import privacy from './modules/views/privacy.md';
1210

1311
function Privacy() {
1412
return (

‎docs/src/pages/premium-themes/onepirate/Privacy.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import Container from '@material-ui/core/Container';
3+
import Box from '@material-ui/core/Box';
4+
import Markdown from './modules/components/Markdown';
5+
import Typography from './modules/components/Typography';
6+
import AppAppBar from './modules/views/AppAppBar';
7+
import AppFooter from './modules/views/AppFooter';
8+
import withRoot from './modules/withRoot';
9+
import privacy from './modules/views/privacy.md';
10+
11+
function Privacy() {
12+
return (
13+
<React.Fragment>
14+
<AppAppBar />
15+
<Container>
16+
<Box mt={7} mb={12}>
17+
<Typography variant="h3" gutterBottom marked="center" align="center">
18+
Privacy
19+
</Typography>
20+
<Markdown>{privacy}</Markdown>
21+
</Box>
22+
</Container>
23+
<AppFooter />
24+
</React.Fragment>
25+
);
26+
}
27+
28+
export default withRoot(Privacy);

‎docs/src/pages/premium-themes/onepirate/SignIn.js

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
/* eslint-disable import/order */
2-
import withRoot from './modules/withRoot';
3-
// --- Post bootstrap -----
4-
import * as React from 'react';
1+
import React from 'react';
52
import { Field, Form, FormSpy } from 'react-final-form';
63
import { makeStyles } from '@material-ui/core/styles';
74
import Link from '@material-ui/core/Link';
@@ -13,6 +10,7 @@ import { email, required } from './modules/form/validation';
1310
import RFTextField from './modules/form/RFTextField';
1411
import FormButton from './modules/form/FormButton';
1512
import FormFeedback from './modules/form/FormFeedback';
13+
import withRoot from './modules/withRoot';
1614

1715
const useStyles = makeStyles((theme) => ({
1816
form: {
@@ -35,9 +33,9 @@ function SignIn() {
3533
const errors = required(['email', 'password'], values);
3634

3735
if (!errors.email) {
38-
const emailError = email(values.email, values);
36+
const emailError = email(values.email);
3937
if (emailError) {
40-
errors.email = email(values.email, values);
38+
errors.email = email(values.email);
4139
}
4240
}
4341

@@ -72,7 +70,7 @@ function SignIn() {
7270
subscription={{ submitting: true }}
7371
validate={validate}
7472
>
75-
{({ handleSubmit2, submitting }) => (
73+
{({ handleSubmit: handleSubmit2, submitting }) => (
7674
<form onSubmit={handleSubmit2} className={classes.form} noValidate>
7775
<Field
7876
autoComplete="email"

0 commit comments

Comments
 (0)