From e7ac0a6fbb1cff034abe850d60715a8d8f862839 Mon Sep 17 00:00:00 2001
From: Alex Young <alex.young@hive.hr>
Date: Mon, 16 Apr 2018 20:20:33 +0100
Subject: [PATCH] Demo prez stuff

---
 demo/src/App.js    | 35 ++++++++++++++++++++++++++++++++++-
 demo/src/index.css |  2 +-
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/demo/src/App.js b/demo/src/App.js
index 7c2c1de..09004c9 100644
--- a/demo/src/App.js
+++ b/demo/src/App.js
@@ -7,7 +7,7 @@ import { generateDocs } from 'react-doc-props';
 
 import { documentation } from './PropDemo';
 
-export const documentationString = `
+const documentationString = `
 import { string, number, shape, arrayOf, setComponentProps } from 'react-doc-props';
 
 export const documentation = {
@@ -72,6 +72,34 @@ export const documentation = {
 setComponentProps(documentation, PropDemo);
 `;
 
+const propTypesString = `
+import PropTypes from 'prop-types';
+
+PropDemo.propTypes = {
+    username: PropTypes.string,
+    age: PropTypes.number,
+    post: PropTypes.shape({
+        content: PropTypes.string.isRequired,
+        likes: PropTypes.number.isRequired,
+        category: PropTypes.shape({
+            name: PropTypes.string,
+            number: PropTypes.number
+        })
+    }).isRequired,
+    friends: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.number,
+            name: PropTypes.string
+        })
+    )
+};
+
+PropDemo.defaultProps = {
+    username: 'Name not set',
+    friends: []
+};
+`
+
 class App extends Component {
     render() {
         return (
@@ -87,6 +115,11 @@ class App extends Component {
                     mode: 'javascript',
                     readOnly: 'true'
                 }} />
+                <p>...and is equivalent to the following...</p>
+                <CodeMirror value={propTypesString} options={{
+                    mode: 'javascript',
+                    readOnly: 'true'
+                }} />
             </div>
         );
     }
diff --git a/demo/src/index.css b/demo/src/index.css
index ebe2e02..f0df96e 100644
--- a/demo/src/index.css
+++ b/demo/src/index.css
@@ -3,7 +3,7 @@ body {
     padding: 20px;
     font-family: Raleway, sans-serif;
     font-size: 1.2em;
-    background: linear-gradient(20deg, rgb(219, 112, 147), #daa357);
+    background: linear-gradient(20deg, #FFC0AC, #5789CC);
 }
 
 p {