Import/export config (#771)

* import export config

* allow rendering button as link

* pass all props to button component

* fix invalid JSON path

* prevent dragging download URL

* address concerns

components/Button.js

@@ -5,9 +5,7 @@ import { COLORS } from '../lib/constants'
 
 const Button = ({
   id,
-  'data-cy': cypressElementId,
   onClick = () => {},
-  className = '',
   background = COLORS.BLACK,
   color = COLORS.SECONDARY,
   hoverBackground = COLORS.HOVER,
@@ -18,25 +16,19 @@ const Button = ({
   border,
   center,
   large,
-  style = {},
   flex = 1,
   padding = 0,
   margin = 0,
-  title
+  title,
+  Component = 'button',
+  ...props
 }) => (
-  <button
-    id={id}
-    onClick={onClick}
-    className={className}
-    disabled={disabled}
-    style={style}
-    data-cy={cypressElementId}
-  >
+  <Component id={id} onClick={onClick} disabled={disabled} {...props}>
     {title && <VisuallyHidden>{title}</VisuallyHidden>}
     {children}
     <style jsx>
       {`
-        button {
+        ${Component} {
           display: flex;
           flex: ${flex};
           background-color: ${background};
@@ -55,18 +47,17 @@ const Button = ({
           font-size: ${large ? '14px' : '12px'};
         }
 
-        button:hover,
-        button:focus {
+        ${Component}:hover, ${Component}:focus {
           background-color: ${hoverBackground} !important;
           color: ${hoverColor || color};
         }
 
-        button:focus {
+        ${Component}:focus {
           box-shadow: ${border ? `inset 0px 0px 0px 2px ${color}` : 'initial'};
         }
       `}
     </style>
-  </button>
+  </Component>
 )
 
 export default Button

components/Settings.js

@@ -9,7 +9,7 @@ import Popout, { managePopout } from './Popout'
 import Button from './Button'
 import Presets from './Presets'
 import { COLORS, DEFAULT_PRESETS } from '../lib/constants'
-import { toggle, getPresets, savePresets, generateId } from '../lib/util'
+import { toggle, getPresets, savePresets, generateId, fileToJSON } from '../lib/util'
 import SettingsIcon from './svg/Settings'
 import * as Arrows from './svg/Arrows'
 
@@ -140,10 +140,42 @@ const TypeSettings = React.memo(
 
 const resetButtonStyle = { borderTop: `1px solid ${COLORS.SECONDARY}` }
 
-const MiscSettings = React.memo(({ format, reset }) => {
+const MiscSettings = React.memo(({ format, reset, applyPreset, settings }) => {
+  const input = React.useRef(null)
+  let download
+  try {
+    download = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(settings))}`
+  } catch (error) {
+    // pass
+  }
   return (
     <div className="settings-content">
-      <Button center onClick={format}>
+      <div className="row">
+        <input
+          hidden
+          ref={input}
+          type="file"
+          accept=".json"
+          onChange={async e => {
+            const json = await fileToJSON(e.target.files[0])
+            if (json) {
+              applyPreset(json)
+            }
+          }}
+        />
+        <Button
+          width="50%"
+          center
+          style={{ borderRight: `1px solid ${COLORS.SECONDARY}` }}
+          onClick={() => input.current.click()}
+        >
+          Import config
+        </Button>
+        <Button center Component="a" href={download} download="carbon-config.json">
+          Export config
+        </Button>
+      </div>
+      <Button center onClick={format} style={resetButtonStyle}>
         Prettify code
       </Button>
       <Button center color={COLORS.RED} onClick={reset} style={resetButtonStyle}>
@@ -151,10 +183,19 @@ const MiscSettings = React.memo(({ format, reset }) => {
       </Button>
       <style jsx>
         {`
+          .row {
+            display: flex;
+            flex: 1;
+          }
           .settings-content {
             display: flex;
             flex-direction: column;
           }
+          .settings-content :global(a) {
+            display: flex;
+            flex: 1;
+            user-drag: none;
+          }
         `}
       </style>
     </div>
@@ -340,8 +381,17 @@ class Settings extends React.PureComponent {
             lineHeight={this.props.lineHeight}
           />
         )
-      case 'Misc':
-        return <MiscSettings format={this.props.format} reset={this.handleReset} />
+      case 'Misc': {
+        const settings = this.getSettingsFromProps()
+        return (
+          <MiscSettings
+            format={this.props.format}
+            reset={this.handleReset}
+            applyPreset={this.props.applyPreset}
+            settings={settings}
+          />
+        )
+      }
       default:
         return null
     }

lib/util.js

@@ -68,6 +68,13 @@ export const fileToDataURL = blob =>
     reader.readAsDataURL(blob)
   })
 
+export const fileToJSON = blob =>
+  new Promise(res => {
+    const reader = new FileReader()
+    reader.onload = e => res(parse(e.target.result))
+    reader.readAsText(blob)
+  })
+
 export const formatCode = async code => {
   const prettier = await import('prettier/standalone')
   const babylonParser = await import('prettier/parser-babylon')