v1.0.0.: webpack used for examples, dependencies reorganized, example…

… code highlighting fix, updated README, hosting example on gh-pages.
fortunar · Sep 15, 2018 · 3930ff9 · 3930ff9
1 parent 8ad4e3d
commit 3930ff9
Show file tree

Hide file tree

Showing 44 changed files with 6,353 additions and 135,597 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+ "presets": ["env", "react", "es2015"],
+ "plugins": ["transform-object-rest-spread"]
+}
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.gitignore b/.gitignore
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,5 @@
+src
+examples
+.babelrc
+.gitignore
+webpack.config.js
diff --git a/Procfile b/Procfile
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 
+
 # react-sidemenu
 
 Lightweight side menu component written in React.js. No jQuery, just CSS3.
@@ -24,9 +25,10 @@ ES6 syntax:
 ES5 syntax:
 
  var SideMenu = require('react-sidemenu').SideMenu;
-**Styling:** To use default styling include `react-sidemenu.css` to your project. For an idea on how to customize styling see [Demo](http://react-sidemenu-demo.herokuapp.com/).
+## Styling!
+ To use default styling include `side-menu.css` to your project. You can find it in dist folder when installing via `npm`. For an idea on how to customize styling see [Demo](https://fortunar.github.io/react-sidemenu/).
 ## Demo & Examples
-[Demo](http://react-sidemenu-demo.herokuapp.com/) showcasing the functionalities & code examples (wait for it to load a bit as it is on free plan on Heroku). We use Font Awesome as a CDN for the example icons to show.
+[Demo](https://fortunar.github.io/react-sidemenu/) showcasing the functionalities & code examples. We use Font Awesome as a CDN for the example icons to show.
 
 You can run examples by yourself. Clone the repo and do:
 
@@ -35,7 +37,7 @@ You can run examples by yourself. Clone the repo and do:
 
 ## Options
 
-< SideMenu > - main component
+`<SideMenu>` - main component
 
 |**Option**|**Default**|**Description**|
 | --- | --- | --- |
@@ -48,7 +50,7 @@ You can run examples by yourself. Clone the repo and do:
 | rtl | false | This property enables you to use the sidemenu in a right-to-left page. [Example](http://react-sidemenu-demo.herokuapp.com/) |
 | shouldTriggerClickOnParents | false | This property enables triggering 'onMenuItemClick' on parent items that have children. |
 
-< Item > - this component is for the non-JSON config of the menu
+`<Item>` - this component is for the non-JSON config of the menu
 
 |**Option**|**Description**|
 | --- | --- |
@@ -63,5 +65,5 @@ You can run examples by yourself. Clone the repo and do:
 Any contribution is welcome.
 
 To be done:
-
  - tests & CI support
+ - refactor examples code (it's awful, I know)
diff --git a/bower.json b/bower.json
diff --git a/example/src/app.less → demo/app.less b/example/src/app.less → demo/app.less
@@ -1,4 +1,3 @@
-@import "../../less/side-menu.less";
 
 @color-white: #F2F2F2;
 body {

diff --git a/example/src/example-active-item.js → demo/example-active-item.js b/example/src/example-active-item.js → demo/example-active-item.js
@@ -1,16 +1,14 @@
-import React from 'react';
-import {SideMenu, Item} from 'react-sidemenu';
-import ReactDOM from 'react-dom';
-import createReactClass from 'create-react-class';
+import React, {Component} from 'react';
+import SideMenu, {Item} from 'src';
 
-let ExampleActiveItem = createReactClass({
+export default class ExampleActiveItem extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {activeItem : 'item1.1.1'};
+ }
 
- getInitialState: function() {
- return { activeItem: 'item1.1.1'};
- },
-
- render: function() {
- return (
+ render() {
+ return (
  <div>
  <p>
  <b>activeItem</b> propery presets the active menu item and opens all the necessary parents.
@@ -41,8 +39,6 @@ let ExampleActiveItem = createReactClass({
  <Item label="Item 3" value="item3" icon="fa-beer"/>
  </SideMenu>
  </div>
- )
- }
-});
-
-ReactDOM.render(<ExampleActiveItem />, document.getElementById('example-active-item'));
+ );
+ }
+}
diff --git a/example/src/example-custom-click.js → demo/example-custom-click.js b/example/src/example-custom-click.js → demo/example-custom-click.js
@@ -1,10 +1,8 @@
-import React from 'react';
-import {SideMenu, Item} from 'react-sidemenu';
-import ReactDOM from 'react-dom';
-import createReactClass from 'create-react-class';
+import React, {Component} from 'react';
+import SideMenu, {Item} from 'src';
 
-let Example4 = createReactClass({
- render: function() {
+export default class ExampleCustomClick extends Component {
+ render() {
  return (
  <div>
  <p>
@@ -30,8 +28,6 @@ let Example4 = createReactClass({
  <Item label="Item 3" value="item3" icon="fa-beer"/>
  </SideMenu>
  </div>
- )
+ );
  }
-});
-
-ReactDOM.render(<Example4 />, document.getElementById('example-custom-click'));
+}
diff --git a/example/src/example-custom-render.js → demo/example-custom-render.js b/example/src/example-custom-render.js → demo/example-custom-render.js
@@ -1,10 +1,8 @@
-import React from 'react';
-import {SideMenu, Item} from 'react-sidemenu';
-import ReactDOM from 'react-dom';
-import createReactClass from 'create-react-class';
+import React, {Component} from 'react';
+import SideMenu, {Item} from 'src';
 
-let Example3 = createReactClass({
- render: function() {
+export default class ExampleCustomRender extends Component {
+ render() {
  return (
  <div>
  <p>
@@ -30,8 +28,6 @@ let Example3 = createReactClass({
  <Item label="Item 3" value="item3" icon="fa-beer"/>
  </SideMenu>
  </div>
- )
+ );
  }
-});
-
-ReactDOM.render(<Example3 />, document.getElementById('example-custom-render'));
+}
diff --git a/example/src/example-custom-theme.js → demo/example-custom-theme.js b/example/src/example-custom-theme.js → demo/example-custom-theme.js
@@ -1,10 +1,8 @@
-import React from 'react';
-import {SideMenu, Item} from 'react-sidemenu';
-import ReactDOM from 'react-dom';
-import createReactClass from 'create-react-class';
+import React, {Component} from 'react';
+import SideMenu, {Item} from 'src';
 
-let ExampleTheme = createReactClass({
- render: function() {
+export default class ExampleCustomTheme extends Component {
+ render() {
  return (
  <div>
  <p>
@@ -30,8 +28,6 @@ let ExampleTheme = createReactClass({
  <Item label="Item 3" value="item3" icon="fa-beer"/>
  </SideMenu>
  </div>
- )
+ );
  }
-});
-
-ReactDOM.render(<ExampleTheme />, document.getElementById('example-custom-theme'));
+}
diff --git a/example/src/example-no-collapse.js → demo/example-no-collapse.js b/example/src/example-no-collapse.js → demo/example-no-collapse.js
@@ -1,12 +1,9 @@
-import React from 'react';
-import {SideMenu, Item} from 'react-sidemenu';
-import ReactDOM from 'react-dom';
-import createReactClass from 'create-react-class';
+import React, {Component} from 'react';
+import SideMenu, {Item} from 'src';
 
-let Example2 = createReactClass({
- render: function() {
- return (
- <div>
+export default class ExampleNoCollapse extends Component {
+ render() {
+ return(<div>
  <p>
  This propery controls whether sections of menu collapse when you click on other items.
  </p>
@@ -30,8 +27,6 @@ let Example2 = createReactClass({
  <Item label="Item 3" value="item3" icon="fa-beer"/>
  </SideMenu>
  </div>
- )
+ );
  }
-});
-
-ReactDOM.render(<Example2 />, document.getElementById('example-no-collapse'));
+}
diff --git a/example/src/example-normal.js → demo/example-normal.js b/example/src/example-normal.js → demo/example-normal.js
@@ -1,7 +1,5 @@
-import React from 'react';
-import {SideMenu} from 'react-sidemenu';
-import ReactDOM from 'react-dom';
-import createReactClass from 'create-react-class';
+import React, {Component} from 'react';
+import SideMenu from 'src';
 
 const items = [
  {divider: true, label: 'Segment 1', value: 'segment1'},
@@ -23,17 +21,15 @@ const items = [
  {label: 'Item 3', value: 'item3', icon: 'fa-beer'}
 ];
 
-let Example1 = createReactClass({
- render: function() {
+export default class ExampleNormal extends Component {
+ render() {
  return (
  <div>
  <SideMenu
  items={items}
  reverse={false}
  />
  </div>
- )
+ );
  }
-});
-
-ReactDOM.render(<Example1 />, document.getElementById('example-normal'));
+}
diff --git a/example/src/example-rtl.js → demo/example-rtl.js b/example/src/example-rtl.js → demo/example-rtl.js
@@ -1,7 +1,5 @@
-import React from 'react';
-import {SideMenu} from 'react-sidemenu';
-import ReactDOM from 'react-dom';
-import createReactClass from 'create-react-class';
+import React, {Component} from 'react';
+import SideMenu from 'src';
 
 const items = [
  {divider: true, label: 'Segment 1', value: 'segment1'},
@@ -23,17 +21,15 @@ const items = [
  {label: 'Item 3', value: 'item3', icon: 'fa-beer'}
 ];
 
-let Example5 = createReactClass({
- render: function() {
+export default class ExampleRTL extends Component {
+ render() {
  return (
  <div>
  <SideMenu
  items={items}
  rtl={true}
  />
  </div>
- )
+ );
  }
-});
-
-ReactDOM.render(<Example5 />, document.getElementById('example-rtl'));
+}