example branch

.gitignore

@@ -1,2 +1,21 @@
-node_modules
+# See https://help.github.com/ignore-files/ for more about ignoring files.
-package-lock.json
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Rick van Lieshout
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

@@ -1,142 +1,5 @@
-# :cookie: react-cookie-consent :cookie:
+# React-cookie-consent
 
-A small, simple and customizable cookie consent bar for use in React applications.
+This is the example branch for react-cookie-consent.
 
-[![NPM](https://nodei.co/npm/react-cookie-consent.png)](https://npmjs.org/package/react-cookie-consent)
+https://mastermindzh.github.io/react-cookie-consent/
-
-## Default look
-
-![default look](https://raw.githubusercontent.com/Mastermindzh/react-cookie-consent/master/images/default.png)
-
-
-## Installation
-
-```
-npm install react-cookie-consent
-```
-
-or use yarn:
-
-```
-yarn add react-cookie-consent
-```
-
-## Using it
-
-You can import the cookie bar like this:
-
-```js
-import CookieConsent from "react-cookie-consent";
-```
-If you want to set/remove cookies yourself you can optionally import Cookie (straight from js-cookie) like this:
-```js
-import CookieConsent, { Cookies } from "react-cookie-consent";
-```
-
-Then you can use the component anywhere in your React app like so:
-
-```js
-<CookieConsent>
-    This website uses cookies to enhance the user experience.
-</CookieConsent>
-```
-You can optionally set some props like this (next chapter will show all props):
-
-```js
-<CookieConsent
-    location="bottom"
-    buttonText="Sure man!!"
-    cookieName="myAwesomeCookieName2"
-    style={{ background: "#2B373B" }}
-    buttonStyle={{ color: "#4e503b", fontSize: "13px" }}
->
-    This website uses cookies to enhance the user experience.{" "}
-    <span style={{ fontSize: "10px" }}>
-    This bit of text is smaller :O
-    </span>
-</CookieConsent>
-```
-
-One of the props (onAccept) is a function, this function will be called after the user has clicked the accept button. You can provide a function like so:
-
-```js
-<CookieConsent
-    onAccept={() => {alert("yay!")}}
->
-
-</CookieConsent>
-```
-
-## Props
-| Prop          |               Type               | Default value | Description                                                                                           |
-|---------------|:--------------------------------:|---------------|-------------------------------------------------------------------------------------------------------|
-| location      | String, either "top" or "bottom" | bottom        | Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window. |
-| children      |     String or React component    |               | Content to appear inside the bar                                                                      |
-| disableStyles |              boolean             | false         | If enabled the component will have no default style. (you can still supply style through props)       |
-| buttonText    |              String or React component              | I understand  | Text to appear on the button                                                                          |
-| cookieName    |              string              | CookieConsent | Name of the cookie used to track whether the user has agreed.                                         |
-| onAccept      |             function             | () => {}      | Function to be called after the accept button has been clicked.                                       |
-| style         |              Object              |  ![barstyle](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/barStyle.png?raw=true)             | React styling object for the bar.                                                                     |
-| buttonStyle   |              Object              |   ![buttonStyle](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/buttonStyle.png?raw=true)              | React styling object for the button.                                                                  |
-
-
-
-## Styling it
-
-You can provide styling for both the bar and the button.
-You can do this using the `style` and `buttonStyle` prop, both of these will append / replace the default style of the component.
-
-You can use `disableStyles={true}` to disable any built-in styling.
-
-### Examples
-
-#### changing the bar background to red
-
-```js
-<CookieConsent
-    style={{ background: "red" }}
->
-</CookieConsent>
-```
-
-#### changing the button font-weight to bold
-```js
-<CookieConsent
-    buttonStyle={{ fontWeight: "bold" }}
->
-</CookieConsent>
-```
-
-#### rainbows!
-
-![rainbows!](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/rainbow.png?raw=true)
-
-If you're crazy enough you can even make a rainbow colored bar:
-
-```js
-<CookieConsent
-    buttonText="OMG DOUBLE RAINBOW"
-    cookieName="myAwesomeCookieName2"
-    style={{ background: "linear-gradient(to right, orange , yellow, green, cyan, blue, violet)", textShadow: "2px 2px black" }}
-    buttonStyle={{background: "linear-gradient(to left, orange , yellow, green, cyan, blue, violet)", color:"white", fontWeight: "bolder", textShadow: "2px 2px black"}}
->
-    This website uses cookies to enhance the user experience.{" "}
-    <span style={{ fontSize: "10px" }}>
-    This bit of text is smaller :O
-    </span>
-</CookieConsent>
-```
-
-## Debugging it
-
-Because the cookie consent bar will be hidden once accepted, you will have to remove the cookie if you want to evaluate changes:
-
-```js
-import CookieConsent, { Cookies } from "react-cookie-consent";
-
-{Cookies.remove("myAwesomeCookieName2")}
-<CookieConsent
-    cookieName="myAwesomeCookieName2"
->
-</CookieConsent>
-```

example/.gitignore

@@ -1,21 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*

example/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "example",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "react": "^16.2.0",
-    "react-cookie-consent": "^1.0.5",
-    "react-dom": "^16.2.0",
-    "react-scripts": "1.1.0"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}

example/src/index.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
-
-ReactDOM.render(<App />, document.getElementById('root'));
-registerServiceWorker();

package.json

@@ -1,43 +1,23 @@
 {
-  "name": "react-cookie-consent",
+  "name": "example",
-  "author": {
+  "version": "0.1.0",
-    "name": "Rick van Lieshout",
+  "private": true,
-    "email": "info@rickvanlieshout.com"
+  "homepage": "https://mastermindzh.github.io/react-cookie-consent",
-  },
-  "version": "1.0.8",
-  "description": "A small, simple and customizable cookie consent bar for use in React applications.",
-  "main": "build/index.js",
   "dependencies": {
-    "js-cookie": "^2.2.0",
+    "react": "^16.2.0",
-    "react": "^15.5.4"
+    "react-cookie-consent": "^1.0.5",
+    "react-dom": "^16.2.0",
+    "react-scripts": "1.1.4"
   },
   "scripts": {
-    "build": "webpack"
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Mastermindzh/react-cookie-consent.git"
-  },
-  "keywords": [
-    "react",
-    "cookie",
-    "consent",
-    "cookiebar"
-  ],
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/Mastermindzh/react-cookie-consent/issues"
-  },
-  "homepage": "https://github.com/Mastermindzh/react-cookie-consent#readme",
   "devDependencies": {
-    "babel-cli": "^6.24.1",
+    "gh-pages": "^1.1.0"
-    "babel-core": "^6.24.1",
-    "babel-loader": "^7.0.0",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-preset-env": "^1.5.1",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-stage-1": "^6.24.1",
-    "webpack": "^2.6.1"
   }
 }

src/index.js

@@ -1,138 +1,8 @@
-import React, { Component } from "react";
+import React from 'react';
-import PropTypes from "prop-types";
+import ReactDOM from 'react-dom';
-import Cookies from "js-cookie";
+import './index.css';
+import App from './App';
+import registerServiceWorker from './registerServiceWorker';
 
-export const OPTIONS = {
+ReactDOM.render(<App />, document.getElementById('root'));
-  TOP: "top",
+registerServiceWorker();
-  BOTTOM: "bottom"
-};
-
-class CookieConsent extends Component {
-  constructor(props) {
-    super(props);
-    this.accept.bind(this);
-
-    this.state = {
-      visible: true,
-      style: {
-        position: "fixed",
-        width: "100%",
-        padding: "15px",
-        background: "#353535",
-        color: "white",
-        left: "0",
-        zIndex: "999",
-        lineHeight: "30px",
-        textAlign: "left"
-      },
-      buttonStyle: {
-        position: "absolute",
-        right: "50px",
-        border: "0",
-        background: "#ffd42d",
-        boxShadow: "none",
-        borderRadius: "0px",
-        padding: "5px",
-        color: "black"
-      }
-    };
-  }
-
-  componentWillMount(){
-    const { cookieName } = this.props;
-
-    if (Cookies.get(cookieName) != undefined ) {
-      this.setState({ visible: false });
-    }
-  }
-
-  /**
-   * Set a persistent cookie
-   */
-  accept() {
-    const { cookieName } = this.props;
-
-    Cookies.set(cookieName, true);
-    this.setState({ visible: false });
-  }
-
-  render() {
-
-    // If the bar shouldn't be visible don't render anything.
-    if (!this.state.visible) {
-      return null;
-    }
-
-    const {
-      location,
-      style,
-      buttonStyle,
-      disableStyles,
-      onAccept,
-      buttonText
-    } = this.props;
-
-    let myStyle = {},
-      myButtonStyle = {};
-
-    if (disableStyles) {
-      // if styles are disabled use the provided styles (or non)
-      myStyle = Object.assign({}, style);
-      myButtonStyle = Object.assign({}, buttonStyle);
-    } else {
-      // if styles aren't disabled merge them with the styles that are provided (or use default styles)
-      myStyle = Object.assign({}, { ...this.state.style, ...style });
-      myButtonStyle = Object.assign(
-        {},
-        { ...this.state.buttonStyle, ...buttonStyle }
-      );
-    }
-
-    // syntactic sugar to enable user to easily select top / bottom
-    switch (location) {
-      case OPTIONS.TOP:
-        myStyle.top = "0";
-        break;
-
-      case OPTIONS.BOTTOM:
-        myStyle.bottom = "0";
-        break;
-    }
-
-    return (
-      <div className="cookieConsent" style={myStyle}>
-        {this.props.children}
-        <button
-          style={myButtonStyle}
-          onClick={() => {
-            this.accept();
-            onAccept();
-          }}
-        >
-          {buttonText}
-        </button>
-      </div>
-    );
-  }
-}
-
-CookieConsent.propTypes = {
-  location: PropTypes.oneOf(["top", "bottom"]),
-  style: PropTypes.object,
-  buttonStyle: PropTypes.object,
-  children: PropTypes.any, // eslint-disable-line react/forbid-prop-types
-  disableStyles: PropTypes.bool,
-  onAccept: PropTypes.func,
-  buttonText: PropTypes.oneOfType([PropTypes.string,PropTypes.func,PropTypes.element]),
-  cookieName: PropTypes.string
-};
-CookieConsent.defaultProps = {
-  disableStyles: false,
-  location: OPTIONS.BOTTOM,
-  onAccept: () => {},
-  cookieName: "CookieConsent",
-  buttonText: "I understand"
-};
-
-export default CookieConsent;
-export {Cookies};

webpack.config.js

@@ -1,27 +0,0 @@
-var path = require('path');
-module.exports = {
-  entry: './src/index.js',
-  output: {
-    path: path.resolve(__dirname, 'build'),
-    filename: 'index.js',
-    libraryTarget: 'commonjs2' // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        include: path.resolve(__dirname, 'src'),
-        exclude: /(node_modules|bower_components|build)/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['env']
-          }
-        }
-      }
-    ]
-  },
-  externals: {
-    'react': 'commonjs react' // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
-  }
-};