feat: setup next, eslint, stylelint, and typescript (#5)

* feat: setup next, eslint, stylelint, and typescript

* ci: add Semantic Pull Requests config

* ci: add renovate config

* ci: add commit lint workflow

* ci: add code lint workflow

* ci: add release workflow

* docs(ci): add status badges for release, lint, and commitlint

* ci: add now config

* chore: update repo name

* ci(release): remove assets from release

.eslintrc.json

@@ -0,0 +1,33 @@
+{
+	"parser": "@typescript-eslint/parser",
+	"extends": [
+		"react-app",
+		"prettier",
+		"prettier/react",
+		"prettier/@typescript-eslint",
+		"plugin:react/recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:@typescript-eslint/recommended-requiring-type-checking"
+	],
+	"plugins": ["@typescript-eslint", "react", "react-hooks", "prettier"],
+	"parserOptions": {
+		"project": "./tsconfig.json"
+	},
+	"rules": {
+		"prettier/prettier": "error",
+		"react/prop-types": "off",
+		"no-param-reassign": "off",
+		"react/jsx-filename-extension": [1, { "extensions": [".js", ".ts", "tsx"] }],
+		"@typescript-eslint/explicit-function-return-type": "off",
+		"@typescript-eslint/explicit-member-accessibility": "off",
+		"@typescript-eslint/member-delimiter-style": "off"
+	},
+	"overrides": [
+		{
+			"files": ["**/*.config.js"],
+			"rules": {
+				"@typescript-eslint/no-var-requires": "off"
+			}
+		}
+	]
+}

.github/renovate.json

@@ -0,0 +1,7 @@
+{
+	"extends": ["config:base"],
+	"semanticCommits": true,
+	"stabilityDays": 3,
+	"prCreation": "not-pending",
+	"labels": ["Type: Chore"]
+}

.github/semantic.yml

@@ -0,0 +1,2 @@
+# Always validate the PR title, and ignore the commits
+titleOnly: true

.github/workflows/commitlint.yml

@@ -0,0 +1,16 @@
+name: Commitlint
+
+on: pull_request
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Lint commit messages
+        uses: wagoid/commitlint-github-action@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/lint.yml

@@ -0,0 +1,18 @@
+name: Lint
+
+on: pull_request
+
+jobs:
+  code:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Use Node.js 12
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile &> /dev/null
+      - name: Lint
+        run: yarn lint

.github/workflows/release.yml

@@ -0,0 +1,25 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Use Node.js 12
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile &> /dev/null
+      - name: Build static assets
+        run: yarn build
+      - name: Semantic Release
+        uses: cycjimmy/semantic-release-action@v2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

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

.huskyrc.json

@@ -0,0 +1,7 @@
+{
+  "hooks": {
+    "pre-commit": "lint-staged",
+    "pre-push": "npm run lint",
+    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+  }
+}

.npmrc

@@ -0,0 +1,2 @@
+save=true
+save-exact=true

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "useTabs": true,
+	"printWidth": 120,
+	"singleQuote": true,
+	"trailingComma": "es5",
+	"jsxBracketSameLine": true,
+	"semi": false
+}

.stylelintrc.json

@@ -0,0 +1,7 @@
+{
+	"extends": ["stylelint-config-recess-order", "stylelint-config-standard", "stylelint-config-prettier"],
+	"plugins": ["stylelint-prettier"],
+	"rules": {
+		"prettier/prettier": true
+	}
+}

.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+  "editor.formatOnSave": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "eslint.run": "onType",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.fixAll.stylelint": true
+  },
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Rui Saraiva
+
+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

@@ -1,7 +1,11 @@
-# favicon-tool
+# favycon
 
 Favicon generator tool
 
+![Release](https://github.com/ruisaraiva19/favycon/workflows/Release/badge.svg)
+![Lint](https://github.com/ruisaraiva19/favycon/workflows/Lint/badge.svg)
+![Commitlint](https://github.com/ruisaraiva19/favycon/workflows/Commitlint/badge.svg)
+
 ## Browser favicon formats supported
 
 |     | IE  | Edge | Firefox | Chrome | Safari | iOS Safari | Chrome Android |
@@ -54,3 +58,17 @@ Favicon generator tool
 <meta name="msapplication-TileColor" content="#ffffff">
 <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
 ```
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

commitlint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+	extends: ['@commitlint/config-conventional'],
+}

lint-staged.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+	'*.{ts,tsx}': () => 'tsc -p tsconfig.json --noEmit',
+	'*.tsx': ['eslint --fix', 'stylelint --fix'],
+	'*.{js,ts}': ['eslint --fix'],
+	'*.json': ['prettier --write'],
+	'*.{css,scss}': ['stylelint --fix'],
+}

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

@@ -0,0 +1,49 @@
+const path = require('path')
+require('dotenv').config()
+
+const isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+	experimental: {
+		modern: true,
+		polyfillsOptimization: true,
+	},
+
+	webpack(config, { dev, isServer }) {
+		const splitChunks = config.optimization && config.optimization.splitChunks
+		if (splitChunks) {
+			const { cacheGroups } = splitChunks
+			const preactModules = /[\\/]node_modules[\\/](preact|preact-render-to-string|preact-context-provider)[\\/]/
+			if (cacheGroups.framework) {
+				cacheGroups.preact = { ...cacheGroups.framework, test: preactModules }
+				cacheGroups.commons.name = 'framework'
+			} else {
+				cacheGroups.preact = {
+					name: 'commons',
+					chunks: 'all',
+					test: preactModules,
+				}
+			}
+		}
+
+		config.resolve.alias['components'] = path.join(__dirname, 'components')
+		config.resolve.alias['hooks'] = path.join(__dirname, 'hooks')
+		config.resolve.alias['react'] = 'preact/compat'
+		config.resolve.alias['react-dom'] = 'preact/compat'
+		config.resolve.alias['react-ssr-prepass'] = 'preact-ssr-prepass'
+
+		// inject Preact DevTools
+		if (dev && !isServer) {
+			const { entry } = config
+			config.entry = () =>
+				entry().then((entries) => {
+					entries['main.js'] = ['preact/debug'].concat(entries['main.js'] || [])
+					return entries
+				})
+		}
+
+		return config
+	},
+
+	poweredByHeader: !isProduction,
+}

now.json

@@ -0,0 +1,6 @@
+{
+	"version": 2,
+	"github": {
+		"silent": true
+	}
+}

package.json

@@ -0,0 +1,85 @@
+{
+	"name": "favycon",
+	"version": "1.0.0",
+	"description": "Favicon generator tool",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/ruisaraiva19/favycon.git"
+	},
+	"keywords": [
+		"favicon",
+		"generator",
+		"tool"
+	],
+	"author": {
+		"name": "Rui Saraiva",
+		"email": "ruisaraiva19@gmail.com",
+		"url": "https://ruisaraiva.com/"
+	},
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/ruisaraiva19/favycon/issues"
+	},
+	"homepage": "https://github.com/ruisaraiva19/favycon#readme",
+	"engines": {
+		"node": ">= 12.x",
+		"yarn": "^1.16.0"
+	},
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "npm-run-all --parallel lint:*",
+		"lint:types": "tsc",
+		"lint:scripts": "eslint './**/*.tsx' './**/*.ts' './**/*.js'",
+		"lint:css": "stylelint './**/*.css' './**/*.scss'",
+		"commit": "git-cz"
+	},
+	"dependencies": {
+		"next": "9.3.4",
+		"preact": "10.4.0",
+		"preact-render-to-string": "5.1.6",
+		"preact-ssr-prepass": "1.0.1",
+		"react": "16.13.1",
+		"react-dom": "16.13.1"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "8.3.5",
+		"@commitlint/config-conventional": "8.3.4",
+		"@types/node": "13.11.1",
+		"@types/react": "16.9.34",
+		"@typescript-eslint/eslint-plugin": "2.27.0",
+		"@typescript-eslint/parser": "2.27.0",
+		"babel-eslint": "10.1.0",
+		"commitizen": "4.0.4",
+		"cz-conventional-changelog": "3.1.0",
+		"dotenv": "8.2.0",
+		"eslint": "6.8.0",
+		"eslint-config-prettier": "6.10.1",
+		"eslint-config-react": "1.1.7",
+		"eslint-config-react-app": "5.2.1",
+		"eslint-plugin-flowtype": "4.7.0",
+		"eslint-plugin-import": "2.20.2",
+		"eslint-plugin-jsx-a11y": "6.2.3",
+		"eslint-plugin-prettier": "3.1.2",
+		"eslint-plugin-react": "7.19.0",
+		"eslint-plugin-react-hooks": "2.5.1",
+		"husky": "4.2.5",
+		"lint-staged": "10.1.3",
+		"npm-run-all": "4.1.5",
+		"prettier": "2.0.4",
+		"sass": "1.26.3",
+		"semantic-release": "17.0.4",
+		"stylelint": "13.3.1",
+		"stylelint-config-prettier": "8.0.1",
+		"stylelint-config-recess-order": "2.0.4",
+		"stylelint-config-standard": "20.0.0",
+		"stylelint-prettier": "1.1.2",
+		"typescript": "3.8.3"
+	},
+	"config": {
+		"commitizen": {
+			"path": "cz-conventional-changelog"
+		}
+	}
+}

pages/_app.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { AppProps } from 'next/app'
+
+import '../styles/main.scss'
+
+function MyApp({ Component, pageProps }: AppProps) {
+	return <Component {...pageProps} />
+}
+
+export default MyApp

pages/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { NextPage } from 'next'
+import Head from 'next/head'
+
+const Home: NextPage = () => (
+	<div className="container">
+		<Head>
+			<title>Favycon</title>
+			<link rel="icon" href="/favicon.ico" />
+		</Head>
+
+		<main>
+			<h1 className="title">Welcome to Favycon!</h1>
+
+			<p className="description">
+				Get started by editing <code>pages/index.tsx</code>
+			</p>
+		</main>
+
+		<style jsx>
+			{`
+				.container {
+					min-height: 100vh;
+					padding: 0 0.5rem;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+				}
+
+				main {
+					padding: 5rem 0;
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+				}
+
+				.title {
+					margin: 0;
+					line-height: 1.15;
+					font-size: 4rem;
+				}
+
+				.title,
+				.description {
+					text-align: center;
+				}
+
+				.description {
+					line-height: 1.5;
+					font-size: 1.5rem;
+				}
+			`}
+		</style>
+	</div>
+)
+
+export default Home

public/zeit.svg

@@ -0,0 +1,10 @@
+<svg width="82" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill="url(#prefix__paint0_linear)" d="M9.018 0l9.019 16H0L9.018 0z"/>
+    <path fill="#333" fill-rule="evenodd" d="M51.634 12.028h-6.492V2.052h6.492v1.256H46.61v3.007h4.37V7.57h-4.37v3.202h5.024v1.255zm-14.063 0h-7.235v-1.096l5.342-7.624h-5.253V2.052h7.058v1.097l-5.342 7.623h5.43v1.256zm21.88 0h6.333v-1.256h-2.423V3.308h2.423V2.052h-6.332v1.256h2.441v7.465h-2.441v1.255zm18.22 0h-1.468v-8.72h-3.36V2.052h8.225v1.256H77.67v8.72z" clip-rule="evenodd"/>
+    <defs>
+        <linearGradient id="prefix__paint0_linear" x1="28.022" x2="16.189" y1="22.991" y2="8.569" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#fff"/>
+            <stop offset="1"/>
+        </linearGradient>
+    </defs>
+</svg>

release.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+	plugins: [
+		'@semantic-release/commit-analyzer',
+		'@semantic-release/release-notes-generator',
+		[
+			'@semantic-release/github',
+			{
+				releasedLabels: ['Status: Released'],
+			},
+		],
+	],
+	branches: ['master'],
+}

styles/main.scss

@@ -0,0 +1,11 @@
+html,
+body {
+	padding: 0;
+	margin: 0;
+	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
+		Helvetica Neue, sans-serif;
+}
+
+* {
+	box-sizing: border-box;
+}

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "alwaysStrict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "exclude": ["node_modules"],
+  "include": ["**/*.ts", "**/*.tsx", "./*.js"]
+}