Demo prez stuff

alsiola · Apr 16, 2018 · e7ac0a6 · e7ac0a6
1 parent 8cc8b11
commit e7ac0a6
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git 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
@@ -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 {