example and readme

2025-10-16 11:55:36 +00:00 · 2016-10-20 17:43:27 -06:00 · 2016-10-20 17:43:27 -06:00 · f13c9c3546
commit f13c9c3546
parent 50ea3a9dd0
17 changed files with 551 additions and 6 deletions
--- a/README.md
+++ b/README.md
@ -1,7 +1,7 @@
 # react-table
 A fast, lightweight, opinionated table and datagrid built on React

-[![Chart.js on Slack](https://img.shields.io/badge/slack-Chart.js-blue.svg)](https://react-table-slack.herokuapp.com/)
+[![react-table on Slack](https://img.shields.io/badge/slack-reactTable-blue.svg)](https://react-table-slack.herokuapp.com/)

 ## Features

--- a/example/README.md
+++ b/example/README.md
@ -0,0 +1 @@
+# Jumpsuit Getting Started
--- a/example/dist/app.css
+++ b/example/dist/app.css
@ -0,0 +1,262 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,600");
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+body {
+  line-height: 1;
+  color: #000;
+  background: #fff;
+}
+ol,
+ul {
+  list-style: none;
+}
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  vertical-align: middle;
+}
+caption,
+th,
+td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+a img {
+  border: none;
+}
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+html {
+  min-height: 100vh;
+}
+body {
+  background: #003952;
+  background: -webkit-radial-gradient(ellipse at center, #005275 0%, #003952 100%);
+  background: -moz-radial-gradient(ellipse at center, #005275 0%, #003952 100%);
+  background: -o-radial-gradient(ellipse at center, #005275 0%, #003952 100%);
+  background: -ms-radial-gradient(ellipse at center, #005275 0%, #003952 100%);
+  background: radial-gradient(ellipse at center, #005275 0%, #003952 100%);
+  color: #fff;
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 300;
+}
+.container {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: box;
+  display: flex;
+  -webkit-box-pack: justify;
+  -moz-box-pack: justify;
+  -o-box-pack: justify;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+.container section {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: box;
+  display: flex;
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -o-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  -o-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -o-box-orient: vertical;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 50%;
+  height: 100vh;
+  text-align: center;
+  position: relative;
+}
+.container section:first-child:after {
+  content: '';
+  background: #003952;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -o-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  width: 1px;
+  height: 90%;
+}
+.logo {
+  width: 150px;
+  margin: 0 auto 30px;
+}
+.logo img {
+  width: 100%;
+}
+.title {
+  font-size: 40px;
+  font-weight: 300;
+  margin-bottom: 10px;
+}
+.subtitle {
+  font-size: 16px;
+  opacity: 0.6;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+  filter: alpha(opacity=60);
+  letter-spacing: 1px;
+}
+.github {
+  width: 100%;
+  max-width: 480px;
+  padding: 0 30px;
+  margin-top: 50px;
+}
+.inpt {
+  border: none;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 12px 20px;
+  width: 300px;
+  text-align: center;
+  border-radius: 4px;
+  outline: none;
+  width: 100%;
+}
+.usr {
+  background: #f5f5f5;
+  color: #003952;
+  -webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.4);
+  box-shadow: 0 2px 7px rgba(0,0,0,0.4);
+  text-align: left;
+  border: 1px solid #0082bb;
+  border-radius: 4px;
+  padding: 10px;
+  margin-top: 20px;
+  width: 100%;
+}
+.usr-avatar {
+  display: inline-block;
+  float: left;
+  margin-right: 10px;
+}
+.usr-avatar img {
+  width: 100px;
+}
+.usr-info {
+  font-size: 14px;
+  width: 280px;
+}
+.usr-info td {
+  padding: 3px 5px;
+  vertical-align: top;
+}
+.usr-info td:first-child {
+  width: 100px;
+  font-weight: 600;
+}
+.usr-none {
+  text-align: center;
+  color: #bfbfbf;
+}
+@media (max-width: 720px) {
+  .container {
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+    -o-box-orient: vertical;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-pack: center;
+    -moz-box-pack: center;
+    -o-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+  }
+  .container section {
+    width: 100%;
+  }
+}
--- a/example/dist/app.js
+++ b/example/dist/app.js
--- a/example/dist/index.html
+++ b/example/dist/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Welcome to Jumpsuit</title>
+  <link rel="stylesheet" href="/app.css" charset="utf-8">
+</head>
+<body>
+  <div id="app"></div>
+  <script src="/app.js"></script>
+</body>
+</html>
--- a/example/jumpsuit.config.js
+++ b/example/jumpsuit.config.js
@ -0,0 +1,28 @@
+var fs = require('fs')
+var path = require('path')
+var stylus = require('stylus')
+var nib = require('nib')
+
+var stylusEntry = path.resolve('src/app.styl')
+
+module.exports = {
+  styles: {
+    extensions: ['.css', '.styl'],
+    action: buildStyles
+  }
+}
+
+function buildStyles () {
+  return new Promise(function (resolve, reject) {
+    stylus.render(fs.readFileSync(stylusEntry, 'utf8'), {
+      'include css': true,
+      'hoist atrules': true,
+      compress: process.env.NODE_ENV === 'production',
+      paths: [path.resolve('src')],
+      use: nib()
+    }, function (err, css) {
+      if (err) reject(err)
+      else resolve(css)
+    })
+  })
+}
--- a/example/package.json
+++ b/example/package.json
@ -0,0 +1,24 @@
+{
+  "name": "react-table-example",
+  "version": "1.0.0",
+  "description": "Jumpsuit getting started example",
+  "license": "MIT",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jumpsuit/jumpsuit.git"
+  },
+  "scripts": {
+    "watch": "jumpsuit watch",
+    "build": "jumpsuit build"
+  },
+  "devDependencies": {
+    "nib": "^1.1.0",
+    "stylus": "^0.54.5"
+  },
+  "dependencies": {
+    "axios": "^0.13.1",
+    "jumpsuit": "^0.7.5",
+    "lodash": "^4.14.1"
+  }
+}
--- a/example/src/app.js
+++ b/example/src/app.js
@ -0,0 +1,4 @@
+import { Render } from 'jumpsuit'
+import App from 'screens/index'
+
+Render(App)
--- a/example/src/app.styl
+++ b/example/src/app.styl
@ -0,0 +1,133 @@
+// -----------------------------------------------------------------------------
+// styles
+// -----------------------------------------------------------------------------
+
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,600')
+@import 'nib'
+
+global-reset()
+
+// -----------------------------------------------------------------------------
+// variables
+// -----------------------------------------------------------------------------
+
+$fnt-open-sans = 'Open Sans', sans-serif
+$clr-white = #FFFFFF
+$clr-off-white = #F5F5F5
+$clr-gray = #bfbfbf
+$clr-jumpsuit1 = #003952
+$clr-jumpsuit2 = #005275
+$clr-jumpsuit3 = #0082bb
+
+// -----------------------------------------------------------------------------
+// styles
+// -----------------------------------------------------------------------------
+
+*
+  box-sizing border-box
+
+html
+  min-height 100vh
+
+body
+  background $clr-jumpsuit1
+  background radial-gradient(ellipse at center, $clr-jumpsuit2 0%, $clr-jumpsuit1 100%)
+  color $clr-white
+  font-family $fnt-open-sans
+  font-weight 300
+
+.container
+  display flex
+  justify-content space-between
+  padding 0 10px
+  section
+    display flex
+    align-items center
+    justify-content center
+    flex-direction column
+    width 50%
+    height 100vh
+    text-align center
+    position relative
+    &:first-child:after
+      content ''
+      background $clr-jumpsuit1
+      position absolute
+      right 0
+      top: 50%
+      transform: translateY(-50%)
+      width 1px
+      height 90%
+
+.logo
+  width 150px
+  margin 0 auto 30px
+  img
+    width 100%
+
+.title
+  font-size 40px
+  font-weight 300
+  margin-bottom 10px
+
+.subtitle
+  font-size 16px
+  opacity .6
+  letter-spacing 1px
+
+.github
+  width 100%
+  max-width 480px
+  padding 0 30px
+  margin-top 50px
+
+.inpt
+  border none
+  font-family $fnt-open-sans
+  font-size 14px
+  font-weight 600
+  padding 12px 20px
+  width 300px
+  text-align center
+  border-radius 4px
+  outline none
+  width 100%
+
+.usr
+  background $clr-off-white
+  color $clr-jumpsuit1
+  box-shadow 0 2px 7px rgba(0, 0, 0, .4)
+  text-align left
+  border 1px solid $clr-jumpsuit3
+  border-radius 4px
+  padding 10px
+  margin-top 20px
+  width 100%
+
+.usr-avatar
+  display inline-block
+  float left
+  margin-right 10px
+  img
+    width 100px
+
+.usr-info
+  font-size 14px
+  width 280px
+  td
+    padding 3px 5px
+    vertical-align top
+    &:first-child
+      width 100px
+      font-weight 600
+
+.usr-none
+  text-align center
+  color $clr-gray
+
+@media (max-width: 720px)
+  .container
+    flex-direction column
+    justify-content center
+    section
+      width 100%
--- a/example/src/assets/index.html
+++ b/example/src/assets/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Welcome to Jumpsuit</title>
+  <link rel="stylesheet" href="/app.css" charset="utf-8">
+</head>
+<body>
+  <div id="app"></div>
+  <script src="/app.js"></script>
+</body>
+</html>
--- a/example/src/screens/index.js
+++ b/example/src/screens/index.js
@ -0,0 +1,16 @@
+import { Component } from 'jumpsuit'
+
+import ReactTable from 'react-table'
+
+export default Component({
+  render () {
+    return (
+      <div className='container'>
+        <ReactTable
+          data={[]}
+          columns={[]}
+        />
+      </div>
+    )
+  }
+})
--- a/example/src/state/github.js
+++ b/example/src/state/github.js
@ -0,0 +1,39 @@
+import { State } from 'jumpsuit'
+import _ from 'lodash'
+import axios from 'axios'
+
+const githubState = State('counter', {
+  initial: {
+    search: null,
+    loading: false,
+    user: {}
+  },
+
+  updateSearch: (state, payload) => ({
+    search: payload,
+    loading: true
+  }),
+
+  receiveUser: (state, payload) => ({
+    user: payload,
+    loading: false
+  })
+})
+
+export default githubState
+
+const getUserDebounced = _.debounce((username) => {
+  axios.get(`https://api.github.com/users/${username}`)
+    .then(({ data }) => {
+      githubState.receiveUser(data)
+    })
+    .catch((err) => {
+      githubState.receiveUser({})
+      console.error(err)
+    })
+}, 1000)
+
+export function getUser (username) {
+  githubState.updateSearch(username)
+  if (username) getUserDebounced(username)
+}
--- a/example/src/state/index.js
+++ b/example/src/state/index.js
@ -0,0 +1,3 @@
+import github from './github'
+
+export default { github }
--- a/package.json
+++ b/package.json
@ -1,5 +1,5 @@
 {
-  "name": "react-table-temp",
+  "name": "react-table",
  "version": "0.0.1",
  "description": "A fast, lightweight, opinionated table and datagrid built on React",
  "license": "MIT",
@ -11,12 +11,13 @@
  "keywords": [
    "react",
    "table",
+    "react-table",
    "datagrid"
  ],
-  "main": "src/index.js",
+  "main": "react-table.js",
  "scripts": {
-    "build:js": "rm -rf react-table.js && browserify src/index.js --external react -s react-table -t babelify -tg uglifyify -o react-table.js",
-    "build:css": "rm -rf react-table.css && stylus src/index.styl -o react-table.css --use ./node_modules/nib/lib/nib.js --compress",
+    "build:js": "rm -rf react-table.js && browserify src/index.js -s reactTable -u react -t babelify -g uglifyify -o react-table.js",
+    "build:css": "rm -rf react-table.css && stylus src/index.styl --use ./node_modules/nib/lib/nib.js --compress -o react-table.css",
    "watch": "onchange 'src/**' -i -- npm-run-all build:*",
    "prepublish": "npm-run-all build:*"
  },
--- a/react-table.js
+++ b/react-table.js
--- a/src/index.js
+++ b/src/index.js
@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 //
-import _ from './utils'
+import _ from './lodash'

 const defaultButton = (props) => (
  <button {...props} className='-btn'>{props.children}</button>
--- a/src/lodash.js
+++ b/src/lodash.js