Refactor and improve npm scripts, rewrite examples using create-react…

…-app + linklocal
maslianok · Nov 13, 2016 · 0f1e493 · 0f1e493 · dmitry · Nov 14, 2016
commit 0f1e493
Show file tree

Hide file tree

Showing 21 changed files with 986 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,18 @@
+{
+  "presets": [
+    "latest",
+    "react"
+  ],
+  "env": {
+    "commonjs": {
+      "plugins": [
+        [
+          "transform-es2015-modules-commonjs",
+          {
+            "loose": true
+          }
+        ]
+      ]
+    }
+  }
+}
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,4 @@
+**/dist/**
+**/lib/**
+**/node_modules/**
+webpack.config.js
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,17 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+dist
+lib
+
+# misc
+*.log
+.DS_Store
+.env
+npm-debug.log
diff --git a/README.md b/README.md
@@ -0,0 +1,97 @@
+#React responsive tabs
+
+### Your feedback is highly appreciated!
+
+Please, file an issue if something went wrong or let me know via Twitter @maslianok
+
+---
+
+#### Responsive
+* Move tabs to 'Show more' list on medium screen size
+* Transform tabs to accordion on small screen size
+
+![Responsive tabs](https://cloud.githubusercontent.com/assets/3485490/11324577/f6536f2c-913d-11e5-80b0-8755a2ec11cb.gif)
+
+#### Accessible
+The component outputs HTML code that follows accessibility principles (aka [WAI-ARIA](https://en.wikipedia.org/wiki/WAI-ARIA)) and uses ARIA attributes such as `role`, `aria-selected`, `aria-controls`, `aria-labeledby` etc.
+
+![Accessible tabs](https://cloud.githubusercontent.com/assets/3485490/11324576/f4775a4c-913d-11e5-9ec2-f13beb8bd578.gif)
+
+#### Fast
+We are using [`react-resize-detector`](https://github.com/maslianok/react-resize-detector). No timers. Just pure event-based element resize detection.
+
+
+## Installation
+`npm install react-responsive-tabs`
+
+
+## Demo
+
+#### [Live demo](http://maslianok.github.io/react-responsive-tabs/)
+
+Local demo
+```
+git clone https://github.com/maslianok/react-responsive-tabs.git
+cd react-responsive-tabs/example
+npm install && npm start
+```
+
+
+## Example
+
+```javascript
+import React, {Component} from 'react';
+import {render} from 'react-dom';
+import Tabs from 'react-responsive-tabs';
+
+const presidents = [
+  {name: 'George Washington', biography: '...'},
+  {name: 'Theodore Roosevelt', biography: '...'},
+];
+
+function getTabs() {
+  return presidents.map(president => ({
+    key: index, // Optional. Equals to tab index if this property is omitted
+    tabClassName: 'tab', // Optional
+    panelClassName: 'panel', // Optional
+    title: president.name,
+    content: president.biography,
+  }));
+}
+
+const App = () => <Tabs items={getTabs()} />;
+
+render(<App />, document.getElementById('root'));
+```
+
+## API
+
+#### items
+(Array) Tabs data
+
+#### onChange(key)
+(Function) onChange callback
+
+#### selectedTabKey
+(Number|String) Tab with this key will be selected by default.
+
+#### showMore
+(Bool) Show `Show more` list. Default: `true`.
+
+#### transform
+(Bool) Transform to accordion if element width less than `transformWidth`. Default: `true`.
+
+#### transformWidth
+(Number) Transform to accordion if wrapper width less than this value. Default: 800
+
+#### wrapperClass
+(String) Wrapper class
+
+#### tabClass
+(String) Tab class
+
+#### panelClass
+(String) Tab panel class
+
+### License
+MIT
diff --git a/examples/.gitignore b/examples/.gitignore
@@ -0,0 +1,15 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+.env
+npm-debug.log
diff --git a/examples/package.json b/examples/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "examples",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "linklocal": "^2.6.1",
+    "react-scripts": "0.7.0"
+  },
+  "dependencies": {
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-responsive-tabs": "file:../"
+  },
+  "scripts": {
+    "start": "linklocal && react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/examples/public/index.html b/examples/public/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>React responsive tabs</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/src/App.css b/examples/src/App.css
@@ -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); }
+}
diff --git a/examples/src/App.js b/examples/src/App.js
@@ -0,0 +1,49 @@
+/* eslint max-len: 0 */
+import React from 'react';
+import Tabs from 'react-responsive-tabs';
+
+import 'react-responsive-tabs/style.css';
+
+const presidents = [
+  {
+    name: 'George Washington',
+    biography: 'George Washington (February 22, 1732 – December 14, 1799) was the first President of the United States...',
+  },
+  {
+    name: 'Thomas Jefferson',
+    biography: 'Thomas Jefferson (April 13 1743 – July 4, 1826) was an American lawyer',
+  },
+  {
+    name: 'Abraham Lincoln',
+    biography: 'Abraham Lincoln (February 12, 1809 – April 15, 1865) was the 16th President of the United States',
+  },
+  {
+    name: 'Benjamin Harrison',
+    biography: 'Benjamin Harrison (August 20, 1833 – March 13, 1901) was the 23rd President of the United States',
+  },
+  {
+    name: 'William McKinley',
+    biography: 'William McKinley (January 29, 1843 – September 14, 1901) was the 25th President of the United States',
+  },
+  {
+    name: 'Franklin D. Roosevelt',
+    biography: 'Franklin Delano Roosevelt (January 30, 1882 – April 12, 1945), commonly known by his initials FDR, was an American statesman',
+  },
+  {
+    name: 'Theodore Roosevelt',
+    biography: 'Theodore Roosevelt (October 27, 1858 – January 6, 1919), often referred to as Teddy or TR...',
+  },
+];
+
+function getTabs() {
+  return presidents.map(president => ({
+    title: president.name,
+    content: president.biography,
+    tabClassName: 'aaaa',
+    panelClassName: 'bbbb',
+  }));
+}
+
+const App = () => <Tabs items={getTabs()} />;
+
+export default App;
diff --git a/examples/src/App.test.js b/examples/src/App.test.js
@@ -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);
+});
diff --git a/examples/src/index.css b/examples/src/index.css
@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
diff --git a/examples/src/index.js b/examples/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App';
+import './index.css';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);
diff --git a/package.json b/package.json
@@ -0,0 +1,92 @@
+{
+  "author": "Vitalii Maslianok <[email protected]> (https://github.com/maslianok)",
+  "version": "0.6.0",
+  "name": "react-responsive-tabs",
+  "description": "React responsive tabs",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "bugs": {
+    "url": "https://github.com/maslianok/react-responsive-tabs/issues"
+  },
+  "eslintConfig": {
+    "parser": "babel-eslint",
+    "extends": "eslint-config-airbnb",
+    "env": {
+      "browser": true,
+      "mocha": true
+    },
+    "plugins": [
+      "react",
+      "import"
+    ],
+    "rules": {
+      "no-underscore-dangle": 0,
+      "react/jsx-filename-extension": 0,
+      "jsx-a11y/no-static-element-interactions": 0
+    },
+    "settings": {
+      "import/resolve": {
+        "moduleDirectory": [
+          "node_modules"
+        ]
+      }
+    }
+  },
+  "directories": {
+    "example": "example"
+  },
+  "homepage": "https://github.com/maslianok/react-responsive-tabs",
+  "keywords": [
+    "react",
+    "responsive",
+    "tabs",
+    "tab"
+  ],
+  "maintainers": [
+    "maslianok <[email protected]>"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maslianok/react-responsive-tabs.git"
+  },
+  "peerDependencies": {
+    "react": "^0.14.7 || ^15.1.0"
+  },
+  "dependencies": {
+    "classnames": "^2.2.3",
+    "react": "^15.3.2",
+    "react-resize-detector": "^0.3.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.18.0",
+    "babel-eslint": "^6.0.2",
+    "babel-jest": "^17.0.0",
+    "babel-loader": "^6.2.7",
+    "babel-preset-latest": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "cross-env": "^3.1.3",
+    "eslint": "^3.9.1",
+    "eslint-config-airbnb": "^12.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^2.2.2",
+    "eslint-plugin-react": "^6.6.0",
+    "jest": "^17.0.0",
+    "react-scripts": "0.7.0",
+    "rimraf": "^2.5.4",
+    "webpack": "^1.13.3"
+  },
+  "scripts": {
+    "clean": "rimraf lib dist es coverage",
+    "lint": "npm run lint:src && npm run lint:examples",
+    "lint:src": "eslint src test build",
+    "lint:examples": "eslint examples",
+    "test": "CI=true react-scripts test --env=jsdom",
+    "test:cov": "react-scripts test --env=jsdom --coverage",
+    "check:src": "npm run lint:src && npm run test",
+    "build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
+    "build:umd": "cross-env BABEL_ENV=commonjs NODE_ENV=development webpack src/index.js dist/tabs.js",
+    "build:umd:min": "cross-env BABEL_ENV=commonjs NODE_ENV=production webpack src/index.js dist/tabs.min.js",
+    "build": "npm run build:commonjs && npm run build:umd && npm run build:umd:min",
+    "prepublish": "npm run clean && npm run check:src && npm run build"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico