[docs] Migrate Onepirate to TypeScript

docs/package.json

@@ -36,6 +36,7 @@
     "@types/autosuggest-highlight": "^3.1.0",
     "@types/css-mediaquery": "^0.1.0",
     "@types/json2mq": "^0.2.0",
+    "@types/markdown-to-jsx": "^6.11.1",
     "@types/react-dom": "^16.9.1",
     "@types/react-router-dom": "^5.1.0",
     "@types/react-swipeable-views": "^0.13.0",
@@ -44,6 +45,7 @@
     "@types/react-virtualized": "^9.21.4",
     "@types/react-window": "^1.7.0",
     "@types/styled-components": "5.1.2",
+    "@types/validator": "^13.1.0",
     "accept-language": "^3.0.18",
     "address": "^1.0.3",
     "ast-types": "^0.13.2",
@@ -107,6 +109,7 @@
     "redux-logger": "^3.0.6",
     "rimraf": "^3.0.0",
     "styled-components": "^5.0.0",
+    "validator": "^13.1.1",
     "webfontloader": "^1.6.28",
     "webpack": "^4.41.0",
     "webpack-bundle-analyzer": "^3.5.1"

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

@@ -1,7 +1,4 @@
-/* eslint-disable import/order */
-import withRoot from './modules/withRoot';
-// --- Post bootstrap -----
-import * as React from 'react';
+import React from 'react';
 import { Field, Form, FormSpy } from 'react-final-form';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from './modules/components/Typography';
@@ -12,6 +9,7 @@ import { email, required } from './modules/form/validation';
 import RFTextField from './modules/form/RFTextField';
 import FormButton from './modules/form/FormButton';
 import FormFeedback from './modules/form/FormFeedback';
+import withRoot from './modules/withRoot';
 
 const useStyles = makeStyles((theme) => ({
   form: {
@@ -31,12 +29,12 @@ function ForgotPassword() {
   const [sent, setSent] = React.useState(false);
 
   const validate = (values) => {
-    const errors = required(['email', 'password'], values);
+    const errors = required(['email'], values);
 
     if (!errors.email) {
-      const emailError = email(values.email, values);
+      const emailError = email(values.email);
       if (emailError) {
-        errors.email = email(values.email, values);
+        errors.email = email(values.email);
       }
     }
 
@@ -65,7 +63,7 @@ function ForgotPassword() {
           subscription={{ submitting: true }}
           validate={validate}
         >
-          {({ handleSubmit2, submitting }) => (
+          {({ handleSubmit: handleSubmit2, submitting }) => (
             <form onSubmit={handleSubmit2} className={classes.form} noValidate>
               <Field
                 autoFocus

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Field, Form, FormSpy } from 'react-final-form';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from './modules/components/Typography';
+import AppFooter from './modules/views/AppFooter';
+import AppAppBar from './modules/views/AppAppBar';
+import AppForm from './modules/views/AppForm';
+import { email, required } from './modules/form/validation';
+import RFTextField from './modules/form/RFTextField';
+import FormButton from './modules/form/FormButton';
+import FormFeedback from './modules/form/FormFeedback';
+import withRoot from './modules/withRoot';
+
+const useStyles = makeStyles((theme) => ({
+  form: {
+    marginTop: theme.spacing(6),
+  },
+  button: {
+    marginTop: theme.spacing(3),
+    marginBottom: theme.spacing(2),
+  },
+  feedback: {
+    marginTop: theme.spacing(2),
+  },
+}));
+
+function ForgotPassword() {
+  const classes = useStyles();
+  const [sent, setSent] = React.useState(false);
+
+  const validate = (values: { [index: string]: string }) => {
+    const errors = required(['email'], values);
+
+    if (!errors.email) {
+      const emailError = email(values.email);
+      if (emailError) {
+        errors.email = email(values.email);
+      }
+    }
+
+    return errors;
+  };
+
+  const handleSubmit = () => {
+    setSent(true);
+  };
+
+  return (
+    <React.Fragment>
+      <AppAppBar />
+      <AppForm>
+        <React.Fragment>
+          <Typography variant="h3" gutterBottom marked="center" align="center">
+            Forgot your password?
+          </Typography>
+          <Typography variant="body2" align="center">
+            {"Enter your email address below and we'll " +
+              'send you a link to reset your password.'}
+          </Typography>
+        </React.Fragment>
+        <Form
+          onSubmit={handleSubmit}
+          subscription={{ submitting: true }}
+          validate={validate}
+        >
+          {({ handleSubmit: handleSubmit2, submitting }) => (
+            <form onSubmit={handleSubmit2} className={classes.form} noValidate>
+              <Field
+                autoFocus
+                autoComplete="email"
+                component={RFTextField}
+                disabled={submitting || sent}
+                fullWidth
+                label="Email"
+                margin="normal"
+                name="email"
+                required
+                size="large"
+              />
+              <FormSpy subscription={{ submitError: true }}>
+                {({ submitError }) =>
+                  submitError ? (
+                    <FormFeedback className={classes.feedback} error>
+                      {submitError}
+                    </FormFeedback>
+                  ) : null
+                }
+              </FormSpy>
+              <FormButton
+                className={classes.button}
+                disabled={submitting || sent}
+                size="large"
+                color="secondary"
+                fullWidth
+              >
+                {submitting || sent ? 'In progress…' : 'Send reset link'}
+              </FormButton>
+            </form>
+          )}
+        </Form>
+      </AppForm>
+      <AppFooter />
+    </React.Fragment>
+  );
+}
+
+export default withRoot(ForgotPassword);

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

@@ -1,7 +1,4 @@
-/* eslint-disable import/order */
-import withRoot from './modules/withRoot';
-// --- Post bootstrap -----
-import * as React from 'react';
+import React from 'react';
 import ProductCategories from './modules/views/ProductCategories';
 import ProductSmokingHero from './modules/views/ProductSmokingHero';
 import AppFooter from './modules/views/AppFooter';
@@ -10,6 +7,7 @@ import ProductValues from './modules/views/ProductValues';
 import ProductHowItWorks from './modules/views/ProductHowItWorks';
 import ProductCTA from './modules/views/ProductCTA';
 import AppAppBar from './modules/views/AppAppBar';
+import withRoot from './modules/withRoot';
 
 function Index() {
   return (

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import ProductCategories from './modules/views/ProductCategories';
+import ProductSmokingHero from './modules/views/ProductSmokingHero';
+import AppFooter from './modules/views/AppFooter';
+import ProductHero from './modules/views/ProductHero';
+import ProductValues from './modules/views/ProductValues';
+import ProductHowItWorks from './modules/views/ProductHowItWorks';
+import ProductCTA from './modules/views/ProductCTA';
+import AppAppBar from './modules/views/AppAppBar';
+import withRoot from './modules/withRoot';
+
+function Index() {
+  return (
+    <React.Fragment>
+      <AppAppBar />
+      <ProductHero />
+      <ProductValues />
+      <ProductCategories />
+      <ProductHowItWorks />
+      <ProductCTA />
+      <ProductSmokingHero />
+      <AppFooter />
+    </React.Fragment>
+  );
+}
+
+export default withRoot(Index);

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

@@ -1,14 +1,12 @@
-/* eslint-disable import/order */
-import withRoot from './modules/withRoot';
-// --- Post bootstrap -----
-import * as React from 'react';
+import React from 'react';
 import Container from '@material-ui/core/Container';
 import Box from '@material-ui/core/Box';
 import Markdown from './modules/components/Markdown';
 import Typography from './modules/components/Typography';
 import AppAppBar from './modules/views/AppAppBar';
-import privacy from './modules/views/privacy.md';
 import AppFooter from './modules/views/AppFooter';
+import withRoot from './modules/withRoot';
+import privacy from './modules/views/privacy.md';
 
 function Privacy() {
   return (

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import Container from '@material-ui/core/Container';
+import Box from '@material-ui/core/Box';
+import Markdown from './modules/components/Markdown';
+import Typography from './modules/components/Typography';
+import AppAppBar from './modules/views/AppAppBar';
+import AppFooter from './modules/views/AppFooter';
+import withRoot from './modules/withRoot';
+import privacy from './modules/views/privacy.md';
+
+function Privacy() {
+  return (
+    <React.Fragment>
+      <AppAppBar />
+      <Container>
+        <Box mt={7} mb={12}>
+          <Typography variant="h3" gutterBottom marked="center" align="center">
+            Privacy
+          </Typography>
+          <Markdown>{privacy}</Markdown>
+        </Box>
+      </Container>
+      <AppFooter />
+    </React.Fragment>
+  );
+}
+
+export default withRoot(Privacy);

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

@@ -1,7 +1,4 @@
-/* eslint-disable import/order */
-import withRoot from './modules/withRoot';
-// --- Post bootstrap -----
-import * as React from 'react';
+import React from 'react';
 import { Field, Form, FormSpy } from 'react-final-form';
 import { makeStyles } from '@material-ui/core/styles';
 import Link from '@material-ui/core/Link';
@@ -13,6 +10,7 @@ import { email, required } from './modules/form/validation';
 import RFTextField from './modules/form/RFTextField';
 import FormButton from './modules/form/FormButton';
 import FormFeedback from './modules/form/FormFeedback';
+import withRoot from './modules/withRoot';
 
 const useStyles = makeStyles((theme) => ({
   form: {
@@ -35,9 +33,9 @@ function SignIn() {
     const errors = required(['email', 'password'], values);
 
     if (!errors.email) {
-      const emailError = email(values.email, values);
+      const emailError = email(values.email);
       if (emailError) {
-        errors.email = email(values.email, values);
+        errors.email = email(values.email);
       }
     }
 
@@ -72,7 +70,7 @@ function SignIn() {
           subscription={{ submitting: true }}
           validate={validate}
         >
-          {({ handleSubmit2, submitting }) => (
+          {({ handleSubmit: handleSubmit2, submitting }) => (
             <form onSubmit={handleSubmit2} className={classes.form} noValidate>
               <Field
                 autoComplete="email"