Feature/move examples to top level (#6)

Moved examples to top level

.storybook/config.js

@@ -1,6 +1,6 @@
 import { configure } from '@storybook/html';
 
-const stories = require.context('../src/examples', true, /\.stories\.js$/);
+const stories = require.context('../examples', true, /\.stories\.js$/);
 
 function loadStories() {
     stories.keys().forEach(fileName => stories(fileName));

README.md

@@ -23,6 +23,9 @@ I wanted to use [@storybook/html](https://www.npmjs.com/package/@storybook/html)
 
 Enter `copy-code-block`, a solution to display code in the browser and copy it to the clipboard.
 
+But `copy-code-block` isn't just for storybook, it'll work for
+anywhere javascript is used.
+
 ## Credit
 Couldn't have done this without [kgroat](https://github.com/kgroat).
 
@@ -60,7 +63,7 @@ The options argument is an object. There are five special colors:
 
 These are the colors used for `color`, `backgroundColor`, and `borderColor` for the entire code block as well as the copy button.  If no `buttonTextColor` or `buttonBackground` is supplied, they fall back to `textColor` or `background` respectively.
 
-You can find the defaults [here](./src/helpers.js#L64).
+You can find the defaults [here](./src/utils.js#L58).
 
 ### Syntax highlighting
 If you want syntax highlighting, you'll need to `npm install highlight.js`.
@@ -81,14 +84,10 @@ copyCodeBlock(anHtmlFile, { lang: 'html' });
 
 If you supply `lang: 'auto'`, this will tell highlight.js to attempt to automatically choose a language from whichever ones are loaded.
 
-NOTE: the `textColor` option doesn't affect the text color when using syntax
-highlighting. It will still affect the `.copyButton`, assuming you haven't used
-`buttonTextColor` or `copyButtonOutline`.
-
 #### Syntax highlighting for specific code segments.
-For an idea of how to do this look at [the custom html example](./src/examples/customHtml.js) or [the custom rust example](./src/examples/rust.stories.js#L23).
+For an idea of how to do this look at [the custom html example](./examples/customHtml.js) or [the custom rust example](./examples/rust.stories.js#L23).
 
-Note that any camelCase color gets converted to hyphen-case, such as `metaString` getting converted to `meta-string` in the rust example.
+NOTE: that any camelCase color gets converted to hyphen-case, such as `metaString` getting converted to `meta-string` in the rust example.
 
 For a complete list of `hljs` classes, see [their CSS class reference](https://github.com/highlightjs/highlight.js/blob/master/docs/css-classes-reference.rst#stylable-classes).  To see which classes are used by a specific language, find the language [from the complete list](https://github.com/highlightjs/highlight.js/tree/master/src/languages) and look for properties called `className`.
 
@@ -97,6 +96,7 @@ Another option for styling the highlighted code is to choose any of [hightlight.
 ```javascript
 import 'highlight.js/styles/a11y-light.css';
 ```
+NOTE: using `textColor` may override the built-in syntax highlighting.
 
 ## Dev
 **Requirements:** `node` 6.0.0 or higher, `npm` 3.8.6 or higher

src/examples/1html.stories.js → examples/1html.stories.js

@@ -1,13 +1,12 @@
-
 import { storiesOf } from '@storybook/html';
-import copyCodeBlock from '../copyCodeBlock';
+import copyCodeBlock from '../src/copyCodeBlock';
 import { customStyles, customHtml, opts } from './customHtml';
-import { usageExample, usageExampleJsHighlight } from '../helpers';
+import { usageExample, usageExampleJsHighlight } from './helpers';
 import hljs from 'highlight.js/lib/highlight';
 
 // Register languages for hljs
 hljs.registerLanguage('html', require('highlight.js/lib/languages/xml'));
-hljs.registerLanguage('js', require('highlight.js/lib/languages/javascript'));
+hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
 
 const a11yLightStyle = require('!url-loader!highlight.js/styles/a11y-light.css');
 const draculaStyle = require('!url-loader!highlight.js/styles/dracula.css');
@@ -51,9 +50,9 @@ storiesOf('HTML', module)
             from highlight.js, by adding it to the HTML's stylesheets.
         </p>
         <h2>Example Code</h2>
-        ${copyCodeBlock(htmlExample, {lang: 'html'}) /* Run through hljs, no custom styles */}
+        ${copyCodeBlock(htmlExample, {lang: 'xml'}) /* Run through hljs, no custom styles */}
         <h2>Usage</h2>
-        ${copyCodeBlock(usageExample({lang: 'html'}), usageExampleJsHighlight)}
+        ${copyCodeBlock(usageExample({lang: 'xml'}), usageExampleJsHighlight)}
     `)
     .add('Syntax highlighting & custom styles', () => `
         <link rel="stylesheet" href="${a11yLightStyle}">

src/examples/css.stories.js → examples/css.stories.js

@@ -1,12 +1,12 @@
 import { storiesOf } from '@storybook/html';
-import copyCodeBlock from '../copyCodeBlock';
+import copyCodeBlock from '../src/copyCodeBlock';
 import { customStyles } from './customHtml';
-import { usageExample, usageExampleJsHighlight } from '../helpers';
+import { usageExample, usageExampleJsHighlight } from './helpers';
 import hljs from 'highlight.js/lib/highlight';
 
 // Register languages for hljs
 hljs.registerLanguage('css', require('highlight.js/lib/languages/css'));
-hljs.registerLanguage('js', require('highlight.js/lib/languages/javascript'));
+hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
 
 const a11yLightStyle = require('!url-loader!highlight.js/styles/a11y-light.css');
 const draculaStyle = require('!url-loader!highlight.js/styles/dracula.css');

src/examples/customHtml.js → examples/customHtml.js

@@ -1,7 +1,7 @@
-import copyCodeBlock from '../copyCodeBlock';
+import copyCodeBlock from '../src/copyCodeBlock';
 
 export const opts = {
-    lang: 'html',
+    lang: 'xml',
     colors: {
         background: '#222',
         textColor: '#fff',

examples/helpers.js

@@ -0,0 +1,41 @@
+//////////////// STORYBOOK EXAMPLES //////////////// 
+const displayOpts = opts => '{' + Object.entries(opts).map(arr => {
+    const key = arr[0];
+    const val = arr[1];
+
+    if (typeof val === "object") { return ` ${key}: ${displayOpts(val)}`; }
+    if (key.indexOf('-') > 0) { return ` '${key}': '${val}'` }
+
+    return ` ${key}: '${val}'`;
+}) + '}';
+
+export const usageExample = (opts = null) => {
+    const options = !opts ? '' : `const options = ${displayOpts(opts)};`;
+    const optionsExample = !opts ? '' : ', options';
+
+const hljs = !opts || !opts.lang ? '' : `
+import hljs from 'highlight.js/lib/highlight';
+// Register language for hljs
+hljs.registerLanguage('${opts.lang}', require('highlight.js/lib/langs/${opts.lang}'));
+`;
+
+return `
+import copyCodeBlock from 'copyCodeBlock';
+${hljs}
+
+const htmlString = 'Just pretend this is the Example Code from above';
+${options}
+copyCodeBlock(htmlString${optionsExample});
+`
+};
+
+export const usageExampleJsHighlight = {
+    lang: 'javascript',
+    colors: {
+        background: '#282a36',
+        textColor: '#fff',
+        comment: 'salmon',
+        built_in: '#fff',
+        attr: 'lightblue'
+    }
+};

src/examples/javascript.stories.js → examples/javascript.stories.js

@@ -1,11 +1,11 @@
 import { storiesOf } from '@storybook/html';
-import copyCodeBlock from '../copyCodeBlock';
+import copyCodeBlock from '../src/copyCodeBlock';
 import { customStyles } from './customHtml';
-import { usageExample, usageExampleJsHighlight } from '../helpers';
+import { usageExample, usageExampleJsHighlight } from './helpers';
 import hljs from 'highlight.js/lib/highlight';
 
 // Register languages for hljs
-hljs.registerLanguage('js', require('highlight.js/lib/languages/javascript'));
+hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
 
 const a11yLightStyle = require('!url-loader!highlight.js/styles/a11y-light.css');
 const draculaStyle = require('!url-loader!highlight.js/styles/dracula.css');
@@ -54,9 +54,9 @@ storiesOf('Javascript', module)
             from highlight.js, by adding it to the HTML's stylesheets.
         </p>
         <h2>Example Code</h2>
-        ${copyCodeBlock(jsExample, {lang: 'js'}) /* Run through hljs, no custom styles */}
+        ${copyCodeBlock(jsExample, {lang: 'javascript'}) /* Run through hljs, no custom styles */}
         <h2>Usage</h2>
-        ${copyCodeBlock(usageExample({lang: 'js'}), usageExampleJsHighlight)}
+        ${copyCodeBlock(usageExample({lang: 'javascript'}), usageExampleJsHighlight)}
     `)
     .add('Syntax highlighting & custom styles', () => `
         <link rel="stylesheet" href="${a11yLightStyle}">

src/examples/rust.stories.js → examples/rust.stories.js

@@ -1,11 +1,11 @@
 import { storiesOf } from '@storybook/html';
-import copyCodeBlock from '../copyCodeBlock';
-import { usageExample, usageExampleJsHighlight } from '../helpers';
+import copyCodeBlock from '../src/copyCodeBlock';
+import { usageExample, usageExampleJsHighlight } from './helpers';
 import hljs from 'highlight.js/lib/highlight';
 
 // Register languages for hljs
 hljs.registerLanguage('rust', require('highlight.js/lib/languages/rust'));
-hljs.registerLanguage('js', require('highlight.js/lib/languages/javascript'));
+hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
 
 const a11yLightStyle = require('!url-loader!highlight.js/styles/a11y-light.css');
 const draculaStyle = require('!url-loader!highlight.js/styles/dracula.css');

src/copyCodeBlock.js

@@ -1,4 +1,4 @@
-import { getDisplayString, getClipboardString } from './helpers';
+import { getDisplayString, getClipboardString } from './utils';
 import styles from './styles';
 
 export default (string, opts = {}) => {

src/styles.js

@@ -1,6 +1,6 @@
 import csjs from 'csjs';
 import insertCss from 'insert-css';
-import { getMergedOptions, mergeColors } from './helpers';
+import { getMergedOptions, mergeColors } from './utils';
 
 const ignoredColors = [
     'textColor',
@@ -70,11 +70,14 @@ export default customOptions => {
 
             return `.${cssMap.container} .hljs-${type} { color: ${colors[name]}; }`;
         }).join('\n');
+    const hasTextColorOverride = customOptions.colors && !!customOptions.colors.textColor
 
     // hljs overrides
     insertCss(
         csjs.getCss(cssMap) + hljsStyles + `
-            .${cssMap.container} .hljs { background: ${colors.background}; }
+            .${cssMap.container} .hljs {
+                background: ${colors.background};
+                color: ${hasTextColorOverride ? colors.textColor : ''};
             .${cssMap.container} .hljs-emphasis { font-style: italic; }
             .${cssMap.container} .hljs-strong { font-weight: bold; }
         `

src/helpers.js → src/utils.js

@@ -1,5 +1,4 @@
 //////////////// COPY CODE BLOCK ////////////////
-
 // use the ambient hljs by default
 let hljs = window.hljs;
 
@@ -79,45 +78,3 @@ export const getMergedOptions = customOptions => {
 export const mergeColors = customColors => {
     return {...defaultColors, ...customColors};
 };
-
-//////////////// STORYBOOK EXAMPLES //////////////// 
-const displayOpts = opts => '{' + Object.entries(opts).map(arr => {
-    const key = arr[0];
-    const val = arr[1];
-
-    if (typeof val === "object") { return ` ${key}: ${displayOpts(val)}`; }
-    if (key.indexOf('-') > 0) { return ` '${key}': '${val}'` }
-
-    return ` ${key}: '${val}'`;
-}) + '}';
-
-export const usageExample = (opts = null) => {
-    const options = !opts ? '' : `const options = ${displayOpts(opts)};`;
-    const optionsExample = !opts ? '' : ', options';
-
-const hljs = !opts || !opts.lang ? '' : `
-import hljs from 'highlight.js/lib/highlight';
-// Register language for hljs
-hljs.registerLanguage('${opts.lang}', require('highlight.js/lib/langs/${opts.lang}'));
-`;
-
-return `
-import copyCodeBlock from 'copyCodeBlock';
-${hljs}
-
-const htmlString = 'Just pretend this is the Example Code from above';
-${options}
-copyCodeBlock(htmlString${optionsExample});
-`
-};
-
-export const usageExampleJsHighlight = {
-    lang: 'js',
-    colors: {
-        background: '#282a36',
-        textColor: '#fff',
-        comment: 'salmon',
-        built_in: '#fff',
-        attr: 'lightblue'
-    }
-};