Changed import of react-syntax-highlighter from esm to cjs

jest.config.js

@@ -21,7 +21,6 @@ module.exports = {
     'babel-runtime/core-js/(.*)': `core-js/es/$1`,
     // 'babel-runtime/core-js/object/assign'
     'core-js/library/fn/object/assign': 'core-js/es/object/assign',
-    'react-syntax-highlighter/dist/esm/(.*)': 'react-syntax-highlighter/dist/cjs/$1',
   },
   projects: [
     '<rootDir>',

lib/components/package.json

@@ -30,7 +30,9 @@
   "dependencies": {
     "@storybook/client-logger": "6.0.0-alpha.22",
     "@storybook/theming": "6.0.0-alpha.22",
+    "@types/react-syntax-highlighter": "11.0.4",
     "@types/react-textarea-autosize": "^4.3.3",
+    "@types/refractor": "^2.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "lodash": "^4.17.15",
@@ -45,11 +47,11 @@
     "react-popper-tooltip": "^2.8.3",
     "react-syntax-highlighter": "^11.0.2",
     "react-textarea-autosize": "^7.1.0",
+    "refractor": "^2.10.0",
     "simplebar-react": "^1.0.0-alpha.6",
     "ts-dedent": "^1.1.1"
   },
   "devDependencies": {
-    "@types/react-syntax-highlighter": "^11.0.2",
     "enzyme": "^3.9.0",
     "jest": "^25.1.0",
     "jest-enzyme": "^7.0.2"

lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
-import { ThemeProvider, themes, convert, ensure } from '@storybook/theming';
+import { ThemeProvider, themes, ensure } from '@storybook/theming';
 import { SyntaxHighlighter } from './syntaxhighlighter';
 
 storiesOf('Basics/SyntaxHighlighter', module)
@@ -9,6 +9,56 @@ storiesOf('Basics/SyntaxHighlighter', module)
       npx npm-check-updates '/storybook/' -u && npm install
     </SyntaxHighlighter>
   ))
+  .add('css', () => (
+    <SyntaxHighlighter language="css" copyable={false}>
+      {`
+        .className {
+          border: 1px solid hotpink;
+        }
+      `}
+    </SyntaxHighlighter>
+  ))
+  .add('json', () => (
+    <SyntaxHighlighter language="json" copyable={false}>
+      {`
+      {
+        "number": 1,
+        "string": "something",
+        "object": {
+          "property": "value",
+        },
+        array: [1,2,3],
+      }
+      `}
+    </SyntaxHighlighter>
+  ))
+  .add('markdown', () => (
+    <SyntaxHighlighter language="markdown" copyable={false}>
+      {`
+      # a big header
+
+      some code:
+
+      ~~~js
+      const name = "a string";
+      ~~~
+
+      > crazy
+
+      `}
+    </SyntaxHighlighter>
+  ))
+  .add('yaml', () => (
+    <SyntaxHighlighter language="yaml" copyable={false}>
+      {`
+        product:
+        - sku         : BL394D
+          quantity    : 4
+          description : Basketball
+          price       : 450.00
+      `}
+    </SyntaxHighlighter>
+  ))
   .add('jsx', () => (
     <SyntaxHighlighter language="jsx" copyable={false}>
       {`import { Good, Things } from 'life';
@@ -19,6 +69,19 @@ storiesOf('Basics/SyntaxHighlighter', module)
       `}
     </SyntaxHighlighter>
   ))
+  .add('js', () => (
+    <SyntaxHighlighter language="jsx" copyable={false}>
+      {`import React, { createElement } from 'react';
+        import { Good, Things } from 'life';
+
+        const result = () => createElement(Good, [createElement(Things, [], { all: true }), []);
+
+        console.log(result);
+
+        export { result as default };
+      `}
+    </SyntaxHighlighter>
+  ))
   .add('unsupported', () => (
     <SyntaxHighlighter language="C#" bordered copyable>
       {`

lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx

@@ -6,7 +6,10 @@ import memoize from 'memoizerific';
 import jsx from 'react-syntax-highlighter/dist/cjs/languages/prism/jsx';
 import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
 import css from 'react-syntax-highlighter/dist/cjs/languages/prism/css';
+import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json';
 import html from 'react-syntax-highlighter/dist/cjs/languages/prism/markup';
+import md from 'react-syntax-highlighter/dist/cjs/languages/prism/markdown';
+import yml from 'react-syntax-highlighter/dist/cjs/languages/prism/yaml';
 import tsx from 'react-syntax-highlighter/dist/cjs/languages/prism/tsx';
 import typescript from 'react-syntax-highlighter/dist/cjs/languages/prism/typescript';
 
@@ -21,6 +24,9 @@ import { formatter } from './formatter';
 export { createElement as createSyntaxHighlighterElement };
 
 ReactSyntaxHighlighter.registerLanguage('jsx', jsx);
+ReactSyntaxHighlighter.registerLanguage('json', json);
+ReactSyntaxHighlighter.registerLanguage('yml', yml);
+ReactSyntaxHighlighter.registerLanguage('md', md);
 ReactSyntaxHighlighter.registerLanguage('bash', bash);
 ReactSyntaxHighlighter.registerLanguage('css', css);
 ReactSyntaxHighlighter.registerLanguage('html', html);

yarn.lock

@@ -4245,6 +4245,11 @@
   resolved "https://registry.yarnpkg.com/@types/pretty-hrtime/-/pretty-hrtime-1.0.0.tgz#c5a2d644a135e988b2932f99737e67b3c62528d0"
   integrity sha512-xl+5r2rcrxdLViAYkkiLMYsoUs3qEyrAnHFyEzYysgRxdVp3WbhysxIvJIxZp9FvZ2CYezh0TaHZorivH+voOQ==
 
+"@types/prismjs@*":
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.16.0.tgz#4328c9f65698e59f4feade8f4e5d928c748fd643"
+  integrity sha512-mEyuziLrfDCQ4juQP1k706BUU/c8OGn/ZFl69AXXY6dStHClKX4P+N8+rhqpul1vRDA2VOygzMRSJJZHyDEOfw==
+
 "@types/prop-types@*", "@types/prop-types@^15.5.9":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
@@ -4325,7 +4330,7 @@
     "@types/react-dom" "*"
     "@types/react-transition-group" "*"
 
-"@types/react-syntax-highlighter@^11.0.2", "@types/react-syntax-highlighter@^11.0.4":
+"@types/react-syntax-highlighter@11.0.4", "@types/react-syntax-highlighter@^11.0.4":
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd"
   integrity sha512-9GfTo3a0PHwQeTVoqs0g5bS28KkSY48pp5659wA+Dp4MqceDEa8EHBqrllJvvtyusszyJhViUEap0FDvlk/9Zg==
@@ -4362,6 +4367,13 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/refractor@^2.8.0":
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/@types/refractor/-/refractor-2.8.0.tgz#2e17b69f27e89c1ea076f49b599abe3567c54e01"
+  integrity sha512-l3wSB96RFZnvB8bnbF8UmYsDD1MQl+u7jtYq+DgI/vo3RD5pdbK3OitGEvMO3DNJhTYmCEhXLVWyyWTddzwNzQ==
+  dependencies:
+    "@types/prismjs" "*"
+
 "@types/rfdc@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@types/rfdc/-/rfdc-1.1.0.tgz#1fc5ffdc679575e2ca31399d4ee75f353afdd37b"
@@ -25389,6 +25401,15 @@ reflect.ownkeys@^0.2.0:
   resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
   integrity sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=
 
+refractor@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.10.0.tgz#4cc7efc0028a87924a9b31d82d129dec831a287b"
+  integrity sha512-maW2ClIkm9IYruuFYGTqKzj+m31heq92wlheW4h7bOstP+gf8bocmMec+j7ljLcaB1CAID85LMB3moye31jH1g==
+  dependencies:
+    hastscript "^5.0.0"
+    parse-entities "^1.1.2"
+    prismjs "~1.17.0"
+
 refractor@^2.4.1:
   version "2.10.1"
   resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.10.1.tgz#166c32f114ed16fd96190ad21d5193d3afc7d34e"