├── demo ├── fixtures │ ├── user.json │ └── questions.json ├── src │ ├── actions │ │ └── actions.js │ ├── styles │ │ └── styles.js │ ├── reducers │ │ └── reducers.js │ ├── components │ │ ├── Keywords.js │ │ ├── Answer.js │ │ ├── QuestionList.js │ │ ├── App.js │ │ ├── Question.js │ │ ├── Byline.js │ │ ├── SubmitAnswer.js │ │ ├── SubmitQuestion.js │ │ └── QuestionDetail.js │ └── index.js ├── dist │ └── demo.html └── package.json ├── .babelrc ├── .npmignore ├── scripts └── make-package-json.js ├── webpack.config-test.js ├── src ├── store │ ├── actions.js │ ├── reducers.js │ └── lifecycleConfig.js ├── components │ ├── Utf8Char.js │ ├── PopoutWindow.js │ ├── DataIconCell.js │ ├── Controls.js │ ├── Button.js │ ├── LifeCycle.js │ ├── Console.js │ ├── ComponentList.js │ └── Method.js ├── styles │ └── styles.js ├── root.js ├── settingsManager.js ├── vendor │ ├── react-bootstrap-table-all.min.css │ └── bootstrapTableStyles.js └── index.js ├── CHANGELOG.md ├── package.json ├── gulpfile.js ├── test ├── MonitorSpec.js ├── ConfigureSpec.js └── fixtures │ └── entries.json └── README.md /demo/fixtures/user.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "me" 3 | } -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "stage-0", 5 | "react" 6 | ], 7 | "plugins": [ 8 | "add-module-exports" 9 | ] 10 | } -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .gitignore 3 | .idea/ 4 | *.tgz 5 | .babelrc 6 | build.sh 7 | gulpfile.js 8 | npm-debug.log 9 | node_modules/ 10 | demo 11 | src 12 | test 13 | scripts 14 | webpack.config-test.js -------------------------------------------------------------------------------- /scripts/make-package-json.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | 3 | let packageJson = JSON.parse(fs.readFileSync('../package.json', 'utf8')); 4 | 5 | packageJson.dependencies = {}; 6 | packageJson.devDependencies = {}; 7 | 8 | fs.writeFileSync('../package.json', JSON.stringify(packageJson, null, ' ') + '\n', 'utf8'); -------------------------------------------------------------------------------- /demo/src/actions/actions.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | export const addQuestion = (question) => { 4 | return { 5 | type: 'ADD_QUESTION', 6 | question 7 | }; 8 | }; 9 | 10 | export const addAnswer = (questionId, answer) => { 11 | return { 12 | type: 'ADD_ANSWER', 13 | questionId, 14 | answer 15 | }; 16 | }; 17 | -------------------------------------------------------------------------------- /demo/dist/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Questions and Answers 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /webpack.config-test.js: -------------------------------------------------------------------------------- 1 | // Not currently used 2 | // For using with mocha-webpack, which precompiles each test with Webpack 3 | // before it's run; this enables support for radium-loader and css-loader 4 | // but makes the tests run very slowly so not using it anymore 5 | 6 | var nodeExternals = require('webpack-node-externals'); 7 | 8 | module.exports = { 9 | target: 'node', 10 | externals: [nodeExternals()], 11 | module: { 12 | loaders: [ 13 | { 14 | test: /\.js$/, 15 | loader: "babel-loader" 16 | } 17 | ] 18 | } 19 | }; -------------------------------------------------------------------------------- /demo/src/styles/styles.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const item = { 4 | margin: '15px 0', 5 | padding: '10px', 6 | boxShadow: '1px 1px 6px lightgray' 7 | }; 8 | 9 | const styles = { 10 | heading: { 11 | margin: '20px 0', 12 | fontSize: '16px', 13 | fontWeight: 'bold' 14 | }, 15 | question: { 16 | display: 'flex', 17 | flexDirection: 'column', 18 | alignItems: 'flex-start', 19 | ...item, 20 | backgroundColor: '#fff8dc' 21 | }, 22 | answer: { 23 | ...item, 24 | border: '1px solid #eaeaea' 25 | } 26 | }; 27 | 28 | export default styles; -------------------------------------------------------------------------------- /src/store/actions.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | export const add = (key, name) => { 4 | return { 5 | type: 'ADD', 6 | key, 7 | name 8 | }; 9 | }; 10 | 11 | export const updateValue = (key, value) => { 12 | return { 13 | type: 'UPDATE_VALUE', 14 | keyPath, 15 | value 16 | }; 17 | }; 18 | 19 | export const updateMethod = (entryId, methodName, value) => { 20 | return { 21 | type: 'UPDATE_METHOD', 22 | entryId, 23 | methodName, 24 | value 25 | }; 26 | }; 27 | 28 | export const updateMethods = (entryId, value) => { 29 | return { 30 | type: 'UPDATE_METHODS', 31 | entryId, 32 | value 33 | }; 34 | }; -------------------------------------------------------------------------------- /src/components/Utf8Char.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React, {Component, PropTypes} from 'react'; 4 | 5 | // Using dangerouslySetInnerHTML appears to be the only way to get UTF-8 characters to display if the client app 6 | // doesn't specify the UTF-8 charset in its header 7 | class Utf8Char extends Component { 8 | 9 | static propTypes = { 10 | char: PropTypes.string.isRequired 11 | }; 12 | 13 | chars = { 14 | downArrow: '8595', 15 | rightArrow: '8627', 16 | dot: '8226' 17 | }; 18 | 19 | render() { 20 | 21 | return ( 22 | 23 | ); 24 | 25 | } 26 | 27 | } 28 | 29 | export default Utf8Char; -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "visible-react-demo", 3 | "version": "0.0.2", 4 | "description": "Demo of Visible React", 5 | "main": "dist/index.js", 6 | "scripts": { 7 | "test": "mocha --compilers js:babel-register --recursive" 8 | }, 9 | "author": "Robert Kendall (http://robertkendall.com)", 10 | "license": "MIT", 11 | "dependencies": { 12 | "color": "^0.11.3", 13 | "deepcopy": "^0.6.3", 14 | "json-loader": "^0.5.4", 15 | "material-ui": "^0.15.3", 16 | "moment": "^2.14.1", 17 | "node-uuid": "^1.4.7", 18 | "radium": "^0.18.1", 19 | "react": "^15.3.0", 20 | "react-dom": "^15.3.0", 21 | "react-redux": "^4.4.5", 22 | "react-router": "^2.6.1", 23 | "react-tap-event-plugin": "^1.0.0", 24 | "react-time": "^4.2.0", 25 | "redux": "^3.5.2", 26 | "script-loader": "^0.7.0", 27 | "visible-react": "^0.0.2" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/components/PopoutWindow.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React, {Component, PropTypes} from 'react'; 4 | import {render} from 'react-dom'; 5 | import Immutable from 'immutable'; 6 | import Radium, {Style} from 'radium'; 7 | 8 | import root from '../root'; 9 | import Console from './Console'; 10 | 11 | class PopoutWindow extends Component { 12 | 13 | static propTypes = { 14 | entries: PropTypes.instanceOf(Immutable.Map).isRequired 15 | }; 16 | 17 | styles = { 18 | global: { 19 | body: { 20 | margin: '0' 21 | } 22 | } 23 | }; 24 | 25 | shouldComponentUpdate(nextProps) { 26 | return this.props !== nextProps; 27 | } 28 | 29 | render() { 30 | const windowWidth = root.getWindow().innerWidth; 31 | 32 | return ( 33 |
34 |