Update example titles

Author: onurkerimov

demo/styles.css

@@ -9,4 +9,8 @@ body {
 [data-testid=mountNode] > * {
   margin: auto;
   box-shadow: 1px 1px 81px rgba(41,60,74,.18);
+}
+
+.rsg--toolbar-17 {
+  display: none;
 }

package.json

@@ -4,7 +4,7 @@
   "description": "A React component for choosing dates and date ranges.",
   "main": "dist/index.js",
   "scripts": {
-    "start": "yarn build:css & yarn build:js & styleguidist server",
+    "start": "yarn build:css & styleguidist server",
     "build": "yarn build:css & yarn build:js & styleguidist build",
     "build:css": "postcss 'src/styles.scss' -d dist --ext css & postcss 'src/theme/*.scss' -d 'dist/theme' --ext css",
     "build:js": "babel ./src --out-dir ./dist",

src/components/Calendar/README.md

@@ -1,4 +1,4 @@
-### Internationalization
+#### Example: Internationalization
 
 ```jsx inside Markdown
 import * as locales from 'react-date-range/dist/locale';

src/components/DateRange/README.md

@@ -1,24 +1,4 @@
-### DateRange
-
-```jsx inside Markdown
-import {useState} from 'react'
-const [state, setState] = useState([
-    {
-      startDate: new Date(),
-      endDate: null,
-      key: 'selection'
-    }
-  ]);
-  
-
-<DateRange
-  onChange={item => setState([item.selection])}
-  moveRangeOnFirstSelection={false}
-  ranges={state}
-/>
-```
-
-### Editable Date Inputs
+#### Example: Editable Date Inputs
 
 ```jsx inside Markdown
 import {useState} from 'react'

src/components/DateRangePicker/README.md

@@ -1,4 +1,4 @@
-### 2 Month View
+#### Example: 2 Month View
 
 ```jsx inside Markdown
 import { addDays } from 'date-fns';
@@ -22,7 +22,7 @@ const [state, setState] = useState([
 />;
 ```
 
-### Vertical Infinite
+#### Example: Vertical Infinite
 
 ```jsx inside Markdown
 import { addDays } from 'date-fns';
@@ -52,7 +52,7 @@ const [state, setState] = useState({
 />;
 ```
 
-### Multiple Range
+#### Example: Multiple Range
 
 ```jsx inside Markdown
 import { addDays } from 'date-fns';

src/components/DefinedRange/README.md

@@ -1,4 +1,4 @@
-### DateRange
+#### Example: Defined Date Ranges
 
 ```jsx inside Markdown
 import { useState } from 'react';
@@ -51,7 +51,7 @@ const [state, setState] = useState([
   }
 ]);
 
-<DefinedRanges
+<DefinedRange
   onChange={item => setState([item.selection])}
   ranges={state}
   renderStaticRangeLabel={renderStaticRangeLabel}

src/components/DefinedRange/index.js

@@ -6,7 +6,7 @@ import { rangeShape } from '../DayCell';
 import InputRangeField from '../InputRangeField';
 import cx from 'classnames';
 
-class DefinedRanges extends Component {
+class DefinedRange extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -108,7 +108,7 @@ class DefinedRanges extends Component {
   }
 }
 
-DefinedRanges.propTypes = {
+DefinedRange.propTypes = {
   inputRanges: PropTypes.array,
   staticRanges: PropTypes.array,
   ranges: PropTypes.arrayOf(rangeShape),
@@ -122,12 +122,12 @@ DefinedRanges.propTypes = {
   renderStaticRangeLabel: PropTypes.func,
 };
 
-DefinedRanges.defaultProps = {
+DefinedRange.defaultProps = {
   inputRanges: defaultInputRanges,
   staticRanges: defaultStaticRanges,
   ranges: [],
   rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'],
   focusedRange: [0, 0],
 };
 
-export default DefinedRanges;
+export default DefinedRange;

styleguide.config.js

@@ -1,7 +1,9 @@
 const path = require('path');
+const isDEV = process.env.NODE_ENV === 'development';
+const moduleSource = isDEV ? 'src' : 'dist';
 
 module.exports = {
-  ignore: ['**/*.test.js', '**/DateInput/*', '**/DayCell/*', '**/Month/*', '**/InputRangeField/*'],
+  //ignore: ['**/*.test.js', '**/DateInput/*', '**/DayCell/*', '**/Month/*', '**/InputRangeField/*'],
   title: 'react-date-range',
   showSidebar: false,
   template: {
@@ -21,7 +23,7 @@ module.exports = {
         },
         {
           rel: 'stylesheet',
-          href: './styleguide/styles.css',
+          href: './demo/styles.css',
         },
       ],
     },
@@ -64,13 +66,13 @@ module.exports = {
   },
   // Override Styleguidist components
   styleguideComponents: {
-    LogoRenderer: path.join(__dirname, 'styleguide/components/Logo'),
-    StyleGuideRenderer: path.join(__dirname, 'styleguide/components/StyleGuide'),
-    SectionsRenderer: path.join(__dirname, 'styleguide/components/SectionsRenderer'),
+    LogoRenderer: path.join(__dirname, 'demo/components/Logo'),
+    StyleGuideRenderer: path.join(__dirname, 'demo/components/StyleGuide'),
+    SectionsRenderer: path.join(__dirname, 'demo/components/SectionsRenderer'),
   },
   moduleAliases: {
-    'react-date-range/dist': path.resolve(__dirname, 'dist'),
-    'react-date-range': path.resolve(__dirname, 'dist'),
+    'react-date-range/dist': path.resolve(__dirname, moduleSource),
+    'react-date-range': path.resolve(__dirname, moduleSource),
   },
   webpackConfig: {
     module: {
@@ -91,4 +93,23 @@ module.exports = {
       ],
     },
   },
+
+  sections: [
+    {
+      name: 'Introduction',
+      content: 'demo/README.md',
+      sections: [
+        {
+          components: () => ['src/components/DateRangePicker/index.js'],
+        },
+        {
+          components: () => ['src/components/DateRange/index.js'],
+        },
+        {
+          components: () => ['src/components/Calendar/index.js'],
+        },
+      ],
+      sectionDepth: 1,
+    },
+  ],
 };