docs(prettier): add prettier support

Author: levithomason

.prettierrc.json

@@ -1,5 +1,6 @@
 {
   "$schema": "http://json.schemastore.org/prettierrc",
+  "htmlWhitespaceSensitivity": "ignore",
   "printWidth": 100,
   "tabWidth": 2,
   "semi": false,

docs/src/components/CodeSnippet.tsx

@@ -1,50 +1,66 @@
+import * as _ from 'lodash'
 import * as React from 'react'
+
+import formatCode from '../utils/formatCode'
 import Editor, { EDITOR_BACKGROUND_COLOR } from './Editor'
 
 export interface CodeSnippetProps {
+  fitted?: boolean
   label?: string
   mode?: 'jsx' | 'html' | 'sh'
   value: string
   style?: React.CSSProperties
 }
 
-const CodeSnippet = ({ label, value, mode = 'jsx', style, ...rest }: CodeSnippetProps) => (
-  <div
-    style={{
-      position: 'relative',
-      padding: '1rem',
-      marginBottom: '2rem',
-      background: EDITOR_BACKGROUND_COLOR,
-      ...style,
-    }}
-  >
+const formatters = {
+  sh: (val: string = ''): string => val.replace(/^/g, '$  '),
+  html: (val: string = ''): string => formatCode(val, 'html'),
+  jsx: (val: string = ''): string => formatCode(val, 'babylon'),
+}
+
+const CodeSnippet = ({ fitted, label, value, mode = 'jsx', ...rest }: CodeSnippetProps) => {
+  const format = formatters[mode]
+  const formattedValue = format(value)
+    // remove eof line break, they are not helpful for snippets
+    .replace(/\n$/, '')
+
+  return (
     <div
       style={{
-        position: 'absolute',
-        padding: '0.2rem 0.35rem',
-        top: '1rem',
-        right: '1rem',
-        lineHeight: 1,
-        color: '#899',
-        fontFamily: 'monospace',
-        fontSize: '0.8rem',
-        border: '1px solid #566',
-        zIndex: 100,
+        position: 'relative',
+        padding: '1rem',
+        marginBottom: fitted ? 0 : '2rem',
+        background: EDITOR_BACKGROUND_COLOR,
+        ...rest.style,
       }}
     >
-      {label || mode}
+      <div
+        style={{
+          position: 'absolute',
+          padding: '0.2rem 0.35rem',
+          top: '1rem',
+          right: '1rem',
+          lineHeight: 1,
+          color: '#899',
+          fontFamily: 'monospace',
+          fontSize: '0.8rem',
+          border: '1px solid #566',
+          zIndex: 100,
+        }}
+      >
+        {label || mode}
+      </div>
+      <Editor
+        highlightActiveLine={false}
+        highlightGutterLine={false}
+        mode={mode}
+        readOnly
+        showGutter={false}
+        showCursor={false}
+        value={formattedValue}
+        {...rest}
+      />
     </div>
-    <Editor
-      id={btoa(value)}
-      highlightActiveLine={false}
-      highlightGutterLine={false}
-      mode={mode}
-      readOnly
-      showGutter={false}
-      showCursor={false}
-      value={mode === 'sh' ? value.replace(/^/g, '$  ') : value}
-      {...rest}
-    />
-  </div>
-)
+  )
+}
 export default CodeSnippet