Add more examples

Author: onurkerimov

src/components/DateRange/README.md

@@ -0,0 +1,29 @@
+```jsx inside Markdown
+<DateRange
+  onChange={()=> {}}
+  moveRangeOnFirstSelection={false}
+  ranges={[
+    {
+      startDate: new Date(),
+      endDate: null,
+      key: 'selection'
+    }
+  ]}
+  className={'PreviewArea'}
+/>
+```
+
+```jsx inside Markdown
+<DateRange
+  editableDateInputs={true}
+  moveRangeOnFirstSelection={false}
+  ranges={[
+    {
+      startDate: new Date(),
+      endDate: null,
+      key: 'selection'
+    }
+  ]}
+  className={'PreviewArea'}
+/>
+```

src/components/DateRangePicker/README.md

@@ -0,0 +1,74 @@
+### 2 Month View
+
+```jsx inside Markdown
+import { addDays } from 'date-fns';
+
+<DateRangePicker
+  showSelectionPreview={true}
+  moveRangeOnFirstSelection={false}
+  className={'PreviewArea'}
+  months={2}
+  ranges={[
+    {
+      startDate: new Date(),
+      endDate: addDays(new Date(), 7),
+      key: 'selection'
+    }
+  ]}
+  direction="horizontal"
+/>;
+```
+
+### Vertical Infinite
+
+```jsx inside Markdown
+import { addDays } from 'date-fns';
+
+<DateRangePicker
+  className={'PreviewArea'}
+  months={1}
+  minDate={addDays(new Date(), -300)}
+  maxDate={addDays(new Date(), 900)}
+  direction="vertical"
+  scroll={{ enabled: true }}
+  ranges={[
+    {
+      startDate: new Date(),
+      endDate: null,
+      key: 'selection'
+    },
+    {
+      startDate: new Date(),
+      endDate: addDays(new Date(), 3),
+      key: 'compare'
+    }
+  ]}
+/>;
+```
+
+```jsx inside Markdown
+import { addDays } from 'date-fns';
+
+<DateRangePicker
+  ranges={[
+    {
+      startDate: addDays(new Date(), 1),
+      endDate: null,
+      key: 'selection1'
+    },
+    {
+      startDate: addDays(new Date(), 4),
+      endDate: addDays(new Date(), 8),
+      key: 'selection2'
+    },
+    {
+      startDate: addDays(new Date(), 8),
+      endDate: addDays(new Date(), 10),
+      key: 'selection3',
+      showDateDisplay: false,
+      autoFocus: false
+    }
+  ]}
+  className={'PreviewArea'}
+/>
+```

src/components/DefinedRange/README.md

@@ -0,0 +1,19 @@
+ <DefinedRange
+  ranges={[this.state.definedRange.selection]}
+  renderStaticRangeLabel={renderStaticRangeLabel}
+  staticRanges={[
+    {
+      label: 'Hoy',
+      hasCustomRendering: true,
+      range: () => ({
+        startDate: new Date(),
+        endDate: new Date(),
+      }),
+      isSelected() {
+        return true;
+      },
+    },
+  ]}
+  onChange={this.handleRangeChange.bind(this, 'definedRange')}
+  className={'centered'}
+/>