Add codesandbox links to our documentation

package.json

@@ -110,6 +110,7 @@
     "chokidar": "^1.7.0",
     "chromedriver": "2.37.0",
     "circular-dependency-plugin": "^5.0.2",
+    "codesandbox": "^2.1.11",
     "core-js": "^2.5.1",
     "cross-env": "^5.2.0",
     "css-loader": "^0.28.7",

src-docs/src/components/codesandbox/index.js

@@ -0,0 +1 @@
+export { CodeSandboxLink } from './link';

src-docs/src/components/codesandbox/link.js

@@ -0,0 +1,152 @@
+import React from 'react';
+import { getParameters } from 'codesandbox/lib/api/define';
+import {
+  cleanEuiImports,
+  hasDisplayToggles,
+  listExtraDeps,
+} from '../../services';
+
+/* HOW THE CODE SANDBOX REGEX WORKS
+ * Given the prop `content` we manipulate the provided source string to format
+ * it for use as an independent file in Code Sandbox. In order the following
+ * regex and magic happens:
+ *
+ * 1. A `content` prop is passed containing the src-doc example code we need to manipulate for CS.
+ * 2. If no content exists (like the homepage link), we'll make a hello world file bundled with EUI and call it a day.
+ * 3. If content exists, we build an `index.js` file with a <Demo> component based on the original content.
+ * 4. If content contains `DisplayToggles`, we also generate a `display_toggles.js` file alongside the `index.js` file to import.
+ * 5. Through regex we read the dependencies of both `content` and `display_toggles` and pass that to CS.
+ * 6. We pass the files and dependencies as params to CS through a POST call.
+ * */
+
+const displayTogglesRawCode = require('!!raw-loader!../../views/form_controls/display_toggles');
+
+/* 1 */
+export const CodeSandboxLink = ({ children, content }) => {
+  /* 2 */
+  const defaultContent = `import ReactDOM from 'react-dom';
+import '@elastic/eui/dist/eui_theme_light.css'
+// import '@elastic/eui/dist/eui_theme_dark.css'
+import React from 'react';
+
+import {
+  EuiButton,
+} from '@elastic/eui';
+
+const Demo = () => (<EuiButton>Hello world!</EuiButton>);
+
+ReactDOM.render(
+  <Demo />,
+  document.getElementById('root')
+);
+`;
+
+  /** This cleans the Demo JS example for Code Sanbox.
+  - Replaces relative imports with pure @elastic/eui ones
+  - Changes the JS example from a default export to a component const named Demo
+  **/
+  const exampleCleaned = cleanEuiImports(content)
+    .replace('export default', 'const Demo =')
+    .replace(
+      /(from )'(..\/)+display_toggles(\/?';)/,
+      "from './display_toggles';"
+    );
+
+  // If the code example still has local doc imports after the above cleaning it's
+  // too complicated for code sandbox so we don't provide a link
+  const hasLocalImports = /(from )'((.|..)\/).*?';/.test(exampleCleaned);
+
+  if (hasLocalImports && !hasDisplayToggles(exampleCleaned)) {
+    return;
+  }
+
+  // Renders the new Demo component generically into the code sandbox page
+  const exampleClose = `ReactDOM.render(
+  <Demo />,
+  document.getElementById('root')
+);`;
+  // The Code Sanbbox demo needs to import CSS at the top of the document. CS has trouble
+  // with our dynamic imports so we need to warn the user for now
+  const exampleStart = `/**
+// NOTICE ABOUT ICONS
+// Codesandbox has issues with the way EUI dynamically imports icons.
+// As a result these demos will not render icons in them.
+**/
+
+import ReactDOM from 'react-dom';
+// import '@elastic/eui/dist/eui_theme_dark.css';
+import '@elastic/eui/dist/eui_theme_light.css'`;
+
+  // Concat the three pieces of the example into a single string to use for index.js
+  const cleanedContent = `${exampleStart}
+${exampleCleaned}
+${exampleClose}
+    `;
+
+  const indexContent = cleanedContent
+    ? cleanedContent.replace(
+        /(from )'.+display_toggles';/,
+        "from './display_toggles';"
+      )
+    : defaultContent;
+  const indexContentDeps = listExtraDeps(indexContent);
+  let mergedDeps = indexContentDeps;
+
+  /* 4 */
+  if (hasDisplayToggles(indexContent)) {
+    const cleanedDisplayToggles = cleanEuiImports(displayTogglesRawCode);
+    const displayToggleDeps = listExtraDeps(cleanedDisplayToggles);
+
+    /* 5 */
+    mergedDeps = { ...indexContentDeps, ...displayToggleDeps };
+  }
+
+  const config = {
+    files: {
+      'package.json': {
+        content: {
+          dependencies: {
+            react: 'latest',
+            'react-dom': 'latest',
+            'react-scripts': 'latest',
+            moment: 'latest',
+            '@elastic/eui': 'latest',
+            '@elastic/datemath': 'latest',
+            ...mergedDeps,
+          },
+        },
+      },
+      /* 3 */
+      'index.js': {
+        content: indexContent,
+      },
+    },
+  };
+
+  /* 4 */
+  if (hasDisplayToggles(indexContent)) {
+    const cleanedDisplayToggles = cleanEuiImports(displayTogglesRawCode);
+
+    config.files['display_toggles.js'] = {
+      content: cleanedDisplayToggles,
+    };
+  }
+
+  const params = getParameters(config);
+
+  const childWithSubmit = React.cloneElement(children, {
+    type: 'submit',
+  });
+
+  return (
+    <form
+      action="https://codesandbox.io/api/v1/sandboxes/define"
+      method="POST"
+      target="_blank"
+      className="eui-textRight">
+      {/* 6 */}
+      <input type="hidden" name="parameters" value={params} />
+      {childWithSubmit}
+    </form>
+  );
+};

src-docs/src/components/guide_section/guide_section.js

@@ -18,8 +18,13 @@ import {
   EuiTextColor,
   EuiTitle,
   EuiLink,
+  EuiButtonEmpty,
 } from '../../../../src/components';
 
+import { CodeSandboxLink } from '../codesandbox';
+
+import { cleanEuiImports } from '../../services';
+
 function markup(text) {
   const regex = /(#[a-zA-Z]+)|(`[^`]+`)/g;
   return text.split(regex).map((token, index) => {
@@ -376,18 +381,13 @@ export class GuideSection extends Component {
     const { code } = this.props.source.find(
       sourceObject => sourceObject.type === name
     );
-    const npmImports = code
-      .replace(/(from )'(..\/)+src\/components(\/?';)/, "from '@elastic/eui';")
-      .replace(
-        /(from )'(..\/)+src\/services(\/?';)/,
-        "from '@elastic/eui/lib/services';"
-      )
-      .replace(/(from )'(..\/)+src\/components\/.*?';/, "from '@elastic/eui';");
+    const cleanedExampleCode = cleanEuiImports(code);
 
     return (
       <div key={name} ref={name}>
+        {name === 'javascript' ? this.renderCodeSandBoxButton() : null}
         <EuiCodeBlock language={codeClass} overflowHeight={400}>
-          {npmImports}
+          {cleanedExampleCode}
         </EuiCodeBlock>
       </div>
     );
@@ -424,6 +424,20 @@ export class GuideSection extends Component {
     );
   }
 
+  renderCodeSandBoxButton() {
+    return (
+      <Fragment>
+        <EuiSpacer size="s" />
+        <CodeSandboxLink content={this.props.source[0].code}>
+          <EuiButtonEmpty size="xs" iconType="logoCodesandbox">
+            Try out this demo on Code Sandbox
+          </EuiButtonEmpty>
+        </CodeSandboxLink>
+        <EuiSpacer size="s" />
+      </Fragment>
+    );
+  }
+
   render() {
     const chrome = this.renderChrome();
 

src-docs/src/services/index.js

@@ -2,4 +2,10 @@ export { renderToHtml } from './string/render_to_html';
 
 export { translateUsingPseudoLocale } from './string/pseudo_locale_translator';
 
+export {
+  cleanEuiImports,
+  hasDisplayToggles,
+  listExtraDeps,
+} from './string/clean_imports';
+
 export { registerTheme, applyTheme } from './theme/theme';

src-docs/src/services/string/clean_imports.js

@@ -0,0 +1,27 @@
+export const hasDisplayToggles = code => {
+  return /DisplayToggles/.test(code);
+};
+
+export const cleanEuiImports = code => {
+  return code
+    .replace(/(from )'(..\/)+src\/components(\/?';)/, "from '@elastic/eui';")
+    .replace(
+      /(from )'(..\/)+src\/services(\/?';)/,
+      "from '@elastic/eui/lib/services';"
+    );
+};
+
+export const listExtraDeps = code => {
+  return [
+    ...code.matchAll(
+      // Match anything not directly calling eui (like lib dirs)
+      /(import)(?!.*elastic\/eui)\s.*?'(?<import>[^.].*?)'/g
+    ),
+  ]
+    .map(x => x.groups.import)
+    .reduce((deps, dep) => {
+      // Hack because the docs are locked to a specific version of React Router
+      deps[dep] = dep === 'react-router' ? '^3.2.5' : 'latest';
+      return deps;
+    }, {});
+};

src-docs/src/views/facet/facet_layout.js

@@ -9,7 +9,7 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
-import { VISUALIZATION_COLORS } from '../../../../src/services/color/visualization_colors';
+import { euiPaletteColorBlind } from '../../../../src/services';
 
 export default class extends Component {
   constructor(props) {
@@ -29,42 +29,42 @@ export default class extends Component {
         id: 'facet0',
         label: 'Simple, no icon',
         quantity: 6,
-        iconColor: VISUALIZATION_COLORS[0],
+        iconColor: euiPaletteColorBlind[0],
         onClick: this.facet0Clicked,
       },
       {
         id: 'facet1',
         label: 'Label or color indicator',
         quantity: 60,
-        iconColor: VISUALIZATION_COLORS[1],
+        iconColor: euiPaletteColorBlind[1],
         onClick: this.facet1Clicked,
       },
       {
         id: 'facet2',
         label: 'Disable all others',
         quantity: 600,
-        iconColor: VISUALIZATION_COLORS[2],
+        iconColor: euiPaletteColorBlind[2],
         onClick: this.facet2Clicked,
       },
       {
         id: 'facet3',
         label: 'Avatars instead of icons',
         quantity: 60,
-        iconColor: VISUALIZATION_COLORS[3],
+        iconColor: euiPaletteColorBlind[3],
         onClick: this.facet3Clicked,
       },
       {
         id: 'facet4',
         label: 'Show all as loading',
         quantity: 6,
-        iconColor: VISUALIZATION_COLORS[4],
+        iconColor: euiPaletteColorBlind[4],
         onClick: this.facet4Clicked,
       },
       {
         id: 'facet5',
         label: 'Just here to show truncation of really long labels',
         quantity: 0,
-        iconColor: VISUALIZATION_COLORS[5],
+        iconColor: euiPaletteColorBlind[5],
       },
     ];
   }

src-docs/src/views/flex/flex_group.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 
-import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
-import { EuiSpacer } from '../../../../src/components/spacer';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  // @ts-ignore
+} from '../../../../src/components';
 
 export default () => (
   <EuiFlexGroup>

src-docs/src/views/flyout/flyout.js

@@ -10,7 +10,7 @@ import {
   EuiCodeBlock,
 } from '../../../../src/components';
 
-export class Flyout extends Component {
+export default class extends Component {
   constructor(props) {
     super(props);