add example app

aurbano · Jul 12, 2017 · 27244f8 · 27244f8
1 parent cf922e9
commit 27244f8
Show file tree

Hide file tree

Showing 19 changed files with 12,490 additions and 70 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,6 @@
 .gitignore
 
-dist/**/*
+dist/**/*
+example/**/*
+
+gulpfile.js
diff --git a/README.md b/README.md
@@ -65,7 +65,7 @@ This is where you probably want to update your state, to highlight them as selec
 import React from 'react';
 import Selection from 'react-ds'
 
-class MyComponent extends React.PureComponent {
+class Example extends React.PureComponent {
 
   constructor() {
     super();
@@ -138,8 +138,6 @@ Only edit the files in the `src` folder. I'll update `dist` manually before publ
 
 To run the tests simply run `npm test`. Add tests as you see fit to the `test` folder, they must be called `{string}.test.js`.
 
-## License
+## Meta
 
-Licensed under the MIT license.
-
-&copy; Copyright Alejandro U. Alvarez
+Copyright &copy; [Alejandro U. Alvarez](https:/aurbano.eu) 2017. MIT Licensed.
diff --git a/example/app/.gitignore b/example/app/.gitignore
@@ -0,0 +1,21 @@
+# 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*
diff --git a/example/app/README.md b/example/app/README.md
diff --git a/example/app/package.json b/example/app/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "app",
+  "version": "0.1.0",
+  "private": true,
+  "homepage": "https://aurbano.eu/react-ds/",
+  "dependencies": {
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-ds": "^1.1.0",
+    "react-scripts": "1.0.10"
+  },
+  "scripts": {
+    "build:less": "./node_modules/.bin/lessc src/example.less src/example.css",
+    "start": "npm run build:less && react-scripts start",
+    "build": "npm run build:less && react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "less": "^2.7.2"
+  }
+}
diff --git a/example/app/public/favicon.ico b/example/app/public/favicon.ico
diff --git a/example/app/public/index.html b/example/app/public/index.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
+    <!--<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
+    <meta name="keywords" content="react,reactjs,react component,component,select,control,ui,javascript,drag,selection,items">
+    <meta name="description" content="Simple React Drag-to-Select component with mouse and touch support, and 0 dependencies">
+    <meta property="og:locale" content="en-us">
+    <meta property="og:title" content="React-DS">
+    <meta property="og:description" content="Simple React Drag-to-Select component with mouse and touch support, and 0 dependencies">
+    <meta property="og:url" content="https://aurbano.eu/react-ds">
+    <meta property="og:site_name" content="React-DS">
+    <meta property="og:type" content="article">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React DS Example</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <header class="page-header">
+      <div class="container">
+        <h1>React DS</h1>
+        <p>Tiny (7KB) <a href="http://facebook.github.io/react/" target="_blank">ReactJS</a> Drag-to-Select component (with no dependencies! with support for touch devices!</p>
+      </div>
+    </header>
+    <div class="page-subheader">
+      <div class="container">
+        <a href="http://github.com/aurbano/react-ds" class="page-subheader__link" target="_blank">Code and Docs on GitHub</a>
+        <span class="page-subheader__button">
+				<a id="github-stars-button" class="github-button" data-style="" href="https://github.com/aurbano/react-ds" data-count-href="/aurbano/react-ds/stargazers" data-count-api="/repos/aurbano/react-ds#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star aurbano/react-ds on GitHub">Star</a>
+			</span>
+      </div>
+    </div>
+    <div class="page-body">
+      <div class="container">
+        <form>
+          <!-- the React application is loaded in the #root element -->
+          <div id="root"></div>
+        </form>
+      </div>
+    </div>
+    <footer class="page-footer">
+      <div class="container">
+        <span>Copyright &copy; <a href="https://aurbano.eu" target="_blank">Alejandro U. Alvarez</a> 2016. MIT Licensed.</span>
+      </div>
+    </footer>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+    <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
+  </body>
+</html>
diff --git a/example/app/public/manifest.json b/example/app/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/example/app/src/Example.js b/example/app/src/Example.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Selection from 'react-ds';
+
+export default class Example extends React.PureComponent {
+
+  constructor() {
+    super();
+
+    this.state = {
+      ref: null,
+      elRefs: [],
+      selectedElements: [], // track the elements that are selected
+    };
+  }
+
+  handleSelection = (indexes) => {
+    this.setState({
+      selectedElements: indexes,
+    });
+  };
+
+  getStyle = (index) => {
+    if (this.state.selectedElements.indexOf(index) > -1) {
+      // Selected state
+      return {
+        background: '#2185d0',
+        borderColor: '#2185d0',
+        color: 'white',
+      };
+    }
+    return {};
+  };
+
+  addElementRef = (ref) => {
+    const elRefs = this.state.elRefs;
+    elRefs.push(ref);
+    this.setState({
+      elRefs,
+    });
+  };
+
+  renderSelection() {
+    if (!this.state.ref || !this.state.elRefs) {
+      return null;
+    }
+    return (
+      <Selection
+        target={ this.state.ref}
+        elements={ this.state.elRefs }
+        offset={ this.state.ref.getBoundingClientRect() }
+        onSelectionChange={ this.handleSelection }
+        style={ this.props.style }
+      />
+    );
+  }
+
+  render() {
+    const selectableElements = [
+      'one',
+      'another',
+      'hey there',
+      'item',
+      'two',
+      'three',
+      'something longer?',
+      'last'
+    ];
+    return (
+      <div ref={ (ref) => { this.setState({ ref }); } } className='item-container'>
+        { selectableElements.map((el, index) => (
+          <div
+            key={ el }
+            ref={ this.addElementRef }
+            style={ this.getStyle(index) }
+            className='item'
+          >
+            { el }
+          </div>
+        )) }
+        { this.renderSelection() }
+      </div>
+    );
+  }
+}
+
+Example.PropTypes = {
+  style: PropTypes.object,
+};
diff --git a/example/app/src/Examples.js b/example/app/src/Examples.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import Example from './Example';
+
+export default class Examples extends React.PureComponent {
+
+  render() {
+    return (
+      <div>
+        <h2>Example</h2>
+
+        <p>The box below is the <code>target</code> for the Selection component. You'll see that you can't initiate selections outside of it.</p>
+
+        <Example />
+
+        <h2 style={ { marginTop: '2em' } }>Custom styles</h2>
+
+        <p>Here's an example using custom styles for the selection box. These are simply passed on the <code>style</code> prop of the <code>Selection</code> component.</p>
+
+        <Example style={ { background: 'rgba(0,0,0,0.3)' } } />
+      </div>
+    );
+  }
+}