Define typescript type for placeholders

client/components/CoverCard.tsx

@@ -4,7 +4,11 @@ import { Link } from 'react-router-dom';
 import CoverLoader from '../loaders/CoverLoader';
 import slug from '../helpers/slug';
 
-const CoverCard = ({ pattern }) => {
+interface CoverCardProps {
+    pattern: string;
+}
+
+const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
     return (
         <div className="pa1 w-20">
             <Link

client/loaders/CoverLoader.tsx

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

client/placeholders/Block.tsx

@@ -2,7 +2,13 @@ import React from 'react';
 
 import random from '../helpers/random';
 
-const Block = ({ justify = 'start', numberOfBlocks = 1, blockHeight = 4 }) => {
+interface BlockProps {
+    blockHeight?: number;
+    justify?: string;
+    numberOfBlocks?: number;
+}
+
+const Block: React.FC<BlockProps> = ({ justify = 'start', numberOfBlocks = 1, blockHeight = 4 }) => {
     return (
         <div className={`flex flex-wrap w-100 justify-${justify}`}>
             {

client/placeholders/BrowserFrame.tsx

@@ -1,8 +1,13 @@
-import React, { useState } from 'react';
+import React, { useState, ReactNode } from 'react';
 
 import SampleCode from '../components/SampleCode';
 
-const BrowserFrame = ({ content, source }) => {
+interface BrowserFrameProps {
+    content: ReactNode;
+    source: string;
+}
+
+const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
     const [isContentActive, setContentActive] = useState(true);
     const flip = () => setContentActive(isActive => !isActive);
 

client/placeholders/Circle.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 
-const Circle = ({ size = 16 }) => {
+interface CircleProps {
+    size?: number;
+}
+
+const Circle: React.FC<CircleProps> = ({ size = 16 }) => {
     return (
         <div
             className="bg-black-30 br-pill"

client/placeholders/Frame.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Frame = ({ children }) => {
+const Frame: React.FC<{}> = ({ children }) => {
     return (
         <div
             className="ba b--black-30 br2"

client/placeholders/Line.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Line = () => {
+const Line: React.FC<{}> = () => {
     return (
         <div
             className="w-100 bg-black-30"

client/placeholders/Rectangle.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 
-const Rectangle = ({ height = 8 }) => {
+interface RectangleProps {
+    height?: number;
+}
+
+const Rectangle: React.FC<RectangleProps> = ({ height = 8 }) => {
     return (
         <div
             className="w-100 bg-black-30 br1"

client/placeholders/Square.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 
-const Square = ({ size = 8 }) => {
+interface SquareProps {
+    size?: number;
+}
+
+const Square: React.FC<SquareProps> = ({ size = 8 }) => {
     return (
         <div className="w-100 h-100 bg-black-30 br2" />
     );

client/placeholders/Triangle.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 
-const Triangle = ({ size = 16, corner = 'tl' }) => {
+interface TriangleProps {
+    corner?: string;
+    size?: number;
+}
+
+const Triangle: React.FC<TriangleProps> = ({ size = 16, corner = 'tl' }) => {
     let bw = '';
     let bc = '';
     switch (corner) {

client/placeholders/VerticalLine.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const VerticalLine = () => {
+const VerticalLine: React.FC<{}> = () => {
     return (
         <div
             className="h-100 bg-black-30"