feat: update dependencies and upgrade to react@17 (#1269)

.eslintignore

@@ -4,3 +4,4 @@ lib
 storybook-static
 src/Docs/*
 .*
+src/**/__stories__/*.visual.js

.eslintrc

@@ -36,7 +36,8 @@
       "ie11/no-for-in-const": 2,
       "ie11/no-weak-collections": 2,
       "indent": [2, 4, {
-          "SwitchCase": 1
+          "SwitchCase": 1,
+          "ignoredNodes": ["TemplateLiteral"]
         }
       ],
       "jsx-a11y/accessible-emoji": 2,

.storybook/custom/components/Import.js

@@ -1,18 +1,24 @@
+import js from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript';
 import React from 'react';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { googlecode } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/prism-light';
+import { prism } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import CopyButton from './CopyButton';
 
+ReactSyntaxHighlighter.registerLanguage('javascript', js);
+
 const Import = ({ componentName }) => {
     const importStatement = `import { ${componentName} } from 'fundamental-react/lib/${componentName}';`
     return (
         <div className="docs-import-statement">
-            <SyntaxHighlighter
-                customStyle={{ padding: 10, whiteSpace: 'pre-wrap', fontSize: 14 }}
+            <ReactSyntaxHighlighter
+                customStyle={{ padding: 10, margin: 0, whiteSpace: 'pre-wrap', fontSize: 14, background: 'white' }}
                 language='javascript'
-                style={googlecode}>
+                showLineNumbers={false}
+                showInlineLineNumbers={false}
+                style={prism}
+                wrapLongLines>
                 {importStatement}
-            </SyntaxHighlighter>
+            </ReactSyntaxHighlighter>
             <CopyButton copyText={importStatement} />
         </div>
     );

.storybook/custom/custom.scss

@@ -426,11 +426,6 @@ blockquote {
     margin: 5px !important;
 }
 
-.docs-multi-imports,
-.docs-single-import {
-    margin-bottom: 5em;
-}
-
 .docs-single-import,
 .docs-multi-imports {
     display: flex;
@@ -447,7 +442,3 @@ blockquote {
     top: -9999px;
     left: -9999px;
 }
-
-.docs-component-description {
-    margin-bottom: 80px;
-}

.storybook/main.js

@@ -9,14 +9,17 @@ module.exports = {
     stories: ['../src/Docs/introduction.stories.mdx', `../src/**/*.@${includedStories}.js`],
 
     addons: [
-        '@storybook/addon-knobs/register',
+        {
+            name: '@storybook/addon-essentials',
+            options: {
+                backgrounds: false,
+            },
+        },
         '@storybook/addon-a11y',
-        '@storybook/addon-actions/register',
+        '@storybook/addon-knobs/register',
         '@storybook/addon-cssresources/register',
         '@storybook/addon-storysource/register',
-        '@storybook/addon-viewport/register',
-        '@storybook/addon-docs',
-        'storybook-addon-i18n/register'
+        '@pxblue/storybook-rtl-addon/register',
     ],
 
     webpackFinal: async(config) => {

.storybook/manager-head.html

@@ -24,7 +24,7 @@
     }
 
     .sidebar-container {
-        padding-top: 85px;
+        padding-top: 35px;
     }
 
     .sidebar-container form {

.storybook/preview.js

@@ -1,7 +1,6 @@
 import fundamentals from './custom/fundamentals';
 import React from 'react';
 import { withCssResources } from '@storybook/addon-cssresources';
-import { withI18n } from 'storybook-addon-i18n';
 import { withKnobs } from '@storybook/addon-knobs';
 import { DocsContainer } from '@storybook/addon-docs/blocks';
 import DocsPage from './custom/components/DocsPage';
@@ -47,16 +46,9 @@ addParameters({
     docs: {
         container: DocsContainer,
         page: DocsPage,
-        theme: fundamentals,
-    },
-    i18n: {
-        provider: ({ children }) => <>{children}</>,
-        supportedLocales: ['LTR', 'RTL'],
-        providerLocaleKey: 'locale',
-        getDirection: locale => locale.toLowerCase()
+        theme: fundamentals
     }
 });
 
-addDecorator(withI18n);
 addDecorator(withCssResources);
 addDecorator(withKnobs);

config/jest/setup.js

@@ -1,4 +1,4 @@
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { configure } from 'enzyme';
 import registerRequireContextHook from 'babel-plugin-require-context-hook/register';