chore: pipeline and commit hook linters are synced (#195)

.eslintrc.js

@@ -1,17 +1,12 @@
 module.exports = {
   root: true,
-  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 2020,
     sourceType: 'module',
   },
   extends: [
-    'prettier',
     'eslint:recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
   ],
-  plugins: ['@typescript-eslint'],
   env: {
     browser: true,
   },
@@ -23,21 +18,30 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['rollup.config.js', 'web-test-runner.config.js'],
-      env: {
-        node: true,
-      },
-    },
-    {
-      files: [
-        '*.test.ts',
-        '**/custom_typings/*.ts',
-        'packages/lit-ssr/src/test/integration/tests/**',
-        'packages/lit-ssr/src/lib/util/parse5-utils.ts',
+      files: ['*.ts'],
+      parser: '@typescript-eslint/parser',
+      extends: [
+        'plugin:@typescript-eslint/recommended'
       ],
       rules: {
-        '@typescript-eslint/no-explicit-any': 'off',
+        "@typescript-eslint/indent": [
+          "error",
+          2,
+          {
+            "ignoredNodes": [
+              "PropertyDefinition[decorators]",
+              "TSUnionType"
+            ]
+          }
+        ],
       },
+      plugins: ['@typescript-eslint'],
     },
+    {
+      files: ['web-test-runner.config.js'],
+      env: {
+        node: true,
+      },
+    }
   ],
 };

.lintstagedrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  '*.ts': () => 'tsc -p tsconfig.json --noEmit',
+  '*.{ts,js}': () => 'eslint .',
+  '*.css': () => 'stylelint src/**/*.css'
+};

.stylelintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
+  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "rules": {
+    "custom-property-no-missing-var-function": true
+  }
 }

docs/adding-a-new-icon.stories.mdx → docs/design-system/adding-a-new-icon.stories.mdx

@@ -1,14 +1,14 @@
 import { Meta } from '@storybook/addon-docs';
-import createBranchImage from './images/create-branch-in-vscode.png';
-import iconsFolderImage from './images/icons-folder.png';
-import stageFilesImage from './images/stage-files.png';
-import filesStagedImage from './images/files-staged.png';
-import commitPushImage from './images/commit-and-push.png';
-import openPrImage from './images/open-pr.png';
-import prFormImage from './images/pr-form.png';
+import createBranchImage from '../images/create-branch-in-vscode.png';
+import iconsFolderImage from '../images/icons-folder.png';
+import stageFilesImage from '../images/stage-files.png';
+import filesStagedImage from '../images/files-staged.png';
+import commitPushImage from '../images/commit-and-push.png';
+import openPrImage from '../images/open-pr.png';
+import prFormImage from '../images/pr-form.png';
 
 <Meta
-  title="Documentation/Adding New Icons"
+  title="Design System/Icons/Adding New Icons"
   parameters={{
     viewMode: 'docs',
     previewTabs: {

docs/design-system/iconography.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs';
 import icons from '../../src/components/icon/icon-list';
 
 <Meta
-  title="Design System/Iconography"
+  title="Design System/Icons/Iconography"
   parameters={{
     viewMode: 'docs',
     previewTabs: {

docs/linting.stories.mdx

@@ -12,11 +12,20 @@ import { Meta } from '@storybook/addon-docs';
   }}
 />
 
-# Baklava testing
+# Linters & Formatters
 
-> This guide will help contributors about how to lint Baklava.
+To keep a consistent codebase we use some linters and running them in our pipelines automatically.
 
-### Brief
-- To lint, we are using `tsc`, `eslint`, `prettier` and `stylelint`.
-    - To get more information, you can find our configurations at [tsconfig.json](https://github.com/Trendyol/baklava/blob/next/tsconfig.json), [.prettier.json](https://github.com/Trendyol/baklava/blob/next/.prettier.json), [.eslintrc.json](https://github.com/Trendyol/baklava/blob/next/.eslintrc.json) and [stylelintrc.json](https://github.com/Trendyol/baklava/blob/next/stylelintrc.json).
-- To run linters, you can simply type `npm run lint` and run.
+Linters that we use are [`eslint`](https://eslint.org), [`stylelint`](https://stylelint.io) and
+[`commitlint`](https://commitlint.js.org). When make a git commit, some staged files processed with linters (via
+[`husky`](https://typicode.github.io/husky/)) to check some syntax issues. `eslint` run for `ts` and `js` files and
+`stylelint` run for `css` files. Also we check commit message with `commitlint`. [More information about our commit
+rules](/docs/documentation-commit-rules--page). If there are any issues commit will be
+interrupted with the message.
+
+Same rules also apply in pipeline flow for every push. In the pipelines, we run `npm run lint` which is doing same
+checks for all of the files this time and makes sure this push doesn't break any coding rules that we have.
+
+We also use [`prettier`](https://prettier.io) and `eslint` as a formatter to easily fix some linting issues. You can
+run `npm run format` to fix some issues automatically. We don't run this command in every commit automatically because
+we want to be in control what and why we are doing some fixes.