docs: improve CodeSandbox integration (#4010)

Author: layershifter

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox.js

@@ -10,11 +10,12 @@ const appTemplate = `import React from "react";
 import ReactDOM from "react-dom";
 import { Container, Header, List } from "semantic-ui-react";
 
+import pkg from 'semantic-ui-react/package.json'
 import Example from "./example";
 
 const App = ({ children }) => (
   <Container style={{ margin: 20 }}>
-    <Header as="h3">This example is powered by Semantic UI React 😊</Header>
+    <Header as="h3">This example is powered by Semantic UI React {pkg.version} 😊</Header>
     <List bulleted>
       <List.Item
         as="a"
@@ -48,6 +49,22 @@ ReactDOM.render(
 );
 `
 
+function CodeSandboxIcon() {
+  return (
+    <i aria-hidden className='grey icon'>
+      <svg
+        xmlns='http://www.w3.org/2000/svg'
+        fill='currentColor'
+        height='100%'
+        viewBox='0 0 24 24'
+        width='100%'
+      >
+        <path d='M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z' />
+      </svg>
+    </i>
+  )
+}
+
 class ComponentControlsCodeSandbox extends React.Component {
   state = {
     exampleCode: '',
@@ -91,7 +108,7 @@ class ComponentControlsCodeSandbox extends React.Component {
         example={enhanceExampleCode(exampleCode)}
         providedFiles={{
           'index.js': { content: appTemplate },
-          'package.json': createPackageJson(),
+          'package.json': createPackageJson(exampleCode),
         }}
         skipRedirect
         template='create-react-app'
@@ -103,10 +120,7 @@ class ComponentControlsCodeSandbox extends React.Component {
             <Menu.Item
               as='a'
               content={loading ? 'Exporting...' : 'CodeSandbox'}
-              icon={{
-                loading,
-                name: loading ? 'spinner' : 'connectdevelop',
-              }}
+              icon={loading ? { loading, name: 'spinner' } : () => <CodeSandboxIcon />}
               title='Export to CodeSandbox'
             />
           )

docs/src/components/ComponentDoc/ComponentControls/createPackageJson.js

@@ -3,20 +3,31 @@ import { externals } from 'docs/src/components/ComponentDoc/ExampleEditor/render
 
 const name = 'semantic-ui-example'
 const description = 'An exported example from Semantic UI React, https://react.semantic-ui.com/'
-const dependencies = {
-  ..._.mapValues(externals, () => 'latest'),
-  // required to enable all features due old templates in https://github.com/codesandbox/codesandbox-importers
-  'react-scripts': 'latest',
+
+function createDependencies(code) {
+  // Will include only required packages intentionally like "react" or required by a current example
+  const filteredPackages = _.pickBy(
+    externals,
+    (declaration, importName) =>
+      declaration.required || new RegExp(`from ['|"]${importName}['|"]`).exec(code),
+  )
+
+  return {
+    ..._.mapValues(filteredPackages, (pkg) => pkg.version),
+    // required to enable all features due old templates in https://github.com/codesandbox/codesandbox-importers
+    // https://github.com/microsoft/fluent-ui-react/issues/1519
+    'react-scripts': 'latest',
+  }
 }
 
-const createPackageJson = () => ({
+const createPackageJson = (code) => ({
   content: JSON.stringify(
     {
       name,
       version: '1.0.0',
       description,
       main: 'index.js',
-      dependencies,
+      dependencies: createDependencies(code),
     },
     null,
     2,

docs/src/components/ComponentDoc/ComponentControls/enhanceExampleCode.js

@@ -1,8 +1,8 @@
-const imagesRegex = /\/images\//gm
+const imagesRegex = /'\/images\//gm
 
 const enhanceExampleCode = (code) => {
   // To have absolute paths on CodeSandbox for images
-  return code.replace(imagesRegex, 'https://react.semantic-ui.com/images/')
+  return code.replace(imagesRegex, "'https://react.semantic-ui.com/images/")
 }
 
 export default enhanceExampleCode

docs/src/components/ComponentDoc/ExampleEditor/renderConfig.js

@@ -4,6 +4,8 @@ import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
 import * as SUIR from 'semantic-ui-react'
 
+import pkg from '../../../../../package.json'
+
 const isIE11 =
   typeof window !== 'undefined' && !!window.MSInputMethodContext && !!document.documentMode
 
@@ -17,16 +19,36 @@ export const babelConfig = {
 }
 
 export const externals = {
-  faker,
+  faker: {
+    module: faker,
+    required: false,
+    version: pkg.devDependencies.faker,
+  },
   lodash: require('lodash'),
-  'prop-types': PropTypes,
-  react: React,
-  'react-dom': ReactDOM,
-  'semantic-ui-react': SUIR,
+  'prop-types': {
+    module: PropTypes,
+    required: false,
+    version: pkg.dependencies['prop-types'],
+  },
+  react: {
+    module: React,
+    version: pkg.peerDependencies.react,
+    required: true,
+  },
+  'react-dom': {
+    module: ReactDOM,
+    version: pkg.peerDependencies['react-dom'],
+    required: true,
+  },
+  'semantic-ui-react': {
+    module: SUIR,
+    version: pkg.version,
+    required: true,
+  },
 }
 
 export const resolver = (importPath, { displayName }) => {
-  if (externals[importPath]) return externals[importPath]
+  if (externals[importPath]) return externals[importPath].module
 
   throw new Error(
     [