docs(CodeSandbox): fix paths for images in exported examples (#3758)

Author: layershifter

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

@@ -1,10 +1,10 @@
-import * as _ from 'lodash'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 import CodeSandboxer from 'react-codesandboxer'
 import { Menu } from 'semantic-ui-react'
 
-import { externals } from 'docs/src/components/ComponentDoc/ExampleEditor/renderConfig'
+import createPackageJson from './createPackageJson'
+import enhanceExampleCode from './enhanceExampleCode'
 
 const appTemplate = `import React from "react";
 import ReactDOM from "react-dom";
@@ -47,7 +47,6 @@ ReactDOM.render(
   document.getElementById("root")
 );
 `
-const dependencies = _.mapValues(externals, () => 'latest')
 
 class ComponentControlsCodeSandbox extends React.Component {
   static propTypes = {
@@ -94,11 +93,10 @@ class ComponentControlsCodeSandbox extends React.Component {
       <CodeSandboxer
         afterDeploy={this.handleDeploy}
         examplePath='/'
-        example={exampleCode}
-        dependencies={dependencies}
-        name='semantic-ui-react-example'
+        example={enhanceExampleCode(exampleCode)}
         providedFiles={{
           'index.js': { content: appTemplate },
+          'package.json': createPackageJson(),
         }}
         skipRedirect
         template='create-react-app'

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

@@ -0,0 +1,26 @@
+import * as _ from 'lodash'
+import { externals } from 'docs/src/components/ComponentDoc/ExampleEditor/renderConfig'
+
+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',
+}
+
+const createPackageJson = () => ({
+  content: JSON.stringify(
+    {
+      name,
+      version: '1.0.0',
+      description,
+      main: 'index.js',
+      dependencies,
+    },
+    null,
+    2,
+  ),
+})
+
+export default createPackageJson

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

@@ -0,0 +1,8 @@
+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/')
+}
+
+export default enhanceExampleCode

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

@@ -1,6 +1,7 @@
 import * as docsComponents from '@stardust-ui/docs-components'
 import faker from 'faker'
 import React from 'react'
+import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
 import * as SUIR from 'semantic-ui-react'
 
@@ -20,8 +21,9 @@ export const externals = {
   '@stardust-ui/docs-components': docsComponents,
   faker,
   lodash: require('lodash'),
-  react: React,
   'prop-types': PropTypes,
+  react: React,
+  'react-dom': ReactDOM,
   'semantic-ui-react': SUIR,
 }