Merge pull request #1 from Hipo/feat/init-template

feat(template): create initial template

README.md

@@ -1,2 +1,41 @@
 # cra-template-hipo-typescript
-Custom CRA TypeScript template of Hipo web team for creating new web apps
+
+This is the custom TypeScript template of Hipo web team for [Create React App](https://github.com/facebook/create-react-app).
+
+To use this template, add `--template @hipo/cra-template-hipo-typescript` when creating a new app.
+
+For example:
+
+```sh
+npx create-react-app my-app --template @hipo/cra-template-hipo-typescript
+
+# or
+
+yarn create react-app my-app --template @hipo/cra-template-hipo-typescript
+```
+
+## Local Development
+
+In order to test your local changes to the template, you can use the local version of the template by specifying its path as template argument:
+
+```sh
+npx create-react-app my-app --template file:../path/cra-template-hipo-typescript
+```
+
+Where `../projects/cra-template-hipo-typescript` is the relative path of your template folder.
+
+## How does it work?
+
+This section briefly describes what the files in the template do. For more detailed and up-to-date information, please refer to:
+
+- [Custom Templates | CRA](https://create-react-app.dev/docs/custom-templates/)
+
+### `template` folder
+
+> This folder is copied to the user's app directory as Create React App installs. During this process, the file gitignore is renamed to .gitignore.
+>
+> You can add whatever files you want in here, but you must have at least the files specified above.
+
+### `template.json` file
+
+> The package key lets you provide any keys/values that you want added to the new project's package.json, such as dependencies and any custom scripts that your template relies on.

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "cra-template-hipo-typescript",
+  "version": "1.0.0",
+  "keywords": [
+    "react",
+    "create-react-app",
+    "template",
+    "typescript",
+    "hipo"
+  ],
+  "description": "The base TypeScript template for Hipo web apps.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Hipo/cra-template-hipo-typescript.git",
+    "directory": "/"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=14"
+  },
+  "bugs": {
+    "url": "https://github.com/Hipo/cra-template-hipo-typescript/issues"
+  },
+  "files": [
+    "template",
+    "template.json"
+  ]
+}

template.json

@@ -0,0 +1,57 @@
+{
+  "package": {
+    "scripts": {
+      "start": "react-scripts start",
+      "build": "react-scripts build",
+      "build:staging": "env-cmd -f .env.staging npm run build",
+      "test": "react-scripts test",
+      "eject": "react-scripts eject",
+      "check-package-updates": "npx npm-check-updates",
+      "prepare": "husky install"
+    },
+    "dependencies": {
+      "@testing-library/jest-dom": "^5.14.1",
+      "@testing-library/react": "^12.0.0",
+      "@testing-library/user-event": "^13.2.1",
+      "@types/jest": "^27.0.1",
+      "@types/node": "^16.7.13",
+      "@types/react": "^17.0.20",
+      "@types/react-dom": "^17.0.9",
+      "typescript": "^4.4.2",
+      "web-vitals": "^2.1.0",
+      "classnames": "^2.3.1",
+      "env-cmd": "^10.1.0",
+      "react-router-dom": "^5.3.0"
+    },
+    "devDependencies": {
+      "@hipo/eslint-config-base": "^4.2.0",
+      "@hipo/eslint-config-react": "^2.2.0",
+      "@hipo/eslint-config-typescript": "^1.1.0",
+      "@hipo/stylelint-config-base": "^2.2.0",
+      "@types/react-router-dom": "^5.3.1",
+      "eslint-config-prettier": "^8.3.0",
+      "eslint-import-resolver-typescript": "^2.5.0",
+      "husky": "^7.0.2",
+      "lint-staged": "^11.2.0",
+      "node-sass": "^6.0.1",
+      "prettier": "^2.4.1",
+      "stylelint": "^13.13.1",
+      "stylelint-no-unsupported-browser-features": "^5.0.2",
+      "stylelint-order": "^4.1.0",
+      "stylelint-scss": "^3.21.0"
+    },
+    "eslintConfig": {
+      "parser": "@typescript-eslint/parser",
+      "plugins": ["react", "react-hooks", "@typescript-eslint", "jsx-a11y"],
+      "extends": [
+        "react-app",
+        "react-app/jest",
+        "@hipo/eslint-config-base",
+        "@hipo/eslint-config-react",
+        "@hipo/eslint-config-typescript",
+        "plugin:jsx-a11y/recommended",
+        "prettier"
+      ]
+    }
+  }
+}

template/.eslintignore

@@ -0,0 +1 @@
+react-app-env.d.ts 

template/.eslintrc.js

@@ -0,0 +1,56 @@
+const path = require("path");
+
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["react", "react-hooks", "@typescript-eslint", "jsx-a11y"],
+  env: {
+    browser: true,
+    jest: true,
+    es6: true
+  },
+  extends: [
+    "@hipo/eslint-config-base",
+    "@hipo/eslint-config-react",
+    "@hipo/eslint-config-typescript",
+    "plugin:jsx-a11y/recommended",
+    "prettier"
+  ],
+  parserOptions: {
+    project: path.resolve(__dirname, "./tsconfig.json"),
+    tsconfigRootDir: __dirname,
+    ecmaVersion: 2018,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true
+    },
+    createDefaultProgram: true
+  },
+  settings: {
+    react: {
+      version: "detect"
+    },
+    "import/resolver": {
+      typescript: {}
+    }
+  },
+  globals: {},
+  rules: {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
+  },
+  overrides: [
+    {
+      files: [".eslintrc.js"],
+      rules: {
+        "@typescript-eslint/no-var-requires": "off"
+      }
+    },
+    {
+      files: ["*.d.ts"],
+      rules: {
+        "newline-after-var": "off"
+      }
+    }
+  ]
+};

template/.gitignore

@@ -0,0 +1,20 @@
+# 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*
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

template/.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
+echo "type-checking..."
+./node_modules/.bin/tsc --noEmit

template/.prettierignore

@@ -0,0 +1 @@
+_global-colors.scss

template/.prettierrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  printWidth: 90,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: false,
+  jsxSingleQuote: false,
+  trailingComma: "none",
+  bracketSpacing: false,
+  bracketSameLine: true,
+  arrowParens: "always"
+};

template/.stylelintignore

@@ -0,0 +1 @@
+_global-colors.scss

template/.stylelintrc.json

@@ -0,0 +1,12 @@
+{
+  "extends": ["@hipo/stylelint-config-base"],
+  "plugins": [
+    "stylelint-order",
+    "stylelint-scss",
+    "stylelint-no-unsupported-browser-features"
+  ],
+  "rules": {
+    "value-list-comma-newline-after": null,
+    "font-family-name-quotes": null
+  }
+}

template/README.md

@@ -0,0 +1,39 @@
+# CRA Hipo TypeScript Template App
+
+Short description of the project
+
+- Web App: [app.domain.com](#)
+- Design: [Figma](#)
+- Codebase: [Dashboard](#)
+
+## Development
+
+This project was created with [Create React App](https://github.com/facebook/create-react-app). Therefore, the usual react-scripts are available in this project.
+
+### Install dependencies
+
+- `npm install`
+
+### Start the development environment
+
+- `npm start`
+
+### Deploy
+
+Either GitHub workflows or CircleCI is used for deployments. Check [Setting Up a New Project](https://github.com/Hipo/web-handbook/blob/master/setting-up-a-new-project.md) section in our handbook for more details.
+
+### Husky and lint-staged
+
+[Husky](https://github.com/typicode/husky) is configured with [lint-staged](https://github.com/okonet/lint-staged) to run ESLint, Stylelint and Prettier on the staged files, and then type-check the application before committing your changes.
+
+## Contribution
+
+All development branches should be checked out from `next-release` branch and pull requests should be opened against the `next-release` branch.
+
+### Versioning
+
+We follow [SemVer](https://semver.org/) convention to update the version for each release.
+
+### Commit Messages
+
+We adapted [Conventional Commits specification](https://www.conventionalcommits.org/) to create an easy to read commit history. Please refer to this specification and structure your commits in a compatible way.

template/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*

template/public/index.html

@@ -0,0 +1,19 @@
+<!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 and Hipo React TypeScript template" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>Hipo React TypeScript Project</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

template/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"
+}

template/public/robots.txt

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

template/src/component/page/Page.tsx

@@ -0,0 +1,33 @@
+import "./_page.scss";
+
+import React, {useEffect} from "react";
+import classNames from "classnames";
+
+import PageHeader from "./header/PageHeader";
+import PageFooter from "./footer/PageFooter";
+
+interface PageProps {
+  children: React.ReactNode;
+  customClassName?: string;
+  title: string;
+}
+
+function Page({children, customClassName, title}: PageProps) {
+  useEffect(() => {
+    if (title) {
+      document.title = title;
+    }
+  }, [title]);
+
+  return (
+    <div className={classNames("page", customClassName)}>
+      <PageHeader />
+
+      {children}
+
+      <PageFooter />
+    </div>
+  );
+}
+
+export default Page;