Home Explore Help
Sign In
nico
/
common-ui-components
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Initial commit

Snow 8 years ago
parent
263697aa06
commit
24b6e2c095
20 changed files with 2234 additions and 0 deletions
Split View Show Diff Stats
  1. 25 0
      .gitignore
  2. 1901 0
      README.md
  3. 20 0
      package.json
  4. BIN
      public/favicon.ico
  5. 40 0
      public/index.html
  6. 15 0
      public/manifest.json
  7. 21 0
      src/App.js
  8. 8 0
      src/App.test.js
  9. 24 0
      src/components/App/App.css
  10. 17 0
      src/components/App/index.js
  11. 7 0
      src/components/App/logo.svg
  12. 11 0
      src/components/Home/index.js
  13. 9 0
      src/components/Nav/NavLink.js
  14. 16 0
      src/components/Nav/index.js
  15. 15 0
      src/components/NotFound/index.js
  16. 9 0
      src/components/Tabs/index.js
  17. 5 0
      src/index.css
  18. 11 0
      src/index.js
  19. 51 0
      src/registerServiceWorker.js
  20. 29 0
      src/routes.js

+ 25 - 0
.gitignore
View File 

@@ -0,0 +1,25 @@
 
+# 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*
 
+
 
+# sublime project staff
 
+ui.sublime-project
 
+ui.sublime-workspace

File diff suppressed because it is too large
+ 1901 - 0
README.md


+ 20 - 0
package.json
View File 

@@ -0,0 +1,20 @@
 
+{
 
+  "name": "common-ui-components",
 
+  "version": "0.1.0",
 
+  "private": true,
 
+  "dependencies": {
 
+    "react": "^15.6.1",
 
+    "react-dom": "^15.6.1",
 
+    "react-router": "^4.1.1",
 
+    "react-motion": "^0.5.0"
 
+  },
 
+  "devDependencies": {
 
+    "react-scripts": "1.0.7"
 
+  },
 
+  "scripts": {
 
+    "start": "react-scripts start",
 
+    "build": "react-scripts build",
 
+    "test": "react-scripts test --env=jsdom",
 
+    "eject": "react-scripts eject"
 
+  }
 
+}

BIN
public/favicon.ico
View File


+ 40 - 0
public/index.html
View File 

@@ -0,0 +1,40 @@
 
+<!doctype html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="utf-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
+    <meta name="theme-color" content="#000000">
 
+    <!--
 
+      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 App</title>
 
+  </head>
 
+  <body>
 
+    <noscript>
 
+      You need to enable JavaScript to run this app.
 
+    </noscript>
 
+    <div id="root"></div>
 
+    <!--
 
+      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`.
 
+    -->
 
+  </body>
 
+</html>

+ 15 - 0
public/manifest.json
View File 

@@ -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"
 
+}

+ 21 - 0
src/App.js
View File 

@@ -0,0 +1,21 @@
 
+import React, { Component } from 'react';
 
+import logo from './logo.svg';
 
+import './App.css';
 
+
 
+class App extends Component {
 
+  render() {
 
+    return (
 
+      <div className="App">
 
+        <div className="App-header">
 
+          <img src={logo} className="App-logo" alt="logo" />
 
+          <h2>Welcome to React</h2>
 
+        </div>
 
+        <p className="App-intro">
 
+          To get started, edit <code>src/App.js</code> and save to reload.
 
+        </p>
 
+      </div>
 
+    );
 
+  }
 
+}
 
+
 
+export default App;

+ 8 - 0
src/App.test.js
View File 

@@ -0,0 +1,8 @@
 
+import React from 'react';
 
+import ReactDOM from 'react-dom';
 
+import App from './App';
 
+
 
+it('renders without crashing', () => {
 
+  const div = document.createElement('div');
 
+  ReactDOM.render(<App />, div);
 
+});

+ 24 - 0
src/components/App/App.css
View File 

@@ -0,0 +1,24 @@
 
+.App {
 
+  text-align: center;
 
+}
 
+
 
+.App-logo {
 
+  animation: App-logo-spin infinite 20s linear;
 
+  height: 80px;
 
+}
 
+
 
+.App-header {
 
+  background-color: #222;
 
+  height: 150px;
 
+  padding: 20px;
 
+  color: white;
 
+}
 
+
 
+.App-intro {
 
+  font-size: large;
 
+}
 
+
 
+@keyframes App-logo-spin {
 
+  from { transform: rotate(0deg); }
 
+  to { transform: rotate(360deg); }
 
+}

+ 17 - 0
src/components/App/index.js
View File 

@@ -0,0 +1,17 @@
 
+import React, { Component } from 'react';
 
+import logo from './logo.svg';
 
+import './App.css';
 
+
 
+export default class App extends Component {
 
+  render() {
 
+    return (
 
+      <div className="App">
 
+        <div className="App-header">
 
+          <img src={logo} className="App-logo" alt="logo" />
 
+        </div>
 
+      </div>
 
+
 
+    );
 
+  }
 
+}
 
+

File diff suppressed because it is too large
+ 7 - 0
src/components/App/logo.svg


+ 11 - 0
src/components/Home/index.js
View File 

@@ -0,0 +1,11 @@
 
+import React, { Component } from 'react';
 
+
 
+export default class Home extends Component {
 
+  render() {
 
+    return (
 
+      <div>
 
+        <h1>This is a collection of React powered common UI components</h1>
 
+      </div>
 
+    );
 
+  }
 
+}

+ 9 - 0
src/components/Nav/NavLink.js
View File 

@@ -0,0 +1,9 @@
 
+// modules/NavLink.js
 
+import React from 'react'
 
+import { NavLink } from 'react-router-dom'
 
+
 
+export default React.createClass({
 
+  render() {
 
+    return <NavLink {...this.props} activeStyle={{color: 'red'}} />
 
+  }
 
+})

+ 16 - 0
src/components/Nav/index.js
View File 

@@ -0,0 +1,16 @@
 
+import React from 'react';
 
+import NavLink from './NavLink';
 
+
 
+class Nav extends React.Component {
 
+  	render() {
 
+  		return (
 
+		<ul>
 
+		<li><NavLink to="/" exact={true}>Home</NavLink></li>
 
+		<li><NavLink to="/tabs" >Tab View</NavLink></li>
 
+		<li><NavLink to="/tabss" >Test 404</NavLink></li>
 
+		</ul>
 
+  		)
 
+	}
 
+}
 
+
 
+export default Nav;

+ 15 - 0
src/components/NotFound/index.js
View File 

@@ -0,0 +1,15 @@
 
+
 
+// src/components/NotFound/index.js
 
+import React, { Component } from 'react';
 
+
 
+export default class NotFound extends Component {
 
+  render() {
 
+    return (
 
+      <div>
 
+        <h1>
 
+          404 <small>Not Found :(</small>
 
+        </h1>
 
+      </div>
 
+    );
 
+  }
 
+}

+ 9 - 0
src/components/Tabs/index.js
View File 

@@ -0,0 +1,9 @@
 
+import React from 'react';
 
+
 
+function Tabs(props) {
 
+	return (
 
+		<h2>Test</h2>
 
+	)
 
+}
 
+
 
+export default Tabs

+ 5 - 0
src/index.css
View File 

@@ -0,0 +1,5 @@
 
+body {
 
+  margin: 0;
 
+  padding: 0;
 
+  font-family: sans-serif;
 
+}

+ 11 - 0
src/index.js
View File 

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

+ 51 - 0
src/registerServiceWorker.js
View File 

@@ -0,0 +1,51 @@
 
+// In production, we register a service worker to serve assets from local cache.
 
+
 
+// This lets the app load faster on subsequent visits in production, and gives
 
+// it offline capabilities. However, it also means that developers (and users)
 
+// will only see deployed updates on the "N+1" visit to a page, since previously
 
+// cached resources are updated in the background.
 
+
 
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
 
+// This link also includes instructions on opting out of this behavior.
 
+
 
+export default function register() {
 
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 
+    window.addEventListener('load', () => {
 
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
+      navigator.serviceWorker
 
+        .register(swUrl)
 
+        .then(registration => {
 
+          registration.onupdatefound = () => {
 
+            const installingWorker = registration.installing;
 
+            installingWorker.onstatechange = () => {
 
+              if (installingWorker.state === 'installed') {
 
+                if (navigator.serviceWorker.controller) {
 
+                  // At this point, the old content will have been purged and
 
+                  // the fresh content will have been added to the cache.
 
+                  // It's the perfect time to display a "New content is
 
+                  // available; please refresh." message in your web app.
 
+                  console.log('New content is available; please refresh.');
 
+                } else {
 
+                  // At this point, everything has been precached.
 
+                  // It's the perfect time to display a
 
+                  // "Content is cached for offline use." message.
 
+                  console.log('Content is cached for offline use.');
 
+                }
 
+              }
 
+            };
 
+          };
 
+        })
 
+        .catch(error => {
 
+          console.error('Error during service worker registration:', error);
 
+        });
 
+    });
 
+  }
 
+}
 
+
 
+export function unregister() {
 
+  if ('serviceWorker' in navigator) {
 
+    navigator.serviceWorker.ready.then(registration => {
 
+      registration.unregister();
 
+    });
 
+  }
 
+}

+ 29 - 0
src/routes.js
View File 

@@ -0,0 +1,29 @@
 
+// src/routes.js
 
+import React from 'react';
 
+import {
 
+  BrowserRouter as Router,
 
+  Route,
 
+  Switch
 
+} from 'react-router-dom'
 
+
 
+import App from './components/App';
 
+import Nav from './components/Nav';
 
+import Home from './components/Home';
 
+import Tabs from './components/Tabs';
 
+import NotFound from './components/NotFound';
 
+
 
+const Routes = (props) => (
 
+  <Router {...props}>
 
+  	<div>
 
+  	<App />
 
+    <Nav />
 
+  	<Switch>
 
+  	<Route path="/" exact component={Home} />
 
+    <Route path="/tabs" component={Tabs} />
 
+    <Route component={NotFound} />
 
+    </Switch>
 
+    </div>
 
+  </Router>
 
+);
 
+
 
+export default Routes;