[docs] Transpile demo .ts files (#22388)

Co-authored-by: Olivier Tassinari <[email protected]>

Author: eps1lon

docs/package.json

@@ -45,7 +45,6 @@
     "@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.14.1",
@@ -109,7 +108,6 @@
     "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/scripts/formattedTSDemos.js

@@ -43,7 +43,8 @@ async function getFiles(root) {
         files.push(...(await getFiles(filePath)));
       } else if (
         stat.isFile() &&
-        filePath.endsWith('.tsx') &&
+        /\.tsx?$/.test(filePath) &&
+        !filePath.endsWith('.d.ts') &&
         !ignoreList.some((ignorePath) => filePath.endsWith(path.normalize(ignorePath)))
       ) {
         files.push(filePath);
@@ -61,7 +62,7 @@ const TranspileResult = {
 };
 
 async function transpileFile(tsxPath, program, ignoreCache = false) {
-  const jsPath = tsxPath.replace('.tsx', '.js');
+  const jsPath = tsxPath.replace(/\.tsx?$/, '.js');
   try {
     if (!ignoreCache && (await fse.exists(jsPath))) {
       const [jsStat, tsxStat] = await Promise.all([fse.stat(jsPath), fse.stat(tsxPath)]);

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

@@ -34,7 +34,7 @@ function ForgotPassword() {
     if (!errors.email) {
       const emailError = email(values.email);
       if (emailError) {
-        errors.email = email(values.email);
+        errors.email = emailError;
       }
     }
 

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

@@ -34,7 +34,7 @@ function ForgotPassword() {
     if (!errors.email) {
       const emailError = email(values.email);
       if (emailError) {
-        errors.email = email(values.email);
+        errors.email = emailError;
       }
     }
 

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

@@ -35,7 +35,7 @@ function SignIn() {
     if (!errors.email) {
       const emailError = email(values.email);
       if (emailError) {
-        errors.email = email(values.email);
+        errors.email = emailError;
       }
     }
 

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

@@ -35,7 +35,7 @@ function SignIn() {
     if (!errors.email) {
       const emailError = email(values.email);
       if (emailError) {
-        errors.email = email(values.email);
+        errors.email = emailError;
       }
     }
 

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

@@ -39,7 +39,7 @@ function SignUp() {
     if (!errors.email) {
       const emailError = email(values.email);
       if (emailError) {
-        errors.email = email(values.email);
+        errors.email = emailError;
       }
     }
 

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

@@ -39,7 +39,7 @@ function SignUp() {
     if (!errors.email) {
       const emailError = email(values.email);
       if (emailError) {
-        errors.email = email(values.email);
+        errors.email = emailError;
       }
     }
 

docs/src/pages/premium-themes/onepirate/modules/components/AppBar.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import MuiAppBar from '@material-ui/core/AppBar';
 

docs/src/pages/premium-themes/onepirate/modules/components/AppBar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { withStyles, Theme, WithStyles } from '@material-ui/core/styles';
 import MuiAppBar, { AppBarProps } from '@material-ui/core/AppBar';
 

docs/src/pages/premium-themes/onepirate/modules/components/Button.js

@@ -1,6 +1,6 @@
 import { withStyles } from '@material-ui/core/styles';
 import MuiButton from '@material-ui/core/Button';
-import React from 'react';
+import * as React from 'react';
 
 const styles = (theme) => ({
   root: {

docs/src/pages/premium-themes/onepirate/modules/components/Button.tsx

@@ -5,7 +5,7 @@ import {
   createStyles,
 } from '@material-ui/core/styles';
 import MuiButton, { ButtonProps } from '@material-ui/core/Button';
-import React from 'react';
+import * as React from 'react';
 
 const styles = (theme: Theme) =>
   createStyles({

docs/src/pages/premium-themes/onepirate/modules/components/Markdown.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import ReactMarkdown from 'markdown-to-jsx';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';

docs/src/pages/premium-themes/onepirate/modules/components/Markdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import ReactMarkdown from 'markdown-to-jsx';
 import {
   Theme,

docs/src/pages/premium-themes/onepirate/modules/components/Paper.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import MuiPaper from '@material-ui/core/Paper';

docs/src/pages/premium-themes/onepirate/modules/components/Paper.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import clsx from 'clsx';
 import MuiPaper, { PaperProps } from '@material-ui/core/Paper';
 import { withStyles, Theme, WithStyles } from '@material-ui/core/styles';

docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import MuiSnackbar from '@material-ui/core/Snackbar';

docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {
   withStyles,
   WithStyles,

docs/src/pages/premium-themes/onepirate/modules/components/TextField.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
@@ -81,14 +81,9 @@ function TextField(props) {
     ...InputPropsOther
   } = InputProps;
 
-  const disableUnderline = {
-    disableUnderline: true,
-  };
-
   return (
     <MuiTextField
       InputProps={{
-        ...disableUnderline,
         classes: {
           root: classes.root,
           input: clsx(
@@ -102,6 +97,7 @@ function TextField(props) {
           disabled: classes.disabled,
           ...InputPropsClassesOther,
         },
+        disableUnderline: true,
         ...InputPropsOther,
       }}
       InputLabelProps={{

docs/src/pages/premium-themes/onepirate/modules/components/TextField.tsx

@@ -1,7 +1,10 @@
-import React from 'react';
+import * as React from 'react';
 import clsx from 'clsx';
 import { withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
-import MuiTextField, { TextFieldProps } from '@material-ui/core/TextField';
+import MuiTextField, {
+  FilledTextFieldProps,
+  StandardTextFieldProps,
+} from '@material-ui/core/TextField';
 
 const inputSyleMapping = {
   small: 'inputSizeSmall',
@@ -65,7 +68,8 @@ const styles = (theme: any) =>
     },
   });
 
-export interface OnePirateTextFieldProps extends Omit<TextFieldProps, 'size'> {
+export interface OnePirateTextFieldProps
+  extends Omit<FilledTextFieldProps | StandardTextFieldProps, 'size'> {
   noBorder?: boolean;
   size?: 'small' | 'medium' | 'large' | 'xlarge';
 }
@@ -86,14 +90,9 @@ function TextField(props: OnePirateTextFieldProps & WithStyles<typeof styles>) {
     ...InputPropsOther
   } = InputProps;
 
-  const disableUnderline = {
-    disableUnderline: true,
-  };
-
   return (
     <MuiTextField
       InputProps={{
-        ...disableUnderline,
         classes: {
           root: classes.root,
           input: clsx(
@@ -107,6 +106,7 @@ function TextField(props: OnePirateTextFieldProps & WithStyles<typeof styles>) {
           disabled: classes.disabled,
           ...InputPropsClassesOther,
         },
+        disableUnderline: true,
         ...InputPropsOther,
       }}
       InputLabelProps={{

docs/src/pages/premium-themes/onepirate/modules/components/Typography.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import MuiTypography from '@material-ui/core/Typography';

docs/src/pages/premium-themes/onepirate/modules/components/Typography.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {
   withStyles,
   WithStyles,

docs/src/pages/premium-themes/onepirate/modules/form/validation.ts

@@ -1,17 +1,21 @@
-import validator from 'validator';
+// Simplified method of validator/lib/isEmail
+function isEmail(string: string) {
+  const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return re.test(string);
+}
 
 export function email(value: string) {
-  return value && !validator.isEmail(value.trim()) ? 'Invalid email' : null;
+  return value && !isEmail(value.trim()) ? 'Invalid email' : null;
 }
 
-function isDirty(value: string) {
-  return value;
+function isDirty(value: string | number) {
+  return value || value === 0;
 }
 
 export function required(
   requiredFields: string[],
-  values: { [index: string]: string },
-): { [index: string]: string | null } {
+  values: Record<string, string>,
+): Record<string, string> {
   return requiredFields.reduce(
     (fields, field) => ({
       ...fields,

docs/src/pages/premium-themes/onepirate/modules/theme.js

@@ -18,12 +18,12 @@ const rawTheme = createMuiTheme({
       dark: '#ffb25e',
     },
     error: {
-      xLight: red[50],
+      light: red[50],
       main: red[500],
       dark: red[700],
     },
     success: {
-      xLight: green[50],
+      light: green[50],
       main: green[500],
       dark: green[700],
     },
@@ -34,14 +34,13 @@ const rawTheme = createMuiTheme({
     fontWeightLight: 300, // Work Sans
     fontWeightRegular: 400, // Work Sans
     fontWeightMedium: 700, // Roboto Condensed
-    fontFamilySecondary: "'Roboto Condensed', sans-serif",
   },
 });
 
 const fontHeader = {
   color: rawTheme.palette.text.primary,
   fontWeight: rawTheme.typography.fontWeightMedium,
-  fontFamily: rawTheme.typography.fontFamilySecondary,
+  fontFamily: "'Roboto Condensed', sans-serif",
   textTransform: 'uppercase',
 };
 

yarn.lock

@@ -2917,11 +2917,6 @@
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.0.tgz#215c231dff736d5ba92410e6d602050cce7e273f"
   integrity sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ==
 
-"@types/validator@^13.1.0":
-  version "13.1.0"
-  resolved "https://registry.yarnpkg.com/@types/validator/-/validator-13.1.0.tgz#3d776127dbce7dd31fc06f86d3428b072e631eba"
-  integrity sha512-gHUHI6pJaANIO2r6WcbT7+WMgbL9GZooR4tWpuBOETpDIqFNxwaJluE+6rj6VGYe8k6OkfhbHz2Fkm8kl06Igw==
-
 "@types/yargs-parser@*":
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
@@ -16493,11 +16488,6 @@ validate-npm-package-name@^3.0.0:
   dependencies:
     builtins "^1.0.3"
 
-validator@^13.1.1:
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/validator/-/validator-13.1.1.tgz#f8811368473d2173a9d8611572b58c5783f223bf"
-  integrity sha512-8GfPiwzzRoWTg7OV1zva1KvrSemuMkv07MA9TTl91hfhe+wKrsrgVN4H2QSFd/U/FhiU3iWPYVgvbsOGwhyFWw==
-
 value-equal@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"