Theme support

package.json

@@ -29,9 +29,9 @@
     "testURL": "http://localhost"
   },
   "dependencies": {
+    "copy-to-clipboard": "^3.0.8",
     "js-beautify": "^1.8.8",
     "prismjs": "^1.15.0",
-    "react-copy-to-clipboard": "^5.0.1",
     "react-element-to-jsx-string": "^14.0.2"
   },
   "devDependencies": {
@@ -40,16 +40,15 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
-    "@storybook/addon-options": "^5.0.1",
-    "@storybook/addon-storyshots": "^5.0.1",
-    "@storybook/addons": "^5.0.1",
-    "@storybook/channels": "^5.0.1",
-    "@storybook/core-events": "^5.0.1",
-    "@storybook/react": "^5.0.1",
+    "@storybook/addon-options": "^5.0.3",
+    "@storybook/addon-storyshots": "^5.0.3",
+    "@storybook/addons": "^5.0.3",
+    "@storybook/channels": "^5.0.3",
+    "@storybook/core-events": "^5.0.3",
+    "@storybook/react": "^5.0.3",
     "@types/js-beautify": "^1.8.0",
     "@types/prismjs": "^1.9.1",
     "@types/react": "^16.8.8",
-    "@types/react-copy-to-clipboard": "^4.2.6",
     "@types/storybook__react": "^4.0.1",
     "auto": "^4.8.11",
     "babel-core": "^7.0.0-bridge.0",

src/jsx.tsx

@@ -1,33 +1,20 @@
-import React, { CSSProperties } from 'react';
-import CopyToClipboard from 'react-copy-to-clipboard';
+import React from 'react';
+import { ActionBar } from '@storybook/components';
+import { styled } from '@storybook/theming';
+import copy from 'copy-to-clipboard';
+import Theme from './theme';
 import Prism from './prism';
 import { Listener } from './register';
 
-const styles: Record<string, CSSProperties> = {
-  container: {
-    flex: 1,
-    padding: '10px',
-    position: 'relative'
-  },
-  btn: {
-    position: 'absolute',
-    bottom: 0,
-    right: 0,
-    border: 'none',
-    borderTop: 'solid 1px rgba(0, 0, 0, 0.2)',
-    borderLeft: 'solid 1px rgba(0, 0, 0, 0.2)',
-    background: 'rgba(255, 255, 255, 0.5)',
-    padding: '5px 10px',
-    borderRadius: '4px 0 0 0',
-    color: 'rgba(0, 0, 0, 0.5)',
-    textTransform: 'uppercase',
-    outline: 'none',
-    cursor: 'pointer'
-  },
-  pre: {
-    flex: 1
-  }
-};
+const Container = styled.div({
+  height: '100%',
+  overflow: 'auto',
+  width: '100%'
+});
+
+const Code = styled.pre({
+  flex: 1
+});
 
 interface JSXProps {
   active: boolean;
@@ -47,10 +34,6 @@ const JSX: React.FunctionComponent<JSXProps> = props => {
     });
   }, []);
 
-  if (!props.active) {
-    return null;
-  }
-
   let code = '';
   let highlighted = '';
 
@@ -59,19 +42,23 @@ const JSX: React.FunctionComponent<JSXProps> = props => {
     highlighted = code ? Prism.highlight(code, Prism.languages.jsx) : '';
   }
 
-  return (
-    <div style={styles.container}>
-      <CopyToClipboard text={code}>
-        <button style={styles.btn} disabled={!code}>
-          Copy
-        </button>
-      </CopyToClipboard>
-      <pre
-        style={styles.pre}
-        dangerouslySetInnerHTML={{ __html: highlighted }}
-      />
-    </div>
-  );
+  const copyJsx = React.useCallback(() => copy(code), [code]);
+
+  return props.active ? (
+    <Container>
+      <Theme>
+        <Code dangerouslySetInnerHTML={{ __html: highlighted }} />
+        <ActionBar
+          actionItems={[
+            {
+              title: 'Copy',
+              onClick: copyJsx
+            }
+          ]}
+        />
+      </Theme>
+    </Container>
+  ) : null;
 };
 
 export default JSX;

src/prism.ts

@@ -5,10 +5,4 @@ import 'prismjs/components/prism-clike';
 import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-jsx';
 
-const prismStyle = document.createElement('link');
-prismStyle.rel = 'stylesheet';
-prismStyle.type = 'text/css';
-prismStyle.href = 'https://unpkg.com/[email protected]/themes/prism.css';
-document.body.appendChild(prismStyle);
-
 export default Prism;