feat(ComponentExample): add github links to editor

config.js

@@ -72,6 +72,7 @@ config = Object.assign({}, config, {
     'brace/mode/html',
     'brace/theme/tomorrow',
     'classnames',
+    'copy-to-clipboard',
     'faker',
     'react',
     'react-ace',

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -6,7 +6,7 @@ import { html } from 'js-beautify'
 import copyToClipboard from 'copy-to-clipboard'
 
 import { exampleContext } from 'docs/app/utils'
-import { Label, Divider, Grid, Icon, Header } from 'src'
+import { Divider, Grid, Icon, Header, Menu } from 'src'
 import Editor from 'docs/app/Components/Editor/Editor'
 import babelrc from '.babelrc'
 
@@ -81,16 +81,20 @@ export default class ComponentExample extends Component {
     })
   }
 
-  copyToClipboard = () => {
+  copyJSX = () => {
     const { sourceCode } = this.state
     copyToClipboard(sourceCode)
-    alert('Copied to clipboard!')
+    this.setState({ copied: true })
+    setTimeout(() => this.setState({ copied: false }), 1000)
   }
 
-  resetEditor = () => {
-    const sourceCode = this.getOriginalSourceCode()
-    this.setState({ sourceCode })
-    this.renderSourceCode()
+  resetJSX = () => {
+    const { sourceCode } = this.state
+    const original = this.getOriginalSourceCode()
+    if (sourceCode !== original && confirm('Loose your changes?')) {
+      this.setState({ sourceCode: original })
+      this.renderSourceCode()
+    }
   }
 
   getOriginalSourceCode = () => {
@@ -155,8 +159,8 @@ export default class ComponentExample extends Component {
     // consider everything after the imports to be the body
     // remove `export` statements except `export default class|function`
     const body = _.get(/import[\s\S]*from '\w+'([\s\S]*)/.exec(sourceCode), '[1]', '')
-      .replace(/export\s+default\s+\w+([\s\n]+)?/, '')  // remove `export default Foo` statements (lines)
-      .replace(/export\s+default\s+/, '')             // remove `export default`
+      .replace(/export\s+default\s+(?!class|function)\w+([\s\n]+)?/, '')  // remove `export default Foo` statements
+      .replace(/export\s+default\s+/, '')                                 // remove `export default ...`
 
     const IIFE = `(function() {\n${imports}${body}return ${defaultExport}\n}())`
 
@@ -188,7 +192,77 @@ export default class ComponentExample extends Component {
     this.renderSourceCode()
   }
 
-  renderCode = () => {
+  renderJSXControls = () => {
+    const { examplePath } = this.props
+    const { copied, error } = this.state
+
+    // get component name from file path:
+    // elements/Button/Types/ButtonButtonExample
+    const componentName = examplePath.split(__PATH_SEP__)[1]
+
+    const color = error ? 'red' : 'black'
+    const ghEditHref = `https://github.com/TechnologyAdvice/stardust/edit/master/docs/app/Examples/${examplePath}.js`
+    const ghBugHref = [
+      'https://github.com/TechnologyAdvice/stardust/issues/new?',
+      _.map({
+        title: `fix(${componentName}): your description`,
+        body: [
+          '**Steps to Reproduce**',
+          '1. Do something',
+          '2. Do something else.',
+          '',
+          '**Expected**',
+          `The ${componentName} should do this`,
+          '',
+          '**Result**',
+          `The ${componentName} does not do this`,
+          '',
+          '**Testcase**',
+          `The docs show the issue: ${window.location.href}`,
+          'Fork this to get started: http://codepen.io/levithomason/pen/ZpBaJX',
+        ].join('\n'),
+      }, (val, key) => `${key}=${encodeURIComponent(val)}`).join('&'),
+    ].join('')
+
+    return (
+      <Divider horizontal>
+        <Menu text>
+          <Menu.Item
+            active={copied || error} // to show the color
+            color={copied ? 'green' : color}
+            onClick={this.copyJSX}
+            icon={!copied && 'copy'}
+            content={copied ? 'Copied!' : 'Copy'}
+          />
+          <Menu.Item
+            active={error} // to show the color
+            color={color}
+            icon='refresh'
+            content='Reset'
+            onClick={this.resetJSX}
+          />
+          <Menu.Item
+            active={error} // to show the color
+            color={color}
+            icon='github'
+            content='Edit'
+            href={ghEditHref}
+            target='_blank'
+          />
+          <Menu.Item
+            active={error} // to show the color
+            color={color}
+            icon='bug'
+            content='Issue'
+            href={ghBugHref}
+            target='_blank'
+          />
+        </Menu>
+      </Divider>
+    )
+  }
+
+  renderJSX = () => {
     const { error, showCode, sourceCode } = this.state
     if (!showCode) return
 
@@ -199,26 +273,7 @@ export default class ComponentExample extends Component {
 
     return (
       <Grid.Column style={style}>
-        <Divider horizontal>
-          <Label
-            as='a'
-            basic
-            horizontal
-            color={error ? 'red' : 'green'}
-            icon='copy'
-            content={error ? 'See Error' : 'JSX'}
-            onClick={this.copyToClipboard}
-          />
-          <Label
-            as='a'
-            basic
-            horizontal
-            color={error ? 'red' : 'green'}
-            icon='refresh'
-            content={error ? 'See Error' : 'JSX'}
-            onClick={this.resetEditor}
-          />
-        </Divider>
+        {this.renderJSXControls()}
         <Editor
           id={`${this.getKebabExamplePath()}-jsx`}
           value={sourceCode}
@@ -301,7 +356,7 @@ export default class ComponentExample extends Component {
         >
           {exampleElement}
         </Grid.Column>
-        {this.renderCode()}
+        {this.renderJSX()}
         {this.renderHTML()}
       </Grid>
     )