Add typescript types for patterns

client/components/Heading.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 
-const Heading = ({ title }) => {
+interface HeadingProps {
+    title: string;
+}
+
+const Heading: React.FC<HeadingProps> = ({ title }) => {
     return (
         <div className="bt b--black-20 relative">
             <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>{title}</h3>

client/components/RelatedPatterns.tsx

@@ -3,7 +3,11 @@ import React, { useEffect } from 'react';
 import CoverCard from './CoverCard';
 import Heading from './Heading';
 
-const RelatedPatterns = ({ patterns }) => {
+interface RelatedPatternsProps {
+    patterns: string[];
+}
+
+const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
     return (
         <section>
             <Heading title="Related patterns" />

client/components/SampleCode.tsx

@@ -2,7 +2,12 @@ import React from 'react';
 
 import highlight from '../helpers/highlight';
 
-const SampleCode = ({ code, lang }) => {
+interface SampleCodeProps {
+    code: string;
+    lang: string;
+}
+
+const SampleCode: React.FC<SampleCodeProps> = ({ code, lang }) => {
     return code === ''
             ? <></>
             : (

client/helpers/highlight.ts

@@ -3,7 +3,7 @@ import html from 'highlight.js/lib/languages/xml';
 
 hljs.registerLanguage('html', html);
 
-const highlight = (input, language) => {
+const highlight = (input: string, language: string) => {
     const lang = language || 'html';
     const { value } = hljs.highlight(lang, input);
     const highlighted = value.replace('&', '&').trim();

client/helpers/random.ts

@@ -1,2 +1,3 @@
-const random = (min, max) => min + Math.round(Math.random() * (max - min));
+const random = (min: number, max: number) => min + Math.round(Math.random() * (max - min));
+
 export default random;

client/helpers/randomFromArray.ts

@@ -1,2 +1,3 @@
-const randomFromArray = (array) => array[Math.floor(Math.random() * array.length)];
+const randomFromArray = (array: number[]) => array[Math.floor(Math.random() * array.length)];
+
 export default randomFromArray;

client/helpers/shuffe.ts

@@ -1,4 +1,4 @@
-const shuffe = (array) => {
+const shuffe = (array: number[]) => {
     array.sort(() => Math.random() - 0.5);
     return array;
 };

client/helpers/slug.ts

@@ -1,2 +1,3 @@
-const slug = item => item.toLowerCase().split(' ').join('-');
+const slug = (item: string) => item.toLowerCase().split(' ').join('-');
+
 export default slug;

client/hooks/useDocumentTitle.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-const useDocumentTitle = (title) => {
+const useDocumentTitle = (title: string) => {
     useEffect(() => {
         document.title = title;
     }, [title]);

client/hooks/useInterval.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-const useInterval = (callback, delay) => {
+const useInterval = (callback: () => void, delay?: number) => {
     useEffect(
         () => {
             const handler = () => callback();

client/layouts/DetailsLayout.tsx

@@ -4,7 +4,11 @@ import { Link } from 'react-router-dom';
 import useDocumentTitle from '../hooks/useDocumentTitle';
 import Layout from './Layout';
 
-const DetailsLayout = ({ title, children }) => {
+interface DetailsLayoutProps {
+    title: string;
+}
+
+const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
     useDocumentTitle(`CSS Layout ∙ ${title}`);
 
     return (

client/layouts/Footer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Heading from '../components/Heading';
 
-const Footer = () => {
+const Footer: React.FC<{}> = () => {
     return (
         <div className="bl br bb b--black-20 flex justify-between br4 br--bottom">
             <div className="br b--black-20" style={{ flex: 1 }}>

client/layouts/Layout.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 
 import Footer from './Footer';
 
-const Layout = ({ children }) => {
+const Layout: React.FC<{}> = ({ children }) => {
     useEffect(() => {
         window.scrollTo(0, 0);
     }, []);

client/loaders/DetailsLoader.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
-import loadable from '@loadable/component';
+import loadable, { LoadableComponent } from '@loadable/component';
 
 import './spinner.css';
 
-const slug = item => item.toLowerCase().split(' ').join('-');
+interface DetailsLoaderProps {
+    pattern: string;
+}
+
+const slug = (item: string) => item.toLowerCase().split(' ').join('-');
 
 // In order to create a link to another page that is dynamically loaded (via <Link to="...">),
 // the page chunks have to be loadable by @loadable.
@@ -12,9 +16,9 @@ const slug = item => item.toLowerCase().split(' ').join('-');
 //  {
 //      "plugins": ["@loadable/babel-plugin"],
 //  }
-const loadDetails = /* #__LOADABLE__ */ (props) => import(`../patterns/${slug(props.pattern)}/Details`)
+const loadDetails = /* #__LOADABLE__ */ (props: DetailsLoaderProps) => import(`../patterns/${slug(props.pattern)}/Details`)
 
-const DetailsLoader = loadable(loadDetails, {
+const DetailsLoader: LoadableComponent<DetailsLoaderProps> = loadable(loadDetails, {
     fallback: (
         <div className="w100 h-100 flex items-center justify-center">
             <svg className="spinner" width="64px" height="64px" viewBox="0 0 32 32">

client/patterns/badge/Cover.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">

client/patterns/badge/Details.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Badge">
             <div className="ph4 pv5">

client/patterns/breadcrumb/Cover.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">

client/patterns/breadcrumb/Details.tsx

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Breadcrumb">
             <div className="ph4 pv5">

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

@@ -4,7 +4,7 @@ import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">

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

@@ -5,7 +5,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Button with icon">
             <div className="ph4 pv5">

client/patterns/card/Cover.tsx

@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="flex flex-column h-100 pa2">

client/patterns/card/Details.tsx

@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Card">
             <div className="ph4 pv5">

client/patterns/centering/Cover.tsx

@@ -4,7 +4,7 @@ import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">

client/patterns/centering/Details.tsx

@@ -5,7 +5,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Centering">
             <div className="ph4 pv5">

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">

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

@@ -5,7 +5,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Docked at corner">
             <div className="ph4 pv5">

client/patterns/dot-navigation/Cover.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">

client/patterns/dot-navigation/Details.tsx

@@ -3,10 +3,14 @@ import React, { useState } from 'react';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
-const Details = () => {
+interface DotProps {
+    index: number;
+}
+
+const Details: React.FC<{}> = () => {
     const [activeItem, setActiveItem] = useState(0);
 
-    const Dot = ({ index }) => {
+    const Dot: React.FC<DotProps> = ({ index }) => {
         const isActive = index === activeItem;
         const click = () => setActiveItem(index);
         return (

client/patterns/feature-list/Cover.tsx

@@ -5,7 +5,7 @@ import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="flex flex-column justify-center h-100 pa2 w-100">

client/patterns/feature-list/Details.tsx

@@ -6,7 +6,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Feature list">
             <div className="ph4 pv5">

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

@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Triangle from '../../placeholders/Triangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="relative">

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

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Triangle from '../../placeholders/Triangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Fixed at corner">
             <div className="ph4 pv5">

client/patterns/holy-grail/Cover.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column">

client/patterns/holy-grail/Details.tsx

@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Holy grail">
             <div className="ph4 pv5">

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

@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex items-center justify-center pa2">

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

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Input add-on">
             <div className="ph4 pv5">

client/patterns/media-object/Cover.tsx

@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 import Square from '../../placeholders/Square';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="flex h-100 items-start pa2 w-100">

client/patterns/media-object/Details.tsx

@@ -6,7 +6,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 import Square from '../../placeholders/Square';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Media object">
             <div className="ph4 pv5">

client/patterns/menu/Cover.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa3">

client/patterns/menu/Details.tsx

@@ -5,7 +5,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Menu">
             <div className="ph4 pv5">

client/patterns/modal/Cover.tsx

@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="flex flex-column h-100 items-center justify-center pa3">

client/patterns/modal/Details.tsx

@@ -6,7 +6,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Modal">
             <div className="ph4 pv5">

client/patterns/notification/Cover.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">

client/patterns/notification/Details.tsx

@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Notification">
             <div className="ph4 pv5">

client/patterns/pagination/Cover.tsx

@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">

client/patterns/pagination/Details.tsx

@@ -5,7 +5,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Pagination">
             <div className="ph4 pv5">

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

@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">

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

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Previous and next buttons">
             <div className="ph4 pv5">

client/patterns/pricing-table/Cover.tsx

@@ -5,7 +5,7 @@ import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex items-center justify-center ph2">

client/patterns/pricing-table/Details.tsx

@@ -6,7 +6,7 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Pricing table">
             <div className="ph4 pv5">

client/patterns/progress-bar/Cover.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">

client/patterns/progress-bar/Details.tsx

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import useInterval from '../../hooks/useInterval';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     const [progress, setProgress] = useState(0);
     useInterval(() => {
         setProgress(v => v === 100 ? 0 : v + 1);

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

@@ -5,7 +5,7 @@ import Line from '../../placeholders/Line';
 import Rectangle from '../../placeholders/Rectangle';
 import Triangle from '../../placeholders/Triangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">

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

@@ -6,10 +6,15 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 import Triangle from '../../placeholders/Triangle';
 
-const Details = () => {
+interface ItemProps {
+    index: number;
+    title: React.ReactNode;
+}
+
+const Details: React.FC<{}> = () => {
     const [activeItem, setActiveItem] = useState(-1);
 
-    const Item = ({ index, title, children }) => {
+    const Item: React.FC<ItemProps> = ({ index, title, children }) => {
         const isOpened = (index === activeItem);
         const click = () => setActiveItem(isOpened ? -1 : index);
         return (

client/patterns/radio-switch/Cover.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">

client/patterns/radio-switch/Details.tsx

@@ -5,7 +5,7 @@ import RelatedPatterns from '../../components/RelatedPatterns';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     const [isFirstChecked, setFirstChecked] = useState(false);
     const toggle = () => setFirstChecked(c => !c);
 

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

@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 import Square from '../../placeholders/Square';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="flex h-100 pa2">

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

@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Same height columns">
             <div className="ph4 pv5">

client/patterns/search-box/Cover.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">

client/patterns/search-box/Details.tsx

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Search box">
             <div className="ph4 pv5">

client/patterns/separator/Cover.tsx

@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">

client/patterns/separator/Details.tsx

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Separator">
             <div className="ph4 pv5">

client/patterns/sidebar/Cover.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex">

client/patterns/sidebar/Details.tsx

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Block from '../../placeholders/Block';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Sidebar">
             <div className="ph4 pv5">

client/patterns/simple-grid/Cover.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">

client/patterns/simple-grid/Details.tsx

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Simple grid">
             <div className="ph4 pv5">

client/patterns/slider/Cover.tsx

@@ -4,7 +4,7 @@ import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">

client/patterns/slider/Details.tsx

@@ -5,7 +5,7 @@ import Circle from '../../placeholders/Circle';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Slider">
             <div className="ph4 pv5">

client/patterns/split-navigation/Cover.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">

client/patterns/split-navigation/Details.tsx

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Split navigation">
             <div className="ph4 pv5">

client/patterns/split-screen/Cover.tsx

@@ -4,7 +4,7 @@ import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex">

client/patterns/split-screen/Details.tsx

@@ -6,7 +6,7 @@ import Block from '../../placeholders/Block';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Split screen">
             <div className="ph4 pv5">

client/patterns/stepper-input/Cover.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex items-center justify-center pa2">

client/patterns/stepper-input/Details.tsx

@@ -4,11 +4,11 @@ import { Link } from 'react-router-dom';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     const [value, setValue] = useState(0);
     const decrease = () => setValue(value - 1);
     const increase = () => setValue(value + 1);
-    const change = (e) => setValue(parseInt(e.target.value, 10));
+    const change = (e: React.ChangeEvent<HTMLInputElement>) => setValue(parseInt(e.target.value, 10));
 
     return (
         <DetailsLayout title="Stepper input">

client/patterns/sticky-footer/Cover.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column">

client/patterns/sticky-footer/Details.tsx

@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Sticky footer">
             <div className="ph4 pv5">

client/patterns/sticky-header/Cover.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column">

client/patterns/sticky-header/Details.tsx

@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Sticky header">
             <div className="ph4 pv5">

client/patterns/switch/Cover.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">

client/patterns/switch/Details.tsx

@@ -4,7 +4,7 @@ import RelatedPatterns from '../../components/RelatedPatterns';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     const [checked, setChecked] = useState(false);
     const toggle = () => setChecked(c => !c);
 

client/patterns/tab/Cover.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">

client/patterns/tab/Details.tsx

@@ -4,10 +4,14 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+interface TabProps {
+    tabIndex: number;
+}
+
+const Details: React.FC<{}> = () => {
     const [activeTab, setActiveTab] = useState(0);
 
-    const Tab = ({ tabIndex, children }) => {
+    const Tab: React.FC<TabProps> = ({ tabIndex, children }) => {
         const isActive = tabIndex === activeTab;
         const click = () => setActiveTab(tabIndex);
         return (

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

@@ -3,7 +3,7 @@ import React from 'react';
 import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">

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

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     const [visible, setVisible] = useState(false);
     const toggle = () => setVisible(v => !v);
 

client/patterns/wizard/Cover.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">

client/patterns/wizard/Details.tsx

@@ -6,7 +6,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Line from '../../placeholders/Line';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Wizard">
             <div className="ph4 pv5">

package-lock.json

@@ -1977,6 +1977,21 @@
                 "@types/node": "*"
             }
         },
+        "@types/highlight.js": {
+            "version": "9.12.3",
+            "resolved": "https://registry.npmjs.org/@types/highlight.js/-/highlight.js-9.12.3.tgz",
+            "integrity": "sha512-pGF/zvYOACZ/gLGWdQH8zSwteQS1epp68yRcVLJMgUck/MjEn/FBYmPub9pXT8C1e4a8YZfHo1CKyV8q1vKUnQ==",
+            "dev": true
+        },
+        "@types/highlightjs": {
+            "version": "9.12.0",
+            "resolved": "https://registry.npmjs.org/@types/highlightjs/-/highlightjs-9.12.0.tgz",
+            "integrity": "sha512-MmUcjkDtCBfx2BPeLLTtJ5mFmGgWk9nAgZmNesixaGHOr0tCecsTU2iUgYvhRsWJSts2WbcpAtVPuIzZ0ybJ1A==",
+            "dev": true,
+            "requires": {
+                "@types/highlight.js": "*"
+            }
+        },
         "@types/history": {
             "version": "4.7.3",
             "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.3.tgz",

package.json

@@ -22,6 +22,7 @@
         "@babel/preset-env": "^7.7.4",
         "@babel/preset-react": "^7.7.4",
         "@loadable/babel-plugin": "^5.10.3",
+        "@types/highlightjs": "^9.12.0",
         "@types/loadable__component": "^5.10.0",
         "@types/react": "^16.9.13",
         "@types/react-dom": "^16.9.4",