Playground System for Live Documentation

package.json

@@ -66,6 +66,7 @@
     "react-focus-lock": "^1.17.7",
     "react-input-autosize": "^2.2.2",
     "react-is": "~16.3.0",
+    "react-view": "^2.3.2",
     "react-virtualized": "^9.21.2",
     "resize-observer-polyfill": "^1.5.0",
     "tabbable": "^3.0.0",

src-docs/src/components/guide_page/guide_page.js

@@ -17,6 +17,7 @@ export const GuidePage = ({
   title,
   intro,
   componentLinkTo,
+  componentLinkToText,
   isBeta,
 }) => {
   const betaBadge = isBeta ? (
@@ -42,7 +43,7 @@ export const GuidePage = ({
           {componentLinkTo && (
             <EuiFlexItem grow={false}>
               <EuiButton href={getRouterLinkProps(componentLinkTo).href}>
-                View component code
+                {componentLinkToText || 'View component code'}
               </EuiButton>
             </EuiFlexItem>
           )}

src-docs/src/index.js

@@ -13,8 +13,11 @@ import { AppContainer } from './views/app_container';
 import { HomeView } from './views/home/home_view';
 import { NotFoundView } from './views/not_found/not_found_view';
 import { registerTheme } from './services';
+import { PlaygroundView } from './views/playground_view';
 
 import Routes from './routes';
+import { childRoutes as playgrounds } from './playground_routes';
+
 import themeLight from './theme_light.scss';
 import themeDark from './theme_dark.scss';
 import themeAmsterdamLight from './theme_amsterdam_light.scss';
@@ -31,11 +34,6 @@ registerTheme('amsterdam-dark', [themeAmsterdamDark]);
 const store = configureStore();
 
 const childRoutes = [].concat(Routes.getAppRoutes());
-childRoutes.push({
-  path: '*',
-  component: NotFoundView,
-  name: 'Page Not Found',
-});
 
 const routes = [
   {
@@ -62,8 +60,24 @@ ReactDOM.render(
               );
             return null;
           })}
+          {playgrounds.map(({ name, path, component }, i) => {
+            if (component)
+              return (
+                <Route key={`play__${i}`} exact path={`/playgrounds/${path}`}>
+                  <PlaygroundView currentRoute={{ name, path }}>
+                    {createElement(component, {})}
+                  </PlaygroundView>
+                </Route>
+              );
+            return null;
+          })}
+          <Route key="Page Not Found" exact path={'*'}>
+            <AppContainer currentRoute={{ name: 'Page Not Found', path: '*' }}>
+              {createElement(NotFoundView, {})}
+            </AppContainer>
+          </Route>
         </Switch>
-      </Router>{' '}
+      </Router>
     </ThemeProvider>
   </Provider>,
   document.getElementById('guide')

src-docs/src/playground.js

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import {
+  useView,
+  Compiler,
+  Error,
+  ActionButtons,
+  Placeholder,
+} from 'react-view';
+import 'brace/mode/jsx';
+import 'brace/theme/github';
+
+import { EuiCodeEditor, EuiSpacer } from '../../src/components';
+import Knobs from './services/playground/knobs';
+
+export default config => {
+  if (config.props) {
+    if (config.props.className) config.props.className.hidden = true;
+    if (config.props['data-test-subj'])
+      config.props['data-test-subj'].hidden = true;
+    if (config.props['aria-label']) config.props['aria-label'].hidden = true;
+  }
+
+  const params = useView(config);
+  return (
+    <React.Fragment>
+      <Compiler
+        {...params.compilerProps}
+        minHeight={62}
+        placeholder={Placeholder}
+      />
+      <Error msg={params.errorProps.msg} isPopup />
+      <Knobs {...params.knobProps} />
+      <EuiSpacer />
+      <EuiCodeEditor
+        mode="jsx"
+        theme="github"
+        width="100%"
+        value={params.editorProps.code}
+        onChange={params.editorProps.onChange}
+        setOptions={{
+          fontSize: '14px',
+          enableBasicAutocompletion: true,
+          enableSnippets: true,
+          enableLiveAutocompletion: true,
+        }}
+        onBlur={() => {
+          console.log('blur');
+        }} // eslint-disable-line no-console
+        aria-label="Code Editor"
+      />
+      <Error {...params.errorProps} />
+      <ActionButtons {...params.actions} />
+    </React.Fragment>
+  );
+};

src-docs/src/playground_routes.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import playground from './playground';
+import buttonConfig from './views/button/playground';
+import accordionConfig from './views/accordion/playground';
+import avatarConfig from './views/avatar/playground';
+import beaconConfig from './views/beacon/playground';
+import calloutConfig from './views/call_out/playground';
+import healthConfig from './views/health/playground';
+import statConfig from './views/stat/playground';
+import titleConfig from './views/title/playground';
+import imageConfig from './views/image/playground';
+
+export const childRoutes = [
+  {
+    path: 'accordion',
+    component: () => playground(accordionConfig()),
+    name: 'EuiAccordion',
+  },
+  {
+    path: 'avatar',
+    component: () => playground(avatarConfig()),
+    name: 'EuiAvatar',
+  },
+  {
+    path: 'beacon',
+    component: () => playground(beaconConfig()),
+    name: 'EuiBeacon',
+  },
+  {
+    path: 'button',
+    component: () => playground(buttonConfig()),
+    name: 'EuiButton',
+  },
+  {
+    path: 'callout',
+    component: () => playground(calloutConfig()),
+    name: 'EuiCallOut',
+  },
+  {
+    path: 'image',
+    component: () => playground(imageConfig()),
+    name: 'EuiImage',
+  },
+  {
+    path: 'health',
+    component: () => playground(healthConfig()),
+    name: 'EuiHealth',
+  },
+  {
+    path: 'stat',
+    component: () => playground(statConfig()),
+    name: 'EuiStat',
+  },
+  {
+    path: 'title',
+    component: () => playground(titleConfig()),
+    name: 'EuiTitle',
+  },
+  {
+    path: '*',
+    component: () => <div>Not Found</div>,
+    name: 'Page Not Found',
+  },
+];

src-docs/src/routes.js

@@ -249,7 +249,15 @@ const createExample = (example, customTitle) => {
     );
   }
 
-  const { title, intro, sections, beta, isNew } = example;
+  const {
+    title,
+    intro,
+    sections,
+    beta,
+    isNew,
+    componentLinkTo,
+    componentLinkToText,
+  } = example;
   sections.forEach(section => {
     section.id = slugify(section.title || title);
   });
@@ -263,7 +271,12 @@ const createExample = (example, customTitle) => {
 
   const component = () => (
     <EuiErrorBoundary>
-      <GuidePage title={title} intro={intro} isBeta={beta}>
+      <GuidePage
+        title={title}
+        intro={intro}
+        isBeta={beta}
+        componentLinkToText={componentLinkToText}
+        componentLinkTo={componentLinkTo}>
         {renderedSections}
       </GuidePage>
     </EuiErrorBoundary>