Migrate codebase to Typescript and CSS Modules (#1106)

* Move blog's components under Blog namespace

* Restructure components

* Allow to scroll smoothly in the scrollIntoLayout util function

* Replace styled-reset to reset-css. Merge global styles. Use local classNames instead of global in few components

* Refactor Home page components to TS

* Remove duplicated component - TrySection and replace it with PromoSection

* Refactor SubscribeSection to get rid of linter warning

* Extend scroll utils

* Create one common component for buttons with two rows: TwoRowButton. Use it everywhere on main page. Refactor DownloadButton component

* Refactor Support page components to TS

* Fix scroll for no-hash links

* Disable trailing slash redirects for dev mode

* Refactor Features page components to TS

* Refactor Community page components to TS

* Refactor Documentation layout components to TS

* Refactor remaining Documentation components to TS

* Refactor root html file to TS

* Get rid of styled-components

* Add util for handling keyboard events to follow DRY

* Remove hack from SearchForm to avoiding loading conflict with mailchimp embed script (as it was removed before)

* Refactor front utils to TS

* Remove temporary rule from eslint config

* Refactor Link component to use redirected urls as href

* Remove !important rules from ShowOnly styles

* Split utils by using on front and shared

* Refactor gatsby-node to separate utils

* Update @react/portal package. Remove our custom Portal component

* Update linters and reformat code accordingly to new rules

* Update babel & webpack related packages

* Update react related packages

* Update gatsby-related packages

* Update remaining packages

* Another try to fix hash navigation

* Make tsconfig more stricter. Remove wrong eslint rule and refactor all warnings

* Toggle mobile menu only in mobile version

* Fix Algolia's dropdown position

* Fix Get Started button for the mobile version of main page

* Align buttons in PromoSection component for mobile view

* Fix comments blog rendering

* Fix share buttons overlapping

* Fix line height for main page sections titles

* Fix some styles for the main page

* Fix styles of RightPanel

* Change styles of docs abbr tooltip a little bit

* Fix initial scrolling in the RightPanel

* Fix wrong tagname

* Fix scroll in the left sidebar

* Move src/utils/node to src/gatsby

* Fix animation for doc pages

* Fix styles for abbr tooltip

* Fix svg images in the blog

Co-authored-by: Pavel Grinchenko <[email protected]>

.eslintrc.json

@@ -28,20 +28,22 @@
       { "prefixWithI": "always" }
     ],
     "no-tabs": "error",
-    "react/prop-types": "off", // Props should be described as TS types
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/no-var-requires": "warn"
+    "react/prop-types": "off" // Props should be described as TS types
   },
   "overrides": [
     {
       "files": [
-        "src/utils/**/*.?(js|ts)",
+        "src/utils/shared/*.?(js|ts)",
+        "src/gatsby/**/*.js",
+        "src/components/PageWrapper/index.js",
         "scripts/**/*.js",
         "src/server/**/*.js",
+        "plugins/**/*.js",
         "gatsby-*.js"
       ],
       "rules": {
-        "@typescript-eslint/no-var-requires": "off"
+        "@typescript-eslint/no-var-requires": "off",
+        "@typescript-eslint/explicit-function-return-type": "off"
       }
     }
   ]

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,5 +1,4 @@
 ---
 name: Bug or improvement report
 about: Create a report to help us improve
-
 ---

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,5 +1,4 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-
 ---

.prettierignore

@@ -1,2 +1,3 @@
 .cache/
+.github
 public/

.prettierrc

@@ -1,5 +1,6 @@
 {
   "semi": false,
+  "arrowParens": "avoid",
   "singleQuote": true,
   "trailingComma": "none",
   "printWidth": 80,

.stylelintrc

@@ -9,7 +9,7 @@
       "ignoreProperties": ["composes"]
     }],
     "selector-pseudo-class-no-unknown": [true, {
-      "ignorePseudoClasses": ["global"]
+      "ignorePseudoClasses": ["global", "local"]
     }],
     "at-rule-no-unknown": [true, {
       "ignoreAtRules": ["mixin"]

config/postcss/media.js

@@ -7,6 +7,7 @@ const screens = {
 }
 
 module.exports = {
+  screens,
   customMedia: {
     '--xxs-scr': `(max-width: ${screens.phone}px)`,
     '--xs-scr': `(max-width: ${screens.phablet}px)`,

config/postcss/mixins.js

@@ -1,3 +1,5 @@
+const { customMedia } = require('./media')
+
 const focus = {
   '&:focus': {
     color: 'var(--color-orange)',
@@ -75,6 +77,31 @@ module.exports = {
       'font-size': '16px',
       'line-height': '25px'
     },
+    columns: {
+      display: 'flex',
+      'flex-direction': 'row',
+      'flex-flow': 'wrap',
+      'justify-content': 'space-between',
+
+      [`@media ${customMedia['--sm-scr']}`]: {
+        'flex-direction': 'row'
+      },
+
+      [`@media ${customMedia['--xs-scr']}`]: {
+        'justify-content': 'center'
+      }
+    },
+    column: {
+      'flex-basis': '33.3%',
+
+      [`@media ${customMedia['--sm-scr']}`]: {
+        'flex-basis': '50%'
+      },
+
+      [`@media ${customMedia['--xs-scr']}`]: {
+        'flex-basis': '100%'
+      }
+    },
     link: {
       'text-decoration': 'none',
       color: 'var(--color-blue)',

config/prismjs/dvc-hook.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-env node */
 
 const Prism = require('prismjs')

content/docs/command-reference/move.md

@@ -140,8 +140,8 @@ $ tree
 
 ## Example: change an imported directory name and location
 
-Let's try the same with an entire directory imported from an external <abbd>DVC
-repository</abbd> with `dvc import`. Note that, as in the previous cases, the
+Let's try the same with an entire directory imported from an external <abbr>DVC
+repository</abbr> with `dvc import`. Note that, as in the previous cases, the
 DVC-file is also moved.
 
 ```dvc

gatsby-config.js

@@ -30,7 +30,6 @@ const plugins = [
     }
   },
   'gatsby-plugin-postcss',
-  'gatsby-plugin-styled-components',
   'gatsby-plugin-react-helmet',
   'gatsby-plugin-sitemap',
   'gatsby-plugin-twitter',
@@ -60,7 +59,6 @@ const plugins = [
           },
           resolve: 'gatsby-remark-prismjs'
         },
-        'gatsby-remark-copy-linked-files',
         {
           resolve: 'gatsby-remark-smartypants',
           options: {
@@ -74,6 +72,7 @@ const plugins = [
           }
         },
         'gatsby-remark-relative-images',
+        'gatsby-remark-copy-linked-files',
         {
           resolve: 'gatsby-remark-external-links'
         },