diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..b8937bc4 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,9 @@ +*.log +.idea +lib +dist +umd +build +coverage +node_modules +__snapshots__ diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 00000000..0fefa292 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,34 @@ +{ + "parser": "babel-eslint", + "extends": [ + "eslint:recommended", + "plugin:react/recommended", + "prettier" + ], + "globals": { + "chrome": true + }, + "env": { + "es6": true, + "browser": true, + "jest": true, + "node": true + }, + "rules": { + "eol-last": ["warn"], + "max-len": ["warn", { "code": 120 , "ignoreComments": true }], + "quotes": ["warn", "single", "avoid-escape"], + "jsx-quotes": ["warn", "prefer-double"], + "react/prop-types": 0 + }, + "plugins": [ + "prettier", + "react", + "babel" + ], + "settings": { + "react": { + "version": "detect" + } + } +} diff --git a/.gitignore b/.gitignore index d8f1a031..c3f40542 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,4 @@ umd build coverage .idea +.eslintcache diff --git a/.travis.yml b/.travis.yml index 9179858b..221c2e8f 100644 --- a/.travis.yml +++ b/.travis.yml @@ -8,5 +8,5 @@ cache: - "node_modules" script: - yarn build:all - - yarn lint + - yarn lint:all - yarn test diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index a0fd0d6b..4ead0e1d 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -11,4 +11,3 @@ Project maintainers have the right and responsibility to remove, edit, or reject Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers. This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/) - diff --git a/babel.config.js b/babel.config.js new file mode 100755 index 00000000..274c7b18 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,14 @@ +module.exports = { + presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'], + plugins: [ + [ + '@babel/plugin-transform-runtime', + { + regenerator: true + } + ], + ['@babel/plugin-proposal-decorators', { legacy: true }], + '@babel/plugin-proposal-class-properties', + '@babel/plugin-proposal-export-default-from' + ] +}; diff --git a/docs/Integrations/Remote.md b/docs/Integrations/Remote.md index 43ad6598..d154e4c7 100644 --- a/docs/Integrations/Remote.md +++ b/docs/Integrations/Remote.md @@ -6,7 +6,7 @@ By installing [`redux-devtools-cli`](https://github.com/reduxjs/redux-devtools/t We're using [SocketCluster](http://socketcluster.io/) for realtime communication, which provides a fast and scalable webSocket layer and a minimal pub/sub system. You need to include one of [its clients](https://github.com/SocketCluster/client-drivers) in your app to communicate with RemotedevServer. Currently there are clients for [JavaScript (NodeJS)](https://github.com/SocketCluster/socketcluster-client), [Java](https://github.com/sacOO7/socketcluster-client-java), [Python](https://github.com/sacOO7/socketcluster-client-python), [C](https://github.com/sacOO7/socketcluster-client-C), [Objective-C](https://github.com/abpopov/SocketCluster-ios-client) and [.NET/C#](https://github.com/sacOO7/SocketclusterClientDotNet). -By default, the websocket server is running on `ws://localhost:8000/socketcluster/`. +By default, the websocket server is running on `ws://localhost:8000/socketcluster/`. ### Messaging lifecycle @@ -15,6 +15,7 @@ By default, the websocket server is running on `ws://localhost:8000/socketcluste The client driver provides a way to connect to the server via websockets (see the docs for the selected client). ##### JavaScript + ```js var socket = socketCluster.connect({ hostname: 'localhost', @@ -23,18 +24,20 @@ var socket = socketCluster.connect({ ``` ##### Python + ```py -socket = Socketcluster.socket("ws://localhost:8000/socketcluster/") +socket = Socketcluster.socket("ws://localhost:8000/socketcluster/") socket.connect() ``` > Note that JavaScript client composes the url from `hostname` and `port`, adding `/socketcluster/` path automatically. For other clients, you should specify that path. For example, for `ObjectiveC` it would be `self.client.initWithHost("localhost/socketcluster/", onPort: 8000, securely: false)`. #### 2. Disconnecting and reconnecting - + SocketCluster client handles reconnecting for you, but you still might want to know when the connection is established, or when it failed to connect. ##### JavaScript + ```js socket.on('connect', status => { // Here will come the next step @@ -48,6 +51,7 @@ socket.on('error', error => { ``` ##### Python + ```py def onconnect(socket): // Here will call the next step @@ -66,9 +70,13 @@ socket.setBasicListener(onconnect, ondisconnect, onConnectError) We're not providing an authorizing mechanism yet. All you have to do is to emit a `login` event, and you'll get a `channelName` you should subscribe for, and watch for messages and events. Make sure to pass the `master` event, otherwise it should be a monitor, not a client app. ##### JavaScript + ```js socket.emit('login', 'master', (error, channelName) => { - if (error) { console.log(error); return; } + if (error) { + console.log(error); + return; + } channel = socket.subscribe(channelName); channel.watch(handleMessages); socket.on(channelName, handleMessages); @@ -80,6 +88,7 @@ function handleMessages(message) { ``` ##### Python + ```py socket.emitack("login", "master", login) @@ -99,6 +108,7 @@ You could just emit the `login` event, and omit subscribing (and point `5` bello To send your data to the monitor use `log` or `log-noid` channel. The latter will add the socket id to the message from the server side (useful when the message was sent before the connection was established). The message object includes the following: + - `type` - usually should be `ACTION`. If you want to indicate that we're starting a new log (clear all actions emitted before and add `@@INIT`), use `INIT`. In case you have a lifted state similar to one provided by [`redux-devtools-instrument`](https://github.com/zalmoxisus/redux-devtools-instrument), use `STATE`. - `action` - the action object. It is recommended to lift it in another object, and add `timestamp` to show when the action was fired off: `{ timestamp: Date.now(), action: { type: 'SOME_ACTION' } }`. - `payload` - usually the state or lifted state object. @@ -107,6 +117,7 @@ The message object includes the following: - `id` - socket connection id, which should be either `socket.id` or should not provided and use `log-noid` channel. ##### JavaScript + ```js const message = { type: 'ACTION', @@ -120,6 +131,7 @@ socket.emit(socket.id ? 'log' : 'log-noid', message); ``` ##### Python + ```py class Message: def __init__(self, action, state): @@ -133,14 +145,16 @@ socket.emit(socket.id if "log" else "log-noid", Message(action, state)); #### 5. Listening for monitor events When a monitor action is emitted, you'll get an event on the subscribed function. The argument object includes a `type` key, which can be: + - `DISPATCH` - a monitor action dispatched on Redux DevTools monitor, like `{ type: 'DISPATCH', payload: { type: 'JUMP_TO_STATE', 'index': 2 }`. See [`redux-devtools-instrument`](https://github.com/zalmoxisus/redux-devtools-instrument/blob/master/src/instrument.js) for details. Additionally to that API, you'll get also a stringified `state` object when needed. So, for example, for time travelling (`JUMP_TO_STATE`) you can just parse and set the state (see the example). Usually implementing this type of actions would be enough. - `ACTION` - the user requested to dispatch an action remotely like `{ type: 'ACTION', action: '{ type: \'INCREMENT_COUNTER\' }' }`. The `action` can be either a stringified javascript object which should be evalled or a function which arguments should be evalled like [here](https://github.com/zalmoxisus/remotedev-utils/blob/master/src/index.js#L62-L70). - `START` - a monitor was opened. You could handle this event in order not to do extra tasks when the app is not monitored. -- `STOP` - a monitor was closed. You can take this as no need to send data to the monitor. I there are several monitors and one was closed, all others will send `START` event to acknowledge that we still have to send data. +- `STOP` - a monitor was closed. You can take this as no need to send data to the monitor. I there are several monitors and one was closed, all others will send `START` event to acknowledge that we still have to send data. See [`mobx-remotedev`](https://github.com/zalmoxisus/mobx-remotedev/blob/master/src/monitorActions.js) for an example of implementation without [`redux-devtools-instrument`](https://github.com/zalmoxisus/redux-devtools-instrument/blob/master/src/instrument.js). ##### JavaScript + ```js function handleMessages(message) { if (message.type === 'DISPATCH' && message.payload.type === 'JUMP_TO_STATE') { @@ -150,6 +164,7 @@ function handleMessages(message) { ``` ##### Python + ```py def handleMessages(key, message): if message.type === "DISPATCH" and message.payload.type === "JUMP_TO_STATE": diff --git a/docs/Walkthrough.md b/docs/Walkthrough.md index e5713912..ad48cf38 100644 --- a/docs/Walkthrough.md +++ b/docs/Walkthrough.md @@ -46,10 +46,12 @@ const DevTools = createDevTools( // Consult their repositories to learn about those props. // Here, we put LogMonitor inside a DockMonitor. // Note: DockMonitor is visible by default. - - + + ); @@ -60,9 +62,7 @@ Note that you can use `LogMonitor` directly without wrapping it in `DockMonitor` ```js // If you'd rather not use docking UI, use directly -const DevTools = createDevTools( - -); +const DevTools = createDevTools(); ``` #### Use `DevTools.instrument()` Store Enhancer @@ -75,7 +75,7 @@ The easiest way to apply several store enhancers in a row is to use the [`compos You can add additional options to it: `DevTools.instrument({ maxAge: 50, shouldCatchErrors: true })`. See [`redux-devtools-instrument`'s API](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-instrument#api) for more details. -It’s important that you should add `DevTools.instrument()` *after* `applyMiddleware` in your `compose()` function arguments. This is because `applyMiddleware` is potentially asynchronous, but `DevTools.instrument()` expects all actions to be plain objects rather than actions interpreted by asynchronous middleware such as [redux-promise](https://github.com/acdlite/redux-promise) or [redux-thunk](https://github.com/gaearon/redux-thunk). So make sure `applyMiddleware()` goes first in the `compose()` call, and `DevTools.instrument()` goes after it. +It’s important that you should add `DevTools.instrument()` _after_ `applyMiddleware` in your `compose()` function arguments. This is because `applyMiddleware` is potentially asynchronous, but `DevTools.instrument()` expects all actions to be plain objects rather than actions interpreted by asynchronous middleware such as [redux-promise](https://github.com/acdlite/redux-promise) or [redux-thunk](https://github.com/gaearon/redux-thunk). So make sure `applyMiddleware()` goes first in the `compose()` call, and `DevTools.instrument()` goes after it. ##### `store/configureStore.js` @@ -99,7 +99,9 @@ export default function configureStore(initialState) { // Hot reload reducers (requires Webpack or Browserify HMR to be enabled) if (module.hot) { module.hot.accept('../reducers', () => - store.replaceReducer(require('../reducers')/*.default if you use Babel 6+ */) + store.replaceReducer( + require('../reducers') /*.default if you use Babel 6+ */ + ) ); } @@ -126,7 +128,7 @@ function getDebugSessionKey() { // You can write custom logic here! // By default we try to read the key from ?debug_session= in the address bar const matches = window.location.href.match(/[?&]debug_session=([^&#]+)\b/); - return (matches && matches.length > 0)? matches[1] : null; + return matches && matches.length > 0 ? matches[1] : null; } export default function configureStore(initialState) { @@ -181,7 +183,7 @@ export default function configureStore(initialState) { // Note: only Redux >= 3.1.0 supports passing enhancer as third argument. // See https://github.com/rackt/redux/releases/tag/v3.1.0 return createStore(rootReducer, initialState, enhancer); -}; +} ``` ##### `store/configureStore.dev.js` @@ -205,7 +207,7 @@ function getDebugSessionKey() { // You can write custom logic here! // By default we try to read the key from ?debug_session= in the address bar const matches = window.location.href.match(/[?&]debug_session=([^&]+)\b/); - return (matches && matches.length > 0)? matches[1] : null; + return matches && matches.length > 0 ? matches[1] : null; } export default function configureStore(initialState) { @@ -216,7 +218,9 @@ export default function configureStore(initialState) { // Hot reload reducers (requires Webpack or Browserify HMR to be enabled) if (module.hot) { module.hot.accept('../reducers', () => - store.replaceReducer(require('../reducers')/*.default if you use Babel 6+ */) + store.replaceReducer( + require('../reducers') /*.default if you use Babel 6+ */ + ) ); } @@ -346,7 +350,11 @@ import { render } from 'react-dom'; import DevTools from './containers/DevTools'; export default function showDevTools(store) { - const popup = window.open(null, 'Redux DevTools', 'menubar=no,location=no,resizable=yes,scrollbars=no,status=no'); + const popup = window.open( + null, + 'Redux DevTools', + 'menubar=no,location=no,resizable=yes,scrollbars=no,status=no' + ); // Reload in case it already exists popup.location.reload(); @@ -366,11 +374,11 @@ Note that there are no useful props you can pass to the `DevTools` component oth ### Gotchas -* **Your reducers have to be pure and free of side effects to work correctly with DevTools.** For example, even generating a random ID in reducer makes it impure and non-deterministic. Instead, do this in action creators. +- **Your reducers have to be pure and free of side effects to work correctly with DevTools.** For example, even generating a random ID in reducer makes it impure and non-deterministic. Instead, do this in action creators. -* **Make sure to only apply `DevTools.instrument()` and render `` in development!** In production, this will be terribly slow because actions just accumulate forever. As described above, you need to use conditional `require`s and use `DefinePlugin` (Webpack) or `loose-envify` (Browserify) together with Uglify to remove the dead code. Here is [an example](https://github.com/erikras/react-redux-universal-hot-example/) that adds Redux DevTools handling the production case correctly. +- **Make sure to only apply `DevTools.instrument()` and render `` in development!** In production, this will be terribly slow because actions just accumulate forever. As described above, you need to use conditional `require`s and use `DefinePlugin` (Webpack) or `loose-envify` (Browserify) together with Uglify to remove the dead code. Here is [an example](https://github.com/erikras/react-redux-universal-hot-example/) that adds Redux DevTools handling the production case correctly. -* **It is important that `DevTools.instrument()` store enhancer should be added to your middleware stack *after* `applyMiddleware` in the `compose`d functions, as `applyMiddleware` is potentially asynchronous.** Otherwise, DevTools won’t see the raw actions emitted by asynchronous middleware such as [redux-promise](https://github.com/acdlite/redux-promise) or [redux-thunk](https://github.com/gaearon/redux-thunk). +- **It is important that `DevTools.instrument()` store enhancer should be added to your middleware stack _after_ `applyMiddleware` in the `compose`d functions, as `applyMiddleware` is potentially asynchronous.** Otherwise, DevTools won’t see the raw actions emitted by asynchronous middleware such as [redux-promise](https://github.com/acdlite/redux-promise) or [redux-thunk](https://github.com/gaearon/redux-thunk). ### What Next? diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 00000000..d05ce4eb --- /dev/null +++ b/jest.config.js @@ -0,0 +1,3 @@ +module.exports = { + setupFiles: ['devui/tests/setup.js'] +}; diff --git a/lerna.json b/lerna.json index 5a65f434..20f22051 100644 --- a/lerna.json +++ b/lerna.json @@ -8,9 +8,5 @@ "allowBranch": "master" } }, - "ignoreChanges": [ - "**/test/**", - "**/examples/**", - "**/*.md" - ] + "ignoreChanges": ["**/test/**", "**/examples/**", "**/*.md"] } diff --git a/package.json b/package.json index 25da808c..caf4cd4f 100644 --- a/package.json +++ b/package.json @@ -2,10 +2,15 @@ "private": true, "devDependencies": { "babel-eslint": "^10.0.0", - "eslint-plugin-react": "7.4.0", - "eslint-plugin-flowtype": "3.2.0", - "lerna": "3.4.2", - "pre-commit": "^1.1.3" + "eslint": "^5.12.0", + "eslint-config-prettier": "^3.3.0", + "eslint-plugin-babel": "^5.3.0", + "eslint-plugin-prettier": "^3.0.1", + "eslint-plugin-react": "7.12.3", + "jest": "^24.1.0", + "lerna": "3.9.0", + "lint-staged": "^8.1.0", + "prettier": "^1.15.3" }, "scripts": { "lerna": "lerna", @@ -14,15 +19,29 @@ "publish": "lerna publish", "canary": "lerna publish --canary preminor --npm-tag alpha", "next": "lerna publish --bump prerelease --npm-tag next", - "lint": "lerna run lint --since master -- --color", - "lint:all": "lerna run lint -- --color", - "test": "lerna run test --since master -- --colors", - "test:all": "lerna run test -- --colors" + "lint": "eslint '**/*.{js,jsx}' --cache", + "lint:fix": "eslint '**/*.{js,jsx}' --fix --cache", + "lint:all": "eslint '**/*.{js,jsx}'", + "prettify": "prettier '**/*.{js,jsx,json,css,html,md}' --ignore-path .eslintignore --single-quote --write", + "precommit": "lint-staged", + "test": "jest --onlyChanged", + "test:all": "jest" }, "workspaces": [ "packages/*" ], - "pre-commit": [ - "lint" - ] + "engines": { + "node": ">=8.0.0" + }, + "lint-staged": { + "*.{js,jsx}": [ + "prettier --single-quote --write", + "yarn lint:fix", + "git add" + ], + "*.{json,css,html,md}": [ + "prettier --single-quote --write", + "git add" + ] + } } diff --git a/packages/d3tooltip/.babelrc b/packages/d3tooltip/.babelrc index 9d06ebbb..1320b9a3 100644 --- a/packages/d3tooltip/.babelrc +++ b/packages/d3tooltip/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["es2015-loose", "stage-0"] + "presets": ["@babel/preset-env"] } diff --git a/packages/d3tooltip/.eslintignore b/packages/d3tooltip/.eslintignore deleted file mode 100644 index 0d38857e..00000000 --- a/packages/d3tooltip/.eslintignore +++ /dev/null @@ -1,4 +0,0 @@ -lib -**/node_modules -**/webpack.config.js -examples/**/server.js \ No newline at end of file diff --git a/packages/d3tooltip/.eslintrc b/packages/d3tooltip/.eslintrc deleted file mode 100644 index 8132e1fa..00000000 --- a/packages/d3tooltip/.eslintrc +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "eslint-config-airbnb", - "env": { - "browser": true, - "mocha": true, - "node": true - }, - "rules": { - "react/jsx-uses-react": 2, - "react/jsx-uses-vars": 2, - "react/react-in-jsx-scope": 2 - }, - "plugins": [ - "react" - ] -} diff --git a/packages/d3tooltip/README.md b/packages/d3tooltip/README.md index 645b8ec1..08bbd0b6 100644 --- a/packages/d3tooltip/README.md +++ b/packages/d3tooltip/README.md @@ -1,5 +1,4 @@ -d3tooltip -========================= +# d3tooltip This tooltip aims for a minimal yet highly configurable API. It has a long way to go, but the essentials are there. It was created by [@romseguy](https://github.com/romseguy) and merged from [`romseguy/d3tooltip`](https://github.com/romseguy/d3tooltip). @@ -47,9 +46,9 @@ vis.selectAll('circle').data(someData).enter() ## API -Option | Type | Default | Description ---------------------------|--------------|---------------------|-------------------------------------------------------------- -`root` | DOM.Element | `body` | The tooltip will be added as a child of that element. You can also use a D3 [selection](https://github.com/mbostock/d3/wiki/Selections#d3_select) -`left` | Number | `undefined` | Sets the tooltip `x` absolute position instead of the mouse `x` position, relative to the `root` element -`top` | Number | `undefined` | Sets the tooltip `y` absolute position instead of the mouse `y` position, relative to the `root` element -`offset` | Object | `{left: 0, top: 0}` | Sets the distance, starting from the cursor position, until the tooltip is rendered. **Warning**: only applicable if you don't provide a `left` or `top` option +| Option | Type | Default | Description | +| -------- | ----------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `root` | DOM.Element | `body` | The tooltip will be added as a child of that element. You can also use a D3 [selection](https://github.com/mbostock/d3/wiki/Selections#d3_select) | +| `left` | Number | `undefined` | Sets the tooltip `x` absolute position instead of the mouse `x` position, relative to the `root` element | +| `top` | Number | `undefined` | Sets the tooltip `y` absolute position instead of the mouse `y` position, relative to the `root` element | +| `offset` | Object | `{left: 0, top: 0}` | Sets the distance, starting from the cursor position, until the tooltip is rendered. **Warning**: only applicable if you don't provide a `left` or `top` option | diff --git a/packages/d3tooltip/package.json b/packages/d3tooltip/package.json index 55ed618e..0940641b 100644 --- a/packages/d3tooltip/package.json +++ b/packages/d3tooltip/package.json @@ -5,15 +5,13 @@ "main": "lib/index.js", "scripts": { "clean": "rimraf lib dist", - "lint": "eslint src", - "build": "npm run build:lib && npm run build:umd && npm run build:umd:min", - "build:lib": "babel src --out-dir lib", - "build:umd": "webpack src/index.js dist/d3tooltip.js --config webpack.config.development.js", - "build:umd:min": "webpack src/index.js dist/d3tooltip.min.js --config webpack.config.production.js", + "build": "babel src --out-dir lib", + "build:umd": "webpack --progress --config webpack.config.umd.js", + "build:umd:min": "webpack --env.minimize --progress --config webpack.config.umd.js", "version": "npm run build", "postversion": "git push && git push --tags && npm run clean", "prepare": "npm run clean && npm run build", - "prepublishOnly": "npm run lint && npm run clean && npm run build" + "prepublishOnly": "npm run clean && npm run build && npm run build:umd && npm run build:umd:min" }, "files": [ "lib", @@ -35,18 +33,13 @@ }, "homepage": "https://github.com/reduxjs/redux-devtools", "devDependencies": { - "babel-cli": "^6.3.15", - "babel-core": "^6.1.20", - "babel-eslint": "^5.0.0-beta4", - "babel-loader": "^6.2.0", - "babel-preset-es2015-loose": "^6.1.3", - "babel-preset-react": "^6.3.13", - "babel-preset-stage-0": "^6.3.13", - "eslint": "^0.24", - "eslint-config-airbnb": "0.0.6", - "eslint-plugin-react": "^3.6.3", + "@babel/cli": "^7.2.3", + "@babel/core": "^7.2.2", + "@babel/preset-env": "^7.3.1", + "babel-loader": "^8.0.5", "rimraf": "^2.3.4", - "webpack": "^1.9.6" + "webpack": "^4.27.1", + "webpack-cli": "^3.2.0" }, "dependencies": { "ramda": "^0.17.1" diff --git a/packages/d3tooltip/src/index.js b/packages/d3tooltip/src/index.js index 75c42732..6460f1cd 100644 --- a/packages/d3tooltip/src/index.js +++ b/packages/d3tooltip/src/index.js @@ -5,19 +5,14 @@ const { prependClass, functor } = utils.default || utils; const defaultOptions = { left: undefined, // mouseX top: undefined, // mouseY - offset: {left: 0, top: 0}, + offset: { left: 0, top: 0 }, root: undefined }; export default function tooltip(d3, className = 'tooltip', options = {}) { - const { - left, - top, - offset, - root - } = {...defaultOptions, ...options}; + const { left, top, offset, root } = { ...defaultOptions, ...options }; - let attrs = {'class': className}; + let attrs = { class: className }; let text = () => ''; let styles = {}; @@ -33,7 +28,8 @@ export default function tooltip(d3, className = 'tooltip', options = {}) { anchor.selectAll(`div.${className}`).remove(); - el = anchor.append('div') + el = anchor + .append('div') .attr(prependClass(className)(attrs)) .style({ position: 'absolute', @@ -49,12 +45,10 @@ export default function tooltip(d3, className = 'tooltip', options = {}) { let [mouseX, mouseY] = d3.mouse(rootNode); let [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top]; - el - .style({ - left: x + 'px', - top: y + 'px' - }) - .html(() => text(node)); + el.style({ + left: x + 'px', + top: y + 'px' + }).html(() => text(node)); }, 'mouseout.tip': () => el.remove() @@ -63,14 +57,14 @@ export default function tooltip(d3, className = 'tooltip', options = {}) { tip.attr = function setAttr(d) { if (is(Object, d)) { - attrs = {...attrs, ...d}; + attrs = { ...attrs, ...d }; } return this; }; tip.style = function setStyle(d) { if (is(Object, d)) { - styles = {...styles, ...d}; + styles = { ...styles, ...d }; } return this; }; diff --git a/packages/d3tooltip/webpack.config.base.js b/packages/d3tooltip/webpack.config.base.js deleted file mode 100644 index 9576681c..00000000 --- a/packages/d3tooltip/webpack.config.base.js +++ /dev/null @@ -1,16 +0,0 @@ -'use strict'; - -module.exports = { - module: { - loaders: [ - { test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/ } - ] - }, - output: { - library: 'd3tooltip', - libraryTarget: 'umd' - }, - resolve: { - extensions: ['', '.js'] - } -}; diff --git a/packages/d3tooltip/webpack.config.development.js b/packages/d3tooltip/webpack.config.development.js deleted file mode 100644 index e509d7cd..00000000 --- a/packages/d3tooltip/webpack.config.development.js +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; - -var webpack = require('webpack'); -var baseConfig = require('./webpack.config.base'); - -var config = Object.create(baseConfig); -config.plugins = [ - new webpack.optimize.OccurenceOrderPlugin(), - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify('development') - }) -]; - -module.exports = config; diff --git a/packages/d3tooltip/webpack.config.production.js b/packages/d3tooltip/webpack.config.production.js deleted file mode 100644 index f4589cc0..00000000 --- a/packages/d3tooltip/webpack.config.production.js +++ /dev/null @@ -1,20 +0,0 @@ -'use strict'; - -var webpack = require('webpack'); -var baseConfig = require('./webpack.config.base'); - -var config = Object.create(baseConfig); -config.plugins = [ - new webpack.optimize.OccurenceOrderPlugin(), - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify('production') - }), - new webpack.optimize.UglifyJsPlugin({ - compressor: { - screw_ie8: true, - warnings: false - } - }) -]; - -module.exports = config; diff --git a/packages/d3tooltip/webpack.config.umd.js b/packages/d3tooltip/webpack.config.umd.js new file mode 100644 index 00000000..e7ab53ca --- /dev/null +++ b/packages/d3tooltip/webpack.config.umd.js @@ -0,0 +1,29 @@ +const path = require('path'); + +module.exports = (env = {}) => ({ + mode: 'production', + entry: { + app: ['./src/index.js'] + }, + output: { + library: 'd3tooltip', + libraryTarget: 'umd', + path: path.resolve(__dirname, 'dist'), + filename: env.minimize ? 'd3tooltip.min.js' : 'd3tooltip.js' + }, + module: { + rules: [ + { + test: /\.js$/, + loader: 'babel-loader', + exclude: /node_modules/ + } + ] + }, + optimization: { + minimize: !!env.minimize + }, + performance: { + hints: false + } +}); diff --git a/packages/devui/.babelrc b/packages/devui/.babelrc index 9b7d435a..645cc56e 100755 --- a/packages/devui/.babelrc +++ b/packages/devui/.babelrc @@ -1,3 +1,4 @@ { - "presets": ["es2015", "stage-0", "react"] + "presets": ["@babel/preset-env", "@babel/preset-react"], + "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-export-default-from"] } diff --git a/packages/devui/.eslintrc b/packages/devui/.eslintrc deleted file mode 100755 index 0a1feed4..00000000 --- a/packages/devui/.eslintrc +++ /dev/null @@ -1,20 +0,0 @@ -{ - "extends": "airbnb", - "rules": { - "arrow-body-style": 0, - "prefer-arrow-callback": 0, - "func-names": 0, - "comma-dangle": ["error", "never"], - "newline-per-chained-call": 0, - "react/sort-comp": 0, - "react/jsx-no-bind": 0, - "react/jsx-uses-react": 1, - "react/prefer-stateless-function": 0 - }, - "env": { - "browser": true, - "node": true, - "jest": true - }, - "parser": "babel-eslint" -} diff --git a/packages/devui/.scripts/get_gh_pages_url.js b/packages/devui/.scripts/get_gh_pages_url.js index 062c690d..e82124e3 100755 --- a/packages/devui/.scripts/get_gh_pages_url.js +++ b/packages/devui/.scripts/get_gh_pages_url.js @@ -7,5 +7,6 @@ const parse = require('git-url-parse'); var ghUrl = process.argv[2]; const parsedUrl = parse(ghUrl); -const ghPagesUrl = 'https://' + parsedUrl.owner + '.github.io/' + parsedUrl.name; +const ghPagesUrl = + 'https://' + parsedUrl.owner + '.github.io/' + parsedUrl.name; console.log(ghPagesUrl); diff --git a/packages/devui/.scripts/mocha_runner.js b/packages/devui/.scripts/mocha_runner.js deleted file mode 100755 index 87d88197..00000000 --- a/packages/devui/.scripts/mocha_runner.js +++ /dev/null @@ -1,33 +0,0 @@ -// IMPORTANT -// --------- -// This is an auto generated file with React CDK. -// Do not modify this file. -// Use `.scripts/user/pretest.js instead`. - -require('babel-core/register'); -require('babel-polyfill'); - -// Add jsdom support, which is required for enzyme. -var jsdom = require('jsdom').jsdom; - -var exposedProperties = ['window', 'navigator', 'document']; - -global.document = jsdom(''); -global.window = document.defaultView; -Object.keys(document.defaultView).forEach((property) => { - if (typeof global[property] === 'undefined') { - exposedProperties.push(property); - global[property] = document.defaultView[property]; - } -}); - -global.navigator = { - userAgent: 'node.js' -}; - -process.on('unhandledRejection', function (error) { - console.error('Unhandled Promise Rejection:'); - console.error(error && error.stack || error); -}); - -require('./user/pretest.js'); diff --git a/packages/devui/.storybook/config.js b/packages/devui/.storybook/config.js index c6cd1ea8..eefdbad6 100755 --- a/packages/devui/.storybook/config.js +++ b/packages/devui/.storybook/config.js @@ -1,23 +1,25 @@ import { configure, setAddon, addDecorator } from '@storybook/react'; -import { setOptions } from '@storybook/addon-options'; -import infoAddon from '@storybook/addon-info'; +import { withOptions } from '@storybook/addon-options'; +import { withInfo } from '@storybook/addon-info'; import { withKnobs } from '@storybook/addon-knobs'; import { withTheme } from './themeAddon/theme'; import '../src/presets.js'; -setAddon(infoAddon); -setOptions({ - name: 'DevUI', - url: 'https://github.com/reduxjs/redux-devtools/tree/master/packages/devui', - goFullScreen: false, - showLeftPanel: true, - showDownPanel: true, - showSearchBox: false, - downPanelInRight: true -}); +addDecorator( + withOptions({ + name: 'DevUI', + url: 'https://github.com/reduxjs/redux-devtools/tree/master/packages/devui', + goFullScreen: false, + showStoriesPanel: true, + showAddonPanel: true, + showSearchBox: false, + addonPanelInRight: true + }) +); addDecorator(withTheme); addDecorator(withKnobs); +addDecorator(withInfo); const req = require.context('../src/', true, /stories\/index\.js$/); diff --git a/packages/devui/.storybook/preview-head.html b/packages/devui/.storybook/preview-head.html index 95c0c9cd..8d31d8b1 100644 --- a/packages/devui/.storybook/preview-head.html +++ b/packages/devui/.storybook/preview-head.html @@ -11,10 +11,11 @@ min-height: 400px; margin: 0; padding: 0; - font-family: "Helvetica Neue", "Lucida Grande", sans-serif; + font-family: 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 11px; } - #root, #root > div, #root > div > div { + #root, + #root > div { height: 100%; } #root > div > div { @@ -22,5 +23,6 @@ flex-direction: column; width: 100%; height: 100%; + overflow-y: auto; } diff --git a/packages/devui/.storybook/themeAddon/Panel.js b/packages/devui/.storybook/themeAddon/Panel.js index 713c932d..7e0ee5f4 100644 --- a/packages/devui/.storybook/themeAddon/Panel.js +++ b/packages/devui/.storybook/themeAddon/Panel.js @@ -25,6 +25,8 @@ export default class Panel extends React.Component { this.setState(state); }; + onClick = () => {}; + render() { const { theme, scheme, light } = this.state; return ( @@ -50,6 +52,7 @@ export default class Panel extends React.Component { } ]} onFieldChange={this.onChange} + onFieldClick={this.onClick} /> ); diff --git a/packages/devui/.storybook/themeAddon/register.js b/packages/devui/.storybook/themeAddon/register.js index 6fa38b07..1df4387a 100644 --- a/packages/devui/.storybook/themeAddon/register.js +++ b/packages/devui/.storybook/themeAddon/register.js @@ -7,6 +7,7 @@ addons.register(ADDON_ID, api => { const channel = addons.getChannel(); addons.addPanel(PANEL_ID, { title: 'Theme', - render: () => + render: ({ active }) => + active ? : null }); }); diff --git a/packages/devui/.storybook/themeAddon/theme.js b/packages/devui/.storybook/themeAddon/theme.js index 3a3ff767..120db290 100644 --- a/packages/devui/.storybook/themeAddon/theme.js +++ b/packages/devui/.storybook/themeAddon/theme.js @@ -1,22 +1,8 @@ import React from 'react'; import addons from '@storybook/addons'; -import styled from 'styled-components'; import { EVENT_ID_DATA, DEFAULT_THEME_STATE } from './constant'; import { Container } from '../../src'; -const ContainerStyled = styled(Container)` - > div { - height: 100%; - width: 100%; - - > div { - height: 100%; - width: 100%; - overflow-y: auto; - } - } -`; - const channel = addons.getChannel(); class Theme extends React.Component { @@ -35,7 +21,7 @@ class Theme extends React.Component { }; render() { - return {this.props.children}; + return {this.props.children}; } } diff --git a/packages/devui/.storybook/user/modify_webpack_config.js b/packages/devui/.storybook/user/modify_webpack_config.js deleted file mode 100755 index 2716de91..00000000 --- a/packages/devui/.storybook/user/modify_webpack_config.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = function (config) { - // This is the default webpack config defined in the `../webpack.config.js` - // modify as you need. -}; diff --git a/packages/devui/.storybook/webpack.config.js b/packages/devui/.storybook/webpack.config.js index 08dec07a..9fc16d31 100755 --- a/packages/devui/.storybook/webpack.config.js +++ b/packages/devui/.storybook/webpack.config.js @@ -1,26 +1,8 @@ const path = require('path'); -const updateConfig = require('./user/modify_webpack_config'); -const config = { - module: { - rules: [ - { - test: /\.css?$/, - use: [{ loader: 'style-loader' }, { loader: 'raw-loader' }], - include: path.resolve(__dirname, '../') - }, - { - test: /\.json?$/, - loader: 'json-loader', - include: path.resolve(__dirname, '../') - }, - { - test: /\.woff2?(\?\S*)?$/, - loader: 'url?limit=65000&mimetype=application/font-woff' - } - ] - } +module.exports = (baseConfig, env, defaultConfig) => { + // Add custom webpack config here like: + // defaultConfig.module.rules.push + + return defaultConfig; }; - -updateConfig(config); -module.exports = config; diff --git a/packages/devui/fonts/index.css b/packages/devui/fonts/index.css index a7c1a29c..b7baea0d 100644 --- a/packages/devui/fonts/index.css +++ b/packages/devui/fonts/index.css @@ -4,7 +4,8 @@ font-style: normal; font-weight: 400; src: local('Source Code Pro'), local('SourceCodePro-Regular'), - url('./source-code-pro-v6-latin/source-code-pro-v6-latin-regular.woff2') format('woff2'); + url('./source-code-pro-v6-latin/source-code-pro-v6-latin-regular.woff2') + format('woff2'); } /* source-sans-pro-regular - latin */ @font-face { @@ -12,7 +13,8 @@ font-style: normal; font-weight: 400; src: local('Source Sans Pro'), local('SourceSansPro-Regular'), - url('./source-sans-pro-v9-latin/source-sans-pro-v9-latin-regular.woff2') format('woff2'); + url('./source-sans-pro-v9-latin/source-sans-pro-v9-latin-regular.woff2') + format('woff2'); } /* source-sans-pro-600 - latin */ @font-face { @@ -20,7 +22,8 @@ font-style: normal; font-weight: 600; src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), - url('./source-sans-pro-v9-latin/source-sans-pro-v9-latin-600.woff2') format('woff2'); + url('./source-sans-pro-v9-latin/source-sans-pro-v9-latin-600.woff2') + format('woff2'); } /* roboto-regular - latin */ @@ -29,7 +32,7 @@ font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), - url('./roboto-v15-latin/roboto-v15-latin-regular.woff2') format('woff2'); + url('./roboto-v15-latin/roboto-v15-latin-regular.woff2') format('woff2'); } /* roboto-mono-regular - latin */ @font-face { @@ -37,7 +40,8 @@ font-style: normal; font-weight: 400; src: local('Roboto Mono'), local('RobotoMono-Regular'), - url('./roboto-mono-v4-latin/roboto-mono-v4-latin-regular.woff2') format('woff2'); + url('./roboto-mono-v4-latin/roboto-mono-v4-latin-regular.woff2') + format('woff2'); } /* Generated with https://google-webfonts-helper.herokuapp.com */ diff --git a/packages/devui/package.json b/packages/devui/package.json index e2cb7548..7de9ccb9 100755 --- a/packages/devui/package.json +++ b/packages/devui/package.json @@ -1,78 +1,60 @@ { "name": "devui", "version": "1.0.0-3", - "description": - "Reusable React components for building DevTools monitors and apps.", - "files": ["lib", "fonts"], + "description": "Reusable React components for building DevTools monitors and apps.", + "files": [ + "lib", + "fonts" + ], "repository": { "type": "git", "url": "https://github.com/reduxjs/redux-devtools.git" }, - "author": - "Mihail Diordiev (https://github.com/zalmoxisus)", + "author": "Mihail Diordiev (https://github.com/zalmoxisus)", "license": "MIT", "scripts": { "start": "npm run storybook", "build": "rimraf ./lib && babel ./src --out-dir ./lib --ignore tests,stories", - "lint": "eslint src", - "lintfix": "eslint src --fix", "lint:css": "stylelint './src/**/styles/*.js'", - "format": "prettier-eslint --write ./src/**/*.js", "test:update": "npm run jest -- -u", "test": "jest --no-cache", "storybook": "start-storybook -p 9001 -c .storybook -s ./fonts", "publish-storybook": "bash .scripts/publish_storybook.sh", "prepare": "npm run build", - "prepublishOnly": "npm run lint && npm run test && npm run build" + "prepublishOnly": "npm run test && npm run build" }, "bugs": { "url": "https://github.com/reduxjs/redux-devtools/issues" }, "homepage": "https://github.com/reduxjs/redux-devtools", "devDependencies": { - "@storybook/addon-actions": "^3.2.13", - "@storybook/addon-info": "^3.2.13", - "@storybook/addon-knobs": "^3.2.13", - "@storybook/addon-options": "^3.2.13", - "@storybook/react": "^3.2.13", - "babel-cli": "^6.26.0", - "babel-core": "^6.26.0", - "babel-eslint": "^6.0.2", - "babel-jest": "^21.2.0", - "babel-loader": "^7.1.2", - "babel-plugin-transform-runtime": "^6.23.0", - "babel-polyfill": "^6.26.0", - "babel-preset-es2015": "^6.24.1", - "babel-preset-react": "^6.24.1", - "babel-preset-stage-0": "^6.16.0", - "css-loader": "^0.28.7", + "@babel/cli": "^7.2.3", + "@babel/core": "^7.2.2", + "@babel/plugin-proposal-class-properties": "^7.3.0", + "@babel/plugin-proposal-decorators": "^7.3.0", + "@babel/plugin-proposal-export-default-from": "^7.2.0", + "@babel/plugin-transform-runtime": "^7.2.0", + "@babel/preset-env": "^7.3.1", + "@babel/preset-react": "^7.0.0", + "@storybook/addon-actions": "^4.1.4", + "@storybook/addon-info": "^4.1.4", + "@storybook/addon-knobs": "^4.1.4", + "@storybook/addon-options": "^4.1.4", + "@storybook/react": "4.0.9", "enzyme": "^3.1.0", "enzyme-adapter-react-16": "^1.0.2", "enzyme-to-json": "^3.1.4", - "eslint": "^2.7.0", - "eslint-config-airbnb": "^7.0.0", - "eslint-plugin-babel": "^3.2.0", - "eslint-plugin-jsx-a11y": "^0.6.2", - "eslint-plugin-react": "^4.3.0", - "file-loader": "^1.1.5", "git-url-parse": "^7.0.1", - "jest": "^21.2.1", + "jest": "^24.1.0", "jsdom": "^11.3.0", - "node-sass": "^3.13.0", - "postcss-loader": "^2.0.8", - "prettier-eslint-cli": "^4.4.0", - "raw-loader": "^0.5.1", "react": "^16.0.0", "react-addons-test-utils": "^15.6.2", "react-dom": "^16.0.0", "react-test-renderer": "^16.0.0", "rimraf": "^2.6.2", - "sass-loader": "^4.0.2", - "style-loader": "^0.19.0", "stylelint": "^7.6.0", "stylelint-config-standard": "^15.0.0", - "stylelint-processor-styled-components": "^0.0.4", - "url-loader": "^0.6.2" + "stylelint-processor-styled-components": "^0.0.4" }, "peerDependencies": { "react": "^0.14.9 || ^15.3.0" diff --git a/packages/devui/src/Button/Button.js b/packages/devui/src/Button/Button.js index 8a82b84e..a5211eaa 100644 --- a/packages/devui/src/Button/Button.js +++ b/packages/devui/src/Button/Button.js @@ -10,13 +10,15 @@ const CommonWrapper = createStyledComponent(commonStyle); export default class Button extends Component { shouldComponentUpdate(nextProps) { - return nextProps.children !== this.props.children || + return ( + nextProps.children !== this.props.children || nextProps.disabled !== this.props.disabled || nextProps.mark !== this.props.mark || nextProps.size !== this.props.size || nextProps.primary !== this.props.primary || nextProps.tooltipPosition !== this.props.tooltipPosition || - nextProps.title !== this.props.title; + nextProps.title !== this.props.title + ); } onMouseUp = e => { @@ -56,15 +58,32 @@ export default class Button extends Component { Button.propTypes = { children: PropTypes.any.isRequired, title: PropTypes.string, - tooltipPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right', - 'bottom-left', 'bottom-right', 'top-left', 'top-right']), + tooltipPosition: PropTypes.oneOf([ + 'top', + 'bottom', + 'left', + 'right', + 'bottom-left', + 'bottom-right', + 'top-left', + 'top-right' + ]), onClick: PropTypes.func, type: PropTypes.string, disabled: PropTypes.bool, primary: PropTypes.bool, size: PropTypes.oneOf(['big', 'normal', 'small']), - mark: PropTypes.oneOf([false, 'base08', 'base09', 'base0A', 'base0B', - 'base0C', 'base0D', 'base0E', 'base0F']), + mark: PropTypes.oneOf([ + false, + 'base08', + 'base09', + 'base0A', + 'base0B', + 'base0C', + 'base0D', + 'base0E', + 'base0F' + ]), theme: PropTypes.object }; diff --git a/packages/devui/src/Button/stories/index.js b/packages/devui/src/Button/stories/index.js index 6fe19ed8..29a89650 100755 --- a/packages/devui/src/Button/stories/index.js +++ b/packages/devui/src/Button/stories/index.js @@ -16,46 +16,62 @@ export const Container = styled.div` storiesOf('Button', module) .addDecorator(withKnobs) - .addWithInfo( - 'default', - '', - () => ( - - - - ) - ) - .addWithInfo( - 'mark', - '', - () => ( - - - - ) - ); + .add('default', () => ( + + + + )) + .add('mark', () => ( + + + + )); diff --git a/packages/devui/src/Button/styles/common.js b/packages/devui/src/Button/styles/common.js index 7ae1a257..b3547507 100644 --- a/packages/devui/src/Button/styles/common.js +++ b/packages/devui/src/Button/styles/common.js @@ -2,7 +2,7 @@ import { css } from 'styled-components'; import { fadeIn } from '../../utils/animations'; import colorEffect from '../../utils/color'; -const both = (tooltipPosition) => { +const both = tooltipPosition => { switch (tooltipPosition) { case 'bottom': return ` @@ -46,7 +46,7 @@ const both = (tooltipPosition) => { } }; -const before = (tooltipPosition) => { +const before = tooltipPosition => { switch (tooltipPosition) { case 'bottom-left': return ` @@ -110,12 +110,13 @@ const after = (tooltipPosition, color) => { } }; -const getDirection = (tooltipPosition) => { - return (tooltipPosition.indexOf('-') > 0) ? - tooltipPosition.substring(0, tooltipPosition.indexOf('-')) : tooltipPosition; +const getDirection = tooltipPosition => { + return tooltipPosition.indexOf('-') > 0 + ? tooltipPosition.substring(0, tooltipPosition.indexOf('-')) + : tooltipPosition; }; -const getSize = (size) => { +const getSize = size => { switch (size) { case 'big': return 'min-height: 34px; padding: 2px 12px;'; @@ -144,8 +145,13 @@ export const commonStyle = ({ theme, mark, size }) => css` pointer-events: none; } - ${mark && ` - background-color: ${colorEffect(theme[mark], 'fade', theme.light ? 0.92 : 0.82)}; + ${mark && + ` + background-color: ${colorEffect( + theme[mark], + 'fade', + theme.light ? 0.92 : 0.82 + )}; > svg { color: ${theme[mark]}; @@ -158,7 +164,13 @@ export const commonStyle = ({ theme, mark, size }) => css` } `; -export const tooltipStyle = ({ theme, tooltipTitle, tooltipPosition, mark, size }) => css` +export const tooltipStyle = ({ + theme, + tooltipTitle, + tooltipPosition, + mark, + size +}) => css` ${commonStyle({ theme, mark, size })} &:before { @@ -170,7 +182,9 @@ export const tooltipStyle = ({ theme, tooltipTitle, tooltipPosition, mark, size border-radius: 3px; background: ${theme.base01}; border: 1px solid ${theme.base02}; - box-shadow: 1px 1px 2px -1px ${theme.base02}, 1px 1px 2px 0px ${theme.base02}; + box-shadow: 1px 1px 2px -1px ${theme.base02}, 1px 1px 2px 0px ${ + theme.base02 +}; } &:after, @@ -194,7 +208,8 @@ export const tooltipStyle = ({ theme, tooltipTitle, tooltipPosition, mark, size ${theme.type === 'material' ? `animation: ${fadeIn} 500ms;` : ''} } - ${theme.type !== 'material' && ` + ${theme.type !== 'material' && + ` &:after { content: ""; border-style: solid; diff --git a/packages/devui/src/Button/styles/default.js b/packages/devui/src/Button/styles/default.js index 1d5a2520..b2957d89 100644 --- a/packages/devui/src/Button/styles/default.js +++ b/packages/devui/src/Button/styles/default.js @@ -11,21 +11,30 @@ export const style = ({ theme, primary, disabled }) => css` margin: auto 0; border: 1px solid ${theme.base02}; border-radius: 4px; - ${primary ? ` + ${ + primary + ? ` background-color: ${theme.base05}; color: ${theme.base00}; - ` : ` + ` + : ` background-color: ${theme.base01}; color: ${theme.base05}; - `} - ${disabled ? ` + ` + } + ${ + disabled + ? ` cursor: not-allowed; opacity: 0.6; - ` : ` + ` + : ` cursor: pointer; - `} + ` + } - ${!disabled && ` + ${!disabled && + ` &:hover, &:focus { background-color: ${primary ? theme.base07 : theme.base02}; diff --git a/packages/devui/src/Button/styles/material.js b/packages/devui/src/Button/styles/material.js index 3eb1d869..fb07cf81 100644 --- a/packages/devui/src/Button/styles/material.js +++ b/packages/devui/src/Button/styles/material.js @@ -13,20 +13,24 @@ export const style = ({ theme, primary, disabled }) => css` text-transform: uppercase; margin: auto 0; background-color: ${primary ? theme.base05 : theme.base01}; - ${disabled ? ` + ${disabled + ? ` cursor: not-allowed; color: ${theme.base04}; opacity: 0.6; - ` : ` + ` + : ` cursor: pointer; color: ${primary ? theme.base00 : theme.base05}; `} - ${!disabled ? ` + ${!disabled + ? ` box-shadow: 0 2px 2px 0 ${theme.base03}, 0 3px 1px -2px ${theme.base02}, 0 1px 5px 0 ${theme.base02}; - ` : ''} + ` + : ''} &:hover, &:focus:not(:active) { diff --git a/packages/devui/src/Container/styles/index.js b/packages/devui/src/Container/styles/index.js index 912943ca..33172f49 100644 --- a/packages/devui/src/Container/styles/index.js +++ b/packages/devui/src/Container/styles/index.js @@ -10,15 +10,23 @@ export const MainContainerWrapper = styled.div` color: ${props => props.theme.base07}; font-size: 12px; - div, input, textarea, keygen, select, button { - font-family: ${props => props.theme.fontFamily || 'monaco, monospace'}; - } + div, + input, + textarea, + keygen, + select, + button { + font-family: ${props => props.theme.fontFamily || 'monaco, monospace'}; + } - .CodeMirror div, pre, .monitor-LogMonitor * { - font-family: ${props => props.theme.codeFontFamily || props.theme.fontFamily || 'monospace'}; - } + .CodeMirror div, + pre, + .monitor-LogMonitor * { + font-family: ${props => + props.theme.codeFontFamily || props.theme.fontFamily || 'monospace'}; + } - .monitor { + .monitor { flex-grow: 1; display: flex; flex-flow: column nowrap; diff --git a/packages/devui/src/ContextMenu/ContextMenu.js b/packages/devui/src/ContextMenu/ContextMenu.js index f398371a..259ce93a 100644 --- a/packages/devui/src/ContextMenu/ContextMenu.js +++ b/packages/devui/src/ContextMenu/ContextMenu.js @@ -12,8 +12,10 @@ export default class ContextMenu extends Component { } componentWillReceiveProps(nextProps) { - if (nextProps.items !== this.props.items || - nextProps.visible !== this.props.visible) { + if ( + nextProps.items !== this.props.items || + nextProps.visible !== this.props.visible + ) { this.updateItems(nextProps.items); } } @@ -32,7 +34,7 @@ export default class ContextMenu extends Component { e.target.blur(); }; - onClick = (e) => { + onClick = e => { this.props.onClick(e.target.value); }; @@ -78,7 +80,7 @@ export default class ContextMenu extends Component { }); } - menuRef = (c) => { + menuRef = c => { this.menu = c; }; diff --git a/packages/devui/src/ContextMenu/stories/index.js b/packages/devui/src/ContextMenu/stories/index.js index ea49c5bd..6e358132 100644 --- a/packages/devui/src/ContextMenu/stories/index.js +++ b/packages/devui/src/ContextMenu/stories/index.js @@ -16,18 +16,14 @@ export const Container = styled.div` storiesOf('ContextMenu', module) .addDecorator(withKnobs) - .addWithInfo( - 'default', - '', - () => ( - - - - ) - ); + .add('default', () => ( + + + + )); diff --git a/packages/devui/src/ContextMenu/styles/index.js b/packages/devui/src/ContextMenu/styles/index.js index 75f45fd6..901da052 100644 --- a/packages/devui/src/ContextMenu/styles/index.js +++ b/packages/devui/src/ContextMenu/styles/index.js @@ -1,11 +1,13 @@ import { css } from 'styled-components'; export default ({ theme, left, top, visible }) => css` - ${visible ? ` + ${visible + ? ` visibility: visible; opacity: 1; transition: opacity 0.2s linear; - ` : ` + ` + : ` visibility: hidden; opacity: 0; transition: visibility 0s 0.2s, opacity 0.2s linear; @@ -36,7 +38,7 @@ export default ({ theme, left, top, visible }) => css` color: ${theme.base07}; } &:focus { - outline:0; + outline: 0; } } `; diff --git a/packages/devui/src/Dialog/Dialog.js b/packages/devui/src/Dialog/Dialog.js index 8d72bae5..aff3e709 100644 --- a/packages/devui/src/Dialog/Dialog.js +++ b/packages/devui/src/Dialog/Dialog.js @@ -52,47 +52,47 @@ export default class Dialog extends (PureComponent || Component) { {!noHeader && (
{schema ? schema.title || title : title}
- {!modal && } + {!modal && }
)}
{children} {schema && (
- {!noFooter && - ( + {!noFooter && ( - ) - } + )}
)}
- { - !noFooter && - (actions ? -
- {submitText ? - [...actions, - ] - : actions - } -
- : -
- - -
- ) - } + : actions} + + ) : ( +
+ + +
+ ))} ); diff --git a/packages/devui/src/Dialog/stories/index.js b/packages/devui/src/Dialog/stories/index.js index 9b3a7656..9f1abe6e 100755 --- a/packages/devui/src/Dialog/stories/index.js +++ b/packages/devui/src/Dialog/stories/index.js @@ -7,40 +7,33 @@ import { schema, uiSchema, formData } from '../../Form/stories/schema'; storiesOf('Dialog', module) .addDecorator(withKnobs) - .addWithInfo( - 'default', - '', - () => ( - - ) - ) - .addWithInfo( - 'with form', - '', - () => ( - - ) - ); + .add('default', () => ( + + {text('children', 'Hello Dialog!')} + + )) + .add('with form', () => ( + + )); diff --git a/packages/devui/src/Dialog/styles/default.js b/packages/devui/src/Dialog/styles/default.js index f12c9276..5da5ecea 100644 --- a/packages/devui/src/Dialog/styles/default.js +++ b/packages/devui/src/Dialog/styles/default.js @@ -36,10 +36,8 @@ export const style = ({ theme, open, fullWidth }) => css` border: 1px outset ${theme.base01}; border-radius: 2px; background-color: ${theme.base00}; - box-shadow: - 0 9px 46px 8px rgba(0, 0, 0, 0.14), - 0 11px 15px -7px rgba(0, 0, 0, 0.12), - 0 24px 38px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), + 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); > div.mc-dialog--header { display: flex; @@ -76,15 +74,23 @@ export const style = ({ theme, open, fullWidth }) => css` > form { padding: 0; - - > .form-group { margin-bottom: 0; } - > div > fieldset { - legend { display: none; } - #root__description { margin-top: 0; } + > .form-group { + margin-bottom: 0; } - .mc-dialog--hidden { display: none; } + > div > fieldset { + legend { + display: none; + } + #root__description { + margin-top: 0; + } + } + + .mc-dialog--hidden { + display: none; + } } } @@ -102,7 +108,7 @@ export const style = ({ theme, open, fullWidth }) => css` margin: 0 -16px -16px; padding: 2px 10px; border-top: 1px solid ${theme.base03}; - + > button { margin-left: 5px; } diff --git a/packages/devui/src/Dialog/styles/material.js b/packages/devui/src/Dialog/styles/material.js index 2df5397f..d5abfac5 100644 --- a/packages/devui/src/Dialog/styles/material.js +++ b/packages/devui/src/Dialog/styles/material.js @@ -35,10 +35,8 @@ export const style = ({ theme, open, fullWidth }) => css` margin-bottom: 16px; border: none; background-color: ${theme.base00}; - box-shadow: - 0 9px 46px 8px rgba(0, 0, 0, 0.14), - 0 11px 15px -7px rgba(0, 0, 0, 0.12), - 0 24px 38px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), + 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); > div.mc-dialog--header { display: flex; @@ -73,15 +71,23 @@ export const style = ({ theme, open, fullWidth }) => css` > form { padding: 0; - - > .form-group { margin-bottom: 0; } - > div > fieldset { - legend { display: none; } - #root__description { margin-top: 0; } + > .form-group { + margin-bottom: 0; } - .mc-dialog--hidden { display: none; } + > div > fieldset { + legend { + display: none; + } + #root__description { + margin-top: 0; + } + } + + .mc-dialog--hidden { + display: none; + } } } diff --git a/packages/devui/src/Editor/Editor.js b/packages/devui/src/Editor/Editor.js index f7609598..fc99a4f8 100644 --- a/packages/devui/src/Editor/Editor.js +++ b/packages/devui/src/Editor/Editor.js @@ -4,28 +4,27 @@ import styled from 'styled-components'; import CodeMirror from 'codemirror'; import { defaultStyle, themedStyle } from './styles'; -const EditorContainer = styled.div('', - ({ theme }) => (theme.scheme === 'default' && theme.light ? defaultStyle : themedStyle(theme)) +const EditorContainer = styled.div('', ({ theme }) => + theme.scheme === 'default' && theme.light ? defaultStyle : themedStyle(theme) ); export default class Editor extends Component { componentDidMount() { - this.cm = CodeMirror( // eslint-disable-line new-cap - this.node, - { - value: this.props.value, - mode: this.props.mode, - lineNumbers: this.props.lineNumbers, - lineWrapping: this.props.lineWrapping, - readOnly: this.props.readOnly, - autofocus: this.props.autofocus, - foldGutter: this.props.foldGutter, - gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'] - } - ); + this.cm = CodeMirror(this.node, { + value: this.props.value, + mode: this.props.mode, + lineNumbers: this.props.lineNumbers, + lineWrapping: this.props.lineWrapping, + readOnly: this.props.readOnly, + autofocus: this.props.autofocus, + foldGutter: this.props.foldGutter, + gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'] + }); if (this.props.onChange) { - this.cm.on('change', (doc, change) => { this.props.onChange(doc.getValue(), change); }); + this.cm.on('change', (doc, change) => { + this.props.onChange(doc.getValue(), change); + }); } } diff --git a/packages/devui/src/Editor/stories/WithTabs.js b/packages/devui/src/Editor/stories/WithTabs.js index 06452a46..265992c3 100644 --- a/packages/devui/src/Editor/stories/WithTabs.js +++ b/packages/devui/src/Editor/stories/WithTabs.js @@ -34,7 +34,9 @@ export default class WithTabs extends Component { } ]} selected={this.state.selected} - onClick={selected => { this.setState({ selected }); }} + onClick={selected => { + this.setState({ selected }); + }} align={select('align', ['left', 'right', 'center'], 'left')} /> ); diff --git a/packages/devui/src/Editor/stories/index.js b/packages/devui/src/Editor/stories/index.js index 591fdec3..7c48b3e6 100755 --- a/packages/devui/src/Editor/stories/index.js +++ b/packages/devui/src/Editor/stories/index.js @@ -15,9 +15,8 @@ function getThemes() { storiesOf('Editor', module) .addDecorator(withKnobs) - .addWithInfo( + .add( 'default', - 'Based on [CodeMirror](http://codemirror.net/).', () => ( - ) + ), + { info: 'Based on [CodeMirror](http://codemirror.net/).' } ) - .addWithInfo( - 'with tabs', - '', - () => ( - - ) - ); + .add('with tabs', () => ( + + )); diff --git a/packages/devui/src/Editor/styles/index.js b/packages/devui/src/Editor/styles/index.js index 8845f26e..f92082fc 100644 --- a/packages/devui/src/Editor/styles/index.js +++ b/packages/devui/src/Editor/styles/index.js @@ -19,37 +19,79 @@ export const themedStyle = theme => css` background-color: ${theme.base00}; color: ${theme.base04}; - .cm-header { color: ${theme.base05}; } - .cm-quote { color: ${theme.base09}; } + .cm-header { + color: ${theme.base05}; + } + .cm-quote { + color: ${theme.base09}; + } - .cm-keyword { color: ${theme.base0F}; } - .cm-atom { color: ${theme.base0F}; } - .cm-number { color: ${theme.base0F}; } - .cm-def { color: ${theme.base0D}; } + .cm-keyword { + color: ${theme.base0F}; + } + .cm-atom { + color: ${theme.base0F}; + } + .cm-number { + color: ${theme.base0F}; + } + .cm-def { + color: ${theme.base0D}; + } - .cm-variable { color: ${theme.base05}; } - .cm-variable-2 { color: ${theme.base0A}; } - .cm-variable-3 { color: ${theme.base0E}; } + .cm-variable { + color: ${theme.base05}; + } + .cm-variable-2 { + color: ${theme.base0A}; + } + .cm-variable-3 { + color: ${theme.base0E}; + } - .cm-property { color: ${theme.base0C}; } - .cm-operator { color: ${theme.base0E}; } + .cm-property { + color: ${theme.base0C}; + } + .cm-operator { + color: ${theme.base0E}; + } .cm-comment { color: ${theme.base05}; font-style: italic; } - .cm-string { color: ${theme.base0B}; } - .cm-string-2 { color: ${theme.base0A}; } + .cm-string { + color: ${theme.base0B}; + } + .cm-string-2 { + color: ${theme.base0A}; + } - .cm-meta { color: ${theme.base0B}; } - .cm-qualifier { color: ${theme.base0A}; } - .cm-builtin { color: ${theme.base0F}; } - .cm-bracket { color: ${theme.base09}; } - .CodeMirror-matchingbracket { color: ${theme.base0B}; } - .CodeMirror-nonmatchingbracket { color: ${theme.base08}; } - .cm-tag { color: ${theme.base02}; } - .cm-attribute { color: ${theme.base0C}; } + .cm-meta { + color: ${theme.base0B}; + } + .cm-qualifier { + color: ${theme.base0A}; + } + .cm-builtin { + color: ${theme.base0F}; + } + .cm-bracket { + color: ${theme.base09}; + } + .CodeMirror-matchingbracket { + color: ${theme.base0B}; + } + .CodeMirror-nonmatchingbracket { + color: ${theme.base08}; + } + .cm-tag { + color: ${theme.base02}; + } + .cm-attribute { + color: ${theme.base0C}; + } .cm-hr { color: transparent; @@ -62,7 +104,9 @@ export const themedStyle = theme => css` cursor: pointer; } - .cm-special { color: ${theme.base0E}; } + .cm-special { + color: ${theme.base0E}; + } .cm-em { color: #999; @@ -70,7 +114,9 @@ export const themedStyle = theme => css` text-decoration-style: dotted; } - .cm-strong { color: ${theme.base01}; } + .cm-strong { + color: ${theme.base01}; + } .cm-error, .cm-invalidchar { @@ -78,7 +124,9 @@ export const themedStyle = theme => css` border-bottom: 1px dotted ${theme.base08}; } - div.CodeMirror-selected { background: ${theme.base01}; } + div.CodeMirror-selected { + background: ${theme.base01}; + } .CodeMirror-line::selection, .CodeMirror-line > span::selection, @@ -106,17 +154,27 @@ export const themedStyle = theme => css` padding: 0 5px; } - .CodeMirror-guttermarker-subtle { color: ${theme.base05}; } - .CodeMirror-guttermarker { color: ${theme.base09}; } + .CodeMirror-guttermarker-subtle { + color: ${theme.base05}; + } + .CodeMirror-guttermarker { + color: ${theme.base09}; + } .CodeMirror-gutter .CodeMirror-gutter-text { color: ${theme.base05}; } - .CodeMirror-cursor { border-left: 1px solid #819090; } + .CodeMirror-cursor { + border-left: 1px solid #819090; + } - .cm-fat-cursor .CodeMirror-cursor { background: ${theme.base02}; } - .cm-animate-fat-cursor { background-color: ${theme.base02}; } + .cm-fat-cursor .CodeMirror-cursor { + background: ${theme.base02}; + } + .cm-animate-fat-cursor { + background-color: ${theme.base02}; + } .CodeMirror-activeline-background { background: ${theme.base07}; diff --git a/packages/devui/src/Form/Form.js b/packages/devui/src/Form/Form.js index 3917cf58..2a289b71 100644 --- a/packages/devui/src/Form/Form.js +++ b/packages/devui/src/Form/Form.js @@ -10,16 +10,30 @@ const FormContainer = createStyledComponent(styles, JSONSchemaForm); export default class Form extends (PureComponent || Component) { render() { - const { widgets, children, submitText, primaryButton, noSubmit, ...rest } = this.props; + const { + widgets, + children, + submitText, + primaryButton, + noSubmit, + ...rest + } = this.props; return ( - { - noSubmit ?