refactor: initial migration step from gatsby-remark-prismjs to prismjs-react-renderer

- Refactored Code, CodeGroup components
- Added CodeInline component
- removed custom elements replacement in favor native mdx renderer
- removed gatsby-remark-prismjs and prismjs from project deps
- removed global prism styles
- adjusted 02 Installation.md to work under new conditions

Side:
- added "hooks" exception to no-unresolved eslint rule

Author: Kirill Bolotsky

gatsby-config.js

@@ -64,13 +64,6 @@ const plugins = [
     options: {
       extensions: ['.md'],
       gatsbyRemarkPlugins: [
-        {
-          resolve: 'gatsby-remark-prismjs',
-          options: {
-            showLineNumbers: true,
-            noInlineHighlight: true,
-          },
-        },
         {
           resolve: 'gatsby-remark-relative-images',
         },

package-lock.json

@@ -50,13 +50,12 @@
     "gatsby-plugin-svgr-svgo": "^1.0.12",
     "gatsby-remark-copy-linked-files": "^2.3.19",
     "gatsby-remark-images": "^3.3.33",
-    "gatsby-remark-prismjs": "^3.5.16",
     "gatsby-remark-relative-images": "^2.0.2",
     "gatsby-source-filesystem": "^2.3.34",
     "gatsby-transformer-json": "^2.4.14",
     "gatsby-transformer-sharp": "^2.5.17",
     "node-sass": "^4.14.1",
-    "prismjs": "^1.21.0",
+    "prism-react-renderer": "^1.1.1",
     "qs": "^6.9.1",
     "react": "^16.10.2",
     "react-clipboard.js": "^2.0.16",

package.json

@@ -70,12 +70,6 @@
     }
   }
 
-  p code,
-  ol code {
-    font-family: $font-family-secondary;
-    padding: 3px 5px 2px;
-  }
-
   table {
     border: 1px solid $color-additional-2;
     border-collapse: collapse;
@@ -103,12 +97,6 @@
       line-height: $line-height-sm;
       vertical-align: baseline;
       line-height: 25px;
-
-      code {
-        font-size: $font-size-code;
-        color: $color-accent-primary;
-        font-family: $font-family-secondary;
-      }
     }
   }
   & > * + * {

src/components/blocks/html-content/html-content.module.scss

@@ -1,8 +1,12 @@
+import PropTypes from 'prop-types';
+import React, { useRef } from 'react';
+
+import styles from './html-content.module.scss';
+
 import './html-content.scss';
 import { MDXProvider } from '@mdx-js/react';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { useElementsReplacement } from 'hooks';
-import React, { useRef } from 'react';
 
 import styles from './html-content.module.scss';
 
@@ -35,3 +39,17 @@ export const HtmlContent = ({
     </MDXProvider>
   );
 };
+
+HtmlContent.propTypes = {
+  content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  className: PropTypes.string,
+  componentsForCustomReplacement: PropTypes.shape({}),
+  componentsForNativeReplacement: PropTypes.shape({}),
+};
+
+HtmlContent.defaultProps = {
+  content: null,
+  className: undefined,
+  componentsForCustomReplacement: {},
+  componentsForNativeReplacement: {},
+};

src/components/blocks/html-content/html-content.view.js

@@ -12,8 +12,11 @@ blockquote {
   p {
     margin: 0;
   }
-  span[class='code-inline'] {
-    background-color: $color-additional-2;
+  & span[class='code-inline'] {
+    background: $color-additional-2;
+  }
+  & div[class^='with-copy-button'] {
+    margin-top: 15px;
   }
 }
 

src/components/shared/blockquote/blockquote.module.scss

@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { getRandomKey } from 'utils';
+
+import Code from './code';
+import styles from './code-group.module.scss';
+
+const CodeGroup = ({ children, labels, lineNumbers }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const randomKey = getRandomKey();
+  return (
+    <div className={styles.wrapper}>
+      {labels && labels.length ? (
+        <div className={styles.header}>
+          {labels.map((label, i) => (
+            <div
+              key={`lb-${i}`}
+              className={`${styles.codeTab} ${
+                i === currentIndex ? styles.codeTab_active : ''
+              }`}
+              onClick={() => setCurrentIndex(i)}
+              onKeyPress={() => setCurrentIndex(i)}
+              role={'button'}
+              tabIndex={i}
+            >
+              {label}
+            </div>
+          ))}
+        </div>
+      ) : null}
+      <style>
+        {`.${styles.itemsContainer}.${randomKey} > div:nth-child(${
+          currentIndex + 1
+        }) { display: block; }`}
+      </style>
+      <div className={`${styles.itemsContainer} ${randomKey}`}>
+        {React.Children.map(children, (child, i) => (
+          <Code showLineNumbers={lineNumbers[i]} key={i}>
+            {child.props.children}
+          </Code>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+CodeGroup.propTypes = {
+  children: PropTypes.node,
+  labels: PropTypes.arrayOf(PropTypes.string),
+  lineNumbers: PropTypes.arrayOf(PropTypes.bool),
+};
+
+CodeGroup.defaultProps = {
+  children: null,
+  labels: [],
+  lineNumbers: [],
+};
+
+export default CodeGroup;