Fix tslint

.gitignore

@@ -1,3 +1,4 @@
 .netlify
 dist
-node_modules
+node_modules
+tslint.log

client/App.tsx

@@ -27,10 +27,14 @@ const App = () => {
                 <Route exact={true} path='/modal'><DetailsLoader pattern="Modal" /></Route>
                 <Route exact={true} path='/notification'><DetailsLoader pattern="Notification" /></Route>
                 <Route exact={true} path='/pagination'><DetailsLoader pattern="Pagination" /></Route>
-                <Route exact={true} path='/previous-next-buttons'><DetailsLoader pattern="Previous next buttons" /></Route>
+                <Route exact={true} path='/previous-next-buttons'>
+                    <DetailsLoader pattern="Previous next buttons" />
+                </Route>
                 <Route exact={true} path='/pricing-table'><DetailsLoader pattern="Pricing table" /></Route>
                 <Route exact={true} path='/progress-bar'><DetailsLoader pattern="Progress bar" /></Route>
-                <Route exact={true} path='/questions-and-answers'><DetailsLoader pattern="Questions and answers" /></Route>
+                <Route exact={true} path='/questions-and-answers'>
+                    <DetailsLoader pattern="Questions and answers" />
+                </Route>
                 <Route exact={true} path='/radio-switch'><DetailsLoader pattern="Radio switch" /></Route>
                 <Route exact={true} path='/same-height-columns'><DetailsLoader pattern="Same height columns" /></Route>
                 <Route exact={true} path='/search-box'><DetailsLoader pattern="Search box" /></Route>

client/Home.tsx

@@ -12,9 +12,16 @@ const Home = () => {
         <Layout>
             <div className="mt5 bl br bt b--black-20 br4 br--top">
                 <div className="relative">
-                    <h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0 br-pill ph3 white bg-dark-blue" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>CSS Layout</h1>
+                    <h1
+                        className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0 br-pill ph3 white bg-dark-blue"
+                        style={{ left: '50%', transform: 'translate(-50%, -50%)' }}
+                    >
+                        CSS Layout
+                    </h1>
 
-                    <h2 className="fw3 f3 tc lh-copy ma0 pa4">a collection of popular layouts and patterns made with CSS</h2>
+                    <h2 className="fw3 f3 tc lh-copy ma0 pa4">
+                        a collection of popular layouts and patterns made with CSS
+                    </h2>
 
                     <div className="w-30 center mb4">
                         <ul className="ma0 pa0 list f4 lh-copy">

client/components/CoverCard.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import CoverLoader from '../loaders/CoverLoader';
 import slug from '../helpers/slug';
+import CoverLoader from '../loaders/CoverLoader';
 
 interface CoverCardProps {
     pattern: string;

client/components/RelatedPatterns.tsx

@@ -14,7 +14,7 @@ const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
 
             <div className="flex flex-wrap items-start pa4">
                 {
-                    patterns.map(pattern => <CoverCard key={pattern} pattern={pattern} />)
+                    patterns.map((pattern) => <CoverCard key={pattern} pattern={pattern} />)
                 }
             </div>
         </section>

client/helpers/highlight.ts

@@ -1,5 +1,5 @@
-import hljs from 'highlight.js/lib/highlight';
-import html from 'highlight.js/lib/languages/xml';
+import hljs from 'highlight.js/lib/highlight'; // tslint:disable-line
+import html from 'highlight.js/lib/languages/xml'; // tslint:disable-line
 
 hljs.registerLanguage('html', html);
 

client/hooks/useInterval.ts

@@ -9,7 +9,7 @@ const useInterval = (callback: () => void, delay?: number) => {
                 return () => clearInterval(id);
             }
         },
-        [delay]
+        [delay],
     );
 };
 

client/layouts/Footer.tsx

@@ -35,7 +35,10 @@ const Footer: React.FC<{}> = () => {
                     <ul className="list ma0 pa0 lh-copy fw5">
                         <li className="mb1">
                             <a href="https://twitter.com/nghuuphuoc" className="link flex items-center">
-                                <span className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ height: '24px', width: '24px' }}>
+                                <span
+                                    className="bg-black-40 br-pill flex items-center justify-center mr2"
+                                    style={{ height: '24px', width: '24px' }}
+                                >
                                     <svg
                                         viewBox="0 0 24 24"
                                         className="w-60 h-60"
@@ -55,7 +58,10 @@ const Footer: React.FC<{}> = () => {
                         </li>
                         <li className="mb1">
                             <a href="mailto: me@phuoc.ng" className="link flex items-center">
-                                <span className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ height: '24px', width: '24px' }}>
+                                <span
+                                    className="bg-black-40 br-pill flex items-center justify-center mr2"
+                                    style={{ height: '24px', width: '24px' }}
+                                >
                                     <svg
                                         viewBox="0 0 24 24"
                                         className="w-60 h-60"
@@ -75,7 +81,10 @@ const Footer: React.FC<{}> = () => {
                         </li>
                         <li className="mb1">
                             <a href="https://github.com/phuoc-ng/csslayout" className="link flex items-center">
-                                <span className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ height: '24px', width: '24px' }}>
+                                <span
+                                    className="bg-black-40 br-pill flex items-center justify-center mr2"
+                                    style={{ height: '24px', width: '24px' }}
+                                >
                                     <svg
                                         viewBox="0 0 24 24"
                                         className="w-60 h-60"

client/loaders/CoverLoader.tsx

@@ -4,9 +4,8 @@ interface CoverLoaderProps {
     pattern: string;
 }
 
-//import slug from './helpers/slug';
 const slug = (item: string) => item.toLowerCase().split(' ').join('-');
 
-const CoverLoader: LoadableComponent<CoverLoaderProps> = loadable(props => import(`../patterns/${slug(props.pattern)}/Cover`));
+const CoverLoader: LoadableComponent<CoverLoaderProps> = loadable((props: CoverLoaderProps) => import(`../patterns/${slug(props.pattern)}/Cover`));
 
 export default CoverLoader;

client/loaders/DetailsLoader.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import loadable, { LoadableComponent } from '@loadable/component';
+import React from 'react';
 
 import './spinner.css';
 
@@ -16,7 +16,7 @@ const slug = (item: string) => item.toLowerCase().split(' ').join('-');
 //  {
 //      "plugins": ["@loadable/babel-plugin"],
 //  }
-const loadDetails = /* #__LOADABLE__ */ (props: DetailsLoaderProps) => import(`../patterns/${slug(props.pattern)}/Details`)
+const loadDetails = /* #__LOADABLE__ */ (props: DetailsLoaderProps) => import(`../patterns/${slug(props.pattern)}/Details`);
 
 const DetailsLoader: LoadableComponent<DetailsLoaderProps> = loadable(loadDetails, {
     fallback: (
@@ -34,7 +34,7 @@ const DetailsLoader: LoadableComponent<DetailsLoaderProps> = loadable(loadDetail
                 />
             </svg>
         </div>
-    )
+    ),
 });
 
 export default DetailsLoader;

client/patterns/badge/Details.tsx

@@ -8,13 +8,13 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Badge">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="flex flex-column items-center justify-center white bg-black-30 br-pill w2 h2 f4">
                                 1
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Content is centered */

client/patterns/breadcrumb/Details.tsx

@@ -9,7 +9,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Breadcrumb">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="flex items-center">
                                 <div className="w4"><Rectangle height={16} /></div>
@@ -21,7 +21,7 @@ const Details: React.FC<{}> = () => {
                                 <div className="w2"><Rectangle height={16} /></div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Content is centered vertically */

client/patterns/button-with-icon/Details.tsx

@@ -10,7 +10,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Button with icon">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="w5">
                                 <button className="w-100 h3 flex flex-row items-center ba b--black-30 br2 ph2">
@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                                 </button>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <button style="
     /* Content is centered */

client/patterns/card/Details.tsx

@@ -10,7 +10,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Card">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center pa3">
                             <div className="b--black-30 ba br2 flex flex-column w5">
                                 <Rectangle height={150} />
@@ -22,7 +22,7 @@ const Details: React.FC<{}> = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;

client/patterns/centering/Details.tsx

@@ -10,14 +10,14 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Centering">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <Circle size={64} />
                             <div className="w-40 mt3"><Rectangle /></div>
                             <div className="w-30 mt2"><Rectangle /></div>
                             <div className="w-20 mt2"><Rectangle /></div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     align-items: center;

client/patterns/docked-at-corner/Details.tsx

@@ -10,7 +10,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Docked at corner">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="w4 pa3 relative ba b--black-30 br2">
                                 <Rectangle />
@@ -20,7 +20,7 @@ const Details: React.FC<{}> = () => {
                                 />
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     position: relative;

client/patterns/dot-navigation/Details.tsx

@@ -29,7 +29,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Dot navigation">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <ul className="list ma0 pa0 flex items-center justify-center">
                                 <Dot index={0} />
@@ -38,7 +38,7 @@ const Details: React.FC<{}> = () => {
                                 <Dot index={3} />
                             </ul>
                         </div>
-                    }
+                    )}
                     source={`
 <ul style="
     /* Content is centered */

client/patterns/feature-list/Details.tsx

@@ -11,7 +11,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Feature list">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="flex h-100 items-center justify-center">
                             <div className="w-60">
                                 <div className="flex flex-row mb4">
@@ -30,7 +30,7 @@ const Details: React.FC<{}> = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <!-- Feature item -->
 <div style="

client/patterns/fixed-at-corner/Details.tsx

@@ -9,7 +9,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Fixed at corner">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="relative h-100">
                             <div className="absolute top-0 left-0">
                                 <Triangle size={64} corner="tl" />
@@ -24,7 +24,7 @@ const Details: React.FC<{}> = () => {
                                 <Triangle size={64} corner="bl" />
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     position: relative;

client/patterns/holy-grail/Details.tsx

@@ -10,7 +10,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Holy grail">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column">
                             <div className="flex-shrink-0 bb b--black-30 pa3">
                                 <div className="w-50"><Rectangle /></div>
@@ -30,7 +30,7 @@ const Details: React.FC<{}> = () => {
                                 <div className="w-40"><Rectangle /></div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;
@@ -42,7 +42,7 @@ const Details: React.FC<{}> = () => {
     <main style="
         /* Take the remaining height */
         flex-grow: 1;
-        
+
         /* Layout the left sidebar, main content and right sidebar */
         display: flex;
         flex-direction: row;

client/patterns/input-add-on/Cover.tsx

@@ -9,11 +9,9 @@ const Cover: React.FC<{}> = () => {
             <div className="h-100 flex items-center justify-center pa2">
                 <div className="b--black-30 ba br2 flex w-100 h1">
                     <div className="b--black-30 br flex items-center justify-center w-30 ph2">
-                        <div className="w-100">
-                        <Line />
-                        </div>
+                        <div className="w-100"><Line /></div>
                     </div>
-                    <div className="flex-grow-1"></div>
+                    <div className="flex-grow-1" />
                 </div>
             </div>
         </Frame>

client/patterns/input-add-on/Details.tsx

@@ -9,7 +9,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Input add-on">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="w5">
                                 <div className="b--black-30 ba br2 flex h2 w-100 mb3">
@@ -35,7 +35,7 @@ const Details: React.FC<{}> = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <!-- Add-on prepended -->
 <div style="
@@ -46,7 +46,7 @@ const Details: React.FC<{}> = () => {
 ">
     <!-- Add-on -->
     <div style="
-        /* Content is centered */            
+        /* Content is centered */
         align-items: center;
         display: flex;
         justify-content: center;
@@ -76,7 +76,7 @@ const Details: React.FC<{}> = () => {
 
     <!-- Add-on -->
     <div style="
-        /* Content is centered */            
+        /* Content is centered */
         align-items: center;
         display: flex;
         justify-content: center;
@@ -94,7 +94,7 @@ const Details: React.FC<{}> = () => {
 ">
     <!-- Add-on -->
     <div style="
-        /* Content is centered */            
+        /* Content is centered */
         align-items: center;
         display: flex;
         justify-content: center;
@@ -110,7 +110,7 @@ const Details: React.FC<{}> = () => {
 
     <!-- Add-on -->
     <div style="
-        /* Content is centered */            
+        /* Content is centered */
         align-items: center;
         display: flex;
         justify-content: center;

client/patterns/media-object/Cover.tsx

@@ -15,11 +15,11 @@ const Cover: React.FC<{}> = () => {
                     <div className="w-100 mb1"><Line /></div>
                     <div className="w-100 mb1"><Line /></div>
                     <div className="w-80 mb3"><Line /></div>
-                    
+
                     <div className="w-100 mb1"><Line /></div>
                     <div className="w-100 mb1"><Line /></div>
                     <div className="w-80 mb3"><Line /></div>
-                    
+
                     <div className="w-100 mb1"><Line /></div>
                     <div className="w-100 mb1"><Line /></div>
                     <div className="w-80 mb1"><Line /></div>

client/patterns/media-object/Details.tsx

@@ -11,7 +11,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Media object">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex items-start pa3">
                             <div className="w4 h4 mr3">
                                 <Square />
@@ -24,7 +24,7 @@ const Details: React.FC<{}> = () => {
                                 <div className="mb4"><Block numberOfBlocks={15} /></div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Align sub-items to top */

client/patterns/menu/Details.tsx

@@ -10,7 +10,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Menu">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="b--black-30 ba br2 flex flex-column w-40">
                                 <div className="flex items-center h2 ph2 hover-bg-black-10">
@@ -46,7 +46,7 @@ const Details: React.FC<{}> = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;

client/patterns/modal/Details.tsx

@@ -11,7 +11,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Modal">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="b--black-30 ba br2 w-50">
                                 <div className="flex items-center justify-between bb b--black-30 pa3">
@@ -30,7 +30,7 @@ const Details: React.FC<{}> = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Border */

client/patterns/notification/Details.tsx

@@ -10,16 +10,19 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Notification">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="b--black-30 ba br2 flex justify-between w-60">
                                 <div className="pa3 w-80"><Block numberOfBlocks={5} /></div>
-                                <button className="black-30 bn f2 flex h2 items-center justify-center w2" style={{ marginRight: '1px' }}>
+                                <button
+                                    className="black-30 bn f2 flex h2 items-center justify-center w2"
+                                    style={{ marginRight: '1px' }}
+                                >
                                     <Circle />
                                 </button>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;

client/patterns/pagination/Cover.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import Frame from '../../placeholders/Frame';
 import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
+import Frame from '../../placeholders/Frame';
 
 const Cover: React.FC<{}> = () => {
     return (

client/patterns/pagination/Details.tsx

@@ -10,7 +10,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Pagination">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center pa3">
                             <div className="b--black-30 ba br2 flex">
                                 <div className="b--black-30 br flex items-center justify-center pa2 w4">
@@ -33,7 +33,7 @@ const Details: React.FC<{}> = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;

client/patterns/previous-next-buttons/Details.tsx

@@ -9,7 +9,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Previous and next buttons">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="w-50">
                                 <div className="flex items-center justify-between pa2 w-100 h2">
@@ -24,7 +24,7 @@ const Details: React.FC<{}> = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     align-items: center;

client/patterns/pricing-table/Cover.tsx

@@ -9,7 +9,10 @@ const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex items-center justify-center ph2">
-                <div className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1" style={{ flex: 1 }}>
+                <div
+                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1"
+                    style={{ flex: 1 }}
+                >
                     <div className="mb1"><Circle /></div>
                     <div className="mb1 w-100">
                         <div className="w-100 mb1"><Line /></div>
@@ -18,7 +21,10 @@ const Cover: React.FC<{}> = () => {
                     </div>
                     <Rectangle />
                 </div>
-                <div className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1" style={{ flex: 1 }}>
+                <div
+                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1"
+                    style={{ flex: 1 }}
+                >
                     <div className="mb1"><Circle /></div>
                     <div className="mb1 w-100">
                         <div className="w-100 mb1"><Line /></div>
@@ -29,7 +35,10 @@ const Cover: React.FC<{}> = () => {
                     </div>
                     <Rectangle />
                 </div>
-                <div className="ba br2 b--black-30 flex flex-column items-center justify-center pa1" style={{ flex: 1 }}>
+                <div
+                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa1"
+                    style={{ flex: 1 }}
+                >
                     <div className="mb1"><Circle /></div>
                     <div className="mb1 w-100">
                         <div className="w-100 mb1"><Line /></div>

client/patterns/pricing-table/Details.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
-import Circle from '../../placeholders/Circle';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
@@ -11,36 +11,39 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Pricing table">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex items-center justify-center pa3">
                             <div className="w-60 flex items-center justify-center">
-                                <div className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{ flex: 1 }}>
+                                <div
+                                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2"
+                                    style={{ flex: 1 }}
+                                >
                                     <div className="mb3 w-60"><Rectangle /></div>
                                     <div className="mb3"><Circle size={64} /></div>
-                                    <div className="mb3 w-100">
-                                        <Block numberOfBlocks={10} />
-                                    </div>
+                                    <div className="mb3 w-100"><Block numberOfBlocks={10} /></div>
                                     <div className="w-40"><Rectangle height={32} /></div>
                                 </div>
-                                <div className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{ flex: 1 }}>
+                                <div
+                                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2"
+                                    style={{ flex: 1 }}
+                                >
                                     <div className="mb3 w-60"><Rectangle /></div>
                                     <div className="mb3"><Circle size={64} /></div>
-                                    <div className="mb3 w-100">
-                                        <Block numberOfBlocks={20} />
-                                    </div>
+                                    <div className="mb3 w-100"><Block numberOfBlocks={20} /></div>
                                     <div className="w-40"><Rectangle height={32} /></div>
                                 </div>
-                                <div className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{ flex: 1 }}>
-                                <div className="mb3 w-60"><Rectangle /></div>
-                                    <div className="mb3"><Circle size={64} /></div>
-                                    <div className="mb3 w-100">
-                                        <Block numberOfBlocks={10} />
-                                    </div>
-                                    <div className="w-40"><Rectangle height={32} /></div>
+                                <div
+                                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2"
+                                    style={{ flex: 1 }}
+                                >
+                                    <div className="mb3 w-60"><Rectangle /></div>
+                                        <div className="mb3"><Circle size={64} /></div>
+                                        <div className="mb3 w-100"><Block numberOfBlocks={10} /></div>
+                                        <div className="w-40"><Rectangle height={32} /></div>
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Content is centered horizontally */

client/patterns/progress-bar/Details.tsx

@@ -1,28 +1,31 @@
 import React, { useState } from 'react';
 
+import useInterval from '../../hooks/useInterval';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import useInterval from '../../hooks/useInterval';
 
 const Details: React.FC<{}> = () => {
     const [progress, setProgress] = useState(0);
     useInterval(() => {
-        setProgress(v => v === 100 ? 0 : v + 1);
+        setProgress((v) => v === 100 ? 0 : v + 1);
     }, 1 * 100);
 
     return (
         <DetailsLayout title="Progress bar">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="h1 w-50 br-pill bg-black-10">
-                                <div className="br-pill h-100 bg-blue flex items-center justify-center pa1 white f7" style={{ width: `${progress}%` }}>
+                                <div
+                                    className="br-pill h-100 bg-blue flex items-center justify-center pa1 white f7"
+                                    style={{ width: `${progress}%` }}
+                                >
                                     {progress}%
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Colors */

client/patterns/questions-and-answers/Details.tsx

@@ -35,7 +35,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Questions and answers">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="w-60">
                                 <div className="mb3 bt bb b--black-30">
@@ -64,7 +64,7 @@ const Details: React.FC<{}> = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <!-- Each question and answer item -->
 <div style="

client/patterns/radio-switch/Cover.tsx

@@ -11,8 +11,7 @@ const Cover: React.FC<{}> = () => {
                     <div className="pa1" style={{ flex: 1 }}>
                         <Rectangle />
                     </div>
-                    <div className="pa1 br-pill bg-black-10 h-100" style={{ flex: 1 }}>
-                    </div>
+                    <div className="pa1 br-pill bg-black-10 h-100" style={{ flex: 1 }} />
                 </div>
             </div>
         </Frame>

client/patterns/radio-switch/Details.tsx

@@ -7,26 +7,32 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     const [isFirstChecked, setFirstChecked] = useState(false);
-    const toggle = () => setFirstChecked(c => !c);
+    const toggle = () => setFirstChecked((c) => !c);
 
     return (
         <DetailsLayout title="Radio switch">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="inline-flex br-pill bg-black-10 pa1">
                                 <label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? 'bg-blue white' : ''}`}>
                                     <input type="radio" className="dn" checked={isFirstChecked} onChange={toggle} />
-                                    <div className={`w3 br1 ${isFirstChecked ? 'bg-white' : 'bg-black-20'}`} style={{ height: '8px' }}  />
+                                    <div
+                                        className={`w3 br1 ${isFirstChecked ? 'bg-white' : 'bg-black-20'}`}
+                                        style={{ height: '8px' }}
+                                    />
                                 </label>
                                 <label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? '' : 'bg-blue white'}`}>
                                     <input type="radio" className="dn" checked={!isFirstChecked} onChange={toggle} />
-                                    <div className={`w3 br1 ${isFirstChecked ? 'bg-black-20' : 'bg-white'}`} style={{ height: '8px' }}  />
+                                    <div
+                                        className={`w3 br1 ${isFirstChecked ? 'bg-black-20' : 'bg-white'}`}
+                                        style={{ height: '8px' }}
+                                    />
                                 </label>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <!-- Container -->
 <div style="

client/patterns/same-height-columns/Details.tsx

@@ -10,7 +10,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Same height columns">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center pa3">
                             <div className="flex h-100 w-100">
                                 <div className="b--black-20 ba br2 mh2 flex flex-column" style={{ flex: 1 }}>
@@ -44,7 +44,7 @@ const Details: React.FC<{}> = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="display: flex;">
     <!-- Column -->

client/patterns/search-box/Details.tsx

@@ -9,25 +9,35 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Search box">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="w5">
                                 <div className="mb3 b--black-30 ba br1 flex">
-                                    <input type="text" placeholder="Search" className="pa1 b--transparent" style={{ flex: 1 }} />
+                                    <input
+                                        type="text"
+                                        placeholder="Search"
+                                        className="pa1 b--transparent"
+                                        style={{ flex: 1 }}
+                                    />
                                     <div className="pa2">
                                         <Circle />
                                     </div>
                                 </div>
 
                                 <div className="b--black-30 ba br1 flex flex-row-reverse">
-                                    <input type="text" placeholder="Search" className="pa1 b--transparent" style={{ flex: 1 }} />
+                                    <input
+                                        type="text"
+                                        placeholder="Search"
+                                        className="pa1 b--transparent"
+                                        style={{ flex: 1 }}
+                                    />
                                     <div className="pa2">
                                         <Circle />
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;

client/patterns/separator/Details.tsx

@@ -9,7 +9,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Separator">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="flex items-center w-60 relative">
                                 <div className="absolute bg-white ph2" style={{ left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}>
@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                                 <div className="bb b--black-30 w-100" style={{ height: '1px' }} />
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Content is centered horizontally */
@@ -32,7 +32,7 @@ const Details: React.FC<{}> = () => {
     <div style="
         /* We won't see the separator line */
         background: #FFF;
-        
+
         /* Displayed at the center of container */
         left: 50%;
         position: absolute;

client/patterns/sidebar/Details.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
 import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
@@ -10,7 +10,7 @@ const Details: React.FC<{}> = () => {
             <div className="ph4 pv5">
                 <div className="lh-copy mb3">Try to scroll the main content!</div>
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex">
                             <div className="b--black-30 br flex flex-column justify-end pa3 w-30">
                                 <div className="mb3"><Block numberOfBlocks={5} /></div>
@@ -24,7 +24,7 @@ const Details: React.FC<{}> = () => {
                                 <div className="w-80"><Block numberOfBlocks={10} /></div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="display: flex;">
     <!-- Sidebar -->

client/patterns/simple-grid/Details.tsx

@@ -9,7 +9,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Simple grid">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="w-60">
                                 <div className="flex" style={{ margin: '0 -8px 8px -8px' }}>
@@ -82,7 +82,7 @@ const Details: React.FC<{}> = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <!-- Row -->
 <div style="

client/patterns/slider/Details.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
-import Circle from '../../placeholders/Circle';
 import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
@@ -10,7 +10,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Slider">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="flex items-center h1 w5">
                                 <div className="w-20"><Rectangle height={2} /></div>
@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                                 <div style={{ flex: 1 }}><Rectangle height={2} /></div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Content is centered horizontally */
@@ -37,7 +37,7 @@ const Details: React.FC<{}> = () => {
         /* Colors */
         background-color: rgba(0, 0, 0, .3);
     " />
-    
+
     <!-- Circle -->
     <div style="
         /* Size */

client/patterns/split-navigation/Details.tsx

@@ -9,7 +9,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Split navigation">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <ul className="list ma0 b--black-30 ba br3 flex items-center pa3 w-60">
                                 <li className="w-20 mr1"><Rectangle /></li>
@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                                 <li className="w-10 ml-auto"><Rectangle /></li>
                             </ul>
                         </div>
-                    }
+                    )}
                     source={`
 <ul style="
     /* Content is centered horizontally */

client/patterns/split-screen/Details.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
 import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
@@ -11,9 +11,12 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Split screen">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex">
-                            <div className="b--black-30 br flex flex-column justify-center items-center" style={{ flex: 1 }}>
+                            <div
+                                className="b--black-30 br flex flex-column justify-center items-center"
+                                style={{ flex: 1 }}
+                            >
                                 <div className="mb3"><Circle size={128} /></div>
                                 <div className="w-60"><Rectangle /></div>
                             </div>
@@ -25,7 +28,7 @@ const Details: React.FC<{}> = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="display: flex;">
     <!-- Left content -->

client/patterns/stepper-input/Cover.tsx

@@ -8,7 +8,7 @@ const Cover: React.FC<{}> = () => {
             <div className="h-100 flex items-center justify-center pa2">
                 <div className="b--black-30 ba br2 flex w-100 h1">
                     <div className="b--black-30 br flex items-center justify-center w1">-</div>
-                    <div className="flex-grow-1"></div>
+                    <div className="flex-grow-1" />
                     <div className="b--black-30 bl flex items-center justify-center w1">+</div>
                 </div>
             </div>

client/patterns/stepper-input/Details.tsx

@@ -17,17 +17,27 @@ const Details: React.FC<{}> = () => {
                     The content of minus and plus buttons are centered by using the technique in the <Link to="/centering" className="link">Centering</Link> page.
                 </div>
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="b--black-30 ba br2 flex h2 w4">
-                                <button className="bg-black-05 bn flex items-center justify-center pointer w2" onClick={decrease}>-</button>
+                                <button
+                                    className="bg-black-05 bn flex items-center justify-center pointer w2"
+                                    onClick={decrease}
+                                >
+                                    -
+                                </button>
                                 <div className="b--black-30 ba bb-0 bt-0 h-100" style={{ flex: 1 }}>
                                     <input type="text" className="bn h-100 pa2 w-100" value={value} onChange={change} />
                                 </div>
-                                <button className="bg-black-05 bn flex items-center justify-center pointer w2" onClick={increase}>+</button>
+                                <button
+                                    className="bg-black-05 bn flex items-center justify-center pointer w2"
+                                    onClick={increase}
+                                >
+                                    +
+                                </button>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;
@@ -41,11 +51,11 @@ const Details: React.FC<{}> = () => {
 ">
     <!-- Minus button -->
     <button style="
-        /* Content is centered */            
+        /* Content is centered */
         align-items: center;
         display: flex;
         justify-content: center;
-        
+
         /* Size */
         width: 32px;
     ">-</button>
@@ -61,7 +71,7 @@ const Details: React.FC<{}> = () => {
 
     <!-- Plus button -->
     <button style="
-        /* Content is centered */                    
+        /* Content is centered */
         align-items: center;
         display: flex;
         justify-content: center;

client/patterns/sticky-footer/Details.tsx

@@ -13,7 +13,7 @@ const Details: React.FC<{}> = () => {
                     The footer always sticks to the bottom if the main content is short.
                 </div>
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column">
                             <div className="flex-shrink-0 bb b--black-30 pa3">
                                 <div className="w-50"><Rectangle /></div>
@@ -25,7 +25,7 @@ const Details: React.FC<{}> = () => {
                             <div className="w-40"><Rectangle /></div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;

client/patterns/sticky-header/Details.tsx

@@ -9,9 +9,11 @@ const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Sticky header">
             <div className="ph4 pv5">
-                <div className="lh-copy mb3">Try to scroll the main content to see the header sticks to the top of page.</div>
+                <div className="lh-copy mb3">
+                    Try to scroll the main content to see the header sticks to the top of page.
+                </div>
                 <BrowserFrame
-                    content={
+                    content={(
                         <div>
                             <div className="top-0 bg-white bb b--black-30 pa3" style={{ position: 'sticky' }}>
                                 <div className="w-50"><Rectangle /></div>
@@ -22,7 +24,7 @@ const Details: React.FC<{}> = () => {
                                 <div><Block numberOfBlocks={30} /></div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div>
     <header style="

client/patterns/switch/Details.tsx

@@ -6,21 +6,24 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     const [checked, setChecked] = useState(false);
-    const toggle = () => setChecked(c => !c);
+    const toggle = () => setChecked((c) => !c);
 
     return (
         <DetailsLayout title="Switch">
             <div className="ph4 pv5">
-                <div className="lh-copy mb3">The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even though it's hidden.</div>
+                <div className="lh-copy mb3">
+                    The checkbox is placed inside a label. So when clicking on the label,
+                    the checkbox will be checked even though it's hidden.
+                </div>
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <label className={`ba br-pill h2 w3 flex ${checked ? 'justify-end b--blue bg-blue' : 'b--black-30 bg-black-10'}`}>
                                 <input type="checkbox" className="dn" checked={checked} onChange={toggle} />
                                 <div className={`bg-white br-pill w2 ${checked ? '' : 'ba b--black-30'}`} />
                             </label>
                         </div>
-                    }
+                    )}
                     source={`
 <label style="
     display: flex;

client/patterns/tab/Cover.tsx

@@ -8,7 +8,12 @@ const Cover: React.FC<{}> = () => {
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
                 <div className="flex items-center justify-center">
-                    <div className="ph2 pv1 ba b--black-30 br2 br--top" style={{ borderBottomColor: 'transparent' }}><Circle size={8} /></div>
+                    <div
+                        className="ph2 pv1 ba b--black-30 br2 br--top"
+                        style={{ borderBottomColor: 'transparent' }}
+                    >
+                        <Circle size={8} />
+                    </div>
                     <div className="ph2 pv1 bb b--black-30"><Circle size={8} /></div>
                     <div className="ph2 pv1 bb b--black-30"><Circle size={8} /></div>
                 </div>

client/patterns/tab/Details.tsx

@@ -31,7 +31,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Tab">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="flex items-center justify-center">
                                 <Tab tabIndex={0}>
@@ -51,7 +51,7 @@ const Details: React.FC<{}> = () => {
                                 </Tab>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Content is centered */

client/patterns/toggle-password-visibility/Details.tsx

@@ -5,13 +5,13 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     const [visible, setVisible] = useState(false);
-    const toggle = () => setVisible(v => !v);
+    const toggle = () => setVisible((v) => !v);
 
     return (
         <DetailsLayout title="Toggle password visibility">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="w5">
                                 <div className="b--black-30 ba br1 flex">
@@ -20,8 +20,8 @@ const Details: React.FC<{}> = () => {
                                         <svg
                                             viewBox="0 0 24 24"
                                             style={{
-                                                height: '24px',
                                                 fill: "none",
+                                                height: '24px',
                                                 stroke: "rgba(0, 0, 0, 0.4)",
                                                 strokeLinecap: "round",
                                                 strokeLinejoin: "round",
@@ -41,7 +41,7 @@ const Details: React.FC<{}> = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;

client/patterns/wizard/Details.tsx

@@ -11,7 +11,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Wizard">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="flex w-80">
                                 <div style={{ flex: 1 }}>
@@ -20,7 +20,9 @@ const Details: React.FC<{}> = () => {
                                         <div className="flex items-center justify-center mh1"><Circle size={32} /></div>
                                         <div style={{ flex: 1 }}><Line /></div>
                                     </div>
-                                    <div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
+                                    <div className="ph3 flex justify-center">
+                                        <Block justify='center' numberOfBlocks={5} />
+                                    </div>
                                 </div>
                                 <div style={{ flex: 1 }}>
                                     <div className="mb3 flex items-center justify-center">
@@ -28,7 +30,9 @@ const Details: React.FC<{}> = () => {
                                         <div className="flex items-center justify-center mh1"><Circle size={32} /></div>
                                         <div style={{ flex: 1 }}><Line /></div>
                                     </div>
-                                    <div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
+                                    <div className="ph3 flex justify-center">
+                                        <Block justify='center' numberOfBlocks={5} />
+                                    </div>
                                 </div>
                                 <div style={{ flex: 1 }}>
                                     <div className="mb3 flex items-center justify-center">
@@ -36,11 +40,13 @@ const Details: React.FC<{}> = () => {
                                         <div className="flex items-center justify-center mh1"><Circle size={32} /></div>
                                         <div style={{ flex: 1 }} />
                                     </div>
-                                    <div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
+                                    <div className="ph3 flex justify-center">
+                                        <Block justify='center' numberOfBlocks={5} />
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;
@@ -62,7 +68,7 @@ const Details: React.FC<{}> = () => {
                 height: 1px;
 
                 background-color: rgba(0, 0, 0, .3);
-                /* 
+                /*
                 For the first step, you might need to set it to transparent background:
                 background-color: transparent;
                 */
@@ -94,7 +100,7 @@ const Details: React.FC<{}> = () => {
                 height: 1px;
 
                 background-color: rgba(0, 0, 0, .3);
-                /* 
+                /*
                 For the last step, you might need to set it to transparent background:
                 background-color: transparent;
                 */

client/placeholders/BrowserFrame.tsx

@@ -1,18 +1,17 @@
-import React, { useState, ReactNode } from 'react';
+import React, { useState } from 'react';
 
 import SampleCode from '../components/SampleCode';
 
 interface BrowserFrameProps {
-    content: ReactNode;
+    content: React.ReactNode;
     source: string;
 }
 
 const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
     const [isContentActive, setContentActive] = useState(true);
-    const flip = () => setContentActive(isActive => !isActive);
+    const flip = () => setContentActive((isActive) => !isActive);
 
     return (
-        
         <div className="br2 ba b--black-20" style={{ boxShadow: '0 16px 40px -8px rgba(0, 0, 0, .5)' }}>
             <div className="flex ph3 pv2 bb b--black-20 items-center bg-black-05">
                 <div className="br-100 mr1 w1 h1 bg-red" />
@@ -28,25 +27,26 @@ const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
                 className="relative"
                 style={{
                     height: '512px',
-                    transition: 'transform 1s',
-                    transformStyle: 'preserve-3d',
                     transform: isContentActive ? '' : 'rotateY(180deg)',
+                    transformStyle: 'preserve-3d',
+                    transition: 'transform 1s',
                 }}
             >
                 <div
                     className={`overflow-scroll absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-1' : 'o-0'}`}
                     style={{
-                        backfaceVisibility: 'hidden',
                         WebkitBackfaceVisibility: 'hidden',
-                    }}>
+                        backfaceVisibility: 'hidden',
+                    }}
+                >
                     {content}
                 </div>
                 <div
                     className={`absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-0' : 'o-1'}`}
                     style={{
+                        WebkitBackfaceVisibility: 'hidden',
                         backfaceVisibility: 'hidden',
                         transform: 'rotateY(180deg)',
-                        WebkitBackfaceVisibility: 'hidden',
                     }}
                 >
                     <SampleCode lang="html" code={source} />

client/types/hightlight.d.ts

@@ -8,5 +8,4 @@ declare module 'highlight.js/lib/highlight' {
 }
 
 declare module 'highlight.js/lib/languages/xml' {
-
-}
+}

package-lock.json

@@ -2344,6 +2344,15 @@
             "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
             "dev": true
         },
+        "argparse": {
+            "version": "1.0.10",
+            "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+            "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+            "dev": true,
+            "requires": {
+                "sprintf-js": "~1.0.2"
+            }
+        },
         "arr-diff": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -2845,6 +2854,12 @@
             "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=",
             "dev": true
         },
+        "builtin-modules": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
+            "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=",
+            "dev": true
+        },
         "builtin-status-codes": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
@@ -3650,6 +3665,12 @@
             "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==",
             "dev": true
         },
+        "diff": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.1.tgz",
+            "integrity": "sha512-s2+XdvhPCOF01LRQBC8hf4vhbVmI2CGS5aZnxLJlT5FtdhPCDFq80q++zK2KlrVorVDdL5BOGZ/VfLrVtYNF+Q==",
+            "dev": true
+        },
         "diffie-hellman": {
             "version": "5.0.3",
             "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -3928,6 +3949,12 @@
                 "estraverse": "^4.1.1"
             }
         },
+        "esprima": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+            "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+            "dev": true
+        },
         "esrecurse": {
             "version": "4.2.1",
             "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
@@ -5897,6 +5924,16 @@
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
             "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
         },
+        "js-yaml": {
+            "version": "3.13.1",
+            "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
+            "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+            "dev": true,
+            "requires": {
+                "argparse": "^1.0.7",
+                "esprima": "^4.0.0"
+            }
+        },
         "jsesc": {
             "version": "2.5.2",
             "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
@@ -8101,6 +8138,12 @@
                 "extend-shallow": "^3.0.0"
             }
         },
+        "sprintf-js": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+            "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+            "dev": true
+        },
         "ssri": {
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
@@ -8490,6 +8533,56 @@
             "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
             "dev": true
         },
+        "tslint": {
+            "version": "5.20.1",
+            "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.20.1.tgz",
+            "integrity": "sha512-EcMxhzCFt8k+/UP5r8waCf/lzmeSyVlqxqMEDQE7rWYiQky8KpIBz1JAoYXfROHrPZ1XXd43q8yQnULOLiBRQg==",
+            "dev": true,
+            "requires": {
+                "@babel/code-frame": "^7.0.0",
+                "builtin-modules": "^1.1.1",
+                "chalk": "^2.3.0",
+                "commander": "^2.12.1",
+                "diff": "^4.0.1",
+                "glob": "^7.1.1",
+                "js-yaml": "^3.13.1",
+                "minimatch": "^3.0.4",
+                "mkdirp": "^0.5.1",
+                "resolve": "^1.3.2",
+                "semver": "^5.3.0",
+                "tslib": "^1.8.0",
+                "tsutils": "^2.29.0"
+            }
+        },
+        "tslint-react": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/tslint-react/-/tslint-react-4.1.0.tgz",
+            "integrity": "sha512-Y7CbFn09X7Mpg6rc7t/WPbmjx9xPI8p1RsQyiGCLWgDR6sh3+IBSlT+bEkc0PSZcWwClOkqq2wPsID8Vep6szQ==",
+            "dev": true,
+            "requires": {
+                "tsutils": "^3.9.1"
+            },
+            "dependencies": {
+                "tsutils": {
+                    "version": "3.17.1",
+                    "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz",
+                    "integrity": "sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==",
+                    "dev": true,
+                    "requires": {
+                        "tslib": "^1.8.1"
+                    }
+                }
+            }
+        },
+        "tsutils": {
+            "version": "2.29.0",
+            "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
+            "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
+            "dev": true,
+            "requires": {
+                "tslib": "^1.8.1"
+            }
+        },
         "tty-browserify": {
             "version": "0.0.0",
             "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",

package.json

@@ -7,7 +7,8 @@
         "build": "npm run copy && webpack --mode production && npm run export",
         "export": "react-snap",
         "deploy": "npm run build && netlify deploy --dir=dist --prod",
-        "analyse": "NODE_ENV=analyse webpack --config webpack.config.js -p"
+        "analyse": "NODE_ENV=analyse webpack --config webpack.config.js -p",
+        "lint": "tslint -c tslint.json -o tslint.log 'client/**/*.{ts,tsx}'"
     },
     "dependencies": {
         "@loadable/component": "^5.10.3",
@@ -32,6 +33,8 @@
         "source-map-loader": "^0.2.4",
         "style-loader": "^1.0.0",
         "ts-loader": "^6.2.1",
+        "tslint": "^5.20.1",
+        "tslint-react": "^4.1.0",
         "typescript": "^3.7.2",
         "webpack": "^4.41.2",
         "webpack-bundle-analyzer": "^3.6.0",

tslint.json

@@ -0,0 +1,11 @@
+{
+    "defaultSeverity": "error",
+    "extends": ["tslint:latest", "tslint-react"],
+    "jsRules": {},
+    "rules": {
+        "interface-name": false,
+        "jsx-no-multiline-js": false,
+        "quotemark": ["single"]
+    },
+    "rulesDirectory": []
+}