added github page docs

catc · Mar 19, 2017 · bb4b814 · bb4b814
1 parent c5c896b
commit bb4b814
Show file tree

Hide file tree

Showing 18 changed files with 1,300 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -67,11 +67,9 @@ Pass a function to be called when time is changed. Used to store time state in p
 }
 ```
 
-#### `displayDoneButton` (bool)
-Whether or not to display "Done" button on bottom of component. Also need to pass in a `onDoneButtonClick` function.
 
 #### `onDoneClick` (function)
-Function that is called when "Done" button is clicked. Useful for triggering some action on the parent component, like closing the timepicker.
+Displays the "Done" button and calls function when button is clicked. Useful for triggering some action on the parent component, like closing the timepicker
 
 #### `switchToMinuteOnHourSelect` (bool)
 Changes clock unit from hour to minute after selecting an hour. Exists mainly to provides a better user experience.

diff --git a/code-loader.js b/code-loader.js
@@ -0,0 +1,21 @@
+const blockLoader = require('block-loader');
+
+const options = {
+	start: '<pre><code className="javascript">',
+	end: '</code></pre>',
+	process: function fixPreBlocks(pre) {
+		const replaced = pre
+			.replace(options.start,'')   // first, remove the start/end delimiters, then:
+			.replace(options.end,'')     //
+			.replace(/&/g,'&amp;')       // 1. use html entity equivalent,
+			.replace(/</g,'&lt;')        // 2. use html entity equivalent,
+			.replace(/>/g,'&gt;')        // 3. use html entity equivalent,
+			.replace(/\t/g, '    ')
+			.replace(/([{}])/g,"{'$1'}") // 4. JSX-safify curly braces,
+			.replace(/\n/g,"{'\\n'}");   // 5. and preserve line endings, thanks.
+
+		// done! return with the delimiters put back in place
+		return options.start + replaced + options.end
+	}
+};
+module.exports = blockLoader(options)
diff --git a/docs/build/bundle.js b/docs/build/bundle.js
diff --git a/docs/build/style.css b/docs/build/style.css
diff --git a/docs/css/main.css b/docs/css/main.css
diff --git a/docs/index.html b/docs/index.html
@@ -1,26 +1,26 @@
 <!DOCTYPE html>
-
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="language" content="EN">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 
-	<!--  
-	<meta name="description" content="Displace.js is a minimal javascript library for creating movable DOM elements.">
-	<meta property="og:url" content="https://catc.github.io/displace">
+
+	<meta name="description" content="Google Keep app inspired time picker for react.">
+	<meta property="og:url" content="https://catc.github.io/react-timekeeper">
 	<meta property="og:type" content="website">
-	<meta property="og:title" content="displace.js">
-	<meta property="og:description" content="A minimal javascript library for creating moveable DOM elements.">
-	<meta property="og:image" content="https://avatars0.githubusercontent.com/u/5651132?v=3&s=460"> -->
+	<meta property="og:title" content="react-timekeeper">
+	<meta property="og:description" content="Time picker based on the style of the Google Keep app.">
+	<meta property="og:image" content="https://avatars0.githubusercontent.com/u/5651132?v=3&s=460">
 
-	<title>Keep timepicker</title>
+	<title>React Timekeeper</title>
 
-	<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
-	<!-- <link rel="stylesheet" href="build/style.css"> -->
+	<!-- TODO - remove unused fonts -->
+	<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700|Roboto+Condensed:400,700|Roboto+Mono" rel="stylesheet">
+	<link rel="stylesheet" href="./build/style.css">
 </head>
 <body>
 	<div id="root"></div>
 
-	<script src="build/bundle.js" type="text/javascript"></script>
+	<script src="./build/bundle.js" type="text/javascript"></script>
 </body>
diff --git a/docs/js/api.jsx b/docs/js/api.jsx
@@ -0,0 +1,135 @@
+import React from 'react'
+
+class Installation extends React.Component {
+	constructor(props){
+		super(props)
+		this.state = {
+			// time: '3:70'
+			demoTime: '12:45 pm',
+			displayDemo: true
+		}
+
+		this.updateDemoTime = this.updateDemoTime.bind(this)
+	}
+	updateDemoTime(data){
+		this.setState({ demoTime: data.formatted})
+	}
+	toggleDemoDisplay(val){
+		this.setState({displayDemo: val})
+	}
+
+
+	render(){
+		const state = this.state
+
+		return (
+			<section className="api docs-section">
+					<h2>API</h2>
+
+						{/* ----- */}
+						<h3>
+							<code className="name">time</code>&nbsp;
+							accepts <span className="accepts">string/object</span>&nbsp;
+							(default: <code className="default">null</code>)
+						 </h3>
+						<div className="api__description">
+							<p className="text">Time to set on component. Accepts time in 4 formats:</p>
+							<pre><code className="javascript">// string with meridiem
+'4:55 pm'
+'4:55pm'
+
+// string without meridiem (assumes a 24 hour format)
+'16:55'
+
+// object with meridiem
+{
+	hour: 4,
+	minute: 55,
+	meridiem: 'pm'
+}
+
+// object without meridiem (assumes a 24 hour format)
+{
+	hour: 16,
+	minute: 55
+}</code></pre>
+						</div>
+
+						{/* ----- */}
+						<h3>
+							<code className="name">onChange</code>&nbsp;
+							accepts <span className="accepts">func</span>&nbsp;
+							(default: <code className="default">null</code>)
+						 </h3>
+						<div className="api__description">
+							<p className="text">Pass a function to be called when time is changed. Used to store time state in parent component. Function called returns object with updated time.</p>
+							<pre><code className="javascript">{
+	formatted: '4:55 pm',	// 12 hour format
+	formattedSimple: '4:55', 	// similar to formatted (12h), but no meridiem
+	formatted24: '16:55',
+	hour: 4,
+	hour24: 16,
+	minute: 55,
+	meridiem: 'pm'
+}</code></pre>
+						</div>	
+
+
+						{/* ----- */}
+						<h3>
+							<code className="name">onDoneClick</code>&nbsp;
+							accepts <span className="accepts">func</span>&nbsp;
+							(default: <code className="default">null</code>)
+						 </h3>
+						<div className="api__description">
+							<p className="text">Displays the "Done" button and calls function when button is clicked. Useful for triggering some action on the parent component, like closing the timepicker.</p>
+						</div>	
+
+						{/* ----- */}
+						<h3>
+							<code className="name">switchToMinuteOnHourSelect</code>&nbsp;
+							accepts <span className="accepts">bool</span>&nbsp;
+							(default: <code className="default">false</code>)
+						 </h3>
+						<div className="api__description">
+							<p className="text">Changes clock unit from hour to minute after selecting an hour. Exists mainly to provides a better user experience.</p>
+						</div>
+
+						{/* ----- */}
+						<h3>
+							<code className="name">closeOnMinuteSelect</code>&nbsp;
+							accepts <span className="accepts">false</span>&nbsp;
+							(default: <code className="default">false</code>)
+						 </h3>
+						<div className="api__description">
+							<p className="text">Whether or not to trigger "Done" button click when the user selects minutes. Similar to Google Keep functionality, where once the selects hour and minute, the picker automatically closes.</p>
+						</div>	
+
+						{/* ----- */}
+						<h3>
+							<code className="name">config</code>&nbsp;
+							accepts <span className="accepts">object</span>&nbsp;
+							(default: <code className="default">null</code>)
+						 </h3>
+						<div className="api__description">
+							<p className="text">Pass in object with any config properties to override. Currently supports overriding style properties. See <a href="https://github.com/catc/react-timekeeper/blob/master/src/helpers/config.js" target="_blank">full list</a> of properties.</p>
+
+							<pre><code className="javascript">// example
+<TimeKeeper 
+	config={{
+		TIMEPICKER_BACKGROUND: 'red',
+		FONT_FAMILY: '"Open Sans", sans-serif'
+	}}
+	// other props...
+/> </code></pre>
+
+						</div>	
+
+
+			</section>
+		)
+	}
+}
+
+export default Installation
+
diff --git a/docs/js/content.jsx b/docs/js/content.jsx
@@ -2,19 +2,35 @@ import React from 'react'
 
 import '../scss/main.scss'
 
+// lib
+import highlight from 'highlight.js/lib'
+import 'highlight.js/lib/languages/javascript'
+import 'highlight.js/styles/dracula.css'
+// import 'highlight.js/styles/monokai-sublime.css'
+// import 'highlight.js/styles/atom-one-dark.css'
+// import 'highlight.js/styles/androidstudio.css'
 
-import Keep from 'keep-timepicker'
+// sections
+import Intro from './intro'
+import Installation from './installation'
+import Api from './api'
+import Examples from './examples'
 
-const Content = ({}) => {
-	return (
-		<div>
-			content...
+class Content extends React.Component {
+	componentDidMount(){
+		highlight.initHighlightingOnLoad();
+	}
 
-			<div className="picker-test-wrapper">
-				<Keep />
+	render(){
+		return (
+			<div>
+				<Intro />
+				<Installation />
+				<Api />
+				<Examples />
 			</div>
-		</div>
-	)
+		)
+	}
 }
 
 export default Content