Feature/lint (#20)

* feat: add linting + run prettier

* add app version

* update theaming

* very great improvements

* fix missed imports

Author: eksrha

.eslintrc.json

@@ -0,0 +1,55 @@
+{
+  "root": true,
+  "ignorePatterns": ["projects/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:prettier/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    // NOTE: WE ARE NOT APPLYING PRETTIER IN THIS OVERRIDE, ONLY @ANGULAR-ESLINT/TEMPLATE
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "rules": {}
+    },
+    // NOTE: WE ARE NOT APPLYING @ANGULAR-ESLINT/TEMPLATE IN THIS OVERRIDE, ONLY PRETTIER
+    {
+      "files": ["*.html"],
+      "excludedFiles": ["*inline-template-*.component.html"],
+      "extends": ["plugin:prettier/recommended"],
+      "rules": {
+        // NOTE: WE ARE OVERRIDING THE DEFAULT CONFIG TO ALWAYS SET THE PARSER TO ANGULAR (SEE BELOW)
+        "prettier/prettier": [
+          "error",
+          {
+            "parser": "angular"
+          }
+        ]
+      }
+    }
+  ]
+}

.github/workflows/build-gh-pages-demo.yaml

@@ -3,7 +3,7 @@ name: Build GH Pages Demo
 on:
   push:
     branches:
-      - "main"
+      - 'main'
 
 jobs:
   build-gh-pages-demo:
@@ -15,7 +15,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: "16.x"
+          node-version: '16.x'
 
       - name: install packages
         run: yarn
@@ -26,7 +26,7 @@ jobs:
         uses: actions/checkout@v3
         with:
           ref: gh-pages-demo
-          path: "gh-pages-demo"
+          path: 'gh-pages-demo'
 
       - name: Clean out old dist and copy new dist
         run: |

.github/workflows/pull-request.yml

@@ -15,13 +15,13 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
-        
+
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: "16.x"
-          registry-url: "https://npm.pkg.github.com"
-          scope: "@fullstack-devops"
+          node-version: '16.x'
+          registry-url: 'https://npm.pkg.github.com'
+          scope: '@fullstack-devops'
 
       - name: install packages
         run: yarn

.github/workflows/release.yml

@@ -3,12 +3,12 @@ name: Release Package
 on:
   push:
     branches:
-      - "main"
+      - 'main'
     paths-ignore:
-      - "README.md"
-      - "docs/**"
-      - ".github/ISSUE_TEMPLATE/**"
-      - ".github/PULL_REQUEST_TEMPLATE.md"
+      - 'README.md'
+      - 'docs/**'
+      - '.github/ISSUE_TEMPLATE/**'
+      - '.github/PULL_REQUEST_TEMPLATE.md'
 
 jobs:
   create_release:
@@ -26,9 +26,9 @@ jobs:
       - name: Setup node for GitHub
         uses: actions/setup-node@v3
         with:
-          node-version: "16.x"
-          registry-url: "https://npm.pkg.github.com"
-          scope: "@fullstack-devops"
+          node-version: '16.x'
+          registry-url: 'https://npm.pkg.github.com'
+          scope: '@fullstack-devops'
 
       - name: install packages
         run: yarn
@@ -46,10 +46,9 @@ jobs:
       - name: Setup node for npmjs
         uses: actions/setup-node@v3
         with:
-          node-version: "16.x"
-          registry-url: "https://registry.npmjs.org"
-          scope: "@fullstack-devops"
-
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+          scope: '@fullstack-devops'
 
       - name: npm publish to npmjs
         working-directory: dist/ng-mat-components

.gitignore

@@ -15,6 +15,7 @@ projects/ng-nav-frame/README.md
 npm-debug.log
 yarn-error.log
 yarn.lock
+package-lock.json
 .yarn/
 
 # IDEs and editors
@@ -47,4 +48,4 @@ testem.log
 .DS_Store
 Thumbs.db
 .yarnrc
-package-lock.json
+package-lock.json

.prettierignore

@@ -0,0 +1,44 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+node_modules
+npm-debug.log
+yarn-error.log
+package-lock.json
+yarn.lock
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "semi": true,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "trailingComma": "es5",
+  "bracketSameLine": true,
+  "printWidth": 160,
+  "htmlWhitespaceSensitivity": "ignore"
+}

.vscode/extensions.json

@@ -1,7 +1,11 @@
 {
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
   "recommendations": [
     "angular.ng-template",
+    "johnpapa.Angular2",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "PKief.material-icon-theme",
+    "Mikael.Angular-BeastCode",
     "bradlc.vscode-tailwindcss"
   ]
-}
+}

.vscode/settings.json

@@ -1,11 +1,9 @@
 {
+  "editor.formatOnPaste": true,
   "editor.formatOnSave": true,
-  "editor.renderWhitespace": "all",
-  "prettier.arrowParens": "avoid",
-  "prettier.printWidth": 130,
-  "editor.tabSize": 2,
-  "files.trimTrailingWhitespace": true,
-  "files.trimFinalNewlines": true,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": true
+  },
   "workbench.iconTheme": "material-icon-theme",
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[javascript]": {
@@ -20,10 +18,24 @@
   "[yaml]": {
     "editor.defaultFormatter": "redhat.vscode-yaml"
   },
-  "[typescript]": {
-    "editor.defaultFormatter": "vscode.typescript-language-features"
-  },
   "[scss]": {
     "editor.defaultFormatter": "vscode.css-language-features"
   },
-}
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
+    "editor.formatOnSave": true
+  },
+  "[xml]": {
+    "editor.defaultFormatter": "redhat.vscode-xml"
+  }
+}

README.md

@@ -1,23 +1,25 @@
 # ng-mat-components
-Components for @angular/material
 
+Components for @angular/material
 
 ## Installation
 
 add to your local `.npmrc` the following line to be able to use this package:
+
 ```javascript
 @fullstack-devops:registry=https://npm.pkg.github.com
 ```
 
 And install it:
- - yarn
-    ```javascript
-    yarn add @fullstack-devops/ng-mat-components
-    ```
- - npm
-    ```javascript
-    npm install @fullstack-devops/ng-mat-components
-    ```
+
+- yarn
+  ```javascript
+  yarn add @fullstack-devops/ng-mat-components
+  ```
+- npm
+  ```javascript
+  npm install @fullstack-devops/ng-mat-components
+  ```
 
 ## Documentation