ElyBy-Mirror/emails-renderer
1
0
Fork 0
mirror of https://github.com/elyby/emails-renderer.git synced 2024-12-21 20:59:44 +05:30
Code Issues Packages Projects Releases Wiki Activity

Upgrade eslint configuration and apply some rules on code

Browse Source
This commit is contained in:
ErickSkrauch 2019-05-15 18:56:13 +03:00
parent 77af422c03
commit 5547fd446b
21 changed files with 678 additions and 872 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
.eslintrc.json → .eslintrc.js
View File

@ -1,35 +1,35 @@
{
"parser": "babel-eslint",
"plugins": [
"react"
],
"ecmaFeatures": {
"jsx": true,
"modules": true,
"classes": true,
"defaultParams": true,
"destructuring": true,
"spread": true,
"arrowFunctions": true,
"blockBindings": true,
"objectLiteralComputedProperties": true,
"objectLiteralDuplicateProperties": true,
"objectLiteralShorthandMethods": true,
"objectLiteralShorthandProperties": true,
"restParams": true,
"superInFunctions": true,
"templateStrings": true,
"experimentalObjectRestSpread": true
module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
sourceType: 'module',
ecmaVersion: 2018,
ecmaFeatures: {
jsx: true,
},
project: './tsconfig.json',
},
"env": {
settings: {
react: {
version: 'detect',
},
},
env: {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
plugins: [
'@typescript-eslint',
],
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
],
// @see: http://eslint.org/docs/rules/
"rules": {
@ -114,7 +114,7 @@
"no-path-concat": "warn",
// stylistic
"array-bracket-spacing": "error",
"array-bracket-spacing": "off", // disable because we want spaces on destructured arrays
"block-spacing": ["error", "never"],
"brace-style": ["error", "1tbs", {"allowSingleLine": true}],
"comma-spacing": "error",
@ -180,13 +180,18 @@
"react/display-name": "warn",
"react/forbid-prop-types": "warn",
"react/jsx-boolean-value": "warn",
"react/jsx-closing-bracket-location": "warn",
'react/jsx-closing-bracket-location': ['warn', {
nonEmpty: 'line-aligned',
selfClosing: 'after-props',
}],
"react/jsx-curly-spacing": "warn",
"react/jsx-handler-names": ["warn", {"eventHandlerPrefix": "on", "eventHandlerPropPrefix": "on"}],
"react/jsx-indent-props": "warn",
"react/jsx-key": "warn",
"react/jsx-max-props-per-line": ["warn", {"maximum": 3}],
"react/jsx-no-bind": "warn",
'react/jsx-max-props-per-line': 'off',
"react/jsx-no-bind": ['error', {
allowArrowFunctions: true,
}],
"react/jsx-no-duplicate-props": "warn",
"react/jsx-no-literals": "off",
"react/jsx-no-undef": "warn",
@ -205,9 +210,14 @@
"react/no-string-refs": "warn",
"react/no-unknown-property": "warn",
"react/prefer-es6-class": "warn",
"react/prop-types": "warn",
"react/prop-types": "off", // disable in favor of typescript
"react/react-in-jsx-scope": "off",
"react/self-closing-comp": "warn",
"react/sort-comp": ["warn", {"order": ["lifecycle", "render", "everything-else"]}]
}
}
"react/sort-comp": ["warn", {"order": ["lifecycle", "render", "everything-else"]}],
// TypeScript
'@typescript-eslint/array-type': ['error', 'generic'],
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
},
};

9
package.json
View File

@ -16,7 +16,7 @@
"homepage": "https://gitlab.com/elyby/email-renderer#README",
"scripts": {
"start": "webpack-dev-server --mode=development --progress --colors",
"lint": "eslint ./src",
"lint": "eslint",
"i18n:collect": "./scripts/i18n-collect/index.js",
"i18n:pull": "node scripts/i18n-crowdin/index.js pull",
"i18n:push": "node scripts/i18n-crowdin/index.js push",
@ -37,11 +37,12 @@
"@types/react": "^16.8.17",
"@types/react-intl": "^2.3.17",
"@types/webpack-env": "^1.13.9",
"babel-eslint": "^6.0.0",
"@typescript-eslint/eslint-plugin": "^1.9.0",
"@typescript-eslint/parser": "^1.9.0",
"babel-loader": "^8.0.5",
"babel-preset-react-hot": "^1.0.5",
"eslint": "^3.1.1",
"eslint-plugin-react": "^6.0.0",
"eslint": "^5.16.0",
"eslint-plugin-react": "^7.13.0",
"extended-translations-loader": "file:webpack-utils/extended-translations-loader",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",

2
src/App.tsx
View File

@ -1,3 +1,5 @@
/* eslint-disable @typescript-eslint/no-var-requires */
import React, { FunctionComponent } from 'react';
import { IntlProvider, addLocaleData } from 'react-intl';

32
src/components/BaseLayout.tsx
View File

@ -4,22 +4,20 @@ import styles from './styles';
import { Table } from 'components/table';
const BaseLayout: FunctionComponent = ({ children }) => {
return (
<Table style={styles.body}>
<tr>
<td>
&nbsp;
</td>
<td style={styles.container}>
{children}
</td>
<td>
&nbsp;
</td>
</tr>
</Table>
);
};
const BaseLayout: FunctionComponent = ({ children }) => (
<Table style={styles.body}>
<tr>
<td>
&nbsp;
</td>
<td style={styles.container}>
{children}
</td>
<td>
&nbsp;
</td>
</tr>
</Table>
);
export default BaseLayout;

26
src/components/Html.tsx
View File

@ -1,19 +1,15 @@
import React, { FunctionComponent } from 'react';
const Html: FunctionComponent = ({ children }) => {
return (
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body style={{
margin: 0
}}>
{children}
</body>
</html>
);
};
const Html: FunctionComponent = ({ children }) => (
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body style={{ margin: 0 }}>
{children}
</body>
</html>
);
export default Html;

36
src/components/blocks/code/Code.tsx
View File

@ -15,25 +15,23 @@ interface Props {
color?: Colors;
}
const Code: FunctionComponent<Props> = ({ code, link, label, color = 'green' }) => {
return (
<div style={styles.codeWrapper}>
<div>
<a href={link}>
<Button style={styles.confirmEmailButton} color={color} label={label} />
</a>
</div>
<div style={styles.or}>
<Message {...messages.or} />
</div>
<div style={styles.codeLabel}>
<Message {...messages.pass_code_in_field} />
</div>
<div style={styles.code}>
<Input value={code} color={color} />
</div>
const Code: FunctionComponent<Props> = ({ code, link, label, color = 'green' }) => (
<div style={styles.codeWrapper}>
<div>
<a href={link}>
<Button style={styles.confirmEmailButton} color={color} label={label} />
</a>
</div>
);
};
<div style={styles.or}>
<Message {...messages.or} />
</div>
<div style={styles.codeLabel}>
<Message {...messages.pass_code_in_field} />
</div>
<div style={styles.code}>
<Input value={code} color={color} />
</div>
</div>
);
export default Code;

12
src/components/layout/content/Content.tsx
View File

@ -2,12 +2,10 @@ import React, { FunctionComponent } from 'react';
import styles from './styles';
const Content: FunctionComponent = ({ children }) => {
return (
<div style={styles.content}>
{children}
</div>
);
};
const Content: FunctionComponent = ({ children }) => (
<div style={styles.content}>
{children}
</div>
);
export default Content;

26
src/components/layout/header/Header.tsx
View File

@ -11,20 +11,18 @@ interface Props {
title: ReactElement;
}
const Userbar: FunctionComponent<Props> = ({ username, title }) => {
return (
<Table style={styles.headerImage}>
<tr>
<td style={styles.headerTextContainer}>
<div style={styles.welcomeUsername}>
<Message {...messages.hello_username} values={{username}} />
</div>
const Userbar: FunctionComponent<Props> = ({ username, title }) => (
<Table style={styles.headerImage}>
<tr>
<td style={styles.headerTextContainer}>
<div style={styles.welcomeUsername}>
<Message {...messages.hello_username} values={{username}} />
</div>
{title}
</td>
</tr>
</Table>
);
};
{title}
</td>
</tr>
</Table>
);
export default Userbar;

28
src/components/layout/userbar/Userbar.tsx
View File

@ -5,20 +5,18 @@ import { Table } from 'components/table';
import styles from './styles';
import logoImage from './logo.png';
const Userbar: FunctionComponent = () => {
return (
<Table style={styles.userbar}>
<tr>
<td style={styles.marginColumn} />
<td style={styles.logoColumn}>
<a href="http://ely.by" style={styles.logo}>
<img src={logoImage} alt="Ely.by" style={styles.logoImage} />
</a>
</td>
<td>&nbsp;</td>
</tr>
</Table>
);
};
const Userbar: FunctionComponent = () => (
<Table style={styles.userbar}>
<tr>
<td style={styles.marginColumn} />
<td style={styles.logoColumn}>
<a href="http://ely.by" style={styles.logo}>
<img src={logoImage} alt="Ely.by" style={styles.logoImage} />
</a>
</td>
<td>&nbsp;</td>
</tr>
</Table>
);
export default Userbar;

22
src/components/table/Table.tsx
View File

@ -6,17 +6,15 @@ interface Props {
style?: CSSProperties;
}
const Table: FunctionComponent<Props> = ({ children, style }) => {
return (
<table cellPadding="0" cellSpacing="0" style={{
...styles.table,
...style
}}>
<tbody>
{children}
</tbody>
</table>
);
};
const Table: FunctionComponent<Props> = ({ children, style }) => (
<table cellPadding="0" cellSpacing="0" style={{
...styles.table,
...style
}}>
<tbody>
{children}
</tbody>
</table>
);
export default Table;

23
src/components/ui/button/Button.tsx
View File

@ -1,6 +1,6 @@
import React, { CSSProperties, FunctionComponent, ReactElement } from 'react';
import { Colors, green } from 'components/ui/colors';
import { Colors } from 'components/ui/colors';
import styles from './styles';
@ -10,17 +10,14 @@ interface Props {
color?: Colors;
}
const Button: FunctionComponent<Props> = ({ label, style, color = 'green' }) => {
return (
<div style={{
...styles.button,
...styles[color],
...style,
}}>
{label}
</div>
);
};
const Button: FunctionComponent<Props> = ({ label, style, color = 'green' }) => (
<div style={{
...styles.button,
...styles[color],
...style,
}}>
{label}
</div>
);
export default Button;

2
src/components/ui/button/styles.ts
View File

@ -7,7 +7,7 @@ function generateColor({ base }: Color): CSSProperties {
};
}
type Styles = {
interface Styles {
[key: string]: CSSProperties;
}

20
src/components/ui/input/Input.tsx
View File

@ -10,16 +10,14 @@ interface Props {
style?: CSSProperties;
}
const Input: FunctionComponent<Props> = ({ value, style, color = 'green' }) => {
return (
<div style={{
...styles.input,
...styles[color],
...style
}}>
{value}
</div>
);
};
const Input: FunctionComponent<Props> = ({ value, style, color = 'green' }) => (
<div style={{
...styles.input,
...styles[color],
...style,
}}>
{value}
</div>
);
export default Input;

44
src/devTools/List.tsx
View File

@ -7,28 +7,26 @@ interface Props {
onChange: (item: string) => any;
}
const List: FunctionComponent<Props> = ({ label, items, active, onChange = () => {} }) => {
return (
<div>
{label}:
{items.map((item) =>
<a
href="#"
key={item}
onClick={(event) => {
event.preventDefault();
onChange(item);
}}
style={{
padding: '0 5px',
color: active === item ? 'red' : '',
}}
>
{item}
</a>
)}
</div>
);
};
const List: FunctionComponent<Props> = ({ label, items, active, onChange = () => {} }) => (
<div>
{label}:
{items.map((item) => (
<a
href="#"
key={item}
onClick={(event) => {
event.preventDefault();
onChange(item);
}}
style={{
padding: '0 5px',
color: active === item ? 'red' : '',
}}
>
{item}
</a>
))}
</div>
);
export default List;

56
src/emails/forgotPassword/ForgotPassword.tsx
View File

@ -14,37 +14,35 @@ interface Props {
code: string;
}
const ForgotPassword: FunctionComponent<Props> = ({ username, link, code }) => {
return (
<div>
<Userbar />
const ForgotPassword: FunctionComponent<Props> = ({ username, link, code }) => (
<div>
<Userbar />
<Header username={username} title={
<HTMLMessage {...messages.forgot_the_password_image}/>
} />
<Header username={username} title={
<HTMLMessage {...messages.forgot_the_password_image}/>
} />
<Content>
<Table>
<tr>
<td>
<div style={styles.paragraph}>
<Message {...messages.shit_happens} />
</div>
</td>
</tr>
<tr>
<td>
<Code code={code} link={link} color="lightViolet" label={
<HTMLMessage {...messages.continue_image} />
} />
</td>
</tr>
</Table>
</Content>
<Content>
<Table>
<tr>
<td>
<div style={styles.paragraph}>
<Message {...messages.shit_happens} />
</div>
</td>
</tr>
<tr>
<td>
<Code code={code} link={link} color="lightViolet" label={
<HTMLMessage {...messages.continue_image} />
} />
</td>
</tr>
</Table>
</Content>
<Footer />
</div>
);
};
<Footer />
</div>
);
export default ForgotPassword;

192
src/emails/register/Register.tsx
View File

@ -18,105 +18,103 @@ interface Props {
code: string;
}
const Register: FunctionComponent<Props> = ({ username, link, code }) => {
return (
<div>
<Userbar />
const Register: FunctionComponent<Props> = ({ username, link, code }) => (
<div>
<Userbar />
<Header username={username} title={
<HTMLMessage {...messages.welcome_image} />
} />
<Header username={username} title={
<HTMLMessage {...messages.welcome_image} />
} />
<Content>
<Table>
<tr>
<td>
<div style={styles.paragraph}>
<Message {...messages.we_glad_to_see_you} />
</div>
</td>
</tr>
<tr>
<td>
<Code code={code} link={link} color="blue" label={
<HTMLMessage {...messages.confirm_email_image} />
} />
</td>
</tr>
<tr>
<td style={{
...styles.contentCenterCell,
...styles.whatsNextText,
}}>
<HTMLMessage {...messages.whats_next_image} />
</td>
</tr>
<tr>
<td style={styles.todoItem}>
<Table>
<tr>
<td style={styles.todoItemIcon}>
<img src={violetManImage} style={styles.todoItemIconImage} />
</td>
<td style={styles.todoItemContent}>
<HTMLMessage {...messages.choose_you_skin_image} />
<div style={{
...styles.paragraph,
...styles.todoItemText
}}>
<Message {...messages.choose_you_skin_text} />
</div>
</td>
</tr>
</Table>
</td>
</tr>
<tr>
<td style={styles.todoItem}>
<Table>
<tr>
<td style={styles.todoItemIcon}>
<img src={orangeManImage} style={styles.todoItemIconImage} />
</td>
<td style={styles.todoItemContent}>
<HTMLMessage {...messages.install_our_patch_image} />
<div style={{
...styles.paragraph,
...styles.todoItemText
}}>
<Message {...messages.install_our_patch_text} />
</div>
</td>
</tr>
</Table>
</td>
</tr>
<tr>
<td style={styles.todoItem}>
<Table>
<tr>
<td style={styles.todoItemIcon}>
<img src={darkBlueManImage} style={styles.todoItemIconImage} />
</td>
<td style={styles.todoItemContent}>
<HTMLMessage {...messages.useTLLauncher} />
<div style={{
...styles.paragraph,
...styles.todoItemText
}}>
<Message {...messages.useTLLauncherText} />
</div>
</td>
</tr>
</Table>
</td>
</tr>
</Table>
</Content>
<Content>
<Table>
<tr>
<td>
<div style={styles.paragraph}>
<Message {...messages.we_glad_to_see_you} />
</div>
</td>
</tr>
<tr>
<td>
<Code code={code} link={link} color="blue" label={
<HTMLMessage {...messages.confirm_email_image} />
} />
</td>
</tr>
<tr>
<td style={{
...styles.contentCenterCell,
...styles.whatsNextText,
}}>
<HTMLMessage {...messages.whats_next_image} />
</td>
</tr>
<tr>
<td style={styles.todoItem}>
<Table>
<tr>
<td style={styles.todoItemIcon}>
<img src={violetManImage} style={styles.todoItemIconImage} />
</td>
<td style={styles.todoItemContent}>
<HTMLMessage {...messages.choose_you_skin_image} />
<div style={{
...styles.paragraph,
...styles.todoItemText
}}>
<Message {...messages.choose_you_skin_text} />
</div>
</td>
</tr>
</Table>
</td>
</tr>
<tr>
<td style={styles.todoItem}>
<Table>
<tr>
<td style={styles.todoItemIcon}>
<img src={orangeManImage} style={styles.todoItemIconImage} />
</td>
<td style={styles.todoItemContent}>
<HTMLMessage {...messages.install_our_patch_image} />
<div style={{
...styles.paragraph,
...styles.todoItemText
}}>
<Message {...messages.install_our_patch_text} />
</div>
</td>
</tr>
</Table>
</td>
</tr>
<tr>
<td style={styles.todoItem}>
<Table>
<tr>
<td style={styles.todoItemIcon}>
<img src={darkBlueManImage} style={styles.todoItemIconImage} />
</td>
<td style={styles.todoItemContent}>
<HTMLMessage {...messages.useTLLauncher} />
<div style={{
...styles.paragraph,
...styles.todoItemText
}}>
<Message {...messages.useTLLauncherText} />
</div>
</td>
</tr>
</Table>
</td>
</tr>
</Table>
</Content>
<Footer />
</div>
);
};
<Footer />
</div>
);
export default Register;

2
src/i18n/module.d.ts vendored
View File

@ -6,7 +6,7 @@ declare module 'i18n/index.json' {
englishName: string;
progress: number;
isReleased: boolean;
},
};
};
export default content;
}

2
src/index.tsx
View File

@ -1,3 +1,5 @@
/* eslint-disable @typescript-eslint/no-var-requires */
// NOTE: we are requiring with require(), to enable dynamic dependencies
// depending on ENV, where App is running in.
// This allows us better support of hmr and reduces bundle size

4
src/typings/file-loader.d.ts vendored
View File

@ -1,9 +1,9 @@
declare module "*.png" {
declare module '*.png' {
const content: string;
export default content;
}
declare module "*.jpg" {
declare module '*.jpg' {
const content: string;
export default content;
}

2
src/typings/json-loader.d.ts vendored
View File

@ -3,7 +3,7 @@ declare module '*.intl.json' {
[key: string]: {
id: string;
defaultMessage: string;
},
};
};
export default content;
}

934
yarn.lock
View File

File diff suppressed because it is too large Load Diff