Initial commit

.editorconfig

@@ -0,0 +1,17 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[Makefile]
+indent_style = tab
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,4 @@
+.eslintrc.js
+.huskyrc.js
+.prettierrc.js
+.lintstagedrc.js

.eslintrc.js

@@ -0,0 +1,65 @@
+// https://dev.to/cosmvs/tslint-eslint-cra-typescript-prettier-2h40
+// https://gist.github.com/1natsu172/a65a4b45faed2bd3fa74b24163e4256e
+
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'react-app',
+    'airbnb-typescript',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/typescript',
+    'plugin:jsx-a11y/recommended',
+    'plugin:prettier/recommended',
+    'plugin:react/recommended',
+    'prettier',
+  ],
+  plugins: [
+    '@typescript-eslint',
+    '@typescript-eslint/tslint',
+    'jest',
+    'jsx-a11y',
+    'prettier',
+    'react',
+    'react-hooks',
+    'import',
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    project: './tsconfig.json',
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    tsconfigRootDir: '.',
+  },
+  env: {
+    browser: true,
+    es6: true,
+    jest: true,
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.ts', '.tsx'],
+        moduleDirectory: ['node_modules', 'src'],
+      },
+    },
+  },
+  rules: {
+    'react/prop-types': 'off',
+    'prettier/prettier': 'error',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+    'import/prefer-default-export': 'off',
+    'import/no-default-export': 'error',
+    'import/order': [
+      'error',
+      {
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
+        'newlines-between': 'always',
+      },
+    ],
+  },
+};

.github/auto-merge.yml

@@ -0,0 +1,4 @@
+# Configuration for probot-auto-merge - https://github.com/bobvanderlinden/probot-auto-merge
+
+minApprovals:
+  OWNER: 1

.github/dependabot.yml

@@ -0,0 +1,8 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: '/'
+    schedule:
+      interval: daily
+      time: '02:00'
+    open-pull-requests-limit: 1000

.github/workflows/nodejs.yml

@@ -0,0 +1,17 @@
+name: Node.js CI
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - run: yarn
+      - run: yarn lint:code
+      - run: yarn lint:types

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged

.lintstagedrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  '*.{ts,tsx}': ['eslint --fix', 'prettier --write'],
+  '*.{png,jpeg,jpg,gif,svg}': ['imagemin-lint-staged'],
+  'package.json': ['sort-package-json', 'prettier --write'],
+};

.prettierignore

@@ -0,0 +1 @@
+package-lock.json

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  singleQuote: true,
+  semi: true,
+  printWidth: 120,
+  trailingComma: 'es5',
+  overrides: [{ files: '*.md', options: { poseWrap: 'always' } }],
+};

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Alexander Anpleenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,7 @@
+<h1 align="center">React typescript styled-component template</h1>
+
+<div align="center">
+
+[![Node.js CI](https://github.com/anpleenko/react-typescript-styled-component-template/workflows/Node.js%20CI/badge.svg)](https://github.com/anpleenko/react-typescript-styled-component-template/actions) [![dependabot](https://badgen.net/dependabot/anpleenko/react-typescript-styled-component-template/?icon=dependabot)](https://github.com/anpleenko/react-typescript-styled-component-template)
+
+</div>

package.json

@@ -0,0 +1,66 @@
+{
+  "name": "react-typescript-styled-component-template",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/anpleenko/react-typescript-styled-component-template.git"
+  },
+  "license": "MIT",
+  "main": "src/index.tsx",
+  "scripts": {
+    "build": "react-scripts build",
+    "eject": "react-scripts eject",
+    "lint-staged": "lint-staged",
+    "lint:code": "eslint --ext .tsx,.ts src/",
+    "lint:types": "tsc --noEmit",
+    "prepare": "husky install",
+    "start": "react-scripts start",
+    "test": "react-scripts test --env=jsdom"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "dependencies": {
+    "@openfonts/roboto_cyrillic": "1.44.1",
+    "@testing-library/jest-dom": "5.16.2",
+    "@testing-library/react": "12.1.4",
+    "@testing-library/user-event": "13.5.0",
+    "core-js": "3.21.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "5.0.0",
+    "regenerator-runtime": "0.13.9",
+    "styled-components": "5.3.3",
+    "styled-normalize": "8.0.7"
+  },
+  "devDependencies": {
+    "@types/jest": "27.4.1",
+    "@types/node": "17.0.23",
+    "@types/react": "17.0.42",
+    "@types/react-dom": "17.0.14",
+    "@types/styled-components": "5.1.24",
+    "@typescript-eslint/eslint-plugin": "5.16.0",
+    "@typescript-eslint/eslint-plugin-tslint": "^5.16.0",
+    "@typescript-eslint/parser": "5.16.0",
+    "eslint-config-airbnb-typescript": "16.1.4",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-jest": "26.1.2",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.29.4",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "husky": "7.0.4",
+    "imagemin-lint-staged": "0.4.0",
+    "lint-staged": "12.3.7",
+    "prettier": "2.6.0",
+    "sort-package-json": "1.55.0",
+    "tslint": "^6.1.3",
+    "typescript": "4.6.2"
+  }
+}

public/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Web site created using create-react-app" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+import '@openfonts/roboto_cyrillic';
+import 'core-js';
+import 'regenerator-runtime/runtime';
+
+import { Feature } from './Feature';
+import { GlobalStyle } from './globalStyles';
+
+export const App: FC = () => (
+  <>
+    <GlobalStyle />
+    <Feature />
+  </>
+);

src/Feature/index.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+
+import { FeatureProps } from './interfaces';
+
+export const Feature: FC<FeatureProps> = () => {
+  return <div>FC</div>;
+};

src/Feature/interfaces.ts

@@ -0,0 +1 @@
+export interface FeatureProps {}

src/globalStyles.ts

@@ -0,0 +1,10 @@
+import { createGlobalStyle } from 'styled-components';
+import { normalize } from 'styled-normalize';
+
+export const GlobalStyle = createGlobalStyle`
+  ${normalize}
+
+  html, body {
+    font-family: Roboto, sans-serif;
+  }
+`;

src/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { App } from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster,  y ou can change
+// unregister() to register() below. Note this comes with some  pi tf alls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();

src/react-app-env.d.ts

@@ -0,0 +1,3 @@
+/* eslint-disable spaced-comment */
+
+/// <reference types="react-scripts" />