From 63207be6ebc41b25fcc4eb1c486bf7c66a87fd78 Mon Sep 17 00:00:00 2001 From: Levi Thomason Date: Sun, 2 Oct 2016 15:41:06 -0700 Subject: [PATCH 1/3] fix(config): add copy-to-clipboard to vendors --- config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/config.js b/config.js index ed0e023208..8e35c29b00 100644 --- a/config.js +++ b/config.js @@ -72,6 +72,7 @@ config = Object.assign({}, config, { 'brace/mode/html', 'brace/theme/tomorrow', 'classnames', + 'copy-to-clipboard', 'faker', 'react', 'react-ace', From f3eb2ab1ed90f4a6a1b76ad6c8e361490651e943 Mon Sep 17 00:00:00 2001 From: Levi Thomason Date: Sun, 2 Oct 2016 15:41:27 -0700 Subject: [PATCH 2/3] feat(ComponentExample): add github links to editor --- .../ComponentDoc/ComponentExample.js | 117 +++++++++++++----- 1 file changed, 86 insertions(+), 31 deletions(-) diff --git a/docs/app/Components/ComponentDoc/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample.js index cc4c9686d0..cc609c62c4 100644 --- a/docs/app/Components/ComponentDoc/ComponentExample.js +++ b/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 { Button, 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 ( + + + + + + + + + ) + } + + renderJSX = () => { const { error, showCode, sourceCode } = this.state if (!showCode) return @@ -199,26 +273,7 @@ export default class ComponentExample extends Component { return ( - - + {this.renderJSXControls()} {exampleElement} - {this.renderCode()} + {this.renderJSX()} {this.renderHTML()} ) From f18cb39a730bbaa30fc13b50c75286d94d96af08 Mon Sep 17 00:00:00 2001 From: Levi Thomason Date: Sun, 2 Oct 2016 18:58:17 -0700 Subject: [PATCH 3/3] fix(ComponentExample): remove unused Button import --- docs/app/Components/ComponentDoc/ComponentExample.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/app/Components/ComponentDoc/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample.js index cc609c62c4..64391152b6 100644 --- a/docs/app/Components/ComponentDoc/ComponentExample.js +++ b/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 { Button, Divider, Grid, Icon, Header, Menu } from 'src' +import { Divider, Grid, Icon, Header, Menu } from 'src' import Editor from 'docs/app/Components/Editor/Editor' import babelrc from '.babelrc'