make it colorful

Author: tiye

.npmignore

@@ -0,0 +1,9 @@
+
+/build/
+/data/
+/images/
+/src/
+/webpack.*
+/gulpfile.*
+/index.html
+/template.*

README.md

@@ -1,27 +1,37 @@
+
+React Lite JSON Viewer
 ----
-### Usage
 
-### Develop
+Demo http://ui.talk.ai/react-lite-json-viewer/
 
-```text
-npm i
-```
+Component for exploring Store in JSON.
 
-You need a static file server for the HTML files. Personally I suggest using Nginx.
-
-Develop:
+### Usage
 
 ```bash
-gulp html # regenerate index.html
-webpack-dev-server --hot # enable live-reloading
+npm i --save react-lite-json-viewer
 ```
 
-Build (Pack and optimize js, reivision js and add entry in `index.html`):
+```coffee
+LiteJSONViewer = require 'react-lite-json-viewer'
 
-```bash
-gulp build
+LiteJSONViewer
+  height: 500
+  data: Immutable.fromJS(jianliaoData)
+  path: @state.path # Immutable.List()
+  onChange: @onPathChange
 ```
 
+Read more in `src/`.
+
+### Develop
+
+https://github.com/teambition/coffee-webpack-starter
+
+### Background
+
+http://fotonin.com/data_images/out/15/892020-space-wallpaper-hd.jpg
+
 ### License
 
 MIT

gulpfile.coffee

@@ -11,7 +11,7 @@ gulp.task 'script', ->
   coffee = require('gulp-coffee')
   gulp
   .src('src/**/*.coffee')
-  .pipe coffee()
+  .pipe coffee(bare: true)
   .pipe gulp.dest('lib/')
 
 gulp.task 'rsync', (cb) ->
@@ -21,7 +21,7 @@ gulp.task 'rsync', (cb) ->
     src: ['index.html', 'build', 'src']
     recursive: true
     args: ['--verbose']
-    dest: 'talk-ui:/teambition/server/talk-ui/json-viewer'
+    dest: 'talk-ui:/teambition/server/talk-ui/react-lite-json-viewer'
     deleteAll: true
   , (error, stdout, stderr, cmd) ->
     if error?

images/space.jpg

@@ -1,12 +1,13 @@
 {
-  "name": "coffee-webpack-starter",
+  "name": "react-lite-json-viewer",
   "version": "0.0.1",
-  "description": "Component starter kit for Talk by Teambition",
-  "main": "lib/index.js",
+  "description": "Component for exploring store in JSON",
+  "main": "lib/json-viewer.js",
   "dependencies": {
-    "classnames": "^1.2.0",
+    "hsl": "^0.1.1",
     "immutable": "^3.7.5",
-    "react": "^0.13.1"
+    "object-assign": "^4.0.1",
+    "react": ">=0.13.1"
   },
   "devDependencies": {
     "autoprefixer-loader": "^2.0.0",
@@ -21,13 +22,13 @@
     "json-loader": "^0.5.3",
     "less": "^2.5.1",
     "less-loader": "^2.2.0",
+    "react-dom": "^0.14.0",
     "react-hot-loader": "^1.3.0",
     "rsyncwrapper": "^0.4.3",
     "run-sequence": "^1.0.2",
     "stir-template": "^0.1.4",
     "style-loader": "^0.10.2",
     "url-loader": "^0.5.6",
-    "volubile-ui": "0.0.10",
     "webpack": "^1.8.4",
     "webpack-dev-server": "^1.8.0"
   },
@@ -41,10 +42,10 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/teambition/coffee-webpack-starter.git"
+    "url": "https://github.com/teambition/react-lite-json-viewer.git"
   },
   "bugs": {
-    "url": "https://github.com/teambition/coffee-webpack-starter/issues"
+    "url": "https://github.com/teambition/react-lite-json-viewer/issues"
   },
-  "homepage": "https://github.com/teambition/coffee-webpack-starter"
+  "homepage": "https://github.com/teambition/react-lite-json-viewer"
 }

package.json

@@ -0,0 +1,86 @@
+
+hsl = require 'hsl'
+React = require 'react'
+assign = require 'object-assign'
+Immutable = require 'immutable'
+
+reset = require '../util/reset'
+
+{div, span} = React.DOM
+
+stringify = JSON.stringify
+
+module.exports = React.createClass
+  displayName: 'view-value'
+
+  propTypes:
+    value: React.PropTypes.any
+
+  renderString: ->
+    span style: @styleString(), stringify(@props.value)
+
+  renderNumber: ->
+    span style: @styleNumber(), @props.value
+
+  renderBoolean: ->
+    span style: @styleBoolean(), stringify(@props.value)
+
+  renderUndefined: ->
+    span style: @styleUndefined(), 'undefined'
+
+  renderNull: ->
+    span style: @styleNull(), 'null'
+
+  renderMap: ->
+    span style: @styleMap(), "Map #{@props.value.size}"
+
+  renderList: ->
+    span style: @styleList(), "List #{@props.value.size}"
+
+  render: ->
+    value = @props.value
+    type = typeof value
+
+    switch
+      when type is 'string' then @renderString()
+      when type is 'number' then @renderNumber()
+      when type is 'boolean' then @renderBoolean()
+      when value is undefined then @renderUndefined()
+      when value is null then @renderNull()
+      when Immutable.Map.isMap value then @renderMap()
+      when Immutable.List.isList value then @renderList()
+      else @renderUnknown()
+
+  styleBase: (more) ->
+    baseStyle =
+      lineHeight: '24px'
+      height: '24px'
+      fontSize: '12px'
+      padding: '0 10px'
+      fontFamily: reset.codeFonts
+      maxWidth: 300
+      overflowX: 'auto'
+      whiteSpace: 'nowrap'
+      color: hsl 0, 0, 90
+    assign more, baseStyle
+
+  styleString: ->
+    @styleBase backgroundColor: hsl 0, 0, 20, 0.5
+
+  styleNumber: ->
+    @styleBase backgroundColor: hsl 240, 30, 40, 0.5
+
+  styleBoolean: ->
+    @styleBase backgroundColor: hsl 240, 50, 30, 0.5
+
+  styleNull: ->
+    @styleBase backgroundColor: hsl 240, 90, 40, 0.5
+
+  styleUndefined: ->
+    @styleBase backgroundColor: hsl 240, 90, 40, 0.5
+
+  styleMap: ->
+    @styleBase backgroundColor: hsl 200, 70, 60, 0.5
+
+  styleList: ->
+    @styleBase backgroundColor: hsl 40, 70, 70, 0.5

src/app/value.coffee

@@ -1,42 +1,38 @@
+
+hsl = require 'hsl'
 React = require 'react'
 Immutable = require 'immutable'
+
+reset = require './util/reset'
 isSafari = require './util/is-safari'
 
-{div, span, pre} = React.DOM
+Value = React.createFactory require './app/value'
 
-typeColor =
-  list: 'rgba(245, 222, 179, .8)'
-  map: 'rgba(223, 245, 179, .8)'
+{div} = React.DOM
 
 T = React.PropTypes
 
 module.exports = React.createClass
-  displayName: 'json-viewer'
+  displayName: 'lite-json-viewer'
 
   propTypes:
-    data: T.any
-    height: T.number
-    path: T.instanceOf(Immutable.List)
-    onChange: T.func
+    data: T.instanceOf(Immutable.Collection).isRequired
+    height: T.number.isRequired
+    path: T.instanceOf(Immutable.List).isRequired
+    onChange: T.func.isRequired
 
-  filterType: (value) ->
-    if value instanceof Immutable.Map
-      'map'
-    else if value instanceof Immutable.List
-      'list'
-    else
-      JSON.stringify value
-
-  renderKeys: (stage) ->
+  renderEntries: (stage, index) ->
     value = @props.data.getIn(stage)
     if value instanceof Immutable.Collection
-      div style: @styleBlock(),
+      div style: @styleBlock(), key: index,
         value.keySeq().sort().map (entry, index) =>
           onClick = => @props.onChange stage.concat(entry)
           isActive = @props.path.get(stage.size) is entry
-          div key: index, style: @styleEntries(isActive), onClick: onClick,
-            span style: @styleKey(), entry
-            span style: @styleValue(stage.concat(entry)), @filterType value.get(entry)
+          div key: index, style: @styleEntry(isActive), onClick: onClick,
+            Value value: entry
+            Value value: value.get(entry)
+    else
+      Value value: value
 
   render: ->
     div style: @styleRoot(),
@@ -46,11 +42,11 @@ module.exports = React.createClass
           @props.path[..index]
         .unshift Immutable.List()
         div style: @styleTable(),
-          pathList.map (path) =>
-            @renderKeys path
+          pathList.map (path, index) =>
+            @renderEntries path, index
       else
-        pre style: @styleBlock(),
-          if @props.data? then @props.data else 'null'
+        div style: @styleBlock(),
+          Value value: @props.data
 
   styleRoot: ->
     flex: 1
@@ -64,40 +60,23 @@ module.exports = React.createClass
     WebkitFlex: 1
     height: @props.height
 
-  styleEntries: (isActive) ->
+  styleEntry: (isActive) ->
     display: if isSafari then '-webkit-flex' else 'flex'
     flexDirection: 'row'
     WebkitFlexDirection: 'row'
+    alignItems: 'center'
+    WebkitAlignItems: 'center'
     width: 'auto'
-    overflowY: 'auto'
-    overflowX: 'visible'
-    padding: '10px'
-    color: if isActive then '#D45502' else '#FFF'
+    padding: '4px 0px'
+    backgroundColor: if isActive then hsl(80,80,90,0.1)
+    color: 'white'
     cursor: 'pointer'
 
-  styleKey: ->
-    flex: 1
-    WebkitFlex: 1
-    padding: '0 10px'
-    lineHeight: '24px'
-    fontSize: '12px'
-    display: 'inline-block'
-    marginRight: '10px'
-    marginBottom: '6px'
-
-  styleValue: (path) ->
-    flex: '0 0 auto'
-    WebkitFlex: '0 0 auto'
-    margin: 0
-    overflowY: 'auto'
-    fontSize: '12px'
-    padding: '0 10px'
-    fontFamily: 'Menlo, Consolas, Ubuntu Mono, monospace'
-    backgroundColor: typeColor[@filterType(@props.data.getIn(path))]
-
   styleBlock: ->
-    fontFamily: 'Menlo, Consolas, Ubuntu Mono, monospace'
+    fontFamily: reset.codeFonts
     overflowY: 'scroll'
-    backgroundColor: 'rgba(245, 245, 245, 0.2)'
-    minWidth: 200
+    backgroundColor: hsl 0, 0, 100, 0.1
+    minWidth: 100
     marginRight: 10
+    paddingTop: 100
+    paddingBottom: 200

src/json-viewer.coffee

@@ -1,8 +1,7 @@
 
 React = require 'react'
-
-require('volubile-ui/ui/index.less')
+ReactDOM = require 'react-dom'
 
 Page = React.createFactory require './page'
 
-React.render Page(), document.querySelector('.demo')
+ReactDOM.render Page(), document.querySelector('.demo')

src/main.coffee

@@ -1,6 +1,7 @@
 
 body {
   padding: 100px;
+  background-image: url('../images/space.jpg');
 }
 
 .demo {

src/main.css

@@ -1,11 +1,15 @@
 
+hsl = require 'hsl'
 React = require 'react'
 Immutable = require 'immutable'
 
+reset = require './util/reset'
 jianliao = require '../data/jianliao.json'
 
 JsonViewer = React.createFactory require './json-viewer'
-div = React.createFactory 'div'
+{div, span, a} = React.DOM
+
+link = 'https://github.com/teambition/react-lite-json-viewer'
 
 module.exports = React.createClass
   displayName: 'app-page'
@@ -18,8 +22,20 @@ module.exports = React.createClass
 
   render: ->
     div className: 'app-page',
+      div style: @styleNote(),
+        span null, 'JSON view in React, try clicks! Found more on '
+        a style: @styleLink(), href: link, 'GitHub'
       JsonViewer
         height: 500
         data: Immutable.fromJS(jianliao)
         path: @state.path
         onChange: @onPathChange
+
+  styleNote: ->
+    color: 'white'
+    fontFamily: reset.contentFonts
+    marginBottom: 40
+    fontSize: '14px'
+
+  styleLink: ->
+    color: hsl 240, 80, 80