feat(instances): theme resizer

consoles/my-joy-instances/src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { HelmetProvider } from 'react-helmet-async';
-import { ThemeProvider } from 'styled-components';
+import ThemeProvider from 'joyent-theme-resizer';
 import { Provider as ReduxProvider } from 'react-redux';
 import { ApolloProvider } from 'react-apollo';
 import { BrowserRouter } from 'react-router-dom';

packages/theme-resizer/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["joyent-portal"]
+}

packages/theme-resizer/.dockerignore

@@ -0,0 +1,9 @@
+src/components/base/*.css
+node_modules
+coverage
+.nyc_output
+docs/static
+!docs/static/index.html
+docs/node_modules
+dist
+package-lock.json

packages/theme-resizer/.eslintignore

@@ -0,0 +1,4 @@
+.nyc_output
+coverage
+dist
+styleguide

packages/theme-resizer/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "extends": "joyent-portal",
+  "rules": {
+    "no-console": 1,
+    "new-cap": 0,
+    "jsx-a11y/href-no-hash": 0
+  }
+}

packages/theme-resizer/.tern-project

@@ -0,0 +1,9 @@
+{
+  "libs": ["ecmascript", "browser"],
+  "plugins": {
+    "doc_comment": true,
+    "local-scope": true,
+    "jsx": true,
+    "node": true
+  }
+}

packages/theme-resizer/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "joyent-theme-resizer",
+  "version": "5.1.0",
+  "private": true,
+  "license": "MPL-2.0",
+  "repository": "github:yldio/joyent-portal",
+  "main": "dist/umd/index.js",
+  "jsnext:main": "dist/es/index.js",
+  "module": "dist/es/index.js",
+  "files": ["dist"],
+  "scripts": {
+    "dev": "NODE_ENV=development redrun -p build:es build:umd -- --watch --source-maps inline",
+    "build:test": "NODE_ENV=production redrun build:lib",
+    "build:lib": "NODE_ENV=production redrun -p build:es build:umd",
+    "build:bundle": "echo 0",
+    "prepublish": "NODE_ENV=production redrun build:lib",
+    "lint": "redrun lint:ci -- --fix",
+    "lint:ci": "NODE_ENV=test eslint . --ext .js --ext .md",
+    "test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
+    "test:ci": "redrun test",
+    "build:es": "babel src --out-dir dist/es",
+    "build:umd": "SSR=1 UMD=1 babel src --out-dir dist/umd"
+  },
+  "dependencies": {
+    "redux-actions": "^2.4.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-preset-joyent-portal": "^7.0.1",
+    "eslint": "^4.19.1",
+    "eslint-config-joyent-portal": "^3.3.1",
+    "joyent-react-scripts": "^8.2.0",
+    "react": "^16.3.1",
+    "react-redux": "^5.0.7",
+    "redrun": "^6.0.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.1",
+    "react-redux": "^5.0.7"
+  }
+}

packages/theme-resizer/readme.md

@@ -0,0 +1,29 @@
+# icons
+
+[![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg?style=flat-square)](https://opensource.org/licenses/MPL-2.0)
+[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
+
+## Table of Contents
+
+* [Install](#install)
+* [Usage](#usage)
+* [License](#license)
+
+## Install
+
+```
+yarn add --dev joyent-icons
+```
+
+## Usage
+
+```js
+import React from 'react';
+import { Arrow } from 'joyent-icons';
+
+export default () => <Arrow />;
+```
+
+## License
+
+MPL-2.0

packages/theme-resizer/src/index.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { ValueBreakpoints } from 'joyent-ui-toolkit';
+import debounce from 'lodash.debounce';
+
+export default class extends Component {
+  state = {
+    screen: 'desktop'
+  };
+
+  setScreen = () => {
+    const screen =
+      window.innerWidth <= ValueBreakpoints.small.upper ? 'mobile' : 'desktop';
+    this.setState({ screen });
+  };
+
+  componentWillMount() {
+    window.addEventListener('resize', debounce(this.setScreen, 100));
+    this.setScreen();
+  }
+
+  render() {
+    const { theme, children, ...props } = this.props;
+    const { screen } = this.state;
+
+    return (
+      <ThemeProvider theme={{ ...theme, screen }} {...props}>
+        {children}
+      </ThemeProvider>
+    );
+  }
+}

yarn.lock

@@ -9194,6 +9194,15 @@ redux-actions@^2.2.1:
     lodash-es "^4.17.4"
     reduce-reducers "^0.1.0"
 
+redux-actions@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/redux-actions/-/redux-actions-2.4.0.tgz#620df42d264af88366b4e919c46ae68da7c9ce7c"
+  dependencies:
+    invariant "^2.2.1"
+    lodash "^4.13.1"
+    lodash-es "^4.17.4"
+    reduce-reducers "^0.1.0"
+
 redux-form@^7.3.0:
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-7.3.0.tgz#b92ef1639c86a6009b0821aacfc80ad8b5ac8c05"