style: add/modify new style guides

[#62] Refer to GitHub issue...

This update makes the following changes to the style guide
implementations

package.json
- added babel plugin to fix dependency issues.
- added eslint-import-sort and simple-import-sort to sort React imports.
- added postcss and postcss-sorting to sort css attributes.
- added prettier-jinja-template to read jinja HTML files.
- added prettier-organize-attributes to sort HTML attributes.
- added stylelint-config-recess-order to lint css attribute orders
according to Recess rule.

.eslinrc
- modified general settings such as root, and env for more accurate
implementation.
- added simple-import-sort and sort-exports to sort react import and
  exports.
- modified react indent setting to 2 spaces.
- modified several eslint rules to "warning" to avoid causing bugs in
  previously written codes. These warnings are to be fixed in the future
if needed.
- added import sorting rules based on grouping and then alphabetically
sorting.
- added exception rules for underscore-dangle to avoid conflicts with
  Rewire package.

prettierrc
- added plugin organize-attributes to sort HTML attributes on common
  convention.
- added plugin jinja-template to allow prettier to modify Jinja files
  properly.
- added exception rules for html files and yml files.

stylelintrc
- added file to modify rules for Stylelint.
- added rule selector-class-pattern to avoid causing bugs in previously
  written codes. These warnings are to be fixed in the future if needed.
- added rule font-family-name-quotes to ignore unnecessary font import
  rules.

.vscode/extensions.json
- added batisteo.vscode-django to allow formatting Jinja files by
  changing Jinja HTML to Django HTML.
- added monosans.djlint to lint Jinja files.
- added samuelcolvin.jinjahtml to read HTML files as Jinja HTML files.
- added jota0222.multi-formatter to use multi-formatter, especially to
  apply prettier first and then django formatter to Jinja HTML files.
- added redhat.vscode-yaml to format YAML files.

.vscode/settings.json
- modified to format html files with Django formatter and css files with
postcss.
- added css ordering rule to match with Stylelint Recess ordering
format.

web/package.json
- style: edited indents.

setup.py
- added isort package to sort package imports.

.eslintrc

@@ -1,4 +1,11 @@
 {
+  "root": true,
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true,
+    "jest": true
+  },
   "extends": [
     "airbnb",
     "airbnb/hooks",
@@ -7,26 +14,28 @@
     "plugin:react-hooks/recommended",
     "plugin:jsx-a11y/recommended",
     "plugin:import/recommended"
-    // "plugin:node/recommended"
   ],
-  "plugins": ["prettier", "react", "import"],
+  "plugins": ["prettier", "react", "import", "simple-import-sort", "sort-exports"],
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
-    }
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
   },
   "rules": {
     "prettier/prettier": ["error"],
 
     "react-hooks/exhaustive-deps": "warn",
     "react-hooks/rules-of-hooks": "error",
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-    "react/jsx-indent-props": [2, 4],
-    "react/jsx-indent": [2, 4],
+    "react/jsx-indent-props": [2, 2],
+    "react/jsx-indent": [2, 2],
     "react/jsx-one-expression-per-line": [0],
     "react/prefer-stateless-function": [1],
     "react/static-property-placement": [1, "property assignment"],
     "react/no-multi-comp": ["error", { "ignoreStateless": true }],
+    "react/prop-types": "warn",
 
     "semi": 2,
     "comma-dangle": "error",
@@ -38,29 +47,67 @@
     "prefer-template": "warn",
     "template-curly-spacing": ["error", "never"],
     "jsx-quotes": ["warn", "prefer-double"],
-    "camelcase": ["error", { "properties": "always" }],
+    "camelcase": ["warn", { "properties": "always" }],
     "no-unused-vars": ["warn"],
 
     "import/prefer-default-export": ["warn", { "target": "any" }],
     "import/no-duplicates": ["error", { "considerQueryString": true }],
-    "import/order": [
-      "error",
-      {
-        "groups": ["builtin", "external", "internal"],
-        "pathGroups": [
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "import/first": "error",
+    "import/newline-after-import": "error",
+
+    "sort-exports/sort-exports": ["error", { "sortDir": "asc" }]
+  },
+  "overrides": [
+    // Exceptions for ESLint related files
+    {
+      "env": {
+        "node": true
+      },
+      "files": [".eslintrc.{js,cjs}"],
+      "parserOptions": {
+        "sourceType": "script"
+      }
+    },
+    // Override "simple-import-sort" config
+    {
+      "files": ["*.js", "*.jsx", "*.ts", "*.tsx"],
+      "rules": {
+        "simple-import-sort/imports": [
+          "error",
           {
-            "pattern": "react",
-            "group": "external",
-            "position": "before"
+            "groups": [
+              // Packages `react` related packages come first.
+              ["^react", "^@?\\w"],
+              // Internal packages.
+              ["^(@|components)(/.*|$)"],
+              // Side effect imports.
+              ["^\\u0000"],
+              // Parent imports. Put `..` last.
+              ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+              // Other relative imports. Put same-folder imports and `.` last.
+              ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+              // Style imports.
+              ["^.+\\.?(css)$"]
+            ]
           }
         ],
-        "pathGroupsExcludedImportTypes": ["react"],
-        "newlines-between": "always",
-        "alphabetize": {
-          "order": "asc",
-          "caseInsensitive": true
-        }
+        "simple-import-sort/exports": "error"
       }
-    ]
-  }
+    },
+    // Exception rules for specific packages
+    {
+      "files": ["*.js", "*.jsx", "*.ts", "*.tsx"],
+      "rules": {
+        "no-underscore-dangle": [
+          "error",
+          {
+            // Rewire methods
+            "allow": ["__get__", "__set__", "__reset__"]
+          }
+        ]
+      }
+    }
+  ]
 }

.prettierrc

@@ -4,5 +4,24 @@
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "all",
-  "jsxSingleQuote": false
+  "jsxSingleQuote": false,
+
+  "plugins": ["prettier-plugin-organize-attributes", "prettier-plugin-jinja-template"],
+
+  "attributeGroups": ["^class$", "^(id|name)$", "$DEFAULT", "^aria-"],
+
+  "overrides": [
+    {
+      "files": ["*.html"],
+      "options": {
+        "parser": "jinja-template"
+      }
+    },
+    {
+      "files": ["*.yml"],
+      "options": {
+        "printWidth": 80
+      }
+    }
+  ]
 }

.stylelintrc

@@ -0,0 +1,7 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
+  "rules": {
+    "selector-class-pattern": "^([_a-zA-Z][a-zA-Z0-9]*)(-[a-zA-Z0-9]+)*$",
+    "font-family-name-quotes": null
+  }
+}

.vscode/extensions.json

@@ -1,18 +1,27 @@
 {
-    // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
-    // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
 
-    // List of extensions which should be recommended for users of this workspace.
-    "recommendations": [
-        "ms-python.python",
-        "ms-python.vscode-pylance",
-        "ms-python.autopep8",
-        "ms-python.flake8",
-        "ms-python.isort",
-        "dbaeumer.vscode-eslint",
-        "esbenp.prettier-vscode",
-        "njpwerner.autodocstring"
-    ],
-    // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
-    "unwantedRecommendations": []
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": [
+    "ms-python.python",
+    "ms-python.vscode-pylance",
+    "ms-python.autopep8",
+    "ms-python.flake8",
+    "ms-python.isort",
+
+    "njpwerner.autodocstring",
+
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+
+    "batisteo.vscode-django",
+    "monosans.djlint",
+    "samuelcolvin.jinjahtml",
+    "jota0222.multi-formatter",
+
+    "redhat.vscode-yaml"
+  ],
+  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+  "unwantedRecommendations": []
 }