From 1e8e89b3c8a6a83d69cc51edde3186f56a792453 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Moreira?= Date: Tue, 29 May 2018 18:05:41 +0100 Subject: [PATCH] feat(instances): theme resizer --- consoles/my-joy-instances/src/index.js | 2 +- packages/theme-resizer/.babelrc | 3 ++ packages/theme-resizer/.dockerignore | 9 ++++++ packages/theme-resizer/.eslintignore | 4 +++ packages/theme-resizer/.eslintrc | 8 +++++ packages/theme-resizer/.tern-project | 9 ++++++ packages/theme-resizer/.yarnclean | 0 packages/theme-resizer/package.json | 41 ++++++++++++++++++++++++++ packages/theme-resizer/readme.md | 29 ++++++++++++++++++ packages/theme-resizer/src/index.js | 32 ++++++++++++++++++++ yarn.lock | 9 ++++++ 11 files changed, 145 insertions(+), 1 deletion(-) create mode 100644 packages/theme-resizer/.babelrc create mode 100644 packages/theme-resizer/.dockerignore create mode 100644 packages/theme-resizer/.eslintignore create mode 100644 packages/theme-resizer/.eslintrc create mode 100644 packages/theme-resizer/.tern-project create mode 100644 packages/theme-resizer/.yarnclean create mode 100644 packages/theme-resizer/package.json create mode 100644 packages/theme-resizer/readme.md create mode 100644 packages/theme-resizer/src/index.js diff --git a/consoles/my-joy-instances/src/index.js b/consoles/my-joy-instances/src/index.js index 6b2670b6..4ef49c8a 100644 --- a/consoles/my-joy-instances/src/index.js +++ b/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'; diff --git a/packages/theme-resizer/.babelrc b/packages/theme-resizer/.babelrc new file mode 100644 index 00000000..594acfe3 --- /dev/null +++ b/packages/theme-resizer/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["joyent-portal"] +} diff --git a/packages/theme-resizer/.dockerignore b/packages/theme-resizer/.dockerignore new file mode 100644 index 00000000..06ad4916 --- /dev/null +++ b/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 diff --git a/packages/theme-resizer/.eslintignore b/packages/theme-resizer/.eslintignore new file mode 100644 index 00000000..0dd1156c --- /dev/null +++ b/packages/theme-resizer/.eslintignore @@ -0,0 +1,4 @@ +.nyc_output +coverage +dist +styleguide \ No newline at end of file diff --git a/packages/theme-resizer/.eslintrc b/packages/theme-resizer/.eslintrc new file mode 100644 index 00000000..54492a1a --- /dev/null +++ b/packages/theme-resizer/.eslintrc @@ -0,0 +1,8 @@ +{ + "extends": "joyent-portal", + "rules": { + "no-console": 1, + "new-cap": 0, + "jsx-a11y/href-no-hash": 0 + } +} diff --git a/packages/theme-resizer/.tern-project b/packages/theme-resizer/.tern-project new file mode 100644 index 00000000..f2e07d3f --- /dev/null +++ b/packages/theme-resizer/.tern-project @@ -0,0 +1,9 @@ +{ + "libs": ["ecmascript", "browser"], + "plugins": { + "doc_comment": true, + "local-scope": true, + "jsx": true, + "node": true + } +} diff --git a/packages/theme-resizer/.yarnclean b/packages/theme-resizer/.yarnclean new file mode 100644 index 00000000..e69de29b diff --git a/packages/theme-resizer/package.json b/packages/theme-resizer/package.json new file mode 100644 index 00000000..c1ccc2c7 --- /dev/null +++ b/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" + } +} diff --git a/packages/theme-resizer/readme.md b/packages/theme-resizer/readme.md new file mode 100644 index 00000000..d2c1cd2d --- /dev/null +++ b/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 () => ; +``` + +## License + +MPL-2.0 diff --git a/packages/theme-resizer/src/index.js b/packages/theme-resizer/src/index.js new file mode 100644 index 00000000..5d07035a --- /dev/null +++ b/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 ( + + {children} + + ); + } +} diff --git a/yarn.lock b/yarn.lock index ae4165ca..3fe9b646 100644 --- a/yarn.lock +++ b/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"